From 8fc3f1edcd2bd5d189e95cf323d52af11fa69480 Mon Sep 17 00:00:00 2001 From: James Ketrenos Date: Sun, 13 Mar 2022 04:10:50 -0700 Subject: [PATCH] Board pieces now show up Signed-off-by: James Ketrenos --- client/src/App.css | 3 + client/src/App.js | 4 +- client/src/Board.js | 5 +- client/src/BoardPieces.js | 6 +- client/src/Placard.js | 57 ++++++----- client/src/PlayersStatus.css | 2 +- client/src/Table.css | 190 ----------------------------------- server/routes/games.js | 174 ++------------------------------ 8 files changed, 56 insertions(+), 385 deletions(-) diff --git a/client/src/App.css b/client/src/App.css index cae1a0d..a6cab83 100755 --- a/client/src/App.css +++ b/client/src/App.css @@ -81,6 +81,7 @@ body { display: flex; position: relative; height: 11rem; + z-index: 1000; } .Table .Sidebar { @@ -90,11 +91,13 @@ body { width: 30rem; max-width: 30rem; overflow: hidden; + z-index: 5000; } .Table .Board { display: flex; flex-grow: 1; + z-index: 500; } .Table .Sidebar .Chat { diff --git a/client/src/App.js b/client/src/App.js index 061d292..3e83b31 100755 --- a/client/src/App.js +++ b/client/src/App.js @@ -21,6 +21,7 @@ import { GameOrder } from "./GameOrder.js"; import { Activities } from "./Activities.js"; import { SelectPlayer } from "./SelectPlayer.js"; import { PlayersStatus } from "./PlayersStatus.js"; +import { Hand } from "./Hand.js"; import history from "./history.js"; import "./App.css"; @@ -299,6 +300,7 @@ const Table = () => { + { /* state === 'winner' && } @@ -315,8 +317,6 @@ const Table = () => { { isTurn && turn && turn.actions && game.turn.actions.indexOf('select-resources') !== -1 && */ } - -
todo: player's hand
{ name !== "" && } diff --git a/client/src/Board.js b/client/src/Board.js index 3660848..a8f8d0b 100644 --- a/client/src/Board.js +++ b/client/src/Board.js @@ -148,7 +148,6 @@ const Board = () => { })); }, [ws, fields]); - const onResize = debounce(() => { if (!board.current) { return; @@ -159,7 +158,7 @@ const Board = () => { * so the board fills the Board * * The board is H tall, and H * hexRatio wide */ - const width = board.current.innerWidth, + const width = board.current.offsetWidth, height = board.current.offsetHeight; let _transform; if (height * hexRatio > width) { @@ -170,7 +169,7 @@ const Board = () => { const boardBox = board.current.querySelector('.BoardBox'); if (boardBox) { - console.log(`Setting transofrm scale to ${_transform}`); + console.log(`board - setting transform scale to ${_transform}`); if (boardBox.style.transform !== `scale(${_transform})`) { boardBox.style.transform = `scale(${_transform})`; } diff --git a/client/src/BoardPieces.js b/client/src/BoardPieces.js index ac10406..1f9e6d4 100644 --- a/client/src/BoardPieces.js +++ b/client/src/BoardPieces.js @@ -19,11 +19,13 @@ const City = ({ color, onClick }) => { return
onClick('city')}>
; } -const BoardPieces = ({ player, onClick, color }) => { +const BoardPieces = ({ player, onClick }) => { if (!player) { return <>; } + const color = player.color; + const roads = []; for (let i = 0; i < player.roads; i++) { roads.push(); @@ -46,4 +48,4 @@ const BoardPieces = ({ player, onClick, color }) => { ); }; -export {BoardPieces}; \ No newline at end of file +export { BoardPieces }; \ No newline at end of file diff --git a/client/src/Placard.js b/client/src/Placard.js index 9baddd9..e2e26bb 100644 --- a/client/src/Placard.js +++ b/client/src/Placard.js @@ -1,40 +1,51 @@ -import React from "react"; -import "./Placard.css"; -import { assetsPath } from './Common.js'; +import React, { useContext, useEffect, useState } from "react"; -const Placard = ({table, type, active, disabled, count}) => { - const dismissClicked = (event) => { - table.setState({ buildActive: false }); +import { assetsPath } from './Common.js'; +import { GlobalContext } from "./GlobalContext.js"; + +import "./Placard.css"; + +const Placard = ({type, disabled, count}) => { + const { ws } = useContext(GlobalContext); + const [active, setActive] = useState(false); + + const dismissClicked = () => { + setActive(false); } - const buildClicked = (event) => { - if (!type.match(/^l.*/)) { - if (!table.state.buildActive) { - table.setState({ buildActive: true }); + const buildClicked = () => { + if (!type.match(/^l.*/)) { /* longest / largest ... */ + if (!active) { + setActive(true); } } }; - const roadClicked = (event) => { - table.buyRoad(); - table.setState({ buildActive: false }); + const roadClicked = () => { + ws.send(JSON.stringify({ type: 'buy-road'})); + setActive(false); }; - const settlementClicked = (event) => { - table.buySettlement(); - table.setState({ buildActive: false }); + const settlementClicked = () => { + ws.send(JSON.stringify({ type: 'buy-settlement'})); + setActive(false); }; - const cityClicked = (event) => { - table.buyCity(); - table.setState({ buildActive: false }); + const cityClicked = () => { + ws.send(JSON.stringify({ type: 'buy-city'})); + setActive(false); }; - const developmentClicked = (event) => { - table.buyDevelopment(); - table.setState({ buildActive: false }); + const developmentClicked = () => { + ws.send(JSON.stringify({ type: 'buy-development'})); + setActive(false); }; + if (type === 'B') { type = 'blue'; } + else if (type === 'O') { type = 'orange'; } + else if (type === 'R') { type = 'red'; } + else if (type === 'W') { type = 'white'; } + let buttons; if (!disabled && active) { switch (type) { @@ -59,7 +70,7 @@ const Placard = ({table, type, active, disabled, count}) => { if (!disabled) { return
* { - min-width: 20em; - display: inline-flex; - padding: 0.5em; - flex-direction: column; -} - -.GameOrder .PlayerColor { - width: 1em; - height: 1em; -} - -.GameOrder .GameOrderPlayer { - display: flex; - flex-direction: row; - width: 100%; - align-items: center; - padding: 2px 0; -} - -.GameOrderPlayer > * { - margin: 0 0.25em; -} - -.SelectPlayer { - display: flex; - position: absolute; - left: 0; - right: 30rem; - bottom: 0; - top: 0; - justify-content: center; - align-items: center; - background: rgba(0,0,0,0.5); - z-index: 1000; -} - -.SelectPlayer .Title { - align-self: center; - padding: 2px; - font-weight: bold; -} - -.SelectPlayer .SelectPlayerList { - display: flex; - flex-direction: column; - justify-content: flex-start; - padding: 0.5em; - background-color:rgba(224, 224, 224); - margin: 0.5em 0; -} - -.SelectPlayer > * { - width: 20em; - display: inline-flex; - padding: 0.5em; - flex-direction: column; -} - -.SelectPlayer .PlayerColor { - width: 1em; - height: 1em; -} - -.SelectPlayer .SelectPlayerItem { - display: flex; - flex-direction: row; - width: 100%; - align-items: center; - padding: 2px 0; - cursor: pointer; -} - -.SelectPlayer > * { - margin: 0 0.25em; -} - .Display { display: inline-block; position: absolute; } -.Table .Cards { - display: inline-block; - position: absolute; - text-align: right; - vertical-align: bottom; - padding: 0.5em; - box-sizing: border-box; - max-height: 100%; - max-width: 100%; -} - -.Stack { - position: relative; - display: flex; -} - -.Stack:not(:first-child) { - margin-left: -3.5em; - transition: margin-left 1s ease-in-out 0.25s; -} - -.Stack > * { - transition: margin-left 1s ease-in-out 0.25s, margin-right 1s ease-in-out 0.25s; -} - -.Stack > *:not(:first-child) { - margin-left: -4em; -} - -.Hand { - display: flex; - min-height: calc(7.2em + 0.5em); - justify-items: space-between; - justify-content: space-between; -} .Placard:hover { filter: brightness(105%); @@ -212,42 +58,6 @@ top: -1em; } -.Game { - display: flex; - position: absolute; - flex-direction: column; - box-sizing: border-box; - max-height: 100vh; - overflow: hidden; - max-width: 30rem; - z-index: 100; - padding: 0.5em; - right: 0; -} - -.Game > * { - /* for Firefox */ - min-height: 0; -} - -.Game > *:not(:last-child) { - margin-bottom: 0.5em; -} - -.Game.lobby { -} - -.Development { - position: relative; - display: inline-block; - width: 4.9em; - height: 7.2em; - background-position: center; - background-repeat: no-repeat; - background-size: cover; - margin: 0.25em; - cursor: pointer; -} .Action { display: flex; diff --git a/server/routes/games.js b/server/routes/games.js index 7e5bb74..75c001a 100755 --- a/server/routes/games.js +++ b/server/routes/games.js @@ -456,6 +456,12 @@ const getSession = (game, reqSession) => { } const session = game.sessions[id]; + session.lastActive = Date.now(); + session.live = true; + if (session.player) { + session.player.live = true; + session.player.lastActive = session.lastActive; + } /* Expire old unused sessions */ for (let _id in game.sessions) { @@ -477,13 +483,6 @@ const getSession = (game, reqSession) => { } } - session.lastActive = Date.now(); - session.live = true; - if (session.player) { - session.player.live = true; - session.player.lastActive = session.lastActive; - } - return game.sessions[id]; }; @@ -875,7 +874,7 @@ const setPlayerName = (game, session, name) => { name: session.name, color: session.color, live: session.live, - player: session.player + private: session.player }); sendUpdateToPlayers(game, { players: game.players, @@ -954,7 +953,7 @@ const setPlayerColor = (game, session, color) => { name: session.name, color: undefined, live: session.live, - player: session.player + private: session.player }); sendUpdateToPlayers(game, { active: game.active, @@ -1007,7 +1006,7 @@ const setPlayerColor = (game, session, color) => { name: session.name, color: session.color, live: session.live, - player: session.player + private: session.player }); sendUpdateToPlayers(game, update); }; @@ -3499,159 +3498,6 @@ const debugChat = (game, preamble) => { } } -const sendGameToSession = (session, reducedSessions, game, reducedGame, error, res) => { - const player = session.player ? session.player : undefined; - - /* Strip out data that should not be shared with players */ - delete reducedGame.developmentCards; - - const playerGame = Object.assign({}, reducedGame, { - timestamp: Date.now(), - status: error ? error : "success", - name: session.name, - color: session.color, - order: (session.color in game.players) ? game.players[session.color].order : 0, - player: player, - sessions: reducedSessions, - layout: layout - }); - - if (!res) { - if (!error) { - if (!session.ws) { - console.error(`No WebSocket connection to ${session.name}`); - } else { - console.log(`Sending update to ${session.id}:${session.name ? session.name : 'Unnamed'}`); - sendUpdateToPlayer(session, playerGame); - } - } - } else { - console.log(`Returning update to ${session.name ? session.name : 'Unnamed'}`); - res.status(200).send(playerGame); - } -} - -const sendGame = async (req, res, game, error, wsUpdate) => { - - /* Update the session lastActive clock */ - let session; - if (req.session) { - session = getSession(game, req.session); - session.lastActive = Date.now(); - if (session.player) { - session.player.lastActive = session.lastActive; - } - } else { - session = { - name: "command line" - }; - } - - /* Calculate points and determine if there is a winner */ - for (let key in game.players) { - const player = game.players[key]; - if (player.status === 'Not active') { - continue; - } - player.points = 0; - if (key === game.longestRoad) { - player.points += 2; - } - if (key === game.largestArmy) { - player.points += 2; - } - player.points += MAX_SETTLEMENTS - player.settlements; - player.points += 2 * (MAX_CITIES - player.cities); - - player.unplayed = 0; - player.potential = 0; - player.development.forEach(card => { - if (card.type === 'vp') { - if (card.played) { - player.points++; - } else { - player.potential++; - } - } - if (!card.played) { - player.unplayed++; - } - }); - - if (!game.winner && (player.points >= 10 && session.color === key)) { - addChatMessage(game, null, `${player.name} won the game with ${player.points} victory points!`); - game.winner = key; - game.state = 'winner'; - delete game.turn.roll; - } - } - - /* If the game isn't in a win state, do not share development card information - * with other players */ - if (game.state !== 'winner') { - for (let key in game.players) { - const player = game.players[key]; - if (player.status === 'Not active') { - continue; - } - delete player.potential; - } - } - - /* Shallow copy game, filling its sessions with a shallow copy of sessions so we can then - * delete the player field from them */ - const reducedGame = Object.assign({}, game, { sessions: {} }), - reducedSessions = []; - - for (let id in game.sessions) { - const reduced = Object.assign({}, game.sessions[id]); - if (reduced.player) { - delete reduced.player; - } - if (reduced.ws) { - delete reduced.ws; - } - if (reduced.keepAlive) { - delete reduced.keepAlive; - } - reducedGame.sessions[id] = reduced; - - /* Do not send session-id as those are secrets */ - reducedSessions.push(reduced); - } - - if (!wsUpdate) { - /* Save per turn while debugging... */ - await writeFile(`games/${game.id}.${game.turns}`, JSON.stringify(reducedGame, null, 2)) - .catch((error) => { - console.error(`Unable to write to games/${game.id}`); - console.error(error); - }); - await writeFile(`games/${game.id}`, JSON.stringify(reducedGame, null, 2)) - .catch((error) => { - console.error(`Unable to write to games/${game.id}`); - console.error(error); - }); - } - - if (wsUpdate) { - /* This is a one-shot request from a client to send the game-update over WebSocket */ - sendGameToSession(session, reducedSessions, game, reducedGame); - } else { - for (let id in game.sessions) { - const target = game.sessions[id], useWS = target !== session; - if (useWS) { - if (!error) { - sendGameToSession(target, reducedSessions, game, reducedGame); - } - } else { - sendGameToSession(target, reducedSessions, game, reducedGame, error, res); - } - } - } -} - - const getFilteredGameForPlayer = (game, session) => { /* Calculate points and determine if there is a winner */ for (let key in game.players) { @@ -3740,7 +3586,7 @@ const getFilteredGameForPlayer = (game, session) => { name: session.name, color: session.color, order: (session.color in game.players) ? game.players[session.color].order : 0, - player: player, + private: player, sessions: reducedSessions, layout: layout });