feat: screen saver

index.html

@@ -27,6 +27,19 @@ <h2>Settings</h2>
             <label for="color">Color:</label>
             <input type="color" id="color" value="#FFFFFF" />
           </p>
+          <p>
+            <label for="auto-random">Auto randomize:</label>
+            <input type="checkbox" id="auto-random" />
+          </p>
+          <p>
+            <label for="auto-rotate">Auto Rotate:</label>
+            <input type="checkbox" id="auto-rotate" />
+          </p>
+          <p>
+            <button type="button" class="btn" id="full-screen">
+              Full Screen
+            </button>
+          </p>
         </section>
         <section>
           <h2>Input</h2>

package.json

@@ -11,7 +11,7 @@
   "devDependencies": {
     "@ca-ts/algo": "npm:@jsr/ca-ts__algo@^0.2.0",
     "@ca-ts/rle": "npm:@jsr/ca-ts__rle@^0.8.0",
-    "babylonjs": "^7.27.0",
+    "babylonjs": "^7.27.3",
     "typescript": "^5.5.3",
     "vite": "^5.4.1"
   },

src/camera.ts

@@ -7,7 +7,7 @@ export function setupArcRotateCamera(
   const camera = new ArcRotateCamera(
     "ArcRotateCamera",
     Math.PI / 2,
-    Math.PI / 4,
+    Math.PI / 3,
     100,
     new Vector3(0, 0, 0),
     scene

src/main.ts

@@ -1,7 +1,7 @@
 import "./style.css";
 import * as BABYLON from "babylonjs";
 import { Engine, Vector3 } from "babylonjs";
-import { BitWorld } from "@ca-ts/algo/bit";
+import { BitGrid, BitWorld } from "@ca-ts/algo/bit";
 import { setupArcRotateCamera } from "./camera";
 import { createTemplateCell } from "./cell";
 import { setRLE } from "./setRLE";
@@ -19,6 +19,9 @@ scene.clearColor = new BABYLON.Color4(0, 0, 0, 1);
 // ArcRotateCameraをBitWorldの中心に設定
 const camera = setupArcRotateCamera(scene, canvas);
 
+let prevGrid: BitGrid | null = null;
+let prevPrevGrid: BitGrid | null = null;
+
 // 基本的なライトを追加
 new BABYLON.HemisphericLight("light1", new Vector3(0, 1, 0), scene);
 
@@ -46,9 +49,22 @@ 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 &&
+    prevPrevGrid &&
+    bitWorld.bitGrid.equal(prevPrevGrid)
+  ) {
+    clearCell();
+    bitWorld.random();
+  }
+
   const newCells: BABYLON.InstancedMesh[] = [];
 
   // 新しい世代のセルを表示
@@ -80,10 +96,14 @@ function updateWorld() {
   camera.target.y += stackHeight;
   generation++;
 }
-
+const autoRotate = document.querySelector("#auto-rotate") as HTMLInputElement;
 let running = true;
 let i = 0;
+
 engine.runRenderLoop(() => {
+  if (autoRotate.checked) {
+    camera.alpha += scene.deltaTime / 4000;
+  }
   scene.render();
   if (!running) {
     return;
@@ -153,6 +173,7 @@ const readRLE = document.getElementById("readRLE") as HTMLElement;
 const rleErrorMessage = document.getElementById("rleError") as HTMLElement;
 const inputRLE = document.getElementById("inputRLE") as HTMLTextAreaElement;
 readRLE.addEventListener("click", () => {
+  autoRandom.checked = false;
   clearCell();
   rleErrorMessage.textContent = null;
   try {
@@ -168,3 +189,13 @@ const colorInput = document.getElementById("color") as HTMLInputElement;
 colorInput.addEventListener("input", () => {
   cellMaterial.diffuseColor = BABYLON.Color3.FromHexString(colorInput.value);
 });
+
+const fullScreen = document.querySelector("#full-screen") as HTMLElement;
+if (document.body.requestFullscreen) {
+  fullScreen.addEventListener("click", () => {
+    document.body.requestFullscreen();
+    settingsDialog.close();
+  });
+} else {
+  fullScreen.remove();
+}

src/style.css

@@ -49,12 +49,22 @@ dialog form {
   margin: 12px;
 }
 
+dialog input {
+  accent-color: black;
+}
+
 dialog input {
   height: 2rem;
   font-size: 1.3rem;
   margin-bottom: 4px;
 }
 
+dialog input[type="checkbox"] {
+  height: 1.5rem;
+  width: 1.5rem;
+  margin-bottom: 0px;
+}
+
 dialog button.btn {
   cursor: pointer; /* カーソルをポインタに */
   padding: 10px 15px; /* ボタンのパディング */