Enhance UI

- Updated lineup data with new player names.
- Added `ButtonGroup` for better organization of game controls.
- Modified `GameStateDisplay` to use a `<section>` for better semantic structure.
- Adjusted table sizes and lineup section styling for a more compact display.
- Improved button styles, including specialized buttons for unique actions (e.g., home run, double play).
- Updated CSS variables for color values and added layout refinements for better responsiveness.
- Modified `index.html` theme color to match app's new design scheme.

public/index.html

@@ -4,7 +4,7 @@
     <meta charset="utf-8" />
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
-    <meta name="theme-color" content="#000000" />
+    <meta name="theme-color" content="#FAF9F6" />
     <meta
       name="description"
       content="Web site created using create-react-app"

src/App.js

@@ -4,6 +4,7 @@ import GameStateDisplay from "./components/GameStateDisplay";
 import Dropdown from 'react-bootstrap/Dropdown';
 import Table from 'react-bootstrap/Table';
 import Button from 'react-bootstrap/Button'
+import ButtonGroup from 'react-bootstrap/ButtonGroup'
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faUndo, faBaseballBall } from "@fortawesome/free-solid-svg-icons";
 import Tab from 'react-bootstrap/Tab';
@@ -237,8 +238,24 @@ function App() {
     const fetchLineups = async () => (
       // Simulate an API call or database query
       {
-        away: ["Player A1", "Player A2", "Player A3", "Player A4", "Player A5"],
+        "away": [
-        home: ["Player H1", "Player H2", "Player H3", "Player H4", "Player H5"],
+          "Jessica Telephone",
+          "Nagomi Mcdaniel",
+          "York Silk",
+          "Tillman Henderson",
+          "Moody Cookbook",
+          "Zion Aliciakeyes",
+          "Jaylen Hotdogfingers"
+        ],
+        "home": [
+          "Paula Turnip",
+          "Bees Taswell",
+          "Sexton Wheerer",
+          "Milo Brown",
+          "Eugenia Garbage",
+          "Justice Spoon",
+          "Velasquez Alstott"
+        ]
       }
     );
 
@@ -282,7 +299,7 @@ function App() {
     const {players, currentBatterIndex} = lineupState[home_or_away];
 
     return (
-      <Table>
+      <Table size="sm">
         <tbody>
           {players.map((player, index) => (
             <tr>
@@ -405,11 +422,9 @@ function App() {
 
   return (
     <div className="App container">
-      <h1>Dartball Scorecard</h1>
-
       <GameStateDisplay {...gameState} />
 
-      <section>
+      <section id="lineup">
         <header>Lineup</header>
           <Tabs 
             activeKey={gameState.isTopHalf ? "away" : "home"}
@@ -440,14 +455,21 @@ function App() {
         <Button className="" onClick={()=>handleUndo()} disabled={isUndoDisabled}>
           <FontAwesomeIcon icon={faUndo}  />
         </Button>
-        <button className="play strike" onClick={() => handlePitch("strike")} disabled={gameState.isFinal}>Strike</button>
+        <ButtonGroup>
-        <button className="play ball" onClick={() => handlePitch("ball")} disabled={gameState.isFinal}>Ball</button>
+          <button className="play strike" onClick={() => handlePitch("strike")} disabled={gameState.isFinal}>Strike</button>
-        <button className="play foul" onClick={() => handlePitch("foul")} disabled={gameState.isFinal}>Foul</button>
+          <button className="play ball" onClick={() => handlePitch("ball")} disabled={gameState.isFinal}>Ball</button>
-        <button className="play out" onClick={() => handlePitch("out")} disabled={gameState.isFinal}>Out</button>
+          <button className="play foul" onClick={() => handlePitch("foul")} disabled={gameState.isFinal}>Foul</button>
+        </ButtonGroup>
 
-        <Button className="play hit" onClick={() => handlePitch("single")}>1</Button>
+        <ButtonGroup>
-        <Button className="play hit" onClick={() => handlePitch("double")}>2</Button>
+          <button className="play out" onClick={() => handlePitch("out")} disabled={gameState.isFinal}>Out</button>
-        <Button className="play hit" onClick={() => handlePitch("triple")}>3</Button>
+          <Button className="play hit 1b" onClick={() => handlePitch("single")}>1</Button>
+          <Button className="play hit 2b" onClick={() => handlePitch("double")}>2</Button>
+          <Button className="play hit 3b" onClick={() => handlePitch("triple")}>3</Button>
+          <Button className="play hit hr" onClick={() => handlePitch("home run")}>HR</Button>
+          <Button className="play hit-special" onClick={() => handlePitch("single")}>2BS</Button>
+          <Button className="play hit-special" onClick={() => handlePitch("out")}>DP</Button>
+        </ButtonGroup>
 
       </section>
       <section>

src/App.scss

@@ -6,18 +6,17 @@ body {
 }
 
 .App {
-  --dartball-blue: #20438cff;
+  --dartball-blue: #20438c;
-  --dartball-green: #118b48ff;
+  --dartball-green: #118b48;
-  --dartball-black: #343a39ff;
+  --dartball-black: #343a39;
-  --dartball-white: #f6fafdff;
+  --dartball-white: #f6fafd;
-  --dartball-red: #c63d4eff;
+  --dartball-red: #c63d4e;
-  --dartball-gray: #b2aba8ff;
+  --dartball-gray: #b2aba8;
-  --dartball-orange: #ed5a2eff;
+  --dartball-orange: #ed5a2e;
-
   font-family: 'Oswald';
   font-size: 18px;
   text-align: center;
-  section, div.gameState {
+  section {
     /* padding: 0.5rem; */
     margin: 0.5rem;
     border: black solid;
@@ -25,13 +24,32 @@ body {
     background-color: white;
     overflow: hidden;
     header {
-      font-size: 1.8rem;
+      font-size: 1.1rem;
       font-weight: bolder;
       text-transform: uppercase;
       border-bottom: black solid;
       background-color: lightblue;
       min-height: 1rem;
     }
+    &#scoreboard {
+      header {
+        display:None;
+      }
+    }
+    &#lineup {
+
+      header {
+        display: none;
+      }
+      .nav-item button{
+        @extend .p-1;
+        @extend .fs-6;
+        text-transform: uppercase;
+      }
+      td {
+        @extend .p-1;
+      }
+    }
   }
 
   .gameLog {
@@ -50,25 +68,30 @@ body {
   }
 
   section.play {
-    background-color: var(--dartball-green);
+
   }
 
   .base {
-    @extend .m-1;
+    margin:.1rem;
     border: black solid;
-    padding: 0.2rem;
+    padding: 0.1rem;
-    width: 1rem;
+    width: 0.7rem;
-    height: 1rem;
+    height: 0.7rem;
     &.occupied {
       color: white;
       background-color: red;
   }}
 
+  .btn-group {
+    @extend .m-1
+  }
+
   button.play, div.dropdown {
     @extend .btn;
     @extend .btn-lg;
     @extend .btn-light;
-    @extend .m-2;
+    @extend .border;
+    @extend .border-dark;
     text-transform: uppercase;
     font-weight: 800;
     color: var(--dartball-black);
@@ -91,9 +114,19 @@ body {
     }
     &.hit{
       @extend .btn-light;
+      @extend .px-3;
       background-color: var(--dartball-white);
       border: solid var(--dartball-white);
     }
+    &.hit.hr{
+      @extend .px-2;
+    }
+    &.hit-special{
+      @extend .px-1;
+      background-color: var(--dartball-red);
+      color: white
+      
+    }
     border: none;
   }
   .lineups.nav {

src/components/GameStateDisplay.js

@@ -15,14 +15,14 @@ function Inning({inning, isTopHalf}){
 
 function GameStateDisplay({inning, bases, isTopHalf, outs, count,  score, isFinal }){
   return (
-    <div className="gameState">
+    <section className="gameState" id="scoreboard">
       <header>Scoreboard</header>
       {!isFinal && (
         <div>
           <Row>
             <Col><Inning inning={inning} isTopHalf={isTopHalf}></Inning></Col>
-            <Col>{count.balls}-{count.strikes}</Col>
+            <Col className="col-auto">{count.balls}-{count.strikes}</Col>
-            <Col>{outs} outs</Col>
+            <Col className="col-auto">{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>
@@ -38,7 +38,7 @@ function GameStateDisplay({inning, bases, isTopHalf, outs, count,  score, isFina
         <Col><strong> Away Score: </strong> {score.away}</Col>
         <Col><strong> Home Score: </strong> {score.home}</Col>
       </Row>
-    </div>
+    </section>
   );
 }