feat: GachaItemView title now shows the date

lgou2w · Sep 20, 2023 · d8123b3 · d8123b3
1 parent 6847a24
commit d8123b3
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 3 deletions.
diff --git a/src/components/gacha/GachaItemView.tsx b/src/components/gacha/GachaItemView.tsx
@@ -7,6 +7,7 @@ import GenshinUIRarity3Background from '@/assets/images/genshin/UI_Rarity_3_Back
 import GenshinUIRarity4Background from '@/assets/images/genshin/UI_Rarity_4_Background.png'
 import GenshinUIRarity5Background from '@/assets/images/genshin/UI_Rarity_5_Background.png'
 import { lookupAssetIcon } from './icons'
+import dayjs from '@/utilities/dayjs'
 
 export interface GachaItemViewProps {
   facet: AccountFacet
@@ -17,24 +18,29 @@ export interface GachaItemViewProps {
   size: number
   usedPity?: number
   restricted?: boolean
+  time?: string | Date
 }
 
 export default function GachaItemView (props: GachaItemViewProps) {
-  const { facet, name, id, isWeapon, rank, size, usedPity, restricted } = props
+  const { facet, name, id, isWeapon, rank, size, usedPity, restricted, time } = props
   // const src = getStaticResource(facet, isWeapon ? 'weapon' : 'character', id)
   const icon = lookupAssetIcon(
     facet,
     isWeapon ? 'weapon' : 'character',
     id
   )
 
+  const title = !time
+    ? name
+    : name + '\n' + dayjs(time).format('LLLL')
+
   return (
     <Box className={GachaItemViewCls} sx={GachaItemViewSx}
       width={size} height={size}
       data-facet={facet}
       data-rank={rank}
       data-restricted={restricted}
-      title={name}
+      title={title}
     >
       <img src={icon?.[1]} alt={name} />
       {usedPity && <Typography className={`${GachaItemViewCls}-used-pity`}>{usedPity}</Typography>}

diff --git a/src/components/gacha/analysis/GachaAnalysisHistory.tsx b/src/components/gacha/analysis/GachaAnalysisHistory.tsx
@@ -15,7 +15,14 @@ export default function GachaAnalysisHistory () {
 
   return (
     <Box>
-      <Typography variant="h6" gutterBottom>❖ 五星历史</Typography>
+      <Typography variant="h6" gutterBottom>
+        {'❖ 五星历史 '}
+        <Typography
+          variant="caption"
+          sx={{ borderBottom: 1, cursor: 'help' }}
+          title="光标移至物品图标上停留查看详情"
+        >(?)</Typography>
+      </Typography>
       <Stack direction="column" spacing={2}>
         <GachaAnalysisHistoryList facet={facet} value={character} />
         <GachaAnalysisHistoryList facet={facet} value={weapon} />
@@ -58,6 +65,7 @@ function GachaAnalysisHistoryList ({ facet, value }: {
             size={GachaAnalysisHistoryItemViewSize}
             usedPity={item.usedPity}
             restricted={item.restricted}
+            time={item.time}
           />
         ))}
       </Stack>