盤面と共にコードを保存/読込するよう変更

Author: Haruto-Imai

prisma/migrations/20251115084446_add_is_edited_and_code_data_column/migration.sql

@@ -0,0 +1,10 @@
+/*
+  Warnings:
+
+  - Added the required column `codeData` to the `Board` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `isEdited` to the `Board` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "Board" ADD COLUMN     "codeData" JSONB NOT NULL,
+ADD COLUMN     "isEdited" BOOLEAN NOT NULL;

prisma/migrations/20251115104313_delete_is_edited_column/migration.sql

@@ -0,0 +1,8 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `isEdited` on the `Board` table. All the data in the column will be lost.
+
+*/
+-- AlterTable
+ALTER TABLE "Board" DROP COLUMN "isEdited";

prisma/migrations/20251115105024_rename_columns/migration.sql

@@ -0,0 +1,14 @@
+/*
+  Warnings:
+
+  - You are about to drop the column `codeData` on the `Board` table. All the data in the column will be lost.
+  - You are about to drop the column `data` on the `Board` table. All the data in the column will be lost.
+  - Added the required column `board` to the `Board` table without a default value. This is not possible if the table is not empty.
+  - Added the required column `code` to the `Board` table without a default value. This is not possible if the table is not empty.
+
+*/
+-- AlterTable
+ALTER TABLE "Board" DROP COLUMN "codeData",
+DROP COLUMN "data",
+ADD COLUMN     "board" JSONB NOT NULL,
+ADD COLUMN     "code" JSONB NOT NULL;

prisma/schema.prisma

@@ -18,9 +18,10 @@ datasource db {
 model Board {
   id        Int      @id @default(autoincrement())
   createdAt DateTime @default(now())
-  data Json
+  board Json
   name String
   preview Json
+  code Json
 }
 
 model Code {

src/lib/api/board.ts

@@ -1,6 +1,9 @@
 import { toast } from "$lib/models/ToastStore.svelte";
 
-export async function saveBoard(data: { board: number[][]; name: string }, isJapanese: boolean) {
+export async function saveBoard(
+  data: { board: number[][]; name: string; code: string },
+  isJapanese: boolean,
+) {
   try {
     const response = await fetch("/api/board", {
       method: "POST",
@@ -61,10 +64,15 @@ export async function fetchBoardList(isJapanese: boolean): Promise<BoardListItem
   }
 }
 
+export type LoadedBoardData = {
+  board: number[][];
+  code: string;
+};
+
 export async function loadBoardById(
   id: number,
   isJapanese: boolean,
-): Promise<number[][] | undefined> {
+): Promise<LoadedBoardData | undefined> {
   try {
     const response = await fetch(`/api/board?id=${id}`);
 
@@ -78,7 +86,7 @@ export async function loadBoardById(
 
     const loadedBoard = await response.json();
 
-    return loadedBoard as number[][];
+    return loadedBoard as LoadedBoardData;
   } catch (err) {
     console.error("Load error", err);
     if (isJapanese) {

src/lib/models/BoardManager.svelte.ts

@@ -1,9 +1,21 @@
 import { createBoardPreview } from "$lib/board-preview";
-import { saveBoard, fetchBoardList, loadBoardById, type BoardListItem } from "$lib/api/board";
+import {
+  saveBoard,
+  fetchBoardList,
+  loadBoardById,
+  type BoardListItem,
+  type LoadedBoardData,
+} from "$lib/api/board";
 
 type SaveState =
   | { saving: false }
-  | { saving: true; data: number[][]; name: string; preview: number[][] };
+  | {
+      saving: true;
+      board: number[][];
+      name: string;
+      preview: number[][];
+      code: string;
+    };
 
 type LoadState =
   | { state: "closed" }
@@ -16,9 +28,15 @@ export class BoardManager {
 
   constructor() {}
 
-  openSaveModal(board: number[][]) {
+  openSaveModal(board: number[][], code: string) {
     const preview = createBoardPreview(board);
-    this.saveState = { saving: true, data: board, name: "", preview: preview };
+    this.saveState = {
+      saving: true,
+      board: board,
+      name: "",
+      preview: preview,
+      code: code,
+    };
   }
 
   closeSaveModal() {
@@ -28,7 +46,14 @@ export class BoardManager {
   async save(isJapanese: boolean) {
     if (!this.saveState.saving) return;
     const name = this.saveState.name.trim() === "" ? "Unnamed Board" : this.saveState.name.trim();
-    await saveBoard({ board: this.saveState.data, name }, isJapanese);
+    await saveBoard(
+      {
+        board: this.saveState.board,
+        name: name,
+        code: this.saveState.code,
+      },
+      isJapanese,
+    );
     this.closeSaveModal();
   }
 
@@ -46,7 +71,7 @@ export class BoardManager {
     this.loadState = { state: "closed" };
   }
 
-  async load(id: number, isJapanese: boolean): Promise<number[][] | undefined> {
+  async load(id: number, isJapanese: boolean): Promise<LoadedBoardData | undefined> {
     this.closeLoadModal();
     return await loadBoardById(id, isJapanese);
   }

src/routes/+page.svelte

@@ -88,7 +88,7 @@
         break;
       }
       case "save_board": {
-        boardManager.openSaveModal(event.data.data as number[][]);
+        boardManager.openSaveModal(event.data.data as number[][], appliedCode as string);
         break;
       }
       default: {
@@ -110,9 +110,11 @@
   }
 
   async function onBoardSelect(id: number) {
-    const board = await boardManager.load(id, isJapanese);
-    if (board) {
-      sendEvent("apply_board", board);
+    const data = await boardManager.load(id, isJapanese);
+    if (data) {
+      editingCode = data.code;
+      appliedCode = data.code;
+      sendEvent("apply_board", data.board);
     }
   }
 

src/routes/api/board/+server.ts

@@ -6,6 +6,7 @@ import * as v from "valibot";
 const BoardSchema = v.object({
   board: v.array(v.array(v.number())),
   name: v.pipe(v.string(), v.minLength(1, "盤面名は必須です。")),
+  code: v.string(),
 });
 
 export async function POST({ request }) {
@@ -23,14 +24,15 @@ export async function POST({ request }) {
     return json({ message: "無効なリクエストデータです。" }, { status: 400 });
   }
 
-  const { board, name } = result.output;
+  const { board, name, code } = result.output;
   const preview = createBoardPreview(board);
 
   const newState = await prisma.board.create({
     data: {
-      data: board,
+      board: board,
       name: name,
       preview: preview,
+      code: code,
     },
   });
 
@@ -49,14 +51,14 @@ export async function GET({ url }) {
 
     const state = await prisma.board.findUnique({
       where: { id: id },
-      select: { data: true },
+      select: { board: true, code: true },
     });
 
     if (!state) {
       return json({ message: `ID: ${id} の盤面は見つかりません。` }, { status: 404 });
     }
 
-    return json(state.data);
+    return json(state);
   } else {
     //IDが指定されなかった場合、全ての盤面のリストを返す
     const allStates = await prisma.board.findMany({