diff --git a/README.md b/README.md index 15f6084..19136a2 100644 --- a/README.md +++ b/README.md @@ -4,6 +4,8 @@ SEE BELOW FOR CONFIGURATION GUIDE ## Product Description +https://scrabble.hasbro.com/en-us/rules +https://www.zapsplat.com/?s=scrabble ## Configuration Guide diff --git a/client/public/game_scrabble_game_letter_tile_put_in_plastic_rack_1.mp3 b/client/public/game_scrabble_game_letter_tile_put_in_plastic_rack_1.mp3 new file mode 100644 index 0000000..e0191c4 Binary files /dev/null and b/client/public/game_scrabble_game_letter_tile_put_in_plastic_rack_1.mp3 differ diff --git a/client/public/game_scrabble_game_letter_tile_put_in_plastic_rack_2.mp3 b/client/public/game_scrabble_game_letter_tile_put_in_plastic_rack_2.mp3 new file mode 100644 index 0000000..3e60e44 Binary files /dev/null and b/client/public/game_scrabble_game_letter_tile_put_in_plastic_rack_2.mp3 differ diff --git a/client/public/game_scrabble_game_letter_tile_put_in_plastic_rack_3.mp3 b/client/public/game_scrabble_game_letter_tile_put_in_plastic_rack_3.mp3 new file mode 100644 index 0000000..a4b0242 Binary files /dev/null and b/client/public/game_scrabble_game_letter_tile_put_in_plastic_rack_3.mp3 differ diff --git a/client/public/game_scrabble_game_letter_tile_put_on_board_1.mp3 b/client/public/game_scrabble_game_letter_tile_put_on_board_1.mp3 new file mode 100644 index 0000000..3e5686a Binary files /dev/null and b/client/public/game_scrabble_game_letter_tile_put_on_board_1.mp3 differ diff --git a/client/public/game_scrabble_game_letter_tile_put_on_board_2.mp3 b/client/public/game_scrabble_game_letter_tile_put_on_board_2.mp3 new file mode 100644 index 0000000..5a2874d Binary files /dev/null and b/client/public/game_scrabble_game_letter_tile_put_on_board_2.mp3 differ diff --git a/client/public/game_scrabble_game_letter_tile_put_on_board_3.mp3 b/client/public/game_scrabble_game_letter_tile_put_on_board_3.mp3 new file mode 100644 index 0000000..07aa1a9 Binary files /dev/null and b/client/public/game_scrabble_game_letter_tile_put_on_board_3.mp3 differ diff --git a/client/public/index.html b/client/public/index.html index aa21eac..9ec2472 100644 --- a/client/public/index.html +++ b/client/public/index.html @@ -18,6 +18,10 @@
Awaiting ClientID
+

