added resources

README.md

@@ -4,6 +4,8 @@ SEE BELOW FOR CONFIGURATION GUIDE
 
 ## Product Description
 
+https://scrabble.hasbro.com/en-us/rules
+https://www.zapsplat.com/?s=scrabble
 
 ## Configuration Guide
 

client/public/index.html

@@ -18,6 +18,10 @@
         <div id="client-id">Awaiting ClientID</div>
         <div id="connection-state"></div>
 
+        <p><p>
+
+        <input type="button" value="play singleplayer" onclick="playSingleplayer()">
+
         <script src="index.js"></script>
     </body>
 </html>

client/public/index.js

@@ -7,6 +7,10 @@ const ConnectionState = document.querySelector('#connection-state');
 
 UsernameForm.addEventListener('submit', onUsernameSubmit);
 
+function playSingleplayer()
+{
+    document.location.href += 'scrabble';
+}
 
 // User submits their desired username
 async function onUsernameSubmit(e)
@@ -49,6 +53,6 @@ async function onUsernameSubmit(e)
         sessionStorage.setItem('user', JSON.stringify(body.login.user));
         console.log(sessionStorage.user)
         ClientID.innerHTML = `ClientID: ${JSON.parse(sessionStorage.user).uid}`;
-        document.location.href = document.location.href + '/game';
+        document.location.href += 'game';
     }
 }

client/public/scrabble/dragable.js

@@ -1,15 +1,14 @@
 // I decided not to use the drag and drop API
 // purely because its very ugly
 
+// 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.querySelector('#game-container').addEventListener('mousemove', mouseMove);
 document.querySelector('#game-container').addEventListener('mouseup',   mouseUp);
 
-
 document.querySelectorAll('piece').forEach(element => {
     element.addEventListener('mousedown', e => mouseDown(e, element));
-    // element.addEventListener('mousemove', e => mouseMove(e, element));
-    // element.addEventListener('mouseup', e => mouseUp(e, element));
 });
 
 let state = {dx: 0, dy: 0};
@@ -19,9 +18,14 @@ 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.pointerEvents = 'none';
     selectedElement = element;
 }

client/public/scrabble/game.css

@@ -1,6 +1,14 @@
 
+/**
+  * 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 
+  * technically difficult to resize dynamically and have all the elements
+  * needed, visible at the times they needed to be visible
+  */
+
 piece {
     display: flex;
+    position: absolute;
 
     cursor: move;
     background: radial-gradient(circle, rgba(255,214,45,1) 41%, rgba(255,179,0,1) 84%);
@@ -13,22 +21,33 @@ piece {
 
     width: 80px;
     height: 80px;
+}
 
+nopiece {
+    display: flex;
     position: absolute;
+
+    background: none;
+
+    width: 80px;
+    height: 80px;
 }
 
 score {
     display: inline-block;
+    position: absolute;
 
     text-align: right;
     right: 5px;
 
-    width: 100%;
-    height: 100%;
-
     font-size: 20px;
 
-    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+.dragging-piece {
+
 }
 
 #game-container {
@@ -40,12 +59,14 @@ score {
     flex-wrap: wrap;
     margin: auto;
     
-    width: 600px;
+    width: 700px;
     height: 700px;
 
 }
 
 #game-board {
+    outline: 2px inset black;
+
     display: table;
     table-layout: fixed;
 
@@ -54,7 +75,6 @@ score {
     height: 600px;
 
     text-align: center;
-    font-size: 3vw; /* roughly 15 / table width */
 }
 
 .game-board-row {
@@ -63,12 +83,14 @@ score {
 }
 
 .game-board-cell {
+    outline: 1px inset black;
+
     display: table-cell;
 
     width: 40px;
     height: 40px;
 
-    font-size: 15px; /* roughly 15 / table width */
+    font-size: 17px;
     vertical-align: middle;
     
     background: radial-gradient(circle, rgba(255,255,255,1) 38%, rgba(244,244,244,1) 94%);

client/public/scrabble/index.html

@@ -6,19 +6,11 @@
         <meta name="viewport" content="width=device-width, initial-scale=1.0">
 
         <link rel="stylesheet" href="./game.css">
-        <link rel="stylesheet" href="./public/main.css">
+        <link rel="stylesheet" href="../main.css">
 
         <title>Scrabble!</title>
     </head>
     <body>
-        
-<!--
-
-    Tile's have classes
-    Tile's go in table boxes
-
-
--->
 
     <div id="game-container">
         
@@ -385,18 +377,18 @@
 
     <p><p><p>
         
-    <piece class="unselectable">A<score>4</score></piece>
-    <piece class="unselectable">A<score>4</score></piece>
-    <piece class="unselectable">A<score>4</score></piece>
-    <piece class="unselectable">A<score>4</score></piece>
-    <piece class="unselectable">A<score>4</score></piece>
-    <piece class="unselectable">A<score>4</score></piece>
-    <piece class="unselectable">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>
+    <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>
 
     </div>
 
     <script src="dragable.js"></script>
     <script src="board.js"></script>
-
+    <script src="pieces.js"></script>
     </body>
 </html>

client/public/scrabble/pieces.js

@@ -0,0 +1,57 @@
+
+const BOARD_WIDTH = 600;
+const BOARD_HEIGHT = 600;
+
+// these change with resize
+let BOARD_TL_X = document.querySelector('#game-container').getBoundingClientRect().left + window.scrollX;
+let BOARD_TL_Y = document.querySelector('#game-container').getBoundingClientRect().top + window.scrollY;
+
+const PIECE_WIDTH = 80;
+const PIECE_HEIGHT = 80;
+
+
+class Piece {
+    
+}
+
+
+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)
+    {
+        let index = 0;
+        for (const piece of document.querySelectorAll('piece, nopiece'))
+        {            
+            // i feel dirty hardcoding this much
+            const dx = (BOARD_TL_X) + (index * (PIECE_WIDTH + 5)) + 5;
+            const dy = (BOARD_TL_Y + BOARD_HEIGHT) + 10;
+            
+            piece.style.left = `${dx}px`;
+            piece.style.top = `${dy}px`;
+
+            index++;
+        }
+    } else
+    {
+        let index = 0;
+        for (const piece of document.querySelectorAll('piece, nopiece'))
+        {            
+            const dx = (BOARD_TL_X + BOARD_WIDTH) + 10;
+            const dy = (BOARD_TL_Y) + (index * (PIECE_WIDTH + 5)) + 5;
+            
+            piece.style.left = `${dx}px`;
+            piece.style.top = `${dy}px`;
+
+            index++;
+        }
+    }
+}
+
+window.onresize = setupPieces;
+
+setupPieces();
+