Feat/refacter

README.md

@@ -6,7 +6,7 @@
 
 ## バックエンド 
 - Hono 
-- ​@cloudflare/wrangler 
+- Cloudflare Workers / Wrangler CLI
 
 ## フロントエンド/UI 
 - ​Preact​ 
@@ -17,4 +17,5 @@
 - Vite​ 
 - ​ESLint & StyleLint 
 - ​Prettier 
-- ​lefthook 
+- ​Husky
+- lint-staged

SKILL.md

@@ -0,0 +1,62 @@
+---
+name: splatoon-random-weapon
+description: Use this skill when working in the splatoon-random-weapon repository. It covers the Preact + Vite frontend, the Hono API running on Cloudflare Pages Functions, and the D1/KV data flow used for random weapon selection and result history.
+---
+
+# Splatoon Random Weapon
+
+Use this skill for feature work, bug fixes, refactors, or reviews in this repository.
+
+## Repo map
+
+- `src/main.tsx`: frontend entry point.
+- `src/app.tsx`: main UI flow. This is the first place to inspect for product behavior.
+- `src/components/`: presentational UI components.
+- `functions/api/[[route]].ts`: API entry point for Cloudflare Pages Functions.
+- `functions/api/routes/weapon.ts`: D1-backed weapon endpoints.
+- `functions/api/routes/result.ts`: KV-backed result endpoint.
+- `wrangler.toml`: Cloudflare bindings for D1 (`DB`) and KV (`RANDOM_WEAPONS`).
+
+## Architecture
+
+- Frontend uses `preact`, `vite`, `tailwindcss`, and `swr`.
+- API uses `hono` on Cloudflare Pages Functions under `/api`.
+- The frontend builds a typed client with `hc<AppType>('/')` and calls:
+  - `GET /api/weapons/random?count=<n>`
+  - `GET /api/results`
+- Local Vite dev proxies `/api` to `http://localhost:3000`.
+
+## Working rules for this repo
+
+- Treat `src/app.tsx` as the current source of truth for user-visible behavior.
+- Keep frontend and API changes aligned. If you change an API response shape, update the typed client usage in `src/app.tsx` in the same task.
+- Be careful with the boundary between real data and placeholders:
+  - `useSWR('results', ...)` fetches live result data from KV.
+  - `cards` in `src/app.tsx` are currently hardcoded sample history entries.
+  - Do not assume the rendered history UI is already wired to backend data.
+- `src/constants/weapon.ts` appears to be legacy or unused. Confirm usage before editing it.
+- `tsconfig.json` includes only `src`, even though the frontend imports types from `functions/`. If type changes behave strangely, inspect this include boundary first.
+- `package.json` is configured for `husky` and `lint-staged`. Avoid assuming hooks are consistently installed.
+
+## Safe change workflow
+
+1. Read `src/app.tsx` and the relevant route files before editing.
+2. Prefer the existing API shape and component patterns unless the task clearly requires a change.
+3. For backend changes, verify the corresponding Cloudflare binding exists in `wrangler.toml`.
+4. For frontend changes, check whether data is live or placeholder before wiring UI logic.
+5. Run the narrowest useful verification available after edits.
+
+## Verification
+
+- Install dependencies: `npm install`
+- Frontend dev server: `npm run dev`
+- Lint scripts: `npm run lint:script`
+- Lint styles: `npm run lint:style`
+
+If a task touches Cloudflare runtime behavior, note that local verification may also require a Pages/Workers dev setup that is not fully captured by current package scripts.
+
+## Known pitfalls
+
+- `functions/api/routes/weapon.ts` builds the SQL `LIMIT` clause from the query string directly. Be cautious when changing request handling there.
+- `index.html` still has the default Vite title, so product polish tasks may need to update app metadata.
+- `wrangler.toml` contains concrete binding IDs. Do not rotate or replace them casually.

functions/api/routes/result.ts

@@ -5,9 +5,46 @@ type Bindings = {
   RANDOM_WEAPONS: KVNamespace
 }
 
