From 8b63cec71c00d65a14c32f8935624e9a8ed1c2e6 Mon Sep 17 00:00:00 2001
From: tsmami <dev@trpfrog.net>
Date: Wed, 1 Jan 2025 22:29:33 +0900
Subject: [PATCH] Add color="random" option to BalloonProps

---
 apps/trpfrog.net/package.json                 |  2 ++
 .../app/balloon/_components/Balloon/index.tsx | 17 +++++++++++----
 .../src/app/balloon/useBalloonState.ts        | 19 ++++++++---------
 pnpm-lock.yaml                                | 21 +++++++++++++++++--
 4 files changed, 43 insertions(+), 16 deletions(-)

diff --git a/apps/trpfrog.net/package.json b/apps/trpfrog.net/package.json
index 25bb5b32..85a79ff1 100644
--- a/apps/trpfrog.net/package.json
+++ b/apps/trpfrog.net/package.json
@@ -40,6 +40,7 @@
     "@trpfrog.net/posts": "workspace:*",
     "@trpfrog.net/utils": "workspace:*",
     "@twemoji/api": "^15.1.0",
+    "@types/seedrandom": "^3.0.8",
     "@vanilla-extract/css": "^1.16.1",
     "@vercel/edge-config": "^1.4.0",
     "@vercel/functions": "^1.5.2",
@@ -90,6 +91,7 @@
     "remark-math": "^6.0.0",
     "remark-toc": "^9.0.0",
     "remark-unwrap-images": "^4.0.1",
+    "seedrandom": "^3.0.5",
     "server-only": "^0.0.1",
     "swr": "^2.2.5",
     "tailwind-merge": "^2.5.5",
diff --git a/apps/trpfrog.net/src/app/balloon/_components/Balloon/index.tsx b/apps/trpfrog.net/src/app/balloon/_components/Balloon/index.tsx
index 7d6cd678..ff65f2fd 100644
--- a/apps/trpfrog.net/src/app/balloon/_components/Balloon/index.tsx
+++ b/apps/trpfrog.net/src/app/balloon/_components/Balloon/index.tsx
@@ -3,6 +3,7 @@
 import { useId, useState } from 'react'
 
 import { useReward } from 'react-rewards'
+import seedrandom from 'seedrandom'
 import { match } from 'ts-pattern'
 
 import * as styles from './index.css.ts'
@@ -16,7 +17,7 @@ type BalloonProps = {
   width: string
   height: string
   isBurst: boolean
-  color: (typeof balloonColors)[number]
+  color: (typeof balloonColors)[number] | 'random'
   onBurst?: () => void
 }
 
