Chat box coming along

Signed-off-by: James Ketrenos <james.p.ketrenos@intel.com>

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",

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

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

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 (
+        <ListItem key={`msg-${index}`}>
+          <ListItemAvatar>
+            {item.from}
+          </ListItemAvatar>
+          <ListItemText primary={item.message} secondary={timestamp} />
+        </ListItem>
+      );
+    });
+    return (
+      <Paper className="Chat">
+        <List>
+          { messages }
+        </List>
+        <TextField id="chat-input"
+          onChange={this.chatInput}
+          onKeyPress={this.chatKeyPress}
+          label={(<Moment format="h:mm:ss" interval={1000}/>)} variant="outlined"/>
+      </Paper>
+    );
+  }
+
+}
+
 class Board extends React.Component {
   constructor(props) {
     super(props);
@@ -196,7 +249,20 @@ class Board extends React.Component {
     this.mouse = { x: 0, y: 0 };
     this.radius = 0.317;
 
-    const params = {}
+    this.game = null;
+    this.pips = [];
+    this.tiles = [];
+    this.borders = [];
+    this.table = null;
+    this.closest = {
+      info: {},
+      tile: null,
+      road: null,
+      tradeToken: null,
+      settlement: null
+    };
+
+    const params = {};
 
     if (props.match.params.id) {
       console.log(`Loading game: ${props.match.params.id}`);
@@ -233,14 +299,6 @@ class Board extends React.Component {
       this.tiles = Tiles(this);
       this.table = Table(this);
   
-      this.closest = {
-        info: {},
-        tile: null,
-        road: null,
-        tradeToken: null,
-        settlement: null
-      };
-  
       this.borders = this.game.borders.map((file) => {
         return Border(this, file);
       });
@@ -799,6 +857,7 @@ class Board extends React.Component {
       <div className="Board" ref={el => this.el = el}>
         <canvas className="Display" ref={el => this.canvas = el}></canvas>
         <div className="Cards" ref={el => this.cards = el}>
+          <Chat/>
           <div>In hand</div>
           <div className="Hand">
             <Resource type="wood" count={this.state.wood}/>

webpack.dev.js

@@ -14,7 +14,6 @@ console.log(`Using base: ${base}`);
 proxy[`${base}/`] = {
   target: "http://localhost:8911",
   bypass: function(req, res, proxyOptions) {
-    console.log(`Proxy test: ${req.url}`);
     if ((req.url.indexOf(`${base}/assets`) == 0) ||
       (req.url.indexOf(`${base}/dist`) == 0)) {
       return req.url.replace(base, "");