Add boss table

data/honkai3rd/versions.yaml

@@ -11,6 +11,18 @@
     - vill-v-pri-weapon
     - vill-v-weapon
   description: ''
+  superstring:
+    - - label: qua
+        boss: qc
+      - label: img
+        boss: ofg
+  ma:
+    - - label: sss
+        boss: kosma
+      - label: sss
+        boss: jizo-sss
+      - label: ss
+        boss: hpt
   supplyEvents: []
 - previousVersion: '5.7'
   version: '5.8'
@@ -26,6 +38,68 @@
     - griseo-pri-weapon
     - griseo-weapon
   description: ''
+  superstring:
+    - - label: physical
+        boss: jizo
+      - label: paralyze
+        boss: jk
+    - - label: type
+        boss: hos
+      - label: img
+        boss: hod
+    - - label: lightning
+        boss: bke
+      - label: bleed
+        boss: nk
+    - - label: lightning
+        boss: rpc
+      - label: lightning (paralyze)
+        boss: husk
+    - - label: ice
+        boss: mpe
+      - label: lightning (hit count)
+        boss: husk2
+    - - label: type
+        boss: wolf
+      - label: type
+        boss: hdl
+  ma:
+    - - label: sss
+        boss: hod
+      - label: ss
+        boss: hov
+      - label: ss
+        boss: homu
+    - - label: sss
+        boss: bke-sss
+      - label: ss
+        boss: hpt
+      - label: ss
+        boss: hdl
+    - - label: sss
+        boss: ofg
+      - label: ss
+        boss: dj
+      - label: ss
+        boss: hm
+    - - label: sss
+        boss: hod
+      - label: ss
+        boss: kasumi
+      - label: ss
+        boss: ana
+    - - label: sss
+        boss: bke-sss
+      - label: ss
+        boss: hm
+      - label: ss
+        boss: ask
+    - - label: sss
+        boss: ofg
+      - label: ss
+        boss: dd
+      - label: ss
+        boss: bns
   supplyEvents:
     - name: Nue of the Shadow Supply B
       duration:
@@ -628,6 +702,8 @@
     - lost-conviction
     - echo-of-paradise
   description: ''
+  superstring: []
+  ma: []
   supplyEvents:
     - name: Key of Reason Focused Supply B
       duration:
@@ -1342,6 +1418,8 @@
     - gilded-librae
     - cerulean-flare
   description: ''
+  superstring: []
+  ma: []
   supplyEvents:
     - name: Nue of the Shadow Focused Supply B
       duration:
@@ -2315,6 +2393,8 @@
     - astral-divide-pisces
     - astral-rend-white-dwarf
   description: ''
+  superstring: []
+  ma: []
   supplyEvents:
     - name: Skaldi Ondurgud Supply B
       duration:
@@ -3793,6 +3873,8 @@
     - falcon-flare-0019
     - falcon-flare-final
   description: ''
+  superstring: []
+  ma: []
   supplyEvents:
     - name: Eos Gloria Focused Supply B
       duration:

src/components/organisms/BossTable.tsx

@@ -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

src/components/organisms/GanttChart.tsx

@@ -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
+        {todayDate != null && (
-          totalRow={totalRow}
+          <TodayBox
-          todayDate={todayDate}
+            totalRow={totalRow}
-          firstDateToRender={firstDateToRender}
+            todayDate={todayDate}
-        />
+            firstDateToRender={firstDateToRender}
+          />
+        )}
 
         <Box
           sx={{

src/lib/honkai3rd/versions.ts

@@ -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 {

src/pages/honkai3rd/versions/[versionId].tsx

@@ -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

src/pages/honkai3rd/versions/index.tsx

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