light styling

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>
     )

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) {
@@ -56,6 +66,9 @@ export default function Gameboard() {
             shuffledNobles.push(randNoble);
         }
 
+        console.log(newNobles);
+        console.log(shuffledNobles);
+        
         // setState({ ...gameboard, nobles: shuffledNobles });
         gameboard.nobles = shuffledNobles;
     }

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

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>
+    )
+}

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

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>
     )
 }

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>
     )
 }

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

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