Made deck select screen functional

src/App.tsx

@@ -1,5 +1,4 @@
 import { ReactNode, createContext, useContext, useState } from "react";
-import placeholderSVGURL from "./assets/placeholder.svg";
 import {
   Game,
   Player,
@@ -10,9 +9,8 @@ import {
 } from "./model";
 //import { Creature, Building, Card } from "./engine/card";
 import { Creature, Card, Landscape } from "./engine/card";
-import { Ability } from "./engine/ability";
-import { get } from "./engine/CardMap";
-import { G, an } from "vitest/dist/reporters-MmQN-57K.js";
+import { get, exportDecks } from "./engine/CardMap";
+
 import { GetCardTargetEvent } from "./engine/card";
 import { GetBoardPosTargetEvent } from "./engine/event";
 
@@ -462,19 +460,7 @@ function PlayerDisplay({player }: {player: Player }) {
     </div>
   );
 }
-function getDemoPlayer(player: Player) {
-  player.deck.push(get("Dark Angel")!);
-  player.deck.push(get("Swamp Dragon")!);
-  player.deck.push(get("Dark Angel")!);
-  player.deck.push(get("Swamp Dragon")!);
-  player.deck.push(get("Dark Angel")!);
 
-  player.hand.push(get("Dark Angel")!);
-  player.hand.push(get("Swamp Dragon")!);
-  player.hand.push(get("Dark Angel")!);
-  player.hand.push(get("Swamp Dragon")!);
-  player.hand.push(get("Dark Angel")!);
-}
 /**
  * @author Tanner Brown
  * This is like the big daddy of the components. This makes up pretty much the entire game. Shows players board, hp, hands, etc etc.
@@ -752,42 +738,49 @@ function PhaseButton({
 }
 function App() {
   const [begin, setBegin] = useState(false);
+  const [deck1, setDeck1] = useState(exportDecks[0].deck());
+  const [deck2, setDeck2] = useState(exportDecks[0].deck());
   let h = function () {
     setBegin(true);
   };
 
   let page = <></>;
   if (begin) {
-
-    page = <GameBoard game={gameInit()} setBegin={setBegin}></GameBoard>;
+    page = <GameBoard game={gameInit(deck1.cards, deck2.cards)} setBegin={setBegin}></GameBoard>;
   } else {
-    page = <DeckSelectScreen handle={h}></DeckSelectScreen>;
+    page = <DeckSelectScreen setDeck1={setDeck1} setDeck2={setDeck2} handle={h}></DeckSelectScreen>;
   }
   return <>{page}</>;
 }
 
 export default App;
 
-function ListOfDecks() {
+function ListOfDecks({setDeck}: {setDeck: any}) {
+  let options = [];
+  for(let i =0; i<exportDecks.length;i++){
+    options.push(<option value={i}>{exportDecks[i].name}</option>)
+  }
+  function handle(event: any){
+    setDeck(exportDecks[event.target.value].deck())
+  }
   return (
     <div>
       <label>Choose a deck:</label>
-      <select>
-        <option>Deck 1</option>
-        <option>Deck 2</option>
+      <select onChange={handle}>
+        {options}
       </select>
     </div>
   );
 }
 
-function DeckSelectScreen({ handle }: { handle: any }) {
+function DeckSelectScreen({ handle, setDeck1, setDeck2 }: { handle: any, setDeck1: any, setDeck2: any }) {
   return (
     <div className="flex flex-col">
       <h1 className="text-2xl flex flex-row justify-center">CARD BATTLES</h1>
       <div className="flex flex-row justify-center gap-10">
-        <ListOfDecks></ListOfDecks>
+        <ListOfDecks setDeck={setDeck1}></ListOfDecks>
         <button onClick={handle}>Begin</button>
-        <ListOfDecks></ListOfDecks>
+        <ListOfDecks setDeck={setDeck2}></ListOfDecks>
       </div>
     </div>
   );
@@ -802,7 +795,7 @@ function dumbStupidFunction(r: number){
   }
 }
 
-function gameInit(){
+function gameInit(deck1: Card[], deck2: Card[]){
   var swampLand: Landscape = new Landscape("Swamp", "Goopy!", LandscapeType.Swamp);
   Game.startNewGame();
   let g = Game.getInstance();
@@ -820,20 +813,12 @@ function gameInit(){
  g.board.getSideByOwnerId(0)?.map((pos: BoardPos) => {pos.setLandscape(swampLand)});
   g.board.getSideByOwnerId(1)?.map((pos: BoardPos) => {pos.setLandscape(swampLand)});
 
-  var deck1: Card[] = [get("Dark Angel"), get("Bog Bum"), get("Fly Swatter"), get("Dark Angel"), 
-  get("Bog Bum"), get("Fly Swatter"), get("Dark Angel"), get("Bog Bum"), 
-  get("Fly Swatter"), get("Dark Angel"), get("Bog Bum"), get("Fly Swatter")];
-
-  var deck2: Card[] = [get("Dark Angel"), get("Bog Bum"), get("Fly Swatter"), get("Dark Angel"), 
-  get("Bog Bum"), get("Fly Swatter"), get("Dark Angel"), get("Bog Bum"), 
-  get("Fly Swatter"), get("Dark Angel"), get("Bog Bum"), get("Fly Swatter")];
-
   var player0Side: BoardPos[] | undefined = Game.getInstance().board.getSideByOwnerId(0);
 
   g.getPlayerById(0).setDeck(deck1);
   g.getPlayerById(1).setDeck(deck2);
 
-  g.getPlayerById(0).drawCard(6, false);
+  g.getPlayerById(0).drawCard(5, false);
   g.getPlayerById(1).drawCard(5, false);
 
   g.getPlayerById(0).username = "Player 1";

src/engine/CardMap.ts

@@ -438,4 +438,44 @@ export function seeNonNullDecks() {
   for(var i = 0; i < decks.length; i++) {
     console.log(decks[i].name + " is Non-Null");
   }
+}
+
+
+
+
+
+export var exportDecks = [{name: "Cornfield deck", deck: getCornfieldDeck}, {name: "Hills deck", deck: getHillsDeck}, 
+{name: "SwamplandsDeck", deck: getSwamplandsDeck}, {name: "IcelandsDeck", deck: getIcelandsDeck}, {name: "SandylandsDeck", deck: getSandylandsDeck}];
+function getSandylandsDeck(){
+  return new Deck("Sandyland Deck", [Sandyland, Sandyland, Sandyland, Sandyland], [get("Sandsnake"), get("Beach Mummy"), get("The Mariachi"), get("SandWitch"), 
+  get("Sand Eyebat"), get("Green Cactiball"), get("Sandhorn Devil"), get("Wall of Sand"), get("Lost Golem"), get("Sand Knight"), get("Fummy"), get("Sand Angel"), 
+  get("Peach Djinni"), get("Ms. Mummy"), get("Sandsnake"), get("Beach Mummy"), get("The Mariachi"), get("SandWitch"), get("Sand Eyebat"), get("Green Cactiball")]);
+}
+
+function getIcelandsDeck(){
+  return new Deck("Icylands Deck", [Icyland, Icyland, Icyland, Icyland], [get("Cold Soldier"), get("Abdominal Snowman"), get("Icemeister"), get("Sprucy Lucy"), 
+  get("Reign Deer"), get("Frost Dragon"), get("Slay Rider"), get("Frozen Fish"), get("Snow Angel"), get("Emperor Penguin"), get("Snow Bunny"), get("Snow Dog"), 
+  get("Boarder Collie"), get("Cold Soldier"), get("Adbominal Snowman"), get("Icemeister"), get("Reign Deer"), get("Frost Dragon"), get("Slay Rider"), 
+  get("Frozen Fish")])
+}
+
+function getSwamplandsDeck(){
+  return new Deck("Swmaplands Deck", [Swampland, Swampland, Candyland, Candyland], [get("Bog Ban-She Angel"), get("Ban-She Princess"), get("Fly Swatter"), 
+  get("Bog Bum"), get("Unicyclops"), get("Man-Witch"), get("Ban-She Queen"), get("Bog Frog Bomb"), get("Furious Rooster"), get("Music Mallard"), get("Cottonpult"), 
+  get("Dr. Stuffenstein"), get("Furious Hen"), get("Papercut Tiger"), get("Furious Chick"), get("Ban-She Princess"), get("Fly Swatter"), get("Bog Bum"), 
+  get("Unicyclops"), get("Man-Witch")]);
+}
+
+function getHillsDeck(){
+  return new Deck("Hills Deck", [Hills, Hills, Hills, Hills], [get("Punk Cat"), get("Cool Dog"), get("Embarrassing Bard"), get("Ancient Scholar"), get("Dragon Claw"), 
+  get("Woadic Chief"), get("Struzann Jinn"), get("Psionic Architect"), get("X-Large Spirit Soldier"), get("Heavenly Gazer"), get("Uni-Knight"), 
+  get("Woadic Marauder"), get("The Pig"), get("Punk Cat"), get("Cool Dog"), get("Ancient Scholar"), get("Dragon Claw"), get("Struzann Jinn"), 
+  get("Psionic Architect"), get("X-Large Spirit Soldier")]);
+}
+
+function getCornfieldDeck(){
+  return new Deck("Cornfield Deck", [Cornfield, Cornfield, Cornfield, Cornfield], [get("Husker Worm"), get("Cornataur"), get("Legion of Earlings"), 
+  get("Field Stalker"), get("Patchy the Pumpkin"), get("Corn Ronin"), get("Wall of Ears"), get("Travelin' Farmer"), get("Husker Knight"), get("Archer Dan"), get("Corn Dog"), 
+  get("Corn Lord"), get("Field Reaper"), get("Phyllis"), get("Evil Eye"), get("Big Foot"), get("Husker Worm"), get("Corntaur"), get("Legion of Earlings"), 
+  get("Field Stalker")]);
 }

src/main.tsx

@@ -4,7 +4,7 @@ import App from "./App.tsx";
 import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
-  <React.StrictMode>
+  //<React.StrictMode>
     <App />
-  </React.StrictMode>,
+  //</React.StrictMode>,
 );