Merge pull request #22 from ut-code/Database-v2

Save,Loadボタンをsveltに移しました
盤面に名前を付ける機能を追加しました

Author: Haruto-Imai

bun.lock

@@ -39,6 +39,7 @@
   },
   "dependencies": {
     "@prisma/adapter-pg": "^6.19.0",
-    "@prisma/client": "^6.19.0"
+    "@prisma/client": "^6.19.0",
+    "valibot": "^1.1.0"
   }
 }

package.json

@@ -0,0 +1,9 @@
+-- CreateTable
+CREATE TABLE "BoardState" (
+    "id" SERIAL NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "boardData" JSONB NOT NULL,
+    "boardName" TEXT NOT NULL,
+
+    CONSTRAINT "BoardState_pkey" PRIMARY KEY ("id")
+);

prisma/migrations/20251109055509_add_board_name/migration.sql

@@ -19,4 +19,5 @@ model BoardState {
   id        Int      @id @default(autoincrement())
   createdAt DateTime @default(now())
   boardData Json
+  boardName String
 }

prisma/schema.prisma

@@ -13,10 +13,6 @@
     "
   >
     <table id="game-board" style="border-collapse: collapse"></table>
-
-    <button id="saveButton">SAVE</button>
-    <button id="loadButton">LOAD</button>
-
     <script src="./life-game.js"></script>
   </body>
 </html>

src/iframe/life-game.html

@@ -25,9 +25,6 @@ function isNextAlive(around, self) {
   return false;
 }
 
-const saveButton = document.getElementById("saveButton");
-const loadButton = document.getElementById("loadButton");
-
 //Boardの初期化
 let board = Array.from({ length: boardSize }, () => Array.from({ length: boardSize }, () => false));
 const table = document.getElementById("game-board");
@@ -131,10 +128,6 @@ on.pause = () => {
   clearInterval(timerId);
 };
 
-on.load_board = (boardTemplate) => {
-  board = boardTemplate;
-};
-
 on.resize = (newBoardSize) => {
   boardSize = newBoardSize;
 };
