diff --git a/.DS_Store b/.DS_Store
index 5008ddf..79b6971 100644
Binary files a/.DS_Store and b/.DS_Store differ
diff --git a/simmadome/src/Game.css b/simmadome/src/Game.css
index 1832cad..fa2af13 100644
--- a/simmadome/src/Game.css
+++ b/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;
diff --git a/simmadome/src/Game.tsx b/simmadome/src/Game.tsx
index c9e47e1..b01a0b9 100644
--- a/simmadome/src/Game.tsx
+++ b/simmadome/src/Game.tsx
@@ -57,7 +57,7 @@ function Game(props: {gameId: string, state : GameState}) {
{state.display_top_of_inning ? state.away_name : state.home_name} batting.
-
{state.leagueoruser} (share)
+
{state.leagueoruser} (share)
);
diff --git a/simmadome/src/GamePage.tsx b/simmadome/src/GamePage.tsx
index 816108a..47839a3 100644
--- a/simmadome/src/GamePage.tsx
+++ b/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 (
{ game ?
diff --git a/simmadome/src/GamesPage.tsx b/simmadome/src/GamesPage.tsx
index 7e7c877..3a2ad97 100644
--- a/simmadome/src/GamesPage.tsx
+++ b/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 (
diff --git a/simmadome/src/index.css b/simmadome/src/index.css
index c08c49e..663440d 100644
--- a/simmadome/src/index.css
+++ b/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;
}
diff --git a/simmadome/src/index.tsx b/simmadome/src/index.tsx
index 9694cdd..1235dcc 100644
--- a/simmadome/src/index.tsx
+++ b/simmadome/src/index.tsx
@@ -12,8 +12,8 @@ ReactDOM.render(
- }/>
- }/>
+
+
,