WASM: UI update

maxpoletaev · Jan 12, 2025 · b4d7916 · b4d7916
1 parent c75d873
commit b4d7916
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 22 deletions.
diff --git a/web/main.js b/web/main.js
@@ -114,10 +114,27 @@ Promise.all([wasmReady, documentReady]).then(async () => {
 
   for (let [id, mask] of Object.entries(elementKeyMap)) {
     let el = document.getElementById(id);
-    el.addEventListener("mousedown", () => { buttonsPressed |= mask; });
-    el.addEventListener("touchstart", () => { buttonsPressed |= mask; });
-    el.addEventListener("mouseup", () => { buttonsPressed &= ~mask; });
-    el.addEventListener("touchend", () => { buttonsPressed &= ~mask; });
+    el.style.touchAction = "none";
+
+    el.addEventListener("mousedown", (e) => {
+      e.preventDefault();
+      buttonsPressed |= mask;
+    });
+
+    el.addEventListener("touchstart", (e) => {
+      e.preventDefault();
+      buttonsPressed |= mask;
+    });
+
+    el.addEventListener("mouseup", (e) => {
+      e.preventDefault();
+      buttonsPressed &= ~mask;
+    });
+
+    el.addEventListener("touchend", (e) => {
+      e.preventDefault();
+      buttonsPressed &= ~mask;
+    });
   }
 
   // ========================

diff --git a/web/style.css b/web/style.css
@@ -66,8 +66,9 @@ body {
   display: flex;
   position: relative;
   flex-direction: row;
-  justify-content: space-between;
   border-radius: 10px;
+  justify-content: space-between;
+  border: 1px solid #000000;
 }
 
 .controls__dpad {
@@ -84,15 +85,15 @@ body {
 
 .dpad {
   position: relative;
-  height: 110px;
-  width: 110px;
+  height: 102px;
+  width: 102px;
   color: #000000;
 }
 
 .dpad__horizontal {
   position: absolute;
   width: 100%;
-  height: 38px;
+  height: 34px;
   border-radius: 4px;
   top: 50%;
   transform: translateY(-50%);
@@ -102,7 +103,7 @@ body {
 
 .dpad__vertical {
   position: absolute;
-  width: 38px;
+  width: 34px;
   height: 100%;
   left: 50%;
   border-radius: 4px;
@@ -119,8 +120,8 @@ body {
   line-height: 35px;
   cursor: pointer;
   user-select: none;
-  width: 38px;
-  height: 38px;
+  width: 34px;
+  height: 34px;
   z-index: 1;
 }
 
@@ -152,7 +153,7 @@ body {
 }
 
 .dpad__border.-vert {
-  width: 42px;
+  width: 38px;
   top: -2px;
   bottom: -2px;
   z-index: 0;
@@ -162,9 +163,9 @@ body {
 }
 
 .dpad__border.-horiz {
-  height: 42px;
-  left: -2px;
+  height: 38px;
   right: -2px;
+  left: -2px;
   z-index: 0;
   top: 50%;
   transform: translateY(-50%);
@@ -188,27 +189,24 @@ body {
 
 .center-buttons {
   margin: auto;
-  width: 142px;
-  height: 40px;
   border-radius: 10px;
   background-color: #edece7;
-  border: 4px solid #e0ded4;
+  border: 3px solid #e0ded4;
   box-shadow: inset 0 0 2px 2px rgba(0, 0, 0, 0.3);
   z-index: 3;
   display: flex;
 }
 
 .center-buttons__button {
   position: relative;
-  top: 3px;
-  width: 42px;
-  height: 18px;
+  width: 38px;
+  height: 14px;
   cursor: pointer;
+  border-radius: 10px;
+  margin: 9px 13px;
   user-select: none;
   background-color: #464646;
-  border-radius: 10px;
   border: 1px solid #272723;
-  margin: 9px 13px;
   box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.51);
 }