Add signet pages

2023-07-13 19:55:43 +09:00
parent 53396776df
commit 2edb2cde77
16 changed files with 655 additions and 4 deletions
@@ -0,0 +1,115 @@
+import { NextPageContext } from 'next'
+import { Box, Card, Flex, Heading, Image } from 'theme-ui'
+import AvatarFigureImage from '../../../../components/v2-pre/AvatarFigureImage'
+import { loadBattlesuitData, loadErBattlesuit, loadErBattlesuitCatalog } from '../../../../lib/v2-pre/server/loadData'
+import { Battlesuit, ErBattlesuit, ErSignet } from '../../../../lib/v2-pre/data/types'
+import { Fragment, useMemo } from 'react'
+import { assetsBucketBaseUrl } from '../../../../lib/consts'
+
+interface BattlesuitShowPageProps {
+  battlesuit: Battlesuit
+  erBattlesuit: ErBattlesuit
+}
+
+const BattlesuitShowPage = ({ battlesuit, erBattlesuit }: BattlesuitShowPageProps) => {
+  const signetSets = useMemo(() => {
+    const signetSetMap = erBattlesuit.signets
+      .slice()
+      .sort((a, b) => {
+        return a.id.localeCompare(b.id)
+      })
+      .reduce<Map<string, ErSignet[]>>((map, signet) => {
+        const result = signet.id.match(/([12])([0-9]+)([1-5])-[0-9]/)
+        if (result != null) {
+          const [, _lv, _battlesuit, signetOrder] = result
+          let set = map.get(signetOrder)
+          if (set == null) {
+            set = []
+            map.set(signetOrder, set)
+          }
+          set.push(signet)
+        }
+        return map
+      }, new Map())
+
+    return [...signetSetMap.values()]
+  }, [erBattlesuit.signets])
+
+  return (
+    <Box>
+      <Heading as="h1">{battlesuit.fullName}</Heading>
+
+      <AvatarFigureImage battlesuitId={battlesuit.id} sx={{ height: 400 }} />
+
+      <Heading as="h2">ER Adjustments</Heading>
+
+      <Card mb={3}>
+        {erBattlesuit.abilities.map(ability => {
+          return (
+            <Fragment key={ability.id}>
+              <Box sx={{ p: 1, borderBottom: 'default' }}>
+                <Heading as="h3" m={0}>
+                  {ability.name}
+                </Heading>
+              </Box>
+              <Box sx={{ p: 1, borderBottom: 'default', '&:last-child': { borderBottom: 'none' } }}>{ability.desc}</Box>
+            </Fragment>
+          )
+        })}
+      </Card>
+
+      <Heading as="h2">Exclusive Signets</Heading>
+
+      {signetSets.map((set, index) => {
+        return (
+          <Card key={index} mb={2}>
+            {set.map(signet => {
+              return (
+                <Fragment key={signet.id}>
+                  <Flex sx={{ p: 1, borderBottom: 'default', alignItems: 'center' }}>
+                    <Image
+                      src={`${assetsBucketBaseUrl}/raw/supportbufficon/Elysia.png`}
+                      width={30}
+                      sx={{ flexShrink: 0 }}
+                      alt={'Elysia'}
+                    />
+                    <Heading as="h3" m={0}>
+                      {signet.name}
+                    </Heading>
+                  </Flex>
+                  <Box sx={{ p: 1, borderBottom: 'default', '&:last-child': { borderBottom: 'none' } }}>
+                    {signet.desc}
+                  </Box>
+                </Fragment>
+              )
+            })}
+          </Card>
+        )
+      })}
+    </Box>
+  )
+}
+
+export default BattlesuitShowPage
+
+export async function getStaticProps({ locale, params }: NextPageContext & { params: { battlesuitId: string } }) {
+  const battlesuit = loadBattlesuitData(params.battlesuitId)
+  const erBattlesuit = loadErBattlesuit(params.battlesuitId)
+
+  return {
+    props: { battlesuit, erBattlesuit }
+  }
+}
+
+export async function getStaticPaths() {
+  const battlesuitCatalog = loadErBattlesuitCatalog()
+
+  return {
+    paths: battlesuitCatalog.map(catalogItem => {
+      return {
+        params: { battlesuitId: catalogItem.battlesuit }
+      }
+    }),
+    fallback: false
+  }
+}
@@ -0,0 +1,75 @@
+/** @jsxImportSource theme-ui */
+import { Box, Heading, Flex, Link, Card } from '@theme-ui/components'
+import { NextPageContext } from 'next'
+import { loadBattlesuitCatalog, loadErBattlesuitCatalog } from '../../../lib/v2-pre/server/loadData'
+import { BattlesuitCatalogItem, ErBattlesuitCatalogItem } from '../../../lib/v2-pre/data/types'
+import { useMemo } from 'react'
+import BattlesuitCatalogItemCard from '../../../components/v2-pre/BattlesuitCatalogItemCard'
+import { assetsBucketBaseUrl } from '../../../lib/consts'
+import SquareImage from '../../../components/v2-pre/SquareImage'
+import { signetGroups } from '../../../lib/v2-pre/data/er'
+
+interface ErPageProps {
+  erBattlesuitCatalog: ErBattlesuitCatalogItem[]
+  battlesuitCatalog: BattlesuitCatalogItem[]
+}
+
+const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog }: ErPageProps) => {
+  const battlesuitCatalogMap = useMemo(() => {
+    return battlesuitCatalog.reduce((map, item) => {
+      map.set(item.id, item)
+      return map
+    }, new Map<string, BattlesuitCatalogItem>())
+  }, [battlesuitCatalog])
+  return (
+    <Box>
+      <h1>Elysian Realm</h1>
+      <Heading as="h2">Signets</Heading>
+      <Flex sx={{ flexWrap: 'wrap' }}>
+        {signetGroups.map(signetGroup => {
+          return (
+            <Link href={`/v2-pre/er/signets/${signetGroup.id}`} key={signetGroup.id}>
+              <Card p={1} m={1}>
+                <Flex sx={{ alignItems: 'center' }}>
+                  <SquareImage
+                    src={`${assetsBucketBaseUrl}/raw/supportbufficon/${signetGroup.icon}.png`}
+                    originalSize={120}
+                    size={40}
+                  />
+                  <Box p={1}>{signetGroup.name}</Box>
+                </Flex>
+              </Card>
+            </Link>
+          )
+        })}
+      </Flex>
+
+      <Heading as="h2">Battlesuits</Heading>
+      <Flex sx={{ flexWrap: 'wrap' }}>
+        {erBattlesuitCatalog.map(erBattlesuit => {
+          const battlesuit = battlesuitCatalogMap.get(erBattlesuit.battlesuit)!
+          return (
+            <Box key={battlesuit.id}>
+              <Link href={`/v2-pre/er/battlesuits/${battlesuit.id}`}>
+                <BattlesuitCatalogItemCard battlesuit={battlesuit} />
+              </Link>
+            </Box>
+          )
+        })}
+      </Flex>
+
+      <Heading as="h2">Supports</Heading>
+    </Box>
+  )
+}
+
+export default ErPage
+
+export async function getStaticProps({ locale }: NextPageContext) {
+  const erBattlesuitCatalog = loadErBattlesuitCatalog()
+  const battlesuitCatalog = loadBattlesuitCatalog()
+
+  return {
+    props: { erBattlesuitCatalog, battlesuitCatalog }
+  }
+}
@@ -0,0 +1,89 @@
+import { NextPageContext } from 'next'
+import { Box, Card, Flex, Heading } from 'theme-ui'
+import { loadErSignets } from '../../../../lib/v2-pre/server/loadData'
+import { ErSignet, ErSignetGroup } from '../../../../lib/v2-pre/data/types'
+import { Fragment, useMemo } from 'react'
+import { assetsBucketBaseUrl } from '../../../../lib/consts'
+import { signetGroups } from '../../../../lib/v2-pre/data/er'
+import SquareImage from '../../../../components/v2-pre/SquareImage'
+import { getErSignetTypeLabel } from '../../../../lib/v2-pre/data/text'
+
+interface BattlesuitShowPageProps {
+  group: ErSignetGroup
+  signets: ErSignet[]
+}
+
+const BattlesuitShowPage = ({ signets, group }: BattlesuitShowPageProps) => {
+  const signetSets = useMemo(() => {
+    const signetSetMap = signets.reduce<Map<string, ErSignet[]>>((map, signet) => {
+      const [id1, _id2] = signet.id.split('-')
+      let set = map.get(id1)
+      if (set == null) {
+        set = []
+        map.set(id1, set)
+      }
+      set.push(signet)
+      return map
+    }, new Map())
+
+    return [...signetSetMap.values()]
+  }, [signets])
+  return (
+    <Box>
+      <Heading as="h1">{group.name}</Heading>
+
+      {signetSets.map((set, index) => {
+        return (
+          <Card key={index} mb={2}>
+            {set.map(signet => {
+              return (
+                <Fragment key={signet.id}>
+                  <Flex sx={{ p: 1, borderBottom: 'default', alignItems: 'center' }}>
+                    <SquareImage
+                      src={`${assetsBucketBaseUrl}/raw/supportbufficon/${group.icon}.png`}
+                      size={30}
+                      originalSize={120}
+                    />
+                    <Heading as="h3" my={0} ml={1}>
+                      {signet.name}
+                    </Heading>
+                    <Box sx={{ ml: 12, color: 'textMuted' }}>{getErSignetTypeLabel(signet.quality)}</Box>
+                  </Flex>
+                  <Box sx={{ p: 1, borderBottom: 'default', '&:last-child': { borderBottom: 'none' } }}>
+                    {signet.desc}
+                  </Box>
+                </Fragment>
+              )
+            })}
+          </Card>
+        )
+      })}
+      {/*
+      <pre>
+        <code>{JSON.stringify(signets, null, 2)}</code>
+      </pre> */}
+    </Box>
+  )
+}
+
+export default BattlesuitShowPage
+
+export async function getStaticProps({ locale, params }: NextPageContext & { params: { groupId: string } }) {
+  const signets = loadErSignets(params.groupId)
+  const group = signetGroups.find(group => group.id === params.groupId)
+
+  return {
+    props: { signets, group }
+  }
+}
+
+export async function getStaticPaths() {
+  return {
+    paths: signetGroups.map(group => {
+      return {
+        params: { groupId: group.id }
+      }
+    }),
+    fallback: false
+  }
+}