From cc8666a28f4cd73897b117b69916f0b7db21993e Mon Sep 17 00:00:00 2001 From: rei1024 Date: Thu, 3 Oct 2024 22:15:04 +0900 Subject: [PATCH] feat: update package.json --- .github/workflows/deploy.yml | 2 +- index.html | 2 +- package.json | 9 ++++ src/bind.ts | 34 ++++++++++++++++ src/main.ts | 79 +++++++++++++++++------------------- 5 files changed, 83 insertions(+), 43 deletions(-) create mode 100644 src/bind.ts diff --git a/.github/workflows/deploy.yml b/.github/workflows/deploy.yml index a159524..92c56b5 100644 --- a/.github/workflows/deploy.yml +++ b/.github/workflows/deploy.yml @@ -14,7 +14,7 @@ jobs: uses: actions/checkout@v4 - uses: actions/setup-node@v4 with: - node-version: "20" + node-version: "22" - run: npm ci - run: npm run build # - uses: actions/upload-artifact@v3 diff --git a/index.html b/index.html index 296c700..f032620 100644 --- a/index.html +++ b/index.html @@ -9,7 +9,7 @@ diff --git a/package.json b/package.json index b016aa3..e557155 100644 --- a/package.json +++ b/package.json @@ -3,6 +3,15 @@ "private": true, "version": "1.0.0", "type": "module", + "repository": { + "url": "https://github.com/rei1024/game-of-life-3d" + }, + "homepage": "https://rei1024.github.io/game-of-life-3d/", + "keywords": [ + "game of life", + "cgol" + ], + "license": "MIT", "scripts": { "dev": "vite", "build": "tsc && node prebuild.js && vite build", diff --git a/src/bind.ts b/src/bind.ts new file mode 100644 index 0000000..4f22ab9 --- /dev/null +++ b/src/bind.ts @@ -0,0 +1,34 @@ +export const $canvas = document.querySelector( + "#renderCanvas" +) as HTMLCanvasElement; + +export const $autoRandom = document.querySelector( + "#auto-random" +) as HTMLInputElement; +export const $fullScreen = document.querySelector( + "#full-screen" +) as HTMLElement; +export const $colorInput = document.querySelector("#color") as HTMLInputElement; + +export const $settingsDialog = document.querySelector( + "#settingsDialog" +) as HTMLDialogElement; +export const $historySizeInput = document.querySelector( + "#historySize" +) as HTMLInputElement; + +export const $closeSettings = document.querySelector( + "#closeSettings" +) as HTMLElement; + +export const $configButton = document.querySelector( + "#configButton" +) as HTMLElement; + +export const $readRLE = document.querySelector("#readRLE") as HTMLButtonElement; +export const $rleErrorMessage = document.querySelector( + "#rleError" +) as HTMLElement; +export const $inputRLE = document.querySelector( + "#inputRLE" +) as HTMLTextAreaElement; diff --git a/src/main.ts b/src/main.ts index 0d206c3..20d02b1 100644 --- a/src/main.ts +++ b/src/main.ts @@ -6,19 +6,31 @@ import { setupArcRotateCamera } from "./camera"; import { createTemplateCell } from "./cell"; import { setRLE } from "./setRLE"; import { setupFullScreenButton } from "./settings"; +import { + $autoRandom, + $canvas, + $closeSettings, + $colorInput, + $configButton, + $fullScreen, + $historySizeInput, + $inputRLE, + $readRLE, + $rleErrorMessage, + $settingsDialog, +} from "./bind"; const WORLD_SIZE = 32 * 2; let historySize = 16; -const canvas = document.getElementById("renderCanvas") as HTMLCanvasElement; -const engine = new Engine(canvas, true); +const engine = new Engine($canvas, true); const scene = new BABYLON.Scene(engine); // 背景色を黒に設定 scene.clearColor = new BABYLON.Color4(0, 0, 0, 1); // ArcRotateCameraをBitWorldの中心に設定 -const camera = setupArcRotateCamera(scene, canvas); +const camera = setupArcRotateCamera(scene, $canvas); let prevGrid: BitGrid | null = null; let prevPrevGrid: BitGrid | null = null; @@ -50,15 +62,13 @@ const stackHeight = 1; const { templateCell, cellMaterial } = createTemplateCell(scene); -const autoRandom = document.querySelector("#auto-random") as HTMLInputElement; - function updateWorld() { prevPrevGrid = prevGrid; prevGrid = bitWorld.bitGrid.clone(); bitWorld.next(); if ( - autoRandom.checked && + $autoRandom.checked && prevPrevGrid && bitWorld.bitGrid.equal(prevPrevGrid) ) { @@ -143,67 +153,54 @@ document.addEventListener("keydown", (e) => { }); // ダイアログ制御 -const settingsDialog = document.getElementById( - "settingsDialog" -) as HTMLDialogElement; -const historySizeInput = document.getElementById( - "historySize" -) as HTMLInputElement; - -historySizeInput.addEventListener("input", () => { - historySize = parseInt(historySizeInput.value, 10); +$historySizeInput.addEventListener("input", () => { + historySize = parseInt($historySizeInput.value, 10); if (Number.isNaN(historySize)) { historySize = 1; } historySize = Math.min(Math.max(historySize, 1), 500); }); -historySizeInput.value = historySize.toString(); +$historySizeInput.value = historySize.toString(); -document.getElementById("closeSettings")!.addEventListener("click", () => { - settingsDialog.close(); +$closeSettings.addEventListener("click", () => { + $settingsDialog.close(); }); -const configButton = document.getElementById("configButton") as HTMLElement; -configButton.addEventListener("click", () => { - if (!settingsDialog.open) { - settingsDialog.showModal(); +$configButton.addEventListener("click", () => { + if (!$settingsDialog.open) { + $settingsDialog.showModal(); } }); -const readRLE = document.getElementById("readRLE") as HTMLButtonElement; -const rleErrorMessage = document.getElementById("rleError") as HTMLElement; -const inputRLE = document.getElementById("inputRLE") as HTMLTextAreaElement; function updateReadRLEButton() { - if (inputRLE.value.trim() === "") { - readRLE.disabled = true; + if ($inputRLE.value.trim() === "") { + $readRLE.disabled = true; } else { - readRLE.disabled = false; + $readRLE.disabled = false; } } updateReadRLEButton(); -inputRLE.addEventListener("input", () => { +$inputRLE.addEventListener("input", () => { updateReadRLEButton(); }); -readRLE.addEventListener("click", () => { - autoRandom.checked = false; +$readRLE.addEventListener("click", () => { + $autoRandom.checked = false; clearCell(); - rleErrorMessage.textContent = null; + $rleErrorMessage.textContent = null; try { - setRLE(bitWorld, inputRLE.value); + setRLE(bitWorld, $inputRLE.value); } catch (error) { - rleErrorMessage.textContent = "Invalid RLE or oversized"; + $rleErrorMessage.textContent = "Invalid RLE or oversized"; throw error; } - settingsDialog.close(); + $settingsDialog.close(); }); -const colorInput = document.getElementById("color") as HTMLInputElement; -colorInput.addEventListener("input", () => { - cellMaterial.diffuseColor = BABYLON.Color3.FromHexString(colorInput.value); +$colorInput.addEventListener("input", () => { + cellMaterial.diffuseColor = BABYLON.Color3.FromHexString($colorInput.value); }); -const fullScreen = document.querySelector("#full-screen") as HTMLElement; -setupFullScreenButton(fullScreen, () => { - settingsDialog.close(); +setupFullScreenButton($fullScreen, () => { + $settingsDialog.close(); });