From 779508239f8093db26307eec858a5c9852cf36f8 Mon Sep 17 00:00:00 2001 From: Ben Kyd Date: Fri, 2 Apr 2021 00:07:19 +0100 Subject: [PATCH] snapping???? --- client/public/{rack1.mp3 => drawer1.mp3} | Bin client/public/{rack2.mp3 => drawer2.mp3} | Bin client/public/{rack3.mp3 => drawer3.mp3} | Bin client/public/scrabble/dragable.js | 6 +- client/public/scrabble/game.css | 2 +- client/public/scrabble/index.js | 10 +-- client/public/scrabble/pieces.js | 94 +++++++++++++++++------ 7 files changed, 79 insertions(+), 33 deletions(-) rename client/public/{rack1.mp3 => drawer1.mp3} (100%) rename client/public/{rack2.mp3 => drawer2.mp3} (100%) rename client/public/{rack3.mp3 => drawer3.mp3} (100%) diff --git a/client/public/rack1.mp3 b/client/public/drawer1.mp3 similarity index 100% rename from client/public/rack1.mp3 rename to client/public/drawer1.mp3 diff --git a/client/public/rack2.mp3 b/client/public/drawer2.mp3 similarity index 100% rename from client/public/rack2.mp3 rename to client/public/drawer2.mp3 diff --git a/client/public/rack3.mp3 b/client/public/drawer3.mp3 similarity index 100% rename from client/public/rack3.mp3 rename to client/public/drawer3.mp3 diff --git a/client/public/scrabble/dragable.js b/client/public/scrabble/dragable.js index d179845..6d3edc6 100644 --- a/client/public/scrabble/dragable.js +++ b/client/public/scrabble/dragable.js @@ -22,7 +22,7 @@ function mouseDown(event, element) event.preventDefault(); // disalow picking up of played pieces - if (element.classList.contains('played-piece')) return; + // if (element.classList.contains('played-piece')) return; piecePickedUp(element); @@ -36,8 +36,8 @@ function mouseDown(event, element) selectedElement = element; // move to the centre of the mouse to simulat pickup - selectedElement.style.top = event.clientY; - selectedElement.style.left = event.clientX; + // selectedElement.style.top = event.clientY; + // selectedElement.style.left = event.clientX; } function mouseMove(event) diff --git a/client/public/scrabble/game.css b/client/public/scrabble/game.css index 4f903ec..1cdd23e 100644 --- a/client/public/scrabble/game.css +++ b/client/public/scrabble/game.css @@ -45,6 +45,7 @@ score { height: 100%; } +/*for small pieces - played or not*/ .dragging-piece { width: 40px; height: 40px; @@ -63,7 +64,6 @@ score { width: 700px; height: 700px; - } #game-board { diff --git a/client/public/scrabble/index.js b/client/public/scrabble/index.js index 0cd08b3..a866379 100644 --- a/client/public/scrabble/index.js +++ b/client/public/scrabble/index.js @@ -9,10 +9,10 @@ const BoardSounds = [ new Audio('../place3.mp3') // place ]; -const RackSounds = [ - new Audio('../rack1.mp3'), - new Audio('../rack2.mp3'), - new Audio('../rack3.mp3') +const DrawerSounds = [ + new Audio('../drawer1.mp3'), + new Audio('../drawer2.mp3'), + new Audio('../drawer3.mp3') ]; // BoardSounds.forEach(sound => { @@ -21,7 +21,7 @@ const RackSounds = [ // }); // }); -// RackSounds.forEach(sound => { +// DrawerSounds.forEach(sound => { // sound.addEventListener('loadeddata', () => { // sound.volume = 1; // }); diff --git a/client/public/scrabble/pieces.js b/client/public/scrabble/pieces.js index 02009a3..f588471 100644 --- a/client/public/scrabble/pieces.js +++ b/client/public/scrabble/pieces.js @@ -1,36 +1,35 @@ -const BOARD_WIDTH = 600; -const BOARD_HEIGHT = 600; +const BOARD_W = 600; +const BOARD_H = 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; +let BOARD_X = document.querySelector('#game-container').getBoundingClientRect().left + window.scrollX; +let BOARD_Y = document.querySelector('#game-container').getBoundingClientRect().top + window.scrollY; +// only when in drawer const PIECE_WIDTH = 80; const PIECE_HEIGHT = 80; -function updateBoardCoord() -{ - BOARD_TL_X = document.querySelector('#game-container').getBoundingClientRect().left + window.scrollX; - BOARD_TL_Y = document.querySelector('#game-container').getBoundingClientRect().top + window.scrollY; -} - //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 updateBoardCoord() +{ + BOARD_X = document.querySelector('#game-container').getBoundingClientRect().left + window.scrollX; + BOARD_Y = document.querySelector('#game-container').getBoundingClientRect().top + window.scrollY; +} + 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); + let x = BOARD_X; + let y = BOARD_Y; + let w = BOARD_W; + let h = BOARD_H; // cheeky bit of AABB if (x < px + pw && @@ -40,6 +39,44 @@ function isCoordInBoard(px, py, pw, ph) return false; } +function placePieceSnapped(piece) +{ + updateBoardCoord(); + + // snap to grid + let x = BOARD_X - piece.offsetLeft + 20; // get center of piece + let y = BOARD_Y - piece.offsetTop + 20; + + console.log(x,y); + + // make 1-15 so can work out what tile it's in + x /= (BOARD_W / 15); + y /= (BOARD_H / 15); + + console.log(x,y); + + + x.clamp(1, 15); + y.clamp(1, 15); + + console.log(x,y); + + + y = Math.floor(y); + x = Math.floor(x); + + console.log(x,y); + + x = BOARD_X - (x * 40) + 1; // back to px space + x = BOARD_Y - (y * 40) + 1; + + console.log(x,y); + console.log(""); + // undo offset + piece.style.left = `${x}px`; + piece.style.top = `${y}px`; +} + function piecePickedUp(piece) { @@ -56,17 +93,21 @@ function piecePlaced(piece) if (isCoordInBoard(piece.offsetLeft, piece.offsetTop, 40, 40)) { BoardSounds[0].play(); - - // snap to grid - + updateBoardCoord(); + + placePieceSnapped(piece); piece.classList.remove('unplayed-piece'); piece.classList.add('played-piece'); + setupPieces(); } else { + DrawerSounds[Math.floor(Math.random() * 3)].play(); + + piece.classList.add('unplayed-piece'); + piece.classList.remove('played-piece'); piece.classList.remove('dragging-piece'); - RackSounds[Math.floor(Math.random() * 3)].play(); setupPieces(); } } @@ -89,8 +130,8 @@ function setupPieces() // also resets pieces 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; + const dx = (BOARD_X) + (index * (PIECE_WIDTH + 5)) + 5; + const dy = (BOARD_Y + BOARD_H) + 10; piece.style.left = `${dx}px`; piece.style.top = `${dy}px`; @@ -109,8 +150,8 @@ function setupPieces() // also resets pieces { 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; + 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`; @@ -118,6 +159,11 @@ function setupPieces() // also resets pieces index++; } } + + for (const piece of document.querySelectorAll('.played-piece')) + { + placePieceSnapped(piece); + } } window.onresize = setupPieces;