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.
2024-12-12 17:05:16 -06:00
parent d2146e7c5a
commit 176f335da0
4 changed files with 89 additions and 34 deletions
--- a/public/index.html
+++ b/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"
--- a/src/App.js
+++ b/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"],
-        home: ["Player H1", "Player H2", "Player H3", "Player H4", "Player H5"],
+        "away": [
+          "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>
-        <button className="play ball" onClick={() => handlePitch("ball")} disabled={gameState.isFinal}>Ball</button>
-        <button className="play foul" onClick={() => handlePitch("foul")} disabled={gameState.isFinal}>Foul</button>
-        <button className="play out" onClick={() => handlePitch("out")} disabled={gameState.isFinal}>Out</button>
+        <ButtonGroup>
+          <button className="play strike" onClick={() => handlePitch("strike")} disabled={gameState.isFinal}>Strike</button>
+          <button className="play ball" onClick={() => handlePitch("ball")} disabled={gameState.isFinal}>Ball</button>
+          <button className="play foul" onClick={() => handlePitch("foul")} disabled={gameState.isFinal}>Foul</button>
+        </ButtonGroup>

-        <Button className="play hit" onClick={() => handlePitch("single")}>1</Button>
-        <Button className="play hit" onClick={() => handlePitch("double")}>2</Button>
-        <Button className="play hit" onClick={() => handlePitch("triple")}>3</Button>
+        <ButtonGroup>
+          <button className="play out" onClick={() => handlePitch("out")} disabled={gameState.isFinal}>Out</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>
--- a/src/App.scss
+++ b/src/App.scss
@@ -6,18 +6,17 @@ body {
 }

 .App {
-  --dartball-blue: #20438cff;
-  --dartball-green: #118b48ff;
-  --dartball-black: #343a39ff;
-  --dartball-white: #f6fafdff;
-  --dartball-red: #c63d4eff;
-  --dartball-gray: #b2aba8ff;
-  --dartball-orange: #ed5a2eff;
-
+  --dartball-blue: #20438c;
+  --dartball-green: #118b48;
+  --dartball-black: #343a39;
+  --dartball-white: #f6fafd;
+  --dartball-red: #c63d4e;
+  --dartball-gray: #b2aba8;
+  --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;
-    width: 1rem;
-    height: 1rem;
+    padding: 0.1rem;
+    width: 0.7rem;
+    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 {
--- a/src/components/GameStateDisplay.js
+++ b/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>{outs} outs</Col>
+            <Col className="col-auto">{count.balls}-{count.strikes}</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>
  );
 }