Add boss table

2022-07-21 11:15:33 +09:00
parent b4d3e39f83
commit f536718260
53 changed files with 302 additions and 45 deletions
@@ -0,0 +1,164 @@
+import { addDays } from 'date-fns'
+import { Box, Flex, Image, Text } from 'theme-ui'
+import { assetsBucketBaseUrl } from '../../lib/consts'
+import { VersionData } from '../../lib/honkai3rd/versions'
+
+interface BossTableProps {
+  versionData: VersionData
+  today: Date | null
+}
+
+const BossTable = ({ versionData, today }: BossTableProps) => {
+  const versionStartDate = new Date(versionData.duration[0])
+  return (
+    <Flex>
+      <Box
+        sx={{
+          borderLeft: 'default',
+          borderTop: 'default',
+        }}
+      >
+        <Box
+          sx={{
+            fontWeight: 700,
+            borderRight: 'default',
+            px: 2,
+            borderBottom: 'default',
+          }}
+        >
+          Super String
+        </Box>
+        {versionData.superstring.map(([first, second], index) => {
+          const firstDuration = [
+            addDays(versionStartDate, index * 7),
+            addDays(versionStartDate, index * 7 + 2),
+          ]
+          const secondDuration = [
+            addDays(versionStartDate, index * 7 + 3),
+            addDays(versionStartDate, index * 7 + 6),
+          ]
+
+          return (
+            <Flex key={`superstring-${index}`} sx={{ borderBottom: 'default' }}>
+              <Box sx={{ borderRight: 'default' }}>
+                <BossCard
+                  boss={first.boss}
+                  label={first.label}
+                  active={
+                    today != null &&
+                    today >= firstDuration[0] &&
+                    today <= firstDuration[1]
+                  }
+                />
+              </Box>
+              <Box sx={{ borderRight: 'default' }}>
+                <BossCard
+                  boss={second.boss}
+                  label={second.label}
+                  active={
+                    today != null &&
+                    today >= secondDuration[0] &&
+                    today <= secondDuration[1]
+                  }
+                />
+              </Box>
+            </Flex>
+          )
+        })}
+      </Box>
+      <Box sx={{ borderTop: 'default' }}>
+        <Box
+          sx={{
+            fontWeight: 700,
+            px: 2,
+            borderRight: 'default',
+            borderBottom: 'default',
+          }}
+        >
+          Memorial Arena
+        </Box>
+        {versionData.ma.map(([first, second, third], index) => {
+          const durations = [
+            addDays(versionStartDate, index * 7 + 3),
+            addDays(versionStartDate, (index + 1) * 7 + 2),
+          ]
+          const active =
+            today != null && today >= durations[0] && today <= durations[1]
+          return (
+            <Flex key={`superstring-${index}`} sx={{ borderBottom: 'default' }}>
+              <Box sx={{ borderRight: 'default' }}>
+                <BossCard
+                  boss={first.boss}
+                  label={first.label}
+                  active={active}
+                />
+              </Box>
+              <Box sx={{ borderRight: 'default' }}>
+                <BossCard
+                  boss={second.boss}
+                  label={second.label}
+                  active={active}
+                />
+              </Box>
+              <Box sx={{ borderRight: 'default' }}>
+                <BossCard
+                  boss={third.boss}
+                  label={third.label}
+                  active={active}
+                />
+              </Box>
+            </Flex>
+          )
+        })}
+      </Box>
+    </Flex>
+  )
+}
+
+const BossCard = ({
+  label,
+  boss,
+  active,
+}: {
+  label?: string
+  boss: string
+  active?: boolean
+}) => {
+  return (
+    <Box
+      sx={{ position: 'relative', '&.active': { bg: 'primary' } }}
+      className={active ? 'active' : ''}
+    >
+      {label != null && (
+        <Flex
+          sx={{
+            background: 'rgba(0,0,0,0.7)',
+            position: 'absolute',
+            bottom: 0,
+            width: '100%',
+          }}
+        >
+          <Text
+            sx={{
+              lineHeight: '10px',
+              fontWeight: 700,
+              py: 0,
+              px: 1,
+              fontSize: '10px',
+              color: 'white',
+            }}
+          >
+            {label?.toUpperCase()}
+          </Text>
+        </Flex>
+      )}
+      <Image
+        width={140}
+        alt={boss}
+        src={`${assetsBucketBaseUrl}/honkai3rd/bosses/${boss}.png`}
+      />
+    </Box>
+  )
+}
+
+export default BossTable
@@ -21,7 +21,7 @@ export interface GanttChartItem {
 interface GanttChartProps {
  startDate: string
  endDate: string
-  today: string
+  today: Date | null
  items: GanttChartItem[]
 }

@@ -33,14 +33,14 @@ const itemHeight = 30
 const GanttChart = ({
  startDate: startDateString,
  endDate: endDateString,
-  today: todayDateString,
+  today,
  items,
 }: GanttChartProps) => {
  const startDate = new Date(startDateString)
  const endDate = new Date(endDateString)
  const firstDateToRender = startDate
  const lastDateToRender = endDate
-  const todayDate = new Date(todayDateString)
+  const todayDate = today

  const daysToRender = differenceInCalendarDays(
    lastDateToRender,
@@ -103,11 +103,13 @@ const GanttChart = ({
          )
        }, daysToRender + 2)}

-        <TodayBox
-          totalRow={totalRow}
-          todayDate={todayDate}
-          firstDateToRender={firstDateToRender}
-        />
+        {todayDate != null && (
+          <TodayBox
+            totalRow={totalRow}
+            todayDate={todayDate}
+            firstDateToRender={firstDateToRender}
+          />
+        )}

        <Box
          sx={{
@@ -8,6 +8,15 @@ export interface VersionData {
  newWeapons: string[]
  description: string
  supplyEvents: SupplyEventData[]
+  superstring: [
+    { label: string; boss: string },
+    { label: string; boss: string }
+  ][]
+  ma: [
+    { label: string; boss: string },
+    { label: string; boss: string },
+    { label: string; boss: string }
+  ][]
 }

 export interface SupplyEventData {
@@ -23,6 +23,8 @@ import Head from '../../../components/atoms/Head'
 import PageLink from '../../../components/atoms/PageLink'
 import { assetsBucketBaseUrl } from '../../../lib/consts'
 import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
+import { useEffect, useState } from 'react'
+import BossTable from '../../../components/organisms/BossTable'

 interface VersionShowPageProps {
  versionData: VersionData
@@ -36,6 +38,10 @@ const VersionShowPage = ({
  weapons,
 }: VersionShowPageProps) => {
  const { t } = useTranslation()
+  const [today, setToday] = useState<Date | null>(null)
+  useEffect(() => {
+    setToday(new Date(getDateString(new Date())))
+  }, [])
  return (
    <Honkai3rdLayout>
      <Head
@@ -148,6 +154,14 @@ const VersionShowPage = ({
            </Box>
          </Box>

+          <Heading as='h3' mb={2}>
+            Bosses
+          </Heading>
+
+          <Box sx={{ mb: 3 }}>
+            <BossTable versionData={versionData} today={today} />
+          </Box>
+
          <Heading as='h3' mb={2}>
            {t('versions.supply-events')}
          </Heading>
@@ -178,7 +192,7 @@ const VersionShowPage = ({
                    row: supplyEventData.track,
                  }
                })}
-                today={getDateString(new Date())}
+                today={today}
                startDate={versionData.duration[0]}
                endDate={
                  versionData.duration[1] != null
@@ -23,6 +23,10 @@ import Head from '../../../components/atoms/Head'
 import PageLink from '../../../components/atoms/PageLink'
 import { assetsBucketBaseUrl } from '../../../lib/consts'
 import Honkai3rdLayout from '../../../components/layouts/Honkai3rdLayout'
+import WeaponCard from '../../../components/molecules/WeaponCard'
+import BattlesuitCard from '../../../components/molecules/BattlesuitCard'
+import { useEffect, useState } from 'react'
+import BossTable from '../../../components/organisms/BossTable'

 interface VersionIndexPageProps {
  versionDataList: VersionData[]
@@ -38,6 +42,10 @@ const VersionIndexPage = ({
  currentVersionNewWeapons,
 }: VersionIndexPageProps) => {
  const { t } = useTranslation()
+  const [today, setToday] = useState<Date | null>(null)
+  useEffect(() => {
+    setToday(new Date(getDateString(new Date())))
+  }, [])

  return (
    <Honkai3rdLayout>
@@ -93,23 +101,11 @@ const VersionIndexPage = ({
            <Box mb={3} sx={{ display: 'inline-block' }}>
              {currentVersionNewBattlesuits.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>
@@ -119,29 +115,19 @@ const VersionIndexPage = ({
            </Heading>
            <Box mb={3} sx={{ display: 'inline-block' }}>
              {currentVersionNewWeapons.map((weapon) => {
-                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>
-                )
+                return <WeaponCard key={weapon.id} weapon={weapon} size='sm' />
              })}
            </Box>
          </Box>

+          <Heading as='h3' mb={2}>
+            Bosses
+          </Heading>
+
+          <Box sx={{ mb: 3 }}>
+            <BossTable versionData={currentVersionData} today={today} />
+          </Box>
+
          <Heading as='h3' mb={2}>
            {t('versions.supply-events')}
          </Heading>
@@ -176,7 +162,7 @@ const VersionIndexPage = ({
                    }
                  }
                )}
-                today={getDateString(new Date())}
+                today={today}
                startDate={currentVersionData.duration[0]}
                endDate={
                  currentVersionData.duration[1] != null