From 21bf7a2eb021d9b7cde8be1db82b09a8c0066665 Mon Sep 17 00:00:00 2001
From: Mikayla Dobson <93477693+innocuous-symmetry@users.noreply.github.com>
Date: Thu, 21 Jul 2022 15:20:50 -0500
Subject: [PATCH] light styling

---
 src/components/Card/Card.tsx                | 10 +++---
 src/components/Gameboard/CardRow.css        |  0
 src/components/Gameboard/Gameboard.tsx      | 17 ++++++++--
 src/components/Gameboard/Nobles.css         | 18 +++++++++++
 src/components/Gameboard/Nobles.tsx         | 36 +++++++++++++++++++++
 src/components/Player/AllPlayers.css        |  9 ++++++
 src/components/Player/AllPlayers.tsx        | 11 +++++--
 src/components/Player/Player.css            |  0
 src/components/Player/Player.tsx            |  2 ++
 src/components/Resources/AvailableChips.css | 10 ++++++
 src/components/Resources/AvailableChips.tsx |  1 +
 11 files changed, 104 insertions(+), 10 deletions(-)
 create mode 100644 src/components/Gameboard/CardRow.css
 create mode 100644 src/components/Gameboard/Nobles.css
 create mode 100644 src/components/Gameboard/Nobles.tsx
 create mode 100644 src/components/Player/AllPlayers.css
 create mode 100644 src/components/Player/Player.css
 create mode 100644 src/components/Resources/AvailableChips.css

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
index 1e73bb3..ef94e68 100644
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -12,12 +12,12 @@ export default function Card({ data }: CardProps) {
                 <p>Counts as: {data.gemValue}</p>
                 <p>Point value: {data.points || 0}</p>
                 <p>Cost:</p>
-                { Object.keys(data.resourceCost).map((key, value) => {
-                    return (
+                {
+                    Object.keys(data.resourceCost).map((key, value) => {
                         // @ts-ignore
-                        <p key={v4()}>{key}: {data.resourceCost[key]}</p>
-                    )
-                }) }
+                        return (data.resourceCost[key] > 0) && <p key={v4()}>{key}: {data.resourceCost[key]}</p>
+                    })
+                }
             </div>
         </div>
     )
diff --git a/src/components/Gameboard/CardRow.css b/src/components/Gameboard/CardRow.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Gameboard/Gameboard.tsx b/src/components/Gameboard/Gameboard.tsx
index 0911c2b..13cd681 100644
--- a/src/components/Gameboard/Gameboard.tsx
+++ b/src/components/Gameboard/Gameboard.tsx
@@ -2,8 +2,11 @@ import { useContext, useEffect, useState } from 'react';
 import { Context } from '../../context/Context';
 import GameConstructor from '../../util/GameConstructor';
 import { NobleData } from '../../util/types';
+import AllPlayers from '../Player/AllPlayers';
 import AvailableChips from '../Resources/AvailableChips';
 import CardRow from './CardRow';
