organize things and switch to using /game/:id over /game?id=

simmadome/src/Game.css

@@ -1,10 +1,3 @@
-:root {
-    --background-main: #2f3136; /*discord dark theme background-secondary - the same color as the embeds*/
-    --background-secondary: #4f545c; /*discord's background-tertiary*/
-    --background-accent: #4f545c; /*discord's background-accent*/
-    --highlight: rgb(113, 54, 138); /*matteo purple™*/
-}
-
 .game {
     align-self: stretch;
     text-align: center;
@@ -124,7 +117,7 @@
 }
 
 .score {
-    background: var(--background-accent);
+    background: var(--background-secondary);
     width: 40px;
     min-width: 40px;
     height: 40px;

simmadome/src/Game.tsx

@@ -57,7 +57,7 @@ function Game(props: {gameId: string, state : GameState}) {
 			</div>
 			<div className="footer">
 			    <div className="batting">{state.display_top_of_inning ? state.away_name : state.home_name} batting.</div>
-			    <div className="leagueoruser">{state.leagueoruser} (<Link to={"/game?id=" + props.gameId}>share</Link>)</div>
+			    <div className="leagueoruser">{state.leagueoruser} (<Link to={"/game/" + props.gameId}>share</Link>)</div>
 			</div>
 		</div>
 	);

simmadome/src/GamePage.tsx

@@ -1,16 +1,14 @@
 import React, {useState} from 'react';
+import ReactRouter from 'react-router';
 import {GameState, useListener} from './GamesUtil';
 import './GamePage.css';
 import Game from './Game';
 
-function GamePage() {
-	let searchparams = new URLSearchParams(window.location.search);
-	let gameId = searchparams.get('id');
-
+function GamePage(props: ReactRouter.RouteComponentProps<{id: string}>) {
 	let [games, setGames] = useState<[string, GameState][]>([]);
 	useListener((newGames) => setGames(newGames));
 
-	let game = games.find((game) => game[0] === gameId)
+	let game = games.find((game) => game[0] === props.match.params.id)
 	return (
 		<div id="game_container">
 	        { game ? 

simmadome/src/GamesPage.tsx

@@ -109,17 +109,13 @@ function Grid(props: { gameList: GameList }) {
     }
   }
   
-  //set num cols after page loads
+  //set num cols after page loads, then add listener to update if window resizes
   useLayoutEffect(() => {
     setNumcols(getCols());
-  }, [])
-
-  //set num cols on page resize
-  useEffect(() => {
     window.addEventListener('resize', (event) => {
       setNumcols(getCols());
     })
-  })
+  }, [])
 
   let emptyKey = 0;
   return (

simmadome/src/index.css

@@ -1,11 +1,22 @@
 @import url('https://fonts.googleapis.com/css2?family=Alegreya&display=swap');
 @import url('https://fonts.googleapis.com/css2?family=Goldman:wght@700&display=swap');
+
+:root {
+    --background-main: #2f3136;
+    --background-secondary: #4f545c;
+    --background-tertiary: #202225;
+    --background-accent: #40444b;
+    --highlight: rgb(113, 54, 138); /*matteo purple™*/
+    --accent-red: #f04747;
+    --accent-green: rgb(67, 181, 129);
+}
+
 body {
     background-image: url("img/naturalblack.png");
 }
 /* Background pattern from Toptal Subtle Patterns */
 
-div, button, h1, h2, a {
+* {
     font-family: 'Alegreya', serif;
     color: white;
 }

simmadome/src/index.tsx

@@ -12,8 +12,8 @@ ReactDOM.render(
     <Router>
       <Header />
       <Switch>
-        <Route path="/game" component={() => <GamePage key={window.location.search}/>}/>
-        <Route path="/" component={() => <GamesPage />}/>
+        <Route path="/game/:id" component={GamePage}/>
+        <Route path="/" component={GamesPage}/>
       </Switch>
     </Router>
   </React.StrictMode>,