centeralised window events, will do modularisation soon I SWEAR

client/public/scrabble/dragable.js

@@ -4,16 +4,6 @@
 // i also assume there's no way a user's viewport isn't at least 700px tall
 // bad assumption to make, but scroll pixels wouldn't scale
 
-document.addEventListener('mousemove', mouseMove);
-document.addEventListener('touchmove', mouseMove);
-document.addEventListener('mouseup',   mouseUp);
-document.addEventListener('touchend',  mouseUp);
-
-document.querySelectorAll('piece').forEach(element => {
-    element.addEventListener('mousedown', e => mouseDown(e, element));
-    element.addEventListener('touchstart', e => mouseDown(e, element));
-});
-
 let selectedElement = {};
 let lastCoords = { x: 0, y: 0 };
 

client/public/scrabble/events.js

@@ -0,0 +1,37 @@
+const gameinfoRight = document.querySelector('#game-info-right');
+const gameinfoLeft = document.querySelector('#game-info-left');
+const gameinfoCompact = document.querySelector('#game-info-compact');
+
+
+
+function windowResize()
+{
+    if (window.innerWidth < 1200)
+    {
+        gameinfoRight.style.display = 'none';
+        gameinfoLeft.style.display = 'none';
+        gameinfoCompact.style.display = 'block';
+    } else
+    {
+        gameinfoRight.style.display = 'block';
+        gameinfoLeft.style.display = 'block';
+        gameinfoCompact.style.display = 'none';
+    }
+
+    setupPieces();
+}
+windowResize();
+
+
+window.onresize = windowResize;
+
+document.addEventListener('mousemove', mouseMove);
+document.addEventListener('touchmove', mouseMove);
+document.addEventListener('mouseup',   mouseUp);
+document.addEventListener('touchend',  mouseUp);
+
+document.querySelectorAll('piece').forEach(element => {
+    element.addEventListener('mousedown', e => mouseDown(e, element));
+    element.addEventListener('touchstart', e => mouseDown(e, element));
+});
+

client/public/scrabble/game.css

@@ -174,7 +174,7 @@ score {
     display: flex;
 
     flex-direction: row;
-    flex-grow: 2;
+    flex-grow: 1;
 }
 
 #game-board {

client/public/scrabble/index.html

@@ -369,5 +369,6 @@
         <script src="board.js"></script>
         <script src="pieces.js"></script>
         <script src="game.js"></script>
+        <script src="events.js"></script>
     </body>
 </html>

client/public/scrabble/pieces.js

@@ -115,13 +115,11 @@ function piecePlaced(piece)
 function setupPieces() // also resets pieces
 {
     // TODO: this caused some weird html scaling bugs where the
-    // flexboxes wouldn't update, fix this
-
+    // flexboxes wouldn't update, fix this vvv
     // 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
 
-    // document.querySelector('#game-container').style.width = '600px';
-    // document.querySelector('#game-container').style.height = '700px';
+
     // needs to happen after resize
     updateBoardCoords();
     
@@ -140,26 +138,6 @@ function setupPieces() // also resets pieces
         index++;
     }
 
-    //     document.querySelector('#game-container').style.width = '700px';
-    //     document.querySelector('#game-container').style.height = '600px';
-        
-    //     updateBoardCoords();
-
-    //     let index = 0;
-    //     for (const piece of document.querySelectorAll('piece, nopiece'))
-    //     {   
-    //         if (piece.classList.contains('played-piece')) continue;
-            
-    //         const dx = (BOARD_X + BOARD_W) + 10;
-    //         const dy = (BOARD_Y) + (index * (PIECE_WIDTH + 5)) + 5;
-            
-    //         piece.style.left = `${dx}px`;
-    //         piece.style.top = `${dy}px`;
-
-    //         index++;
-    //     }
-    // }
-
     for (const piece of document.querySelectorAll('.played-piece'))
     {
         // cheating lol
@@ -168,7 +146,5 @@ function setupPieces() // also resets pieces
     }
 }
 
-window.onresize = setupPieces;
-
 setupPieces();