Add sigil and support pages

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

@@ -1,26 +1,36 @@
 /** @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 {
+  loadBattlesuitCatalog,
+  loadErBattlesuitCatalog,
+  loadErSigils,
+  loadErSupports
+} 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'
+import BattlesuitSmallIcon from '../../../components/v2-pre/BattlesuitSmallIcon'
+import MaterialIcon from '../../../components/v2-pre/MaterialIcon'
 
 interface ErPageProps {
   erBattlesuitCatalog: ErBattlesuitCatalogItem[]
   battlesuitCatalog: BattlesuitCatalogItem[]
+  erSupports: string[]
+  erSigils: { id: string; name: string }[]
 }
 
-const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog }: ErPageProps) => {
+const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }: 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>
@@ -59,6 +69,39 @@ const ErPage = ({ erBattlesuitCatalog, battlesuitCatalog }: ErPageProps) => {
       </Flex>
 
       <Heading as="h2">Supports</Heading>
+
+      <Flex sx={{ flexWrap: 'wrap' }}>
+        {erSupports.map(support => {
+          const battlesuit = battlesuitCatalogMap.get(support)!
+          return (
+            <Box key={support}>
+              <Link href={`/v2-pre/er/supports#${support}`}>
+                <Box sx={{ p: 1, m: 1, width: 110 }}>
+                  <BattlesuitSmallIcon battlesuit={battlesuit} ratio={0.8} />
+                  <Box sx={{ textAlign: 'center', overflow: 'hidden', textOverflow: 'ellipsis', whiteSpace: 'nowrap' }}>
+                    {battlesuit.fullName}
+                  </Box>
+                </Box>
+                {/* <BattlesuitCatalogItemCard battlesuit={battlesuit} /> */}
+              </Link>
+            </Box>
+          )
+        })}
+      </Flex>
+
+      <Heading as="h2">Sigils</Heading>
+
+      <Flex sx={{ flexWrap: 'wrap' }}>
+        {erSigils.map(sigil => {
+          return (
+            <Card key={sigil.id} p={1} m={1}>
+              <Link href={`/v2-pre/er/sigils#${sigil.id}`}>
+                <MaterialIcon materialId={sigil.id} />
+              </Link>
+            </Card>
+          )
+        })}
+      </Flex>
     </Box>
   )
 }
@@ -68,8 +111,18 @@ export default ErPage
 export async function getStaticProps({ locale }: NextPageContext) {
   const erBattlesuitCatalog = loadErBattlesuitCatalog()
   const battlesuitCatalog = loadBattlesuitCatalog()
+  const erSupports = loadErSupports().map(support => {
+    return support.battlesuit
+  })
+
+  const erSigils = loadErSigils().map(sigil => {
+    return {
+      id: sigil.id,
+      name: sigil.name
+    }
+  })
 
   return {
-    props: { erBattlesuitCatalog, battlesuitCatalog }
+    props: { erBattlesuitCatalog, battlesuitCatalog, erSupports, erSigils }
   }
 }

src/pages/v2-pre/er/sigils.tsx

@@ -0,0 +1,53 @@
+import { NextPageContext } from 'next'
+import { Box, Card, Flex, Heading } from 'theme-ui'
+import MaterialIcon from '../../../components/v2-pre/MaterialIcon'
+import { ErSigil } from '../../../lib/v2-pre/data/types'
+import { loadErSigils } from '../../../lib/v2-pre/server/loadData'
+
+interface SigilsPageProps {
+  erSigils: ErSigil[]
+}
+
+const SigilsPage = ({ erSigils }: SigilsPageProps) => {
+  return (
+    <Box>
+      <Heading as="h1">ER Sigils</Heading>
+
+      <Card mb={3}>
+        {erSigils.map(sigil => {
+          return (
+            <Flex
+              key={sigil.id}
+              sx={{
+                borderBottom: 'default',
+                '&:last-child': {
+                  borderBottom: 'none'
+                }
+              }}
+            >
+              <Box sx={{ p: 1, flexShrink: 0, borderRight: 'default' }}>
+                <MaterialIcon materialId={sigil.id} />
+              </Box>
+              <Box sx={{ flexGrow: 1 }}>
+                <Heading as="h3" sx={{ m: 0, p: 1, borderBottom: 'default' }} id={sigil.id}>
+                  {sigil.name}
+                </Heading>
+                <Box p={1}>{sigil.desc}</Box>
+              </Box>
+            </Flex>
+          )
+        })}
+      </Card>
+    </Box>
+  )
+}
+
+export default SigilsPage
+
+export async function getStaticProps({ locale }: NextPageContext) {
+  const erSigils = loadErSigils()
+
+  return {
+    props: { erSigils }
+  }
+}

src/pages/v2-pre/er/supports.tsx

@@ -0,0 +1,63 @@
+import { NextPageContext } from 'next'
+import { useMemo } from 'react'
+import { Box, Card, Flex, Heading } from 'theme-ui'
+import BattlesuitSmallIcon from '../../../components/v2-pre/BattlesuitSmallIcon'
+import { BattlesuitCatalogItem, ErSupportBattlesuit } from '../../../lib/v2-pre/data/types'
+import { loadBattlesuitCatalog, loadErSupports } from '../../../lib/v2-pre/server/loadData'
+
+interface SupportsPageProps {
+  battlesuitCatalog: BattlesuitCatalogItem[]
+  erSupports: ErSupportBattlesuit[]
+}
+
+const SupportsPage = ({
+  battlesuitCatalog,
+
+  erSupports
+}: SupportsPageProps) => {
+  const battlesuitCatalogMap = useMemo(() => {
+    return battlesuitCatalog.reduce((map, item) => {
+      map.set(item.id, item)
+      return map
+    }, new Map<string, BattlesuitCatalogItem>())
+  }, [battlesuitCatalog])
+  return (
+    <Box>
+      <Heading as="h1">ER Supports</Heading>
+
+      <Card mb={3}>
+        {erSupports.map(support => {
+          const battlesuit = battlesuitCatalogMap.get(support.battlesuit)!
+          return (
+            <Flex key={support.battlesuit} sx={{ borderBottom: 'default' }}>
+              <Box sx={{ flexShrink: 0, p: 1, borderRight: 'default' }}>
+                <BattlesuitSmallIcon battlesuit={battlesuit} ratio={0.8} />
+              </Box>
+              <Box>
+                <Flex sx={{ p: 1, borderBottom: 'default', flexGrow: 1 }}>
+                  <Heading as="h3" sx={{ m: 0 }} id={support.battlesuit}>
+                    {support.name}
+                  </Heading>
+
+                  <Box sx={{ ml: 1, color: 'textMuted' }}>(CD {support.cd}s)</Box>
+                </Flex>
+                <Box p={1}>{support.desc}</Box>
+              </Box>
+            </Flex>
+          )
+        })}
+      </Card>
+    </Box>
+  )
+}
+
+export default SupportsPage
+
+export async function getStaticProps({ locale }: NextPageContext) {
+  const battlesuitCatalog = loadBattlesuitCatalog()
+  const erSupports = loadErSupports()
+
+  return {
+    props: { battlesuitCatalog, erSupports }
+  }
+}