granblue.team/hensei-web
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move SearchModal to SummonGrid

Browse source
This commit is contained in:
Justin Edmund 2022-01-28 22:58:00 -08:00
parent b08ac89f9b
commit df9a91cf96
3 changed files with 44 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
components/ExtraSummons/index.tsx
View file

@ -17,16 +17,12 @@ interface Props {
exists: boolean
found?: boolean
offset: number
onSelect: (type: GridType, summon: Summon, position: number) => void
onClick: (position: number) => void
}
const ExtraSummons = (props: Props) => {
const numSummons: number = 2
function receiveWeapon(summon: Summon, position: number) {
props.onSelect(GridType.Summon, summon, position)
}
return (
<div id="ExtraSummons">
<span>Sub Aura Summons</span>
@ -36,8 +32,8 @@ const ExtraSummons = (props: Props) => {
return (
<li key={`grid_unit_${i}`} >
<SummonUnit
editable={props.editable}
onReceiveData={receiveWeapon}
onClick={() => { props.onClick(props.offset + i) }}
editable={props.editable}
position={props.offset + i}
unitType={1}
summon={props.grid[props.offset + i]}

43
components/SummonGrid/index.tsx
View file

@ -1,4 +1,7 @@
import React from 'react'
import React, { useState } from 'react'
import { useModal as useModal } from '~utils/useModal'
import SearchModal from '~components/SearchModal'
import ExtraSummons from '~components/ExtraSummons'
import SummonUnit from '~components/SummonUnit'
@ -26,21 +29,40 @@ interface Props {
}
const SummonGrid = (props: Props) => {
const { open, openModal, closeModal } = useModal()
const [searchPosition, setSearchPosition] = useState(0)
const numSummons: number = 4
function openSearchModal(position: number) {
setSearchPosition(position)
openModal()
}
function receiveSummon(summon: Summon, position: number) {
props.onSelect(GridType.Summon, summon, position)
}
function sendData(object: Character | Weapon | Summon, position: number) {
if (isSummon(object)) {
receiveSummon(object, position)
}
}
function isSummon(object: Character | Weapon | Summon): object is Summon {
// There aren't really any unique fields here
return (object as Summon).granblue_id !== undefined
}
return (
<div>
<div className="SummonGrid">
<div className="LabeledUnit">
<div className="Label">Main Summon</div>
<SummonUnit
onClick={() => { openSearchModal(0) }}
editable={props.editable}
key="grid_main_summon"
onReceiveData={receiveSummon}
position={-1}
unitType={0}
summon={props.main}
@ -50,9 +72,9 @@ const SummonGrid = (props: Props) => {
<div className="LabeledUnit">
<div className="Label">Friend Summon</div>
<SummonUnit
onClick={() => { openSearchModal(6) }}
editable={props.editable}
key="grid_friend_summon"
onReceiveData={receiveSummon}
position={6}
unitType={2}
summon={props.friend}
@ -67,8 +89,8 @@ const SummonGrid = (props: Props) => {
return (
<li key={`grid_unit_${i}`} >
<SummonUnit
onClick={() => { openSearchModal(i) }}
editable={props.editable}
onReceiveData={receiveSummon}
position={i}
unitType={1}
summon={props.grid[i]}
@ -82,12 +104,23 @@ const SummonGrid = (props: Props) => {
</div>
<ExtraSummons
onClick={openSearchModal}
grid={props.grid}
editable={props.editable}
exists={false}
offset={numSummons}
onSelect={props.onSelect}
/>
{open ? (
<SearchModal
grid={props.grid}
close={closeModal}
send={sendData}
fromPosition={searchPosition}
object="summons"
placeholderText="Search for a summon..."
/>
) : null}
</div>
)
}

31
components/SummonUnit/index.tsx
View file

@ -1,9 +1,7 @@
import React, { useEffect, useState } from 'react'
import classnames from 'classnames'
import { useModal as useModal } from '~utils/useModal'
import SearchModal from '~components/SearchModal'
import UncapIndicator from '~components/UncapIndicator'
import PlusIcon from '~public/icons/plus.svg'
@ -11,7 +9,7 @@ import PlusIcon from '~public/icons/plus.svg'
import './index.scss'
interface Props {
onReceiveData: (summon: Summon, position: number) => void
onClick: () => void
summon: Summon | undefined
position: number
editable: boolean
@ -20,9 +18,6 @@ interface Props {
const SummonUnit = (props: Props) => {
const [imageUrl, setImageUrl] = useState('')
const { open, openModal, closeModal } = useModal()
const openModalIfEditable = (props.editable) ? openModal : () => {}
const classes = classnames({
SummonUnit: true,
@ -54,21 +49,10 @@ const SummonUnit = (props: Props) => {
setImageUrl(imgSrc)
}
function sendData(object: Character | Weapon | Summon, position: number) {
if (isSummon(object)) {
props.onReceiveData(object, position)
}
}
function isSummon(object: Character | Weapon | Summon): object is Summon {
// There aren't really any unique fields here
return (object as Summon).granblue_id !== undefined
}
return (
<div>
<div className={classes} onClick={openModalIfEditable}>
<div className="SummonImage">
<div className={classes}>
<div className="SummonImage" onClick={props.onClick}>
<img alt={summon?.name.en} className="grid_image" src={imageUrl} />
{ (props.editable) ? <span className='icon'><PlusIcon /></span> : '' }
</div>
@ -80,15 +64,6 @@ const SummonUnit = (props: Props) => {
/>
<h3 className="SummonName">{summon?.name.en}</h3>
</div>
{open ? (
<SearchModal
close={closeModal}
send={sendData}
fromPosition={props.position}
object="summons"
placeholderText="Search for a summon..."
/>
) : null}
</div>
)
}