laying out some game related objets

client/src/components/Cards/Card.js

@@ -0,0 +1,16 @@
+export default class Card {
+    constructor(state) {
+        this.state = {
+            tier: state.tier,
+            points: state.points,
+            isWorth: state.worth,
+            cost: {
+                acorns: state.cost.acorns,
+                pineCones: state.cost.pineCones,
+                walnuts: state.cost.walnuts,
+                apples: state.cost.apples,
+                twigs: state.cost.twigs
+            }
+        };
+    }
+}

client/src/components/Cards/Inventory.js

@@ -0,0 +1,40 @@
+import Card from "./Card";
+
+export default class Inventory {
+    constructor(state) {
+        this.state = {
+            materials: {
+                acorns: state.acorns,
+                pineCones: state.pineCones,
+                walnuts: state.walnuts,
+                apples: state.apples,
+                twigs: state.twigs,
+                resin: state.resin
+            },
+            reservedCards: [],
+            cardsInInventory: []
+        };
+    }
+
+    sortCards() {
+        for (let card of this.cardsInInventory) {
+            // sorting algorithm of some kind
+            return card;
+        }
+    }
+
+    pickUpCard(card) {
+        if (!card instanceof Card) {
+            throw new Error("card is not card!");
+        }
+
+        this.state.cardsInInventory.push(card);
+        this.sortCards();
+    }
+
+    reserveCard(card) {
+        if (!this.state.materials.resin) {
+            return;
+        }
+    }
+}

client/src/components/GameConfigForms/LocalMultiForm.js

@@ -1,36 +1,34 @@
 import { useState, useEffect } from "react";
 
+export default function LocalMultiForm() {
+    const [players, setPlayers] = useState(null);
+    const [formVariant, setFormVariant] = useState(null);
+    const [playerOne, setPlayerOne] = useState('');
+    const [playerTwo, setPlayerTwo] = useState('');
+    const [playerThree, setPlayerThree] = useState('');
+    const [playerFour, setPlayerFour] = useState('');
+
     const formVariants = [
         <>   { /* Fragment, expects to be concatenated as necessary within a <form> element */ }
                 { /* Player one and two base; index 0 */ }
         <label key="p1" htmlFor="player-one">Player One:</label>
-    <input key="t1" type="text" id="playerOne" onChange={(e) => console.log(e.target.value)}></input>
+        <input key="t1" type="text" id="playerOne" onChange={(e) => setPlayerOne(e.target.value)}></input>
         <label key="p2" htmlFor="player-two">Player Two:</label>
-    <input key="t2" type="text" id="playerTwo" onChange={(e) => console.log(e.target.value)}></input>
+        <input key="t2" type="text" id="playerTwo" onChange={(e) => setPlayerTwo(e.target.value)}></input>
         </>
         ,
         <>  { /* Player three add on */ }
         <label key="p3" htmlFor="player-three">Player Three:</label>
-    <input key="t3" type="text" id="playerThree" onChange={(e) => console.log(e.target.value)}></input>
+        <input key="t3" type="text" id="playerThree" onChange={(e) => setPlayerThree(e.target.value)}></input>
         </>
         ,
         <>
         <label key="p4" htmlFor="player-four">Player Four:</label>
-    <input key="t4" type="text" id="playerFour" onChange={(e) => console.log(e.target.value)}></input>
+        <input key="t4" type="text" id="playerFour" onChange={(e) => setPlayerFour(e.target.value)}></input>
         </>
     ];
 
-
+    // useEffect for player form logic
-
-export default function LocalMultiForm() {
-    const [players, setPlayers] = useState(null);
-    const [formVariant, setFormVariant] = useState(null);
-    const [playerNames, setPlayerNames] = useState({
-        playerOne: null,
-        playerTwo: null,
-        playerThree: null,
-        playerFour: null
-    });
 
     useEffect(() => {
         switch (players) {