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`.
108 lines
2.2 KiB
SCSS
108 lines
2.2 KiB
SCSS
@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Oswald:wght@200..700&display=swap');
|
|
@import "../node_modules/bootstrap/scss/bootstrap";
|
|
|
|
body {
|
|
background-color: #FAF9F6;
|
|
}
|
|
|
|
.App {
|
|
--dartball-blue: #20438cff;
|
|
--dartball-green: #118b48ff;
|
|
--dartball-black: #343a39ff;
|
|
--dartball-white: #f6fafdff;
|
|
--dartball-red: #c63d4eff;
|
|
--dartball-gray: #b2aba8ff;
|
|
--dartball-orange: #ed5a2eff;
|
|
|
|
font-family: 'Oswald';
|
|
font-size: 18px;
|
|
text-align: center;
|
|
section, div.gameState {
|
|
/* padding: 0.5rem; */
|
|
margin: 0.5rem;
|
|
border: black solid;
|
|
border-radius: 10px;
|
|
background-color: white;
|
|
overflow: hidden;
|
|
header {
|
|
font-size: 1.8rem;
|
|
font-weight: bolder;
|
|
text-transform: uppercase;
|
|
border-bottom: black solid;
|
|
background-color: lightblue;
|
|
min-height: 1rem;
|
|
}
|
|
}
|
|
|
|
.gameLog {
|
|
font-family: monospace;
|
|
font-size: .8rem;
|
|
line-height: 1rem;
|
|
@extend .bg-light;
|
|
}
|
|
|
|
table {
|
|
@extend .table;
|
|
background-color: auto;
|
|
.at-bat {
|
|
@extend .table-active;
|
|
}
|
|
}
|
|
|
|
section.play {
|
|
background-color: var(--dartball-green);
|
|
}
|
|
|
|
.base {
|
|
@extend .m-1;
|
|
border: black solid;
|
|
padding: 0.2rem;
|
|
width: 1rem;
|
|
height: 1rem;
|
|
&.occupied {
|
|
color: white;
|
|
background-color: red;
|
|
}}
|
|
|
|
button.play, div.dropdown {
|
|
@extend .btn;
|
|
@extend .btn-lg;
|
|
@extend .btn-light;
|
|
@extend .m-2;
|
|
text-transform: uppercase;
|
|
font-weight: 800;
|
|
color: var(--dartball-black);
|
|
&.strike{
|
|
background-color: var(--dartball-gray);
|
|
border: solid var(--dartball-gray);
|
|
}
|
|
&.out{
|
|
background-color: var(--dartball-orange);
|
|
border: solid var(--dartball-orange);
|
|
}
|
|
&.foul{
|
|
background-color: var(--dartball-green);
|
|
border: solid var(--dartball-black);
|
|
}
|
|
&.ball{
|
|
background-color: var(--dartball-blue);
|
|
border: solid var(--dartball-blue);
|
|
color: white
|
|
}
|
|
&.hit{
|
|
@extend .btn-light;
|
|
background-color: var(--dartball-white);
|
|
border: solid var(--dartball-white);
|
|
}
|
|
border: none;
|
|
}
|
|
.lineups.nav {
|
|
.nav-item button[role=tab][aria-selected=true]{
|
|
font-weight: 900;
|
|
&:before, &:after{
|
|
content: "*";
|
|
}
|
|
}
|
|
}
|
|
}
|