feat: update package.json

.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

index.html

@@ -9,7 +9,7 @@
     <meta property="og:title" content="Conway's Game of Life in 3D" />
 
     <meta
-      property="description"
+      name="description"
       content="Conway's Game of Life in 3D, where generations of cells stack upwards."
     />
 

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",

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;

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();
 });