Merge pull request #1 from innocuous-symmetry/mern-layout

Mern layout

.gitignore

@@ -1,23 +1 @@
-# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+node_modules
-
-# dependencies
-/node_modules
-/.pnp
-.pnp.js
-
-# testing
-/coverage
-
-# production
-/build
-
-# misc
-.DS_Store
-.env.local
-.env.development.local
-.env.test.local
-.env.production.local
-
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*

client/.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

client/package-lock.json

@@ -13,6 +13,7 @@
         "@testing-library/user-event": "^13.5.0",
         "react": "^18.0.0",
         "react-dom": "^18.0.0",
+        "react-router-dom": "^6.2.2",
         "react-scripts": "5.0.0",
         "web-vitals": "^2.1.4"
       }
@@ -7965,6 +7966,14 @@
         "he": "bin/he"
       }
     },
+    "node_modules/history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -13243,6 +13252,30 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/react-router": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.2.tgz",
+      "integrity": "sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==",
+      "dependencies": {
+        "history": "^5.2.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8"
+      }
+    },
+    "node_modules/react-router-dom": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.2.tgz",
+      "integrity": "sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==",
+      "dependencies": {
+        "history": "^5.2.0",
+        "react-router": "6.2.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.8",
+        "react-dom": ">=16.8"
+      }
+    },
     "node_modules/react-scripts": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",
@@ -21781,6 +21814,14 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "history": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
+      "requires": {
+        "@babel/runtime": "^7.7.6"
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -25453,6 +25494,23 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A=="
     },
+    "react-router": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.2.2.tgz",
+      "integrity": "sha512-/MbxyLzd7Q7amp4gDOGaYvXwhEojkJD5BtExkuKmj39VEE0m3l/zipf6h2WIB2jyAO0lI6NGETh4RDcktRm4AQ==",
+      "requires": {
+        "history": "^5.2.0"
+      }
+    },
+    "react-router-dom": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/react-router-dom/-/react-router-dom-6.2.2.tgz",
+      "integrity": "sha512-AtYEsAST7bDD4dLSQHDnk/qxWLJdad5t1HFa1qJyUrCeGgEuCSw0VB/27ARbF9Fi/W5598ujvJOm3ujUCVzuYQ==",
+      "requires": {
+        "history": "^5.2.0",
+        "react-router": "6.2.2"
+      }
+    },
     "react-scripts": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/react-scripts/-/react-scripts-5.0.0.tgz",

client/package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0",
+    "react-router-dom": "^6.2.2",
     "react-scripts": "5.0.0",
     "web-vitals": "^2.1.4"
   },

client/src/App.js

@@ -0,0 +1,18 @@
+import './App.css';
+import { Routes, Route, BrowserRouter } from 'react-router-dom';
+
+import Welcome from './components/Welcome';
+
+function App() {
+  return (
+    <div className="App">
+      <BrowserRouter>
+          <Routes>
+            <Route path="/" element={<Welcome />}/>
+          </Routes>
+        </BrowserRouter>
+      </div>
+  );
+}
+
+export default App;

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/CpuMultiForm.js

@@ -0,0 +1,7 @@
+export default function CpuMultiForm() {
+    return (
+        <form className="local-multi-form">
+            <h1>AI and stuff?</h1>
+        </form>
+    )
+}

client/src/components/GameConfigForms/LocalMultiForm.js

@@ -0,0 +1,74 @@
+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) => setPlayerOne(e.target.value)}></input>
+        <label key="p2" htmlFor="player-two">Player Two:</label>
+        <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) => setPlayerThree(e.target.value)}></input>
+        </>
+        ,
+        <>
+        <label key="p4" htmlFor="player-four">Player Four:</label>
+        <input key="t4" type="text" id="playerFour" onChange={(e) => setPlayerFour(e.target.value)}></input>
+        </>
+    ];
+
+    // useEffect for player form logic
+
+    useEffect(() => {
+        switch (players) {
+            case "2":
+                setFormVariant(formVariants[0]);
+                break;
+            case "3":
+                setFormVariant([formVariants[0], formVariants[1]]);
+                break;
+            case "4":
+                setFormVariant([...formVariants]);
+                break;
+            default:
+                console.log("none");
+                break;
+        }
+    }, [players]);
+
+    return (
+        <>
+        <form className="local-multi-form" style={{paddingBottom: '2rem'}}>
+            <h3 htmlFor="num-players">Number of players:</h3>
+
+            <div>
+                <label htmlFor="2">2 Players</label>
+                <input id="2" name="num-players" type="radio" onChange={(e) => setPlayers(e.target.id)}></input>
+            </div>
+            <div>
+                <label htmlFor="3">3 Players</label>
+                <input id="3" name="num-players" type="radio" onChange={(e) => setPlayers(e.target.id)}></input>
+            </div>
+            <div>
+                <label htmlFor="4">4 Players</label>
+                <input id="4" name="num-players" type="radio" onChange={(e) => setPlayers(e.target.id)}></input>
+            </div>
+        </form>
+
+        <form className="player-input" style={{paddingBottom: '1rem'}}>
+            {formVariant}
+        </form>
+        </>
+    )
+}

client/src/components/Welcome.js

@@ -0,0 +1,58 @@
+import { useState, useRef } from "react"
+import LocalMultiForm from "./GameConfigForms/LocalMultiForm";
+import CpuMultiForm from "./GameConfigForms/CpuMultiForm";
+
+export default function Welcome() {
+    const [localMulti, setLocalMulti] = useState(false);
+    const [cpuMulti, setCpuMulti] = useState(false);
+
+    const [value, setValue] = useState('');
+
+    const localMultiRadio = useRef();
+    const cpuRadio = useRef();
+
+    const handleChange = (e) => {
+        setValue(e.target.id);
+
+        if (e.target.id === 'local-multi') {
+            setLocalMulti(true);
+            setCpuMulti(false);
+        } else {
+            setLocalMulti(false);
+            setCpuMulti(true);
+        }
+    }
+
+    const handleClear = () => {
+        localMultiRadio.current.checked = false;
+        cpuRadio.current.checked = false;
+
+        setLocalMulti(false);
+        setCpuMulti(false);
+        setValue('');
+    }
+
+    return (
+        <>
+        <h1>Welcome to Splinter</h1>
+        <h2>Compete with your friends to have the lowest<br/>possible amount of resources to your name!</h2>
+
+        <h2>Choose from the options below:</h2>
+        <form className="game-config">
+            <div>
+                <label htmlFor="local-multi">Local multiplayer?</label>
+                <input name="game-group" id="local-multi" ref={localMultiRadio} type="radio" onChange={(e) => handleChange(e)}></input>
+            </div>
+            <div>
+                <label htmlFor="cpu-multi">CPU multiplayer? (under construction)</label>
+                <input name="game-group" id="cpu-multi" ref={cpuRadio} type="radio" onChange={(e) => handleChange(e)}></input>
+            </div>
+        </form>
+
+        {localMulti ? <LocalMultiForm /> : null}
+        {cpuMulti ? <CpuMultiForm /> : null}
+
+        <button onClick={handleClear}>Clear form input</button>
+        </>
+    )
+}

src/App.js

@@ -1,25 +0,0 @@
-import logo from './logo.svg';
-import './App.css';
-
-function App() {
-  return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
-  );
-}
-
-export default App;