benkyd/scrabble-online
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

snapping????

Browse Source
This commit is contained in:
Ben Kyd
2021-04-02 00:07:19 +01:00
parent 2bbf2b4e9c
commit 779508239f
7 changed files with 79 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

0
client/public/rack1.mp3 → client/public/drawer1.mp3
View File

0
client/public/rack2.mp3 → client/public/drawer2.mp3
View File

0
client/public/rack3.mp3 → client/public/drawer3.mp3
View File

6
client/public/scrabble/dragable.js
View File

@@ -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)

2
client/public/scrabble/game.css
View File

@@ -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 {

10
client/public/scrabble/index.js
View File

@@ -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;
// });

94
client/public/scrabble/pieces.js
View File

@@ -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;