diff --git a/client/src/Table.js b/client/src/Table.js index 4d1ba0f..cb50354 100755 --- a/client/src/Table.js +++ b/client/src/Table.js @@ -17,6 +17,8 @@ import Resource from './Resource.js'; import ViewCard from './ViewCard.js'; import Winner from './Winner.js'; import ChooseCard from './ChooseCard.js'; +import { CircularProgress } from "@material-ui/core"; +import 'moment-timezone'; /* Start of withRouter polyfill */ // https://reactrouter.com/docs/en/v6/faq#what-happened-to-withrouter-i-need-it @@ -218,7 +220,7 @@ const Chat = ({ table }) => { } const name = table.game ? table.game.name : "Why no game?"; - const startTime = table.game ? table.game.startTime : Date.now(); + const elapsed = table.game ? (table.game.timestamp - table.game.startTime) : undefined; return ( @@ -228,7 +230,7 @@ const Chat = ({ table }) => { disabled={!name} onChange={chatInput} onKeyPress={chatKeyPress} - label={({Date.now()-startTime})} variant="outlined"/> + label={elapsed && } variant="outlined"/> ); } @@ -523,7 +525,8 @@ class Table extends React.Component { error: "", signature: "", buildActive: false, - cardActive: undefined + cardActive: undefined, + loading: 0 }; this.componentDidMount = this.componentDidMount.bind(this); this.updateDimensions = this.updateDimensions.bind(this); @@ -585,6 +588,8 @@ class Table extends React.Component { value = ''; } + this.setState({ loading: this.state.loading + 1 }); + return window.fetch(`${base}/api/v1/games/${this.state.game.id}/${action}/${value}`, { method: "PUT", cache: 'no-cache', @@ -607,6 +612,7 @@ class Table extends React.Component { console.error(error); this.setState({error: error.message}); }).then(() => { + this.setState({ loading: this.state.loading - 1 }); this.resetGameLoad(); }); } @@ -685,6 +691,7 @@ class Table extends React.Component { return; } + this.setState({ loading: this.state.loading + 1 }); return window.fetch(`${base}/api/v1/games/${this.state.game.id}`, { method: "GET", cache: 'no-cache', @@ -707,6 +714,7 @@ class Table extends React.Component { console.error(error); this.setState({error: error.message}); }).then(() => { + this.setState({ loading: this.state.loading - 1 }); this.resetGameLoad(); }); } @@ -725,6 +733,7 @@ class Table extends React.Component { this.loadTimer = null; } + this.setState({ loading: this.state.loading + 1 }); return window.fetch(`${base}/api/v1/games/${this.state.game.id}/state/${state}`, { method: "PUT", cache: 'no-cache', @@ -746,6 +755,7 @@ class Table extends React.Component { console.error(error); this.setState({error: error.message}); }).then(() => { + this.setState({ loading: this.state.loading + 1 }); this.resetGameLoad(); return this.game.state; }); @@ -952,6 +962,7 @@ class Table extends React.Component { params.method = "POST"; } + this.setState({ loading: this.state.loading + 1 }); window.fetch(params.url, { method: params.method, cache: 'no-cache', @@ -1000,6 +1011,7 @@ class Table extends React.Component { console.error(error); this.setState({error: error.message}); }).then(() => { + this.setState({ loading: this.state.loading - 1 }); this.resetGameLoad(); }); @@ -1060,6 +1072,9 @@ class Table extends React.Component { return (
+ { this.state.loading > 0 && + + }