diff --git a/TODO b/TODO index e214bce..9d94fd0 100644 --- a/TODO +++ b/TODO @@ -50,6 +50,9 @@ ☐ Code → Refactor to code portsoc eslint → Refactor game client + → WHY THE HELL ARE THEY CALLED USERS IN SOME PLACES AND PLAYERS IN OTHERS ☐ Bugfixes → If a user disconnects during a game, the game is irrevokably corrupted + + diff --git a/client/public/main.css b/client/public/main.css index 0bddf7e..a22a9ea 100644 --- a/client/public/main.css +++ b/client/public/main.css @@ -3,6 +3,8 @@ body { font-family: 'Open Sans', sans-serif; + background-color: rgb(237, 237, 237); + color: rgb(31, 31, 31); } .red { diff --git a/client/public/scrabble/game.css b/client/public/scrabble/game.css index a1a784c..7c06583 100644 --- a/client/public/scrabble/game.css +++ b/client/public/scrabble/game.css @@ -121,6 +121,11 @@ score { flex-grow: 2; } +.theirturn { + background-color: aquamarine; +} + + #game-controls { border: 1px dotted black; diff --git a/client/public/scrabble/game.js b/client/public/scrabble/game.js index a240350..50f5b6f 100644 --- a/client/public/scrabble/game.js +++ b/client/public/scrabble/game.js @@ -36,8 +36,13 @@ function initGame(boardstate, tileset, myplayer, players) drawerStructure.push(piece); } addPiecesToDrawer(drawerStructure); + + // construct UI + initUI(); - - + console.log(players); + + setupUsersUI(players, 0); + return true; } diff --git a/client/public/scrabble/index.html b/client/public/scrabble/index.html index b98bff3..bf8ed16 100644 --- a/client/public/scrabble/index.html +++ b/client/public/scrabble/index.html @@ -16,7 +16,7 @@
- +
- +
- +
@@ -312,9 +312,9 @@
:
- - - + + +
@@ -328,9 +328,9 @@
- - - + + +
Jerry played OXYPHENBUTAZONE for 40 points
diff --git a/client/public/scrabble/pieces.js b/client/public/scrabble/pieces.js index 0aed2d4..421aca2 100644 --- a/client/public/scrabble/pieces.js +++ b/client/public/scrabble/pieces.js @@ -20,36 +20,39 @@ Number.prototype.clamp = function(min, max) { const Drawer = document.querySelector('#piece-drawer'); -/* -TILE OBJECT -{ - -} -*/ -let PiecesDrawer = []; - // Expects structure [{letter: '', score: int}] function addPiecesToDrawer(pieces) { + let ret = []; for (const piece of pieces) { const domPiece = document.createElement('piece'); domPiece.innerText = piece.letter; domPiece.classList.add('unselectable'); domPiece.classList.add('unplayed-piece'); + const score = document.createElement('score'); score.innerText = piece.score; + domPiece.appendChild(score); Drawer.appendChild(domPiece); + + ret.push (domPiece); } + setupPieces(); updatePieceEventListeners(); + + return ret; } // Removes regardless of vadility function removePiecesFromDrawer(pieces) { - + for (const piece of pieces) + { + piece.remove(); + } } diff --git a/client/public/scrabble/ui.js b/client/public/scrabble/ui.js index 63b2cf7..234d3be 100644 --- a/client/public/scrabble/ui.js +++ b/client/public/scrabble/ui.js @@ -1,14 +1,59 @@ // DOES NOT DEAL WITH GAME BOARD -function setupUsers() +// chat +const ChatBox = document.querySelector('#game-chat'); +const ChatMessageBox = document.querySelector('#game-chat-input'); +const ChatMessageSubmit = document.querySelector('#game-chat-button'); + +// players +const IPlayerScores = document.querySelectorAll('.player-scores'); + +// playlog +const PlayLog = document.querySelector('#moves'); + +function initUI() { - + IPlayerScores.forEach(e => { + e.innerHTML = ''; + }); + PlayLog.innerHTML = ''; + ChatBox.value = ''; +} + +const UserUIReplacer = (p, n, s) => `
+
${n}
+Score:
${s}
+
`; + +// expects initUI called before +function setupUsersUI(users, turn) +{ + let elements = []; + for (const user in users) + { + elements.push(UserUIReplacer(user, users[user].name, users[user].score)); + } + IPlayerScores.forEach(e => { + e.innerHTML += elements.join(''); + }); + + document.querySelectorAll(`.p${turn}`).forEach(e => { + e.classList.toggle('theirturn'); + }); +} + +function updateUsersUI(users, turn) +{ + } function onExchangeTiles() { - + let tiles = prompt('Enter the tiles you would like to exchange seperated by commas (this will use your turn)') + tiles = tiles.split(','); + console.log(tiles); + } function onSkipTurn() @@ -31,8 +76,7 @@ function onTurnProcess() } -function onTurnPlay() +function onTurnPlay(oldturnuser, newturnuser, newboardstate) { } - diff --git a/server/src/game-logic.js b/server/src/game-logic.js index fd7f2a2..b3617a2 100644 --- a/server/src/game-logic.js +++ b/server/src/game-logic.js @@ -182,6 +182,7 @@ NOTES */ function PlayTurn(gameuid, playeruid, newstate) { + const game = ActiveGames[gameuid]; } @@ -193,7 +194,7 @@ function ExchangeTiles(tileset, tilesToExchange) function UserLeaveGame(useruid) { - + } // same as how the diff --git a/server/src/socketserver.js b/server/src/socketserver.js index 1cfb4c3..851f4de 100644 --- a/server/src/socketserver.js +++ b/server/src/socketserver.js @@ -71,6 +71,8 @@ async function Router(socket) // once all clients have connected with identify socket.on('lobby-game-begin', args => LobbyGameBegin(socket, args)); socket.on('game-play-turn', args => GamePlayTurn(socket, args)) + socket.on('game-skip-turn', args => GamePlayTurn(socket, {skip: true})); + socket.on('game-exchange-tiles', args => GameExchangeTiles(socket, args)); socket.on('disconnect', args => HandleDisconnect(socket, ...args)); @@ -391,7 +393,15 @@ function LobbyGameBegin(socket, args) function GamePlayTurn(socket, args) { - + if (args.skip === true) + { + + } +} + +function GameExchangeTiles(socket, args) +{ + } @@ -404,7 +414,7 @@ function HandleDisconnect(socket, args) // if the user is the last user in a game - delete it // if the user is leaving, change their status so reconnect is allowed - // TODO: THAT^^^ + // TODO: VERY IMPORTANTTTT THAT^^^ // if user is in a lobby, leave and if user own's a lobby, destruct // leave lobby before user is disconnected