コード保存/読込機能を追加

prisma/migrations/20251113084438_add_code_state/migration.sql

@@ -0,0 +1,9 @@
+-- CreateTable
+CREATE TABLE "CodeState" (
+    "id" SERIAL NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "codeData" TEXT NOT NULL,
+    "codeName" TEXT NOT NULL,
+
+    CONSTRAINT "CodeState_pkey" PRIMARY KEY ("id")
+);

prisma/migrations/20251113132626_rename/migration.sql

@@ -0,0 +1,33 @@
+/*
+  Warnings:
+
+  - You are about to drop the `BoardState` table. If the table is not empty, all the data it contains will be lost.
+  - You are about to drop the `CodeState` table. If the table is not empty, all the data it contains will be lost.
+
+*/
+-- DropTable
+DROP TABLE "BoardState";
+
+-- DropTable
+DROP TABLE "CodeState";
+
+-- CreateTable
+CREATE TABLE "Board" (
+    "id" SERIAL NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "data" JSONB NOT NULL,
+    "name" TEXT NOT NULL,
+    "preview" JSONB NOT NULL,
+
+    CONSTRAINT "Board_pkey" PRIMARY KEY ("id")
+);
+
+-- CreateTable
+CREATE TABLE "Code" (
+    "id" SERIAL NOT NULL,
+    "createdAt" TIMESTAMP(3) NOT NULL DEFAULT CURRENT_TIMESTAMP,
+    "data" TEXT NOT NULL,
+    "name" TEXT NOT NULL,
+
+    CONSTRAINT "Code_pkey" PRIMARY KEY ("id")
+);

prisma/schema.prisma

@@ -15,10 +15,17 @@ datasource db {
   url      = env("DATABASE_URL")
 }
 
