From b02c14a7f27c6917a2fadf2497ff40e558cbddd5 Mon Sep 17 00:00:00 2001 From: Ben Kyd Date: Thu, 1 Apr 2021 22:08:25 +0100 Subject: [PATCH] added touch screen support --- ...ter_tile_put_on_board_1.mp3 => place1.mp3} | Bin ...ter_tile_put_on_board_2.mp3 => place2.mp3} | Bin ...ter_tile_put_on_board_3.mp3 => place3.mp3} | Bin ...le_put_in_plastic_rack_1.mp3 => rack1.mp3} | Bin ...le_put_in_plastic_rack_2.mp3 => rack2.mp3} | Bin ...le_put_in_plastic_rack_3.mp3 => rack3.mp3} | Bin client/public/scrabble/dragable.js | 20 ++++++++++++---- client/public/scrabble/game.css | 1 - client/public/scrabble/index.html | 2 +- client/public/scrabble/pieces.js | 22 +++++++++++++++--- 10 files changed, 35 insertions(+), 10 deletions(-) rename client/public/{game_scrabble_game_letter_tile_put_on_board_1.mp3 => place1.mp3} (100%) rename client/public/{game_scrabble_game_letter_tile_put_on_board_2.mp3 => place2.mp3} (100%) rename client/public/{game_scrabble_game_letter_tile_put_on_board_3.mp3 => place3.mp3} (100%) rename client/public/{game_scrabble_game_letter_tile_put_in_plastic_rack_1.mp3 => rack1.mp3} (100%) rename client/public/{game_scrabble_game_letter_tile_put_in_plastic_rack_2.mp3 => rack2.mp3} (100%) rename client/public/{game_scrabble_game_letter_tile_put_in_plastic_rack_3.mp3 => rack3.mp3} (100%) diff --git a/client/public/game_scrabble_game_letter_tile_put_on_board_1.mp3 b/client/public/place1.mp3 similarity index 100% rename from client/public/game_scrabble_game_letter_tile_put_on_board_1.mp3 rename to client/public/place1.mp3 diff --git a/client/public/game_scrabble_game_letter_tile_put_on_board_2.mp3 b/client/public/place2.mp3 similarity index 100% rename from client/public/game_scrabble_game_letter_tile_put_on_board_2.mp3 rename to client/public/place2.mp3 diff --git a/client/public/game_scrabble_game_letter_tile_put_on_board_3.mp3 b/client/public/place3.mp3 similarity index 100% rename from client/public/game_scrabble_game_letter_tile_put_on_board_3.mp3 rename to client/public/place3.mp3 diff --git a/client/public/game_scrabble_game_letter_tile_put_in_plastic_rack_1.mp3 b/client/public/rack1.mp3 similarity index 100% rename from client/public/game_scrabble_game_letter_tile_put_in_plastic_rack_1.mp3 rename to client/public/rack1.mp3 diff --git a/client/public/game_scrabble_game_letter_tile_put_in_plastic_rack_2.mp3 b/client/public/rack2.mp3 similarity index 100% rename from client/public/game_scrabble_game_letter_tile_put_in_plastic_rack_2.mp3 rename to client/public/rack2.mp3 diff --git a/client/public/game_scrabble_game_letter_tile_put_in_plastic_rack_3.mp3 b/client/public/rack3.mp3 similarity index 100% rename from client/public/game_scrabble_game_letter_tile_put_in_plastic_rack_3.mp3 rename to client/public/rack3.mp3 diff --git a/client/public/scrabble/dragable.js b/client/public/scrabble/dragable.js index b4197ed..90e0680 100644 --- a/client/public/scrabble/dragable.js +++ b/client/public/scrabble/dragable.js @@ -5,10 +5,13 @@ // bad assumption to make, but scroll pixels wouldn't scale document.querySelector('#game-container').addEventListener('mousemove', mouseMove); +document.querySelector('#game-container').addEventListener('touchmove', mouseMove); document.querySelector('#game-container').addEventListener('mouseup', mouseUp); +document.querySelector('#game-container').addEventListener('touchend', mouseUp); document.querySelectorAll('piece').forEach(element => { element.addEventListener('mousedown', e => mouseDown(e, element)); + element.addEventListener('touchstart', e => mouseDown(e, element)); }); let state = {dx: 0, dy: 0}; @@ -18,14 +21,18 @@ function mouseDown(event, element) { event.preventDefault(); - // TODO: allow drag api (on mobile) - state.dx = Math.abs(element.offsetLeft - event.clientX); - state.dy = Math.abs(element.offsetTop - event.clientY); - - // move to the centre of the mouse to simulat pickup // can also play a sound + element.style.top = event.clientY; + element.style.left = event.clientX; + + if (event.type === 'touchstart') + event = event.changedTouches[0]; + + state.dx = Math.abs(element.offsetLeft - event.clientX); + state.dy = Math.abs(element.offsetTop - event.clientY); + element.pointerEvents = 'none'; selectedElement = element; } @@ -36,6 +43,9 @@ function mouseMove(event) if (selectedElement.pointerEvents === 'none') { + if (event.type === 'touchmove') + event = event.changedTouches[0]; + // TODO: Scale for % selectedElement.style.left = `${event.clientX - state.dx}px`; selectedElement.style.top = `${event.clientY - state.dy}px`; diff --git a/client/public/scrabble/game.css b/client/public/scrabble/game.css index 11a9c34..d363fbc 100644 --- a/client/public/scrabble/game.css +++ b/client/public/scrabble/game.css @@ -1,4 +1,3 @@ - /** * This would be responsive, ie, resizing with the size of the window * but decided it against the scope of the project as it would be diff --git a/client/public/scrabble/index.html b/client/public/scrabble/index.html index 7ce7c60..482c9fe 100644 --- a/client/public/scrabble/index.html +++ b/client/public/scrabble/index.html @@ -379,7 +379,7 @@ A4 A4 - + A4 A4 A4 A4 diff --git a/client/public/scrabble/pieces.js b/client/public/scrabble/pieces.js index 1f4f594..f1db467 100644 --- a/client/public/scrabble/pieces.js +++ b/client/public/scrabble/pieces.js @@ -9,20 +9,30 @@ let BOARD_TL_Y = document.querySelector('#game-container').getBoundingClientRect const PIECE_WIDTH = 80; const PIECE_HEIGHT = 80; +function piecePickedUp() +{ -class Piece { +} + +function piecePlaced() +{ } + function setupPieces() { - BOARD_TL_X = document.querySelector('#game-container').getBoundingClientRect().left + window.scrollX; - BOARD_TL_Y = document.querySelector('#game-container').getBoundingClientRect().top + window.scrollY; // if the window has enough vertical height to fit the peices, // have them at the bottom of the board, else, have them to the right if (window.innerHeight > 700) { + document.querySelector('#game-container').style.width = '600px'; + document.querySelector('#game-container').style.height = '700px'; + // needs to happen after resize + BOARD_TL_X = document.querySelector('#game-container').getBoundingClientRect().left + window.scrollX; + BOARD_TL_Y = document.querySelector('#game-container').getBoundingClientRect().top + window.scrollY; + let index = 0; for (const piece of document.querySelectorAll('piece, nopiece')) { @@ -37,6 +47,12 @@ function setupPieces() } } else { + document.querySelector('#game-container').style.width = '700px'; + document.querySelector('#game-container').style.height = '600px'; + + BOARD_TL_X = document.querySelector('#game-container').getBoundingClientRect().left + window.scrollX; + BOARD_TL_Y = document.querySelector('#game-container').getBoundingClientRect().top + window.scrollY; + let index = 0; for (const piece of document.querySelectorAll('piece, nopiece')) {