Show actual number of flags, and show when they are thrown

TODO

@@ -40,6 +40,7 @@ FBGM show field during game
       - punt/kick out of back of endzone - cap bar width
         - also make sure logic for a kick in the endzone is correct
       - penalty yardage is not being assessed correctly in UI for width of play bar yards. it's just being added to end of play, when it could be either from the spot of the foul or a tack on at the end. penalty event should have enough info to handle this.
+        - test for offsetting penalties too
     - need to set scrimmage and toGo for extra points/2pt, currently they are weird
       - extra point or 2 point conversion should be treated as a separate play bar?
         - don't count towards numPlays

src/ui/components/BoxScore.football.tsx

@@ -589,16 +589,20 @@ const PlayBar = forwardRef<
 						{score}
 					</div>
 				) : null}
-				{play.flag ? (
-					<span
-						className="glyphicon glyphicon-stop text-warning"
-						style={{
-							// Center icon vertically
-							lineHeight: "unset",
-							top: "unset",
-						}}
-					/>
-				) : null}
+				{play.numFlags > 0
+					? range(play.numFlags).map(i => (
+							<span
+								key={i}
+								className="glyphicon glyphicon-stop text-warning"
+								style={{
+									// Center icon vertically
+									lineHeight: "unset",
+									top: "unset",
+								}}
+								title="Flag on the play"
+							/>
+					  ))
+					: null}
 			</div>
 		);
 	},

src/ui/util/processLiveGameEvents.football.ts

@@ -17,7 +17,7 @@ export type SportState = {
 		scoreInfos: ReturnType<typeof getScoreInfo>[];
 		intendedPossessionChange: boolean; // For punts and kickoffs
 		numPossessionChanges: number;
-		flag: boolean;
+		numFlags: 0;
 		countsTowardsNumPlays: boolean;
 		countsTowardsYards: boolean;
 
@@ -436,7 +436,7 @@ const processLiveGameEvents = ({
 				scoreInfos: [],
 				intendedPossessionChange: awaitingKickoff,
 				numPossessionChanges: 0,
-				flag: false,
+				numFlags: 0,
 				countsTowardsNumPlays: false,
 				countsTowardsYards: false,
 			});
@@ -524,22 +524,23 @@ const processLiveGameEvents = ({
 						play.numPossessionChanges += 1;
 					}
 				}
-				if (e.type === "penalty") {
+
+				if (e.type === "flag") {
+					play.numFlags += 1;
+				} else if (e.type === "penalty") {
 					// Penalty could have changed possession
 					const actualT2 = e.possessionAfterPenalty === 0 ? 1 : 0;
 					if (play.t !== actualT2) {
 						play.t = actualT2;
 						play.numPossessionChanges += 1;
 					}
 
-					play.flag = true;
-
 					// For penalties before the snap, still count them
 					play.countsTowardsNumPlays = true;
 					play.countsTowardsYards = true;
 				} else if (e.type === "penaltyCount" && e.offsetStatus === "offset") {
 					// Offsetting penalties don't make it this far in the penalty event, because they have no associated text. But we can find them here. No play since the down is replayed.
-					// Maybe accepted penalties that lead to replaying the down should also be considered here, but I'm not totally sure how to find those (!e.tackOn penalty events maybe?) and I'm not sure it's actually useful to do that (can have weird stuff like a 5 yard drive from 0 plays).
+					// Maybe accepted penalties that lead to replaying the down should also be considered here, but I'm not totally sure how to find those (!e.tackOn penalty events maybe?) and I'm not sure it's actually useful to do that (can have weird stuff like a 5 yard drive from 0 plays). https://www.nflpenalties.com/blog/what-is-a-play? argues similarly
 					play.countsTowardsNumPlays = false;
 				} else if (e.type === "dropback" || e.type === "handoff") {
 					play.countsTowardsNumPlays = true;