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'))
{