laneya2

commit

41181a5f16cb7c1c372237c4d91817eb1df7fd65

parent

6f7dc5c8ca4d56d2dd1d0c0c746d03c577bd4092

Author

Tobias Bengfort <tobias.bengfort@posteo.de>

Date

2024-09-27 14:49

refactor: mv dpad to separate file

Diffstat

3 files changed, 56 insertions, 49 deletions

diff --git a/Makefile b/Makefile

@@ -18,5 +18,6 @@ install:
   18    18 	install -Dm 755 server "${DESTDIR}/usr/bin/laneya"
   19    19 	install -Dm 644 index.html "${DESTDIR}/var/www/laneya/index.html"
   20    20 	install -Dm 644 static/main.js "${DESTDIR}/var/www/laneya/static/main.js"
   -1    21 	install -Dm 644 static/dpad.js "${DESTDIR}/var/www/laneya/static/dpad.js"
   21    22 	install -Dm 644 static/style.css "${DESTDIR}/var/www/laneya/static/style.css"
   22    23 	install -Dm 644 README.md "${DESTDIR}/usr/share/doc/laneya/README.md"

diff --git a/static/dpad.js b/static/dpad.js

@@ -0,0 +1,52 @@
   -1     1 export default function(handler) {
   -1     2     var $dpad = document.querySelector('#dpad');
   -1     3     var pointer = null;
   -1     4 
   -1     5     var click = function() {
   -1     6         var rect = $dpad.getBoundingClientRect();
   -1     7         var x = (pointer.x - rect.x) / rect.width - 0.5;
   -1     8         var y = (pointer.y - rect.y) / rect.height - 0.5;
   -1     9         if (Math.abs(x) > Math.abs(y)) {
   -1    10             handler(x > 0 ? 'right' : 'left');
   -1    11         } else {
   -1    12             handler(y > 0 ? 'down' : 'up');
   -1    13         }
   -1    14     };
   -1    15 
   -1    16     $dpad.addEventListener('pointerdown', event => {
   -1    17         if (!pointer && (event.buttons & 1 || event.pointerType !== 'mouse')) {
   -1    18             event.preventDefault();
   -1    19             $dpad.setPointerCapture(event.pointerId);
   -1    20             pointer = {
   -1    21                 id: event.pointerId,
   -1    22                 x: event.clientX,
   -1    23                 y: event.clientY,
   -1    24                 timeout: setTimeout(() => {
   -1    25                     click();
   -1    26                     pointer.timeout = setInterval(() => {
   -1    27                         click();
   -1    28                     }, 40);
   -1    29                 }, 200),
   -1    30             };
   -1    31             click();
   -1    32         }
   -1    33     });
   -1    34 
   -1    35     $dpad.addEventListener('pointermove', event => {
   -1    36         if (pointer && event.pointerId === pointer.id) {
   -1    37             event.preventDefault();
   -1    38             pointer.x = event.clientX;
   -1    39             pointer.y = event.clientY;
   -1    40         }
   -1    41     });
   -1    42 
   -1    43     var pointerup = function(event) {
   -1    44         if (pointer && event.pointerId === pointer.id) {
   -1    45             clearTimeout(pointer.timeout);
   -1    46             pointer = null;
   -1    47         }
   -1    48     };
   -1    49 
   -1    50     $dpad.addEventListener('pointerup', pointerup);
   -1    51     $dpad.addEventListener('pointercancel', pointerup);
   -1    52 }

diff --git a/static/main.js b/static/main.js

@@ -1,5 +1,6 @@
   -1     1 import onDPad from './dpad.js';
   -1     2 
    1     3 var $pre = document.querySelector('pre');
    2    -1 var $dpad = document.querySelector('#dpad');
    3     4 var radius = 5;
    4     5 
    5     6 var params = new URLSearchParams(location.search);
@@ -7,7 +8,6 @@ var gameId = params.get('game');
    7     8 
    8     9 var socketProtocol = location.protocol.replace('http', 'ws');
    9    10 var socket = new WebSocket(`${socketProtocol}//${location.host}/ws/${gameId}`);
   10    -1 var pointer = null;
   11    11 var rows = null;
   12    12 var cols = null;
   13    13 
@@ -279,53 +279,7 @@ document.onkeydown = function(event) {
  279   279     event.preventDefault();
  280   280 };
  281   281 
  282    -1 var click = function() {
  283    -1     var rect = $dpad.getBoundingClientRect();
  284    -1     var x = (pointer.x - rect.x) / rect.width - 0.5;
  285    -1     var y = (pointer.y - rect.y) / rect.height - 0.5;
  286    -1     if (Math.abs(x) > Math.abs(y)) {
  287    -1         send({action: 'move', dir: x > 0 ? 'right' : 'left'});
  288    -1     } else {
  289    -1         send({action: 'move', dir: y > 0 ? 'down' : 'up'});
  290    -1     }
  291    -1 };
  292    -1 
  293    -1 $dpad.addEventListener('pointerdown', event => {
  294    -1     if (!pointer && (event.buttons & 1 || event.pointerType !== 'mouse')) {
  295    -1         event.preventDefault();
  296    -1         $dpad.setPointerCapture(event.pointerId);
  297    -1         pointer = {
  298    -1             id: event.pointerId,
  299    -1             x: event.clientX,
  300    -1             y: event.clientY,
  301    -1             timeout: setTimeout(() => {
  302    -1                 click();
  303    -1                 pointer.timeout = setInterval(() => {
  304    -1                     click();
  305    -1                 }, 40);
  306    -1             }, 200),
  307    -1         };
  308    -1         click();
  309    -1     }
  310    -1 });
  311    -1 
  312    -1 $dpad.addEventListener('pointermove', event => {
  313    -1     if (pointer && event.pointerId === pointer.id) {
  314    -1         event.preventDefault();
  315    -1         pointer.x = event.clientX;
  316    -1         pointer.y = event.clientY;
  317    -1     }
  318    -1 });
  319    -1 
  320    -1 var pointerup = function(event) {
  321    -1     if (pointer && event.pointerId === pointer.id) {
  322    -1         clearTimeout(pointer.timeout);
  323    -1         pointer = null;
  324    -1     }
  325    -1 };
  326    -1 
  327    -1 $dpad.addEventListener('pointerup', pointerup);
  328    -1 $dpad.addEventListener('pointercancel', pointerup);
   -1   282 onDPad(dir => send({action: 'move', dir: dir}));
  329   283 
  330   284 window.addEventListener('resize', () => {
  331   285     rows = null;