From 22644d7c8037b5611928eaa96467c0d07e0044ae Mon Sep 17 00:00:00 2001
From: rei1024 <satopen1729@gmail.com>
Date: Thu, 3 Oct 2024 20:58:33 +0900
Subject: [PATCH] refactor: full screen

---
 .gitignore        |  2 ++
 package-lock.json |  1 +
 package.json      |  1 +
 src/cell.ts       |  5 +++++
 src/main.ts       | 24 ++++--------------------
 src/settings.ts   | 25 +++++++++++++++++++++++++
 6 files changed, 38 insertions(+), 20 deletions(-)

diff --git a/.gitignore b/.gitignore
index 8b7e502..7337916 100644
--- a/.gitignore
+++ b/.gitignore
@@ -20,3 +20,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env
diff --git a/package-lock.json b/package-lock.json
index 2e9a6a2..be65afd 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -7,6 +7,7 @@
     "": {
       "name": "game-of-life-3d",
       "version": "0.0.0",
+      "hasInstallScript": true,
       "devDependencies": {
         "@ca-ts/algo": "npm:@jsr/ca-ts__algo@^0.2.0",
         "@ca-ts/rle": "npm:@jsr/ca-ts__rle@^0.8.0",
diff --git a/package.json b/package.json
index d728882..cb9d851 100644
--- a/package.json
+++ b/package.json
@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && node prebuild.js && vite build",
+    "postinstall": "node prebuild.js",
     "preview": "vite preview"
   },
   "devDependencies": {
diff --git a/src/cell.ts b/src/cell.ts
index 60f3251..6bab5bf 100644
--- a/src/cell.ts
+++ b/src/cell.ts
@@ -7,6 +7,11 @@ export function createTemplateCell(scene: BABYLON.Scene) {
     { size: 1 },
     scene
   );
+  // const templateCell = BABYLON.MeshBuilder.CreateSphere(
+  //   "templateCell",
+  //   { diameter: 1 },
+  //   scene
+  // );
   templateCell.isVisible = false; // マスターセル自体は非表示にする
 
   // マテリアルを作成して透明度を設定
diff --git a/src/main.ts b/src/main.ts
index 5df4702..0d206c3 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -5,6 +5,7 @@ import { BitGrid, BitWorld } from "@ca-ts/algo/bit";
 import { setupArcRotateCamera } from "./camera";
 import { createTemplateCell } from "./cell";
 import { setRLE } from "./setRLE";
+import { setupFullScreenButton } from "./settings";
 
 const WORLD_SIZE = 32 * 2;
 let historySize = 16;
@@ -203,23 +204,6 @@ colorInput.addEventListener("input", () => {
 });
 
 const fullScreen = document.querySelector("#full-screen") as HTMLElement;
-if (document.fullscreenEnabled) {
-  fullScreen.addEventListener("click", () => {
-    if (document.fullscreenElement) {
-      document.exitFullscreen();
-      settingsDialog.close();
-    } else {
-      document.body.requestFullscreen();
-      settingsDialog.close();
-    }
-  });
-  document.addEventListener("fullscreenchange", () => {
-    if (document.fullscreenElement) {
-      fullScreen.textContent = "End Full Screen";
-    } else {
-      fullScreen.textContent = "Full Screen";
-    }
-  });
-} else {
-  fullScreen.remove();
-}
+setupFullScreenButton(fullScreen, () => {
+  settingsDialog.close();
+});
diff --git a/src/settings.ts b/src/settings.ts
index e69de29..4085e2e 100644
--- a/src/settings.ts
+++ b/src/settings.ts
@@ -0,0 +1,25 @@
+export function setupFullScreenButton(
+  fullScreen: HTMLElement,
+  onClick: () => void = () => {}
+) {
+  if (!document.fullscreenEnabled) {
+    fullScreen.remove();
+    return;
+  }
+
+  fullScreen.addEventListener("click", () => {
+    if (document.fullscreenElement) {
+      document.exitFullscreen();
+    } else {
+      document.body.requestFullscreen();
+    }
+    onClick();
+  });
+  document.addEventListener("fullscreenchange", () => {
+    if (document.fullscreenElement) {
+      fullScreen.textContent = "End Full Screen";
+    } else {
+      fullScreen.textContent = "Full Screen";
+    }
+  });
+}