added touch screen support

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`;

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 

client/public/scrabble/index.html

@@ -379,7 +379,7 @@
         
     <piece class="unselectable unplayed-piece">A<score>4</score></piece>
     <piece class="unselectable unplayed-piece">A<score>4</score></piece>
-    <nopiece></nopiece>
+    <piece class="unselectable unplayed-piece">A<score>4</score></piece>
     <piece class="unselectable unplayed-piece">A<score>4</score></piece>
     <piece class="unselectable unplayed-piece">A<score>4</score></piece>
     <piece class="unselectable unplayed-piece">A<score>4</score></piece>

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