From 48db64f0c503dd84a031469bf18112bc7e26e28c Mon Sep 17 00:00:00 2001 From: Jake Tockerman Date: Thu, 21 Apr 2022 16:12:50 -0400 Subject: [PATCH 01/11] hover stuff --- extension/src/components/Live.tsx | 107 +++++++++++++++++++++-------- extension/src/types/Live_Types.tsx | 9 ++- 2 files changed, 86 insertions(+), 30 deletions(-) diff --git a/extension/src/components/Live.tsx b/extension/src/components/Live.tsx index f62e5bf..592b389 100644 --- a/extension/src/components/Live.tsx +++ b/extension/src/components/Live.tsx @@ -4,7 +4,6 @@ import axios, { AxiosError } from "axios"; import { ServersType } from "../types/App_Types"; import PropTypes, { InferProps } from "prop-types"; import { Stage, Layer, Rect, Circle, Text, Group, Line } from "react-konva"; -// import { NumberLiteralType } from "typescript"; import { gameData_Response, @@ -13,13 +12,10 @@ import { liveData_Type, playerID, team_Type, + pitchHover_Type, } from "../types/Live_Types"; import { useInterval } from "usehooks-ts"; import { Link } from "react-router-dom"; -// import { render } from "react-dom"; -// import { isAbsolute } from "path/posix"; - -// import { Accordion } from "react-bootstrap"; Live.propTypes = { servers: PropTypes.object.isRequired as never as ServersType, @@ -27,7 +23,8 @@ Live.propTypes = { function Live(props: InferProps) { const [url, setUrl] = useState(""); - const [gameID, setGameID] = useState(""); //634198 Example Game + const [gameID, setGameID] = useState("634202"); //634198 Example Game + const [pitchHover, setPitchHover] = useState(); const [gameData, setGameData] = useState(); const [liveData, setLiveData] = useState(); const [liveDelay, setLiveDelay] = useState(100); @@ -226,9 +223,11 @@ function Live(props: InferProps) { ); } - function pitchInfo(index: number) { - console.log(index); - } + // function pitchInfo(e: Konva.KonvaEventObject, index: number) { + // console.log(e.target.parent?.parent); + // console.log(liveData?.plays.currentPlay.playEvents[index]); + // console.log(e); + // } function display_Pitch( index: number, @@ -281,8 +280,17 @@ function Live(props: InferProps) { radius={5} stroke={ballColor} fill={ballColor} - onClick={() => { - pitchInfo(index); + onMouseOver={() => { + setPitchHover({ + pitchXPixels: x, + pitchYPixels: 299, + pitch: liveData?.plays.currentPlay.playEvents[ + index + ], + }); + }} + onMouseOut={() => { + setPitchHover(null); }} /> ) { radius={5} stroke={ballColor} fill={ballColor} - onClick={() => { - pitchInfo(index); + onMouseOver={() => { + setPitchHover({ + pitchXPixels: x, + pitchYPixels: z, + pitch: liveData?.plays.currentPlay.playEvents[ + index + ], + }); + }} + onMouseOut={() => { + setPitchHover(null); }} /> ) { return; } + function drawHover(width: number, height: number) { + if (pitchHover && pitchHover.pitch) { + const boxWidth = + pitchHover.pitch.details.type.description.length * 7; + const boxHeight = 80; + const drawX = + pitchHover.pitchXPixels + boxWidth > width + ? pitchHover.pitchXPixels - boxWidth + : pitchHover.pitchXPixels; + console.log(pitchHover.pitchXPixels + boxWidth, width); + console.log(pitchHover.pitch.details.type.description); + console.log(height); + return ( + + + + + + ); + } + return; + } + function display_Strikezone() { const balls = liveData?.plays.currentPlay.count.balls; const strikes = liveData?.plays.currentPlay.count.strikes; @@ -444,28 +504,16 @@ function Live(props: InferProps) { fill={"#002774"} /> - - {/* */} - {drawOuts(strikezoneOffsetX)} {drawBaseRunners()} + {drawOuts(strikezoneOffsetX)} ) { pitchNum++ ); })} + {drawHover(stageWidth, stageHeight)} diff --git a/extension/src/types/Live_Types.tsx b/extension/src/types/Live_Types.tsx index a68e4e1..27eed27 100644 --- a/extension/src/types/Live_Types.tsx +++ b/extension/src/types/Live_Types.tsx @@ -259,7 +259,7 @@ interface details_Type { interface type_Type { code: string; - description: string; //Type Of Pitch ? + description: string; } interface call_Type { @@ -415,6 +415,12 @@ interface batting_Type { triples: number; } +interface pitchHover_Type { + pitch: playEvents_Type | undefined; + pitchXPixels: number; + pitchYPixels: number; +} + export type { gameData_Response, gameData_Type, @@ -462,4 +468,5 @@ export type { playerID, live_Player_Type, position_Type, + pitchHover_Type, }; From 0402ad96a29643c723a6f4a61a416460f4372dcf Mon Sep 17 00:00:00 2001 From: Jake Tockerman Date: Thu, 21 Apr 2022 18:27:34 -0400 Subject: [PATCH 02/11] removed console.logs and finished hovers --- extension/src/components/Live.tsx | 207 +++++++++++++++++-------- extension/src/components/Player.tsx | 18 +-- extension/src/components/Standings.tsx | 1 - extension/src/types/Live_Types.tsx | 2 + 4 files changed, 157 insertions(+), 71 deletions(-) diff --git a/extension/src/components/Live.tsx b/extension/src/components/Live.tsx index 592b389..b680920 100644 --- a/extension/src/components/Live.tsx +++ b/extension/src/components/Live.tsx @@ -23,7 +23,7 @@ Live.propTypes = { function Live(props: InferProps) { const [url, setUrl] = useState(""); - const [gameID, setGameID] = useState("634202"); //634198 Example Game + const [gameID, setGameID] = useState("634208"); //634198 Example Game const [pitchHover, setPitchHover] = useState(); const [gameData, setGameData] = useState(); const [liveData, setLiveData] = useState(); @@ -56,7 +56,6 @@ function Live(props: InferProps) { props.servers.mlbstats + "liveData/" + gameID ) .then((response) => { - //console.log(response.data); setLiveData(response.data.result); setLiveDelay(10000); }) @@ -116,7 +115,7 @@ function Live(props: InferProps) { {" "} { gameData?.players[("ID" + playerIDNum) as playerID] - .lastInitName + ?.lastInitName }{" "} {" "} @@ -152,7 +151,7 @@ function Live(props: InferProps) { {" "} { gameData?.players[("ID" + playerIDNum) as playerID] - .lastInitName + ?.lastInitName }{" "} {" "} @@ -188,7 +187,7 @@ function Live(props: InferProps) { {" "} { gameData?.players[("ID" + playerIDNum) as playerID] - .lastInitName + ?.lastInitName }{" "} {" "} @@ -223,12 +222,6 @@ function Live(props: InferProps) { ); } - // function pitchInfo(e: Konva.KonvaEventObject, index: number) { - // console.log(e.target.parent?.parent); - // console.log(liveData?.plays.currentPlay.playEvents[index]); - // console.log(e); - // } - function display_Pitch( index: number, height: number, @@ -238,13 +231,8 @@ function Live(props: InferProps) { pitchNum: number ) { const plateWidth = 17 / 12; - // const call = liveData?.plays.currentPlay.playEvents[index].details.call?.description; - // const strike = liveData?.plays.currentPlay.playEvents[index].details?.isStrike; - // const pitchType = liveData?.plays.currentPlay.playEvents[index].details.type?.description; const ballColor = liveData?.plays.currentPlay.playEvents[index].details?.ballColor; - // const pitchSpeed = liveData?.plays.currentPlay.playEvents[index].pitchData?.startSpeed; - const strikezoneTop = liveData?.plays.currentPlay.playEvents[index].pitchData ?.strikeZoneTop; @@ -272,58 +260,107 @@ function Live(props: InferProps) { : 0; const x = xLoc + strikezoneZeroX; const z = zLoc + strikezoneZeroZ; + const scaleHoverFactor = 1.5; if (pitchZ && pitchZ < 0) { //DEALING WITH BALLS IN THE DIRT return ( - + { + setPitchHover({ + index: index, + pitchXPixels: x, + pitchYPixels: 299, + pitch: liveData?.plays.currentPlay.playEvents[ + index + ], + }); + }} + onMouseOut={() => { + setPitchHover(null); + }} + > { - setPitchHover({ - pitchXPixels: x, - pitchYPixels: 299, - pitch: liveData?.plays.currentPlay.playEvents[ - index - ], - }); - }} - onMouseOut={() => { - setPitchHover(null); - }} + scaleX={ + pitchHover && pitchHover.index === index + ? scaleHoverFactor + : 1 + } + scaleY={ + pitchHover && pitchHover.index === index + ? scaleHoverFactor + : 1 + } /> ); } return ( - + { + setPitchHover({ + index: index, + pitchXPixels: x, + pitchYPixels: z, + pitch: liveData?.plays.currentPlay.playEvents[index], + }); + }} + onMouseOut={() => { + setPitchHover(null); + }} + > { - setPitchHover({ - pitchXPixels: x, - pitchYPixels: z, - pitch: liveData?.plays.currentPlay.playEvents[ - index - ], - }); - }} - onMouseOut={() => { - setPitchHover(null); - }} + scaleX={ + pitchHover && pitchHover.index === index + ? scaleHoverFactor + : 1 + } + scaleY={ + pitchHover && pitchHover.index === index + ? scaleHoverFactor + : 1 + } /> ); @@ -437,42 +474,90 @@ function Live(props: InferProps) { return; } - function drawHover(width: number, height: number) { + function drawHover(stageWidth: number, stageHeight: number) { if (pitchHover && pitchHover.pitch) { const boxWidth = - pitchHover.pitch.details.type.description.length * 7; - const boxHeight = 80; + Math.max( + pitchHover.pitch.details.type.description.length, + (pitchHover.pitch.pitchData.startSpeed + " mph").length + ) * 8; + const boxHeight = pitchHover.pitch.pitchData.breaks.spinRate + ? 45 + : 30; const drawX = - pitchHover.pitchXPixels + boxWidth > width + pitchHover.pitchXPixels + boxWidth > stageWidth ? pitchHover.pitchXPixels - boxWidth : pitchHover.pitchXPixels; - console.log(pitchHover.pitchXPixels + boxWidth, width); - console.log(pitchHover.pitch.details.type.description); - console.log(height); + const drawY = + pitchHover.pitchYPixels + boxHeight > stageHeight + ? pitchHover.pitchYPixels - boxHeight + : pitchHover.pitchYPixels; return ( { + setPitchHover(pitchHover); + }} + onMouseOut={() => { + setPitchHover(null); + }} /> { + setPitchHover(pitchHover); + }} + onMouseOut={() => { + setPitchHover(null); + }} /> { + setPitchHover(pitchHover); + }} + onMouseOut={() => { + setPitchHover(null); + }} + /> + { + setPitchHover(pitchHover); + }} + onMouseOut={() => { + setPitchHover(null); + }} /> ); diff --git a/extension/src/components/Player.tsx b/extension/src/components/Player.tsx index 5b84bc4..a583992 100644 --- a/extension/src/components/Player.tsx +++ b/extension/src/components/Player.tsx @@ -78,22 +78,22 @@ function Player(props: InferProps) {
- {playerInfo.fullName} #{playerInfo.primaryNumber} + {playerInfo?.fullName} #{playerInfo?.primaryNumber}
- {playerInfo.primaryPosition?.abbreviation} | B/T:{" "} - {playerInfo.batSide?.code}/{playerInfo.pitchHand?.code}{" "} - | {playerInfo.height}/{playerInfo.weight} | Age:{" "} - {playerInfo.currentAge} + {playerInfo?.primaryPosition?.abbreviation} | B/T:{" "} + {playerInfo?.batSide?.code}/ + {playerInfo?.pitchHand?.code} | {playerInfo?.height}/ + {playerInfo?.weight} | Age: {playerInfo?.currentAge}
- {playerInfo.mlbDebutDate - ? `MLB Debut: ${playerInfo.mlbDebutDate}` + {playerInfo?.mlbDebutDate + ? `MLB Debut: ${playerInfo?.mlbDebutDate}` : ""}
- {playerInfo.nickName - ? `Nickname: ${playerInfo.nickName}` + {playerInfo?.nickName + ? `Nickname: ${playerInfo?.nickName}` : ""}
diff --git a/extension/src/components/Standings.tsx b/extension/src/components/Standings.tsx index 1c1551f..5bed578 100644 --- a/extension/src/components/Standings.tsx +++ b/extension/src/components/Standings.tsx @@ -20,7 +20,6 @@ function Standings(props: InferProps) { axios .get(props.servers.mlbstats + "standings/") .then((response) => { - console.log(typeof response.data); setStandings({ divisions: [ response.data.result["201"], diff --git a/extension/src/types/Live_Types.tsx b/extension/src/types/Live_Types.tsx index 27eed27..e06a60d 100644 --- a/extension/src/types/Live_Types.tsx +++ b/extension/src/types/Live_Types.tsx @@ -208,6 +208,7 @@ interface playEvents_Type { } interface pitchData_Type { + breaks: breaks_Type; coordinates: coordinates_Type; endSpeed: number; extension: number; @@ -416,6 +417,7 @@ interface batting_Type { } interface pitchHover_Type { + index: number; pitch: playEvents_Type | undefined; pitchXPixels: number; pitchYPixels: number; From e4faf9136f135a3687f455673974cc8456c81a94 Mon Sep 17 00:00:00 2001 From: Jake Tockerman Date: Thu, 21 Apr 2022 18:29:11 -0400 Subject: [PATCH 03/11] remove hardcoded game --- extension/src/components/Live.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/extension/src/components/Live.tsx b/extension/src/components/Live.tsx index b680920..f623a53 100644 --- a/extension/src/components/Live.tsx +++ b/extension/src/components/Live.tsx @@ -23,7 +23,7 @@ Live.propTypes = { function Live(props: InferProps) { const [url, setUrl] = useState(""); - const [gameID, setGameID] = useState("634208"); //634198 Example Game + const [gameID, setGameID] = useState(""); //634198 Example Game const [pitchHover, setPitchHover] = useState(); const [gameData, setGameData] = useState(); const [liveData, setLiveData] = useState(); From cea8f7f9659d688689f9c9706b122182dc3b91f1 Mon Sep 17 00:00:00 2001 From: Jake Tockerman Date: Fri, 22 Apr 2022 12:53:51 -0400 Subject: [PATCH 04/11] final context window and loading screen for live tab --- extension/src/components/Live.tsx | 380 ++++++++++++++++-------------- 1 file changed, 199 insertions(+), 181 deletions(-) diff --git a/extension/src/components/Live.tsx b/extension/src/components/Live.tsx index 122c28f..2d5d88b 100644 --- a/extension/src/components/Live.tsx +++ b/extension/src/components/Live.tsx @@ -17,6 +17,7 @@ import { } from "../types/Live_Types"; import { useInterval } from "usehooks-ts"; import { Link } from "react-router-dom"; +import { Spinner } from "react-bootstrap"; Live.propTypes = { servers: PropTypes.object.isRequired as never as ServersType, @@ -29,6 +30,7 @@ function Live(props: InferProps) { const [gameData, setGameData] = useState(); const [liveData, setLiveData] = useState(); const [liveDelay, setLiveDelay] = useState(100); + const [error, setError] = useState(); const currPitcherID = liveData?.plays.currentPlay.matchup.pitcher.id; const currBatterID = liveData?.plays.currentPlay.matchup.batter.id; const navigate = useNavigate(); @@ -44,6 +46,7 @@ function Live(props: InferProps) { }) .catch((error: AxiosError<{ additionalInfo: string }>) => { if (error.response?.status != 200) { + setError(error.message); console.log(error.message); } }); @@ -63,6 +66,7 @@ function Live(props: InferProps) { }) .catch((error: AxiosError<{ additionalInfo: string }>) => { if (error.response?.status != 200) { + setError(error.message); console.log(error.message); } }); @@ -577,14 +581,33 @@ function Live(props: InferProps) { function drawHover(stageWidth: number, stageHeight: number) { if (pitchHover && pitchHover.pitch) { + const displayItems = { + call: pitchHover.pitch.details.description, + type: pitchHover.pitch.details.type.description, + velocity: pitchHover.pitch.pitchData.startSpeed, + spinRate: pitchHover.pitch.pitchData.breaks.spinRate, + }; + + const convertText = () => { + const result = []; + result.push(displayItems.call, displayItems.type); + displayItems.velocity && + result.push(displayItems.velocity + " mph"); + displayItems.spinRate && + result.push(displayItems.spinRate + " rpm"); + return result; + }; + + const textArray = convertText(); + const boxWidth = Math.max( - pitchHover.pitch.details.type.description.length, - (pitchHover.pitch.pitchData.startSpeed + " mph").length + ...textArray.map((item) => { + return item?.length; + }) ) * 8; - const boxHeight = pitchHover.pitch.pitchData.breaks.spinRate - ? 45 - : 30; + + const boxHeight = textArray.length * 15; const drawX = pitchHover.pitchXPixels + boxWidth > stageWidth ? pitchHover.pitchXPixels - boxWidth @@ -593,6 +616,7 @@ function Live(props: InferProps) { pitchHover.pitchYPixels + boxHeight > stageHeight ? pitchHover.pitchYPixels - boxHeight : pitchHover.pitchYPixels; + return ( ) { onMouseOut={() => { setPitchHover(null); }} + opacity={0.7} /> { - setPitchHover(pitchHover); - }} - onMouseOut={() => { - setPitchHover(null); - }} - /> - { - setPitchHover(pitchHover); - }} - onMouseOut={() => { - setPitchHover(null); - }} - /> - { setPitchHover(pitchHover); }} @@ -778,150 +772,174 @@ function Live(props: InferProps) { ); } - return ( -
-
- {" "} - Away Team{" "} - { - /* prettier-ignore */ - gameData?.teams.away.id ? display_logo(gameData?.teams.away.id, gameData?.teams.away.name) : "" - } -
- - Lineup - -
- {display_batting_order( - liveData?.boxscore?.teams?.away?.battingOrder - ? liveData?.boxscore?.teams?.away?.battingOrder - : [], - "away" as keyof team_Type - )} -
-
-
- - Bench - -
- {display_bench( - liveData?.boxscore?.teams?.away?.bench - ? liveData?.boxscore?.teams?.away?.bench - : [], - "away" as keyof team_Type - )} -
-
-
- - Bullpen - -
- {display_bullpen( - liveData?.boxscore?.teams?.away?.bullpen - ? liveData?.boxscore?.teams?.away?.bullpen - : [], - "away" as keyof team_Type - )} -
-
+ if (error) { + return ( +
+ {"unable to connect to mlbstats server: " + error}
-
- {" "} - {display_Strikezone()} -
- Batter:{" "} - - {liveData?.plays.currentPlay.matchup.batter.fullName} - -
-
- Pitcher:{" "} - - {liveData?.plays.currentPlay.matchup.pitcher.fullName} - -
- {/*
- Count: {liveData?.plays.currentPlay.count.balls} - {liveData?.plays.currentPlay.count.strikes} -
*/} - {/*
Outs: {liveData?.plays.currentPlay.count.outs}
*/} + ); + } else if (gameData === undefined && liveData === undefined) { + return ( +
+ + Loading... +
-
- {" "} - Home Team{" "} - { - /* prettier-ignore */ - gameData?.teams.home.id ? display_logo(gameData?.teams.home.id, gameData?.teams.away.name): "" - } -
- - Lineup - -
- {display_batting_order( - liveData?.boxscore?.teams?.home?.battingOrder - ? liveData?.boxscore?.teams?.home?.battingOrder - : [], - "home" as keyof team_Type - )} -
-
-
- - Bench - -
- {display_bench( - liveData?.boxscore?.teams?.home?.bench - ? liveData?.boxscore?.teams?.home?.bench - : [], - "home" as keyof team_Type - )} + ); + } else { + return ( +
+
+ {" "} + Away Team{" "} + { + /* prettier-ignore */ + gameData?.teams.away.id ? display_logo(gameData?.teams.away.id, gameData?.teams.away.name) : "" + } +
+ + Lineup + +
+ {display_batting_order( + liveData?.boxscore?.teams?.away?.battingOrder + ? liveData?.boxscore?.teams?.away + ?.battingOrder + : [], + "away" as keyof team_Type + )} +
+
+
+ + Bench + +
+ {display_bench( + liveData?.boxscore?.teams?.away?.bench + ? liveData?.boxscore?.teams?.away?.bench + : [], + "away" as keyof team_Type + )} +
+
+
+ + Bullpen + +
+ {display_bullpen( + liveData?.boxscore?.teams?.away?.bullpen + ? liveData?.boxscore?.teams?.away?.bullpen + : [], + "away" as keyof team_Type + )} +
+
+
+
+ {" "} + {display_Strikezone()} +
+ Batter:{" "} + + { + liveData?.plays.currentPlay.matchup.batter + .fullName + } +
-
-
- - Bullpen - -
- {display_bullpen( - liveData?.boxscore?.teams?.home?.bullpen - ? liveData?.boxscore?.teams?.home?.bullpen - : [], - "home" as keyof team_Type - )} +
+ Pitcher:{" "} + + { + liveData?.plays.currentPlay.matchup.pitcher + .fullName + } +
-
+ {/*
+ Count: {liveData?.plays.currentPlay.count.balls} - {liveData?.plays.currentPlay.count.strikes} +
*/} + {/*
Outs: {liveData?.plays.currentPlay.count.outs}
*/} +
+
+ {" "} + Home Team{" "} + { + /* prettier-ignore */ + gameData?.teams.home.id ? display_logo(gameData?.teams.home.id, gameData?.teams.away.name): "" + } +
+ + Lineup + +
+ {display_batting_order( + liveData?.boxscore?.teams?.home?.battingOrder + ? liveData?.boxscore?.teams?.home + ?.battingOrder + : [], + "home" as keyof team_Type + )} +
+
+
+ + Bench + +
+ {display_bench( + liveData?.boxscore?.teams?.home?.bench + ? liveData?.boxscore?.teams?.home?.bench + : [], + "home" as keyof team_Type + )} +
+
+
+ + Bullpen + +
+ {display_bullpen( + liveData?.boxscore?.teams?.home?.bullpen + ? liveData?.boxscore?.teams?.home?.bullpen + : [], + "home" as keyof team_Type + )} +
+
+
-
- ); + ); + } } export default Live; From 51888588b4e0a8a95672b67442d269200a2eab6f Mon Sep 17 00:00:00 2001 From: Jake Tockerman Date: Fri, 22 Apr 2022 13:00:27 -0400 Subject: [PATCH 05/11] remove commented code --- extension/src/components/Live.tsx | 4 ---- 1 file changed, 4 deletions(-) diff --git a/extension/src/components/Live.tsx b/extension/src/components/Live.tsx index 2d5d88b..dcb4829 100644 --- a/extension/src/components/Live.tsx +++ b/extension/src/components/Live.tsx @@ -884,10 +884,6 @@ function Live(props: InferProps) { }
- {/*
- Count: {liveData?.plays.currentPlay.count.balls} - {liveData?.plays.currentPlay.count.strikes} -
*/} - {/*
Outs: {liveData?.plays.currentPlay.count.outs}
*/}
{" "} From 23f8173533d432acc8e1743e9ac8298ee50db122 Mon Sep 17 00:00:00 2001 From: Jake Tockerman Date: Fri, 22 Apr 2022 13:31:41 -0400 Subject: [PATCH 06/11] fixed key error in standings --- extension/src/components/Standings.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/extension/src/components/Standings.tsx b/extension/src/components/Standings.tsx index 5bed578..cd1c5a9 100644 --- a/extension/src/components/Standings.tsx +++ b/extension/src/components/Standings.tsx @@ -45,8 +45,8 @@ function Standings(props: InferProps) { function display_division(division: Division) { return ( -
- +
+
From b4d1411edfc575040b6cec3b8af27be82be5e5ea Mon Sep 17 00:00:00 2001 From: Jake Tockerman Date: Sun, 24 Apr 2022 21:55:06 -0400 Subject: [PATCH 07/11] change font to monospace and center box on pitch when too long for left/right --- extension/src/components/Live.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/extension/src/components/Live.tsx b/extension/src/components/Live.tsx index dcb4829..8893882 100644 --- a/extension/src/components/Live.tsx +++ b/extension/src/components/Live.tsx @@ -610,7 +610,9 @@ function Live(props: InferProps) { const boxHeight = textArray.length * 15; const drawX = pitchHover.pitchXPixels + boxWidth > stageWidth - ? pitchHover.pitchXPixels - boxWidth + ? pitchHover.pitchXPixels - boxWidth > 0 + ? pitchHover.pitchXPixels - boxWidth + : pitchHover.pitchXPixels - boxWidth / 2 : pitchHover.pitchXPixels; const drawY = pitchHover.pitchYPixels + boxHeight > stageHeight @@ -637,7 +639,7 @@ function Live(props: InferProps) { opacity={0.7} /> Date: Sun, 24 Apr 2022 23:50:03 -0400 Subject: [PATCH 08/11] add break angle and vertical drop --- extension/src/components/Live.tsx | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/extension/src/components/Live.tsx b/extension/src/components/Live.tsx index 8893882..f2a2cce 100644 --- a/extension/src/components/Live.tsx +++ b/extension/src/components/Live.tsx @@ -25,7 +25,7 @@ Live.propTypes = { function Live(props: InferProps) { const [url, setUrl] = useState(""); - const [gameID, setGameID] = useState(""); //634198 Example Game + const [gameID, setGameID] = useState("662853"); //634198 Example Game const [pitchHover, setPitchHover] = useState(); const [gameData, setGameData] = useState(); const [liveData, setLiveData] = useState(); @@ -586,6 +586,8 @@ function Live(props: InferProps) { type: pitchHover.pitch.details.type.description, velocity: pitchHover.pitch.pitchData.startSpeed, spinRate: pitchHover.pitch.pitchData.breaks.spinRate, + breakAngle: pitchHover.pitch.pitchData.breaks.breakAngle, + breakY: pitchHover.pitch.pitchData.breaks.breakY, }; const convertText = () => { @@ -595,6 +597,12 @@ function Live(props: InferProps) { result.push(displayItems.velocity + " mph"); displayItems.spinRate && result.push(displayItems.spinRate + " rpm"); + (displayItems.breakAngle || displayItems.breakY) && + result.push("Break:"); + displayItems.breakAngle && + result.push(displayItems.breakAngle + " degrees"); + displayItems.breakY && + result.push(displayItems.breakY + " inches ↓"); return result; }; From 5ed7265674f96186b16e02dea9da5a0d2799e552 Mon Sep 17 00:00:00 2001 From: Jake Tockerman Date: Sun, 24 Apr 2022 23:54:36 -0400 Subject: [PATCH 09/11] move spin rate to break category --- extension/src/components/Live.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/extension/src/components/Live.tsx b/extension/src/components/Live.tsx index f2a2cce..4db5b91 100644 --- a/extension/src/components/Live.tsx +++ b/extension/src/components/Live.tsx @@ -595,10 +595,12 @@ function Live(props: InferProps) { result.push(displayItems.call, displayItems.type); displayItems.velocity && result.push(displayItems.velocity + " mph"); + (displayItems.breakAngle || + displayItems.breakY || + displayItems.spinRate) && + result.push("Break:"); displayItems.spinRate && result.push(displayItems.spinRate + " rpm"); - (displayItems.breakAngle || displayItems.breakY) && - result.push("Break:"); displayItems.breakAngle && result.push(displayItems.breakAngle + " degrees"); displayItems.breakY && From aa8cab33419d57376edfe1ac19a6fe577870dc7f Mon Sep 17 00:00:00 2001 From: Jake Tockerman Date: Mon, 25 Apr 2022 12:54:26 -0400 Subject: [PATCH 10/11] fix hotzone crash when undefined --- extension/src/components/Live.tsx | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/extension/src/components/Live.tsx b/extension/src/components/Live.tsx index 188ab57..4a61996 100644 --- a/extension/src/components/Live.tsx +++ b/extension/src/components/Live.tsx @@ -25,7 +25,7 @@ Live.propTypes = { function Live(props: InferProps) { const [url, setUrl] = useState(""); - const [gameID, setGameID] = useState("662853"); //634198 Example Game + const [gameID, setGameID] = useState(""); //634198 Example Game const [pitchHover, setPitchHover] = useState(); const [gameData, setGameData] = useState(); const [liveData, setLiveData] = useState(); @@ -678,39 +678,39 @@ function Live(props: InferProps) { strikezoneHeight: number ) { const zone1color = liveData?.plays.currentPlay.matchup - .batterHotColdZones[0].color + .batterHotColdZones[0]?.color ? liveData?.plays.currentPlay.matchup.batterHotColdZones[0].color : ""; const zone2color = liveData?.plays.currentPlay.matchup - .batterHotColdZones[1].color + .batterHotColdZones[1]?.color ? liveData?.plays.currentPlay.matchup.batterHotColdZones[1].color : ""; const zone3color = liveData?.plays.currentPlay.matchup - .batterHotColdZones[2].color + .batterHotColdZones[2]?.color ? liveData?.plays.currentPlay.matchup.batterHotColdZones[2].color : ""; const zone4color = liveData?.plays.currentPlay.matchup - .batterHotColdZones[3].color + .batterHotColdZones[3]?.color ? liveData?.plays.currentPlay.matchup.batterHotColdZones[3].color : ""; const zone5color = liveData?.plays.currentPlay.matchup - .batterHotColdZones[4].color + .batterHotColdZones[4]?.color ? liveData?.plays.currentPlay.matchup.batterHotColdZones[4].color : ""; const zone6color = liveData?.plays.currentPlay.matchup - .batterHotColdZones[5].color + .batterHotColdZones[5]?.color ? liveData?.plays.currentPlay.matchup.batterHotColdZones[5].color : ""; const zone7color = liveData?.plays.currentPlay.matchup - .batterHotColdZones[6].color + .batterHotColdZones[6]?.color ? liveData?.plays.currentPlay.matchup.batterHotColdZones[6].color : ""; const zone8color = liveData?.plays.currentPlay.matchup - .batterHotColdZones[7].color + .batterHotColdZones[7]?.color ? liveData?.plays.currentPlay.matchup.batterHotColdZones[7].color : ""; const zone9color = liveData?.plays.currentPlay.matchup - .batterHotColdZones[8].color + .batterHotColdZones[8]?.color ? liveData?.plays.currentPlay.matchup.batterHotColdZones[8].color : ""; return ( From 230a9800d46e27f58d9538605dc940a3902ec40c Mon Sep 17 00:00:00 2001 From: Jake Tockerman Date: Mon, 25 Apr 2022 17:49:33 -0400 Subject: [PATCH 11/11] added hit data --- extension/src/components/Live.tsx | 32 ++++++++++++++++++++++-------- extension/src/types/Live_Types.tsx | 10 ++++++++++ 2 files changed, 34 insertions(+), 8 deletions(-) diff --git a/extension/src/components/Live.tsx b/extension/src/components/Live.tsx index 4a61996..9cb83cc 100644 --- a/extension/src/components/Live.tsx +++ b/extension/src/components/Live.tsx @@ -588,23 +588,38 @@ function Live(props: InferProps) { spinRate: pitchHover.pitch.pitchData.breaks.spinRate, breakAngle: pitchHover.pitch.pitchData.breaks.breakAngle, breakY: pitchHover.pitch.pitchData.breaks.breakY, + exitVelocity: pitchHover.pitch.hitData?.launchSpeed, + launchAngle: pitchHover.pitch.hitData?.launchAngle, + hitDistance: pitchHover.pitch.hitData?.totalDistance, }; const convertText = () => { const result = []; result.push(displayItems.call, displayItems.type); displayItems.velocity && - result.push(displayItems.velocity + " mph"); - (displayItems.breakAngle || - displayItems.breakY || - displayItems.spinRate) && - result.push("Break:"); + result.push("PV: " + displayItems.velocity + " mph"); + // (displayItems.breakAngle || + // displayItems.breakY || + // displayItems.spinRate) && + // result.push("Break:"); displayItems.spinRate && - result.push(displayItems.spinRate + " rpm"); + result.push("SR: " + displayItems.spinRate + " rpm"); displayItems.breakAngle && - result.push(displayItems.breakAngle + " degrees"); + result.push("BA: " + displayItems.breakAngle + " degrees"); displayItems.breakY && - result.push(displayItems.breakY + " inches ↓"); + result.push("VBreak: " + displayItems.breakY + " inches ↓"); + // (displayItems.exitVelocity || + // displayItems.launchAngle || + // displayItems.hitDistance) && + // result.push("Hit:"); + displayItems.exitVelocity && + result.push("EV: " + displayItems.exitVelocity + " mph"); + displayItems.launchAngle && + result.push("LA: " + displayItems.launchAngle + " degrees"); + displayItems.hitDistance && + result.push( + "Distance " + displayItems.hitDistance + " feet" + ); return result; }; @@ -618,6 +633,7 @@ function Live(props: InferProps) { ) * 8; const boxHeight = textArray.length * 15; + console.log(boxHeight); const drawX = pitchHover.pitchXPixels + boxWidth > stageWidth ? pitchHover.pitchXPixels - boxWidth > 0 diff --git a/extension/src/types/Live_Types.tsx b/extension/src/types/Live_Types.tsx index 3c7b304..c150590 100644 --- a/extension/src/types/Live_Types.tsx +++ b/extension/src/types/Live_Types.tsx @@ -223,10 +223,20 @@ interface playEvents_Type { index: number; isPitch: boolean; pitchData: pitchData_Type; + hitData?: hitData_Type; pitchNumber: number; type: string; } +interface hitData_Type { + launchSpeed: number; + launchAngle: number; + totalDistance: number; + trajectory: string; + hardness: string; + location: string; +} + interface pitchData_Type { breaks: breaks_Type; coordinates: coordinates_Type;
{division.div_name}