diff --git a/client/public/scrabble/dragable.js b/client/public/scrabble/dragable.js index d7d0922..9e0d673 100644 --- a/client/public/scrabble/dragable.js +++ b/client/public/scrabble/dragable.js @@ -4,16 +4,6 @@ // 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.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)); - element.addEventListener('touchstart', e => mouseDown(e, element)); -}); - let selectedElement = {}; let lastCoords = { x: 0, y: 0 }; diff --git a/client/public/scrabble/events.js b/client/public/scrabble/events.js new file mode 100644 index 0000000..935175a --- /dev/null +++ b/client/public/scrabble/events.js @@ -0,0 +1,37 @@ +const gameinfoRight = document.querySelector('#game-info-right'); +const gameinfoLeft = document.querySelector('#game-info-left'); +const gameinfoCompact = document.querySelector('#game-info-compact'); + + + +function windowResize() +{ + if (window.innerWidth < 1200) + { + gameinfoRight.style.display = 'none'; + gameinfoLeft.style.display = 'none'; + gameinfoCompact.style.display = 'block'; + } else + { + gameinfoRight.style.display = 'block'; + gameinfoLeft.style.display = 'block'; + gameinfoCompact.style.display = 'none'; + } + + setupPieces(); +} +windowResize(); + + +window.onresize = windowResize; + +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)); + element.addEventListener('touchstart', e => mouseDown(e, element)); +}); + diff --git a/client/public/scrabble/game.css b/client/public/scrabble/game.css index 3f2ca08..0180290 100644 --- a/client/public/scrabble/game.css +++ b/client/public/scrabble/game.css @@ -174,7 +174,7 @@ score { display: flex; flex-direction: row; - flex-grow: 2; + flex-grow: 1; } #game-board { diff --git a/client/public/scrabble/index.html b/client/public/scrabble/index.html index 249da66..27b7b16 100644 --- a/client/public/scrabble/index.html +++ b/client/public/scrabble/index.html @@ -369,5 +369,6 @@ + \ No newline at end of file diff --git a/client/public/scrabble/pieces.js b/client/public/scrabble/pieces.js index f4f8721..d63e23f 100644 --- a/client/public/scrabble/pieces.js +++ b/client/public/scrabble/pieces.js @@ -115,13 +115,11 @@ function piecePlaced(piece) function setupPieces() // also resets pieces { // TODO: this caused some weird html scaling bugs where the - // flexboxes wouldn't update, fix this - + // flexboxes wouldn't update, fix this vvv // 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 - // document.querySelector('#game-container').style.width = '600px'; - // document.querySelector('#game-container').style.height = '700px'; + // needs to happen after resize updateBoardCoords(); @@ -140,26 +138,6 @@ function setupPieces() // also resets pieces index++; } - // document.querySelector('#game-container').style.width = '700px'; - // document.querySelector('#game-container').style.height = '600px'; - - // updateBoardCoords(); - - // let index = 0; - // for (const piece of document.querySelectorAll('piece, nopiece')) - // { - // if (piece.classList.contains('played-piece')) continue; - - // 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`; - - // index++; - // } - // } - for (const piece of document.querySelectorAll('.played-piece')) { // cheating lol @@ -168,7 +146,5 @@ function setupPieces() // also resets pieces } } -window.onresize = setupPieces; - setupPieces(); \ No newline at end of file