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,104 @@
+import { useMemo } from 'react'
+import ReactSelect, { components } from 'react-select'
+import { Flex, Image } from 'theme-ui'
+import { assetsBucketBaseUrl } from '../../../lib/consts'
+import { BattlesuitData } from '../../../lib/honkai3rd/battlesuits'
+
+interface BattlesuitSelectProps {
+  instanceId: string
+  value: string
+  optionIds: string[]
+  battlesuits: BattlesuitData[]
+  onChange: (newValue: string) => void
+}
+
+const BattlesuitSelect = ({
+  instanceId,
+  optionIds,
+  value,
+  battlesuits,
+  onChange,
+}: BattlesuitSelectProps) => {
+  const battlesuitOptions = useMemo(() => {
+    return optionIds.map((battlesuitId) => {
+      const battlesuit = battlesuits.find((aBattlesuit) => {
+        return aBattlesuit.id === battlesuitId
+      })
+      if (battlesuit == null) {
+        return {
+          value: 'unknown',
+          label: 'unknown',
+        }
+      }
+      return {
+        value: battlesuit.id,
+        label: battlesuit.name,
+      }
+    })
+  }, [battlesuits, optionIds])
+
+  const battlesuit = battlesuits.find((battlesuit) => {
+    return battlesuit.id === value
+  })
+
+  return (
+    <ReactSelect
+      instanceId={instanceId}
+      value={
+        battlesuit != null
+          ? {
+              label: battlesuit.name,
+              value: battlesuit.id,
+            }
+          : null
+      }
+      onChange={(option) => {
+        if (option == null) {
+          return
+        }
+        onChange(option.value)
+      }}
+      options={battlesuitOptions}
+      components={{
+        SingleValue: (props) => {
+          return (
+            <>
+              <components.SingleValue {...props}>
+                <Flex sx={{ alignItems: 'center', color: 'black' }}>
+                  <Image
+                    width={20}
+                    height={20}
+                    alt={props.data.label}
+                    src={`${assetsBucketBaseUrl}/honkai3rd/battlesuits/portrait-${props.data.value}.png`}
+                    sx={{ flexShrink: 0, mr: 2 }}
+                  />
+                  {props.children}
+                </Flex>
+              </components.SingleValue>
+            </>
+          )
+        },
+        Option: (props) => {
+          return (
+            <>
+              <components.Option {...props}>
+                <Flex sx={{ alignItems: 'center', color: 'black' }}>
+                  <Image
+                    width={20}
+                    height={20}
+                    alt={props.data.label}
+                    src={`${assetsBucketBaseUrl}/honkai3rd/battlesuits/portrait-${props.data.value}.png`}
+                    sx={{ mr: 2, flexShrink: 0 }}
+                  />
+                  {props.children}
+                </Flex>
+              </components.Option>
+            </>
+          )
+        },
+      }}
+    />
+  )
+}
+
+export default BattlesuitSelect