-const result = new Hono<{ Bindings: Bindings }>().get('/', async (c) => {
-  let results = await c.env.RANDOM_WEAPONS.get('results', 'json')
-  return c.json(results)
-})
+export type ResultHistoryItem = {
+  id: string
+  title: string
+  weaponList: string[]
+  createdAt: string
+}
+
+type CreateResultPayload = {
+  weaponList?: string[]
+}
+
+const result = new Hono<{ Bindings: Bindings }>()
+  .get('/', async (c) => {
+    const results =
+      (await c.env.RANDOM_WEAPONS.get<ResultHistoryItem[]>('results', 'json')) ??
+      []
+    return c.json(results)
+  })
+  .post('/', async (c) => {
+    const body = (await c.req.json()) as CreateResultPayload
+    const weaponList = body.weaponList?.filter(Boolean) ?? []
+
+    if (weaponList.length === 0) {
+      return c.json({ message: 'weaponList is required' }, 400)
+    }
+
+    const currentResults =
+      (await c.env.RANDOM_WEAPONS.get<ResultHistoryItem[]>('results', 'json')) ??
+      []
+    const nextResult: ResultHistoryItem = {
+      id: crypto.randomUUID(),
+      title: `結果 ${currentResults.length + 1}`,
+      weaponList,
+      createdAt: new Date().toISOString(),
+    }
+    const nextResults = [nextResult, ...currentResults].slice(0, 10)
+
+    await c.env.RANDOM_WEAPONS.put('results', JSON.stringify(nextResults))
+
+    return c.json(nextResult, 201)
+  })
 
 export default result

functions/api/routes/weapon.ts

@@ -25,8 +25,14 @@ const weapon = new Hono<{ Bindings: Bindings }>()
   })
   .get('/random', async (c) => {
     const { count } = c.req.query()
+    const parsedCount = Number.parseInt(count ?? '', 10)
+
+    if (!Number.isInteger(parsedCount) || parsedCount < 1 || parsedCount > 4) {
+      return c.json({ message: 'count must be an integer between 1 and 4' }, 400)
+    }
+
     let { results }: Weapons = await c.env.DB.prepare(
-      `SELECT * FROM Weapons ORDER BY RANDOM() LIMIT ${count};`
+      `SELECT * FROM Weapons ORDER BY RANDOM() LIMIT ${parsedCount};`
     ).all()
     return c.json(results)
   })

index.html

@@ -3,7 +3,7 @@
   <head>
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Vite App</title>
+    <title>Splatoon Random Weapon</title>
   </head>
   <body>
     <div id="app"></div>

package.json

