From e184c91515f2b8ea9f75c3c6185e8d749016e78c Mon Sep 17 00:00:00 2001 From: Elijah Steres Date: Thu, 14 Jan 2021 21:26:54 -0500 Subject: [PATCH] add history box to game page --- simmadome/src/CreateLeague.tsx | 35 +--------------------- simmadome/src/Game.css | 1 - simmadome/src/GamePage.css | 30 +++++++++++++++++++ simmadome/src/GamePage.tsx | 54 +++++++++++++++++++++++++++++----- simmadome/src/GamesPage.css | 5 ---- simmadome/src/GamesUtil.tsx | 2 ++ simmadome/src/util.tsx | 37 +++++++++++++++++++++++ 7 files changed, 117 insertions(+), 47 deletions(-) create mode 100644 simmadome/src/util.tsx diff --git a/simmadome/src/CreateLeague.tsx b/simmadome/src/CreateLeague.tsx index 3c23a22..29d0d6c 100644 --- a/simmadome/src/CreateLeague.tsx +++ b/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(arr: T[], index: number, val: T) { - return arr.slice(0, index).concat([val]).concat(arr.slice(index+1)); -} - -function append(arr: T[], val: T) { - return arr.concat([val]); -} - -function arrayOf(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(obj: T): T { - return Object.assign({}, obj); -} - -type DistributiveOmit = T extends any ? Omit : never; -//type DistributivePick = T extends any ? Pick : never; - // CREATE LEAGUE let initLeagueStructure = { diff --git a/simmadome/src/Game.css b/simmadome/src/Game.css index fa2af13..ca73b4d 100644 --- a/simmadome/src/Game.css +++ b/simmadome/src/Game.css @@ -1,5 +1,4 @@ .game { - align-self: stretch; text-align: center; display: flex; flex-direction: column; diff --git a/simmadome/src/GamePage.css b/simmadome/src/GamePage.css index 69f0cc7..e07cd9a 100644 --- a/simmadome/src/GamePage.css +++ b/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; } \ No newline at end of file diff --git a/simmadome/src/GamePage.tsx b/simmadome/src/GamePage.tsx index 47839a3..cdf2c31 100644 --- a/simmadome/src/GamePage.tsx +++ b/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
The game you're looking for either doesn't exist or has already ended.
+ } - let game = games.find((game) => game[0] === props.match.params.id) return (
- { game ? - : - "The game you're looking for either doesn't exist or has already ended." + + { history.current.length > 0 ? + : + null }
); } +function GameHistory(props: {history: [number, string, string][]}) { + let self = useRef(null); + + useLayoutEffect(() => { + if (self.current) { + twemoji.parse(self.current); + } + }) + + return ( +
+
History
+ {props.history.map((update) => ( +
+
{update[1]}
+
{update[2]}
+
+ ))} +
+ ); +} + export default GamePage; \ No newline at end of file diff --git a/simmadome/src/GamesPage.css b/simmadome/src/GamesPage.css index d99b790..8baef47 100644 --- a/simmadome/src/GamesPage.css +++ b/simmadome/src/GamesPage.css @@ -76,9 +76,4 @@ left: 50%; transform: translate(-50%, 0); } - - .emptyslot { - border: none; - min-height: 0px; - } } diff --git a/simmadome/src/GamesUtil.tsx b/simmadome/src/GamesUtil.tsx index d590399..57f0248 100644 --- a/simmadome/src/GamesUtil.tsx +++ b/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)[]; diff --git a/simmadome/src/util.tsx b/simmadome/src/util.tsx new file mode 100644 index 0000000..41fb20e --- /dev/null +++ b/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(arr: T[], index: number, val: T) { + return arr.slice(0, index).concat([val]).concat(arr.slice(index+1)); +} + +function append(arr: T[], val: T) { + return arr.concat([val]); +} + +function arrayOf(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(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 extends any ? Omit : never; +//type DistributivePick = T extends any ? Pick : never; + +export {removeIndex, replaceIndex, append, arrayOf, shallowClone, getUID}; +export type {DistributiveOmit}; \ No newline at end of file