From 534d912bfe96e91da0c9154195b959b233c0626c Mon Sep 17 00:00:00 2001
From: leomcelroy <leomcelroy@gmail.com>
Date: Wed, 17 Aug 2022 12:57:39 -0400
Subject: [PATCH] cleaned up mobile css slightly

---
 dispatch.js    |  1 +
 index.css      | 10 ++++++++++
 index.html     |  1 +
 manifest.json  |  4 ++++
 mobile/view.js | 25 +++++++++++++++----------
 5 files changed, 31 insertions(+), 10 deletions(-)
 create mode 100644 manifest.json

diff --git a/dispatch.js b/dispatch.js
index 38e0669ca..625de0eeb 100644
--- a/dispatch.js
+++ b/dispatch.js
@@ -92,6 +92,7 @@ const ACTIONS = {
   },
   RENDER_MOBILE({ text }, state) {
     render(document.querySelector(".root"), viewMobile(text));
+    // screen.orientation.lock('landscape');
   },
   RENDER(args, state) {
     render(document.querySelector(".root"), view(state));
diff --git a/index.css b/index.css
index 457690938..b1a7e70e7 100644
--- a/index.css
+++ b/index.css
@@ -34,6 +34,16 @@ body {
   padding: 20px;
 }
 
+.no-select {
+  -webkit-touch-callout: none; /* iOS Safari */
+    -webkit-user-select: none; /* Safari */
+     -khtml-user-select: none; /* Konqueror HTML */
+       -moz-user-select: none; /* Old versions of Firefox */
+        -ms-user-select: none; /* Internet Explorer/Edge */
+            user-select: none; /* Non-prefixed version, currently
+                                  supported by Chrome, Edge, Opera and Firefox */
+}
+
 .root {
   display: flex;
   flex-direction: column;
diff --git a/index.html b/index.html
index 8e15310cf..79725032e 100644
--- a/index.html
+++ b/index.html
@@ -4,6 +4,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sprig</title>
+    <link rel="manifest" href="manifest.json">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
     <script type="module" src="https://unpkg.com/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
diff --git a/manifest.json b/manifest.json
new file mode 100644
index 000000000..c31d81dae
--- /dev/null
+++ b/manifest.json
@@ -0,0 +1,4 @@
+{
+    "display":      "standalone",
+    "orientation":  "landscape"
+}
\ No newline at end of file
diff --git a/mobile/view.js b/mobile/view.js
index 15ffc231b..e584c5baf 100644
--- a/mobile/view.js
+++ b/mobile/view.js
@@ -13,6 +13,7 @@ export const view = (text) => html`
       margin: 0;
       width: 100vw;
       height: 100vh;
+      overflow: none;
     }
 
     .mobile-view {
@@ -49,6 +50,10 @@ export const view = (text) => html`
       justify-content: center;
     }
 
+    .mobile-button:active {
+      background: grey;
+    }
+
     .input-button-w {
       position: absolute;
       top: calc(50% - 75px);
@@ -79,13 +84,13 @@ export const view = (text) => html`
       right: calc(5% + 25px);
     }
 
-    .input-button-j {
+    .input-button-l {
       position: absolute;
       top: calc(50% - 25px);
       right: calc(5% - 25px);
     }
 
-    .input-button-l {
+    .input-button-j {
       position: absolute;
       top: calc(50% - 25px);
       right: calc(5% + 75px);;
@@ -100,20 +105,20 @@ export const view = (text) => html`
   </style>
   <div class="mobile-view">
     <div class="wasd">
-      <div class="mobile-button input-button-w" @click=${() => dispatchKey("w")}>w</div>
-      <div class="mobile-button input-button-a" @click=${() => dispatchKey("a")}>a</div>
-      <div class="mobile-button input-button-s" @click=${() => dispatchKey("s")}>s</div>
-      <div class="mobile-button input-button-d" @click=${() => dispatchKey("d")}>d</div>
+      <div class="mobile-button no-select input-button-w" @click=${() => dispatchKey("w")}>w</div>
+      <div class="mobile-button no-select input-button-a" @click=${() => dispatchKey("a")}>a</div>
+      <div class="mobile-button no-select input-button-s" @click=${() => dispatchKey("s")}>s</div>
+      <div class="mobile-button no-select input-button-d" @click=${() => dispatchKey("d")}>d</div>
     </div>
     <div class="game-canvas-container">
       <canvas class="game-canvas"></canvas>
       <canvas class="game-text"></canvas>
     </div>
     <div class="wasd">
-      <div class="mobile-button input-button-i" @click=${() => dispatchKey("i")}>i</div>
-      <div class="mobile-button input-button-j" @click=${() => dispatchKey("j")}>j</div>
-      <div class="mobile-button input-button-k" @click=${() => dispatchKey("k")}>k</div>
-      <div class="mobile-button input-button-l" @click=${() => dispatchKey("l")}>l</div>
+      <div class="mobile-button no-select input-button-i" @click=${() => dispatchKey("i")}>i</div>
+      <div class="mobile-button no-select input-button-j" @click=${() => dispatchKey("j")}>j</div>
+      <div class="mobile-button no-select input-button-k" @click=${() => dispatchKey("k")}>k</div>
+      <div class="mobile-button no-select input-button-l" @click=${() => dispatchKey("l")}>l</div>
     </div>
   </div>
   <div class="mobile-run" @click=${() => runGame(text)}>run</div>