diff --git a/client/public/scrabble/game.css b/client/public/scrabble/game.css index a033531..b2a5fea 100644 --- a/client/public/scrabble/game.css +++ b/client/public/scrabble/game.css @@ -69,10 +69,27 @@ score { flex-basis: 25%; flex-grow: 1; order: -1; + + /*children*/ + flex-direction: column; height: 600px; } +#logo { + border: 1px dotted black; + + width: 100%; +} + +#game-chat { + border: 1px dotted black; + box-sizing: border-box; + resize: none; + width: 100%; + flex-grow: 5; +} + #game-info-right { position: relative; border: 1px dotted black; diff --git a/client/public/scrabble/index.html b/client/public/scrabble/index.html index 132e58e..8fb5e0e 100644 --- a/client/public/scrabble/index.html +++ b/client/public/scrabble/index.html @@ -11,443 +11,349 @@ Scrabble! - -
+ -
+
-
- -
- -
- - - - -
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
-
- - -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- - -
- - -
- -

- - A1 - B4 - C3 - D2 - E1 - F4 - G2 - -

- -
-
-
-
Jerry
- Score:
12
+
+ -
-
Computer
- Score:
102
+
+ +
+ +
-
- - - +
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ +
+
+ + A1 + B4 + C3 + D2 + E1 + F4 + G2
-
-
Jerry played OXYPHENBUTAZONE for 40 points
-
CPU played CUM for 40 points
-
Jerry played CUM for 40 points
-
CPU played CUM for 40 points
-
CPU played CUM for 40 points
-
CPU played CUM for 40 points
-
CPU played CUM for 40 points
-
CPU played CUM for 40 points
-
CPU played CUM for 40 points
-
CPU played CUM for 40 points
-
CPU played CUM for 40 points
-
CPU played CUM for 40 points
-
CPU played CUM for 40 points
-
CPU played CUM for 40 points
-
CPU played CUM for 40 points
-
CPU played CUM for 40 points
-
CPU played CUM for 40 points
-
CPU played CUM for 40 points
-
CPU played CUM for 40 points
-
CPU played CUM for 40 points
-
CPU played CUM for 40 points
-
CPU played CUM for 40 points
+
+
+
+
Jerry
+ Score:
12
+
+
+
Computer
+ Score:
102
+
+
+
+ + + +
+
+
Jerry played OXYPHENBUTAZONE for 40 points
+
CPU played CUM for 40 points
+
Jerry played CUM for 40 points
+
CPU played CUM for 40 points
+
CPU played CUM for 40 points
+
CPU played CUM for 40 points
+
CPU played CUM for 40 points
+
CPU played CUM for 40 points
+
CPU played CUM for 40 points
+
CPU played CUM for 40 points
+
CPU played CUM for 40 points
+
CPU played CUM for 40 points
+
CPU played CUM for 40 points
+
CPU played CUM for 40 points
+
CPU played CUM for 40 points
+
CPU played CUM for 40 points
+
CPU played CUM for 40 points
+
CPU played CUM for 40 points
+
CPU played CUM for 40 points
+
CPU played CUM for 40 points
+
CPU played CUM for 40 points
+
CPU played CUM for 40 points
+
-
+ -
+
+ +
- - - - - - + + + + + + \ No newline at end of file diff --git a/client/public/scrabble/pieces.js b/client/public/scrabble/pieces.js index a254309..515136c 100644 --- a/client/public/scrabble/pieces.js +++ b/client/public/scrabble/pieces.js @@ -114,51 +114,52 @@ function piecePlaced(piece) function setupPieces() // also resets pieces { + // TODO: this caused some weird html scaling bugs where the + // flexboxes wouldn't update, fix this + // 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 - if (window.innerHeight > 700) + + document.querySelector('#game-container').style.width = '600px'; + document.querySelector('#game-container').style.height = '700px'; + // needs to happen after resize + updateBoardCoords(); + + let index = 0; + for (const piece of document.querySelectorAll('piece, nopiece')) { - document.querySelector('#game-container').style.width = '600px'; - document.querySelector('#game-container').style.height = '700px'; - // needs to happen after resize - updateBoardCoords(); + if (piece.classList.contains('played-piece')) continue; + + // i feel dirty hardcoding this much + const dx = (BOARD_X) + (index * (PIECE_WIDTH + 5)) + 5; + const dy = (BOARD_Y + BOARD_H) + 10; - let index = 0; - for (const piece of document.querySelectorAll('piece, nopiece')) - { - if (piece.classList.contains('played-piece')) continue; + piece.style.left = `${dx}px`; + piece.style.top = `${dy}px`; - // i feel dirty hardcoding this much - 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`; - - index++; - } - } else - { - 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++; - } + 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