board setup functions

src/components/Card/Card.tsx

@@ -1,12 +1,15 @@
-/// <reference path="../../util/main.d.ts" />
+import { CardData } from '../../util/types';
 
-export default function Card(data: Universals.Card) {
+type CardProps = {
+    data: CardData
+}
+
+export default function Card({ data }: CardProps) {
     return (
         <div className="card">
             <p>{data.gemValue}</p>
             <p>{data.tier}</p>
             <p>{data.points || 0}</p>
-            <p>{data.cost}</p>
         </div>
     )
 }

src/components/Gameboard/CardRow.tsx

@@ -1,6 +1,14 @@
-export default function CardRow() {
+import { CardData } from "../../util/types"
+import Card from "../Card/Card"
+
+export default function CardRow(tier: number, cards: CardData[]) {
     return (
         <>
+        <p>Tier: {tier}</p>
+        <div>
+            <p>Cards:</p>
+            { cards.map((cardData: CardData) => <Card data={cardData} />) }
+        </div>
         </>
     )
 }

src/components/Gameboard/Gameboard.d.ts

@@ -1,9 +0,0 @@
-/// <reference path="../Card/Card.d.ts" />
-
-declare namespace Gameboard {
-    export interface CardRow {
-        tier: number
-        displayedCards: Card[3]
-        remainingCards: Card[]
-    }
-}

src/components/Gameboard/Gameboard.tsx

@@ -1,19 +1,60 @@
-/// <reference path="Gameboard.d.ts" />
+import { useEffect, useState } from 'react';
-/// <reference path="../../util/main.d.ts" />
+import { CardData, NobleData, GemValue } from '../../util/types';
+import CardDeck from '../../util/cards.json';
 
 export default function Gameboard() {
-    const exampleCard: Universals.Card = {
+    const [state, setState] = useState({
-        gemValue: Universals.GemValue.Ruby,
+        deck: CardDeck,
-        tier: 1,
+        nobles: new Array<NobleData>,
-        cost: 5
+        cardRows: {
+            tierOne: new Array<CardData>,
+            tierTwo: new Array<CardData>,
+            tierThree: new Array<CardData>
+        },
+    })
+
+    useEffect(() => {
+        initializeBoard();
+        console.log(state || null);
+    }, [])
+
+    const shuffleDeck = () => {
+        if (!state.deck) return;
+
+        let newDeck = state.deck;
+
+        for (const [key, value] of Object.entries(newDeck)) {
+            for (let i = value.length - 1; i > 0; i--) {
+                const j = Math.floor(Math.random() * (i + 1))
+                const temp = value[i];
+                value[i] = value[j];
+                value[j] = temp;
+            }
+        }
+
+        setState({ ...state, deck: newDeck });
+    }
+
+    const initializeBoard = () => {
+        shuffleDeck();
+
+        let newState = state;
+
+        for (const [key, value] of Object.entries(state.deck)) {
+            // @ts-ignore
+            while (newState.cardRows[key].length < 4) {
+                const nextCard = value.shift();
+                // @ts-ignore
+                newState.cardRows[key].push(nextCard);
+            }
+        }
+
+        setState(newState);
     }
 
     return (
         <div>
             <h1>Gameboard</h1>
-            <p>Name: {exampleCard.gemValue}</p>
-            <p>Tier: {exampleCard.tier}</p>
-            <p>Cost: {exampleCard.cost}</p>
         </div>
     )
 }

src/util/main.d.ts

@@ -1,22 +0,0 @@
-declare namespace Universals {
-    export interface Card {
-        gemValue: GemValue
-        tier: number
-        points?: number
-        cost: any
-    }
-
-    export interface Nobles {
-        points: 3
-
-    }
-
-    export enum GemValue {
-        Ruby,
-        Sapphire,
-        Emerald,
-        Diamond,
-        Onyx,
-        Gol,
-    }
-}

src/util/types.ts

@@ -0,0 +1,34 @@
+export interface FullDeck {
+    tierOne: CardData[],
+    tierTwo: CardData[],
+    tierThree: CardData[]
+}
+
+export interface CardData {
+    gemValue: GemValue
+    tier: number
+    points?: number
+    cost: ResourceCost
+}
+
+export interface ResourceCost {
+    ruby: number,
+    sapphire: number,
+    emerald: number,
+    diamond: number,
+    onyx: number,
+}
+
+export interface NobleData {
+    points: 3,
+    cost: ResourceCost
+}
+
+export enum GemValue {
+    Ruby,
+    Sapphire,
+    Emerald,
+    Diamond,
+    Onyx,
+    Gold,
+}