Add weapon page

2023-07-10 23:32:11 +09:00
parent a1c4d16264
commit 4c875ecb8b
15 changed files with 377 additions and 37 deletions
@@ -3,6 +3,7 @@ const HomePage = () => {
    <div>
      <h1>V2 Pre</h1>
      <a href="/v2-pre/battlesuits">Battlesuits</a>
+      <a href="/v2-pre/weapons">Weapons</a>
    </div>
  )
 }
@@ -0,0 +1,115 @@
+import { NextPageContext } from 'next'
+import { Box, Card, Flex, Heading } from 'theme-ui'
+import FormattedText from '../../../components/v2-pre/FormattedText'
+import { formatSubSkillInfo } from '../../../lib/v2-pre/data/formatText'
+import { loadWeaponCatalog, loadWeaponData } from '../../../lib/v2-pre/server/loadData'
+import { RootWeaponData, SkillTagItem } from '../../../lib/v2-pre/data/types'
+import { Fragment } from 'react'
+import TagIcon from '../../../components/v2-pre/TagIcon'
+import { getWeaponTypeLabel } from '../../../lib/v2-pre/data/text'
+import WeaponTypeIcon from '../../../components/v2-pre/WeaponTypeIcon'
+import WeaponIcon from '../../../components/v2-pre/WeaponIcon'
+
+interface WeaponShowPageProps {
+  rootWeapon: RootWeaponData
+}
+
+const WeaponShowPage = ({ rootWeapon }: WeaponShowPageProps) => {
+  const weapon = rootWeapon.weapons[rootWeapon.weapons.length - 1]
+  return (
+    <Box>
+      <Heading as="h1">{weapon.name}</Heading>
+
+      <Box mb={3}>
+        <WeaponIcon key={weapon.id} icon={weapon.icon} rarity={weapon.rarity} />
+      </Box>
+
+      <Card mb={3}>
+        <Box sx={{ p: 1, borderBottom: 'default' }}>{weapon.description}</Box>
+        <Flex sx={{ alignItems: 'center', p: 1, borderBottom: 'default' }}>
+          <WeaponTypeIcon type={weapon.type} />
+          <Box ml={1}>{getWeaponTypeLabel(weapon.type)}</Box>
+        </Flex>
+        <Box sx={{ p: 1 }}>
+          ATK : {Math.floor(weapon.attackBase + weapon.attackAdd * (weapon.maxLv - 1))} / CRT :{' '}
+          {Math.floor(weapon.criticalBase + weapon.criticalAdd * (weapon.maxLv - 1))} (at Max Lv {weapon.maxLv})
+        </Box>
+      </Card>
+
+      <Heading as="h2">Skills</Heading>
+      <Card>
+        {weapon.skills.map(skill => {
+          return (
+            <Fragment key={skill.id}>
+              <Box sx={{ borderBottom: 'default' }}>
+                <Heading
+                  as="h3"
+                  sx={{
+                    p: 1,
+                    m: 1
+                  }}
+                >
+                  {skill.name}
+                </Heading>
+              </Box>
+              <Box
+                sx={{
+                  p: 1,
+                  borderBottom: 'default',
+                  '&:last-child': {
+                    borderBottom: 'none'
+                  }
+                }}
+              >
+                <FormattedText>
+                  {formatSubSkillInfo({
+                    info: skill.info,
+                    maxLv: weapon.maxLv,
+                    paramBase1: skill.param1,
+                    paramBase2: skill.param2,
+                    paramBase3: skill.param3,
+                    paramAdd1: skill.param1Add,
+                    paramAdd2: skill.param2Add,
+                    paramAdd3: skill.param3Add
+                  })}
+                </FormattedText>
+              </Box>
+            </Fragment>
+          )
+        })}
+      </Card>
+      {/* <pre>{JSON.stringify(weapon, null, 2)}</pre> */}
+    </Box>
+  )
+}
+
+export default WeaponShowPage
+
+export async function getStaticProps({ locale, params }: NextPageContext & { params: { weaponId: string } }) {
+  const rootWeapon = loadWeaponData(params.weaponId)
+
+  return {
+    props: { rootWeapon }
+  }
+}
+
+export async function getStaticPaths() {
+  const weaponCatalog = loadWeaponCatalog()
+
+  return {
+    paths: weaponCatalog.map(catalogItem => {
+      return {
+        params: { weaponId: catalogItem.id }
+      }
+    }),
+    fallback: false
+  }
+}
+
+interface SkillTagBoxProps {
+  tag: SkillTagItem
+}
+
+const SkillTagItem = ({ tag }: SkillTagBoxProps) => {
+  return <TagIcon type={tag.type} strength={tag.strength} comment={tag.comment} size="sm" />
+}
@@ -0,0 +1,127 @@
+/** @jsxImportSource theme-ui */
+import { Box, Card } from '@theme-ui/components'
+import { NextPageContext } from 'next'
+import { Flex, Link } from 'theme-ui'
+import { loadWeaponCatalog } from '../../../lib/v2-pre/server/loadData'
+import { WeaponCatalogItem } from '../../../lib/v2-pre/data/types'
+import WeaponIcon from '../../../components/v2-pre/WeaponIcon'
+
+interface BattlesuitListPageProps {
+  weaponCatalog: WeaponCatalogItem[]
+}
+
+const BattlesuitListPage = ({ weaponCatalog }: BattlesuitListPageProps) => {
+  return (
+    <Box>
+      <h1>Weapons</h1>
+      <Flex sx={{ flexWrap: 'wrap' }}>
+        {weaponCatalog
+          .filter(filterWeapons)
+          .sort(sortWeapons)
+          .map(weapon => {
+            return (
+              <Box key={weapon.id} m={2}>
+                <Link href={`/v2-pre/weapons/${weapon.id}`}>
+                  <Card p={1}>
+                    <Flex sx={{ justifyContent: 'center' }}>
+                      <WeaponIcon icon={weapon.icon} rarity={weapon.maxRarity} />
+                    </Flex>
+                    <Box
+                      sx={{
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                        whiteSpace: 'nowrap',
+                        px: 1,
+                        width: 112,
+                        textAlign: 'center'
+                      }}
+                    >
+                      {weapon.name}
+                    </Box>
+                    {/* {weapon.id} */}
+                  </Card>
+                </Link>
+              </Box>
+            )
+          })}
+      </Flex>
+    </Box>
+  )
+}
+
+export default BattlesuitListPage
+
+export async function getStaticProps({ locale }: NextPageContext) {
+  const weaponCatalog = loadWeaponCatalog()
+
+  return {
+    props: { weaponCatalog }
+  }
+}
+
+function filterWeapons(weapon: WeaponCatalogItem) {
+  // Valid weapons
+  // 24XXX EX Weapons
+  // 21XXX Sprit Weapon
+  // 19XXX Alloy Weapons
+  // 10XXX Regular Weapons
+
+  // Event Weapon?
+  if (weapon.id.startsWith('18') && weapon.id.length === 5) {
+    return false
+  }
+  // Test Data?
+  if (weapon.id.startsWith('1023') && weapon.id.length === 6) {
+    return false
+  }
+  // Unreleased(Number looks good but lacking info)
+  switch (weapon.id) {
+    case '24000': // 2nd relic alpha
+    case '24040': // Removed 7 Thunders
+    case '24034': // PE Temp Lance
+    case '24024': // keqing ex
+    case '20765': // ?
+    case '10243': // No Name
+    case '10219': // ?
+    case '10179': // ?
+      return false
+  }
+
+  // Divine Keys
+  switch (weapon.id) {
+    case '20000': // Taixuan Sword
+    case '10248': // Abyss Flower
+    case '10267': // Eden's star anti entropy
+    case '10263': // 7 Thunders
+    case '10247': // Abyss
+    case '10235': // Fenghuang pistols
+    case '10234': // Fenghuang fists
+    case '10223': // Eden twin stars
+    case '10212': // Pledge of Sakura
+    case '10211': // Pledge of Judah
+    case '10209': // Might of an utu
+    case '10199': // Cleaver of Shamash
+    case '10163': // Shamash pistols
+      // The below don't have duplicated data
+      // case '10180': // Eden's star
+      // case '10169': // Taxiuan fists
+      // case '10158': // Jizo Mitama
+      return false
+  }
+
+  return true
+}
+
+function sortWeapons(a: WeaponCatalogItem, b: WeaponCatalogItem) {
+  let aId = parseInt(a.id)
+
+  const aTypeOrder = aId > 21000 && aId < 22000 ? 2 : aId > 19000 && aId < 20000 ? 1 : 0
+
+  let bId = parseInt(b.id)
+  const bTypeOrder = bId > 21000 && bId < 22000 ? 2 : bId > 19000 && bId < 20000 ? 1 : 0
+  if (aTypeOrder !== bTypeOrder) {
+    return aTypeOrder - bTypeOrder
+  }
+
+  return bId - aId
+}