initial commit

src/components/GameStateDisplay.js

@@ -0,0 +1,45 @@
+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, balls, strikes,  awayScore, homeScore, isFinal }){
+  return (
+    <div className="gameState">
+      <header>Scoreboard</header>
+      {!isFinal && (
+        <div>
+          <Row>
+            <Col><Inning inning={inning} isTopHalf={isTopHalf}></Inning></Col>
+            <Col>{balls}-{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>
+            </Col>
+          </Row>
+          <Row>
+          </Row>
+        </div>
+      )}
+        <strong>{isFinal ? "FINAL!" : ""}</strong>
+      <Row>
+        <Col><strong> Away Score: </strong> {awayScore}</Col>
+        <Col><strong> Home Score: </strong> {homeScore}</Col>
+      </Row>
+    </div>
+  );
+}
+
+export default GameStateDisplay