+ + + \ No newline at end of file diff --git a/client/public/index.js b/client/public/index.js index 9dc858d..70b6833 100644 --- a/client/public/index.js +++ b/client/public/index.js @@ -7,6 +7,10 @@ const ConnectionState = document.querySelector('#connection-state'); UsernameForm.addEventListener('submit', onUsernameSubmit); +function playSingleplayer() +{ + document.location.href += 'scrabble'; +} // User submits their desired username async function onUsernameSubmit(e) @@ -49,6 +53,6 @@ async function onUsernameSubmit(e) sessionStorage.setItem('user', JSON.stringify(body.login.user)); console.log(sessionStorage.user) ClientID.innerHTML = `ClientID: ${JSON.parse(sessionStorage.user).uid}`; - document.location.href = document.location.href + '/game'; + document.location.href += 'game'; } } diff --git a/client/board.js b/client/public/scrabble/board.js similarity index 100% rename from client/board.js rename to client/public/scrabble/board.js diff --git a/client/dragable.js b/client/public/scrabble/dragable.js similarity index 80% rename from client/dragable.js rename to client/public/scrabble/dragable.js index 0183efd..b4197ed 100644 --- a/client/dragable.js +++ b/client/public/scrabble/dragable.js @@ -1,15 +1,14 @@ // I decided not to use the drag and drop API // purely because its very ugly +// 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('mouseup', mouseUp); - document.querySelectorAll('piece').forEach(element => { element.addEventListener('mousedown', e => mouseDown(e, element)); - // element.addEventListener('mousemove', e => mouseMove(e, element)); - // element.addEventListener('mouseup', e => mouseUp(e, element)); }); let state = {dx: 0, dy: 0}; @@ -19,9 +18,14 @@ function mouseDown(event, element) { event.preventDefault(); + // TODO: allow drag api (on mobile) state.dx = Math.abs(element.offsetLeft - event.clientX); state.dy = Math.abs(element.offsetTop - event.clientY); + + // move to the centre of the mouse to simulat pickup + // can also play a sound + element.pointerEvents = 'none'; selectedElement = element; } diff --git a/client/game.css b/client/public/scrabble/game.css similarity index 75% rename from client/game.css rename to client/public/scrabble/game.css index 350f8fa..11a9c34 100644 --- a/client/game.css +++ b/client/public/scrabble/game.css @@ -1,6 +1,14 @@ +/** + * This would be responsive, ie, resizing with the size of the window + * but decided it against the scope of the project as it would be + * technically difficult to resize dynamically and have all the elements + * needed, visible at the times they needed to be visible + */ + piece { display: flex; + position: absolute; cursor: move; background: radial-gradient(circle, rgba(255,214,45,1) 41%, rgba(255,179,0,1) 84%); @@ -13,22 +21,33 @@ piece { width: 80px; height: 80px; +} +nopiece { + display: flex; position: absolute; + + background: none; + + width: 80px; + height: 80px; } score { display: inline-block; + position: absolute; text-align: right; right: 5px; - width: 100%; - height: 100%; - font-size: 20px; - position: absolute; + width: 100%; + height: 100%; +} + +.dragging-piece { + } #game-container { @@ -40,12 +59,14 @@ score { flex-wrap: wrap; margin: auto; - width: 600px; + width: 700px; height: 700px; } #game-board { + outline: 2px inset black; + display: table; table-layout: fixed; @@ -54,7 +75,6 @@ score { height: 600px; text-align: center; - font-size: 3vw; /* roughly 15 / table width */ } .game-board-row { @@ -63,12 +83,14 @@ score { } .game-board-cell { + outline: 1px inset black; + display: table-cell; width: 40px; height: 40px; - font-size: 15px; /* roughly 15 / table width */ + font-size: 17px; vertical-align: middle; background: radial-gradient(circle, rgba(255,255,255,1) 38%, rgba(244,244,244,1) 94%); diff --git a/client/game.html b/client/public/scrabble/index.html similarity index 97% rename from client/game.html rename to client/public/scrabble/index.html index 5339be5..7ce7c60 100644 --- a/client/game.html +++ b/client/public/scrabble/index.html @@ -6,19 +6,11 @@ - + Scrabble! - -

@@ -385,18 +377,18 @@

- A4 - A4 - A4 - A4 - A4 - A4 - A4 + A4 + A4 + + A4 + A4 + A4 + A4

- + \ No newline at end of file diff --git a/client/public/scrabble/pieces.js b/client/public/scrabble/pieces.js new file mode 100644 index 0000000..1f4f594 --- /dev/null +++ b/client/public/scrabble/pieces.js @@ -0,0 +1,57 @@ + +const BOARD_WIDTH = 600; +const BOARD_HEIGHT = 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; + +const PIECE_WIDTH = 80; +const PIECE_HEIGHT = 80; + + +class Piece { + +} + + +function setupPieces() +{ + BOARD_TL_X = document.querySelector('#game-container').getBoundingClientRect().left + window.scrollX; + BOARD_TL_Y = document.querySelector('#game-container').getBoundingClientRect().top + window.scrollY; + // 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) + { + let index = 0; + for (const piece of document.querySelectorAll('piece, nopiece')) + { + // i feel dirty hardcoding this much + const dx = (BOARD_TL_X) + (index * (PIECE_WIDTH + 5)) + 5; + const dy = (BOARD_TL_Y + BOARD_HEIGHT) + 10; + + piece.style.left = `${dx}px`; + piece.style.top = `${dy}px`; + + index++; + } + } else + { + let index = 0; + for (const piece of document.querySelectorAll('piece, nopiece')) + { + const dx = (BOARD_TL_X + BOARD_WIDTH) + 10; + const dy = (BOARD_TL_Y) + (index * (PIECE_WIDTH + 5)) + 5; + + piece.style.left = `${dx}px`; + piece.style.top = `${dy}px`; + + index++; + } + } +} + +window.onresize = setupPieces; + +setupPieces(); + \ No newline at end of file