diff --git a/src/components/Card/CardRow.scss b/src/components/Card/CardRow.scss index 3c8d1d6..8a79b83 100644 --- a/src/components/Card/CardRow.scss +++ b/src/components/Card/CardRow.scss @@ -64,6 +64,18 @@ color: white; width: 25%; } + + .cc-tier { + &-1 { + background-color: rgb(3, 30, 3); + } + &-2 { + background-color: rgb(80, 80, 7); + } + &-3 { + background-color: rgb(9, 9, 77); + } + } } } diff --git a/src/components/Card/CardRow.tsx b/src/components/Card/CardRow.tsx index 7e6a996..4e899ec 100644 --- a/src/components/Card/CardRow.tsx +++ b/src/components/Card/CardRow.tsx @@ -33,7 +33,7 @@ export default function CardRow({tier, state, setState}: CardRowProps) {
-
+

Remaining: {state.gameboard.deck[typedTier].length}

{ cards && cards.map((cardData: CardData) => { diff --git a/src/components/Gameboard/Gameboard.scss b/src/components/Gameboard/Gameboard.scss index e69de29..fec468d 100644 --- a/src/components/Gameboard/Gameboard.scss +++ b/src/components/Gameboard/Gameboard.scss @@ -0,0 +1,13 @@ +.gameboard-rows { + display: flex; + flex-flow: column nowrap; + align-items: center; + + background-color: rgb(57, 57, 65); + width: 90vw; + padding: 1rem 1rem 4rem; + + .round-marker { + font-size: 1.5rem; + } +} \ No newline at end of file diff --git a/src/components/Gameboard/Gameboard.tsx b/src/components/Gameboard/Gameboard.tsx index d6c3e11..297516b 100644 --- a/src/components/Gameboard/Gameboard.tsx +++ b/src/components/Gameboard/Gameboard.tsx @@ -87,7 +87,7 @@ export default function Gameboard({ state, setState }: StateProps) { } else { setView(
- Round: {state.round} +

Round: {state.round}

diff --git a/src/components/Nobles/Nobles.scss b/src/components/Nobles/Nobles.scss index 0cebf83..f22dbfd 100644 --- a/src/components/Nobles/Nobles.scss +++ b/src/components/Nobles/Nobles.scss @@ -3,10 +3,16 @@ .nobles-panel { display: flex; flex-flow: column nowrap; - background-color: rgb(240, 236, 225); + background-color: rgb(212, 196, 152); color: black; - padding: 1.5rem; + padding: 1.5rem 0; + width: 65vw; + .noble-header { + position: relative; + bottom: 1rem; + } + .all-nobles { display: flex; flex-flow: row nowrap; @@ -15,6 +21,13 @@ .noble-card { display: inline-flex; flex-flow: column nowrap; + align-items: center; + height: 100%; + min-width: 25%; + border-right: 1px solid black; + &:last-child { + border-right: none; + } .mapped-noble-costs { display: flex; diff --git a/src/components/Nobles/Nobles.tsx b/src/components/Nobles/Nobles.tsx index 537486f..49b0859 100644 --- a/src/components/Nobles/Nobles.tsx +++ b/src/components/Nobles/Nobles.tsx @@ -15,13 +15,12 @@ export default function Nobles({ state }: StateProps) { return (
- NOBLES + NOBLES: 3 points each
{ state && state.gameboard.nobles.map((noble: NobleData) => { return (
-

{noble.points} points

Cost:

{ diff --git a/src/components/Player/AllPlayers.scss b/src/components/Player/AllPlayers.scss index cc8a204..0d9d233 100644 --- a/src/components/Player/AllPlayers.scss +++ b/src/components/Player/AllPlayers.scss @@ -3,8 +3,11 @@ .all-players { display: flex; + justify-content: space-around; + min-width: 80vw; background-color: rgb(237, 213, 156); color: black; + .player-ui { p { margin: 1rem;