fixes and mobile tweaks

client/assets/styles/game.less

@@ -85,6 +85,7 @@
         width: 100%;
         display: grid;
 
+        grid-area: left;
         grid-template-columns: 1fr 2fr;
         grid-template-areas:
             "skills effects";
@@ -92,6 +93,7 @@
 
     .right {
         display: grid;
+        grid-area: right;
         grid-template-rows: minmax(min-content, 1fr) min-content min-content;
         grid-template-areas:
             "avatar"

client/assets/styles/styles.mobile.less

@@ -24,12 +24,15 @@
         }
 
         .game {
-
             .team, #targeting, .resolving-skill {
                 width: calc(90% - 3em);
             }
 
             .game-construct {
+                grid-template-columns: 1fr;
+                grid-template-rows: min-content 1fr;
+
+
                 .avatar {
                     grid-area: initial;
                     position: absolute;
@@ -43,6 +46,51 @@
                     height: 1em;
                 }
             }
+
+            .skills {
+                button[disabled] {
+                    display: none;
+                }
+            }
+
+            .skill-description {
+                font-size: 75%;
+            }
+
+            .effects {
+                font-size: 1em;
+            }
+
+            .player {
+                .game-construct {
+                    grid-template-areas:
+                        "left"
+                        "right";
+
+                    .left {
+                        grid-template-columns: 1fr;
+                        grid-template-rows: 1fr min-content;
+                        grid-template-areas:
+                            "skills"
+                            "effects";
+
+                    }
+                }
+            }
+
+            .opponent {
+                .game-construct {
+                    grid-template-rows: 2fr min-content;
+                    grid-template-rows: 1fr;
+                    grid-template-areas:
+                        "right"
+                        "left";
+                }
+
+                .avatar {
+                    bottom: 0px;
+                }
+            }
         }
 
         .instance-construct {
@@ -61,11 +109,5 @@
                 z-index: -1;
             }
         }
-
-        .opponent {
-            .avatar {
-                bottom: 0;
-            }
-        }
     }
 }

client/manifest.webmanifest

@@ -1,7 +1,7 @@
 {
-    "name": "mnml",
-    "description": "mnml pvp atbs",
-    "short_name": "mnml",
+    "name": "MNML",
+    "description": "abstract strategy",
+    "short_name": "MNML",
     "icons": [
         {
             "src": "./assets/icons/mnml.png",
@@ -16,6 +16,7 @@
     ],
     "start_url": "/index.html",
     "display": "fullscreen",
+    "orientation": "landscape",
     "theme_color": "#000000",
     "background_color": "#000000"
 }

client/src/events.jsx

@@ -12,7 +12,7 @@ const { tutorialVbox } = require('./tutorial.utils');
 
 function registerEvents(store) {
     function notify(msg) {
-        if (Notification && Notification.permission === 'granted') {
+        if (window.Notification && window.Notification.permission === 'granted') {
             const n = new Notification('MNML', {
                 body: msg,
                 tag: 'MNML',
@@ -134,12 +134,12 @@ function registerEvents(store) {
     }
 
     function setAccount(account) {
-        if (account) {
+        if (account && process.env.NODE_ENV !== 'development') {
             LogRocket.init('yh0dy3/mnml');
             LogRocket.identify(account.id, account);
 
-            if (Notification) {
-                Notification.requestPermission();
+            if (window.Notification) {
+                window.Notification.requestPermission();
             }
         }