Merge pull request #106 from trpfrog/suppress-balloon-hydration-error

風船の色に "random" を追加

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",

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()

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()