+
+ );
+ }
+
+ return (
+
+ League created succesfully!
+
+
+ {
+ setName(e.target.value);
+ setNameExists(false);
+ }}/>
+
+
+ );
+}
+
+function makeRequest(name:string, structure: LeagueStructureState, options:LeagueOptionsState) {
+ return JSON.stringify({
+ name: name,
+ structure: {
+ subleagues: structure.subleagues.map(subleague => ({
+ name: subleague.name,
+ divisions: subleague.divisions.map(division => ({
+ name: division.name,
+ teams: division.teams.map(team => team.name)
+ }))
+ }))
+ },
+ games_per_series: Number(options.games_series),
+ division_series: Number(options.intra_division_series),
+ inter_division_series: Number(options.inter_division_series),
+ inter_league_series: Number(options.inter_league_series),
+ top_postseason: Number(options.top_postseason),
+ wildcards: Number(options.wildcards)
+ });
+}
+
+function validRequest(name:string, structure: LeagueStructureState, options:LeagueOptionsState) {
+ return (
+ name !== "" &&
+ validNumber(options.games_series) &&
+ validNumber(options.intra_division_series) &&
+ validNumber(options.inter_division_series) &&
+ validNumber(options.inter_league_series) &&
+ validNumber(options.top_postseason) &&
+ validNumber(options.wildcards, 0) &&
+ structure.subleagues.length % 2 === 0 &&
+ structure.subleagues.every(subleague =>
+ subleague.name !== "" &&
+ subleague.divisions.every(division =>
+ division.name !== "" &&
+ division.teams.length >= 2
+ )
+ )
+ )
+}
+
+function validNumber(value: string, min = 1) {
+ return !isNaN(Number(value)) && Number(value) >= min
+}
+
+// LEAGUE STRUCUTRE
+
+function LeagueStructre(props: {state: LeagueStructureState, dispatch: React.Dispatch{
+ name === "" && showError ? "A name is required." :
+ nameExists && showError ? "A league by that name already exists" :
+ ""
+ }
+
+
+
+
+
+
+ {
+ !validRequest(name, structure, options) && showError ?
+ "Cannot create league. Some information is missing or invalid." : ""
+ }
+
+
+ );
+}
+
+function SubleagueHeaders(props: {subleagues: SubleagueState[], dispatch: React.Dispatch
+
+
+
+
+
+
+
+
+ {props.state.subleagues.length % 2 !== 0 && props.showError ? "Must have an even number of subleagues." : ""}
+
+
+
+ {props.subleagues.map((subleague, i) => (
+
+ );
+}
+
+function SubleageHeader(props: {state: SubleagueState, canDelete: boolean, dispatch:(action: DistributiveOmit
+
+ ))}
+
+ 1} dispatch={action =>
+ props.dispatch(Object.assign({subleague_index: i}, action))
+ }/>
+
+ {subleague.name === "" && props.showError ? "A name is required." : ""}
+
+
+ props.dispatch({type: 'rename_subleague', name: e.target.value})
+ }/>
+ {props.canDelete ? : null}
+
+ );
+}
+
+function Divisions(props: {subleagues: SubleagueState[], dispatch: React.Dispatch
+
+ ))}
+ );
+}
+
+function Division(props: {state: DivisionState, dispatch:(action: DistributiveOmit
+ {props.subleagues[0].divisions.length > 1 ?
+ :
+ null
+ }
+
+ {props.subleagues.map((subleague, si) => (
+
+
+ ))}
+
+
+ props.dispatch(Object.assign({subleague_index: si, division_index: di}, action))
+ } showError={props.showError}/>
+
+
+
+ );
+}
+
+// LEAGUE OPTIONS
+
+function LeagueOptions(props: {state: LeagueOptionsState, dispatch: React.Dispatch
+
+ props.dispatch({type: 'rename_division', name: e.target.value})
+ }/>
+
+ {props.state.teams.map((team, i) => (
+ {props.state.name === "" && props.showError ? "A name is required." : ""}
+
+
+ ))}
+ {team.name}
+
+
+ {
+ let params = new URLSearchParams({query: e.target.value, page_len: '5', page_num: '0'});
+ fetch("/api/teams/search?" + params.toString())
+ .then(response => response.json())
+ .then(data => setSearchResults(data));
+ setNewName(e.target.value);
+ }}/>
+
+ {searchResults.length > 0 && newName.length > 0 ?
+ (
+ {searchResults.map(result =>
+
):
+
+ }
+ {
+ props.dispatch({type:'add_team', name: result});
+ setNewName("");
+ if (newNameInput.current) {
+ newNameInput.current.focus();
+ }
+ }}>{result}
+ )}
+ {props.state.teams.length < 2 && props.showError ? "Must have at least 2 teams." : ""}
+
+
+ );
+}
+
+function NumberInput(props: {title: string, value: string, setValue: (newVal: string) => void, showError: boolean, minValue?:number}) {
+ let minValue = 1;
+ if (props.minValue !== undefined) {
+ minValue = props.minValue
+ }
+ return (
+
+
+ props.dispatch({type: 'set_games_series', value: value})} showError={props.showError}/>
+
+ props.dispatch({type: 'set_top_postseason', value: value})} showError={props.showError}/>
+
+ props.dispatch({type: 'set_wildcards', value: value})} showError={props.showError}/>
+
+
+
+ props.dispatch({type: 'set_intra_division_series', value: value})} showError={props.showError}/>
+
+ props.dispatch({type: 'set_inter_division_series', value: value})} showError={props.showError}/>
+
+ props.dispatch({type: 'set_inter_league_series', value: value})} showError={props.showError}/>
+
+
+
+ );
+}
+
+export default CreateLeague;
\ No newline at end of file
diff --git a/static/css/game.css b/simmadome/src/Game.css
similarity index 89%
rename from static/css/game.css
rename to simmadome/src/Game.css
index c60f230..ca73b4d 100644
--- a/static/css/game.css
+++ b/simmadome/src/Game.css
@@ -1,13 +1,4 @@
-
-: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;
display: flex;
flex-direction: column;
@@ -125,7 +116,7 @@
}
.score {
- background: var(--background-accent);
+ background: var(--background-secondary);
width: 40px;
min-width: 40px;
height: 40px;
@@ -170,7 +161,7 @@
border-radius: 4px;
align-items: center;
display: flex;
- justify-content: start;
+ justify-content: flex-start;
}
.update_emoji {
@@ -193,7 +184,7 @@
height: 60px;
}
-.base_2 {
+.field > .base {
margin-bottom: -25%
}
diff --git a/simmadome/src/Game.tsx b/simmadome/src/Game.tsx
new file mode 100644
index 0000000..af1a50d
--- /dev/null
+++ b/simmadome/src/Game.tsx
@@ -0,0 +1,85 @@
+import { GameState } from './GamesUtil';
+import twemoji from 'twemoji';
+import React, { useRef, useLayoutEffect } from 'react';
+import { Link } from 'react-router-dom';
+import './Game.css';
+import base_filled from './img/base_filled.png';
+import base_empty from './img/base_empty.png';
+import out_filled from './img/out_out.png';
+import out_empty from './img/out_in.png';
+
+function Game(props: {gameId: string, state : GameState}) {
+ let self: React.MutableRefObject{props.title}
+ props.setValue(e.target.value)}/>
+ {(!isNaN(Number(props.value)) || Number(props.value) < minValue) && props.showError ? "Must be a number greater than "+minValue : ""}
+
+
+ );
+}
+
+function Team(props: {name: string, score: number}) {
+ return (
+
+
+ Inning: {state.display_top_of_inning ? "🔼" : "🔽"} {state.display_inning}/{state.max_innings}
+ {state.title}
+ {state.weather_emoji} {state.weather_text}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ OUTS
+
+ {[1, 2].map((out) =>
+
+
+ PITCHER
+ {state.pitcher}
+ BATTER
+ {state.batter}
+
+
+ {state.update_emoji}
+ {state.update_text}
+
+
+ {state.display_top_of_inning ? state.away_name : state.home_name} batting.
+ {state.leagueoruser} (share)
+
+
+ );
+}
+
+function Base(props: {name: string | null}) {
+ return (
+ { props.name }
+ { props.score }
+ The game you're looking for either doesn't exist or has already ended.
+ }
+
+ return (
+
+
+ { history.current.length > 0 ?
+ :
+ null
+ }
+
+ );
+}
+
+function GameHistory(props: {history: [number, string, string][]}) {
+ let self = useRef
+
+ );
+}
+
+export default GamePage;
\ No newline at end of file
diff --git a/static/css/games_page.css b/simmadome/src/GamesPage.css
similarity index 90%
rename from static/css/games_page.css
rename to simmadome/src/GamesPage.css
index d8d9e02..8baef47 100644
--- a/static/css/games_page.css
+++ b/simmadome/src/GamesPage.css
@@ -5,10 +5,16 @@
grid-auto-flow: row;
}
+.slot_container {
+ display: flex;
+ justify-content: space-around;
+}
+
.emptyslot, .game {
min-height: 18.75rem;
- justify-self: center;
max-width: 44rem;
+ min-width: 32rem;
+ width: 100%;
}
#filters {
@@ -58,8 +64,6 @@
.emptyslot {
border: 2px dashed white;
border-radius: 15px;
- align-self: stretch;
- justify-self: stretch;
text-align: center;
color: white;
}
@@ -72,9 +76,4 @@
left: 50%;
transform: translate(-50%, 0);
}
-
- .emptyslot {
- border: none;
- min-height: 0px;
- }
}
diff --git a/simmadome/src/GamesPage.tsx b/simmadome/src/GamesPage.tsx
new file mode 100644
index 0000000..4fdaacb
--- /dev/null
+++ b/simmadome/src/GamesPage.tsx
@@ -0,0 +1,142 @@
+import React, {useState, useRef, useEffect, useLayoutEffect} from 'react';
+import {GameState, GameList, useListener} from './GamesUtil';
+import {Link} from 'react-router-dom';
+import './GamesPage.css';
+import Game from './Game';
+
+function GamesPage() {
+ let [search, setSearch] = useState(window.location.search);
+ useEffect(() => {
+ setSearch(window.location.search);
+ //eslint-disable-next-line react-hooks/exhaustive-deps
+ }, [window.location.search])
+
+ let searchparams = new URLSearchParams(search);
+ let filter = searchparams.get('league') ?? ""
+
+ let [games, setGames] = useState<[string, GameState][]>([]);
+ useListener(setGames);
+
+ let filters = useRef(filter !== "" ? [filter] : []);
+ games.forEach((game) => { if (game[1].is_league && !filters.current.includes(game[1].leagueoruser)) { filters.current.push(game[1].leagueoruser) }});
+ filters.current = filters.current.filter((f) => games.find((game) => game && game[1].is_league && game[1].leagueoruser === f) || f === filter);
+
+ let gameList = useRef<(string | null)[]>([]);
+ let filterGames = games.filter((game, i) => filter === "" || game[1].leagueoruser === filter);
+ updateList(gameList.current, filterGames, searchparams.get('game'));
+
+ return (
+ <>
+ History
+ {props.history.map((update) => (
+
+
+ ))}
+ {update[1]}
+ {update[2]}
+