Waiting for {table.game.turn.name} to complete their turn.
+
+ { list }
+
+ { !isTurn && normalPlay && !mustDiscard &&
+
Waiting for
{table.game.turn.name} to complete their turn.
}
- { isTurn && normalPlay && game.player && game.player.mustDiscard &&
+
+ { isTurn && normalPlay && game.player && mustDiscard &&
You must discard.
}
- { isTurn && normalPlay && (!game.player || !game.player.mustDiscard) &&
-
It is your turn.
+
+ { isTurn && normalPlay &&
+
}
-
+
);
};
diff --git a/client/src/Chat.css b/client/src/Chat.css
index f33c6fb..5da0f32 100644
--- a/client/src/Chat.css
+++ b/client/src/Chat.css
@@ -35,6 +35,7 @@
.ChatList .MuiTypography-body1 {
font-size: 0.8rem;
display: flex;
+ flex-wrap: wrap;
}
.ChatList .System .MuiTypography-body1 {
@@ -61,19 +62,32 @@
.ChatList .Resource {
display: inline-flex;
- width: 3em;
- height: 4.3em;
+ align-items: center;
+ justify-content: space-around;
+ height: 1.5rem;
+ width: 1.5rem;
+ min-width: 1.5rem;
+ min-height: 1.5rem;
pointer-events: none;
+ margin: 0 0.125rem;
+ background-size: 130%;
+ border: 2px solid #444;
+ border-radius: 2px;
+ margin-right: 0.5rem;
}
-.ChatList .Stack {
- margin-left: 0;
- transition: none;
-}
-
-.ChatList .Stack > *:not(:first-child) {
- margin-left: 0;
- transition: none;
+.ChatList .Resource > div {
+ position: absolute;
+ top: -0.625rem;
+ right: -0.625rem;
+ border-radius: 50%;
+ border: 1px solid white;
+ background-color: rgb(36, 148, 46);
+ font-size: 0.75rem;
+ width: 1rem;
+ height: 1rem;
+ text-align: center;
+ line-height: 1rem;
}
.ChatList .Dice {
diff --git a/client/src/Chat.js b/client/src/Chat.js
index 6cbc775..851f28d 100644
--- a/client/src/Chat.js
+++ b/client/src/Chat.js
@@ -96,7 +96,7 @@ const Chat = ({ table }) => {
const resource = start.match(/^(.*)(([0-9]+) (wood|sheep|wheat|stone|brick),?)(.*)$/);
if (resource) {
const count = resource[3] ? parseInt(resource[3]) : 1;
- message = <>