- commit
- 89f06f6c76728d0c7eb45bccd0aa287353220b8c
- parent
- d66785a9bb24cb9b25818b48bdf18a43a6f413e1
- Author
- Tobias Bengfort <tobias.bengfort@posteo.de>
- Date
- 2024-09-27 16:52
add second dpad for buttons
Diffstat
| M | index.html | 8 | +++++++- |
| M | static/dpad.js | 19 | +++++++++---------- |
| M | static/main.js | 51 | +++++++++++++++++++++++++++++++++++++++------------ |
| M | static/style.css | 27 | ++++++++++++++++++++------- |
4 files changed, 75 insertions, 30 deletions
diff --git a/index.html b/index.html
@@ -8,7 +8,7 @@ 8 8 </head> 9 9 <body> 10 10 <pre role="application"></pre>11 -1 <svg id="dpad" viewBox="0 0 100 100">-1 11 <svg id="dpad" class="controls" viewBox="-10 -10 120 120"> 12 12 <circle cx="50" cy="18" r="18" /> 13 13 <circle cx="82" cy="50" r="18" /> 14 14 <circle cx="50" cy="82" r="18" /> @@ -18,6 +18,12 @@ 18 18 <path d="M41,79L50,88L59,79" /> 19 19 <path d="M79,41L88,50L79,59" /> 20 20 </svg> -1 21 <svg id="buttons" class="controls" viewBox="-10 -10 120 120"> -1 22 <circle cx="82" cy="50" r="18" /> -1 23 <circle cx="18" cy="50" r="18" /> -1 24 <text x="82" y="50">E</text> -1 25 <text x="18" y="50">Q</text> -1 26 </svg> 21 27 <script src="/static/main.js" type="module"></script> 22 28 </body> 23 29 </html>
diff --git a/static/dpad.js b/static/dpad.js
@@ -1,22 +1,21 @@1 -1 export default function(handler) {2 -1 var $dpad = document.querySelector('#dpad');-1 1 export default function(el, handler) { 3 2 var pointer = null; 4 3 5 4 var click = function() {6 -1 var rect = $dpad.getBoundingClientRect();-1 5 var rect = el.getBoundingClientRect(); 7 6 var x = (pointer.x - rect.x) / rect.width - 0.5; 8 7 var y = (pointer.y - rect.y) / rect.height - 0.5; 9 8 if (Math.abs(x) > Math.abs(y)) {10 -1 handler(x > 0 ? 'ArrowRight' : 'ArrowLeft');-1 9 handler(x > 0 ? 'right' : 'left'); 11 10 } else {12 -1 handler(y > 0 ? 'ArrowDown' : 'ArrowUp');-1 11 handler(y > 0 ? 'down' : 'up'); 13 12 } 14 13 }; 15 1416 -1 $dpad.addEventListener('pointerdown', event => {-1 15 el.addEventListener('pointerdown', event => { 17 16 if (!pointer && (event.buttons & 1 || event.pointerType !== 'mouse')) { 18 17 event.preventDefault();19 -1 $dpad.setPointerCapture(event.pointerId);-1 18 el.setPointerCapture(event.pointerId); 20 19 pointer = { 21 20 id: event.pointerId, 22 21 x: event.clientX, @@ -32,7 +31,7 @@ export default function(handler) { 32 31 } 33 32 }); 34 3335 -1 $dpad.addEventListener('pointermove', event => {-1 34 el.addEventListener('pointermove', event => { 36 35 if (pointer && event.pointerId === pointer.id) { 37 36 event.preventDefault(); 38 37 pointer.x = event.clientX; @@ -47,6 +46,6 @@ export default function(handler) { 47 46 } 48 47 }; 49 4850 -1 $dpad.addEventListener('pointerup', pointerup);51 -1 $dpad.addEventListener('pointercancel', pointerup);-1 49 el.addEventListener('pointerup', pointerup); -1 50 el.addEventListener('pointercancel', pointerup); 52 51 }
diff --git a/static/main.js b/static/main.js
@@ -326,27 +326,33 @@ socket.onmessage = function(event) {
326 326
327 327 document.onkeydown = function(event) {
328 328 if (screen.menuOpen) {
329 -1 if (event.key === 'ArrowUp') {
-1 329 if (event.key === 'ArrowUp' || event.key === 'w') {
330 330 screen.menuCursor -= 1;
331 -1 } else if (event.key === 'ArrowDown') {
-1 331 } else if (event.key === 'ArrowDown' || event.key === 's') {
332 332 screen.menuCursor += 1;
333 -1 } else if (event.key === 'i') {
-1 333 } else if (event.key === 'ArrowRight' || event.key === 'd') {
-1 334 // TODO: drop
-1 335 } else if (event.key === 'q') {
334 336 screen.toggleMenu();
-1 337 } else if (event.key === 'Enter' || event.key === 'e') {
-1 338 // TODO: use
335 339 } else {
336 340 return;
337 341 }
338 342 screen.render();
339 343 } else {
340 -1 if (event.key === 'ArrowUp') {
-1 344 if (event.key === 'ArrowUp' || event.key === 'w') {
341 345 send({action: 'move', dir: 'up'});
342 -1 } else if (event.key === 'ArrowRight') {
-1 346 } else if (event.key === 'ArrowRight' || event.key === 'd') {
343 347 send({action: 'move', dir: 'right'});
344 -1 } else if (event.key === 'ArrowDown') {
-1 348 } else if (event.key === 'ArrowDown' || event.key === 's') {
345 349 send({action: 'move', dir: 'down'});
346 -1 } else if (event.key === 'ArrowLeft') {
-1 350 } else if (event.key === 'ArrowLeft' || event.key === 'a') {
347 351 send({action: 'move', dir: 'left'});
348 -1 } else if (event.key === 'i') {
-1 352 } else if (event.key === 'q') {
349 353 screen.toggleMenu();
-1 354 } else if (event.key === 'Enter' || event.key === 'e') {
-1 355 // TODO: pick up
350 356 } else {
351 357 return;
352 358 }
@@ -354,10 +360,31 @@ document.onkeydown = function(event) {
354 360 event.preventDefault();
355 361 };
356 362
357 -1 onDPad(key => document.onkeydown({
358 -1 key: key,
359 -1 preventDefault: () => {},
360 -1 }));
-1 363 onDPad(document.querySelector('#dpad'), dir => {
-1 364 var keys = {
-1 365 'up': 'ArrowUp',
-1 366 'right': 'ArrowRight',
-1 367 'down': 'ArrowDown',
-1 368 'left': 'ArrowLeft',
-1 369 };
-1 370 document.onkeydown({
-1 371 key: keys[dir],
-1 372 preventDefault: () => {},
-1 373 });
-1 374 });
-1 375
-1 376 onDPad(document.querySelector('#buttons'), dir => {
-1 377 var keys = {
-1 378 'up': null,
-1 379 'right': 'e',
-1 380 'down': null,
-1 381 'left': 'q',
-1 382 };
-1 383 document.onkeydown({
-1 384 key: keys[dir],
-1 385 preventDefault: () => {},
-1 386 });
-1 387 });
361 388
362 389 screen.updateSize();
363 390 window.addEventListener('resize', () => screen.updateSize(), {passive: true});
diff --git a/static/style.css b/static/style.css
@@ -16,23 +16,36 @@ pre {
16 16 margin: 0;
17 17 }
18 18
19 -1 #dpad {
-1 19 .controls {
20 20 position: fixed;
21 -1 inset-block-end: 1em;
22 -1 inset-inline-start: 1em;
23 -1 inline-size: 10em;
-1 21 inset-block-end: 0;
-1 22 inline-size: 12em;
24 23 max-inline-size: 30%;
25 24 opacity: 0.3;
26 25 touch-action: manipulation;
-1 26 cursor: pointer;
27 27 }
28 -1 #dpad circle {
-1 28 .controls circle {
29 29 fill: var(--fg);
30 30 }
31 -1 #dpad path {
-1 31 .controls path {
32 32 fill: none;
33 33 stroke: var(--bg);
34 34 stroke-width: 2;
35 35 }
-1 36 .controls text {
-1 37 font-family: sans-serif;
-1 38 font-weight: bold;
-1 39 font-size: 16px;
-1 40 dominant-baseline: middle;
-1 41 text-anchor: middle;
-1 42 }
-1 43 #dpad {
-1 44 inset-inline-start: 0;
-1 45 }
-1 46 #buttons {
-1 47 inset-inline-end: 0;
-1 48 }
36 49
37 50 .color-0 { color: #999 }
38 51 .color-1 { color: #c00 }
@@ -62,7 +75,7 @@ pre {
62 75 .color-6 { color: #0dd }
63 76 .color-7 { color: #999 }
64 77
65 -1 #dpad {
-1 78 .controls {
66 79 opacity: 0.1;
67 80 }
68 81 }