feat: add virtual joystick and improve mobile ux

zr3 · Feb 17, 2024 · 66a679b · 66a679b
1 parent 9ae3799
commit 66a679b
Show file tree

Hide file tree

Showing 4 changed files with 595 additions and 23 deletions.
diff --git a/delightful-thyme/index.html b/delightful-thyme/index.html
@@ -51,14 +51,15 @@
           <p>[ENTER] : see what is on the screen (scan all)</p>
           <p>[MOUSE HOVER] : see what is on the screen (under mouse)</p>
         </section>
+        <div id="joystick-container"></div>
         <div id="game-controls">
             <div id="gc-button-pad">
                 <button id="gc-interact" class="gc-button">INTERACT</button>
                 <button id="gc-back" class="gc-button">BACK</button>
-                <button id="gc-up" class="gc-button gc-arrow">^</button>
-                <button id="gc-left" class="gc-button gc-arrow">&lt;</button>
-                <button id="gc-right" class="gc-button gc-arrow">&gt;</button>
-                <button id="gc-down" class="gc-button gc-arrow">v</button>
+                <!-- <button id="gc-up" class="gc-button gc-arrow">^</button> -->
+                <!-- <button id="gc-left" class="gc-button gc-arrow">&lt;</button> -->
+                <!-- <button id="gc-right" class="gc-button gc-arrow">&gt;</button> -->
+                <!-- <button id="gc-down" class="gc-button gc-arrow">v</button> -->
                 <button id="gc-inventory" class="gc-button">I</button>
                 <button id="gc-equipment" class="gc-button">E</button>
                 <button id="gc-drop" class="gc-button">D</button>

diff --git a/delightful-thyme/main.js b/delightful-thyme/main.js
@@ -1,4 +1,5 @@
 import "./style.css";
+import { VirtualJoystick } from "./virtualjoystick";
 
 globalThis.gameStats = {
   playerName: "???",
@@ -28,13 +29,22 @@ function triggerKey(id, key) {
   });
 }
 
-triggerKey('gc-left', 'KeyH');
-triggerKey('gc-right', 'KeyL');
-triggerKey('gc-up', 'KeyK');
-triggerKey('gc-down', 'KeyJ');
+// triggerKey('gc-left', 'KeyH');
+// triggerKey('gc-right', 'KeyL');
+// triggerKey('gc-up', 'KeyK');
+// triggerKey('gc-down', 'KeyJ');
 triggerKey('gc-interact', 'Space');
 triggerKey('gc-back', 'Backspace');
 triggerKey('gc-inventory', 'KeyI');
 triggerKey('gc-equipment', 'KeyE');
 triggerKey('gc-drop', 'KeyD');
 triggerKey('gc-scan', 'Enter');