+import Nobles from './Nobles';
+import NobleStore from '../../data/nobles.json';
 
 export default function Gameboard() {
     let AppContext = useContext(Context);
@@ -16,14 +19,21 @@ export default function Gameboard() {
 
     useEffect(() => {
         if (!players.length) {
-            setView(<GameConstructor />);
+            setView(
+                <div className="error-page">
+                    <h1>Sorry! It appears we've lost track of your game data.</h1>
+                    <p>Please head back to the <a href="/">home page</a> to start a fresh game.</p>
+                </div>
+            );
         } else {
             setView(
                 <div className="gameboard-rows">
+                    <Nobles />
                     <CardRow tier={3} cards={gameboard.cardRows.tierThree} />
                     <CardRow tier={2} cards={gameboard.cardRows.tierTwo} />
                     <CardRow tier={1} cards={gameboard.cardRows.tierOne} />
                     <AvailableChips />
+                    <AllPlayers />
                 </div>
             )
         }
@@ -47,7 +57,7 @@ export default function Gameboard() {
     }
 
     const setNobles = () => {
-        let newNobles = gameboard.nobles;
+        let newNobles = NobleStore.nobles;
         let shuffledNobles = new Array<NobleData>;
 
         while (shuffledNobles.length < 4) {
@@ -55,6 +65,9 @@ export default function Gameboard() {
             const randNoble = newNobles.splice(rand,1)[0];
             shuffledNobles.push(randNoble);
         }
+
+        console.log(newNobles);
+        console.log(shuffledNobles);
         
         // setState({ ...gameboard, nobles: shuffledNobles });
         gameboard.nobles = shuffledNobles;
diff --git a/src/components/Gameboard/Nobles.css b/src/components/Gameboard/Nobles.css
new file mode 100644
index 0000000..3d36546
--- /dev/null
+++ b/src/components/Gameboard/Nobles.css
@@ -0,0 +1,18 @@
+.nobles-panel {
+    display: flex;
+    flex-flow: column nowrap;
+    background-color: rgb(240, 236, 225);
+    padding: 1.5rem;
+    color: black;
+}
+
+.all-nobles {
+    display: flex;
+    flex-flow: row nowrap;
+    justify-content: space-around;
+}
+
+.noble-card {
+    display: inline-flex;
+    flex-flow: column nowrap;
+}
\ No newline at end of file
diff --git a/src/components/Gameboard/Nobles.tsx b/src/components/Gameboard/Nobles.tsx
new file mode 100644
index 0000000..44408a1
--- /dev/null
+++ b/src/components/Gameboard/Nobles.tsx
@@ -0,0 +1,36 @@
+import { useContext, useEffect } from "react";
+import { v4 } from "uuid";
+import { Context } from "../../context/Context";
+import "./Nobles.css"
+
+export default function Nobles() {
+    const { gameboard } = useContext(Context);
+    
+    useEffect(() => {
+        console.log(gameboard);
+    }, [gameboard])
+
+    return (
+        <div className="nobles-panel">
+            <strong>NOBLES</strong>
+            <div className="all-nobles">
+                {
+                gameboard.nobles.map((noble) => {
+                    return (
+                        <div className="noble-card" key={v4()}>
+                            <p>Points: {noble.points}</p>
+                            <p>Cost:</p>
+                            {
+                                Object.keys(noble.resourceCost).map((each) => {
+                                    // @ts-ignore
+                                    return (noble.resourceCost[each] > 0) && <p>{each}: {noble.resourceCost[each]}</p>
+                                })
+                            }
+                        </div>
+                    )
+                }) || <p>Nobles not found. Please wait...</p>
+                }
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/Player/AllPlayers.css b/src/components/Player/AllPlayers.css
new file mode 100644
index 0000000..19579b1
--- /dev/null
+++ b/src/components/Player/AllPlayers.css
@@ -0,0 +1,9 @@
+.all-players {
+    display: flex;
+    background-color: rgb(237, 213, 156);
+    color: black;
+}
+
+.all-players p {
+    margin: 1rem;
+}
\ No newline at end of file
diff --git a/src/components/Player/AllPlayers.tsx b/src/components/Player/AllPlayers.tsx
index f42adcb..a7b661c 100644
--- a/src/components/Player/AllPlayers.tsx
+++ b/src/components/Player/AllPlayers.tsx
@@ -1,11 +1,16 @@
 import { useContext } from "react"
 import { Context } from "../../context/Context"
+import Player from "./Player";
+import "./AllPlayers.css"
 
 export default function AllPlayers() {
-    const AppContext = useContext(Context);
+    const { players } = useContext(Context);
 
     return (
-        <>
-        </>
+        <div className="all-players">
+            {
+                players.map((player) => <Player data={player} />)
+            }
+        </div>
     )
 }
\ No newline at end of file
diff --git a/src/components/Player/Player.css b/src/components/Player/Player.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/components/Player/Player.tsx b/src/components/Player/Player.tsx
index 4617449..4ee4da5 100644
--- a/src/components/Player/Player.tsx
+++ b/src/components/Player/Player.tsx
@@ -39,6 +39,8 @@ export default function Player({ data }: PlayerProps) {
         <div className="player-ui">
             <p>Name: {data.name}</p>
             <p>Score: {data.points}</p>
+            <div className="player-cards"></div>
+            <div className="player-resources"></div>
         </div>
     )
 }
\ No newline at end of file
diff --git a/src/components/Resources/AvailableChips.css b/src/components/Resources/AvailableChips.css
new file mode 100644
index 0000000..28281f0
--- /dev/null
+++ b/src/components/Resources/AvailableChips.css
@@ -0,0 +1,10 @@
+.available-chips {
+    display: flex;
+    flex-flow: row nowrap;
+    background-color: rgb(236, 238, 186);
+    color: black;
+}
+
+.available-chips p {
+    margin: 1rem;
+}
\ No newline at end of file
diff --git a/src/components/Resources/AvailableChips.tsx b/src/components/Resources/AvailableChips.tsx
index 25c649c..1ec569b 100644
--- a/src/components/Resources/AvailableChips.tsx
+++ b/src/components/Resources/AvailableChips.tsx
@@ -1,6 +1,7 @@
 import { useContext } from "react"
 import { Context } from "../../context/Context"
 import { v4 } from "uuid";
+import "./AvailableChips.css"
 
 export default function AvailableChips() {
     const { gameboard } = useContext(Context);