add history box to game page

simmadome/src/CreateLeague.tsx

@@ -1,4 +1,5 @@
 import React, {useState, useRef, useLayoutEffect, useReducer} from 'react';
+import {removeIndex, replaceIndex, append, arrayOf, shallowClone, getUID, DistributiveOmit} from './util';
 import './CreateLeague.css';
 import twemoji from 'twemoji';
 
@@ -46,11 +47,6 @@ class TeamState {
 	}
 }
 
-let getUID = function() { // does NOT generate UUIDs. Meant to create list keys ONLY
-	let id = 0;
-	return function() { return id++ }
-}()
-
 // STRUCTURE REDUCER
 
 type StructureReducerActions = 
@@ -168,35 +164,6 @@ function LeagueOptionsReducer(state: LeagueOptionsState, action: OptionsReducerA
 	return newState
 }
 
-// UTIL
-
-function removeIndex(arr: any[], index: number) {
-	return arr.slice(0, index).concat(arr.slice(index+1));
-}
-
-function replaceIndex<T>(arr: T[], index: number, val: T) {
-	return arr.slice(0, index).concat([val]).concat(arr.slice(index+1));
-}
-
-function append<T>(arr: T[], val: T) {
-	return arr.concat([val]);
-} 
-
-function arrayOf<T>(length: number, func: (i: number) => T): T[] {
-	var out: T[] = [];
-	for (var i = 0; i < length; i++) {
-		out.push(func(i));
-	}
-	return out;
-}
-
-function shallowClone<T>(obj: T): T {
-	return Object.assign({}, obj);
-}
-
-type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
-//type DistributivePick<T, K extends keyof T> = T extends any ? Pick<T, K> : never;
-
 // CREATE LEAGUE
 
 let initLeagueStructure = {

simmadome/src/Game.css

@@ -1,5 +1,4 @@
 .game {
-    align-self: stretch;
     text-align: center;
     display: flex;
     flex-direction: column;

simmadome/src/GamePage.css

@@ -3,5 +3,35 @@
 	margin-left: 1rem;
 	margin-right: 1rem;
 	display: flex;
+	flex-direction: column;
+	align-items: center;
 	justify-content: space-around;
+}
+
+.history_box {
+	width: 100%;
+	margin-top: 3rem;
+	padding: 1rem;
+	padding-top: 0.5rem;
+	background: var(--background-main);
+	border-radius: 0.25rem;
+    width: 100%;
+    min-width: 32rem;
+    max-width: 44rem;
+    box-sizing: border-box;
+    border: 4px solid;
+    border-radius: 4px;
+    border-color: var(--highlight);
+    border-top: none;
+    border-right: none;
+    border-bottom: none;
+}
+
+.history_title {
+  font-size: 14pt;
+}
+
+.history_update {
+	height: 4rem;
+	margin: 0.5rem;
 }

simmadome/src/GamePage.tsx

@@ -1,22 +1,62 @@
-import React, {useState} from 'react';
+import React, {useState, useRef, useLayoutEffect} from 'react';
+import twemoji from 'twemoji';
 import ReactRouter from 'react-router';
 import {GameState, useListener} from './GamesUtil';
 import './GamePage.css';
 import Game from './Game';
+import {getUID} from './util';
 
 function GamePage(props: ReactRouter.RouteComponentProps<{id: string}>) {
-	let [games, setGames] = useState<[string, GameState][]>([]);
-	useListener((newGames) => setGames(newGames));
+	let [game, setGame] = useState<[string, GameState]|undefined>(undefined);
+	let history = useRef<[number, string, string][]>([]);
+
+	useListener((newGames) => {
+		let newGame = newGames.find((gamePair) => gamePair[0] === props.match.params.id);
+		setGame(newGame);
+		console.log(newGame);
+		if (newGame !== undefined && newGame[1].start_delay < 0 && newGame[1].end_delay > 8) {
+			history.current.unshift([getUID(), newGame[1].update_emoji, newGame[1].update_text]);
+			if (history.current.length > 8) {
+				history.current.pop();
+			}
+		}
+	});
+
+	if (game === undefined) {
+		return <div id="game_container">The game you're looking for either doesn't exist or has already ended.</div>
+	}
 
-	let game = games.find((game) => game[0] === props.match.params.id)
 	return (
 		<div id="game_container">
-	        { game ? 
-	        	<Game gameId={game[0]} state={game[1]}/> : 
-	        	"The game you're looking for either doesn't exist or has already ended."
+	        <Game gameId={game[0]} state={game[1]}/>
+	        { history.current.length > 0 ?
+	        	<GameHistory history={history.current}/> :
+	        	null
 	        }
 	    </div>
     );
 }
 
+function GameHistory(props: {history: [number, string, string][]}) {
+	let self = useRef<HTMLDivElement>(null);
+
+	useLayoutEffect(() => {
+		if (self.current) {
+			twemoji.parse(self.current);
+		}
+	})
+
+	return (
+		<div className="history_box" ref={self}>
+			<div className="history_title">History</div>
+			{props.history.map((update) => (
+				<div className="update history_update" key={update[0]}>
+			        <div className="update_emoji">{update[1]}</div>
+			        <div className="update_text">{update[2]}</div>
+			    </div>
+			))}
+		</div>
+	);
+}
+
 export default GamePage;

simmadome/src/GamesPage.css

@@ -76,9 +76,4 @@
         left: 50%;
         transform: translate(-50%, 0);
     }
-
-    .emptyslot {
-        border: none;
-        min-height: 0px;
-    }
 }

simmadome/src/GamesUtil.tsx

@@ -20,6 +20,8 @@ interface GameState {
   update_text: string
   is_league: boolean
   leagueoruser: string
+  start_delay: number
+  end_delay: number
 }
 
 type GameList = ([id: string, game: GameState] | null)[];

simmadome/src/util.tsx

@@ -0,0 +1,37 @@
+import {useRef} from 'react';
+
+
+function removeIndex(arr: any[], index: number) {
+	return arr.slice(0, index).concat(arr.slice(index+1));
+}
+
+function replaceIndex<T>(arr: T[], index: number, val: T) {
+	return arr.slice(0, index).concat([val]).concat(arr.slice(index+1));
+}
+
+function append<T>(arr: T[], val: T) {
+	return arr.concat([val]);
+} 
+
+function arrayOf<T>(length: number, func: (i: number) => T): T[] {
+	var out: T[] = [];
+	for (var i = 0; i < length; i++) {
+		out.push(func(i));
+	}
+	return out;
+}
+
+function shallowClone<T>(obj: T): T {
+	return Object.assign({}, obj);
+}
+
+let getUID = function() { // does NOT generate UUIDs. Meant to create list keys ONLY
+	let id = 0;
+	return function() { return id++ }
+}()
+
+type DistributiveOmit<T, K extends keyof any> = T extends any ? Omit<T, K> : never;
+//type DistributivePick<T, K extends keyof T> = T extends any ? Pick<T, K> : never;
+
+export {removeIndex, replaceIndex, append, arrayOf, shallowClone, getUID};
+export type {DistributiveOmit};