Move ExtraWeapons to ExtraWeaponsGrid
And put it in ExtraContainer
This commit is contained in:
parent
f6bc76e1d1
commit
ba52ba4fb0
5 changed files with 156 additions and 117 deletions
47
components/extra/ExtraWeaponsGrid/index.scss
Normal file
47
components/extra/ExtraWeaponsGrid/index.scss
Normal file
|
|
@ -0,0 +1,47 @@
|
|||
.ExtraWeapons {
|
||||
#ExtraWeaponGrid {
|
||||
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);
|
||||
|
||||
.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/ExtraWeaponsGrid/index.tsx
Normal file
95
components/extra/ExtraWeaponsGrid/index.tsx
Normal file
|
|
@ -0,0 +1,95 @@
|
|||
import React, { useState } from 'react'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import Switch from '~components/common/Switch'
|
||||
import WeaponUnit from '~components/weapon/WeaponUnit'
|
||||
|
||||
import type { SearchableObject } from '~types'
|
||||
|
||||
import './index.scss'
|
||||
import classNames from 'classnames'
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
grid: GridArray<GridWeapon>
|
||||
enabled: boolean
|
||||
editable: boolean
|
||||
found?: boolean
|
||||
offset: number
|
||||
removeWeapon: (id: string) => void
|
||||
updateExtra: (enabled: boolean) => void
|
||||
updateObject: (object: SearchableObject, position: number) => void
|
||||
updateUncap: (id: string, position: number, uncap: number) => void
|
||||
}
|
||||
|
||||
// Constants
|
||||
const EXTRA_WEAPONS_COUNT = 3
|
||||
|
||||
const ExtraWeaponsGrid = ({
|
||||
grid,
|
||||
enabled,
|
||||
editable,
|
||||
found,
|
||||
offset,
|
||||
removeWeapon,
|
||||
updateExtra,
|
||||
updateObject,
|
||||
updateUncap,
|
||||
}: Props) => {
|
||||
const { t } = useTranslation('common')
|
||||
|
||||
const classes = classNames({
|
||||
ExtraWeapons: true,
|
||||
ContainerItem: true,
|
||||
Disabled: !enabled,
|
||||
})
|
||||
|
||||
function onCheckedChange(checked: boolean) {
|
||||
updateExtra(checked)
|
||||
}
|
||||
|
||||
const disabledElement = <></>
|
||||
|
||||
const enabledElement = (
|
||||
<ul id="ExtraWeaponGrid">
|
||||
{Array.from(Array(EXTRA_WEAPONS_COUNT)).map((x, i) => {
|
||||
const itemClasses = classNames({
|
||||
Empty: grid[offset + i] === undefined,
|
||||
})
|
||||
|
||||
return (
|
||||
<li className={itemClasses} key={`grid_unit_${i}`}>
|
||||
<WeaponUnit
|
||||
editable={editable}
|
||||
position={offset + i}
|
||||
unitType={1}
|
||||
gridWeapon={grid[offset + i]}
|
||||
removeWeapon={removeWeapon}
|
||||
updateObject={updateObject}
|
||||
updateUncap={updateUncap}
|
||||
/>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
)
|
||||
|
||||
return (
|
||||
<div className={classes}>
|
||||
<div className="Header">
|
||||
<h3>{t('extra_weapons')}</h3>
|
||||
{editable ? (
|
||||
<Switch
|
||||
name="ExtraWeapons"
|
||||
checked={enabled}
|
||||
onCheckedChange={onCheckedChange}
|
||||
/>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
</div>
|
||||
{enabled ? enabledElement : ''}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ExtraWeaponsGrid
|
||||
|
|
@ -1,59 +0,0 @@
|
|||
.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;
|
||||
margin: 20px auto;
|
||||
max-width: calc($grid-width + 20px);
|
||||
padding: $unit-2x $unit-2x $unit-2x 0;
|
||||
position: relative;
|
||||
left: $unit;
|
||||
|
||||
@include breakpoint(tablet) {
|
||||
left: auto;
|
||||
max-width: auto;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@include breakpoint(phone) {
|
||||
display: flex;
|
||||
gap: $unit-2x;
|
||||
padding: $unit-2x;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
& > span {
|
||||
color: var(--extra-purple-text);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
justify-content: center;
|
||||
line-height: 1.2;
|
||||
font-weight: 500;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
#ExtraWeapons {
|
||||
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);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,48 +0,0 @@
|
|||
import React from 'react'
|
||||
import { useTranslation } from 'next-i18next'
|
||||
import WeaponUnit from '~components/weapon/WeaponUnit'
|
||||
|
||||
import type { SearchableObject } from '~types'
|
||||
|
||||
import './index.scss'
|
||||
|
||||
// Props
|
||||
interface Props {
|
||||
grid: GridArray<GridWeapon>
|
||||
editable: boolean
|
||||
found?: boolean
|
||||
offset: number
|
||||
removeWeapon: (id: string) => void
|
||||
updateObject: (object: SearchableObject, position: number) => void
|
||||
updateUncap: (id: string, position: number, uncap: number) => void
|
||||
}
|
||||
|
||||
const ExtraWeapons = (props: Props) => {
|
||||
const numWeapons: number = 3
|
||||
const { t } = useTranslation('common')
|
||||
|
||||
return (
|
||||
<div className="ExtraGrid Weapons">
|
||||
<span>{t('extra_weapons')}</span>
|
||||
<ul id="ExtraWeapons">
|
||||
{Array.from(Array(numWeapons)).map((x, i) => {
|
||||
return (
|
||||
<li key={`grid_unit_${i}`}>
|
||||
<WeaponUnit
|
||||
editable={props.editable}
|
||||
position={props.offset + i}
|
||||
unitType={1}
|
||||
gridWeapon={props.grid[props.offset + i]}
|
||||
removeWeapon={props.removeWeapon}
|
||||
updateObject={props.updateObject}
|
||||
updateUncap={props.updateUncap}
|
||||
/>
|
||||
</li>
|
||||
)
|
||||
})}
|
||||
</ul>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
export default ExtraWeapons
|
||||
|
|
@ -9,7 +9,7 @@ import debounce from 'lodash.debounce'
|
|||
|
||||
import Alert from '~components/common/Alert'
|
||||
import WeaponUnit from '~components/weapon/WeaponUnit'
|
||||
import ExtraWeapons from '~components/weapon/ExtraWeapons'
|
||||
import ExtraWeaponsGrid from '~components/extra/ExtraWeaponsGrid'
|
||||
import WeaponConflictModal from '~components/weapon/WeaponConflictModal'
|
||||
|
||||
import api from '~utils/api'
|
||||
|
|
@ -348,15 +348,19 @@ const WeaponGrid = (props: Props) => {
|
|||
)
|
||||
})
|
||||
|
||||
const extraGridElement = (
|
||||
<ExtraWeapons
|
||||
grid={appState.grid.weapons.allWeapons}
|
||||
editable={props.editable}
|
||||
offset={numWeapons}
|
||||
removeWeapon={removeWeapon}
|
||||
updateObject={receiveWeaponFromSearch}
|
||||
updateUncap={initiateUncapUpdate}
|
||||
/>
|
||||
const extraElement = (
|
||||
<ExtraContainer>
|
||||
<ExtraWeaponsGrid
|
||||
grid={appState.grid.weapons.allWeapons}
|
||||
enabled={appState.party.extra}
|
||||
editable={props.editable}
|
||||
offset={numWeapons}
|
||||
removeWeapon={removeWeapon}
|
||||
updateExtra={props.updateExtra}
|
||||
updateObject={receiveWeaponFromSearch}
|
||||
updateUncap={initiateUncapUpdate}
|
||||
/>
|
||||
</ExtraContainer>
|
||||
)
|
||||
|
||||
const conflictModal = () => {
|
||||
|
|
|
|||
Loading…
Reference in a new issue