Little timeout indicator under team name, works on all screen sizes

zengm-games · Apr 28, 2024 · a4074f9 · a4074f9
1 parent 2e07663
commit a4074f9
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 45 deletions.
diff --git a/public/css/light.scss b/public/css/light.scss
@@ -1185,6 +1185,10 @@ $small-scrollbar-thumb-hover-color: darken($gray-500, 10%) !default;
 	color: $black !important;
 }
 
+.bg-tertiary {
+	background-color: $gray-300 !important;
+}
+
 .sort-inside-modal {
 	z-index: 999999999;
 }

diff --git a/src/common/constants.ts b/src/common/constants.ts
@@ -503,6 +503,15 @@ export const DEFAULT_TEAM_COLORS: [string, string, string] = [
 	"#ffffff",
 ];
 
+export const STARTING_NUM_TIMEOUTS = bySport({
+	baseball: undefined,
+	football: 3,
+	hockey: undefined,
+
+	// Should actually be 7, but since timeouts are only used at the end of the game currently, it's silly to have those extra 5 timeouts lying around all game
+	basketball: 2,
+});
+
 export {
 	AD_DIVS,
 	ALL_STAR_GAME_ONLY,

diff --git a/src/ui/components/BoxScoreWrapper.tsx b/src/ui/components/BoxScoreWrapper.tsx
@@ -6,7 +6,7 @@ import {
 	useRef,
 	type CSSProperties,
 } from "react";
-import { isSport, PHASE } from "../../common";
+import { isSport, PHASE, STARTING_NUM_TIMEOUTS } from "../../common";
 import { helpers, realtimeUpdate, toWorker, useLocalPartial } from "../util";
 import BoxScore from "./BoxScore";
 import { range } from "../../common/utils";
@@ -76,14 +76,7 @@ const TeamLogo = ({
 				>
 					<img className="mw-100 mh-100" src={t.imgURL} alt="" />
 				</TeamNameLink>
-				<div className="mt-1 mb-3">
-					<div className="fw-bold">{helpers.formatRecord(t)}</div>
-					{t.timeouts !== undefined ? (
-						<div className={t.timeouts === 0 ? "text-danger" : undefined}>
-							Timeouts: {t.timeouts}
-						</div>
-					) : null}
-				</div>
+				<div className="mt-1 mb-3 fw-bold">{helpers.formatRecord(t)}</div>
 			</div>
 		</div>
 	) : null;
@@ -105,7 +98,7 @@ const TeamNameAndScore = ({
 		: `d-none d-${boxScore.exhibition ? "md" : "sm"}-inline`;
 
 	return (
-		<div>
+		<div className="d-flex">
 			{boxScore.possession !== undefined ? (
 				<span
 					className={
@@ -114,18 +107,34 @@ const TeamNameAndScore = ({
 							: "text-white"
 					}
 				>
-					●{" "}
+					●&nbsp;
 				</span>
 			) : null}
 			{t.playoffs ? (
-				<span className="text-body-secondary">{t.playoffs.seed}. </span>
+				<span className="text-body-secondary">{t.playoffs.seed}.&nbsp;</span>
 			) : null}
-			<TeamNameLink season={boxScore.season} t={t}>
-				{t.season !== undefined ? `${t.season} ` : null}
-				<span className={className}>{t.region} </span>
-				{t.name}
-			</TeamNameLink>{" "}
-			{t.pts}
+			<div>
+				<TeamNameLink season={boxScore.season} t={t}>
+					{t.season !== undefined ? `${t.season} ` : null}
+					<span className={className}>{t.region} </span>
+					{t.name}
+				</TeamNameLink>
+				{t.timeouts !== undefined && STARTING_NUM_TIMEOUTS !== undefined ? (
+					<div
+						className="d-flex gap-1 pt-1"
+						title={`${t.timeouts} ${helpers.plural("timeout", t.timeouts)} remaining`}
+					>
+						{range(STARTING_NUM_TIMEOUTS).map(i => (
+							<div
+								key={i}
+								style={{ width: 12, height: 3 }}
+								className={i < t.timeouts ? "bg-warning" : "bg-tertiary"}
+							/>
+						))}
+					</div>
+				) : null}
+			</div>
+			<div>&nbsp;{t.pts}</div>
 		</div>
 	);
 };

diff --git a/src/worker/core/GameSim.basketball/index.ts b/src/worker/core/GameSim.basketball/index.ts
@@ -1,5 +1,5 @@
 import { defaultGameAttributes, g, helpers, random } from "../../util";
-import { PHASE } from "../../../common";
+import { PHASE, STARTING_NUM_TIMEOUTS } from "../../../common";
 import jumpBallWinnerStartsThisPeriodWithPossession from "./jumpBallWinnerStartsThisPeriodWithPossession";
 import getInjuryRate from "./getInjuryRate";
 import type { GameAttributesLeague, PlayerInjury } from "../../../common/types";
@@ -237,10 +237,7 @@ class GameSim extends GameSimBase {
 
 	gender: GameAttributesLeague["gender"];
 
-	timeouts: [number, number] = [
-		GameSimBase.getStartingNumTimeouts()!,
-		GameSimBase.getStartingNumTimeouts()!,
-	];
+	timeouts: [number, number] = [STARTING_NUM_TIMEOUTS!, STARTING_NUM_TIMEOUTS!];
 
 	isClockRunning = true;
 

diff --git a/src/worker/core/GameSim.football/index.ts b/src/worker/core/GameSim.football/index.ts
@@ -25,7 +25,7 @@ import Play, {
 } from "./Play";
 import LngTracker from "./LngTracker";
 import GameSimBase from "../GameSimBase";
-import { PHASE } from "../../../common";
+import { PHASE, STARTING_NUM_TIMEOUTS } from "../../../common";
 
 const teamNums: [TeamNum, TeamNum] = [0, 1];
 
@@ -93,10 +93,7 @@ class GameSim extends GameSimBase {
 
 	toGo = 10;
 
-	timeouts: [number, number] = [
-		GameSimBase.getStartingNumTimeouts()!,
-		GameSimBase.getStartingNumTimeouts()!,
-	];
+	timeouts: [number, number] = [STARTING_NUM_TIMEOUTS!, STARTING_NUM_TIMEOUTS!];
 
 	twoMinuteWarningHappened = false;
 

diff --git a/src/worker/core/GameSimBase.ts b/src/worker/core/GameSimBase.ts
@@ -84,17 +84,6 @@ class GameSimBase {
 			return false;
 		}
 	}
-
-	static getStartingNumTimeouts() {
-		return bySport({
-			baseball: undefined,
-			football: 3,
-			hockey: undefined,
-
-			// Should actually be 7, but since timeouts are only used at the end of the game currently, it's silly to have those extra 5 timeouts lying around all game
-			basketball: 2,
-		});
-	}
 }
 
 export default GameSimBase;
diff --git a/src/worker/views/liveGame.ts b/src/worker/views/liveGame.ts
@@ -7,8 +7,7 @@ import {
 	type TeamSeasonOverride,
 } from "./gameLog";
 import type { AllStars, UpdateEvents, ViewInput } from "../../common/types";
-import { bySport, isSport, PHASE } from "../../common";
-import GameSimBase from "../core/GameSimBase";
+import { bySport, isSport, PHASE, STARTING_NUM_TIMEOUTS } from "../../common";
 
 export const boxScoreToLiveSim = async ({
 	allStars,
@@ -133,10 +132,9 @@ export const boxScoreToLiveSim = async ({
 		boxScore.scoringSummary = [];
 	}
 
-	const getStartingNumTimeouts = GameSimBase.getStartingNumTimeouts();
-	if (getStartingNumTimeouts !== undefined) {
-		boxScore.teams[0].timeouts = getStartingNumTimeouts;
-		boxScore.teams[1].timeouts = getStartingNumTimeouts;
+	if (STARTING_NUM_TIMEOUTS !== undefined) {
+		boxScore.teams[0].timeouts = STARTING_NUM_TIMEOUTS;
+		boxScore.teams[1].timeouts = STARTING_NUM_TIMEOUTS;
 	}
 
 	return {