Moved things around to work on smaller screens
Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>
This commit is contained in:
James Ketrenos
parent
30a51a6da8
commit
1e3d086b57
@ -1,10 +1,13 @@
|
||||
.Board {
|
||||
display: flex;
|
||||
align-self: stretch;
|
||||
position: relative;
|
||||
position: absolute;
|
||||
flex: 1;
|
||||
align-items: stretch;
|
||||
margin-right: 30rem;
|
||||
right: 30rem;
|
||||
left: 0;
|
||||
top: 0;
|
||||
bottom: 11rem;
|
||||
}
|
||||
|
||||
/* Offset 'BorderBox' such that 0,0 is the center
|
||||
|
||||
@ -6,7 +6,6 @@
|
||||
height: 6rem;
|
||||
right: 30rem;
|
||||
bottom: 11rem; /* 1rem over top of Resource cards in hand */
|
||||
width: 20rem;
|
||||
z-index: 1000;
|
||||
padding-bottom: 0.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
|
||||
@ -14,10 +14,16 @@
|
||||
bottom: 11rem; /* 1rem over top of Resource cards in hand */
|
||||
align-items: flex-end;
|
||||
pointer-events: all;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
.PlayersStatus .Player {
|
||||
margin-bottom: 0.5rem;
|
||||
border-bottom: 1px solid black;
|
||||
}
|
||||
|
||||
.PlayersStatus.ActivePlayer .Player {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.PlayersStatus .Player .Who {
|
||||
@ -26,10 +32,24 @@
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.PlayersStatus.ActivePlayer .Who {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-right: 0.5rem;
|
||||
}
|
||||
|
||||
.PlayerStatus.ActivePlayer .Resource {
|
||||
margin: 0.5rem 0 0 0.5rem;
|
||||
}
|
||||
|
||||
.PlayersStatus .What {
|
||||
margin-left: 0.25rem;
|
||||
margin-top: 0.25rem;
|
||||
margin-right: 0.25rem;
|
||||
margin: 0.25rem;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.PlayersStatus.ActivePlayer .What {
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.PlayersStatus .PlayerColor {
|
||||
@ -39,7 +59,7 @@
|
||||
|
||||
.PlayersStatus .Shrunken {
|
||||
position: relative;
|
||||
height: 5.75rem;
|
||||
height: 4.75rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
@ -49,11 +69,6 @@
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.PlayersStatus .Shrunken {
|
||||
position: relative;
|
||||
height: 5.75rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.PlayersStatus .BoardPieces {
|
||||
align-items: flex-end;
|
||||
@ -78,11 +93,33 @@
|
||||
width: 2.1rem;
|
||||
background-size: contain;
|
||||
pointer-events: none;
|
||||
margin: 0 0.125rem;
|
||||
margin: 0.75rem 0.5rem 0 0;
|
||||
border-radius: 2px;
|
||||
filter: brightness(150%);
|
||||
}
|
||||
|
||||
.PlayersStatus .Has {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
}
|
||||
|
||||
.PlayersStatus .Placard {
|
||||
/*
|
||||
width: 9.4em;
|
||||
height: 11.44em;
|
||||
*/
|
||||
width: 3rem;
|
||||
height: 3.64rem;
|
||||
background-size: 108%;
|
||||
box-sizing: border-box;
|
||||
border-radius: 2px;
|
||||
border: 1px solid #fff;
|
||||
margin: 0 0.25rem 0 0;
|
||||
}
|
||||
|
||||
.PlayersStatus.ActivePlayer .Placard {
|
||||
margin-left: 0.25rem;
|
||||
}
|
||||
|
||||
.PlayersStatus .Points .Resource {
|
||||
display: inline-flex;
|
||||
@ -94,8 +131,7 @@
|
||||
border-radius: 50%;
|
||||
border: 2px solid #444;
|
||||
background-size: 130%;
|
||||
margin-left: -0.625rem;
|
||||
margin-bottom: 0.5rem;
|
||||
margin: 0 0 0 -0.625rem;
|
||||
}
|
||||
|
||||
.PlayersStatus .Points .Resource:first-child {
|
||||
|
||||
@ -4,55 +4,88 @@ import "./PlayersStatus.css";
|
||||
import BoardPieces from './BoardPieces.js';
|
||||
import { getPlayerName } from './Common.js';
|
||||
import PlayerColor from './PlayerColor.js';
|
||||
import Placard from './Placard.js';
|
||||
|
||||
const Player = ({ table, color, onClick }) => {
|
||||
const player = table.game.players[color];
|
||||
const Player = ({ table, color, onClick, reverse }) => {
|
||||
if (!table.game) {
|
||||
return <></>;
|
||||
}
|
||||
const game = table.game;
|
||||
const player = game.players[color];
|
||||
|
||||
const developmentCards = player.unplayed ? <Resource label={true} type={'progress-back'} count={player.unplayed} disabled/> : <></>;
|
||||
const armyCards = player.army ? <Resource label={true} type={'army-1'} count={player.army} disabled/> : <></>;
|
||||
const points = player.points ?
|
||||
<Resource type={'progress-back'} count={player.points} disabled/> : <></>;
|
||||
|
||||
const longestRoad = game.longestRoad && game.longestRoad === color ?
|
||||
<Placard
|
||||
disabled
|
||||
active={false}
|
||||
type='longest-road'
|
||||
/> : <></>;
|
||||
|
||||
const largestArmy = game.largestArmy && game.largestArmy === color ?
|
||||
<Placard
|
||||
disabled
|
||||
active={false}
|
||||
type='largest-army'
|
||||
/> : <></>;
|
||||
|
||||
return <div className="Player">
|
||||
<div className="Who">
|
||||
<PlayerColor color={color}/>{getPlayerName(table.game.sessions, color)}
|
||||
<PlayerColor color={color}/>{getPlayerName(game.sessions, color)}
|
||||
</div>
|
||||
<div className="What">
|
||||
<div className="Points">{points}</div>
|
||||
{ developmentCards }
|
||||
{ armyCards }
|
||||
<div className="Has">
|
||||
{ !reverse && <>
|
||||
{ largestArmy }
|
||||
{ longestRoad }
|
||||
{ armyCards }
|
||||
{ developmentCards }
|
||||
</> }
|
||||
{ reverse && <>
|
||||
{ developmentCards }
|
||||
{ armyCards }
|
||||
{ longestRoad }
|
||||
{ largestArmy }
|
||||
</> }
|
||||
</div>
|
||||
</div>
|
||||
<div className={`${onClick ? 'Normal' : 'Shrunken'}`}><BoardPieces onClick={onClick} table={table} color={color}/></div>
|
||||
</div>
|
||||
};
|
||||
|
||||
const PlayersStatus = ({ table, onClick, color, className }) => {
|
||||
const PlayersStatus = ({ table, onClick, color, active }) => {
|
||||
if (!table.game) {
|
||||
return <></>;
|
||||
}
|
||||
|
||||
const game = table.game;
|
||||
let players;
|
||||
if (color) {
|
||||
const player = table.game.players[color];
|
||||
const player = game.players[color];
|
||||
players = <Player
|
||||
onClick={onClick}
|
||||
key={`PlayerStatus-${getPlayerName(table.game.sessions, color)}`}
|
||||
reverse
|
||||
key={`PlayerStatus-${getPlayerName(game.sessions, color)}`}
|
||||
table={table}
|
||||
color={color}/>;
|
||||
} else {
|
||||
players = Object.getOwnPropertyNames(table.game.players)
|
||||
.filter(color => table.game.players[color].status === 'Active' && table.game.color !== color)
|
||||
players = Object.getOwnPropertyNames(game.players)
|
||||
.filter(color => game.players[color].status === 'Active' && game.color !== color)
|
||||
.map(color => {
|
||||
const player = table.game.players[color];
|
||||
const player = game.players[color];
|
||||
return <Player
|
||||
onClick={onClick}
|
||||
key={`PlayerStatus-${getPlayerName(table.game.sessions, color)}`}
|
||||
key={`PlayerStatus-${getPlayerName(game.sessions, color)}`}
|
||||
table={table}
|
||||
color={color}/>;
|
||||
});
|
||||
}
|
||||
|
||||
return <div className={`PlayersStatus ${className ? className : ''}`}>{ players }</div>;
|
||||
return <div className={`PlayersStatus ${active ? 'ActivePlayer' : ''}`}>{ players }</div>;
|
||||
}
|
||||
|
||||
export default PlayersStatus;
|
||||
@ -38,11 +38,14 @@
|
||||
|
||||
.BottomBar {
|
||||
display: flex;
|
||||
margin-right: 30rem;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 30rem;
|
||||
justify-items: space-between;
|
||||
justify-content: space-between;
|
||||
align-items: flex-end;
|
||||
height: 10.5rem;
|
||||
overflow: visible;
|
||||
}
|
||||
|
||||
.GameOrder {
|
||||
@ -153,7 +156,7 @@
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
.Cards {
|
||||
.Table .Cards {
|
||||
display: inline-block;
|
||||
position: absolute;
|
||||
text-align: right;
|
||||
@ -181,23 +184,12 @@
|
||||
.Stack > *:not(:first-child) {
|
||||
margin-left: -4.5em;
|
||||
}
|
||||
|
||||
.Hand:hover .Stack:hover > *:not(:first-child) {
|
||||
/* margin-left: -2em; */
|
||||
}
|
||||
|
||||
.Hand:hover .Stack:hover:not(:last-child) > *:last-child {
|
||||
/* margin-right: 3em; */
|
||||
}
|
||||
|
||||
.Hand {
|
||||
display: flex;
|
||||
min-height: calc(7.2em + 0.5em);
|
||||
}
|
||||
|
||||
.Hand > button {
|
||||
align-self: center;
|
||||
justify-self: center;
|
||||
justify-items: space-between;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.Placard:hover {
|
||||
@ -320,52 +312,6 @@
|
||||
flex-grow: 1;
|
||||
}
|
||||
|
||||
.Placard {
|
||||
z-index: 30000; /* over the top of the BuildPieces */
|
||||
position: relative;
|
||||
width: 9.4em;
|
||||
height: 11.44em;
|
||||
background-position: center;
|
||||
background-repeat: no-repeat;
|
||||
background-size: cover;
|
||||
margin: 0.25em;
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-items: space-between;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.Placard > div {
|
||||
box-sizing: border-box;
|
||||
margin: 0 0.9em;
|
||||
}
|
||||
.Placard:not([disabled]) {
|
||||
cursor: pointer;
|
||||
}
|
||||
.Placard.Selected {
|
||||
filter: brightness(110%);
|
||||
transform-origin: 100% 100%;
|
||||
transform: scale(1.5);
|
||||
}
|
||||
.Placard > div:nth-child(1) {
|
||||
height: 15.5%;
|
||||
}
|
||||
.Placard > div:nth-child(2),
|
||||
.Placard > div:nth-child(3),
|
||||
.Placard > div:nth-child(4),
|
||||
.Placard > div:nth-child(5) {
|
||||
height: 15.25%;
|
||||
}
|
||||
.Placard > div:nth-child(6) {
|
||||
flex: 1;
|
||||
}
|
||||
.Placard > div:hover:nth-child(2),
|
||||
.Placard > div:hover:nth-child(3),
|
||||
.Placard > div:hover:nth-child(4),
|
||||
.Placard > div:hover:nth-child(5) {
|
||||
background-color: #ffffff40;
|
||||
}
|
||||
|
||||
.Development {
|
||||
position: relative;
|
||||
|
||||
@ -20,7 +20,7 @@ import Chat from './Chat.js';
|
||||
import { CircularProgress } from "@material-ui/core";
|
||||
import 'moment-timezone';
|
||||
import Activities from './Activities.js';
|
||||
import BoardPieces from './BoardPieces.js';
|
||||
import Placard from './Placard.js';
|
||||
import PlayersStatus from './PlayersStatus.js';
|
||||
|
||||
/* Start of withRouter polyfill */
|
||||
@ -48,70 +48,6 @@ function withRouter(Component) {
|
||||
}
|
||||
/* end of withRouter polyfill */
|
||||
|
||||
const Placard = ({table, type, active}) => {
|
||||
const dismissClicked = (event) => {
|
||||
table.setState({ buildActive: false });
|
||||
}
|
||||
|
||||
const buildClicked = (event) => {
|
||||
if (!type.match(/^l.*/)) {
|
||||
if (!table.state.buildActive) {
|
||||
table.setState({ buildActive: true });
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const roadClicked = (event) => {
|
||||
table.buyRoad();
|
||||
table.setState({ buildActive: false });
|
||||
};
|
||||
|
||||
const settlementClicked = (event) => {
|
||||
table.buySettlement();
|
||||
table.setState({ buildActive: false });
|
||||
};
|
||||
|
||||
const cityClicked = (event) => {
|
||||
table.buyCity();
|
||||
table.setState({ buildActive: false });
|
||||
};
|
||||
|
||||
const developmentClicked = (event) => {
|
||||
table.buyDevelopment();
|
||||
table.setState({ buildActive: false });
|
||||
};
|
||||
|
||||
let buttons;
|
||||
switch (active ? type : undefined) {
|
||||
case 'orange':
|
||||
case 'red':
|
||||
case 'white':
|
||||
case 'blue':
|
||||
buttons = <>
|
||||
<div onClick={dismissClicked}/>
|
||||
<div onClick={roadClicked}/>
|
||||
<div onClick={settlementClicked}/>
|
||||
<div onClick={cityClicked}/>
|
||||
<div onClick={developmentClicked}/>
|
||||
<div onClick={dismissClicked}/>
|
||||
</>;
|
||||
break;
|
||||
default:
|
||||
buttons = <></>;
|
||||
break;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`Placard${active ? ' Selected' : ''}`}
|
||||
onClick={buildClicked}
|
||||
data-type={type}
|
||||
style={{
|
||||
backgroundImage:`url(${assetsPath}/gfx/placard-${type}.png)`
|
||||
}}
|
||||
>{buttons}</div>
|
||||
);
|
||||
};
|
||||
|
||||
const Development = ({table, type, card, onClick}) => {
|
||||
return (
|
||||
<div className={`Development ${card.played ? 'Selected' : ''}`}
|
||||
@ -994,7 +930,7 @@ class Table extends React.Component {
|
||||
<Board table={this} game={game}/>
|
||||
{ player !== undefined && <>
|
||||
<PlayersStatus table={this}/>
|
||||
<PlayersStatus className="ActivePlayer"
|
||||
<PlayersStatus active={true}
|
||||
onClick={this.buildItem}
|
||||
table={this} color={this.game.color}/>
|
||||
<div className="BottomBar">
|
||||
|
||||
@ -7,7 +7,6 @@ import Button from '@material-ui/core/Button';
|
||||
import Resource from './Resource.js';
|
||||
import ArrowDownwardIcon from '@mui/icons-material/ArrowDownward'
|
||||
import ArrowUpwardIcon from '@mui/icons-material/ArrowUpward'
|
||||
import { alertClasses } from "@mui/material";
|
||||
|
||||
const empty = {
|
||||
wheat: 0,
|
||||
@ -104,7 +103,6 @@ const Trade = ({table}) => {
|
||||
|
||||
const canMeetOffer = (player, offer) => {
|
||||
if (offer.gets.length === 0 || offer.gives.length === 0) {
|
||||
console.log(`no length`);
|
||||
return false;
|
||||
}
|
||||
for (let i = 0; i < offer.gets.length; i++) {
|
||||
|
||||
@ -32,7 +32,12 @@
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.ViewCard .Description p:first-of-type {
|
||||
.ViewCard .Description > div {
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
.ViewCard .Description div:first-of-type {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -36,40 +36,41 @@ const ViewCard = ({table, card}) => {
|
||||
|
||||
switch (lookup) {
|
||||
case 'army':
|
||||
description = <>When played, you <b>must</b> move the robber.
|
||||
<p>Steal <b>1</b> resource card from the owner of an adjacent settlement or city.</p>
|
||||
<p>You may only play one development card during your turn -- either one
|
||||
knight or one progress card.</p></>;
|
||||
description = <>
|
||||
<div>When played, you <b>must</b> move the robber.</div>
|
||||
<div>Steal <b>1</b> resource card from the owner of an adjacent settlement or city.</div>
|
||||
<div>You may only play one development card during your turn -- either one
|
||||
knight or one progress card.</div></>;
|
||||
break;
|
||||
case 'vp':
|
||||
description = <><b>1</b> victory point.
|
||||
<p>You only reveal your victory point cards when the game is over, either
|
||||
description = <><div><b>1</b> victory point.</div>
|
||||
<div>You only reveal your victory point cards when the game is over, either
|
||||
when you or an opponent
|
||||
reaches <b>10+</b> victory points on their turn and declares
|
||||
victory!</p></>;
|
||||
victory!</div></>;
|
||||
break;
|
||||
case 'progress-road-1':
|
||||
case 'progress-road-2':
|
||||
description = <>
|
||||
<p>Play <b>2</b> new roads as if you had just built them.</p>
|
||||
<p>This is still limited by the number of roads you have. If you do not have enough roads
|
||||
<div>Play <b>2</b> new roads as if you had just built them.</div>
|
||||
<div>This is still limited by the number of roads you have. If you do not have enough roads
|
||||
remaining, or if there are no valid road building locations, the number of roads
|
||||
you can place will be reduced.</p>
|
||||
<p>You currently have <b>{table.game.player.roads}</b> roads remaining.</p>
|
||||
you can place will be reduced.</div>
|
||||
<div>You currently have <b>{table.game.player.roads}</b> roads remaining.</div>
|
||||
</>;
|
||||
break;
|
||||
case 'progress-monopoly':
|
||||
description = <>
|
||||
<p>When you play this card, you will select <b>1</b> type of resource.
|
||||
All other players must give you all their resource cards of that type.</p>
|
||||
<div>When you play this card, you will select <b>1</b> type of resource.
|
||||
All other players must give you all their resource cards of that type.</div>
|
||||
</>;
|
||||
break;
|
||||
case 'progress-year-of-plenty':
|
||||
description = <>
|
||||
Take any <b>2</b> resources from the bank. Add them to your hand. They can be
|
||||
<b>2</b> of the same resource or <b>2</b> different resources.
|
||||
<p><b>Unfortunately</b> the current implementation only lets you pick a single
|
||||
resource and you will then get <b>2</b> of those.</p>
|
||||
<div>Take any <b>2</b> resources from the bank. Add them to your hand. They can be
|
||||
<b>2</b> of the same resource or <b>2</b> different resources.</div>
|
||||
<div><b>Unfortunately</b> the current implementation only lets you pick a single
|
||||
resource and you will then get <b>2</b> of those.</div>
|
||||
</>;
|
||||
break;
|
||||
};
|
||||
|
||||
@ -39,7 +39,6 @@
|
||||
}
|
||||
|
||||
.Winner .Description > div {
|
||||
display: inline;
|
||||
margin-bottom: 1rem;
|
||||
line-height: 1.25rem;
|
||||
}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
@media only screen and (max-width: 900px) {
|
||||
@media only screen and (max-width: 1200px) {
|
||||
html {
|
||||
font-size: 10px;
|
||||
}
|
||||
|
||||
@ -2000,7 +2000,7 @@ router.put("/:id/:action/:value?", async (req, res) => {
|
||||
error = `You can not play victory point cards until you can reach 10!`;
|
||||
break;
|
||||
}
|
||||
addActivity(game, session, `${session.name} played a Victory Point card.`);
|
||||
addChatMessage(game, session, `${session.name} played a Victory Point card.`);
|
||||
}
|
||||
|
||||
if (card.type === 'progress') {
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user