Added GuidebooksGrid and GuidebookUnit
These are the display components for Guidebooks in the WeaponGrid
This commit is contained in:
parent
ba52ba4fb0
commit
76aadfbc15
4 changed files with 450 additions and 0 deletions
109
components/extra/GuidebookUnit/index.scss
Normal file
109
components/extra/GuidebookUnit/index.scss
Normal file
|
|
@ -0,0 +1,109 @@
|
||||||
|
.GuidebookUnit {
|
||||||
|
align-items: center;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
gap: $unit-half;
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: auto;
|
||||||
|
z-index: 0;
|
||||||
|
|
||||||
|
@include breakpoint(tablet) {
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.Button {
|
||||||
|
pointer-events: none;
|
||||||
|
opacity: 0;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover .Button,
|
||||||
|
.Button.Clicked {
|
||||||
|
pointer-events: initial;
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.editable .GuidebookImage:hover {
|
||||||
|
border: $hover-stroke;
|
||||||
|
box-shadow: $hover-shadow;
|
||||||
|
cursor: pointer;
|
||||||
|
transform: $scale-wide;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.empty {
|
||||||
|
min-height: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.filled h3 {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.filled ul {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
& h3,
|
||||||
|
& ul {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
h3 {
|
||||||
|
color: var(--text-primary);
|
||||||
|
font-size: $font-button;
|
||||||
|
font-weight: $normal;
|
||||||
|
line-height: 1.1;
|
||||||
|
margin: 0;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.GuidebookImage {
|
||||||
|
background: var(--extra-purple-card-bg);
|
||||||
|
border: 1px solid rgba(0, 0, 0, 0);
|
||||||
|
border-radius: $unit;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: calc($unit / 4);
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
transition: $duration-zoom all ease-in-out;
|
||||||
|
|
||||||
|
img {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
z-index: 2;
|
||||||
|
|
||||||
|
&.Placeholder {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.icon {
|
||||||
|
position: absolute;
|
||||||
|
height: $unit * 3;
|
||||||
|
width: $unit * 3;
|
||||||
|
z-index: 1;
|
||||||
|
|
||||||
|
svg {
|
||||||
|
transition: $duration-color-fade fill ease-in-out;
|
||||||
|
fill: var(--extra-purple-secondary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.GuidebookName {
|
||||||
|
font-size: $font-name;
|
||||||
|
line-height: 1.2;
|
||||||
|
|
||||||
|
@include breakpoint(phone) {
|
||||||
|
font-size: $font-tiny;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.GuidebookDescription {
|
||||||
|
font-size: $font-small;
|
||||||
|
line-height: 1.2;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
201
components/extra/GuidebookUnit/index.tsx
Normal file
201
components/extra/GuidebookUnit/index.tsx
Normal file
|
|
@ -0,0 +1,201 @@
|
||||||
|
import React, { useEffect, useState } from 'react'
|
||||||
|
import { useRouter } from 'next/router'
|
||||||
|
import { Trans, useTranslation } from 'next-i18next'
|
||||||
|
import classNames from 'classnames'
|
||||||
|
|
||||||
|
import Alert from '~components/common/Alert'
|
||||||
|
import SearchModal from '~components/search/SearchModal'
|
||||||
|
import {
|
||||||
|
ContextMenu,
|
||||||
|
ContextMenuTrigger,
|
||||||
|
ContextMenuContent,
|
||||||
|
} from '~components/common/ContextMenu'
|
||||||
|
import ContextMenuItem from '~components/common/ContextMenuItem'
|
||||||
|
import Button from '~components/common/Button'
|
||||||
|
|
||||||
|
import type { SearchableObject } from '~types'
|
||||||
|
|
||||||
|
import PlusIcon from '~public/icons/Add.svg'
|
||||||
|
import SettingsIcon from '~public/icons/Settings.svg'
|
||||||
|
import './index.scss'
|
||||||
|
|
||||||
|
interface Props {
|
||||||
|
guidebook: Guidebook | undefined
|
||||||
|
position: number
|
||||||
|
editable: boolean
|
||||||
|
removeGuidebook: (id: string) => void
|
||||||
|
updateObject: (object: SearchableObject, position: number) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
const GuidebookUnit = ({
|
||||||
|
guidebook,
|
||||||
|
position,
|
||||||
|
editable,
|
||||||
|
removeGuidebook: sendGuidebookToRemove,
|
||||||
|
updateObject,
|
||||||
|
}: Props) => {
|
||||||
|
// Translations and locale
|
||||||
|
const { t } = useTranslation('common')
|
||||||
|
const router = useRouter()
|
||||||
|
const locale =
|
||||||
|
router.locale && ['en', 'ja'].includes(router.locale) ? router.locale : 'en'
|
||||||
|
|
||||||
|
// State: UI
|
||||||
|
const [searchModalOpen, setSearchModalOpen] = useState(false)
|
||||||
|
const [contextMenuOpen, setContextMenuOpen] = useState(false)
|
||||||
|
const [alertOpen, setAlertOpen] = useState(false)
|
||||||
|
|
||||||
|
// State: Other
|
||||||
|
const [imageUrl, setImageUrl] = useState('')
|
||||||
|
|
||||||
|
// Classes
|
||||||
|
const classes = classNames({
|
||||||
|
GuidebookUnit: true,
|
||||||
|
editable: editable,
|
||||||
|
filled: guidebook !== undefined,
|
||||||
|
empty: guidebook == undefined,
|
||||||
|
})
|
||||||
|
|
||||||
|
const buttonClasses = classNames({
|
||||||
|
Options: true,
|
||||||
|
Clicked: contextMenuOpen,
|
||||||
|
})
|
||||||
|
|
||||||
|
// Hooks
|
||||||
|
useEffect(() => {
|
||||||
|
generateImageUrl()
|
||||||
|
}, [guidebook])
|
||||||
|
|
||||||
|
// Methods: Open layer
|
||||||
|
function openSearchModal() {
|
||||||
|
if (editable) setSearchModalOpen(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
function openRemoveGuidebookAlert() {
|
||||||
|
setAlertOpen(true)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Methods: Handle button clicked
|
||||||
|
function handleButtonClicked() {
|
||||||
|
setContextMenuOpen(!contextMenuOpen)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Methods: Handle open change
|
||||||
|
function handleContextMenuOpenChange(open: boolean) {
|
||||||
|
if (!open) setContextMenuOpen(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
function handleSearchModalOpenChange(open: boolean) {
|
||||||
|
setSearchModalOpen(open)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Methods: Mutate data
|
||||||
|
function removeGuidebook() {
|
||||||
|
if (guidebook) sendGuidebookToRemove(guidebook.id)
|
||||||
|
setAlertOpen(false)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Methods: Image string generation
|
||||||
|
function generateImageUrl() {
|
||||||
|
let imgSrc = guidebook
|
||||||
|
? `${process.env.NEXT_PUBLIC_SIERO_IMG_URL}/guidebooks/book_${guidebook.granblue_id}.png`
|
||||||
|
: ''
|
||||||
|
|
||||||
|
setImageUrl(imgSrc)
|
||||||
|
}
|
||||||
|
|
||||||
|
const placeholderImageUrl = '/images/placeholders/placeholder-guidebook.png'
|
||||||
|
|
||||||
|
// Methods: Layer element rendering
|
||||||
|
const contextMenu = () => {
|
||||||
|
if (editable && guidebook) {
|
||||||
|
return (
|
||||||
|
<>
|
||||||
|
<ContextMenu onOpenChange={handleContextMenuOpenChange}>
|
||||||
|
<ContextMenuTrigger asChild>
|
||||||
|
<Button
|
||||||
|
leftAccessoryIcon={<SettingsIcon />}
|
||||||
|
className={buttonClasses}
|
||||||
|
onClick={handleButtonClicked}
|
||||||
|
/>
|
||||||
|
</ContextMenuTrigger>
|
||||||
|
<ContextMenuContent align="start">
|
||||||
|
<ContextMenuItem onSelect={openRemoveGuidebookAlert}>
|
||||||
|
{t('context.remove')}
|
||||||
|
</ContextMenuItem>
|
||||||
|
</ContextMenuContent>
|
||||||
|
</ContextMenu>
|
||||||
|
{removeAlert()}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
const removeAlert = () => {
|
||||||
|
return (
|
||||||
|
<Alert
|
||||||
|
open={alertOpen}
|
||||||
|
primaryAction={removeGuidebook}
|
||||||
|
primaryActionText={t('modals.weapon.buttons.remove')}
|
||||||
|
cancelAction={() => setAlertOpen(false)}
|
||||||
|
cancelActionText={t('buttons.cancel')}
|
||||||
|
message={
|
||||||
|
<Trans i18nKey="modals.guidebooks.messages.remove">
|
||||||
|
Are you sure you want to remove{' '}
|
||||||
|
<strong>{{ guidebook: guidebook?.name[locale] }}</strong> from your
|
||||||
|
team?
|
||||||
|
</Trans>
|
||||||
|
}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
const searchModal = () => {
|
||||||
|
return (
|
||||||
|
<SearchModal
|
||||||
|
placeholderText={t('search.placeholders.guidebook')}
|
||||||
|
fromPosition={position}
|
||||||
|
object="guidebooks"
|
||||||
|
open={searchModalOpen}
|
||||||
|
onOpenChange={handleSearchModalOpenChange}
|
||||||
|
send={updateObject}
|
||||||
|
/>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
// Methods: Core element rendering
|
||||||
|
const imageElement = (
|
||||||
|
<div className="GuidebookImage" onClick={openSearchModal}>
|
||||||
|
<img
|
||||||
|
alt={guidebook?.name[locale]}
|
||||||
|
className={classNames({
|
||||||
|
GridImage: true,
|
||||||
|
Placeholder: imageUrl === '',
|
||||||
|
})}
|
||||||
|
src={imageUrl !== '' ? imageUrl : placeholderImageUrl}
|
||||||
|
/>
|
||||||
|
{editable ? (
|
||||||
|
<span className="icon">
|
||||||
|
<PlusIcon />
|
||||||
|
</span>
|
||||||
|
) : (
|
||||||
|
''
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
const unitContent = (
|
||||||
|
<>
|
||||||
|
<div className={classes}>
|
||||||
|
{contextMenu()}
|
||||||
|
{imageElement}
|
||||||
|
<h3 className="GuidebookName">{guidebook?.name[locale]}</h3>
|
||||||
|
</div>
|
||||||
|
{searchModal()}
|
||||||
|
</>
|
||||||
|
)
|
||||||
|
|
||||||
|
return unitContent
|
||||||
|
}
|
||||||
|
|
||||||
|
export default GuidebookUnit
|
||||||
45
components/extra/GuidebooksGrid/index.scss
Normal file
45
components/extra/GuidebooksGrid/index.scss
Normal file
|
|
@ -0,0 +1,45 @@
|
||||||
|
.Guidebooks {
|
||||||
|
#GuidebooksGrid {
|
||||||
|
display: grid;
|
||||||
|
gap: $unit-3x;
|
||||||
|
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||||
|
|
||||||
|
@include breakpoint(tablet) {
|
||||||
|
gap: $unit-2x;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint(phone) {
|
||||||
|
gap: $unit;
|
||||||
|
}
|
||||||
|
|
||||||
|
.WeaponUnit .WeaponImage {
|
||||||
|
background: var(--extra-purple-card-bg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.WeaponUnit .WeaponImage .icon svg {
|
||||||
|
fill: var(--extra-purple-secondary);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ExtraGrid.Weapons {
|
||||||
|
background: var(--extra-purple-bg);
|
||||||
|
border-radius: $card-corner;
|
||||||
|
box-sizing: border-box;
|
||||||
|
display: grid;
|
||||||
|
grid-template-columns: 1.42fr 3fr;
|
||||||
|
justify-content: center;
|
||||||
|
|
||||||
|
@include breakpoint(tablet) {
|
||||||
|
left: auto;
|
||||||
|
max-width: auto;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
@include breakpoint(phone) {
|
||||||
|
display: flex;
|
||||||
|
gap: $unit-2x;
|
||||||
|
padding: $unit-2x;
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
95
components/extra/GuidebooksGrid/index.tsx
Normal file
95
components/extra/GuidebooksGrid/index.tsx
Normal file
|
|
@ -0,0 +1,95 @@
|
||||||
|
import React, { useEffect, useState } from 'react'
|
||||||
|
import { useTranslation } from 'next-i18next'
|
||||||
|
import Switch from '~components/common/Switch'
|
||||||
|
import GuidebookUnit from '../GuidebookUnit'
|
||||||
|
import classNames from 'classnames'
|
||||||
|
|
||||||
|
import type { SearchableObject } from '~types'
|
||||||
|
|
||||||
|
import './index.scss'
|
||||||
|
|
||||||
|
// Props
|
||||||
|
interface Props {
|
||||||
|
grid: GuidebookList
|
||||||
|
editable: boolean
|
||||||
|
offset: number
|
||||||
|
removeGuidebook: (id: string) => void
|
||||||
|
updateObject: (object: SearchableObject, position: number) => void
|
||||||
|
}
|
||||||
|
|
||||||
|
// Constants
|
||||||
|
const EXTRA_WEAPONS_COUNT = 3
|
||||||
|
|
||||||
|
const GuidebooksGrid = ({
|
||||||
|
grid,
|
||||||
|
editable,
|
||||||
|
removeGuidebook,
|
||||||
|
updateObject,
|
||||||
|
}: Props) => {
|
||||||
|
const { t } = useTranslation('common')
|
||||||
|
|
||||||
|
const [enabled, setEnabled] = useState(false)
|
||||||
|
|
||||||
|
const classes = classNames({
|
||||||
|
Guidebooks: true,
|
||||||
|
ContainerItem: true,
|
||||||
|
Disabled: !enabled,
|
||||||
|
})
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
console.log('Grid updated')
|
||||||
|
if (hasGuidebooks()) setEnabled(true)
|
||||||
|
}, [grid])
|
||||||
|
|
||||||
|
function hasGuidebooks() {
|
||||||
|
return grid && (grid[0] || grid[1] || grid[2])
|
||||||
|
}
|
||||||
|
|
||||||
|
function onCheckedChange(checked: boolean) {
|
||||||
|
setEnabled(checked)
|
||||||
|
}
|
||||||
|
|
||||||
|
const enabledElement = (
|
||||||
|
<ul id="GuidebooksGrid">
|
||||||
|
{Array.from(Array(EXTRA_WEAPONS_COUNT)).map((x, i) => {
|
||||||
|
const itemClasses = classNames({
|
||||||
|
Empty: grid && grid[i] === undefined,
|
||||||
|
})
|
||||||
|
|
||||||
|
return (
|
||||||
|
<li className={itemClasses} key={`grid_unit_${i}`}>
|
||||||
|
<GuidebookUnit
|
||||||
|
editable={editable}
|
||||||
|
position={i}
|
||||||
|
guidebook={grid[i]}
|
||||||
|
removeGuidebook={removeGuidebook}
|
||||||
|
updateObject={updateObject}
|
||||||
|
/>
|
||||||
|
</li>
|
||||||
|
)
|
||||||
|
})}
|
||||||
|
</ul>
|
||||||
|
)
|
||||||
|
|
||||||
|
const guidebookElement = (
|
||||||
|
<div className={classes}>
|
||||||
|
<div className="Header">
|
||||||
|
<h3>{t('sephira_guidebooks')}</h3>
|
||||||
|
{editable ? (
|
||||||
|
<Switch
|
||||||
|
name="Guidebooks"
|
||||||
|
checked={enabled}
|
||||||
|
onCheckedChange={onCheckedChange}
|
||||||
|
/>
|
||||||
|
) : (
|
||||||
|
''
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
{enabled ? enabledElement : ''}
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
|
||||||
|
return editable || (enabled && !editable) ? guidebookElement : <div />
|
||||||
|
}
|
||||||
|
|
||||||
|
export default GuidebooksGrid
|
||||||
Loading…
Reference in a new issue