@@ -57,6 +58,13 @@ const colors: Record<(typeof balloonColors)[number], string[]> = {
 export const Balloon = (props: BalloonProps) => {
   const balloonId = useId()
   const { playSound } = useBalloonSound()
+  const [seed] = useState(balloonId + Date.now().toString())
+
+  const color =
+    props.color === 'random'
+      ? balloonColors[Math.floor(seedrandom(seed)() * balloonColors.length)]
+      : props.color
+
   const { reward } = useReward(balloonId, 'confetti', {
     zIndex: 100,
     startVelocity: 8,
@@ -65,10 +73,10 @@ export const Balloon = (props: BalloonProps) => {
     elementSize: 6,
     spread: 50,
     position: 'absolute',
-    colors: colors[props.color],
+    colors: colors[color],
   })
 
-  const ariaLabel = match(props)
+  const ariaLabel = match({ isBurst: props.isBurst, color })
     .with({ isBurst: true }, () => '割れた風船')
     .with({ color: 'blue' }, () => '青い風船')
     .with({ color: 'green' }, () => '緑の風船')
@@ -77,6 +85,7 @@ export const Balloon = (props: BalloonProps) => {
 
   return (
     <button
+      suppressHydrationWarning={props.color === 'random'}
       style={{
         width: props.width,
         height: props.height,
@@ -86,7 +95,7 @@ export const Balloon = (props: BalloonProps) => {
       aria-label={ariaLabel}
       className={`${styles.balloon} ${props.className}`}
       data-broken-balloon={props.isBurst}
-      data-balloon-color={props.color}
+      data-balloon-color={color}
       onClick={() => {
         if (!props.isBurst) {
           playSound()
diff --git a/apps/trpfrog.net/src/app/balloon/useBalloonState.ts b/apps/trpfrog.net/src/app/balloon/useBalloonState.ts
index 7ccbcae5..dc2d318f 100644
--- a/apps/trpfrog.net/src/app/balloon/useBalloonState.ts
+++ b/apps/trpfrog.net/src/app/balloon/useBalloonState.ts
@@ -7,14 +7,7 @@ type BalloonColor = (typeof balloonColors)[number]
 
 interface BalloonState {
   isBurst: boolean
-  color: BalloonColor
-}
-
-function createRandomBalloonState(): BalloonState {
-  return {
-    isBurst: false,
-    color: balloonColors[Math.floor(Math.random() * balloonColors.length)],
-  }
+  color: BalloonColor | 'random'
 }
 
 export function useBalloonState(
@@ -27,7 +20,10 @@ export function useBalloonState(
   const [balloons, updateBalloons] = useImmer<BalloonState[]>(() => {
     const balloons: BalloonState[] = []
     for (let i = 0; i < initialAmount; i++) {
-      balloons.push(createRandomBalloonState())
+      balloons.push({
+        isBurst: false,
+        color: 'random',
+      })
     }
     return balloons
   })
@@ -47,7 +43,10 @@ export function useBalloonState(
       if (newAmount === balloons.length) return
       updateBalloons(draft => {
         while (draft.length < newAmount) {
-          draft.push(createRandomBalloonState())
+          draft.push({
+            isBurst: false,
+            color: 'random',
+          })
         }
         while (draft.length > newAmount) {
           draft.pop()
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index d43ead03..1fff041c 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -389,6 +389,9 @@ importers:
       '@twemoji/api':
         specifier: ^15.1.0
         version: 15.1.0
+      '@types/seedrandom':
+        specifier: ^3.0.8
+        version: 3.0.8
       '@vanilla-extract/css':
         specifier: ^1.16.1
         version: 1.16.1
@@ -539,6 +542,9 @@ importers:
       remark-unwrap-images:
         specifier: ^4.0.1
         version: 4.0.1
+      seedrandom:
+        specifier: ^3.0.5
+        version: 3.0.5
       server-only:
         specifier: ^0.0.1
         version: 0.0.1
@@ -758,7 +764,7 @@ importers:
     dependencies:
       vitest:
         specifier: ^1.5.2
-        version: 1.6.0(@types/node@22.10.2)(@vitest/ui@2.1.8)(happy-dom@15.11.7)(jsdom@25.0.1(bufferutil@4.0.8))(lightningcss@1.28.2)(sass@1.83.0)(sugarss@4.0.1(postcss@8.4.49))(terser@5.31.2)
+        version: 1.6.0(@types/node@22.10.2)(@vitest/ui@2.1.8(vitest@2.1.8))(happy-dom@15.11.7)(jsdom@25.0.1(bufferutil@4.0.8))(lightningcss@1.28.2)(sass@1.83.0)(sugarss@4.0.1(postcss@8.4.49))(terser@5.31.2)
 
   packages/constants:
     dependencies:
@@ -2930,6 +2936,7 @@ packages:
 
   '@evilmartians/lefthook@1.10.1':
     resolution: {integrity: sha512-G1NPLB4yLYYEyz8oH7yWgHsxUiF546aS1ChSRPNFPSosLxZFM8wqDxek/J9sT447v83gJbKdrnstxeQW/9CIRA==}
+    cpu: [x64, arm64, ia32]
     os: [darwin, linux, win32]
     hasBin: true
 
@@ -5043,6 +5050,9 @@ packages:
   '@types/retry@0.12.0':
     resolution: {integrity: sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==}
 
+  '@types/seedrandom@3.0.8':
+    resolution: {integrity: sha512-TY1eezMU2zH2ozQoAFAQFOPpvP15g+ZgSfTZt31AUUH/Rxtnz3H+A/Sv1Snw2/amp//omibc+AEkTaA8KUeOLQ==}
+
   '@types/semver@7.5.8':
     resolution: {integrity: sha512-I8EUhyrgfLrcTkzV3TSsGyl1tSuPrEDzr0yd5m90UgNxQkyDXULk3b6MlQqTCpZpNtWe1K0hzclnZkTcLBe2UQ==}
 
@@ -10757,6 +10767,9 @@ packages:
   secure-json-parse@2.7.0:
     resolution: {integrity: sha512-6aU+Rwsezw7VR8/nyvKTx8QpWH9FrcYiXXlqC4z5d5XQBDRqtbfsRjnwGyqbi3gddNtWHuEk9OANUotL26qKUw==}
 
+  seedrandom@3.0.5:
+    resolution: {integrity: sha512-8OwmbklUNzwezjGInmZ+2clQmExQPvomqjL7LFqOYqtmuxRgQYqOD3mHaU+MvZn5FLUeVxVfQjwLZW/n/JFuqg==}
+
   selfsigned@2.4.1:
     resolution: {integrity: sha512-th5B4L2U+eGLq1TVh7zNRGBapioSORUeymIydxgFpwww9d2qyKvtuPU2jJuHvYAwwqi2Y596QBL3eEqcPEYL8Q==}
     engines: {node: '>=10'}
@@ -17510,6 +17523,8 @@ snapshots:
 
   '@types/retry@0.12.0': {}
 
+  '@types/seedrandom@3.0.8': {}
+
   '@types/semver@7.5.8': {}
 
   '@types/send@0.17.4':
@@ -24678,6 +24693,8 @@ snapshots:
 
   secure-json-parse@2.7.0: {}
 
+  seedrandom@3.0.5: {}
+
   selfsigned@2.4.1:
     dependencies:
       '@types/node-forge': 1.3.11
@@ -26070,7 +26087,7 @@ snapshots:
       sugarss: 4.0.1(postcss@8.4.49)
       terser: 5.31.2
 
-  vitest@1.6.0(@types/node@22.10.2)(@vitest/ui@2.1.8)(happy-dom@15.11.7)(jsdom@25.0.1(bufferutil@4.0.8))(lightningcss@1.28.2)(sass@1.83.0)(sugarss@4.0.1(postcss@8.4.49))(terser@5.31.2):
+  vitest@1.6.0(@types/node@22.10.2)(@vitest/ui@2.1.8(vitest@2.1.8))(happy-dom@15.11.7)(jsdom@25.0.1(bufferutil@4.0.8))(lightningcss@1.28.2)(sass@1.83.0)(sugarss@4.0.1(postcss@8.4.49))(terser@5.31.2):
     dependencies:
       '@vitest/expect': 1.6.0
       '@vitest/runner': 1.6.0