save

jcbhmr · May 7, 2024 · 07bbf47 · 07bbf47
1 parent 6ac5b36
commit 07bbf47
Show file tree

Hide file tree

Showing 29 changed files with 385 additions and 363 deletions.
diff --git a/src/App.tsx b/src/App.tsx
@@ -5,24 +5,27 @@ import { machine } from "./machine";
 import { useMachine } from "@xstate/react";
 
 function App() {
-    const [state, send] = useMachine(machine);
+  const [state, send] = useMachine(machine);
 
-    const deckNames = exportDecks.map((deck) => deck.name);
-    function handleChoose(name1: string, name2: string) {
-        const deck = exportDecks.find((deck) => deck.name === name1)!;
-        const deck2 = exportDecks.find((deck) => deck.name === name2)!;
-        send({ type: "choose_decks", player1Cards: deck.deck().cards, player2Cards: deck2.deck().cards });
-    }
-
-    return (
-      <>
-        {state.matches("SelectDecks") && (
-          <DeckSelectScreen onChoose={handleChoose} deckNames={deckNames} />
-        )}
-        {state.matches("Play") && <PlayGameScreen game={state.context.game!} />
-        }
-      </>
-    );
+  const deckNames = exportDecks.map((deck) => deck.name);
+  function handleChoose(name1: string, name2: string) {
+    const deck = exportDecks.find((deck) => deck.name === name1)!;
+    const deck2 = exportDecks.find((deck) => deck.name === name2)!;
+    send({
+      type: "choose_decks",
+      player1Cards: deck.deck().cards,
+      player2Cards: deck2.deck().cards,
+    });
+  }
+
+  return (
+    <>
+      {state.matches("SelectDecks") && (
+        <DeckSelectScreen onChoose={handleChoose} deckNames={deckNames} />
+      )}
+      {state.matches("Play") && <PlayGameScreen game={state.context.game!} />}
+    </>
+  );
 }
 
 export default App;
diff --git a/src/DeckSelectScreen.tsx b/src/DeckSelectScreen.tsx
@@ -1,54 +1,67 @@
 import { FormEvent, ReactNode, useState } from "react";
 import { exportDecks } from "./engine/CardMap";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuLabel, DropdownMenuSeparator, DropdownMenuTrigger } from "./components/ui/dropdown-menu";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "./components/ui/dropdown-menu";
 import { Button } from "./components/ui/button";
 import { ChevronDownIcon } from "./components/ChevronDownIcon";
 
 export function DeckDropdownMenu({
-    buttonContent,
-    onChange,
-    deckNames
-  }: {
-    buttonContent: ReactNode;
-    onChange: (deckName: string) => void;
-    deckNames: string[];
-  }) {
-    return (
-      <DropdownMenu>
-        <DropdownMenuTrigger asChild>
-          <Button
-            className="text-black-400 hover:text-gray-500"
-            variant="outline"
-          >
-            {buttonContent}
-            <ChevronDownIcon className="ml-2 h-4 w-4" />
-          </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent align="end" className="w-48">
-            {deckNames.map((deckName, i) => (
-                <DropdownMenuItem key={i} onSelect={() => onChange(deckName)}>{deckName}</DropdownMenuItem>
-            ))}
-        </DropdownMenuContent>
-      </DropdownMenu>
-    );
-  }
+  buttonContent,
+  onChange,
+  deckNames,
+}: {
+  buttonContent: ReactNode;
+  onChange: (deckName: string) => void;
+  deckNames: string[];
+}) {
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button
+          className="text-black-400 hover:text-gray-500"
+          variant="outline"
+        >
+          {buttonContent}
+          <ChevronDownIcon className="ml-2 h-4 w-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end" className="w-48">
+        {deckNames.map((deckName, i) => (
+          <DropdownMenuItem key={i} onSelect={() => onChange(deckName)}>
+            {deckName}
+          </DropdownMenuItem>
+        ))}
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
 
-export function DeckSelectScreen({ onChoose, deckNames }: { onChoose: (a: string, b:string) => void, deckNames: string[] }) {
+export function DeckSelectScreen({
+  onChoose,
+  deckNames,
+}: {
+  onChoose: (a: string, b: string) => void;
+  deckNames: string[];
+}) {
+  const [p1, setP1] = useState(deckNames[0]);
+  const [p2, setP2] = useState(deckNames[0]);
 
-    const [p1, setP1] = useState(deckNames[0]);
-    const [p2, setP2] = useState(deckNames[0]);
-
-    function handleClick() {
-        // dont trigger choose if not valid
-        if (deckNames.includes(p1) && deckNames.includes(p2)) {
-            onChoose(p1, p2);
-        }
+  function handleClick() {
+    // dont trigger choose if not valid
+    if (deckNames.includes(p1) && deckNames.includes(p2)) {
+      onChoose(p1, p2);
     }
+  }
 
-
   return (
     <div className="flex items-center justify-center h-screen">
-      <div className="bg-gray-800 rounded-lg p-8 w-full max-w-md">
+      <div className="bg-gray-800 rounded-lg p-8 w-full max-w-lg">
         <div className="flex items-center justify-between mb-6 gap-1">
           <DeckDropdownMenu
             buttonContent={p1}
@@ -71,4 +84,3 @@ export function DeckSelectScreen({ onChoose, deckNames }: { onChoose: (a: string
     </div>
   );
 }
-