From c71446053df2bdcf7545a902f48870340011f171 Mon Sep 17 00:00:00 2001 From: coelacanth657 <210202793+coelacanth657@users.noreply.github.com> Date: Thu, 13 Nov 2025 19:35:35 +0900 Subject: [PATCH 1/4] =?UTF-8?q?=E3=82=B3=E3=83=BC=E3=83=89=E4=BF=9D?= =?UTF-8?q?=E5=AD=98=E6=A9=9F=E8=83=BD=E3=82=92=E8=BF=BD=E5=8A=A0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../migration.sql | 9 + prisma/schema.prisma | 7 + src/{routes/api.ts => lib/api/board.ts} | 0 src/lib/api/code.ts | 84 +++++++ src/lib/board-preview.ts | 2 +- src/routes/+page.svelte | 217 +++++++++++++++--- src/routes/api/board/+server.ts | 4 +- src/routes/api/code/+server.ts | 76 ++++++ 8 files changed, 362 insertions(+), 37 deletions(-) create mode 100644 prisma/migrations/20251113084438_add_code_state/migration.sql rename src/{routes/api.ts => lib/api/board.ts} (100%) create mode 100644 src/lib/api/code.ts create mode 100644 src/routes/api/code/+server.ts diff --git a/prisma/migrations/20251113084438_add_code_state/migration.sql b/prisma/migrations/20251113084438_add_code_state/migration.sql new file mode 100644 index 0000000..0cc905a --- /dev/null +++ b/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") +); diff --git a/prisma/schema.prisma b/prisma/schema.prisma index 4719673..7436838 100644 --- a/prisma/schema.prisma +++ b/prisma/schema.prisma @@ -22,3 +22,10 @@ model BoardState { boardName String boardPreview Json } + +model CodeState { + id Int @id @default(autoincrement()) + createdAt DateTime @default(now()) + codeData String + codeName String +} \ No newline at end of file diff --git a/src/routes/api.ts b/src/lib/api/board.ts similarity index 100% rename from src/routes/api.ts rename to src/lib/api/board.ts diff --git a/src/lib/api/code.ts b/src/lib/api/code.ts new file mode 100644 index 0000000..a771b87 --- /dev/null +++ b/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; + codeName: string; + createdAt: string; +}; + +export async function fetchCodeList(isJapanese: boolean): Promise { + 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 { + 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."); + } + } +} diff --git a/src/lib/board-preview.ts b/src/lib/board-preview.ts index 79736ab..97ec012 100644 --- a/src/lib/board-preview.ts +++ b/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; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 578ef5e..3bcb4ee 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -5,8 +5,9 @@ import lifeGameJS from "@/iframe/life-game.js?raw"; import patterns from "$lib/board-templates"; import * as icons from "$lib/icons/index.ts"; - import { saveBoard, fetchBoardList, loadBoardById, type BoardListItem } from "./api.ts"; - import { createPreview } from "$lib/board-preview"; + import { createBoardPreview } from "$lib/board-preview"; + import { saveBoard, fetchBoardList, loadBoardById, type BoardListItem } from "$lib/api/board"; + import { saveCode, fetchCodeList, loadCodeById, type CodeListItem } from "$lib/api/code"; let editingCode = $state(lifeGameJS); let appliedCode = $state(lifeGameJS); @@ -24,16 +25,25 @@ let generationFigure = $state(0); let sizeValue = $state(20); - type SaveState = + type SaveBoardState = | { saving: false } | { saving: true; boardData: boolean[][]; boardName: string; boardPreview: boolean[][] }; - let saveState: SaveState = $state({ saving: false }); + let saveBoardState: SaveBoardState = $state({ saving: false }); - type LoadState = + type LoadBoardState = | { state: "closed" } | { state: "loading" } | { state: "list"; list: BoardListItem[] }; - let loadState: LoadState = $state({ state: "closed" }); + let loadBoardState: LoadBoardState = $state({ state: "closed" }); + + type SaveCodeState = { saving: false } | { saving: true; codeData: string; codeName: string }; + let saveCodeState: SaveCodeState = $state({ saving: false }); + + type LoadCodeState = + | { state: "closed" } + | { state: "loading" } + | { state: "list"; list: CodeListItem[] }; + let loadCodeState: LoadCodeState = $state({ state: "closed" }); type OngoingEvent = | "play" @@ -65,8 +75,8 @@ } case "save_board": { const board = event.data.data as boolean[][]; - const preview = createPreview(board); - saveState = { saving: true, boardData: board, boardName: "", boardPreview: preview }; + const preview = createBoardPreview(board); + saveBoardState = { saving: true, boardData: board, boardName: "", boardPreview: preview }; break; } default: { @@ -87,30 +97,31 @@ preview_iframe?.contentWindow?.postMessage({ type: event, data: message }, "*"); } - async function handleSave() { - if (!saveState.saving) return; + async function handleBoardSave() { + if (!saveBoardState.saving) return; - const name = saveState.boardName.trim() === "" ? "Unnamed Board" : saveState.boardName.trim(); + const name = + saveBoardState.boardName.trim() === "" ? "Unnamed Board" : saveBoardState.boardName.trim(); - await saveBoard({ board: saveState.boardData, name: name }, isJapanese); + await saveBoard({ board: saveBoardState.boardData, name: name }, isJapanese); - saveState = { saving: false }; + saveBoardState = { saving: false }; } - async function handleLoad() { - loadState = { state: "loading" }; + async function handleBoardLoad() { + loadBoardState = { state: "loading" }; const list = await fetchBoardList(isJapanese); if (list) { - loadState = { state: "list", list }; + loadBoardState = { state: "list", list }; } else { - loadState = { state: "closed" }; + loadBoardState = { state: "closed" }; } } async function selectBoard(id: number) { - loadState = { state: "closed" }; + loadBoardState = { state: "closed" }; const board = await loadBoardById(id, isJapanese); if (board) { @@ -118,6 +129,38 @@ sendEvent("apply_board", board); } } + + async function handleCodeSave() { + if (!saveCodeState.saving) return; + + const name = + saveCodeState.codeName.trim() === "" ? "Unnamed Code" : saveCodeState.codeName.trim(); + + await saveCode({ code: saveCodeState.codeData, name: name }, isJapanese); + + saveCodeState = { saving: false }; + } + + async function handleCodeLoad() { + loadCodeState = { state: "loading" }; + + const list = await fetchCodeList(isJapanese); + + if (list) { + loadCodeState = { state: "list", list }; + } else { + loadCodeState = { state: "closed" }; + } + } + + async function selectCode(id: number) { + loadCodeState = { state: "closed" }; + + const code = await loadCodeById(id, isJapanese); + if (code) { + editingCode = code; + } + }
@@ -218,10 +261,10 @@
- +

{isJapanese ? "盤面を保存" : "Save board"}

- {#if saveState.saving} + {#if saveBoardState.saving}

@@ -233,7 +276,7 @@ type="text" placeholder={isJapanese ? "盤面名を入力" : "Enter board name"} class="input input-bordered w-full max-w-xs" - bind:value={saveState.boardName} + bind:value={saveBoardState.boardName} />

@@ -241,7 +284,7 @@ {isJapanese ? "プレビュー" : "Preview"}
- {#each saveState.boardPreview as row, i (i)} + {#each saveBoardState.boardPreview as row, i (i)}
{#each row as cell, j (j)}
@@ -252,14 +295,14 @@
- @@ -268,20 +311,20 @@
- +

{isJapanese ? "盤面をロード" : "Load board"}

- {#if loadState.state === "loading"} + {#if loadBoardState.state === "loading"}

{isJapanese ? "保存されている盤面を読み込み中..." : "Loading saved boards..."}

- {:else if loadState.state === "list" && loadState.list.length === 0} + {:else if loadBoardState.state === "list" && loadBoardState.list.length === 0}

{isJapanese ? "保存されている盤面はありません。" : "No saved boards found."}

- {:else if loadState.state === "list"} + {:else if loadBoardState.state === "list"}
@@ -293,7 +336,7 @@ - {#each loadState.list as item (item.id)} + {#each loadBoardState.list as item (item.id)} - + {#each loadCodeState.list as item (item.id)} - +
@@ -321,7 +364,91 @@ {/if}
- +
+
+ + + +
+

{isJapanese ? "コードを保存" : "Save code"}

+ {#if saveCodeState.saving} +
+
+

+ {isJapanese + ? "保存するコードに名前を付けてください（任意）。" + : "Please name the code you wish to save (optional)."} +

+ +
+
+
+ + +
+ {/if} +
+ + + +
+

{isJapanese ? "コードをロード" : "Load code"}

+ + {#if loadCodeState.state === "loading"} +

+ {isJapanese ? "保存されているコードを読み込み中..." : "Loading saved codes..."} +

+ + {:else if loadCodeState.state === "list" && loadCodeState.list.length === 0} +

+ {isJapanese ? "保存されているコードはありません。" : "No saved codes found."} +

+ {:else if loadCodeState.state === "list"} +
+ + + + + + + + + + {#each loadCodeState.list as item (item.id)} + + + + + + {/each} + +
{isJapanese ? "コード名" : "Code Name"}{isJapanese ? "保存日時" : "Saved At"}
{item.codeName}{new Date(item.createdAt).toLocaleString(isJapanese ? "ja-JP" : "en-US")} + +
+
+ {/if} + +
+
@@ -491,7 +618,7 @@ onclick={() => { isProgress = false; sendEvent("pause"); - handleLoad(); + handleBoardLoad(); }} > {isJapanese ? "ロード" : "Load"} @@ -519,14 +646,36 @@
- +
{isJapanese ? "コード" : "Code"}:
+ + + +
diff --git a/src/routes/api/board/+server.ts b/src/routes/api/board/+server.ts index 80e2488..baad28b 100644 --- a/src/routes/api/board/+server.ts +++ b/src/routes/api/board/+server.ts @@ -1,6 +1,6 @@ import { json } from "@sveltejs/kit"; import { prisma } from "@/lib/prisma.server.ts"; -import { createPreview } from "@/lib/board-preview.js"; +import { createBoardPreview } from "@/lib/board-preview.js"; import * as v from "valibot"; const BoardSchema = v.object({ @@ -24,7 +24,7 @@ export async function POST({ request }) { } const { board, name } = result.output; - const preview = createPreview(board); + const preview = createBoardPreview(board); const newState = await prisma.boardState.create({ data: { diff --git a/src/routes/api/code/+server.ts b/src/routes/api/code/+server.ts new file mode 100644 index 0000000..80aa9c1 --- /dev/null +++ b/src/routes/api/code/+server.ts @@ -0,0 +1,76 @@ +import { json } from "@sveltejs/kit"; +import { prisma } from "@/lib/prisma.server.ts"; +import * as v from "valibot"; + +const CodeSchema = v.object({ + code: v.pipe(v.string(), v.minLength(1, "コードが空白です。")), + name: v.pipe(v.string(), v.minLength(1, "コード名は必須です。")), +}); + +export async function POST({ request }) { + let requestData; + try { + requestData = await request.json(); + } catch (error) { + console.error("Request body JSON parsing failed:", error); + return json({ message: "無効なリクエスト形式です。" }, { status: 400 }); + } + + const result = v.safeParse(CodeSchema, requestData); + if (!result.success) { + console.error("Request validation failed:", result.issues); + return json({ message: "無効なリクエストデータです。" }, { status: 400 }); + } + + const { code, name } = result.output; + + const newState = await prisma.codeState.create({ + data: { + codeData: code, + codeName: name, + }, + }); + + return json({ id: newState.id }, { status: 201 }); +} + +export async function GET({ url }) { + const codeId = url.searchParams.get("id"); + + if (codeId) { + //IDが指定された場合、そのIDのコードを返す + const id = parseInt(codeId, 10); + if (isNaN(id)) { + return json({ message: "無効なIDです。" }, { status: 400 }); + } + + const state = await prisma.codeState.findUnique({ + where: { id: id }, + select: { codeData: true }, + }); + + if (!state) { + return json({ message: `ID: ${id} のコードは見つかりません。` }, { status: 404 }); + } + + return json(state.codeData); + } else { + //IDが指定されなかった場合、全てのコードのリストを返す + const allStates = await prisma.codeState.findMany({ + orderBy: { + createdAt: "desc", + }, + select: { + id: true, + codeName: true, + createdAt: true, + }, + }); + + if (!allStates || allStates.length === 0) { + return json({ message: "保存されているコードがありません。" }, { status: 404 }); + } + + return json(allStates); + } +} From 25070098bf45979ab5d2bc8c689b45fd498ea89a Mon Sep 17 00:00:00 2001 From: coelacanth657 <210202793+coelacanth657@users.noreply.github.com> Date: Thu, 13 Nov 2025 23:00:54 +0900 Subject: [PATCH 2/4] =?UTF-8?q?=E5=91=BD=E5=90=8D=E3=82=92=E5=A4=89?= =?UTF-8?q?=E6=9B=B4?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../20251113132626_rename/migration.sql | 33 +++++++++++++++++++ prisma/schema.prisma | 14 ++++---- src/lib/api/board.ts | 4 +-- src/lib/api/code.ts | 2 +- src/routes/+page.svelte | 30 ++++++++--------- src/routes/api/board/+server.ts | 22 ++++++------- src/routes/api/code/+server.ts | 18 +++++----- 7 files changed, 77 insertions(+), 46 deletions(-) create mode 100644 prisma/migrations/20251113132626_rename/migration.sql diff --git a/prisma/migrations/20251113132626_rename/migration.sql b/prisma/migrations/20251113132626_rename/migration.sql new file mode 100644 index 0000000..9799df6 --- /dev/null +++ b/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") +); diff --git a/prisma/schema.prisma b/prisma/schema.prisma index 7436838..fc26eee 100644 --- a/prisma/schema.prisma +++ b/prisma/schema.prisma @@ -15,17 +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 CodeState { +model Code { id Int @id @default(autoincrement()) createdAt DateTime @default(now()) - codeData String - codeName String + data String + name String } \ No newline at end of file diff --git a/src/lib/api/board.ts b/src/lib/api/board.ts index a20f085..f2b6969 100644 --- a/src/lib/api/board.ts +++ b/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 { diff --git a/src/lib/api/code.ts b/src/lib/api/code.ts index a771b87..d40f414 100644 --- a/src/lib/api/code.ts +++ b/src/lib/api/code.ts @@ -29,7 +29,7 @@ export async function saveCode(data: { code: string; name: string }, isJapanese: export type CodeListItem = { id: number; - codeName: string; + name: string; createdAt: string; }; diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index 3bcb4ee..64321b7 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -27,7 +27,7 @@ type SaveBoardState = | { saving: false } - | { saving: true; boardData: boolean[][]; boardName: string; boardPreview: boolean[][] }; + | { saving: true; data: boolean[][]; name: string; preview: boolean[][] }; let saveBoardState: SaveBoardState = $state({ saving: false }); type LoadBoardState = @@ -36,7 +36,7 @@ | { state: "list"; list: BoardListItem[] }; let loadBoardState: LoadBoardState = $state({ state: "closed" }); - type SaveCodeState = { saving: false } | { saving: true; codeData: string; codeName: string }; + type SaveCodeState = { saving: false } | { saving: true; data: string; name: string }; let saveCodeState: SaveCodeState = $state({ saving: false }); type LoadCodeState = @@ -76,7 +76,7 @@ case "save_board": { const board = event.data.data as boolean[][]; const preview = createBoardPreview(board); - saveBoardState = { saving: true, boardData: board, boardName: "", boardPreview: preview }; + saveBoardState = { saving: true, data: board, name: "", preview: preview }; break; } default: { @@ -100,10 +100,9 @@ async function handleBoardSave() { if (!saveBoardState.saving) return; - const name = - saveBoardState.boardName.trim() === "" ? "Unnamed Board" : saveBoardState.boardName.trim(); + const name = saveBoardState.name.trim() === "" ? "Unnamed Board" : saveBoardState.name.trim(); - await saveBoard({ board: saveBoardState.boardData, name: name }, isJapanese); + await saveBoard({ board: saveBoardState.data, name: name }, isJapanese); saveBoardState = { saving: false }; } @@ -133,10 +132,9 @@ async function handleCodeSave() { if (!saveCodeState.saving) return; - const name = - saveCodeState.codeName.trim() === "" ? "Unnamed Code" : saveCodeState.codeName.trim(); + const name = saveCodeState.name.trim() === "" ? "Unnamed Code" : saveCodeState.name.trim(); - await saveCode({ code: saveCodeState.codeData, name: name }, isJapanese); + await saveCode({ code: saveCodeState.data, name: name }, isJapanese); saveCodeState = { saving: false }; } @@ -276,7 +274,7 @@ type="text" placeholder={isJapanese ? "盤面名を入力" : "Enter board name"} class="input input-bordered w-full max-w-xs" - bind:value={saveBoardState.boardName} + bind:value={saveBoardState.name} />
@@ -284,7 +282,7 @@ {isJapanese ? "プレビュー" : "Preview"}
- {#each saveBoardState.boardPreview as row, i (i)} + {#each saveBoardState.preview as row, i (i)}
{#each row as cell, j (j)}
@@ -340,7 +338,7 @@
- {#each item.boardPreview as row, i (i)} + {#each item.preview as row, i (i)}
{#each row as cell, j (j)}
@@ -349,7 +347,7 @@ {/each}
{item.boardName}{item.name} {new Date(item.createdAt).toLocaleString(isJapanese ? "ja-JP" : "en-US")}
{item.codeName}{item.name} {new Date(item.createdAt).toLocaleString(isJapanese ? "ja-JP" : "en-US")} @@ -309,20 +241,20 @@ - +

{isJapanese ? "盤面をロード" : "Load board"}

- {#if loadBoardState.state === "loading"} + {#if boardManager.loadState.state === "loading"}

{isJapanese ? "保存されている盤面を読み込み中..." : "Loading saved boards..."}

- {:else if loadBoardState.state === "list" && loadBoardState.list.length === 0} + {:else if boardManager.loadState.state === "list" && boardManager.loadState.list.length === 0}

{isJapanese ? "保存されている盤面はありません。" : "No saved boards found."}

- {:else if loadBoardState.state === "list"} + {:else if boardManager.loadState.state === "list"}
@@ -334,7 +266,7 @@ - {#each loadBoardState.list as item (item.id)} + {#each boardManager.loadState.list as item (item.id)}
@@ -362,17 +294,17 @@ {/if}
-
- +

{isJapanese ? "コードを保存" : "Save code"}

- {#if saveCodeState.saving} + {#if codeManager.saveState.saving}

@@ -384,19 +316,19 @@ type="text" placeholder={isJapanese ? "コード名を入力" : "Enter code name"} class="input input-bordered w-full max-w-xs" - bind:value={saveCodeState.name} + bind:value={codeManager.saveState.name} />

- @@ -405,20 +337,20 @@
- +

{isJapanese ? "コードをロード" : "Load code"}

- {#if loadCodeState.state === "loading"} + {#if codeManager.loadState.state === "loading"}

{isJapanese ? "保存されているコードを読み込み中..." : "Loading saved codes..."}

- {:else if loadCodeState.state === "list" && loadCodeState.list.length === 0} + {:else if codeManager.loadState.state === "list" && codeManager.loadState.list.length === 0}

{isJapanese ? "保存されているコードはありません。" : "No saved codes found."}

- {:else if loadCodeState.state === "list"} + {:else if codeManager.loadState.state === "list"}
@@ -429,7 +361,7 @@ - {#each loadCodeState.list as item (item.id)} + {#each codeManager.loadState.list as item (item.id)} @@ -446,7 +378,7 @@ {/if}
-
@@ -616,7 +548,7 @@ onclick={() => { isProgress = false; sendEvent("pause"); - handleBoardLoad(); + boardManager.openLoadModal(isJapanese); }} > {isJapanese ? "ロード" : "Load"} @@ -659,7 +591,7 @@ onclick={() => { isProgress = false; sendEvent("pause"); - saveCodeState = { saving: true, data: editingCode, name: "" }; + codeManager.openSaveModal(editingCode); }} > {isJapanese ? "保存" : "Save"} @@ -670,7 +602,7 @@ onclick={() => { isProgress = false; sendEvent("pause"); - handleCodeLoad(); + codeManager.openLoadModal(isJapanese); }} > {isJapanese ? "ロード" : "Load"} From d56c7df3126c8869a8112ecc338bfe459b6b7229 Mon Sep 17 00:00:00 2001 From: coelacanth657 <210202793+coelacanth657@users.noreply.github.com> Date: Fri, 14 Nov 2025 17:35:18 +0900 Subject: [PATCH 4/4] =?UTF-8?q?=E3=83=A2=E3=83=BC=E3=83=80=E3=83=AB?= =?UTF-8?q?=E3=82=92=E5=88=A5=E3=83=95=E3=82=A1=E3=82=A4=E3=83=AB=E3=81=AB?= =?UTF-8?q?=E7=A7=BB=E5=8B=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/lib/components/BoardModals.svelte | 145 +++++++++++++++++ src/lib/components/CodeModals.svelte | 97 +++++++++++ src/routes/+page.svelte | 223 +------------------------- 3 files changed, 248 insertions(+), 217 deletions(-) create mode 100644 src/lib/components/BoardModals.svelte create mode 100644 src/lib/components/CodeModals.svelte diff --git a/src/lib/components/BoardModals.svelte b/src/lib/components/BoardModals.svelte new file mode 100644 index 0000000..d674bed --- /dev/null +++ b/src/lib/components/BoardModals.svelte @@ -0,0 +1,145 @@ + + + +
+

{isJapanese ? "盤面を保存" : "Save board"}

+ {#if manager.saveState.saving} +
+
+

+ {isJapanese + ? "保存する盤面に名前を付けてください（任意）。" + : "Please name the board you wish to save (optional)."} +

+ +
+
+
+ {isJapanese ? "プレビュー" : "Preview"} +
+
+ {#each manager.saveState.preview as row, i (i)} +
+ {#each row as cell, j (j)} +
+ {/each} +
+ {/each} +
+
+
+
+ + +
+ {/if} + + + + +
+

{isJapanese ? "盤面をロード" : "Load board"}

+ + {#if manager.loadState.state === "loading"} +

+ {isJapanese ? "保存されている盤面を読み込み中..." : "Loading saved boards..."} +

+ + {:else if manager.loadState.state === "list" && manager.loadState.list.length === 0} +

+ {isJapanese ? "保存されている盤面はありません。" : "No saved boards found."} +

+ {:else if manager.loadState.state === "list"} +
+
{item.name} {new Date(item.createdAt).toLocaleString(isJapanese ? "ja-JP" : "en-US")}
+ + + + + + + + + + {#each manager.loadState.list as item (item.id)} + + + + + + + {/each} + +
{isJapanese ? "プレビュー" : "Preview"}{isJapanese ? "盤面名" : "Board Name"}{isJapanese ? "保存日時" : "Saved At"}
+
+ {#each item.preview as row, i (i)} +
+ {#each row as cell, j (j)} +
+ {/each} +
+ {/each} +
+ 		{item.name}{new Date(item.createdAt).toLocaleString(isJapanese ? "ja-JP" : "en-US")} + +
+
+ {/if} + +
+ +
+
+ + + diff --git a/src/lib/components/CodeModals.svelte b/src/lib/components/CodeModals.svelte new file mode 100644 index 0000000..a1efac5 --- /dev/null +++ b/src/lib/components/CodeModals.svelte @@ -0,0 +1,97 @@ + + + +
+

{isJapanese ? "コードを保存" : "Save code"}

+ {#if manager.saveState.saving} +
+
+

+ {isJapanese + ? "保存するコードに名前を付けてください（任意）。" + : "Please name the code you wish to save (optional)."} +

+ +
+
+
+ + +
+ {/if} +
+ + + +
+

{isJapanese ? "コードをロード" : "Load code"}

+ + {#if manager.loadState.state === "loading"} +

+ {isJapanese ? "保存されているコードを読み込み中..." : "Loading saved codes..."} +

+ + {:else if manager.loadState.state === "list" && manager.loadState.list.length === 0} +

+ {isJapanese ? "保存されているコードはありません。" : "No saved codes found."} +

+ {:else if manager.loadState.state === "list"} +
+ + + + + + + + + + {#each manager.loadState.list as item (item.id)} + + + + + + {/each} + +
{isJapanese ? "コード名" : "Code Name"}{isJapanese ? "保存日時" : "Saved At"}
{item.name}{new Date(item.createdAt).toLocaleString(isJapanese ? "ja-JP" : "en-US")} + +
+
+ {/if} + +
+ +
+
+ diff --git a/src/routes/+page.svelte b/src/routes/+page.svelte index d5d50ea..f4bd347 100644 --- a/src/routes/+page.svelte +++ b/src/routes/+page.svelte @@ -7,6 +7,8 @@ import * as icons from "$lib/icons/index.ts"; import { BoardManager } from "$lib/models/BoardManager.svelte"; import { CodeManager } from "$lib/models/CodeManager.svelte"; + import BoardModals from "$lib/components/BoardModals.svelte"; + import CodeModals from "$lib/components/CodeModals.svelte"; let editingCode = $state(lifeGameJS); let appliedCode = $state(lifeGameJS); @@ -77,7 +79,7 @@ preview_iframe?.contentWindow?.postMessage({ type: event, data: message }, "*"); } - async function selectBoard(id: number) { + async function onBoardSelect(id: number) { const board = await boardManager.load(id, isJapanese); if (board) { sizeValue = board.length; @@ -85,7 +87,7 @@ } } - async function selectCode(id: number) { + async function onCodeSelect(id: number) { const code = await codeManager.load(id, isJapanese); if (code) { editingCode = code; @@ -191,199 +193,8 @@ - -
-

{isJapanese ? "盤面を保存" : "Save board"}

- {#if boardManager.saveState.saving} -
-
-

- {isJapanese - ? "保存する盤面に名前を付けてください（任意）。" - : "Please name the board you wish to save (optional)."} -

- -
-
-
- {isJapanese ? "プレビュー" : "Preview"} -
-
- {#each boardManager.saveState.preview as row, i (i)} -
- {#each row as cell, j (j)} -
- {/each} -
- {/each} -
-
-
-
- - -
- {/if} -
- - - -
-

{isJapanese ? "盤面をロード" : "Load board"}

- - {#if boardManager.loadState.state === "loading"} -

- {isJapanese ? "保存されている盤面を読み込み中..." : "Loading saved boards..."} -

- - {:else if boardManager.loadState.state === "list" && boardManager.loadState.list.length === 0} -

- {isJapanese ? "保存されている盤面はありません。" : "No saved boards found."} -

- {:else if boardManager.loadState.state === "list"} -
- - - - - - - - - - - {#each boardManager.loadState.list as item (item.id)} - - - - - - - {/each} - -
{isJapanese ? "プレビュー" : "Preview"}{isJapanese ? "盤面名" : "Board Name"}{isJapanese ? "保存日時" : "Saved At"}
-
- {#each item.preview as row, i (i)} -
- {#each row as cell, j (j)} -
- {/each} -
- {/each} -
- 		{item.name}{new Date(item.createdAt).toLocaleString(isJapanese ? "ja-JP" : "en-US")} - -
-
- {/if} - -
- -
-
- - - -
-

{isJapanese ? "コードを保存" : "Save code"}

- {#if codeManager.saveState.saving} -
-
-

- {isJapanese - ? "保存するコードに名前を付けてください（任意）。" - : "Please name the code you wish to save (optional)."} -

- -
-
-
- - -
- {/if} -
- - - -
-

{isJapanese ? "コードをロード" : "Load code"}

- - {#if codeManager.loadState.state === "loading"} -

- {isJapanese ? "保存されているコードを読み込み中..." : "Loading saved codes..."} -

- - {:else if codeManager.loadState.state === "list" && codeManager.loadState.list.length === 0} -

- {isJapanese ? "保存されているコードはありません。" : "No saved codes found."} -

- {:else if codeManager.loadState.state === "list"} -
- - - - - - - - - - {#each codeManager.loadState.list as item (item.id)} - - - - - - {/each} - -
{isJapanese ? "コード名" : "Code Name"}{isJapanese ? "保存日時" : "Saved At"}
{item.name}{new Date(item.createdAt).toLocaleString(isJapanese ? "ja-JP" : "en-US")} - -
-
- {/if} - -
- -
-
- + +
@@ -609,25 +420,3 @@
- -