From 5031e9e5a45fb507a0028c3782ecd0bed3c89afd Mon Sep 17 00:00:00 2001 From: Alex Frantz Date: Sun, 7 Sep 2025 20:14:57 -0400 Subject: [PATCH] add both fantasy teams --- src/components/FantasyStatus.tsx | 165 +++++++++++++++++++++---------- src/components/GameComponent.tsx | 77 --------------- src/pages/App.tsx | 4 - src/utils/types.ts | 14 ++- 4 files changed, 123 insertions(+), 137 deletions(-) delete mode 100644 src/components/GameComponent.tsx diff --git a/src/components/FantasyStatus.tsx b/src/components/FantasyStatus.tsx index 61dc776..28d68e2 100644 --- a/src/components/FantasyStatus.tsx +++ b/src/components/FantasyStatus.tsx @@ -1,80 +1,137 @@ import { useEffect, useState } from "react"; import PlayerCell from "./fantasy/PlayerCell"; import { - type NFLRosterState, - type NFLPlayer, - NFLState, NFLMatchupState, + NFLPlayer, + SleeperUsers, + type NFLRosterState, + type NFLState, } from "../utils/types"; export default function FantasyStatus() { const USER_ID = "1263620186439696384"; + const OPP_USER_ID = "1032518341627600896"; const LEAGUE_BASE_URL = "https://api.sleeper.app/v1/league/1263620000418119680/rosters"; const NFL_STATE_URL = "https://api.sleeper.app/v1/state/nfl"; const MATCHUPS_URL = "https://api.sleeper.app/v1/league/1263620000418119680/matchups/"; + const LEAGUE_USERS = + "https://api.sleeper.app/v1/league/1263620000418119680/users"; + const PLAYERS_URL = "https://api.alexav.gg/v4/football/players"; - const [roster, setRoster] = useState(null); - const [players, setPlayers] = useState(null); + const [personalRoster, setPersonalRoster] = useState( + null + ); + const [opposingRoster, setOpposingRoster] = useState( + null + ); const [nflState, setNflState] = useState(null); - const [matchup, setMatchup] = useState(null); + // const [roster, setRoster] = useState(null); + // const [players, setPlayers] = useState(null); + // const [matchup, setMatchup] = useState(null); + // fetch roster information useEffect(() => { - fetch(NFL_STATE_URL).then(async (res) => { - if (res.ok) { - const data = await res.json(); - setNflState(data); - } - }); - fetch(LEAGUE_BASE_URL).then(async (res) => { - if (res.ok) { - const data = await res.json(); - setRoster( - data.filter((v: NFLRosterState) => v.owner_id === USER_ID)[0] - ); - } - }); + async function fetchData() { + const nflState = (await fetch(NFL_STATE_URL).then((res) => + res.json() + )) as NFLState; + const rosters = (await fetch(LEAGUE_BASE_URL).then((res) => + res.json() + )) as NFLRosterState[]; + const matchups = (await fetch(MATCHUPS_URL + nflState.week).then((res) => + res.json() + )) as NFLMatchupState[]; + const users = (await fetch(LEAGUE_USERS).then((res) => + res.json() + )) as SleeperUser[]; + + // rosters + const ownMatchup = matchups[1]; + const oppMatchup = matchups[0]; + + const ownMatchupPlayers = await fetch( + PLAYERS_URL + "?players=" + ownMatchup.starters + ).then((res) => res.json()); + const oppMatchupPlayers = await fetch( + PLAYERS_URL + "?players=" + oppMatchup.starters + ).then((res) => res.json()); + + setNflState(nflState); + setPersonalRoster({ + ...rosters.filter((v) => v.owner_id === USER_ID)[0], + matchup: matchups[1], + players: ownMatchupPlayers.playerInfo, + user: users[1], + }); + setOpposingRoster({ + ...rosters.filter((v) => v.owner_id === OPP_USER_ID)[0], + matchup: matchups[0], + players: oppMatchupPlayers.playerInfo, + user: users[0], + }); + } + + fetchData(); }, []); useEffect(() => { - if (roster) { - const players = roster.starters.join(","); - - fetch( - "https://api.alexav.gg/v4/football/players?players=" + players - ).then(async (res) => { - if (res.ok) { - const data = await res.json(); - setPlayers(data.playerInfo); - } - }); - } - }, [roster]); - useEffect(() => { - if (nflState && !matchup) { - fetch(MATCHUPS_URL + nflState.display_week).then(async (res) => { - if (res.ok) { - const data = await res.json(); - setMatchup(data[1]); - } - }); - } - }, [nflState]); + console.log(personalRoster, opposingRoster); + }, [personalRoster, opposingRoster]); return (
- -

Fantasy

- +
+ +

Fantasy

+ +
+ +

+ {personalRoster?.user.metadata.team_name} |{" "} + {personalRoster?.matchup.points} +

+
-
- {players?.map((v, k) => { - return ( -
- -
- ); - })} +
+ {personalRoster?.players?.map((v, k) => { + return ( +
+ +
+ ); + })} +
+ +
+ +

+ {opposingRoster?.user.metadata.team_name} |{" "} + {opposingRoster?.matchup.points} +

+
+ +
+ {opposingRoster?.players?.map((v, k) => { + return ( +
+ +
+ ); + })} +
); diff --git a/src/components/GameComponent.tsx b/src/components/GameComponent.tsx deleted file mode 100644 index af0e596..0000000 --- a/src/components/GameComponent.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { useState, useEffect } from "react"; - -type GameObject = { - game: string; - startedOn: number; - finishedAt?: number; - finished: boolean; -}; - -export default function GameComponent() { - const [game, setGame] = useState(null); - const [failedFetch, setFailedFetch] = useState(false); - - useEffect(() => { - async function fetchGame() { - const response = await fetch( - "https://api.alexav.gg/v4/tracker/latestGame" - ); - if (response.ok) { - const data = await response.json(); - if (data.data && data.data.game) { - setGame(data.data as GameObject); - } else setFailedFetch(true); - } else setFailedFetch(true); - } - - setTimeout(() => { - fetchGame(); - }, 60000); - fetchGame(); - }, []); - - if (game) { - const dateOrTime = () => { - if (game.finished && game.finishedAt) { - const currentDate = new Date(); - const finishedDate = new Date(game.finishedAt); - - if ( - currentDate.toLocaleDateString() === finishedDate.toLocaleDateString() - ) { - return `last played ${game.game} at ${finishedDate.toLocaleTimeString()}`; - } else { - return `last played ${game.game} on ${finishedDate.toLocaleDateString()}`; - } - } else { - return `playing ${game.game}`; - } - }; - - return ( - - ); - } else { - if (failedFetch) { - return ( -
-

not playing anything

-
- ); - } else { - return ( -
-

loading game..

-
- ); - } - } -} diff --git a/src/pages/App.tsx b/src/pages/App.tsx index 25287fe..0821175 100644 --- a/src/pages/App.tsx +++ b/src/pages/App.tsx @@ -1,15 +1,12 @@ import Layout from "../components/Layout"; import MusicComponent from "../components/MusicComponent"; import TVComponent from "../components/TVComponent"; -import GameComponent from "../components/GameComponent"; import RandomLyric from "../components/RandomLyric"; import FantasyStatus from "../components/FantasyStatus"; -import Countdown from "../components/Countdown"; export default function App() { return ( -