}
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
;
}
-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
});