Toggle fullscreen button

index.html

@@ -18,7 +18,10 @@
         </div>
         <!-- todo add settings -->
         <div>Score:<span id="score"></span></div>
-        <div><button onclick="restart()">restart</button><br /></div>
+        <div>
+          <button onclick="restart()">restart</button><br />
+          <button onclick="toggleFullscreen()">Toggle Fullscreen</button>
+        </div>
         <hr />
         <div>Zoom: Ctrl +</div>
         <div>Keyboard controls:<br />arrow keys and z/x</div>

src/globals.d.ts

@@ -8,6 +8,7 @@ declare global {
     FieldStorage: FieldPersistence;
     toggleMenu: () => void;
     restart: () => void;
+    toggleFullscreen: () => void;
     fieldName: string;
   }
 }

src/index.ts

@@ -45,6 +45,22 @@ self.restart = function () {
   window.location.reload();
 };
 
+self.toggleFullscreen = function () {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen().catch((err) => {
+      console.error(
+        `Error attempting to enable fullscreen mode: ${err.message} (${err.name})`,
+      );
+    });
+  } else {
+    document.exitFullscreen().catch((err) => {
+      console.error(
+        `Error attempting to exit fullscreen mode: ${err.message} (${err.name})`,
+      );
+    });
+  }
+};
+
 (async () => {
   PIXI.TextureSource.defaultOptions.scaleMode = "nearest";
   PIXI.TextureSource.defaultOptions.autoGenerateMipmaps = true;