From 372ce50bd495de345763958f9a3125a50009eb78 Mon Sep 17 00:00:00 2001
From: cp-20 <n.naoki.1587@gmail.com>
Date: Sun, 16 Feb 2025 15:49:00 +0900
Subject: [PATCH] =?UTF-8?q?=F0=9F=A5=96=20=F0=9F=A5=9D=20=F0=9F=8D=A4=20?=
 =?UTF-8?q?=E3=82=B7=E3=83=B3=E3=83=97=E3=83=AB=E3=83=80=E3=82=A4=E3=82=B9?=
 =?UTF-8?q?=E3=83=AD=E3=83=BC=E3=83=AB=E3=81=A7=E5=B1=A5=E6=AD=B4=E3=82=92?=
 =?UTF-8?q?=E8=A1=A8=E7=A4=BA=E3=81=99=E3=82=8B=E3=82=88=E3=81=86=E3=81=AB?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../dice/_components/SimpleDiceOutput.tsx     | 35 ++++++++++++-------
 .../_components/hooks/useSimpleDiceOutput.ts  | 10 ++++--
 .../_components/hooks/useSimpleDiceRoll.ts    |  6 ++--
 3 files changed, 33 insertions(+), 18 deletions(-)

diff --git a/src/app/[locale]/(app)/dice/_components/SimpleDiceOutput.tsx b/src/app/[locale]/(app)/dice/_components/SimpleDiceOutput.tsx
index 5a2cca0..a3f3c61 100644
--- a/src/app/[locale]/(app)/dice/_components/SimpleDiceOutput.tsx
+++ b/src/app/[locale]/(app)/dice/_components/SimpleDiceOutput.tsx
@@ -13,34 +13,35 @@ import D20 from '/public/assets/images/D20.svg';
 import { twMerge } from 'tailwind-merge';
 
 import styles from './SimpleDiceOutput.module.css';
+import scrollbarStyles from '@/shared/styles/pretty-scrollbar.module.css';
 import type { AvailableDice } from './hooks/useSimpleDiceInput';
 import { useSimpleDiceOutput } from './hooks/useSimpleDiceOutput';
 
 export const SimpleDiceOutput: FC = () => {
-  const { simpleDiceOutput } = useSimpleDiceOutput();
+  const { latestOutput, history } = useSimpleDiceOutput();
 
-  if (simpleDiceOutput === null) {
-    return <div className="grid min-h-[5rem] place-content-center text-slate-400">{t('dice:simple.output')}</div>;
+  if (latestOutput === null) {
+    return <div className="grid h-36 place-content-center text-slate-400">{t('dice:simple.output')}</div>;
   }
 
-  const diceComponentCount = simpleDiceOutput.result.reduce((acc, { result }) => {
+  const diceComponentCount = latestOutput.result.reduce((acc, { result }) => {
     return acc + result.length;
   }, 0);
   const animationDelayStep = diceComponentCount > 10 ? 0.3 / diceComponentCount : 0.03;
 
   return (
-    <div className="min-h-[5rem]">
-      <div className="flex flex-wrap items-center">
-        {simpleDiceOutput.result.map(({ dice, result }, i) => {
+    <div>
+      <div className="flex flex-wrap items-center min-h-12">
+        {latestOutput.result.map(({ dice, result }, i) => {
           const DiceComponent = diceComponents[dice];
 
-          const index = simpleDiceOutput.result.slice(0, i).reduce((acc, { result }) => {
+          const index = latestOutput.result.slice(0, i).reduce((acc, { result }) => {
             return acc + result.length;
           }, 0);
 
           return result.map((count, i) => (
             <DiceComponent
-              key={`${simpleDiceOutput.key}-${dice}-${i}`}
+              key={`${latestOutput.key}-${dice}-${i}`}
               count={count}
               className="animate-popup opacity-0"
               style={{ animationDelay: `${(index + i) * animationDelayStep}s` }}
@@ -52,13 +53,23 @@ export const SimpleDiceOutput: FC = () => {
           style={{
             animationDelay: `${diceComponentCount * animationDelayStep + 0.2}s`,
           }}
-          key={simpleDiceOutput.key}
+          key={latestOutput.key}
         >
           <IconChevronsRight />
-          <div className="text-xl font-bold">{simpleDiceOutput.sum}</div>
+          <div className="text-xl font-bold">{latestOutput.sum}</div>
         </div>
       </div>
-      <div className="text-slate-400">{simpleDiceOutput.resultStr}</div>
+      <div className="text-slate-500">{latestOutput.resultStr}</div>
+      <div className={clsx('h-16 overflow-auto mt-2', scrollbarStyles['pretty-scrollbar'])}>
+        {history
+          .toReversed()
+          .slice(1)
+          .map((output) => (
+            <div className="text-slate-300" key={output.key}>
+              {output.resultStr}
+            </div>
+          ))}
+      </div>
     </div>
   );
 };
diff --git a/src/app/[locale]/(app)/dice/_components/hooks/useSimpleDiceOutput.ts b/src/app/[locale]/(app)/dice/_components/hooks/useSimpleDiceOutput.ts
index b976d86..fd40f6c 100644
--- a/src/app/[locale]/(app)/dice/_components/hooks/useSimpleDiceOutput.ts
+++ b/src/app/[locale]/(app)/dice/_components/hooks/useSimpleDiceOutput.ts
@@ -8,9 +8,13 @@ export type simpleDiceOutputAtom = {
   resultStr: string;
 };
 
-const simpleDiceOutputAtom = atom<simpleDiceOutputAtom | null>(null);
+const simpleDiceOutputHistoryAtom = atom<simpleDiceOutputAtom[]>([]);
 
 export const useSimpleDiceOutput = () => {
-  const [simpleDiceOutput, setSimpleDiceOutput] = useAtom(simpleDiceOutputAtom);
-  return { simpleDiceOutput, setSimpleDiceOutput };
+  const [history, setHistory] = useAtom(simpleDiceOutputHistoryAtom);
+  const setOutput = (output: simpleDiceOutputAtom) => {
+    setHistory((prev) => [...prev, output]);
+  };
+  const latestOutput = history[history.length - 1] ?? null;
+  return { latestOutput, history, setOutput };
 };
diff --git a/src/app/[locale]/(app)/dice/_components/hooks/useSimpleDiceRoll.ts b/src/app/[locale]/(app)/dice/_components/hooks/useSimpleDiceRoll.ts
index b2c97d1..7b4c245 100644
--- a/src/app/[locale]/(app)/dice/_components/hooks/useSimpleDiceRoll.ts
+++ b/src/app/[locale]/(app)/dice/_components/hooks/useSimpleDiceRoll.ts
@@ -33,7 +33,7 @@ const sum = (arr: number[]) => arr.reduce((acc, curr) => acc + curr, 0);
 
 export const useSimpleDiceRoll = () => {
   const { simpleDiceRoll: simpleDiceRollCore } = useSimpleDiceRollCore();
-  const { setSimpleDiceOutput } = useSimpleDiceOutput();
+  const { setOutput } = useSimpleDiceOutput();
   const { sendEvent } = useGoogleAnalytics();
 
   const simpleDiceRoll = useCallback(
@@ -49,12 +49,12 @@ export const useSimpleDiceRoll = () => {
           .join('+'),
       );
 
-      setSimpleDiceOutput({
+      setOutput({
         key: Date.now().toString(36) + Math.random().toString(36).slice(2),
         ...result,
       });
     },
-    [sendEvent, setSimpleDiceOutput, simpleDiceRollCore],
+    [sendEvent, setOutput, simpleDiceRollCore],
   );
 
   return { simpleDiceRoll };