Adapt for mobile devices

manifest.webmanifest

@@ -7,7 +7,7 @@
     "lang": "en-US",
     "dir": "ltr",
     "display": "standalone",
-    "orientation": "landscape",
+    "orientation": "portrait",
     "id": "/",
     "start_url": "/",
     "categories": [

src/game.ts

@@ -3,7 +3,7 @@ import { Timer } from "./timer";
 import { Counter } from "./counter";
 import { Config, Mode, BOARD_CONFIG, MODE_NAME } from "./config";
 import { State } from "./state";
-import { UrlTool } from "./urlTool";
+import { UrlTool } from "./util/urlUtil";
 import {
     EVENT_CELL_REVEALED,
     EVENT_CELL_FLAGGED,
@@ -15,6 +15,7 @@ import {
 } from "./util/pub-sub";
 import { Session } from "./util/session";
 import { Settings } from "./settings";
+import { MobileUtil } from "./util/mobileUtil";
 
 export class Game {
 
@@ -155,6 +156,13 @@ export class Game {
             Session.set("applyFirstClickRule", true);
         }
 
+        if (MobileUtil.isMobile()) {
+            // Overwrite mode
+            mode = { rows: 12, cols: 8, mines: 15 };
+            console.debug(window.screen.availWidth);
+            console.debug(window.screen.availHeight);
+        }
+
         this.logDebugMessage(mode);
 
         this.board = new Board(mode, state, this.boardEl);

src/main.ts

@@ -8,7 +8,7 @@ const config: Config = {
     encoder: BinaryToBase64UrlEncoderV2.prototype,
     modePairer: CantorPairer.prototype,
     firstClick: FIRST_CLICK.GuaranteedCascade,
-    debug: false,
+    debug: true,
     darkModeOn: true,
     github: {
         owner: "rdlf0",

src/util/mobileUtil.ts

@@ -0,0 +1,7 @@
+export class MobileUtil {
+
+    public static isMobile(): boolean {
+        return /iPhone|Android/i.test(navigator.userAgent);
+    }
+
+}

src/urlTool.ts → src/util/urlUtil.ts

@@ -1,7 +1,7 @@
-import { Encoder } from "./encoder/encoder";
-import { Pairer, Tuple } from "./pairer/pairer";
-import { Mode } from "./config";
-import { State } from "./state";
+import { Encoder } from "../encoder/encoder";
+import { Pairer, Tuple } from "../pairer/pairer";
+import { Mode } from "../config";
+import { State } from "../state";
 
 const MODE_SIZE = 24;
 const MIN_ROWS = 5;

styles.css

@@ -340,7 +340,7 @@ main {
 }
 
 
-@media all and (display-mode: standalone) {
+@media all and (display-mode: standalone), (max-width: 30rem) {
     html {
         height: 100%;
     }
@@ -354,3 +354,9 @@ main {
         margin: auto;
     }
 }
+
+@media (max-width: 30rem) {
+    main {
+        --cell-side: 45rem;
+    }
+}