@@ -9,12 +9,9 @@
   },
   "dependencies": {
     "@cloudflare/workers-types": "^4.20240129.0",
-    "@cloudflare/wrangler": "^1.21.0",
     "hono": "^3.12.10",
-    "miniflare": "^3.20240129.0",
     "preact": "^10.7.1",
-    "swr": "^2.2.5",
-    "wrangler": "^3.26.0"
+    "swr": "^2.2.5"
   },
   "devDependencies": {
     "@preact/preset-vite": "^2.0.0",
@@ -34,7 +31,7 @@
     "stylelint-config-standard": "^24.0.0",
     "tailwindcss": "^3.0.7",
     "typescript": "^4.5.2",
-    "vite": "^5.0.0"
+    "vite": "^4.5.0"
   },
   "husky": {
     "hooks": {

src/app.tsx

@@ -11,90 +11,149 @@ import { CardList } from '@/components/CardList'
 import { SelectBox } from '@/components/SelectBox'
 
 import { AppType } from '../functions/api/[[route]]'
+import { ResultHistoryItem } from '../functions/api/routes/result'
 import { Weapon } from '../functions/api/routes/weapon'
 
 export function App() {
   const client = hc<AppType>('/')
-  const $random = (count: string) =>
+  const [weaponList, setWeaponList] = useState<string[]>([])
+  const [person, setPerson] = useState('1')
+  const [isSubmitting, setIsSubmitting] = useState(false)
+  const [errorMessage, setErrorMessage] = useState('')
+  const $random = async (count: string) =>
     client.api.weapons.random.$get({
       query: {
         count,
       },
     })
-  const $result = client.api.results.$get
-  const [weaponList, setWeaponList] = useState<string[]>([])
-  const [person, setPerson] = useState('1')
-  const fetcher = (arg: any) => async () => {
-    const res = await $result(arg)
-    return await res.json()
+  const fetchResults = async () => {
+    const res = await client.api.results.$get()
+
+    if (!res.ok) {
+      throw new Error('履歴の取得に失敗しました')
+    }
+
+    return (await res.json()) as ResultHistoryItem[]
   }
-  const { data } = useSWR('results', fetcher({}), {
+  const { data, error, mutate, isLoading } = useSWR('results', fetchResults, {
     revalidateOnFocus: false,
   })
-  const cards = [
-    {
-      title: '結果１',
-      weaponList: ['52ガロン', 'N-ZAP85', 'スプラローラー', 'スプラシューター'],
-    },
-    {
-      title: '結果２',
-      weaponList: [
-        'スプラチャージャー',
-        'スプラスコープ',
-        'スプラマニューバー',
-        'スプラマニューバーコラボ',
-      ],
-    },
-    {
-      title: '結果３',
-      weaponList: [
-        'スプラスピナー',
-        'スプラスピナーコラボ',
-        'スプラシューターコラボ',
-        'スプラローラー',
-      ],
-    },
-  ]
 
   const optionList = [
     { label: '1人', value: '1' },
     { label: '2人', value: '2' },
     { label: '3人', value: '3' },
     { label: '4人', value: '4' },
   ]
-  // optionListで選択した人数分の武器をランダムで取得してて、それをweaponListに入れる
+
+  const createResult = async (nextWeaponList: string[]) => {
+    const res = await client.api.results.$post({
+      json: {
+        weaponList: nextWeaponList,
+      },
+    })
+
+    if (!res.ok) {
+      throw new Error('結果の保存に失敗しました')
+    }
+  }
+
   const handleClick = async (person: string) => {
-    const randomResponse = await $random(person)
+    setIsSubmitting(true)
+    setErrorMessage('')
+
+    try {
+      const randomResponse = await $random(person)
+
+      if (!randomResponse.ok) {
+        throw new Error('武器の抽選に失敗しました')
+      }
 
-    //武器名のみの配列に変換
-    const randomWeaponList: string[] = (await randomResponse.json()).map(
-      (weapon: Weapon) => weapon.weaponName
-    )
-    setWeaponList(randomWeaponList)
+      const randomWeaponList: string[] = (await randomResponse.json()).map(
+        (weapon: Weapon) => weapon.weaponName
+      )
+
+      setWeaponList(randomWeaponList)
+      await createResult(randomWeaponList)
+      await mutate()
+    } catch (error) {
+      setErrorMessage(
+        error instanceof Error ? error.message : '処理中にエラーが発生しました'
+      )
+    } finally {
+      setIsSubmitting(false)
+    }
   }
-  // 人数を選択するセレクトボックス
+
   const setOnChangePerson = (value: string) => {
     setPerson(value)
   }
+
+  const historyCards =
+    data?.map((item) => ({
+      id: item.id,
+      title: item.title,
+      subtitle: new Date(item.createdAt).toLocaleString('ja-JP'),
+      weaponList: item.weaponList,
+    })) ?? []
+
   return (
     <>
-      <div class="flex m-6 justify-center">
-        <SelectBox
-          title="人数"
-          optionList={optionList}
-          onChange={(e) => setOnChangePerson(e)}
-        />
-      </div>
-      <p>json: {JSON.stringify(data)}</p>
-      {weaponList.length > 0 && (
-        <div class="flex justify-center">
-          <Card title="結果" weaponList={weaponList} />
+      <div class="min-h-screen bg-slate-100">
+        <div class="mx-auto max-w-5xl px-4 py-8">
+          <div class="mb-8 text-center">
+            <h1 class="text-3xl font-bold text-slate-800">
+              Splatoon Random Weapon
+            </h1>
+            <p class="mt-2 text-slate-600">
+              人数を選ぶと、その場のチーム武器をランダムに決定します。
+            </p>
+          </div>
+
+          <div class="mb-8 rounded-xl bg-white p-6 shadow-md">
+            <div class="flex flex-col items-center gap-4 md:flex-row md:justify-center">
+              <SelectBox
+                title="人数"
+                optionList={optionList}
+                onChange={(e) => setOnChangePerson(e)}
+                value={person}
+              />
+              <div class="pt-5">
+                <Button
+                  text={isSubmitting ? '抽選中...' : 'スタート'}
+                  onClick={() => handleClick(person)}
+                  disabled={isSubmitting}
+                />
+              </div>
+            </div>
+            {errorMessage && (
+              <p class="mt-4 text-center text-sm text-red-500">{errorMessage}</p>
+            )}
+          </div>
+
+          {weaponList.length > 0 && (
+            <div class="mb-8 flex justify-center">
+              <Card title="今回の結果" weaponList={weaponList} />
+            </div>
+          )}
+
+          <section>
+            <div class="mb-4 flex items-center justify-between">
+              <h2 class="text-2xl font-bold text-slate-800">履歴</h2>
+              {isLoading && <p class="text-sm text-slate-500">読み込み中...</p>}
+            </div>
+            {error && (
+              <p class="mb-4 text-sm text-red-500">履歴を取得できませんでした。</p>
+            )}
+            {!isLoading && !error && historyCards.length === 0 && (
+              <div class="rounded-xl bg-white p-6 text-center text-slate-500 shadow-md">
+                まだ履歴がありません。最初の抽選をしてみましょう。
+              </div>
+            )}
+            {historyCards.length > 0 && <CardList cards={historyCards} />}
+          </section>
         </div>
-      )}
-      <div class="flex m-4 justify-center">
-        <Button text="スタート" onClick={() => handleClick(person)} />
       </div>
-      <CardList cards={cards} />
     </>
   )
 }