diff --git a/client/public/game/lobby.css b/client/public/game/lobby.css index a72aa62..9d8a984 100644 --- a/client/public/game/lobby.css +++ b/client/public/game/lobby.css @@ -3,9 +3,7 @@ textarea { } #log-console { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; + box-sizing: border-box; width: 100%; position: fixed; bottom: 20pt; diff --git a/client/public/main.css b/client/public/main.css index 56ba259..0bddf7e 100644 --- a/client/public/main.css +++ b/client/public/main.css @@ -10,11 +10,6 @@ body { } .unselectable { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; user-select: none; } diff --git a/client/public/scrabble/board.js b/client/public/scrabble/board.js index 7bf17c3..e389791 100644 --- a/client/public/scrabble/board.js +++ b/client/public/scrabble/board.js @@ -58,6 +58,7 @@ window.onload = e => { const boardLocation = document.querySelector(`#row-${y}`).querySelector(`#col-${x}`); boardLocation.classList.add(BoardLookup[BoardLocations[location]]); + boardLocation.classList.add('unselectable'); let localeThing = BoardLocations[location]; // hacky but it works @@ -81,6 +82,7 @@ window.onload = e => { const boardLocation = document.querySelector(`#row-${y}`).querySelector(`#col-${x}`); boardLocation.classList.add(BoardLookup[BoardLocations[location]]); + boardLocation.classList.add('unselectable'); let localeThing = BoardLocations[location]; if (localStorage.getItem('locale') === "es" || localStorage.getItem('locale') === "pt") diff --git a/client/public/scrabble/dragable.js b/client/public/scrabble/dragable.js index 9e0d673..c76fd55 100644 --- a/client/public/scrabble/dragable.js +++ b/client/public/scrabble/dragable.js @@ -81,9 +81,11 @@ function mouseUp(event) { // if (magnitude(selectedElement.velocity) <= 2) // { - piecePlaced(selectedElement); + if (piecePlaced(selectedElement)) + { + selectedElement.pointerEvents = 'initial'; + } - selectedElement.pointerEvents = 'initial'; // } // else // { diff --git a/client/public/scrabble/game.js b/client/public/scrabble/game.js index fd40910..76d29db 100644 --- a/client/public/scrabble/game.js +++ b/client/public/scrabble/game.js @@ -1,4 +1,17 @@ +let turn = 0; // 0 = player 1 = scrabble + +function computeTurn() +{ + if (!isSingleplayer) return; + + +} +function initGame() +{ + +} +initGame(); diff --git a/client/public/scrabble/pieces.js b/client/public/scrabble/pieces.js index d63e23f..1f5bb56 100644 --- a/client/public/scrabble/pieces.js +++ b/client/public/scrabble/pieces.js @@ -10,6 +10,8 @@ let BOARD_Y = document.querySelector('#game-container').getBoundingClientRect(). const PIECE_WIDTH = 80; const PIECE_HEIGHT = 80; +let isHoldingPiece = false; + //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); @@ -69,32 +71,76 @@ function placePieceOnBoard(piece, x, y) piece.style.top = `${y}px`; } +function getPieceFromBoard(x, y) +{ + for (const piece of document.querySelectorAll('piece')) + { + if (!piece.dataset.coords) continue; + let coords = JSON.parse(piece.dataset.coords); + if (coords.x === x && coords.y === y) + return piece; + } + return false; +} + +// staged pieces are played but the turn is not applied +function getAllStagedPieces() +{ + let ret = []; + for (const piece of document.querySelectorAll('.staged-piece')) + { + ret.push(piece); + } + return ret; +} + +function getAllPiecesOnBoard() +{ + let ret = []; + for (const piece of document.querySelectorAll('piece')) + { + if (piece.dataset.coords) + { + ret.push(piece); + } + } + return ret; +} + // events from drag & drop api function piecePickedUp(piece) { if (!piece) return; + if (isHoldingPiece) return; + + delete piece.dataset.coords; BoardSounds[2].play(); piece.classList.add('dragging-piece'); + isHoldingPiece = true; } // events from drag & drop api function piecePlaced(piece) { if (!piece) return; + if (!isHoldingPiece) return; // snap to board if in box if (isCoordInBoard(piece.offsetLeft, piece.offsetTop, 40, 40)) { - BoardSounds[0].play(); updateBoardCoords(); - let coords = boardCoordsFromScreenSpace(piece.offsetLeft + 20, piece.offsetTop + 20); + + if (getPieceFromBoard(coords.x, coords.y)) return false; + + BoardSounds[0].play(); + placePieceOnBoard(piece, coords.x, coords.y); piece.classList.remove('unplayed-piece'); - piece.classList.add('played-piece'); + piece.classList.add('staged-piece'); piece.dataset.coords = JSON.stringify(coords); setupPieces(); @@ -102,13 +148,16 @@ function piecePlaced(piece) { DrawerSounds[Math.floor(Math.random() * 3)].play(); - piece.classList.remove('played-piece'); + piece.classList.remove('staged-piece'); piece.classList.remove('dragging-piece'); piece.classList.add('unplayed-piece'); delete piece.dataset.coords; setupPieces(); } + + isHoldingPiece = false; + return true; } @@ -126,7 +175,7 @@ function setupPieces() // also resets pieces let index = 0; for (const piece of document.querySelectorAll('piece, nopiece')) { - if (piece.classList.contains('played-piece')) continue; + if (piece.classList.contains('played-piece') || piece.classList.contains('staged-piece')) continue; // i feel dirty hardcoding this much const dx = (BOARD_X) + (index * (PIECE_WIDTH + 5)) + 5; @@ -138,10 +187,11 @@ function setupPieces() // also resets pieces index++; } - for (const piece of document.querySelectorAll('.played-piece')) + for (const piece of document.querySelectorAll('.played-piece, .staged-piece')) { // cheating lol - coords = JSON.parse(piece.dataset.coords); + if (!piece.dataset.coords) continue; + let coords = JSON.parse(piece.dataset.coords); placePieceOnBoard(piece, coords.x, coords.y); } }