Improve version page

src/components/molecules/StigmataSetCard.tsx

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

src/components/organisms/BossTable.tsx

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

src/components/organisms/GanttChart.tsx

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