+
+new VirtualJoystick({
+    mouseSupport	: true,
+    limitStickTravel: true,
+    stickRadius	: 50,
+    container: document.getElementById('joystick-container'),
+    strokeStyle: '#aaaaaa',
+});
+
diff --git a/delightful-thyme/style.css b/delightful-thyme/style.css
@@ -1,7 +1,8 @@
 :root {
     --color-dark: #041725;
     --current-level: 1;
-    --background-level-scale: 100vw
+    --background-level-scale-vw: 110vw;
+    --background-level-scale-vh: 110vh;
 }
 html {
     background-color: var(--color-dark);
@@ -16,12 +17,10 @@ body {
 }
 
 #game-layout {
-    transition: all 3s ease-in-out;
+    transition: backdrop-filter 3s ease-in-out;
     backdrop-filter: brightness(calc(1 - var(--current-level) * 0.1));
     background-color: var(--color-dark);
     background-image: url('img/bg.avif');
-    max-width: 1800px;
-    margin: auto;
     width: 100vw;
     height: 100vh;
     display: grid;
@@ -147,7 +146,7 @@ body {
 }
 
 /* desktop-only layout */
-@media (min-width: 601px) {
+@media (min-width: 1001px) {
     html {
         font-size: 12px;
     }
@@ -201,8 +200,85 @@ body {
         cursor: pointer;
     }
 }
+/* mobile-wide layout */
+@media (min-width: 601px) and (max-width: 1000px) {
+    html {
+        font-size: 12px;
+    }
+    .type-animation {
+        width: 25ch;
+        animation: typing 1.1s steps(25);
+    }
+    #top-text {
+        position: relative;
+        font-size: 1rem;
+    }
+    #game-layout {
+        display: grid;
+        grid-template-columns: 1fr 26rem;
+        grid-template-rows: repeat(3, 1fr);
+        grid-column-gap: 0px;
+        grid-row-gap: 0px;
+        background-position: center;
+        background-size: var(--background-level-scale-vw);
+    }
+    #input-window {
+        grid-area: 1 / 1 / 4 / 2;
+    }
+    #game-window {
+        grid-area: 1 / 1 / 4 / 2;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+    }
+    #top-text {
+        font-size: 0.8rem;
+        margin-top: 2rem;
+        grid-area: 1 / 2 / 3 / 3;
+        overflow-y: scroll;
+    }
+    #bottom-text {
+        display: none;
+    }
+    #joystick-container {
+        grid-area: 1 / 1 / 4 / 2;
+    }
+    #game-controls {
+        padding: 1rem;
+        grid-area: 3 / 2 / 4 / 3;
+    }
+    #gc-button-pad {
+        display: grid;
+        grid-template-columns: repeat(5, 1fr);
+        grid-template-rows: repeat(2, 1fr);
+        /* grid-template-rows: repeat(5, 1fr); */
+        grid-column-gap: 0px;
+        grid-row-gap: 0px;
+    }
+    #gc-interact { grid-area: 1 / 1 / 2 / 3; }
+    #gc-back { grid-area: 1 / 4 / 2 / 6; }
+    #gc-inventory { grid-area: 2 / 1 / 3 / 2; }
+    #gc-equipment { grid-area: 2 / 2 / 3 / 3; }
+    #gc-drop { grid-area: 2 / 4 / 3 / 5; }
+    #gc-scan { grid-area: 2 / 5 / 3 / 6; }
+    #fullscreen-controls {
+        display: none;
+    }
+
+    .gc-button {
+        background: transparent;
+        border: 1px dashed #aaa;
+        border-radius: 5px;
+        color: #aaa;
+        height: 40px;
+        font-family: "PC Senior", monospace;
+        margin: 2px;
+        box-shadow: 5px 5px #aaa;
+        font-size: 0.5rem;
+    }
+}
 
-/* mobile-only layout */
+/* mobile-tall layout */
 @media (max-width: 600px) {
     html {
         font-size: calc(5px + 1.3vh);
@@ -235,6 +311,9 @@ body {
     #fullscreen-controls {
         display: none;
     }
+    #joystick-container {
+        grid-area: 1 / 1 / 3 / 3;
+    }
     #game-controls {
         grid-area: 3 / 1 / 4 / 3;
         padding: 2rem;
@@ -243,20 +322,25 @@ body {
     #gc-button-pad {
         display: grid;
         grid-template-columns: repeat(5, 1fr);
-        grid-template-rows: repeat(5, 1fr);
+        grid-template-rows: repeat(2, 1fr);
+        /* grid-template-rows: repeat(5, 1fr); */
         grid-column-gap: 0px;
         grid-row-gap: 0px;
     }
     #gc-interact { grid-area: 1 / 1 / 2 / 3; }
     #gc-back { grid-area: 1 / 4 / 2 / 6; }
-    #gc-up { grid-area: 2 / 3 / 3 / 4; }
-    #gc-left { grid-area: 3 / 2 / 4 / 3; }
-    #gc-right { grid-area: 3 / 4 / 4 / 5; }
-    #gc-down { grid-area: 4 / 3 / 5 / 4; }
-    #gc-inventory { grid-area: 5 / 1 / 6 / 2; }
-    #gc-equipment { grid-area: 5 / 2 / 6 / 3; }
-    #gc-drop { grid-area: 5 / 4 / 6 / 5; }
-    #gc-scan { grid-area: 5 / 5 / 6 / 6; }
+    /* #gc-up { grid-area: 2 / 3 / 3 / 4; } */
+    /* #gc-left { grid-area: 3 / 2 / 4 / 3; } */
+    /* #gc-right { grid-area: 3 / 4 / 4 / 5; } */
+    /* #gc-down { grid-area: 4 / 3 / 5 / 4; } */
+    /* #gc-inventory { grid-area: 5 / 1 / 6 / 2; } */
+    /* #gc-equipment { grid-area: 5 / 2 / 6 / 3; } */
+    /* #gc-drop { grid-area: 5 / 4 / 6 / 5; } */
+    /* #gc-scan { grid-area: 5 / 5 / 6 / 6; } */
+    #gc-inventory { grid-area: 2 / 1 / 3 / 2; }
+    #gc-equipment { grid-area: 2 / 2 / 3 / 3; }
+    #gc-drop { grid-area: 2 / 4 / 3 / 5; }
+    #gc-scan { grid-area: 2 / 5 / 3 / 6; }
 
     .gc-button {
         background: transparent;