board whaaaat

client/public/scrabble/dragable.js

@@ -4,10 +4,10 @@
 // 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('touchmove', mouseMove);
-document.querySelector('#game-container').addEventListener('mouseup',   mouseUp);
-document.querySelector('#game-container').addEventListener('touchend',  mouseUp);
+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));
@@ -21,20 +21,23 @@ function mouseDown(event, element)
 {
     event.preventDefault();
 
-    // 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;
+    // disalow picking up of played pieces
+    if (element.classList.contains('played-piece')) return;
 
+    piecePickedUp(element);
+    
     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;
+    
+    // move to the centre of the mouse to simulat pickup
+    selectedElement.style.top = event.clientY;
+    selectedElement.style.left = event.clientX;
 }
 
 function mouseMove(event)
@@ -55,5 +58,12 @@ function mouseMove(event)
 function mouseUp(event)
 {
     event.preventDefault();
-    selectedElement.pointerEvents = 'initial';
+
+    if (selectedElement.pointerEvents != 'initial')
+    {
+        piecePlaced(selectedElement);
+
+        selectedElement.pointerEvents = 'initial';
+    }
+
 }

client/public/scrabble/game.css

@@ -39,16 +39,19 @@ score {
     text-align: right;
     right: 5px;
 
-    font-size: 20px;
+    font-size: 50%;
 
     width: 100%;
     height: 100%;
 }
 
 .dragging-piece {
-
+    width: 40px;
+    height: 40px;
+    font-size: 25px
 }
 
+
 #game-container {
     border: 1px dotted black;
     

client/public/scrabble/index.html

@@ -377,16 +377,17 @@
 
     <p><p><p>
         
-    <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>
-    <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>1</score></piece>
+    <piece class="unselectable unplayed-piece">B<score>4</score></piece>
+    <piece class="unselectable unplayed-piece">C<score>3</score></piece>
+    <piece class="unselectable unplayed-piece">D<score>2</score></piece>
+    <piece class="unselectable unplayed-piece">E<score>1</score></piece>
+    <piece class="unselectable unplayed-piece">F<score>4</score></piece>
+    <piece class="unselectable unplayed-piece">G<score>2</score></piece>
 
     </div>
 
+    <script src="index.js"></script>
     <script src="dragable.js"></script>
     <script src="board.js"></script>
     <script src="pieces.js"></script>

client/public/scrabble/index.js

@@ -0,0 +1,28 @@
+// preload sounds
+
+// i don't care if the browser doesnt support
+// mp3, i'm not making this for compatability
+
+const BoardSounds = [
+    new Audio('../place1.mp3'), // pickup
+    new Audio('../place2.mp3'), // unused
+    new Audio('../place3.mp3') // place
+];
+
+const RackSounds = [
+    new Audio('../rack1.mp3'),
+    new Audio('../rack2.mp3'),
+    new Audio('../rack3.mp3')
+];
+
+// BoardSounds.forEach(sound => {
+//     sound.addEventListener('loadeddata', () => {
+//         sound.volume = 1;
+//     });
+// });
+
+// RackSounds.forEach(sound => {
+//     sound.addEventListener('loadeddata', () => {
+//         sound.volume = 1;
+//     });
+// });

client/public/scrabble/pieces.js

@@ -9,19 +9,70 @@ let BOARD_TL_Y = document.querySelector('#game-container').getBoundingClientRect
 const PIECE_WIDTH = 80;
 const PIECE_HEIGHT = 80;
 
-function piecePickedUp()
+function updateBoardCoord()
 {
-
+    BOARD_TL_X = document.querySelector('#game-container').getBoundingClientRect().left + window.scrollX;
+    BOARD_TL_Y = document.querySelector('#game-container').getBoundingClientRect().top + window.scrollY;
 }
 
-function piecePlaced()
+//https://stackoverflow.com/questions/11409895/whats-the-most-elegant-way-to-cap-a-number-to-a-segment
+Number.prototype.clamp = function(min, max) {
+    return Math.min(Math.max(this, min), max);
+};
+
+function isCoordInBoard(px, py, pw, ph)
 {
+    updateBoardCoord();
+
+    // to make it more readable
+    let x = BOARD_TL_X;
+    let y = BOARD_TL_Y;
+    let w = BOARD_WIDTH;
+    let h = BOARD_HEIGHT;
+
+    console.log(x,y,w,h);
+
+    // cheeky bit of AABB
+    if (x < px + pw &&
+        x + w > px &&
+        y < py + ph &&
+        y + h > py) return true;
+    return false;
+}
+
+
+function piecePickedUp(piece)
+{
+    BoardSounds[2].play();
+
+
+    piece.classList.add('dragging-piece');
+}
+
+function piecePlaced(piece)
+{    
     
+    // snap to board if in box
+    if (isCoordInBoard(piece.offsetLeft, piece.offsetTop, 40, 40))
+    {
+        BoardSounds[0].play();
+        
+        // snap to grid
+        
+
+        piece.classList.remove('unplayed-piece');
+        piece.classList.add('played-piece');
+    } else
+    {
+        piece.classList.remove('dragging-piece');
+
+        RackSounds[Math.floor(Math.random() * 3)].play();
+        setupPieces();
+    }
 }
 
 
-
-function setupPieces() 
+function setupPieces() // also resets pieces
 {
     // 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
@@ -30,12 +81,13 @@ function setupPieces()
         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;
+        updateBoardCoord();
         
         let index = 0;
         for (const piece of document.querySelectorAll('piece, nopiece'))
-        {            
+        {
+            if (piece.classList.contains('played-piece')) continue;
+
             // i feel dirty hardcoding this much
             const dx = (BOARD_TL_X) + (index * (PIECE_WIDTH + 5)) + 5;
             const dy = (BOARD_TL_Y + BOARD_HEIGHT) + 10;
@@ -50,12 +102,13 @@ function setupPieces()
         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;
+        updateBoardCoord();
 
         let index = 0;
         for (const piece of document.querySelectorAll('piece, nopiece'))
-        {            
+        {   
+            if (piece.classList.contains('played-piece')) continue;
+            
             const dx = (BOARD_TL_X + BOARD_WIDTH) + 10;
             const dy = (BOARD_TL_Y) + (index * (PIECE_WIDTH + 5)) + 5;