diff --git a/client/src/Table.css b/client/src/Table.css
index 74bee7d..b7567d8 100755
--- a/client/src/Table.css
+++ b/client/src/Table.css
@@ -8,6 +8,53 @@
background-image: url("./assets/tabletop.png");
}
+.GameOrder {
+ display: flex;
+ position: absolute;
+ left: 0;
+ right: 0;
+ bottom: 0;
+ top: 0;
+ justify-content: center;
+ align-items: center;
+ background: rgba(0,0,0,0.5);
+}
+
+.GameOrder .Title {
+ align-self: center;
+ padding: 2px;
+ font-weight: bold;
+}
+
+.GameOrder .PlayerList {
+ padding: 0.5em;
+ background-color:rgba(224, 224, 224);
+ margin: 0.5em 0;
+}
+.GameOrder > * {
+ 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;
+}
+
.Display {
display: inline-block;
position: absolute;
@@ -42,7 +89,6 @@
box-sizing: border-box;
max-height: 100%;
max-width: 100%;
- opacity: 0.7;
}
.Stack {
@@ -81,7 +127,6 @@
max-width: 40vw;
z-index: 100;
padding: 0.5em;
- opacity: 0.7;
}
.Game > * {
diff --git a/client/src/Table.js b/client/src/Table.js
index 5761ec1..1054444 100755
--- a/client/src/Table.js
+++ b/client/src/Table.js
@@ -72,14 +72,14 @@ const useStyles = makeStyles((theme) => ({
const Dice = ({ pips }) => {
let name;
- switch (pips) {
- case 1: name = 'one'; break;
- case 2: name = 'two'; break;
- case 3: name = 'three'; break;
- case 4: name = 'four'; break;
- case 5: name = 'five'; break;
+ switch (pips.toString()) {
+ case '1': name = 'one'; break;
+ case '2': name = 'two'; break;
+ case '3': name = 'three'; break;
+ case '4': name = 'four'; break;
+ case '5': name = 'five'; break;
default:
- case 6: name = 'six'; break;
+ case '6': name = 'six'; break;
}
return (
@@ -271,6 +271,61 @@ const StartButton = ({ table }) => {
);
};
+const GameOrder = ({table}) => {
+
+ const rollClick = (event) => {
+ table.throwDice();
+ }
+
+ if (!table.game) {
+ return (<>>);
+ }
+
+ let players = [];
+ for (let color in table.game.players) {
+ const item = table.game.players[color],
+ name = getPlayerName(table.game.sessions, color);
+ if (name) {
+ if (!item.orderRoll) {
+ item.orderRoll = 0;
+ }
+ players.push({ name: name, color: color, ...item });
+ }
+ }
+
+ players.sort((A, B) => {
+ if (A.order === B.order) {
+ if (A.orderRoll === B.orderRoll) {
+ return A.name.localeCompare(B.name);
+ }
+ return B.orderRoll - A.orderRoll;
+ }
+ return B.order - A.order;
+ });
+
+ console.log(players);
+ players = players.map(item =>
+