Guide generator (#231)

* Replace sw, sns battlesuit images * Add gen guide page * Make supports configurable * Extract DifficultySelect & Improve Ex Signet Ordering style * Extract BattlesuitSelect * Use BattlesuitSelect for support valk * Swap support if duplicated * Add sigil selector * Set initial ex signets * Change layout * Add sigil icon to single value * Add equipment select * Fix difficulty box label * Implement SignetBox * Add Signet form control * Improve rendering perf of stigma and weapon select * Implement image converter * Fix signet select * Remove FontHead * Remove wrong new line * Fix warnings * Add custom style configurator * Make labels of DiffucltyBox and ValkBox configurable * Add background and improve layout * Improve ex signet fontsize * Style boundaries of left bottom boxes * Apply fonts directly * Style signet box * Add Signet group label * Style ValkBox * Add support valk label * Style layout of SignetBox * Add shadow to difficulty box * Add sigil label * Adjust signet group label * Add equipment label * Configure colors of left bottom boxes * Add tag, rank, signature * Add icon to current value of battlesuit select * Adjust form styles * Add signet group select * Implement import/export data * Fix dashed border of difficulty box * Add gen link to elysian realm home * Prefix types
2022-08-29 20:08:19 +09:00
parent 2dd48df340
commit 5c8ed4f603
28 changed files with 3064 additions and 180 deletions
@@ -0,0 +1,150 @@
+import { useCallback, useMemo } from 'react'
+import { Box, Flex, Label } from 'theme-ui'
+import { StigmataData } from '../../../lib/honkai3rd/stigmata'
+import { WeaponData } from '../../../lib/honkai3rd/weapons'
+import StigmaSelect from './StigmaSelect'
+import { ERGGDataUpdater, ERGGEquipmentSet } from './types'
+import WeaponSelect from './WeaponSelect'
+
+interface EquipmentSetControlProps {
+  index: number
+  equipmentSet: ERGGEquipmentSet
+  updateData: ERGGDataUpdater
+  weapons: WeaponData[]
+  stigmata: StigmataData[]
+  topStigmaIds: string[]
+  midStigmaIds: string[]
+  botStigmaIds: string[]
+}
+
+const EquipmentSetControl = ({
+  index,
+  equipmentSet,
+  updateData,
+  weapons,
+  stigmata,
+  topStigmaIds,
+  midStigmaIds,
+  botStigmaIds,
+}: EquipmentSetControlProps) => {
+  const handleWeaponChange = useCallback(
+    (newValue: string) => {
+      updateData('equipmentSets', (previousEquipmentSets) => {
+        const newEquipmentSets = previousEquipmentSets.slice()
+        newEquipmentSets[index] = {
+          ...newEquipmentSets[index],
+          weapon: newValue,
+        }
+        return newEquipmentSets
+      })
+    },
+    [index, updateData]
+  )
+  const weaponIds = useMemo(() => weapons.map((weapon) => weapon.id), [weapons])
+
+  const handleTopStigmaChange = useCallback(
+    (newValue: string) => {
+      updateData('equipmentSets', (previousEquipmentSets) => {
+        const newEquipmentSets = previousEquipmentSets.slice()
+        newEquipmentSets[index] = {
+          ...newEquipmentSets[index],
+          top: newValue,
+        }
+        return newEquipmentSets
+      })
+    },
+    [index, updateData]
+  )
+
+  const handleMidStigmaChange = useCallback(
+    (newValue: string) => {
+      updateData('equipmentSets', (previousEquipmentSets) => {
+        const newEquipmentSets = previousEquipmentSets.slice()
+        newEquipmentSets[index] = {
+          ...newEquipmentSets[index],
+          mid: newValue,
+        }
+        return newEquipmentSets
+      })
+    },
+    [index, updateData]
+  )
+
+  const handleBotStigmaChange = useCallback(
+    (newValue: string) => {
+      updateData('equipmentSets', (previousEquipmentSets) => {
+        const newEquipmentSets = previousEquipmentSets.slice()
+        newEquipmentSets[index] = {
+          ...newEquipmentSets[index],
+          bot: newValue,
+        }
+        return newEquipmentSets
+      })
+    },
+    [index, updateData]
+  )
+
+  return (
+    <Box>
+      <Box>{equipmentSet.type === 'best' ? '베스트' : '대체'}</Box>
+      <Flex sx={{ alignItems: 'center' }}>
+        <Box sx={{ mr: 2 }}>
+          <Label>무기</Label>
+        </Box>
+        <Box sx={{ flexShrink: 0, flex: 1 }}>
+          <WeaponSelect
+            instanceId={`equipment-${index}-weapon`}
+            value={equipmentSet.weapon}
+            onChange={handleWeaponChange}
+            weapons={weapons}
+            optionIds={weaponIds}
+          />
+        </Box>
+      </Flex>
+      <Flex sx={{ alignItems: 'center' }}>
+        <Box sx={{ mr: 2 }}>
+          <Label>상단</Label>
+        </Box>
+        <Box sx={{ flexShrink: 0, flex: 1 }}>
+          <StigmaSelect
+            instanceId={`equipment-${index}-top`}
+            value={equipmentSet.top}
+            onChange={handleTopStigmaChange}
+            stigmata={stigmata}
+            optionIds={topStigmaIds}
+          />
+        </Box>
+      </Flex>
+      <Flex sx={{ alignItems: 'center' }}>
+        <Box sx={{ mr: 2 }}>
+          <Label>중단</Label>
+        </Box>
+        <Box sx={{ flexShrink: 0, flex: 1 }}>
+          <StigmaSelect
+            instanceId={`equipment-${index}-mid`}
+            value={equipmentSet.mid}
+            onChange={handleMidStigmaChange}
+            stigmata={stigmata}
+            optionIds={midStigmaIds}
+          />
+        </Box>
+      </Flex>
+      <Flex sx={{ alignItems: 'center' }}>
+        <Box sx={{ mr: 2 }}>
+          <Label>하단</Label>
+        </Box>
+        <Box sx={{ flexShrink: 0, flex: 1 }}>
+          <StigmaSelect
+            instanceId={`equipment-${index}-bot`}
+            value={equipmentSet.bot}
+            onChange={handleBotStigmaChange}
+            stigmata={stigmata}
+            optionIds={botStigmaIds}
+          />
+        </Box>
+      </Flex>
+    </Box>
+  )
+}
+
+export default EquipmentSetControl