- commit
- e1c9d308ad8817b287aacb9611f4d6ccd49abae1
- parent
- 5fda4ca01321484765beb80b1d8409e35029d060
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2024-09-26 08:18
restrict touch controls to dpad area
Diffstat
| M | index.html | 10 | ++++++++++ |
| M | static/main.js | 16 | +++++++++------- |
| M | static/style.css | 35 | ++++++++++++++++++++++++++++++----- |
3 files changed, 49 insertions, 12 deletions
diff --git a/index.html b/index.html
@@ -9,6 +9,16 @@ 9 9 </head> 10 10 <body> 11 11 <pre role="application"></pre> -1 12 <svg id="dpad" viewBox="0 0 100 100"> -1 13 <circle cx="50" cy="18" r="18" /> -1 14 <circle cx="82" cy="50" r="18" /> -1 15 <circle cx="50" cy="82" r="18" /> -1 16 <circle cx="18" cy="50" r="18" /> -1 17 <path d="M41,21L50,12L59,21" /> -1 18 <path d="M21,41L12,50L21,59" /> -1 19 <path d="M41,79L50,88L59,79" /> -1 20 <path d="M79,41L88,50L79,59" /> -1 21 </svg> 12 22 <script src="/static/main.js" type="module"></script> 13 23 </body> 14 24 </html>
diff --git a/static/main.js b/static/main.js
@@ -1,4 +1,5 @@ 1 1 var $pre = document.querySelector('pre'); -1 2 var $dpad = document.querySelector('#dpad'); 2 3 var radius = 5; 3 4 4 5 var params = new URLSearchParams(location.search); @@ -257,8 +258,9 @@ document.onkeydown = function(event) { 257 258 }; 258 259 259 260 var click = function() {260 -1 var x = pointer.x / innerWidth - 0.5;261 -1 var y = pointer.y / innerHeight - 0.5;-1 261 var rect = $dpad.getBoundingClientRect(); -1 262 var x = (pointer.x - rect.x) / rect.width - 0.5; -1 263 var y = (pointer.y - rect.y) / rect.height - 0.5; 262 264 if (Math.abs(x) > Math.abs(y)) { 263 265 send({action: 'move', dir: x > 0 ? 'right' : 'left'}); 264 266 } else { @@ -266,10 +268,10 @@ var click = function() { 266 268 } 267 269 }; 268 270269 -1 document.addEventListener('pointerdown', event => {-1 271 $dpad.addEventListener('pointerdown', event => { 270 272 if (!pointer && (event.buttons & 1 || event.pointerType !== 'mouse')) { 271 273 event.preventDefault();272 -1 $pre.setPointerCapture(event.pointerId);-1 274 $dpad.setPointerCapture(event.pointerId); 273 275 pointer = { 274 276 id: event.pointerId, 275 277 x: event.clientX, @@ -285,7 +287,7 @@ document.addEventListener('pointerdown', event => { 285 287 } 286 288 }); 287 289288 -1 document.addEventListener('pointermove', event => {-1 290 $dpad.addEventListener('pointermove', event => { 289 291 if (pointer && event.pointerId === pointer.id) { 290 292 event.preventDefault(); 291 293 pointer.x = event.clientX; @@ -300,5 +302,5 @@ var pointerup = function(event) { 300 302 } 301 303 }; 302 304303 -1 document.addEventListener('pointerup', pointerup);304 -1 document.addEventListener('pointercancel', pointerup);-1 305 $dpad.addEventListener('pointerup', pointerup); -1 306 $dpad.addEventListener('pointercancel', pointerup);
diff --git a/static/style.css b/static/style.css
@@ -1,12 +1,33 @@
-1 1 :root {
-1 2 --bg: #fff;
-1 3 --fg: #000;
-1 4
-1 5 background: var(--bg);
-1 6 color: var(--fg);
-1 7 }
-1 8
1 9 pre {
2 10 line-height: 1;
3 11 letter-spacing: 0.1em;
4 12 }
5 13
6 -1 :root {
7 -1 background: #fff;
8 -1 color: #000;
-1 14 #dpad {
-1 15 position: fixed;
-1 16 inset-block-end: 1em;
-1 17 inset-inline-start: 1em;
-1 18 inline-size: 10em;
-1 19 max-inline-size: 30%;
-1 20 opacity: 0.3;
9 21 }
-1 22 #dpad circle {
-1 23 fill: var(--fg);
-1 24 }
-1 25 #dpad path {
-1 26 fill: none;
-1 27 stroke: var(--bg);
-1 28 stroke-width: 2;
-1 29 }
-1 30
10 31 .color-0 { color: #999 }
11 32 .color-1 { color: #c00 }
12 33 .color-2 { color: #591 }
@@ -19,8 +40,8 @@ pre {
19 40 @media (prefers-color-scheme: dark) {
20 41 :root {
21 42 color-scheme: dark;
22 -1 background: #000;
23 -1 color: #fff;
-1 43 --bg: #000;
-1 44 --fg: #fff;
24 45 }
25 46 .color-0 { color: #555 }
26 47 .color-1 { color: #f33 }
@@ -30,4 +51,8 @@ pre {
30 51 .color-5 { color: #c8b }
31 52 .color-6 { color: #0dd }
32 53 .color-7 { color: #999 }
-1 54
-1 55 #dpad {
-1 56 opacity: 0.1;
-1 57 }
33 58 }