@@ -191,18 +184,12 @@ on.stateupdate = () => {
 
 on.sizechange(boardSize);
 
-saveButton.onclick = async () => {
+on.save_board = async () => {
   window.parent.postMessage({ type: "save_board", data: board }, "*");
 };
 
-loadButton.onclick = async () => {
-  window.parent.postMessage({ type: "request:load_board" }, "*");
-};
-
-on.load_board = (loadedBoard) => {
-  console.log("on.load_board");
-  board = loadedBoard;
+on.apply_board = (newBoard) => {
+  board = newBoard;
   renderBoard();
   generationChange(0);
-  stop();
 };

src/iframe/life-game.js

@@ -33,6 +33,10 @@
   let generationFigure = $state(0);
   let sizeInputValue = $state(20);
 
+  type SaveState = { saving: false } | { saving: true; boardData: boolean[][] };
+  let saveState: SaveState = $state({ saving: false });
+  let boardNameInput = $state("");
+
   onMount(() => {
     const handleMessage = (event: MessageEvent) => {
       if (event.data.type === "patternError") {
@@ -60,30 +64,38 @@
 
   onMount(() => {
     const handler = async (event: MessageEvent<unknown>) => {
-      console.log("handler call");
       const data = event.data as
         | { type: "unknown event" }
-        | { type: "save_board"; data: boolean[][] }
-        | { type: "request:load_board" };
+        | { type: "save_board"; data: boolean[][] };
       if (data.type === "save_board") {
-        console.log("board saved!");
-        await saveBoard(data.data);
-        return;
-      }
-
-      if (data.type === "request:load_board") {
-        console.log("loaded board");
-        const board = await loadBoard();
-        if (board) {
-          sendEvent("load_board", board);
-        }
+        saveState = { saving: true, boardData: data.data };
+        boardNameInput = "";
         return;
       }
     };
 
     window.addEventListener("message", handler);
     return () => window.removeEventListener("message", handler);
   });
+
+  async function handleSave() {
+    if (!saveState.saving) return;
+
+    const name = boardNameInput.trim() === "" ? "Unnamed Board" : boardNameInput.trim();
+
+    await saveBoard({ board: saveState.boardData, name: name });
+
+    saveState = { saving: false };
+    boardNameInput = "";
+  }
+
+  async function handleLoad() {
+    const board = await loadBoard();
+    if (board) {
+      sendEvent("apply_board", board);
+    }
+    return;
+  }
 </script>
 
 <div class="navbar bg-[#E0E0E0] shadow-sm">
@@ -146,6 +158,26 @@
   </div>
 </div>
 
+<input type="checkbox" class="modal-toggle" bind:checked={saveState.saving} />
+<div class="modal" class:modal-open={saveState.saving}>
+  <div class="modal-box">
+    <h3 class="font-bold text-lg">盤面を保存</h3>
+    <p class="py-4">保存する盤面に名前を付けてください（任意）。</p>
+    <input
+      type="text"
+      placeholder="盤面名を入力"
+      class="input input-bordered w-full max-w-xs"
+      bind:value={boardNameInput}
+    />
+    <div class="modal-action">
+      <button class="btn" onclick={() => (saveState = { saving: false })}>キャンセル</button>
+      <button class="btn btn-primary" onclick={handleSave} disabled={!saveState.saving}>
+        保存
+      </button>
+    </div>
+  </div>
+</div>
+
 <input type="checkbox" class="modal-toggle" bind:checked={resetModalOpen} />
 <div class="modal" class:modal-open={resetModalOpen}>
   <div class="modal-box">
@@ -256,7 +288,7 @@
   </div>
 
   <button
-    class="btn btn-ghost hover:bg-[rgb(220,220,220)] ml-100 text-black"
+    class="btn btn-ghost hover:bg-[rgb(220,220,220)] ml-50 text-black"
     onclick={() => {
       isProgress = false;
       sendEvent("boardreset");
@@ -275,6 +307,27 @@
     Random
   </button>
 
+  <button
+    class="btn btn-ghost hover:bg-[rgb(220,220,220)] text-black"
+    onclick={() => {
+      isProgress = false;
+      sendEvent("save_board");
+    }}
+  >
+    Save
+  </button>
+
+  <button
+    class="btn btn-ghost hover:bg-[rgb(220,220,220)] text-black"
+    onclick={() => {
+      isProgress = false;
+      sendEvent("pause");
+      handleLoad();
+    }}
+  >
+    Load
+  </button>
+
   <button
     class="btn btn-ghost hover:bg-[rgb(220,220,220)] ml-5 text-black"
     onclick={() => {

src/routes/+page.svelte

@@ -1,11 +1,11 @@
-export async function saveBoard(board: boolean[][]) {
+export async function saveBoard(data: { board: boolean[][]; name: string }) {
   try {
     const response = await fetch("/api/board", {
       method: "POST",
       headers: {
         "Content-Type": "application/json",
       },
-      body: JSON.stringify(board),
+      body: JSON.stringify(data),
     });
 
     if (!response.ok) {
@@ -33,7 +33,6 @@ export async function loadBoard(): Promise<boolean[][] | undefined> {
 
     const loadedBoard = await response.json();
 
-    console.log("fetched board:", loadedBoard);
     return loadedBoard as boolean[][]; // TODO: add proper types
   } catch (err) {
     console.error("読込エラー:", err);

src/routes/api.ts

@@ -1,12 +1,27 @@
 import { json } from "@sveltejs/kit";
 import { prisma } from "@/lib/prisma.server.ts";
+import * as v from "valibot";
+
+const BoardSchema = v.object({
+  board: v.array(v.array(v.boolean())),
+  name: v.pipe(v.string(), v.minLength(1, "盤面名は必須です。")),
+});
 
 export async function POST({ request }) {
-  const boardData = await request.json();
+  let body;
+  try {
+    body = v.parse(BoardSchema, await request.json());
+  } catch (error) {
+    console.error("Request validation failed:", error);
+    return json({ message: "無効なリクエストデータです。" }, { status: 400 });
+  }
+
+  const { board, name } = body;
 
   const newState = await prisma.boardState.create({
     data: {
-      boardData: boardData,
+      boardData: board,
+      boardName: name,
     },
   });