renders card components randomly extracted from a shuffled deck

2022-07-18 18:57:32 -05:00
parent fed8853b94
commit 80bc389f6f
10 changed files with 385 additions and 140 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,11 +9,13 @@
      "version": "0.0.0",
      "dependencies": {
        "react": "^18.2.0",
-        "react-dom": "^18.2.0"
+        "react-dom": "^18.2.0",
+        "uuid": "^8.3.2"
      },
      "devDependencies": {
        "@types/react": "^18.0.15",
        "@types/react-dom": "^18.0.6",
+        "@types/uuid": "^8.3.4",
        "@vitejs/plugin-react": "^2.0.0",
        "typescript": "^4.6.4",
        "vite": "^3.0.0"
@@ -503,6 +505,12 @@
      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
      "dev": true
    },
+    "node_modules/@types/uuid": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
+      "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==",
+      "dev": true
+    },
    "node_modules/@vitejs/plugin-react": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-2.0.0.tgz",
@@ -1377,6 +1385,14 @@
        "browserslist": ">= 4.21.0"
      }
    },
+    "node_modules/uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==",
+      "bin": {
+        "uuid": "dist/bin/uuid"
+      }
+    },
    "node_modules/vite": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/vite/-/vite-3.0.0.tgz",
@@ -1785,6 +1801,12 @@
      "integrity": "sha512-hppQEBDmlwhFAXKJX2KnWLYu5yMfi91yazPb2l+lbJiwW+wdo1gNeRA+3RgNSO39WYX2euey41KEwnqesU2Jew==",
      "dev": true
    },
+    "@types/uuid": {
+      "version": "8.3.4",
+      "resolved": "https://registry.npmjs.org/@types/uuid/-/uuid-8.3.4.tgz",
+      "integrity": "sha512-c/I8ZRb51j+pYGAu5CrFMRxqZ2ke4y2grEBO5AUjgSkSk+qT2Ea+OdWElz/OiMf5MNpn2b17kuVBwZLQJXzihw==",
+      "dev": true
+    },
    "@vitejs/plugin-react": {
      "version": "2.0.0",
      "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-2.0.0.tgz",
@@ -2299,6 +2321,11 @@
        "picocolors": "^1.0.0"
      }
    },
+    "uuid": {
+      "version": "8.3.2",
+      "resolved": "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz",
+      "integrity": "sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg=="
+    },
    "vite": {
      "version": "3.0.0",
      "resolved": "https://registry.npmjs.org/vite/-/vite-3.0.0.tgz",
--- a/package.json
+++ b/package.json
@@ -10,13 +10,15 @@
  },
  "dependencies": {
    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "uuid": "^8.3.2"
  },
  "devDependencies": {
    "@types/react": "^18.0.15",
    "@types/react-dom": "^18.0.6",
+    "@types/uuid": "^8.3.4",
    "@vitejs/plugin-react": "^2.0.0",
    "typescript": "^4.6.4",
    "vite": "^3.0.0"
  }
-}
+}
--- a/src/App.css
+++ b/src/App.css
@@ -1,41 +1,41 @@
 #root {
+  display: flex;
+  align-items: center;
+  justify-content: center;
  max-width: 1280px;
  margin: 0 auto;
  padding: 2rem;
  text-align: center;
 }

-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
+.card-row {
+  display: flex;
+  flex-flow: column nowrap;
+  margin: 2rem;
+  width: 80vw;
 }

-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
+.card-row-cards-visible {
+  display: flex;
+  flex-flow: row nowrap;
+  width: 100%;
+  justify-content: space-around;
 }

 .card {
-  padding: 2em;
+  width: 25%;
 }

