refactor: full screen

.gitignore

@@ -20,3 +20,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+.env

package.json

@@ -6,6 +6,7 @@
   "scripts": {
     "dev": "vite",
     "build": "tsc && node prebuild.js && vite build",
+    "postinstall": "node prebuild.js",
     "preview": "vite preview"
   },
   "devDependencies": {

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; // マスターセル自体は非表示にする
 
   // マテリアルを作成して透明度を設定

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

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";
+    }
+  });
+}