From 1dbbea5b97387abb87027db53b8a8b693194df10 Mon Sep 17 00:00:00 2001
From: vipzero <hiroflighter@gmail.com>
Date: Sat, 17 Aug 2024 16:27:04 +0900
Subject: [PATCH] update age bar style

---
 src/components/Home/AgeBar.tsx | 52 +++++++++++++++++++++++-----------
 src/components/Home/index.tsx  |  4 +--
 src/stories/AgeBar.stories.tsx | 24 ++++++++++++++++
 src/stories/seed.ts            |  1 +
 4 files changed, 63 insertions(+), 18 deletions(-)
 create mode 100644 src/stories/AgeBar.stories.tsx

diff --git a/src/components/Home/AgeBar.tsx b/src/components/Home/AgeBar.tsx
index b826c5716..1497a9132 100644
--- a/src/components/Home/AgeBar.tsx
+++ b/src/components/Home/AgeBar.tsx
@@ -13,26 +13,22 @@ const elapsedYourMonth = (ymd: string) => {
 	}
 }
 
-type Props = {
-	ymd: string // yyyy-mm-dd
-}
+const divmod = (a: number, b: number) => [Math.floor(a / b), a % b]
 
-export const AgeBar = ({ ymd }: Props) => {
-	const { showAgebar: visible } = useSettings()
-	const { y, m } = elapsedYourMonth(ymd)
+export const AgeBar = ({ y, m }: { y: number; m: number }) => {
+	const [oy, my] = divmod(y, 10)
 
 	return (
-		<Style
-			className="co-agebar co-panel"
-			onClick={(e) => e.stopPropagation()}
-			style={{ display: visible ? 'block' : 'none' }}
-		>
+		<Style className="co-agebar co-panel" onClick={(e) => e.stopPropagation()}>
 			<p>
 				{y}
 				<span>年</span>
 				{m}
 				<span>ヶ月前</span>
-				{range(y).map((i) => (
+				{range(oy).map((i) => (
+					<progress className="ten" key={i} value={12} max={12} />
+				))}
+				{range(my).map((i) => (
 					<progress key={i} value={12} max={12} />
 				))}
 				<progress value={m} max={12} />
@@ -40,6 +36,25 @@ export const AgeBar = ({ ymd }: Props) => {
 		</Style>
 	)
 }
+
+const validFormat = (s: string) => s.match(/^\d{4}-\d{2}-\d{2}$/)
+
+type Props = {
+	ymd: string // yyyy-mm-dd
+}
+
+export const AgeBarContainer = ({ ymd }: Props) => {
+	const { showAgebar: visible } = useSettings()
+	const { y, m } = elapsedYourMonth(ymd)
+	if (!validFormat(ymd)) return null
+
+	return (
+		<Style style={{ display: visible ? 'block' : 'none' }}>
+			<AgeBar y={y} m={m} />
+		</Style>
+	)
+}
+
 const Style = styled.div`
 	p {
 		font-size: 0.8rem !important;
@@ -51,17 +66,22 @@ const Style = styled.div`
 		appearance: none;
 		margin-left: 0.2rem;
 		/* filter: invert(1); */
-		border-radius: 5px;
 
 		height: 0.4rem;
 		width: 1rem;
 
+		&.ten {
+			height: 0.5rem;
+			width: 7rem;
+		}
+
 		&::-webkit-progress-bar {
-			background-color: var(--font-color);
-			border-radius: 5px;
+			background-color: var(--font-color, #aaa);
+			border-radius: 4px;
 		}
 		&::-webkit-progress-value {
-			background-color: var(--co-bg);
+			background-color: var(--co-bg, #444);
+			border-radius: 4px;
 		}
 	}
 `
diff --git a/src/components/Home/index.tsx b/src/components/Home/index.tsx
index 9f84abc59..4568af84d 100644
--- a/src/components/Home/index.tsx
+++ b/src/components/Home/index.tsx
@@ -25,7 +25,7 @@ import { Conways } from './ex/Coway'
 import { ExtraComp } from './ex/ExtraComp'
 import { YearTimer } from './ex/YearTimer'
 import { shapeStyles, themeStyles } from './themeStyles'
-import { AgeBar } from './AgeBar'
+import { AgeBarContainer } from './AgeBar'
 
 const sideMap: Record<Setting['sideMode'], 'right' | 'center' | 'left' | ''> = {
 	wide: 'center',
@@ -111,7 +111,7 @@ function Home() {
 				{/* {showEmol && <LyricsBox />} */}
 
 				<BookmarkMiniList books={books} toggleFavorites={toggleFavorites} />
-				{isSongFull(song) && song.date && <AgeBar ymd={song.date} />}
+				{isSongFull(song) && song.date && <AgeBarContainer ymd={song.date} />}
 			</Container>
 			<SettingBox
 				favorited={!!books[song.icy]}
diff --git a/src/stories/AgeBar.stories.tsx b/src/stories/AgeBar.stories.tsx
new file mode 100644
index 000000000..94b4034d1
--- /dev/null
+++ b/src/stories/AgeBar.stories.tsx
@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from '@storybook/react'
+import { AgeBar } from '../components/Home/AgeBar'
+
+export default {
+	title: 'AgeBar',
+	component: AgeBar,
+	decorators: [
+		(s) => (
+			<div
+				style={{
+					width: '400px',
+				}}
+			>
+				{s()}
+			</div>
+		),
+	],
+} as Meta<typeof AgeBar>
+
+type Story = StoryObj<typeof AgeBar>
+
+export const Recent: Story = { args: { y: 0, m: 4 } }
+export const Ago10: Story = { args: { y: 11, m: 4 } }
+export const Ago20: Story = { args: { y: 24, m: 4 } }
diff --git a/src/stories/seed.ts b/src/stories/seed.ts
index 995ecba25..71c6a20cb 100644
--- a/src/stories/seed.ts
+++ b/src/stories/seed.ts
@@ -15,6 +15,7 @@ export const seedSong: Song = {
 	icy: '宇佐美奈々子(CV.伊藤美来)・小日向縁(CV.三澤紗千香) - 流川ガールズソング ',
 	singer: '宇佐美奈々子(伊藤美来)/小日向縁(三澤紗千香)',
 	time: +new Date(),
+	date: '2010-01-01',
 	trackTimeMillis: 500000,
 	wordCounts: { 三澤紗千香: 4, 伊藤美来: 23, 宇佐美奈々子: 4, 小日向縁: 4 },
 	wordCountsAna: [