-.read-the-docs {
-  color: #888;
+
+.tier-1 {
+  background-color: green;
 }
+
+.tier-2 {
+  background-color: yellow;
+  color: black;
+}
+
+.tier-3 {
+  background-color: blue;
+}
--- a/src/components/Card/Card.tsx
+++ b/src/components/Card/Card.tsx
@@ -6,10 +6,18 @@ type CardProps = {

 export default function Card({ data }: CardProps) {
    return (
-        <div className="card">
-            <p>{data.gemValue}</p>
-            <p>{data.tier}</p>
-            <p>{data.points || 0}</p>
+        <div className={`card`}>
+            <div className="top-row">
+                <p>Counts as: {data.gemValue}</p>
+                <p>Point value: {data.points || 0}</p>
+                <p>Cost:</p>
+                { Object.keys(data.resourceCost).map((key, value) => {
+                    return (
+                        // @ts-ignore
+                        <p>{key}: {data.resourceCost[key]}</p>
+                    )
+                }) }
+            </div>
        </div>
    )
 }
--- a/src/components/Gameboard/CardRow.tsx
+++ b/src/components/Gameboard/CardRow.tsx
@@ -1,14 +1,19 @@
+import { v4 } from 'uuid';
 import { CardData } from "../../util/types"
 import Card from "../Card/Card"

-export default function CardRow(tier: number, cards: CardData[]) {
+interface CardRowProps {
+    tier: number,
+    cards: CardData[]
+}
+
+export default function CardRow({tier, cards}: CardRowProps) {
    return (
-        <>
-        <p>Tier: {tier}</p>
-        <div>
-            <p>Cards:</p>
-            { cards.map((cardData: CardData) => <Card data={cardData} />) }
+        <div className={`card-row tier-${tier}`}>
+            <p>Tier: {tier}</p>
+            <div className="card-row-cards-visible">
+                { cards && cards.map((cardData: CardData) => <Card key={v4()} data={cardData} />) }
+            </div>
        </div>
-        </>
    )
 }
--- a/src/components/Gameboard/Gameboard.tsx
+++ b/src/components/Gameboard/Gameboard.tsx
@@ -1,26 +1,47 @@
 import { useEffect, useState } from 'react';
-import { CardData, NobleData, GemValue } from '../../util/types';
-import CardDeck from '../../util/cards.json';
+import { CardData, NobleData } from '../../util/types';
+import CardRow from './CardRow';
+import CardDeck from '../../data/cards.json';
+import Nobles from '../../data/nobles.json';

 export default function Gameboard() {
    const [state, setState] = useState({
        deck: CardDeck,
-        nobles: new Array<NobleData>,
+        nobles: Nobles.nobles,
        cardRows: {
            tierOne: new Array<CardData>,
            tierTwo: new Array<CardData>,
            tierThree: new Array<CardData>
        },
+        tradingResources: {
+            ruby: 7,
+            sapphire: 7,
+            emerald: 7,
+            diamond: 7,
+            onyx: 7,
+            gold: 5
+        }
    })

+    const [view, setView] = useState(<p>Loading...</p>)
+
    useEffect(() => {
        initializeBoard();
-        console.log(state || null);
+        console.log(state);
    }, [])

+    useEffect(() => {
+        setView(
+            <>
+            <CardRow tier={1} cards={state.cardRows.tierOne} />
+            <CardRow tier={2} cards={state.cardRows.tierTwo} />
+            <CardRow tier={3} cards={state.cardRows.tierThree} />
+            </>
+        )
+    }, [state.cardRows]);
+
    const shuffleDeck = () => {
        if (!state.deck) return;
-
        let newDeck = state.deck;

        for (const [key, value] of Object.entries(newDeck)) {
@@ -35,8 +56,22 @@ export default function Gameboard() {
        setState({ ...state, deck: newDeck });
    }

+    const setNobles = () => {
+        let newNobles = state.nobles;
+        let shuffledNobles = new Array<NobleData>;
+
+        while (shuffledNobles.length < 4) {
+            const rand = Math.floor(Math.random() * newNobles.length);
+            const randNoble = newNobles.splice(rand,1)[0];
+            shuffledNobles.push(randNoble);
+        }
+        
+        setState({ ...state, nobles: shuffledNobles });
+    }
+
    const initializeBoard = () => {
        shuffleDeck();
+        setNobles();

        let newState = state;

@@ -55,6 +90,7 @@ export default function Gameboard() {
    return (
        <div>
            <h1>Gameboard</h1>
+            { view }
        </div>
    )
 }
--- a/src/components/Player/Player.tsx
+++ b/src/components/Player/Player.tsx
@@ -0,0 +1,44 @@
+import { useState } from "react";
+import { CardData, GemValue, NobleData, PlayerData } from "../../util/types";
+
+interface PlayerProps {
+    data: PlayerData
+}
+
+export default function Player({ data }: PlayerProps) {
+    const [state, setState] = useState({
+        name: data.name,
+        starter: data.starter,
+        points: data.points,
+        nobles: data.nobles,
+        cards: data.cards,
+        inventory: data.inventory
+    })
+
+    const buyCard = (cardData: CardData) => {
+        let newCards = state.cards;
+        newCards.push(cardData);
+        setState({ ...state, cards: newCards })
+    }
+
+    const getChips = (payload: (string | GemValue)[]) => {
+        let newInventory = state.inventory;
+        for (let value of payload) {
+            for (let key in newInventory) {
+                if (value === key) {
+                    // @ts-ignore
+                    newInventory[value] += 1;
+                }
+            }
+        }
+
+        setState({ ...state, inventory: newInventory });
+    }
+
+    return (
+        <div className="player-ui">
+            <p>Name: {data.name}</p>
+            <p>Score: {data.points}</p>
+        </div>
+    )
+}
--- a/src/data/cards.json
+++ b/src/data/cards.json
@@ -1,7 +1,7 @@
 {
    "tierOne": [
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 1,
                "sapphire": 1,
                "emerald": 1,
@@ -12,7 +12,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 1,
                "sapphire": 1,
                "emerald": 0,
@@ -23,7 +23,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 1,
                "sapphire": 1,
                "emerald": 1,
@@ -34,7 +34,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 1,
                "sapphire": 0,
                "emerald": 1,
@@ -45,7 +45,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 1,
                "emerald": 1,
@@ -56,7 +56,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 1,
                "sapphire": 2,
                "emerald": 0,
@@ -67,7 +67,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 1,
                "sapphire": 0,
                "emerald": 2,
@@ -78,7 +78,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 3,
                "emerald": 1,
@@ -89,7 +89,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 1,
                "sapphire": 1,
                "emerald": 3,
@@ -100,7 +100,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 0,
                "emerald": 0,
@@ -111,7 +111,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 1,
                "sapphire": 1,
                "emerald": 2,
@@ -122,7 +122,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 1,
                "emerald": 1,
@@ -133,7 +133,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 0,
                "emerald": 1,
@@ -144,7 +144,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 2,
                "sapphire": 0,
                "emerald": 1,
@@ -155,7 +155,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 2,
                "emerald": 2,
@@ -166,7 +166,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 1,
                "sapphire": 2,
                "emerald": 1,
@@ -177,7 +177,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 2,
                "emerald": 1,
@@ -188,7 +188,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 1,
                "sapphire": 0,
                "emerald": 0,
@@ -199,7 +199,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 1,
                "emerald": 0,
@@ -210,7 +210,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 2,
                "sapphire": 0,
                "emerald": 0,
@@ -221,7 +221,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 1,
                "emerald": 0,
@@ -232,7 +232,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 1,
                "sapphire": 1,
                "emerald": 0,
@@ -243,7 +243,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 2,
                "sapphire": 1,
                "emerald": 0,
@@ -254,7 +254,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 3,
                "sapphire": 0,
                "emerald": 1,
@@ -265,7 +265,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 2,
                "sapphire": 0,
                "emerald": 2,
@@ -276,7 +276,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 0,
                "emerald": 2,
@@ -287,7 +287,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 2,
                "emerald": 0,
@@ -298,7 +298,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 2,
                "sapphire": 2,
                "emerald": 0,
@@ -309,7 +309,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 2,
                "sapphire": 0,
                "emerald": 0,
@@ -320,7 +320,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 0,
                "emerald": 2,
@@ -331,7 +331,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 0,
                "emerald": 0,
@@ -342,7 +342,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 0,
                "emerald": 0,
@@ -353,7 +353,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 0,
                "emerald": 3,
@@ -364,7 +364,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 3,
                "sapphire": 0,
                "emerald": 0,
@@ -375,7 +375,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 3,
                "emerald": 0,
@@ -386,7 +386,7 @@
            "points": 0
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 4,
                "sapphire": 0,
                "emerald": 0,
@@ -397,7 +397,7 @@
            "points": 1
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 0,
                "emerald": 0,
@@ -408,7 +408,7 @@
            "points": 1
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 4,
                "emerald": 0,
@@ -419,7 +419,7 @@
            "points": 1
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 0,
                "emerald": 4,
@@ -430,7 +430,7 @@
            "points": 1
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 0,
                "emerald": 0,
@@ -443,7 +443,7 @@
    ],
    "tierTwo": [
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 0,
                "emerald": 0,
@@ -454,7 +454,7 @@
            "points": 2
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 3,
                "sapphire": 0,
                "emerald": 5,
@@ -465,7 +465,7 @@
            "points": 2
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 3,
                "emerald": 0,
@@ -476,7 +476,7 @@
            "points": 1
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 0,
                "emerald": 0,
@@ -487,7 +487,7 @@
            "points": 2
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 0,
                "emerald": 5,
@@ -498,7 +498,7 @@
            "points": 2
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 0,
                "emerald": 0,
@@ -509,7 +509,7 @@
            "points": 2
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 5,
                "sapphire": 0,
                "emerald": 0,
@@ -520,7 +520,7 @@
            "points": 2
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 5,
                "emerald": 3,
@@ -531,7 +531,7 @@
            "points": 2
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 5,
                "sapphire": 0,
                "emerald": 0,
@@ -542,7 +542,7 @@
            "points": 2
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 5,
                "emerald": 0,
@@ -553,7 +553,7 @@
            "points": 2
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 3,
                "sapphire": 3,
                "emerald": 0,
@@ -564,7 +564,7 @@
            "points": 1
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 2,
                "sapphire": 1,
                "emerald": 4,
@@ -575,7 +575,7 @@
            "points": 2
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 1,
                "sapphire": 0,
                "emerald": 0,
@@ -586,7 +586,7 @@
            "points": 2
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 0,
                "emerald": 6,
@@ -597,7 +597,7 @@
            "points": 3
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 2,
                "emerald": 0,
@@ -608,7 +608,7 @@
            "points": 2
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 0,
                "emerald": 0,
@@ -619,7 +619,7 @@
            "points": 3
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 4,
                "emerald": 2,
@@ -630,7 +630,7 @@
            "points": 2
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 2,
                "emerald": 2,
@@ -641,7 +641,7 @@
            "points": 1
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 0,
                "emerald": 3,
@@ -652,7 +652,7 @@
            "points": 1
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 0,
                "emerald": 0,
@@ -663,7 +663,7 @@
            "points": 3
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 2,
                "sapphire": 0,
                "emerald": 0,
@@ -674,7 +674,7 @@
            "points": 1
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 4,
                "sapphire": 0,
                "emerald": 1,
@@ -685,7 +685,7 @@
            "points": 2
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 3,
                "sapphire": 0,
                "emerald": 2,
@@ -696,7 +696,7 @@
            "points": 1
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 2,
                "sapphire": 0,
                "emerald": 3,
@@ -707,7 +707,7 @@
            "points": 1
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 2,
                "sapphire": 3,
                "emerald": 0,
@@ -718,7 +718,7 @@
            "points": 1
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 3,
                "sapphire": 2,
                "emerald": 2,
@@ -729,7 +729,7 @@
            "points": 1
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 6,
                "sapphire": 0,
                "emerald": 0,
@@ -740,7 +740,7 @@
            "points": 3
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 6,
                "emerald": 0,
@@ -751,7 +751,7 @@
            "points": 3
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 3,
                "emerald": 0,
@@ -762,7 +762,7 @@
            "points": 2
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 2,
                "emerald": 3,
@@ -775,7 +775,7 @@
    ],
    "tierThree": [
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 0,
                "emerald": 7,
@@ -786,7 +786,7 @@
            "points": 4
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 0,
                "emerald": 0,
@@ -797,7 +797,7 @@
            "points": 4
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 3,
                "sapphire": 0,
                "emerald": 0,
@@ -808,7 +808,7 @@
            "points": 4
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 3,
                "sapphire": 3,
                "emerald": 6,
@@ -819,7 +819,7 @@
            "points": 4
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 7,
                "sapphire": 0,
                "emerald": 0,
@@ -830,7 +830,7 @@
            "points": 4
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 3,
                "emerald": 0,
@@ -841,7 +841,7 @@
            "points": 4
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 6,
                "sapphire": 0,
                "emerald": 3,
@@ -852,7 +852,7 @@
            "points": 4
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 0,
                "emerald": 0,
@@ -863,7 +863,7 @@
            "points": 4
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 7,
                "emerald": 0,
@@ -874,7 +874,7 @@
            "points": 4
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 6,
                "emerald": 3,
@@ -885,7 +885,7 @@
            "points": 4
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 5,
                "emerald": 3,
@@ -896,7 +896,7 @@
            "points": 3
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 3,
                "sapphire": 3,
                "emerald": 0,
@@ -907,7 +907,7 @@
            "points": 3
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 5,
                "sapphire": 3,
                "emerald": 3,
@@ -918,7 +918,7 @@
            "points": 3
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 3,
                "sapphire": 3,
                "emerald": 5,
@@ -929,7 +929,7 @@
            "points": 3
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 3,
                "sapphire": 0,
                "emerald": 3,
@@ -940,7 +940,7 @@
            "points": 3
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 3,
                "emerald": 0,
@@ -951,7 +951,7 @@
            "points": 5
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 0,
                "emerald": 0,
@@ -962,7 +962,7 @@
            "points": 5
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 3,
                "sapphire": 0,
                "emerald": 7,
@@ -973,7 +973,7 @@
            "points": 5
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 0,
                "sapphire": 7,
                "emerald": 3,
@@ -984,7 +984,7 @@
            "points": 5
        },
        {
-            "cost": {
+            "resourceCost": {
                "ruby": 7,
                "sapphire": 0,
                "emerald": 0,
--- a/src/data/nobles.json
+++ b/src/data/nobles.json
@@ -0,0 +1,104 @@
+{
+    "nobles": [
+        {
+            "points": 3,
+            "resourceCost": {
+                "ruby": 0,
+                "sapphire": 4,
+                "emerald": 4,
+                "onyx": 0,
+                "diamond": 0
+            }
+        },
+        {
+            "points": 3,
+            "resourceCost": {
+                "ruby": 0,
+                "sapphire": 3,
+                "emerald": 0,
+                "onyx": 3,
+                "diamond": 3
+            }
+        },
+        {
+            "points": 3,
+            "resourceCost": {
+                "ruby": 3,
+                "sapphire": 0,
+                "emerald": 3,
+                "onyx": 3,
+                "diamond": 0
+            }
+        },
+        {
+            "points": 3,
+            "resourceCost": {
+                "ruby": 4,
+                "sapphire": 0,
+                "emerald": 0,
+                "onyx": 4,
+                "diamond": 0
+            }
+        },
+        {
+            "points": 3,
+            "resourceCost": {
+                "ruby": 0,
+                "sapphire": 0,
+                "emerald": 0,
+                "onyx": 4,
+                "diamond": 4
+            }
+        },
+        {
+            "points": 3,
+            "resourceCost": {
+                "ruby": 3,
+                "sapphire": 3,
+                "emerald": 3,
+                "onyx": 0,
+                "diamond": 0
+            }
+        },
+        {
+            "points": 3,
+            "resourceCost": {
+                "ruby": 0,
+                "sapphire": 3,
+                "emerald": 3,
+                "onyx": 0,
+                "diamond": 3
+            }
+        },
+        {
+            "points": 3,
+            "resourceCost": {
+                "ruby": 3,
+                "sapphire": 0,
+                "emerald": 0,
+                "onyx": 3,
+                "diamond": 3
+            }
+        },
+        {
+            "points": 3,
+            "resourceCost": {
+                "ruby": 4,
+                "sapphire": 0,
+                "emerald": 4,
+                "onyx": 0,
+                "diamond": 0
+            }
+        },
+        {
+            "points": 3,
+            "resourceCost": {
+                "ruby": 0,
+                "sapphire": 4,
+                "emerald": 0,
+                "onyx": 0,
+                "diamond": 4
+            }
+        }
+    ]
+}
--- a/src/util/types.ts
+++ b/src/util/types.ts
@@ -1,3 +1,21 @@
+export interface GameInformation {
+    players: PlayerData[],
+    nobles: NobleData[],
+    cardsInPlay: CardData[],
+    fullDeck: FullDeck
+}
+
+export interface PlayerData {
+    name: string,
+    starter: boolean,
+    points: number,
+    nobles: NobleData[],
+    cards: CardData[],
+    inventory: {
+        [Property in keyof ResourceCost]: number
+    }
+}
+
 export interface FullDeck {
    tierOne: CardData[],
    tierTwo: CardData[],
@@ -5,10 +23,10 @@ export interface FullDeck {
 }

 export interface CardData {
-    gemValue: GemValue
-    tier: number
+    gemValue: GemValue | string
+    tier?: number
    points?: number
-    cost: ResourceCost
+    resourceCost: ResourceCost
 }

 export interface ResourceCost {
@@ -17,11 +35,12 @@ export interface ResourceCost {
    emerald: number,
    diamond: number,
    onyx: number,
+    gold?: number
 }

 export interface NobleData {
-    points: 3,
-    cost: ResourceCost
+    points: number,
+    resourceCost: ResourceCost
 }

 export enum GemValue {