-model BoardState {
+model Board {
   id        Int      @id @default(autoincrement())
   createdAt DateTime @default(now())
-  boardData Json
-  boardName String
-  boardPreview Json
+  data Json
+  name String
+  preview Json
 }
+
+model Code {
+  id        Int      @id @default(autoincrement())
+  createdAt DateTime @default(now())
+  data String
+  name String
+}

src/routes/api.ts → src/lib/api/board.ts

@@ -29,9 +29,9 @@ export async function saveBoard(data: { board: boolean[][]; name: string }, isJa
 
 export type BoardListItem = {
   id: number;
-  boardName: string;
+  name: string;
   createdAt: string;
-  boardPreview: boolean[][];
+  preview: boolean[][];
 };
 
 export async function fetchBoardList(isJapanese: boolean): Promise<BoardListItem[] | undefined> {

src/lib/api/code.ts

@@ -0,0 +1,84 @@
+export async function saveCode(data: { code: string; name: string }, isJapanese: boolean) {
+  try {
+    const response = await fetch("/api/code", {
+      method: "POST",
+      headers: {
+        "Content-Type": "application/json",
+      },
+      body: JSON.stringify(data),
+    });
+
+    if (!response.ok) {
+      throw new Error("Failed to communicate with the server.");
+    }
+
+    if (isJapanese) {
+      alert("コードを保存しました！");
+    } else {
+      alert("Code saved!");
+    }
+  } catch (err) {
+    console.error("Save Error:", err);
+    if (isJapanese) {
+      alert("保存に失敗しました。");
+    } else {
+      alert("Failed to save.");
+    }
+  }
+}
+
+export type CodeListItem = {
+  id: number;
+  name: string;
+  createdAt: string;
+};
+
+export async function fetchCodeList(isJapanese: boolean): Promise<CodeListItem[] | undefined> {
+  try {
+    const response = await fetch("/api/code");
+
+    if (!response.ok) {
+      if (response.status === 404) {
+        throw new Error("There is no saved data.");
+      } else {
+        throw new Error("Failed to communicate with the server.");
+      }
+    }
+
+    const codeList = await response.json();
+
+    return codeList as CodeListItem[];
+  } catch (err) {
+    console.error("Load error", err);
+    if (isJapanese) {
+      alert("読み込みに失敗しました。");
+    } else {
+      alert("Failed to load.");
+    }
+  }
+}
+
+export async function loadCodeById(id: number, isJapanese: boolean): Promise<string | undefined> {
+  try {
+    const response = await fetch(`/api/code?id=${id}`);
+
+    if (!response.ok) {
+      if (response.status === 404) {
+        throw new Error("The specified ID data was not found.");
+      } else {
+        throw new Error("Failed to communicate with the server.");
+      }
+    }
+
+    const loadedCode = await response.json();
+
+    return loadedCode as string;
+  } catch (err) {
+    console.error("Load error", err);
+    if (isJapanese) {
+      alert("読み込みに失敗しました。");
+    } else {
+      alert("Failed to load.");
+    }
+  }
+}

src/lib/board-preview.ts

@@ -4,7 +4,7 @@ const PREVIEW_SIZE = 20;
  * 任意のサイズの盤面データから、中央 20x20 のプレビューを生成します。
  * 20x20 に満たない場合は、中央に配置し、周囲を false (空白) で埋めます。
  */
-export function createPreview(boardData: boolean[][]): boolean[][] {
+export function createBoardPreview(boardData: boolean[][]): boolean[][] {
   const boardHeight = boardData.length;
   const boardWidth = boardData[0]?.length || 0;
 

src/lib/components/BoardModals.svelte

@@ -0,0 +1,145 @@
+<script lang="ts">
+  import type { BoardManager } from "$lib/models/BoardManager.svelte";
+
+  let {
+    manager,
+    isJapanese,
+    onSelect,
+  }: {
+    manager: BoardManager;
+    isJapanese: boolean;
+    onSelect: (id: number) => void;
+  } = $props();
+</script>
+
+<dialog class="modal" open={manager.saveState.saving}>
+  <form method="dialog" class="modal-box">
+    <h3 class="font-bold text-lg">{isJapanese ? "盤面を保存" : "Save board"}</h3>
+    {#if manager.saveState.saving}
+      <div class="flex flex-row gap-4 mt-4">
+        <div class="w-90 flex flex-col gap-4">
+          <p class="py-4">
+            {isJapanese
+              ? "保存する盤面に名前を付けてください（任意）。"
+              : "Please name the board you wish to save (optional)."}
+          </p>
+          <input
+            type="text"
+            placeholder={isJapanese ? "盤面名を入力" : "Enter board name"}
+            class="input input-bordered w-full max-w-xs"
+            bind:value={manager.saveState.name}
+          />
+        </div>
+        <div class="flex flex-col flex-shrink-0">
+          <div class="text-center text-sm mb-2">
+            {isJapanese ? "プレビュー" : "Preview"}
+          </div>
+          <div class="board-preview">
+            {#each manager.saveState.preview as row, i (i)}
+              <div class="preview-row">
+                {#each row as cell, j (j)}
+                  <div class="preview-cell {cell ? 'alive' : ''}"></div>
+                {/each}
+              </div>
+            {/each}
+          </div>
+        </div>
+      </div>
+      <div class="modal-action">
+        <button type="button" class="btn" onclick={() => manager.closeSaveModal()}
+          >{isJapanese ? "キャンセル" : "Cancel"}</button
+        >
+        <button
+          type="submit"
+          class="btn btn-primary"
+          onclick={() => manager.save(isJapanese)}
+          disabled={!manager.saveState.saving}
+        >
+          {isJapanese ? "保存" : "Save"}
+        </button>
+      </div>
+    {/if}
+  </form>
+</dialog>
+
+<dialog class="modal" open={manager.loadState.state !== "closed"}>
+  <div class="modal-box w-11/12 max-w-5xl">
+    <h3 class="font-bold text-lg">{isJapanese ? "盤面をロード" : "Load board"}</h3>
+
+    {#if manager.loadState.state === "loading"}
+      <p class="py-4">
+        {isJapanese ? "保存されている盤面を読み込み中..." : "Loading saved boards..."}
+      </p>
+      <span class="loading loading-spinner loading-lg"></span>
+    {:else if manager.loadState.state === "list" && manager.loadState.list.length === 0}
+      <p class="py-4">
+        {isJapanese ? "保存されている盤面はありません。" : "No saved boards found."}
+      </p>
+    {:else if manager.loadState.state === "list"}
+      <div class="overflow-x-auto h-96">
+        <table class="table w-full">
+          <thead>
+            <tr>
+              <th class="pl-5">{isJapanese ? "プレビュー" : "Preview"}</th>
+              <th>{isJapanese ? "盤面名" : "Board Name"}</th>
+              <th>{isJapanese ? "保存日時" : "Saved At"}</th>
+              <th></th>
+            </tr>
+          </thead>
+          <tbody>
+            {#each manager.loadState.list as item (item.id)}
+              <tr class="hover:bg-base-300">
+                <td>
+                  <div class="board-preview">
+                    {#each item.preview as row, i (i)}
+                      <div class="preview-row">
+                        {#each row as cell, j (j)}
+                          <div class="preview-cell {cell ? 'alive' : ''}"></div>
+                        {/each}
+                      </div>
+                    {/each}
+                  </div>
+                </td>
+                <td>{item.name}</td>
+                <td>{new Date(item.createdAt).toLocaleString(isJapanese ? "ja-JP" : "en-US")}</td>
+                <td class="text-right">
+                  <button class="btn btn-sm btn-primary" onclick={() => onSelect(item.id)}>
+                    {isJapanese ? "ロード" : "Load"}
+                  </button>
+                </td>
+              </tr>
+            {/each}
+          </tbody>
+        </table>
+      </div>
+    {/if}
+
+    <div class="modal-action">
+      <button class="btn" onclick={() => manager.closeLoadModal()}>
+        {isJapanese ? "閉じる" : "Close"}
+      </button>
+    </div>
+  </div>
+</dialog>
+
+<style>
+  .board-preview {
+    display: grid;
+    grid-template-columns: repeat(20, 3px);
+    grid-template-rows: repeat(20, 3px);
+    width: 60px;
+    height: 60px;
+    border: 1px solid #9ca3af;
+    background-color: white;
+  }
+  .preview-row {
+    display: contents;
+  }
+  .preview-cell {
+    width: 3px;
+    height: 3px;
+  }
+  .preview-cell.alive {
+    background-color: black;
+  }
+</style>