diff --git a/package.json b/package.json
index ef014d5..8a51a5b 100755
--- a/package.json
+++ b/package.json
@@ -36,6 +36,7 @@
"react-bootstrap": "^1.0.0-beta.16",
"react-date-range": "^1.0.0-beta",
"react-markdown": "^4.2.2",
+ "react-moment": "^0.9.7",
"react-router-dom": "^5.0.1",
"react-scroll": "^1.7.14",
"react-syntax-highlighter": "^11.0.2",
diff --git a/server/routes/games.js b/server/routes/games.js
index af39329..50a916e 100755
--- a/server/routes/games.js
+++ b/server/routes/games.js
@@ -113,6 +113,7 @@ router.post("/", (req, res/*, next*/) => {
console.log("POST games/");
const game = {
startTime: Date.now(),
+ state: "lobby", /* lobby, in-game, finished */
tiles: [],
pips: [],
borders: [],
@@ -123,6 +124,7 @@ router.post("/", (req, res/*, next*/) => {
{ player: "W", roads: 15, cities: 4, settlements: 5, points: 0 }
],
developmentCards: assetData.developmentCards.slice(),
+ dice: [ 0, 0 ],
sheep: 19,
ore: 19,
wool: 19,
@@ -130,6 +132,7 @@ router.post("/", (req, res/*, next*/) => {
wheat: 19,
longestRoad: null,
largestArmy: null,
+ chat: [ { from: "R", date: Date.now(), message: "Hello, world!" } ],
id: crypto.randomBytes(20).toString('hex')
};
diff --git a/src/Board.css b/src/Board.css
index 94178c2..cd24d45 100755
--- a/src/Board.css
+++ b/src/Board.css
@@ -42,6 +42,24 @@
filter: brightness(150%);
}
+.Chat {
+ right: 0;
+ bottom: 0;
+ padding: 0.5em;
+ width: 30vmax;
+ display: inline-block;
+ opacity: 0.7;
+}
+
+.Chat > * {
+ width: 100%;
+}
+
+.Chat > :first-child {
+ height: 10vh;
+ overflow-y: scroll;
+}
+
.Stack > *:not(:first-child) {
margin-left: -4.5em;
}
diff --git a/src/Board.js b/src/Board.js
index 36b0a74..3d5f73a 100755
--- a/src/Board.js
+++ b/src/Board.js
@@ -1,6 +1,14 @@
import React, { useState, useEffect } from "react";
import "./Board.css";
import history from "./history.js";
+import Paper from '@material-ui/core/Paper';
+import TextField from '@material-ui/core/TextField';
+import List from '@material-ui/core/List';
+import ListItem from '@material-ui/core/ListItem';
+import ListItemText from '@material-ui/core/ListItemText';
+import ListItemAvatar from '@material-ui/core/ListItemAvatar';
+import Moment from 'react-moment';
+import moment from 'moment';
const hexagonRatio = 1.1547005,
tileHeight = 0.16,
@@ -171,6 +179,51 @@ class Resource extends React.Component {
}
};
+class Chat extends React.Component {
+ constructor(props) {
+ super(props);
+ this.chatInput = this.chatInput.bind(this);
+ }
+
+ chatInput(event) {
+ console.log(event.target.value);
+ }
+
+ chatKeyPress(event) {
+ if (event.key == "Enter") {
+ console.log(`Send: ${event.target.value}`);
+ event.target.value = "";
+ }
+ }
+
+ render() {
+ //this.props.game.messages
+ const messages =[ { from: "R", date: Date.now(), message: "Hello, world!" } ].map((item, index) => {
+ const timestamp = moment(item.date).fromNow();
+ return (
+
+ { messages }
+
+