THIS IS THE END OF THE FUNCTIONALITY SO FAR; - } - } - break; - case 'active': - if (!player) { - message = <>{message}This game is no longer in the lobby.
TODO: Override game state to allow Lobby mode while in-game; - } else { - message = <>{message}
THIS IS THE END OF THE FUNCTIONALITY SO FAR; - } - break; - case null: - case undefined: - case '': - message = <>{message}The game is in a wonky state. Sorry :(; - break; - default: - message = <>{message}Game state is: {this.game.state}; - break; - } - } - this.setState({ message: message }); + if (!game) { + console.log("Game not set with initial board. Rendering nothing."); + return <>; } - componentDidMount() { - this.start = new Date(); + return ( + + ); +}; - window.addEventListener("touchmove", this.mouseMove); - window.addEventListener("mousemove", this.mouseMove); - window.addEventListener("resize", this.updateDimensions); - - const params = {}; - if (this.id) { - console.log(`Loading game: ${this.id}`); - params.url = `${base}/api/v1/games/${this.id}`; - params.method = "GET" - } else { - console.log("Requesting new game."); - params.url = `${base}/api/v1/games/`; - params.method = "POST"; - } - - window.fetch(params.url, { - method: params.method, - cache: 'no-cache', - credentials: 'same-origin', - headers: { - 'Content-Type': 'application/json' - }, -// body: JSON.stringify(data) // body data type must match "Content-Type" header - }).then((res) => { - if (res.status < 400) { - return res; - } - let error; - if (!this.id) { - error = `Unable to create new game.`; - throw new Error(error); - } - - error = `Unable to find game ${this.id}. Starting new game.` - console.log(error); - this.setState({ error: error }); - - params.url = `${base}/api/v1/games/${this.id}`; - params.method = "POST"; - - return window.fetch(params.url, { - method: params.method, - cache: 'no-cache', - credentials: 'same-origin', - headers: { - 'Content-Type': 'application/json' - } - }); - }).then((res) => { - return res.json(); - }).then((game) => { -// console.log (`Game ${game.id} loaded ${moment().format()}.`); - - if (!this.id) { - history.push(`${gamesPath}/${game.id}`); - } - - this.updateGame(game); - this.updateMessage(); - - this.setState({ game: game, error: "" }); - }).catch((error) => { - console.error(error); - this.setState({error: error.message}); - }).then(() => { - this.resetGameLoad(); - }); - - setTimeout(this.updateDimensions, 1000); - } - - componentWillUnmount() { - if (this.loadTimer) { - clearTimeout(this.loadTimer); - } - if (this.updateSizeTimer) { - clearTimeout(this.updateSizeTimer); - this.updateSizeTimer = 0; - } - - window.removeEventListener("mousemove", this.mouseMove); - window.removeEventListener("touchmove", this.mouseMove); - window.removeEventListener("resize", this.updateDimensions); - } - - render() { - const game = this.state.game; - return ( -
this.el = el}>
-
-
- { game &&
- );
- }
-}
-export default withRouter(props =>
- { this.state.message }
- {(this.state.pickName || !this.game.name) && }
- {(!this.state.pickName && this.game.name) && <>
-
-
-
- }
-
}
-
- this.cards = el}>
- { game && game.state === "active" && <>
-
-
- { this.state.error && In hand
-
-
-
-
-
-
-
- Available to play
-
-
-
-
- Points
-
-
-
-
-
-
-
-
- }
- Stats
-
-
- Points: 7
- Cards: {this.state.total}
- Roads remaining: 4
- Longest road: 7
- Cities remaining: 4
- Settlements remaining: 5
- {this.state.error}
+ );
+}
+
+const PlayerColor = ({ color }) => {
+ const classes = useStyles();
+ return (
+
+
+ );
+ }
+};
+
+class Development extends React.Component {
+ render() {
+ const array = [];
+ for (let i = 0; i < this.props.count; i++) {
+ if (this.props.type.match(/-$/)) {
+ array.push(i + 1);//Math.ceil(Math.random() * this.props.max));
+ } else {
+ array.push("");
+ }
+ }
+ return (
+
+ { React.Children.map(array, i => (
+
+ );
+ }
+};
+
+class Resource extends React.Component {
+ render() {
+ const array = new Array(Number(this.props.count ? this.props.count : 0));
+ return (
+ <>
+ { array.length > 0 &&
+
+
+ )) }
+
+ { React.Children.map(array, i => (
+
+ }
+
+ );
+ }
+};
+
+const Chat = ({ table, promoteGameState }) => {
+ const [lastTop, setLastTop] = useState(0),
+ [autoScroll, setAutoscroll] = useState(true),
+ [scrollTime, setScrollTime] = useState(0);
+
+ const chatInput = (event) => {
+ };
+
+ const chatKeyPress = (event) => {
+ if (event.key === "Enter") {
+ if (!autoScroll) {
+ setAutoscroll(true);
+ }
+
+ promoteGameState({
+ chat: {
+ player: table.game.color ? table.game.color : undefined,
+ message: event.target.value
+ }
+ });
+ event.target.value = "";
+ }
+ };
+
+ const chatScroll = (event) => {
+ const chatList = event.target,
+ fromBottom = Math.round(Math.abs((chatList.scrollHeight - chatList.offsetHeight) - chatList.scrollTop));
+
+ /* If scroll is within 20 pixels of the bottom, turn on auto-scroll */
+ const shouldAutoscroll = (fromBottom < 20);
+
+ if (shouldAutoscroll !== autoScroll) {
+ setAutoscroll(shouldAutoscroll);
+ }
+
+ /* If the list should not auto scroll, then cache the current
+ * top of the list and record when we did this so we honor
+ * the auto-scroll for at least 500ms */
+ if (!shouldAutoscroll) {
+ const target = Math.round(chatList.scrollTop);
+ if (target !== lastTop) {
+ setLastTop(target);
+ setScrollTime(Date.now());
+ }
+ }
+ };
+
+ useEffect(() => {
+ const chatList = document.getElementById("ChatList"),
+ currentTop = Math.round(chatList.scrollTop);
+
+ if (autoScroll) {
+ /* Auto-scroll to the bottom of the chat window */
+ const target = Math.round(chatList.scrollHeight - chatList.offsetHeight);
+ if (currentTop !== target) {
+ chatList.scrollTop = target;
+ }
+ return;
+ }
+
+ /* Maintain current position in scrolled view if the user hasn't
+ * been scrolling in the past 0.5s */
+ if ((Date.now() - scrollTime) > 500 && currentTop !== lastTop) {
+ chatList.scrollTop = lastTop;
+ }
+ });
+
+ //const timeDelta = game.timestamp - Date.now();
+ if (!table.game) {
+ console.log("Why no game?");
+ }
+
+ const messages = table.game && table.game.chat.map((item, index) => {
+ /* If the date is in the future, set it to now */
+ const name = getPlayerName(table.game.sessions, item.from),
+ from = name ? `${name}, ` : '';
+ return (
+
+
+ )) }
+ -
+ { messages }
+
{ inLobby && selectable && toggleSelected(color) }}
+ key={`player-${color}`}>
+
+
+ { item.status + ' ' }
+ { item.status !== 'Not active' && Date.now() ? Date.now() : item.lastActive}/>}
+ )} />
+ { !inLobby && table.game.color === color &&
+
+ }
+
+ ));
+ }
+ }
+
+ return (
+ -
+ { players }
+
THIS IS THE END OF THE FUNCTIONALITY SO FAR; + } + } + break; + case 'active': + if (!player) { + message = <>{message}This game is no longer in the lobby.
TODO: Override game state to allow Lobby mode while in-game; + } else { + message = <>{message}
THIS IS THE END OF THE FUNCTIONALITY SO FAR; + } + break; + case null: + case undefined: + case '': + message = <>{message}The game is in a wonky state. Sorry :(; + break; + default: + message = <>{message}Game state is: {this.game.state}; + break; + } + } + this.setState({ message: message }); + } + + componentDidMount() { + this.start = new Date(); + + const params = {}; + if (this.id) { + console.log(`Loading game: ${this.id}`); + params.url = `${base}/api/v1/games/${this.id}`; + params.method = "GET" + } else { + console.log("Requesting new game."); + params.url = `${base}/api/v1/games/`; + params.method = "POST"; + } + + window.fetch(params.url, { + method: params.method, + cache: 'no-cache', + credentials: 'same-origin', + headers: { + 'Content-Type': 'application/json' + }, +// body: JSON.stringify(data) // body data type must match "Content-Type" header + }).then((res) => { + if (res.status < 400) { + return res; + } + let error; + if (!this.id) { + error = `Unable to create new game.`; + throw new Error(error); + } + + error = `Unable to find game ${this.id}. Starting new game.` + console.log(error); + this.setState({ error: error }); + + params.url = `${base}/api/v1/games/${this.id}`; + params.method = "POST"; + + return window.fetch(params.url, { + method: params.method, + cache: 'no-cache', + credentials: 'same-origin', + headers: { + 'Content-Type': 'application/json' + } + }); + }).then((res) => { + return res.json(); + }).then((game) => { +// console.log (`Game ${game.id} loaded ${moment().format()}.`); + + if (!this.id) { + history.push(`${gamesPath}/${game.id}`); + } + + this.updateGame(game); + this.updateMessage(); + + this.setState({ game: game, error: "" }); + }).catch((error) => { + console.error(error); + this.setState({error: error.message}); + }).then(() => { + this.resetGameLoad(); + }); + + setTimeout(this.updateDimensions, 1000); + } + + componentWillUnmount() { + if (this.loadTimer) { + clearTimeout(this.loadTimer); + } + if (this.updateSizeTimer) { + clearTimeout(this.updateSizeTimer); + this.updateSizeTimer = 0; + } + } + + render() { + const game = this.state.game; + + return ( +
this.el = el}>
+
+ { game &&
+ );
+ }
+}
+export default withRouter(props =>
+ { this.state.message }
+ {(this.state.pickName || !game.name) && }
+ {(!this.state.pickName && game.name) && <>
+
+
+
+ }
+
}
+
+ this.cards = el}>
+ { game && game.state === "active" && <>
+
+
+ { this.state.error && In hand
+
+
+
+
+
+
+
+ Available to play
+
+
+
+
+ Points
+
+
+
+
+
+
+
+
+ }
+ Stats
+
+
+ Points: 7
+ Cards: {this.state.total}
+ Roads remaining: 4
+ Longest road: 7
+ Cities remaining: 4
+ Settlements remaining: 5
+ {this.state.error}