Add elf pages

src/pages/v2-pre/elfs/[elfId].tsx

@@ -0,0 +1,117 @@
+import { NextPageContext } from 'next'
+import { Box, Card, Flex, Heading } from 'theme-ui'
+import { useMemo } from 'react'
+import { Elf, ElfSkill } from '../../../lib/v2-pre/data/types'
+import { loadElfCatalog, loadElfData } from '../../../lib/v2-pre/server/loadData'
+import SquareImage from '../../../components/v2-pre/SquareImage'
+import TagIcon from '../../../components/v2-pre/TagIcon'
+import { assetsBucketBaseUrl } from '../../../lib/consts'
+import { ListMap } from '../../../lib/utils'
+import FormattedText from '../../../components/v2-pre/FormattedText'
+import { formatSubSkillInfo } from '../../../lib/v2-pre/data/formatText'
+
+interface ElfShowPageProps {
+  elf: Elf
+}
+
+const ElfShowPage = ({ elf }: ElfShowPageProps) => {
+  const skillRows = useMemo(() => {
+    const rowSkillListMap = elf.skills.reduce<ListMap<string, ElfSkill>>((map, skill) => {
+      map.set(skill.row.toString(), skill)
+      return map
+    }, new ListMap())
+
+    return [...rowSkillListMap.values()]
+  }, [elf.skills])
+  return (
+    <Box>
+      <Heading as="h1">{elf.fullName}</Heading>
+      <SquareImage
+        src={`${assetsBucketBaseUrl}/raw/elfcardfigures/${elf.figureImage}.png`}
+        originalSize={720}
+        size={480}
+      />
+
+      <Card mb={3}>
+        <Box sx={{ p: 1, borderBottom: 'default' }}>
+          <Flex>
+            {elf.tags.map(tag => {
+              return (
+                <Box key={tag.type} mr={1}>
+                  <TagIcon type={tag.type} />
+                </Box>
+              )
+            })}
+          </Flex>
+        </Box>
+        <Box p={1}>
+          Ult CD: {elf.ultSkillCd} / Ult SP Cost: {elf.ultSkillCost}
+        </Box>
+      </Card>
+
+      <Heading as="h2">Skills</Heading>
+
+      {skillRows.map((row, index) => {
+        return (
+          <Card key={index} mb={2}>
+            {row.map(skill => {
+              return (
+                <Box
+                  key={skill.id}
+                  sx={{
+                    borderBottom: 'default',
+                    '&:last-child': {
+                      borderBottom: 'none'
+                    }
+                  }}
+                >
+                  <Box sx={{ borderBottom: 'default', p: 1 }}>
+                    <Flex sx={{ alignItems: 'center' }}>
+                      <Box sx={{ flexShrink: 0 }}>
+                        <SquareImage
+                          src={`${assetsBucketBaseUrl}/raw/elf_skill_icon/${skill.icon}.png`}
+                          originalSize={40}
+                        />
+                      </Box>
+                      <Heading as={'h3'} sx={{ my: 0, ml: 1 }}>
+                        <FormattedText>{skill.name}</FormattedText>
+                      </Heading>
+                      {/* {skill.id} */}
+                      <Box sx={{ color: 'textMuted', ml: 1 }}>({skill.skillType})</Box>
+                    </Flex>
+                  </Box>
+                  <Box sx={{ p: 1 }}>
+                    <FormattedText>{formatSubSkillInfo(skill)}</FormattedText>
+                  </Box>
+                </Box>
+              )
+            })}
+          </Card>
+        )
+      })}
+    </Box>
+  )
+}
+
+export default ElfShowPage
+
+export async function getStaticProps({ locale, params }: NextPageContext & { params: { elfId: string } }) {
+  const elf = loadElfData(params.elfId)
+
+  return {
+    props: { elf }
+  }
+}
+
+export async function getStaticPaths() {
+  const elfCatalog = loadElfCatalog()
+
+  return {
+    paths: elfCatalog.map(catalogItem => {
+      return {
+        params: { elfId: catalogItem.id }
+      }
+    }),
+    fallback: false
+  }
+}

src/pages/v2-pre/elfs/index.tsx

@@ -0,0 +1,61 @@
+/** @jsxImportSource theme-ui */
+import { Box, Card } from '@theme-ui/components'
+import { NextPageContext } from 'next'
+import { Flex, Link } from 'theme-ui'
+import { ElfCatalogItem } from '../../../lib/v2-pre/data/types'
+import { loadElfCatalog } from '../../../lib/v2-pre/server/loadData'
+import RarityBar from '../../../components/v2-pre/RarityBar'
+import ElfIcon from '../../../components/v2-pre/ElfIcon'
+
+interface ElfListPageProps {
+  elfs: ElfCatalogItem[]
+}
+
+const ElfListPage = ({ elfs }: ElfListPageProps) => {
+  return (
+    <Box>
+      <h1>Elfs</h1>
+      <Flex sx={{ flexWrap: 'wrap' }}>
+        {elfs
+          .sort((a, b) => {
+            const aId = getId(a.id)
+            const bId = getId(b.id)
+            return bId - aId
+
+            function getId(id: string): number {
+              return parseInt(id)
+            }
+          })
+          .map(elf => {
+            return (
+              <Box key={elf.id} m={2}>
+                <Link href={`/v2-pre/elfs/${elf.id}`}>
+                  <Card p={1}>
+                    <Box>
+                      <ElfIcon icon={elf.cardIcon} />
+                      <RarityBar rarity={elf.rarity} />
+                    </Box>
+                    <Box
+                      sx={{ textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}
+                    >
+                      {elf.fullName}
+                    </Box>
+                  </Card>
+                </Link>
+              </Box>
+            )
+          })}
+      </Flex>
+    </Box>
+  )
+}
+
+export default ElfListPage
+
+export async function getStaticProps({ locale }: NextPageContext) {
+  const elfs = loadElfCatalog()
+
+  return {
+    props: { elfs }
+  }
+}