Refactor game state management and enhance scoring logic

- Added `handleHit` function to handle various hit types (single, double, triple, home run).
- Refactored `handleBall`, `handleOut`, and `handlePitch` to return `scoredRunners` and update scores accordingly.
- Updated history management to include both `gameState` and `lineupState`.
- Improved scoreboard rendering to reflect updated scoring structure and base occupation styles.
- Enhanced navigation button styling for active lineup tab.
- Fixed UI to dynamically display scored runners and adjusted base styling in `GameStateDisplay`.
This commit is contained in:
2024-12-12 06:25:00 -06:00
parent 7203ac4c2d
commit d2146e7c5a
4 changed files with 88 additions and 33 deletions

View File

@@ -13,7 +13,7 @@ function Inning({inning, isTopHalf}){
)
}
function GameStateDisplay({inning, bases, isTopHalf, outs, count, awayScore, homeScore, isFinal }){
function GameStateDisplay({inning, bases, isTopHalf, outs, count, score, isFinal }){
return (
<div className="gameState">
<header>Scoreboard</header>
@@ -24,9 +24,9 @@ function GameStateDisplay({inning, bases, isTopHalf, outs, count, awayScore, ho
<Col>{count.balls}-{count.strikes}</Col>
<Col>{outs} outs</Col>
<Col>
<FontAwesomeIcon icon={fa1} className={`base ${bases[0] ? "occupied" : ""}`}></FontAwesomeIcon>
<FontAwesomeIcon icon={fa2} className={`base ${bases[1] ? "occupied" : ""}`}></FontAwesomeIcon>
<FontAwesomeIcon icon={fa3} className={`base ${bases[2] ? "occupied" : ""}`}></FontAwesomeIcon>
<FontAwesomeIcon icon={fa1} className={`base ${bases[0] ? `occupied ${bases[0]}` : ""}`}></FontAwesomeIcon>
<FontAwesomeIcon icon={fa2} className={`base ${bases[1] ? `occupied ${bases[1]}` : ""}`}></FontAwesomeIcon>
<FontAwesomeIcon icon={fa3} className={`base ${bases[2] ? `occupied ${bases[2]}` : ""}`}></FontAwesomeIcon>
</Col>
</Row>
<Row>
@@ -35,8 +35,8 @@ function GameStateDisplay({inning, bases, isTopHalf, outs, count, awayScore, ho
)}
<strong>{isFinal ? "FINAL!" : ""}</strong>
<Row>
<Col><strong> Away Score: </strong> {awayScore}</Col>
<Col><strong> Home Score: </strong> {homeScore}</Col>
<Col><strong> Away Score: </strong> {score.away}</Col>
<Col><strong> Home Score: </strong> {score.home}</Col>
</Row>
</div>
);