diff --git a/client/public/place1.mp3 b/client/public/place1.mp3 index 3e5686a..d799f04 100644 Binary files a/client/public/place1.mp3 and b/client/public/place1.mp3 differ diff --git a/client/public/place2.mp3 b/client/public/place2.mp3 index 5a2874d..4be7e3c 100644 Binary files a/client/public/place2.mp3 and b/client/public/place2.mp3 differ diff --git a/client/public/place3.mp3 b/client/public/place3.mp3 index 07aa1a9..6f47d33 100644 Binary files a/client/public/place3.mp3 and b/client/public/place3.mp3 differ diff --git a/client/public/rack1.mp3 b/client/public/rack1.mp3 index e0191c4..5c95b55 100644 Binary files a/client/public/rack1.mp3 and b/client/public/rack1.mp3 differ diff --git a/client/public/rack2.mp3 b/client/public/rack2.mp3 index 3e60e44..74da72b 100644 Binary files a/client/public/rack2.mp3 and b/client/public/rack2.mp3 differ diff --git a/client/public/rack3.mp3 b/client/public/rack3.mp3 index a4b0242..a762e31 100644 Binary files a/client/public/rack3.mp3 and b/client/public/rack3.mp3 differ diff --git a/client/public/scrabble/dragable.js b/client/public/scrabble/dragable.js index 90e0680..d179845 100644 --- a/client/public/scrabble/dragable.js +++ b/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'; + } + } diff --git a/client/public/scrabble/game.css b/client/public/scrabble/game.css index d363fbc..4f903ec 100644 --- a/client/public/scrabble/game.css +++ b/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; diff --git a/client/public/scrabble/index.html b/client/public/scrabble/index.html index 482c9fe..e98577b 100644 --- a/client/public/scrabble/index.html +++ b/client/public/scrabble/index.html @@ -377,16 +377,17 @@

- A4 - A4 - A4 - A4 - A4 - A4 - A4 + A1 + B4 + C3 + D2 + E1 + F4 + G2 + diff --git a/client/public/scrabble/index.js b/client/public/scrabble/index.js new file mode 100644 index 0000000..0cd08b3 --- /dev/null +++ b/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; +// }); +// }); diff --git a/client/public/scrabble/pieces.js b/client/public/scrabble/pieces.js index f1db467..02009a3 100644 --- a/client/public/scrabble/pieces.js +++ b/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;