+
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;