From af2ae4f92099b2dad8ad9c422a817820990b65cb Mon Sep 17 00:00:00 2001
From: rei1024 <satopen1729@gmail.com>
Date: Thu, 3 Oct 2024 14:36:09 +0900
Subject: [PATCH] feat: screen saver

---
 index.html        | 13 +++++++++++++
 package-lock.json |  8 ++++----
 package.json      |  2 +-
 src/camera.ts     |  2 +-
 src/main.ts       | 35 +++++++++++++++++++++++++++++++++--
 src/style.css     | 10 ++++++++++
 6 files changed, 62 insertions(+), 8 deletions(-)

diff --git a/index.html b/index.html
index e3ede54..d101bd0 100644
--- a/index.html
+++ b/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>
diff --git a/package-lock.json b/package-lock.json
index 6100f8d..2e9a6a2 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,7 +10,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"
       }
@@ -612,9 +612,9 @@
       "dev": true
     },
     "node_modules/babylonjs": {
-      "version": "7.27.0",
-      "resolved": "https://registry.npmjs.org/babylonjs/-/babylonjs-7.27.0.tgz",
-      "integrity": "sha512-0Qtog3mCKyBTzMTM7+pASizYvv3EyV2gOwR5jjM8d/PgHZ9s09t+Q4HRx00j/SaK04JQHiUHOlwjpGkfKaqWUA==",
+      "version": "7.27.3",
+      "resolved": "https://registry.npmjs.org/babylonjs/-/babylonjs-7.27.3.tgz",
+      "integrity": "sha512-dYuTZ9oXNxQS1jSwtYSk8UEqjQRzh0y3itMSh/QTlGbUulBnzrQAzsPbjUveEVyhjki2Q63h9YRE52LLo2QG/A==",
       "dev": true,
       "hasInstallScript": true
     },
diff --git a/package.json b/package.json
index 3a8f9eb..585bafe 100644
--- a/package.json
+++ b/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"
   },
diff --git a/src/camera.ts b/src/camera.ts
index c545e89..c9f8330 100644
--- a/src/camera.ts
+++ b/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
diff --git a/src/main.ts b/src/main.ts
index cae70eb..3c43d1f 100644
--- a/src/main.ts
+++ b/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();
+}
diff --git a/src/style.css b/src/style.css
index b6e5153..20fb8fe 100644
--- a/src/style.css
+++ b/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; /* ボタンのパディング */