Improve version page

2022-07-21 20:16:23 +09:00
parent f536718260
commit f798689316
22 changed files with 488 additions and 79 deletions
@@ -7,9 +7,58 @@ import SquareImageBox from '../atoms/SquareImageBox'

 interface StigmataSetCardProps {
  stigmataSet: Pick<StigmataSet, 'id' | 'name' | 'rarity'>
+  size?: 'sm' | 'default'
 }

-const StigmataSetCard = ({ stigmataSet }: StigmataSetCardProps) => {
+const StigmataSetCard = ({
+  stigmataSet,
+  size = 'default',
+}: StigmataSetCardProps) => {
+  if (size === 'sm') {
+    return (
+      <Card
+        sx={{
+          width: 'fit-content',
+          p: 1,
+          m: 1,
+        }}
+      >
+        <PageLink href={`/honkai3rd/stigmata/${stigmataSet.id}-set`}>
+          <Flex>
+            <SquareImageBox
+              size={30}
+              alt={`${stigmataSet.name} Top`}
+              src={`${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${stigmataSet.id}-top.png`}
+              mr={1}
+            />
+            <SquareImageBox
+              size={30}
+              alt={`${stigmataSet.name} Mid`}
+              src={`${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${stigmataSet.id}-mid.png`}
+              mr={1}
+            />
+            <SquareImageBox
+              size={30}
+              alt={`${stigmataSet.name} Bottom`}
+              src={`${assetsBucketBaseUrl}/honkai3rd/stigmata/icon-${stigmataSet.id}-bot.png`}
+              mr={1}
+            />
+            <Box
+              sx={{
+                overflow: 'hidden',
+                textOverflow: 'ellipsis',
+                width: '100%',
+                whiteSpace: 'nowrap',
+                textAlign: 'center',
+              }}
+            >
+              <Text sx={{ lineHeight: '30px' }}>{stigmataSet.name}</Text>
+            </Box>
+          </Flex>
+        </PageLink>
+      </Card>
+    )
+  }
  return (
    <Card
      sx={{
@@ -30,11 +30,11 @@ const BossTable = ({ versionData, today }: BossTableProps) => {
        </Box>
        {versionData.superstring.map(([first, second], index) => {
          const firstDuration = [
-            addDays(versionStartDate, index * 7),
-            addDays(versionStartDate, index * 7 + 2),
+            addDays(versionStartDate, index * 7 + 0),
+            addDays(versionStartDate, index * 7 + 3),
          ]
          const secondDuration = [
-            addDays(versionStartDate, index * 7 + 3),
+            addDays(versionStartDate, index * 7 + 4),
            addDays(versionStartDate, index * 7 + 6),
          ]

@@ -79,8 +79,8 @@ const BossTable = ({ versionData, today }: BossTableProps) => {
        </Box>
        {versionData.ma.map(([first, second, third], index) => {
          const durations = [
-            addDays(versionStartDate, index * 7 + 3),
-            addDays(versionStartDate, (index + 1) * 7 + 2),
+            addDays(versionStartDate, index * 7 + 4),
+            addDays(versionStartDate, (index + 1) * 7 + 3),
          ]
          const active =
            today != null && today >= durations[0] && today <= durations[1]
@@ -58,9 +58,7 @@ const GanttChart = ({
  }, [items])

  return (
-    <Box
-      sx={{ width: weeksToRender * widthOfWeek + 70, marginLeft: widthOfDay }}
-    >
+    <Box sx={{ width: weeksToRender * widthOfWeek + 70 }}>
      <WeekLabelRow
        firstDateToRender={firstDateToRender}
        weeksToRender={weeksToRender}
@@ -79,7 +77,7 @@ const GanttChart = ({
              totalRow={totalRow}
            />
          )
-        }, daysToRender)}
+        }, daysToRender + 1)}

        {times((index) => {
          return (
@@ -87,23 +85,23 @@ const GanttChart = ({
              key={`weekdate-${index}`}
              sx={{
                position: 'absolute',
-                left: (index - 1) * widthOfDay,
+                left: index * widthOfDay,
                width: widthOfDay,
                textAlign: 'center',
                color:
-                  index - (1 % 7) === 3
+                  (index - 1) % 7 === 2
                    ? 'red'
-                    : index - (1 % 7) === 2
+                    : (index - 1) % 7 === 1
                    ? 'blue'
                    : 'default',
              }}
            >
-              {format(addDays(firstDateToRender, index - 1), 'EEEEE')}
+              {format(addDays(firstDateToRender, index), 'EEEEE')}
            </Box>
          )
-        }, daysToRender + 2)}
+        }, daysToRender + 1)}

-        {todayDate != null && (
+        {todayDate != null && todayDate <= endDate && (
          <TodayBox
            totalRow={totalRow}
            todayDate={todayDate}
@@ -116,11 +114,15 @@ const GanttChart = ({
            boxSizing: 'border-box',
            position: 'absolute',
            width: 1,
-            height: totalRow * (itemHeight + 10) + itemHeight,
-            backgroundColor: 'red.3',
+            top: 24,
+            height: totalRow * (itemHeight + 10) + itemHeight - 24,
+            backgroundColor: 'red.9',
+            opacity: 0.8,
            zIndex: 20,
            left:
-              differenceInCalendarDays(endDate, firstDateToRender) * widthOfDay,
+              differenceInCalendarDays(endDate, firstDateToRender) *
+                widthOfDay +
+              widthOfDay / 2,
            pointerEvents: 'none',
          }}
        />
@@ -134,6 +136,7 @@ const GanttChart = ({
            left:
              differenceInCalendarDays(endDate, firstDateToRender) *
                widthOfDay +
+              widthOfDay / 2 +
              -140,
            width: 300,
            pointerEvents: 'none',
@@ -148,7 +151,7 @@ const GanttChart = ({
              new Date(item.duration[0]),
              firstDateToRender
            ) *
-              widthOfDay -
+              widthOfDay +
            widthOfDay / 2
          const length =
            differenceInCalendarDays(
@@ -266,7 +269,8 @@ const TodayBox = ({
          zIndex: 21,
          top: 170,
          left:
-            differenceInCalendarDays(new Date(todayDate), firstDateToRender) *
+            (differenceInCalendarDays(new Date(todayDate), firstDateToRender) +
+              1) *
              widthOfDay -
            160,
          width: 300,
@@ -288,7 +292,7 @@ const TodayBox = ({
          opacity: 0.3,
          zIndex: 20,
          left:
-            differenceInCalendarDays(todayDate, firstDateToRender) *
+            (differenceInCalendarDays(todayDate, firstDateToRender) + 1) *
              widthOfDay -
            20,
          pointerEvents: 'none',
@@ -6,6 +6,7 @@ export interface VersionData {
  duration: [string, string]
  newBattlesuits: string[]
  newWeapons: string[]
+  newStigmataSets: string[]
  description: string
  supplyEvents: SupplyEventData[]
  superstring: [
@@ -19,11 +19,11 @@ const NumberArray = times((index) => {
 }, 1000)

 const BossSearchPage = ({}: BossSearchPageProps) => {
-  return NumberArray.map((number) => number + '.png').map((item) => {
+  return NumberArray.map((item) => {
    return (
      <img
        key={item}
-        src={`https://upload-os-bbs.mihoyo.com/game_record/honkai3rd/global/SpriteOutput/OpenWorld/QuestBossIcon/BOSS_${item}`}
+        src={`https://upload-os-bbs.mihoyo.com/game_record/honkai3rd/global/SpriteOutput/OpenWorld/QuestBossIcon/DG_${item}_M01.png`}
      />
    )
  })
@@ -1,5 +1,5 @@
 /** @jsxImportSource theme-ui */
-import { Box, Heading, Link, Flex, Text, Paragraph } from '@theme-ui/components'
+import { Box, Heading, Flex, Text, Paragraph } from '@theme-ui/components'
 import { NextPageContext } from 'next'
 import Breadcrumb from '../../../components/organisms/Breadcrumb'
 import GanttChart from '../../../components/organisms/GanttChart'
@@ -9,7 +9,6 @@ import {
 } from '../../../server/data/honkai3rd/versions'
 import { format as formatDate } from 'date-fns'
 import { getBattlesuitById } from '../../../server/data/honkai3rd/battlesuits'
-import NextLink from 'next/link'
 import SquareImageBox from '../../../components/atoms/SquareImageBox'
 import { getWeaponById } from '../../../server/data/honkai3rd/weapons'
 import ScrollContainer from 'react-indiana-drag-scroll'
@@ -25,17 +24,24 @@ import { assetsBucketBaseUrl } from '../../../lib/consts'
 import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
 import { useEffect, useState } from 'react'
 import BossTable from '../../../components/organisms/BossTable'
+import StigmataSetCard from '../../../components/molecules/StigmataSetCard'
+import WeaponCard from '../../../components/molecules/WeaponCard'
+import BattlesuitCard from '../../../components/molecules/BattlesuitCard'
+import { getStigmataSetBySetId } from '../../../server/data/honkai3rd/stigmata'
+import { StigmataSet } from '../../../lib/honkai3rd/stigmata'

 interface VersionShowPageProps {
  versionData: VersionData
  battlesuits: BattlesuitData[]
  weapons: WeaponData[]
+  stigmataSets: StigmataSet[]
 }

 const VersionShowPage = ({
  versionData,
  battlesuits,
  weapons,
+  stigmataSets,
 }: VersionShowPageProps) => {
  const { t } = useTranslation()
  const [today, setToday] = useState<Date | null>(null)
@@ -102,26 +108,14 @@ const VersionShowPage = ({
            <Heading as='h3' mb={2}>
              {t('versions.new-battlesuits')}
            </Heading>
-            <Box mb={3} sx={{ display: 'inline-block' }}>
+            <Box mb={2} sx={{ display: 'inline-block' }}>
              {battlesuits.map((battlesuit) => {
                return (
-                  <NextLink
+                  <BattlesuitCard
                    key={battlesuit.id}
-                    href={`/honkai3rd/battlesuits/${battlesuit.id}`}
-                    passHref
-                  >
-                    <Link>
-                      <Flex sx={{ alignItems: 'center' }} mb={2}>
-                        <SquareImageBox
-                          size={40}
-                          src={`${assetsBucketBaseUrl}/honkai3rd/battlesuits/portrait-${battlesuit.id}.png`}
-                          alt={`${battlesuit.name}`}
-                          mr={2}
-                        />
-                        <Text>{battlesuit.name}</Text>
-                      </Flex>
-                    </Link>
-                  </NextLink>
+                    battlesuit={battlesuit}
+                    size='sm'
+                  />
                )
              })}
            </Box>
@@ -129,26 +123,23 @@ const VersionShowPage = ({
            <Heading as='h3' mb={2}>
              {t('versions.new-weapons')}
            </Heading>
-            <Box mb={3} sx={{ display: 'inline-block' }}>
+            <Box mb={2} sx={{ display: 'inline-block' }}>
              {weapons.map((weapon) => {
+                return <WeaponCard key={weapon.id} weapon={weapon} size='sm' />
+              })}
+            </Box>
+
+            <Heading as='h3' mb={2}>
+              {t('versions.new-stigmata-sets')}
+            </Heading>
+            <Box mb={2} sx={{ display: 'inline-block' }}>
+              {stigmataSets.map((stigmataSet) => {
                return (
-                  <NextLink
-                    key={weapon.id}
-                    href={`/honkai3rd/weapons/${weapon.id}`}
-                    passHref
-                  >
-                    <Link>
-                      <Flex sx={{ alignItems: 'center' }} mb={2}>
-                        <SquareImageBox
-                          size={40}
-                          src={`${assetsBucketBaseUrl}/honkai3rd/weapons/${weapon.id}.png`}
-                          alt={`${weapon.name}`}
-                          mr={2}
-                        />
-                        <Text>{weapon.name}</Text>
-                      </Flex>
-                    </Link>
-                  </NextLink>
+                  <StigmataSetCard
+                    key={stigmataSet.id}
+                    stigmataSet={stigmataSet}
+                    size='sm'
+                  />
                )
              })}
            </Box>
@@ -225,12 +216,16 @@ export async function getStaticProps({
  const weapons = versionData.newWeapons.map((weaponId) => {
    return getWeaponById(weaponId, locale)
  })
+  const stigmataSets = versionData.newStigmataSets.map((stigmataSetId) => {
+    return getStigmataSetBySetId(stigmataSetId, locale)
+  })

  return {
    props: {
      versionData,
      battlesuits,
      weapons,
+      stigmataSets,
      ...(await getI18NProps(locale)),
    },
  }
@@ -27,12 +27,16 @@ import WeaponCard from '../../../components/molecules/WeaponCard'
 import BattlesuitCard from '../../../components/molecules/BattlesuitCard'
 import { useEffect, useState } from 'react'
 import BossTable from '../../../components/organisms/BossTable'
+import { getStigmataSetBySetId } from '../../../server/data/honkai3rd/stigmata'
+import { StigmataSet } from '../../../lib/honkai3rd/stigmata'
+import StigmataSetCard from '../../../components/molecules/StigmataSetCard'

 interface VersionIndexPageProps {
  versionDataList: VersionData[]
  currentVersionData: VersionData
  currentVersionNewBattlesuits: BattlesuitData[]
  currentVersionNewWeapons: WeaponData[]
+  currentVersionNewStigmataSets: StigmataSet[]
 }

 const VersionIndexPage = ({
@@ -40,6 +44,7 @@ const VersionIndexPage = ({
  currentVersionNewBattlesuits,
  versionDataList,
  currentVersionNewWeapons,
+  currentVersionNewStigmataSets,
 }: VersionIndexPageProps) => {
  const { t } = useTranslation()
  const [today, setToday] = useState<Date | null>(null)
@@ -98,7 +103,7 @@ const VersionIndexPage = ({
            <Heading as='h3' mb={2}>
              {t('versions.new-battlesuits')}
            </Heading>
-            <Box mb={3} sx={{ display: 'inline-block' }}>
+            <Box mb={2} sx={{ display: 'inline-block' }}>
              {currentVersionNewBattlesuits.map((battlesuit) => {
                return (
                  <BattlesuitCard
@@ -113,11 +118,26 @@ const VersionIndexPage = ({
            <Heading as='h3' mb={2}>
              {t('versions.new-weapons')}
            </Heading>
-            <Box mb={3} sx={{ display: 'inline-block' }}>
+            <Box mb={2} sx={{ display: 'inline-block' }}>
              {currentVersionNewWeapons.map((weapon) => {
                return <WeaponCard key={weapon.id} weapon={weapon} size='sm' />
              })}
            </Box>
+
+            <Heading as='h3' mb={2}>
+              {t('versions.new-stigmata-sets')}
+            </Heading>
+            <Box mb={2} sx={{ display: 'inline-block' }}>
+              {currentVersionNewStigmataSets.map((stigmataSet) => {
+                return (
+                  <StigmataSetCard
+                    key={stigmataSet.id}
+                    stigmataSet={stigmataSet}
+                    size='sm'
+                  />
+                )
+              })}
+            </Box>
          </Box>

          <Heading as='h3' mb={2}>
@@ -222,11 +242,18 @@ export async function getStaticProps({ locale }: NextPageContext) {
    }
  )

+  const currentVersionNewStigmataSets = currentVersionData.newStigmataSets.map(
+    (stigmataSetId) => {
+      return getStigmataSetBySetId(stigmataSetId, locale)
+    }
+  )
+
  return {
    props: {
      currentVersionData,
      currentVersionNewBattlesuits,
      currentVersionNewWeapons,
+      currentVersionNewStigmataSets,
      versionDataList: listVersionData(locale),
      ...(await getI18NProps(locale)),
    },