Anthony Correa
d2146e7c5a
- 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`.
45 lines
1.6 KiB
JavaScript
45 lines
1.6 KiB
JavaScript
import React from "react";
|
|
import Container from 'react-bootstrap/Container';
|
|
import Row from 'react-bootstrap/Row';
|
|
import Col from 'react-bootstrap/Col';
|
|
import { faS, faSquare, faAngleUp, faAngleDown,fa1, fa2, fa3 } from "@fortawesome/free-solid-svg-icons";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
|
|
function Inning({inning, isTopHalf}){
|
|
return (
|
|
<div>
|
|
{inning}<FontAwesomeIcon icon={isTopHalf ? faAngleUp : faAngleDown} ></FontAwesomeIcon>
|
|
</div>
|
|
)
|
|
}
|
|
|
|
function GameStateDisplay({inning, bases, isTopHalf, outs, count, score, isFinal }){
|
|
return (
|
|
<div className="gameState">
|
|
<header>Scoreboard</header>
|
|
{!isFinal && (
|
|
<div>
|
|
<Row>
|
|
<Col><Inning inning={inning} isTopHalf={isTopHalf}></Inning></Col>
|
|
<Col>{count.balls}-{count.strikes}</Col>
|
|
<Col>{outs} outs</Col>
|
|
<Col>
|
|
<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>
|
|
</Row>
|
|
</div>
|
|
)}
|
|
<strong>{isFinal ? "FINAL!" : ""}</strong>
|
|
<Row>
|
|
<Col><strong> Away Score: </strong> {score.away}</Col>
|
|
<Col><strong> Home Score: </strong> {score.home}</Col>
|
|
</Row>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
export default GameStateDisplay |