diff --git a/src/App.tsx b/src/App.tsx
index 54769c5..8f9afed 100644
--- 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
index 0ae9343..91aea8b 100644
--- 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>
   );
 }
-
diff --git a/src/PlayGameScreen.tsx b/src/PlayGameScreen.tsx
index f466d1e..de58e11 100644
--- a/src/PlayGameScreen.tsx
+++ b/src/PlayGameScreen.tsx
@@ -14,22 +14,15 @@ export function dumbStupidFunction(r: number) {
   }
 }
 
-
 export default function PlayGameScreen({ game }: { game: Game }) {
-    const [, forceUpdate] = useState(0);
-    function setBegin(b: boolean) {
-      if (b) {
-        location.reload();
-      }
+  const [, forceUpdate] = useState(0);
+  function setBegin(b: boolean) {
+    if (b) {
+      location.reload();
     }
-    return (
-        <GameBoard game={game} setBegin={setBegin} />
-    );
   }
-
-
-
-
+  return <GameBoard game={game} setBegin={setBegin} />;
+}
 
 /**
  * @author Tanner Brown
@@ -39,7 +32,7 @@ export default function PlayGameScreen({ game }: { game: Game }) {
  * @param player: gotta know which player we rendering
  * @returns markup that shows what I just wrote above
  */
-export function PlayerDisplay({ player }: { player: Player; }) {
+export function PlayerDisplay({ player }: { player: Player }) {
   return (
     <div className={"player_display player_" + player.id}>
       <div className="flex flex-col">
@@ -60,10 +53,10 @@ export function PlayerDisplay({ player }: { player: Player; }) {
  * @param game: the actual game object. board: the board from the game. why do i pass this as a parameter even? setHover: magnify the cards when hovered.
  */
 
-
-
 export function Board({
-  game, board, setHover,
+  game,
+  board,
+  setHover,
 }: {
   game: Game;
   board: SidedBoard;
@@ -84,7 +77,7 @@ export function Board({
         landscapeColor: board.getBoardPosByOwnerId(p1.id, i)?.landscape,
         setHover: setHover,
         //building: game.board.getBoardPosByOwnerId(0, i)?.building
-      })
+      }),
     );
 
     p2Board.push(
@@ -94,7 +87,7 @@ export function Board({
         landscapeColor: board.getBoardPosByOwnerId(p1.id, i)?.landscape,
         setHover: setHover,
         //building: game.board.getBoardPosByOwnerId(1, i)?.building,
-      })
+      }),
     );
   }
 
@@ -122,10 +115,13 @@ export function Board({
  * phase: the current turn phase. needed for exclusivity reasons. setHover: statechange for magnifying cards.
  */
 
-
-
 export function HandOfCards({
-  playerHand, stateChange, currentPlayer, ownerPlayer, phase, setHover,
+  playerHand,
+  stateChange,
+  currentPlayer,
+  ownerPlayer,
+  phase,
+  setHover,
 }: {
   playerHand: Card[];
   stateChange: React.Dispatch<React.SetStateAction<number>>;
@@ -148,7 +144,7 @@ export function HandOfCards({
           currentPlayer: currentPlayer,
           position: i,
           phase: phase,
-        })
+        }),
       );
       //not really relevant anymore since back-end axed spells/buildings, but in case we have time and they re-implement them i see no reason to remove this
       // else statement. currently does not execute
@@ -162,7 +158,7 @@ export function HandOfCards({
           ownerPlayer: ownerPlayer,
           currentPlayer: currentPlayer,
           phase: phase,
-        })
+        }),
       );
     }
   }
@@ -180,7 +176,12 @@ export function HandOfCards({
  * @returns markup for summoning buttons
  */
 export function SummoningButtons({
-  cardPos, game, setSummonState, playerid, log, setLog,
+  cardPos,
+  game,
+  setSummonState,
+  playerid,
+  log,
+  setLog,
 }: {
   cardPos: number;
   game: Game;
@@ -218,7 +219,7 @@ export function SummoningButtons({
         type="button"
         onClick={function () {
           handle(0, playerid);
-        } }
+        }}
       >
         Zone 1
       </button>
@@ -226,7 +227,7 @@ export function SummoningButtons({
         type="button"
         onClick={function () {
           handle(1, playerid);
-        } }
+        }}
       >
         Zone 2
       </button>
@@ -234,7 +235,7 @@ export function SummoningButtons({
         type="button"
         onClick={function () {
           handle(2, playerid);
-        } }
+        }}
       >
         Zone 3
       </button>
@@ -242,7 +243,7 @@ export function SummoningButtons({
         type="button"
         onClick={function () {
           handle(3, playerid);
-        } }
+        }}
       >
         Zone 4
       </button>
@@ -258,7 +259,11 @@ export function SummoningButtons({
  * @returns mark up for attacking buttons
  */
 export function AttackingButtons({
-  player, game, reset, resetState, setBegin,
+  player,
+  game,
+  reset,
+  resetState,
+  setBegin,
 }: {
   player: Player;
   game: Game;
@@ -272,7 +277,7 @@ export function AttackingButtons({
     game.simulateCombat(boardPos, playerid);
     if (game.getOtherPlayer(player.id).hp <= 0) {
       alert(
-        `${player.username} has won. Press OK to return to deck select screen.`
+        `${player.username} has won. Press OK to return to deck select screen.`,
       );
       setBegin(false);
     }
@@ -284,7 +289,7 @@ export function AttackingButtons({
         type="button"
         onClick={function () {
           handle(0, playerid);
-        } }
+        }}
       >
         Attack with monster at zone 1
       </button>
@@ -292,7 +297,7 @@ export function AttackingButtons({
         type="button"
         onClick={function () {
           handle(1, playerid);
-        } }
+        }}
       >
         Attack with monster at zone 2
       </button>
@@ -300,7 +305,7 @@ export function AttackingButtons({
         type="button"
         onClick={function () {
           handle(2, playerid);
-        } }
+        }}
       >
         Attack with monster at zone 3
       </button>
@@ -308,7 +313,7 @@ export function AttackingButtons({
         type="button"
         onClick={function () {
           handle(3, playerid);
-        } }
+        }}
       >
         Attack with monster at zone 4
       </button>
@@ -320,7 +325,10 @@ export function AttackingButtons({
  * @returns markup that displays the gamelog in the browser
  */
 export function GameLog({
-  turn, phase, currentPlayer, log,
+  turn,
+  phase,
+  currentPlayer,
+  log,
 }: {
   turn: number;
   phase: number;
@@ -352,7 +360,8 @@ export function GameLog({
   );
 }
 export let globalTempVariable = -1;
-export const setGlobalTempVariable = (val: number) => globalTempVariable = val;
+export const setGlobalTempVariable = (val: number) =>
+  (globalTempVariable = val);
 /**
  * @author Tanner Brown
  * So basically this is the markup that sits on the left of the screen. If its null (ie. no one has hovered a card yet) then its blank. However, if a card
@@ -361,7 +370,7 @@ export const setGlobalTempVariable = (val: number) => globalTempVariable = val;
  * @param param0
  * @returns
  */
-export function HoverCard({ card }: { card: Creature; }) {
+export function HoverCard({ card }: { card: Creature }) {
   if (card === null) {
     return <div className="hover_card_shape"></div>;
   }
@@ -376,7 +385,8 @@ export function HoverCard({ card }: { card: Creature; }) {
           style={{
             objectFit: "cover",
           }}
-          width={350} />
+          width={350}
+        />
       </div>
       <div className="flex-1 p-4 grid gap-2">
         <h2 className="text-s font-bold tracking-tight">{card.name}</h2>
@@ -404,7 +414,7 @@ export function HoverCard({ card }: { card: Creature; }) {
  * @returns Markup to display the game
  * @param game: the game object we're rendering. setBegin: when we set this as true the game ends and we go backto deck select screen
  */
-export function GameBoard({ game, setBegin }: { game: Game; setBegin: any; }) {
+export function GameBoard({ game, setBegin }: { game: Game; setBegin: any }) {
   // grab our players. a lot of components need this guys as parameters
   let player1 = game.getPlayerById(0);
   let player2 = game.getPlayerById(1);
@@ -595,7 +605,12 @@ export function GameBoard({ game, setBegin }: { game: Game; setBegin: any; }) {
  */
 
 export function PhaseButton({
-  game, imagePath, setPhase, setTurn, setCurrentPlayer, setSummoning,
+  game,
+  imagePath,
+  setPhase,
+  setTurn,
+  setCurrentPlayer,
+  setSummoning,
 }: {
   game: Game;
   imagePath: string;
@@ -617,4 +632,3 @@ export function PhaseButton({
     </button>
   );
 }
-
diff --git a/src/assets/bog-frog-bomb.png b/src/assets/bog-frog-bomb.png
new file mode 100644
index 0000000..bf2219d
Binary files /dev/null and b/src/assets/bog-frog-bomb.png differ
diff --git a/src/assets/dr-stuffenstein.png b/src/assets/dr-stuffenstein.png
new file mode 100644
index 0000000..58774cb
Binary files /dev/null and b/src/assets/dr-stuffenstein.png differ
diff --git a/src/assets/furious-chick.png b/src/assets/furious-chick.png
new file mode 100644
index 0000000..9e53a3a
Binary files /dev/null and b/src/assets/furious-chick.png differ
diff --git a/src/assets/ms-mummy.png b/src/assets/ms-mummy.png
new file mode 100644
index 0000000..c34d1ab
Binary files /dev/null and b/src/assets/ms-mummy.png differ
diff --git a/src/assets/mud-angel.png b/src/assets/mud-angel.png
new file mode 100644
index 0000000..2f7fa27
Binary files /dev/null and b/src/assets/mud-angel.png differ
diff --git a/src/assets/pieclops.png b/src/assets/pieclops.png
new file mode 100644
index 0000000..9f17fb0
Binary files /dev/null and b/src/assets/pieclops.png differ
diff --git a/src/assets/prickle.png b/src/assets/prickle.png
new file mode 100644
index 0000000..5eb4dfc
Binary files /dev/null and b/src/assets/prickle.png differ
diff --git a/src/assets/sand-angel.png b/src/assets/sand-angel.png
new file mode 100644
index 0000000..f5ee8f3
Binary files /dev/null and b/src/assets/sand-angel.png differ
diff --git a/src/assets/sand-eyebat.png b/src/assets/sand-eyebat.png
new file mode 100644
index 0000000..d933ae5
Binary files /dev/null and b/src/assets/sand-eyebat.png differ
diff --git a/src/assets/sand-jackal.png b/src/assets/sand-jackal.png
new file mode 100644
index 0000000..23381e8
Binary files /dev/null and b/src/assets/sand-jackal.png differ
diff --git a/src/assets/sand-knight.png b/src/assets/sand-knight.png
new file mode 100644
index 0000000..ee6208f
Binary files /dev/null and b/src/assets/sand-knight.png differ
diff --git a/src/assets/sand-snake.png b/src/assets/sand-snake.png
new file mode 100644
index 0000000..449a1e8
Binary files /dev/null and b/src/assets/sand-snake.png differ
diff --git a/src/assets/sand-witch.png b/src/assets/sand-witch.png
new file mode 100644
index 0000000..12746df
Binary files /dev/null and b/src/assets/sand-witch.png differ
diff --git a/src/assets/sandasaurus-rex.png b/src/assets/sandasaurus-rex.png
new file mode 100644
index 0000000..7e8e6de
Binary files /dev/null and b/src/assets/sandasaurus-rex.png differ
diff --git a/src/assets/sandbacho.png b/src/assets/sandbacho.png
new file mode 100644
index 0000000..ac91e6c
Binary files /dev/null and b/src/assets/sandbacho.png differ
diff --git a/src/assets/sandfoot.png b/src/assets/sandfoot.png
new file mode 100644
index 0000000..a5e8a1a
Binary files /dev/null and b/src/assets/sandfoot.png differ
diff --git a/src/assets/wall-of-chocolate.png b/src/assets/wall-of-chocolate.png
new file mode 100644
index 0000000..c42bdd5
Binary files /dev/null and b/src/assets/wall-of-chocolate.png differ
diff --git a/src/components/Card.tsx b/src/components/Card.tsx
index f0327a4..839ab4d 100644
--- a/src/components/Card.tsx
+++ b/src/components/Card.tsx
@@ -15,7 +15,13 @@ import { CreatureComponentOnBoard } from "./Creature";
  * player the cards are assigned to. phase: current turn phase. needed for making events phase exclusive
  */
 export function CardComponent({
-  card, state, position, setHover, currentPlayer, ownerPlayer, phase,
+  card,
+  state,
+  position,
+  setHover,
+  currentPlayer,
+  ownerPlayer,
+  phase,
 }: {
   card: Card | Creature;
   children?: ReactNode;
@@ -49,7 +55,9 @@ export function CardComponent({
   return (
     <button>
       <div
-        className={"card_shape overflow-auto hover:border-black player_" + ownerPlayer.id}
+        className={
+          "card_shape overflow-auto hover:border-black player_" + ownerPlayer.id
+        }
         onClick={handleClick}
         onMouseOver={() => {
           setHover(card);
@@ -65,7 +73,8 @@ export function CardComponent({
               aspectRatio: "240/135",
               objectFit: "cover",
             }}
-            width={350} />
+            width={350}
+          />
         </div>
         <div className="flex-1 p-4 grid gap-2">
           <h2 className="text-lg font-bold tracking-tight">{card.name}</h2>
@@ -73,14 +82,15 @@ export function CardComponent({
       </div>
     </button>
   );
-}/**
+} /**
  * @author Tanner Brown
  * I spoke about this in my documentation on the CreatureComponentOnBoard component. Check there for why this is a thing
  * @param param0
  * @returns
  */
 export function CardComponentOnBoard({
-  card, setHover,
+  card,
+  setHover,
 }: {
   card: Card | Creature;
   children?: ReactNode;
@@ -99,7 +109,7 @@ export function CardComponentOnBoard({
         className={className}
         onMouseOver={() => {
           setHover(card);
-        } }
+        }}
       >
         <div className="flex aspect-16/9">
           <img
@@ -111,7 +121,8 @@ export function CardComponentOnBoard({
               aspectRatio: "240/135",
               objectFit: "cover",
             }}
-            width={350} />
+            width={350}
+          />
         </div>
         <div className="flex-1 p-4 grid gap-2">
           <h2 className="text-lg font-bold tracking-tight">{card.name}</h2>
@@ -130,7 +141,10 @@ export function CardComponentOnBoard({
  */
 export function LandscapeCard({
   //building,
-  creature, player, landscapeColor, setHover,
+  creature,
+  player,
+  landscapeColor,
+  setHover,
 }: {
   //building: Building | undefined;
   creature: Creature | undefined;
@@ -153,13 +167,14 @@ export function LandscapeCard({
   // }
   return (
     <div
-      className={"landscape_shape flex justify-center items-center player_" +
+      className={
+        "landscape_shape flex justify-center items-center player_" +
         player.id +
-        ` bg-[${landscapeColor}]`}
+        ` bg-[${landscapeColor}]`
+      }
     >
       {c}
       {/* {b} */}
     </div>
   );
 }
-
diff --git a/src/components/Creature.tsx b/src/components/Creature.tsx
index d976505..5019949 100644
--- a/src/components/Creature.tsx
+++ b/src/components/Creature.tsx
@@ -12,7 +12,13 @@ import { CardComponent, CardComponentOnBoard } from "./Card";
  * @returns CardComponent, but with attack/defense values
  */
 export function CreatureComponent({
-  card, state, position, setHover, currentPlayer, ownerPlayer, phase,
+  card,
+  state,
+  position,
+  setHover,
+  currentPlayer,
+  ownerPlayer,
+  phase,
 }: {
   card: Creature;
   state: React.Dispatch<React.SetStateAction<number>>;
@@ -41,14 +47,15 @@ export function CreatureComponent({
       {child}
     </CardComponent>
   );
-}/**
+} /**
  * Kinda dumb, but since cards on board have different function than ones in hand I felt this was necessary. Currently, this just is the other creature/card
  * component but without triggering summoning buttons
  * @param param0
  * @returns
  */
 export function CreatureComponentOnBoard({
-  card, setHover,
+  card,
+  setHover,
 }: {
   card: Creature;
   setHover: any;
@@ -66,4 +73,3 @@ export function CreatureComponentOnBoard({
     ></CardComponentOnBoard>
   );
 }
-
diff --git a/src/components/Deck.tsx b/src/components/Deck.tsx
index 333cce1..3a02a81 100644
--- a/src/components/Deck.tsx
+++ b/src/components/Deck.tsx
@@ -1,7 +1,4 @@
-import {
-  Game,
-  Player
-} from "../engine/game";
+import { Game, Player } from "../engine/game";
 import { dumbStupidFunction } from "../PlayGameScreen";
 
 /**
@@ -12,7 +9,12 @@ import { dumbStupidFunction } from "../PlayGameScreen";
  * log: the log. needed for if player cannot draw anymore and game must tell player as such. setLog: useState for re-rendering log. game: the game object
  */
 export function Deck({
-  player, resetState, reset, log, setLog, game,
+  player,
+  resetState,
+  reset,
+  log,
+  setLog,
+  game,
 }: {
   player: Player;
   resetState: any;
@@ -39,7 +41,9 @@ export function Deck({
   return (
     <button>
       <div
-        className={"card_shape flex h-screen hover:border-yellow-800 player_" + player.id}
+        className={
+          "card_shape flex h-screen hover:border-yellow-800 player_" + player.id
+        }
         onClick={handleDraw}
       >
         <div className="text-center text-7xl m-auto">
diff --git a/src/components/DiscardPile.tsx b/src/components/DiscardPile.tsx
index 731630a..20f43ce 100644
--- a/src/components/DiscardPile.tsx
+++ b/src/components/DiscardPile.tsx
@@ -3,7 +3,7 @@
  * @param size, a number that represents number of cards in pile
  * @returns returns markup displaying what i wrote just above
  */
-export function DiscardPile({ size }: { size: number; }) {
+export function DiscardPile({ size }: { size: number }) {
   return (
     <div className="card_shape flex h-screen hover:border-yellow-800">
       <div className="text-center text-7xl m-auto">
diff --git a/src/components/ui/dropdown-menu.tsx b/src/components/ui/dropdown-menu.tsx
index 769ff7a..9af40e1 100644
--- a/src/components/ui/dropdown-menu.tsx
+++ b/src/components/ui/dropdown-menu.tsx
@@ -1,25 +1,25 @@
-import * as React from "react"
-import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu"
-import { Check, ChevronRight, Circle } from "lucide-react"
+import * as React from "react";
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import { Check, ChevronRight, Circle } from "lucide-react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
-const DropdownMenu = DropdownMenuPrimitive.Root
+const DropdownMenu = DropdownMenuPrimitive.Root;
 
-const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger
+const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 
-const DropdownMenuGroup = DropdownMenuPrimitive.Group
+const DropdownMenuGroup = DropdownMenuPrimitive.Group;
 
-const DropdownMenuPortal = DropdownMenuPrimitive.Portal
+const DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 
-const DropdownMenuSub = DropdownMenuPrimitive.Sub
+const DropdownMenuSub = DropdownMenuPrimitive.Sub;
 
-const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup
+const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 
 const DropdownMenuSubTrigger = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubTrigger>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.SubTrigger> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, children, ...props }, ref) => (
   <DropdownMenuPrimitive.SubTrigger
@@ -27,16 +27,16 @@ const DropdownMenuSubTrigger = React.forwardRef<
     className={cn(
       "flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   >
     {children}
     <ChevronRight className="ml-auto h-4 w-4" />
   </DropdownMenuPrimitive.SubTrigger>
-))
+));
 DropdownMenuSubTrigger.displayName =
-  DropdownMenuPrimitive.SubTrigger.displayName
+  DropdownMenuPrimitive.SubTrigger.displayName;
 
 const DropdownMenuSubContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.SubContent>,
@@ -46,13 +46,13 @@ const DropdownMenuSubContent = React.forwardRef<
     ref={ref}
     className={cn(
       "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-      className
+      className,
     )}
     {...props}
   />
-))
+));
 DropdownMenuSubContent.displayName =
-  DropdownMenuPrimitive.SubContent.displayName
+  DropdownMenuPrimitive.SubContent.displayName;
 
 const DropdownMenuContent = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Content>,
@@ -64,18 +64,18 @@ const DropdownMenuContent = React.forwardRef<
       sideOffset={sideOffset}
       className={cn(
         "z-50 min-w-[8rem] overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
-        className
+        className,
       )}
       {...props}
     />
   </DropdownMenuPrimitive.Portal>
-))
-DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName
+));
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
 
 const DropdownMenuItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Item>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Item> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Item
@@ -83,12 +83,12 @@ const DropdownMenuItem = React.forwardRef<
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
-))
-DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
 
 const DropdownMenuCheckboxItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.CheckboxItem>,
@@ -98,7 +98,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     checked={checked}
     {...props}
@@ -110,9 +110,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.CheckboxItem>
-))
+));
 DropdownMenuCheckboxItem.displayName =
-  DropdownMenuPrimitive.CheckboxItem.displayName
+  DropdownMenuPrimitive.CheckboxItem.displayName;
 
 const DropdownMenuRadioItem = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.RadioItem>,
@@ -122,7 +122,7 @@ const DropdownMenuRadioItem = React.forwardRef<
     ref={ref}
     className={cn(
       "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      className
+      className,
     )}
     {...props}
   >
@@ -133,13 +133,13 @@ const DropdownMenuRadioItem = React.forwardRef<
     </span>
     {children}
   </DropdownMenuPrimitive.RadioItem>
-))
-DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
 
 const DropdownMenuLabel = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Label>,
   React.ComponentPropsWithoutRef<typeof DropdownMenuPrimitive.Label> & {
-    inset?: boolean
+    inset?: boolean;
   }
 >(({ className, inset, ...props }, ref) => (
   <DropdownMenuPrimitive.Label
@@ -147,12 +147,12 @@ const DropdownMenuLabel = React.forwardRef<
     className={cn(
       "px-2 py-1.5 text-sm font-semibold",
       inset && "pl-8",
-      className
+      className,
     )}
     {...props}
   />
-))
-DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
 
 const DropdownMenuSeparator = React.forwardRef<
   React.ElementRef<typeof DropdownMenuPrimitive.Separator>,
@@ -163,8 +163,8 @@ const DropdownMenuSeparator = React.forwardRef<
     className={cn("-mx-1 my-1 h-px bg-muted", className)}
     {...props}
   />
-))
-DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 
 const DropdownMenuShortcut = ({
   className,
@@ -175,9 +175,9 @@ const DropdownMenuShortcut = ({
       className={cn("ml-auto text-xs tracking-widest opacity-60", className)}
       {...props}
     />
-  )
-}
-DropdownMenuShortcut.displayName = "DropdownMenuShortcut"
+  );
+};
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 export {
   DropdownMenu,
@@ -195,4 +195,4 @@ export {
   DropdownMenuSubContent,
   DropdownMenuSubTrigger,
   DropdownMenuRadioGroup,
-}
+};
diff --git a/src/engine/CardMap.ts b/src/engine/CardMap.ts
index 5937a63..2039a70 100644
--- a/src/engine/CardMap.ts
+++ b/src/engine/CardMap.ts
@@ -10,7 +10,7 @@ function put(name: string, card: Card): void {
 export function addUrl(name: string, Url: string): void {
   var card: Card | undefined = cardMap.get(name);
   if (typeof card == "undefined") {
-    console.assert('Card not found', name, "for addUrl", Url)
+    console.assert("Card not found", name, "for addUrl", Url);
     return;
   } else {
     put(name, card.setImageUrl(Url));
@@ -47,18 +47,22 @@ class Deck {
 //Swamp Creatures
 
 //Made this card more for testing or ending the game quickly if we have to.
+import n0 from "../assets/swamp-dragon.png";
 put(
   "Swamp Dragon",
-  new Creature("Swamp Dragon", "", 2, LandscapeType.Swamp, 25, 8, ""),
+  new Creature("Swamp Dragon", "", 2, LandscapeType.Swamp, 25, 8, n0),
 );
+import n1 from "../assets/dark-angel.png";
 put(
   "Dark Angel",
-  new Creature("Dark Angel", "", 1, LandscapeType.Swamp, 10, 5, ""),
+  new Creature("Dark Angel", "", 1, LandscapeType.Swamp, 10, 5, n1),
 );
 
-put("Bog Bum", new Creature("Bog Bum", "", 1, LandscapeType.Swamp, 2, 6, ""));
+import n2 from "../assets/bog-bum.png";
+put("Bog Bum", new Creature("Bog Bum", "", 1, LandscapeType.Swamp, 2, 6, n2));
 
 // Not sure about this one. This card's ability is not really functional right now.
+import n3 from "../assets/fly-swatter.png";
 put(
   "Fly Swatter",
   new Creature(
@@ -68,291 +72,345 @@ put(
     LandscapeType.Swamp,
     1,
     6,
-    "",
+    n3,
   ),
 );
 
+import n4 from "../assets/unicyclops.png";
 put(
   "Unicyclops",
-  new Creature("Unicyclops", "", 2, LandscapeType.Swamp, 7, 3, ""),
+  new Creature("Unicyclops", "", 2, LandscapeType.Swamp, 7, 3, n4),
 );
+import n5 from "../assets/man-witch.png";
 put(
   "Man-Witch",
-  new Creature("Man-Witch", "", 2, LandscapeType.Swamp, 4, 4, ""),
+  new Creature("Man-Witch", "", 2, LandscapeType.Swamp, 4, 4, n5),
 );
 
+import n6 from "../assets/ban-she-princess.png";
 put(
   "Ban-She Princess",
-  new Creature("Ban She Princess", "", 1, LandscapeType.Swamp, 2, 7, ""),
+  new Creature("Ban She Princess", "", 1, LandscapeType.Swamp, 2, 7, n6),
 );
+import n7 from "../assets/ban-she-queen.png";
 put(
   "Ban-She Queen",
-  new Creature("Ban She Queen", "", 2, LandscapeType.Swamp, 4, 9, ""),
+  new Creature("Ban She Queen", "", 2, LandscapeType.Swamp, 4, 9, n7),
 );
 
+import n8 from "../assets/ban-she-knight.png";
 put(
   "Ban-She Knight",
-  new Creature("Ban She Knight", "", 1, LandscapeType.Swamp, 3, 7, ""),
+  new Creature("Ban She Knight", "", 1, LandscapeType.Swamp, 3, 7, n8),
 );
+import n9 from "../assets/black-merlock.png";
 put(
   "Black Merlock",
-  new Creature("Black Merlock", "", 1, LandscapeType.Swamp, 2, 5, ""),
+  new Creature("Black Merlock", "", 1, LandscapeType.Swamp, 2, 5, n9),
 );
 
+import n10 from "../assets/bog-ban-she-angel.png";
 put(
   "Bog Ban-She Angel",
-  new Creature("Bog Ban-She Angel", "", 1, LandscapeType.Swamp, 2, 7, ""),
+  new Creature("Bog Ban-She Angel", "", 1, LandscapeType.Swamp, 2, 7, n10),
 );
-put("Eye Dude", new Creature("Eye Dude", "", 1, LandscapeType.Swamp, 2, 9, ""));
+import n11 from "../assets/eye-dude.png";
+put("Eye Dude", new Creature("Eye Dude", "", 1, LandscapeType.Swamp, 2, 9, n11));
 
+import n12 from "../assets/giant-spider.png";
 put(
   "Giant Spider",
-  new Creature("Giant Spider", "", 2, LandscapeType.Swamp, 4, 10, ""),
+  new Creature("Giant Spider", "", 2, LandscapeType.Swamp, 4, 10, n12),
 );
+import n13 from "../assets/burning-eyebat.png";
 put(
   "Burning Eyebat",
-  new Creature("Burning Eyebat", "", 1, LandscapeType.Swamp, 4, 4, ""),
+  new Creature("Burning Eyebat", "", 1, LandscapeType.Swamp, 4, 4, n13),
 );
 
+import n14 from "../assets/instigator.png";
 put(
   "InstiGator",
-  new Creature("GoldenGator", "", 1, LandscapeType.Swamp, 5, 2, ""),
+  new Creature("GoldenGator", "", 1, LandscapeType.Swamp, 5, 2, n14),
 );
+import n15 from "../assets/axe-stump.png";
 put(
   "Axe Stump",
-  new Creature("Axe Stump", "", 1, LandscapeType.Swamp, 4, 4, ""),
+  new Creature("Axe Stump", "", 1, LandscapeType.Swamp, 4, 4, n15),
 );
 
+import n16 from "../assets/skeleton-hand.png";
 put(
   "Skeleton Hand",
-  new Creature("Skeleton Hand", "", 2, LandscapeType.Swamp, 1, 11, ""),
+  new Creature("Skeleton Hand", "", 2, LandscapeType.Swamp, 1, 11, n16),
 );
+import n17 from "../assets/undying-tree.png";
 put(
   "Undying Tree",
-  new Creature("Undying Tree", "", 2, LandscapeType.Swamp, 3, 8, ""),
+  new Creature("Undying Tree", "", 2, LandscapeType.Swamp, 3, 8, n17),
 );
 
-put(
-  "InstiGator",
-  new Creature("GoldenGator", "", 1, LandscapeType.Swamp, 5, 2, ""),
-);
-put("Bald Guy", new Creature("Bald Guy", "", 1, LandscapeType.Swamp, 3, 2, ""));
+import n18 from "../assets/bald-guy.png";
+put("Bald Guy", new Creature("Bald Guy", "", 1, LandscapeType.Swamp, 3, 2, n18));
 
+import n19 from "../assets/the-sludge.png";
 put(
   "",
-  new Creature("The Sludge", "The Sludge", 1, LandscapeType.Swamp, 2, 5, ""),
+  new Creature("The Sludge", "The Sludge", 1, LandscapeType.Swamp, 2, 5, n19),
 );
 
+import n20 from "../assets/sludgebob.png";
 put(
   "Sludgebob",
-  new Creature("Sludgebob", "", 1, LandscapeType.Swamp, 1, 7, ""),
+  new Creature("Sludgebob", "", 1, LandscapeType.Swamp, 1, 7, n20),
 );
 
+import n21 from "../assets/general-mushroom.png";
 put(
   "General Mushroom",
-  new Creature("General Mushroom", "", 1, LandscapeType.Swamp, 4, 3, ""),
+  new Creature("General Mushroom", "", 1, LandscapeType.Swamp, 4, 3, n21),
 );
 
+import n22 from "../assets/swamp-beast.png";
 put(
   "Swamp Beast",
-  new Creature("Swamp Beast", "", 2, LandscapeType.Swamp, 5, 8, ""),
+  new Creature("Swamp Beast", "", 2, LandscapeType.Swamp, 5, 8, n22),
 );
+import n23 from "../assets/flying-gator.png";
 put(
   "Flying Gator",
-  new Creature("Flying Gator", "", 2, LandscapeType.Swamp, 6, 4, ""),
+  new Creature("Flying Gator", "", 2, LandscapeType.Swamp, 6, 4, n23),
 );
+import n24 from "../assets/orange-slime-monster.png";
 put(
   "Orange Slime Monster",
-  new Creature("Orange Slime Monster", "", 1, LandscapeType.Swamp, 5, 5, ""),
+  new Creature("Orange Slime Monster", "", 1, LandscapeType.Swamp, 5, 5, n24),
 );
 
+import n25 from "../assets/green-mermaid.png";
 put(
   "Green Mermaid",
-  new Creature("Green Mermaid", "", 1, LandscapeType.Swamp, 3, 7, ""),
+  new Creature("Green Mermaid", "", 1, LandscapeType.Swamp, 3, 7, n25),
 );
 
+import n26 from "../assets/green-merman.png";
 put(
   "Green Merman",
-  new Creature("Green Merman", "", 1, LandscapeType.Swamp, 0, 10, ""),
+  new Creature("Green Merman", "", 1, LandscapeType.Swamp, 0, 10, n26),
 );
 
+import n26b from "../assets/bog-frog-bomb.png";
 put(
   "Bog Frog Bomb",
-  new Creature("Bog Frog Bomb", "", 2, LandscapeType.Swamp, 16, 18, ""),
+  new Creature("Bog Frog Bomb", "", 2, LandscapeType.Swamp, 16, 18, n26b),
 );
 
 //=====================================================================================================================================================
 //                                                              CANDYLANDS
 //=====================================================================================================================================================
 
+import n27 from "../assets/furious-hen.png";
 put(
   "Furious Hen",
-  new Creature("Furious Hen", "", 1, LandscapeType.Candylands, 2, 7, ""),
+  new Creature("Furious Hen", "", 1, LandscapeType.Candylands, 2, 7, n27),
 );
 
+import n28 from "../assets/furious-rooster.png";
 put(
   "Furious Rooster",
-  new Creature("Furious Rooster", "", 1, LandscapeType.Candylands, 4, 4, ""),
+  new Creature("Furious Rooster", "", 1, LandscapeType.Candylands, 4, 4, n28),
 );
 
+import n29 from "../assets/papercut-tiger.png";
 put(
   "Papercut Tiger",
-  new Creature("Papercut Tiger", "", 1, LandscapeType.Candylands, 2, 5, ""),
+  new Creature("Papercut Tiger", "", 1, LandscapeType.Candylands, 2, 5, n29),
 );
 
+import n30 from "../assets/cottonpult.png";
 put(
   "Cottonpult",
-  new Creature("Cottonpult", "", 2, LandscapeType.Candylands, 6, 6, ""),
+  new Creature("Cottonpult", "", 2, LandscapeType.Candylands, 6, 6, n30),
 );
 
+import n31 from "../assets/music-mallard.png";
 put(
   "Music Mallard",
-  new Creature("Music Mallard", "", 1, LandscapeType.Candylands, 0, 9, ""),
+  new Creature("Music Mallard", "", 1, LandscapeType.Candylands, 0, 9, n31),
 );
 
+import n31b from "../assets/dr-stuffenstein.png";
 put(
   "Dr. Stuffenstein",
-  new Creature("Dr. Stuffenstein", "", 0, LandscapeType.Candylands, 0, 1, ""),
+  new Creature("Dr. Stuffenstein", "", 0, LandscapeType.Candylands, 0, 1, n31b),
 );
 
+import n31c from "../assets/furious-chick.png"
 put(
   "Furious Chick",
-  new Creature("Furious Chick", "", 1, LandscapeType.Candylands, 7, 8, ""),
+  new Creature("Furious Chick", "", 1, LandscapeType.Candylands, 7, 8, n31c),
 );
 
 //=====================================================================================================================================================
 //                                                             SANDYLANDS
 //=====================================================================================================================================================
 
+import n32 from "../assets/beach-mum.png";
 put(
   "Beach Mummy",
-  new Creature("Beach Mummy", "", 2, LandscapeType.Desert, 9, 11, ""),
+  new Creature("Beach Mummy", "", 2, LandscapeType.Desert, 9, 11, n32),
 );
 
+import n33 from "../assets/black-cat.png";
 put(
   "Black Cat",
-  new Creature("Black Cat", "", 5, LandscapeType.Desert, 15, 35, ""),
+  new Creature("Black Cat", "", 5, LandscapeType.Desert, 15, 35, n33),
 );
 
+import n34 from "../assets/burning-hand.png";
 put(
   "Burning Hand",
-  new Creature("Burning Hand", "", 1, LandscapeType.Desert, 5, 2, ""),
+  new Creature("Burning Hand", "", 1, LandscapeType.Desert, 5, 2, n34),
 );
 
+import n35 from "../assets/cactus-thug.png";
 put(
   "Cactus Thug",
-  new Creature("Cactus Thug", "", 5, LandscapeType.Desert, 25, 12, ""),
+  new Creature("Cactus Thug", "", 5, LandscapeType.Desert, 25, 12, n35),
 );
 
+import n36 from "../assets/count-cactus.png";
 put(
   "Count Cactus",
-  new Creature("Count Cactus", "", 5, LandscapeType.Desert, 5, 48, ""),
+  new Creature("Count Cactus", "", 5, LandscapeType.Desert, 5, 48, n36),
 );
 
-put("Fummy", new Creature("Fummy", "", 4, LandscapeType.Desert, 4, 24, ""));
+import n37 from "../assets/fummy.png";
+put("Fummy", new Creature("Fummy", "", 4, LandscapeType.Desert, 4, 24, n37));
 
+import n38 from "../assets/giant-mummy-hand.png";
 put(
   "Giant Mummy Hand",
-  new Creature("Giant Mummy Hand", "", 4, LandscapeType.Desert, 9, 29, ""),
+  new Creature("Giant Mummy Hand", "", 4, LandscapeType.Desert, 9, 29, n38),
 );
 
+import n39 from "../assets/green-cactaball.png";
 put(
   "Green Cactiball",
-  new Creature("Green Cactiball", "", 1, LandscapeType.Desert, 4, 3, ""),
+  new Creature("Green Cactiball", "", 1, LandscapeType.Desert, 4, 3, n39),
 );
 
+import n40 from "../assets/green-party-ogre.png";
 put(
   "Green Party Ogre",
-  new Creature("Green Party Ogre", "", 0, LandscapeType.Desert, 11, 19, ""),
+  new Creature("Green Party Ogre", "", 0, LandscapeType.Desert, 11, 19, n40),
 );
 
+import n41 from "../assets/lady-mary.png";
 put(
   "Lady Mary",
-  new Creature("Lady Mary", "", 4, LandscapeType.Desert, 18, 20, ""),
+  new Creature("Lady Mary", "", 4, LandscapeType.Desert, 18, 20, n41),
 );
 
+import n42 from "../assets/lime-slimey.png";
 put(
   "Lime Slimey",
-  new Creature("Lime Slimey", "", 2, LandscapeType.Desert, 8, 8, ""),
+  new Creature("Lime Slimey", "", 2, LandscapeType.Desert, 8, 8, n42),
 );
 
+import n43 from "../assets/lost-golem.png";
 put(
   "Lost Golem",
-  new Creature("Lost Golem", "", 5, LandscapeType.Desert, 10, 36, ""),
+  new Creature("Lost Golem", "", 5, LandscapeType.Desert, 10, 36, n43),
 );
 
+import n44 from "../assets/mayonaise-angel.png";
 put(
   "Mayonaise Angel",
-  new Creature("Mayonaise Angel", "", 2, LandscapeType.Desert, 4, 12, ""),
+  new Creature("Mayonaise Angel", "", 2, LandscapeType.Desert, 4, 12, n44),
 );
 
+import n45 from "../assets/ms-mummy.png"
 put(
   "Ms. Mummy",
-  new Creature("Ms. Mummy", "", 1, LandscapeType.Desert, 3, 6, ""),
+  new Creature("Ms. Mummy", "", 1, LandscapeType.Desert, 3, 6, n45),
 );
 
+import n46 from "../assets/mud-angel.png"
 put(
   "Mud Angel",
-  new Creature("Mud Angel", "", 3, LandscapeType.Desert, 9, 21, ""),
+  new Creature("Mud Angel", "", 3, LandscapeType.Desert, 9, 21, n46),
 );
 
+import n47 from "../assets/pieclops.png"
 put(
   "Pieclops",
-  new Creature("Pieclops", "", 5, LandscapeType.Desert, 20, 25, ""),
+  new Creature("Pieclops", "", 5, LandscapeType.Desert, 20, 25, n47),
 );
 
-put("Prickle", new Creature("Prickle", "", 3, LandscapeType.Desert, 9, 18, ""));
+import n48 from "../assets/mud-angel.png"
+put("Prickle", new Creature("Prickle", "", 3, LandscapeType.Desert, 9, 18, n48));
 
+import n49 from "../assets/sandbacho.png"
 put(
   "Sandbacho",
-  new Creature("Sandbacho", "", 2, LandscapeType.Desert, 11, 10, ""),
+  new Creature("Sandbacho", "", 2, LandscapeType.Desert, 11, 10, n49),
 );
 
+import n50 from "../assets/sand-angel.png"
 put(
   "Sand Angel",
-  new Creature("Sand Angel", "", 1, LandscapeType.Desert, 2, 6, ""),
+  new Creature("Sand Angel", "", 1, LandscapeType.Desert, 2, 6, n50),
 );
 
+import n51 from "../assets/sand-eyebat.png"
 put(
   "Sand Eyebat",
-  new Creature("Sand Eyebat", "", 1, LandscapeType.Desert, 4, 4, ""),
+  new Creature("Sand Eyebat", "", 1, LandscapeType.Desert, 4, 4, n51),
 );
 
+import n52 from "../assets/sand-jackal.png"
 put(
   "Sand Jackal",
-  new Creature("Sand Jackal", "", 3, LandscapeType.Desert, 6, 21, ""),
+  new Creature("Sand Jackal", "", 3, LandscapeType.Desert, 6, 21, n52),
 );
 
+import n53 from "../assets/sand-knight.png"
 put(
   "Sand Knight",
-  new Creature("Sand Knight", "", 4, LandscapeType.Desert, 20, 20, ""),
+  new Creature("Sand Knight", "", 4, LandscapeType.Desert, 20, 20, n53),
 );
 
+import n54 from "../assets/sandasaurus-rex.png"
 put(
   "Sandasaurus Rex",
-  new Creature("Sandasaurus Rex", "", 0, LandscapeType.Desert, 14, 16, ""),
+  new Creature("Sandasaurus Rex", "", 0, LandscapeType.Desert, 14, 16, n54),
 );
 
+import n55 from "../assets/sandfoot.png"
 put(
   "Sandfoot",
-  new Creature("Sandfoot", "", 3, LandscapeType.Desert, 10, 17, ""),
+  new Creature("Sandfoot", "", 3, LandscapeType.Desert, 10, 17, n55),
 );
 
+import n56 from "../assets/sand-snake.png"
 put(
   "Sandsnake",
-  new Creature("Sandsnake", "", 2, LandscapeType.Desert, 12, 7, ""),
+  new Creature("Sandsnake", "", 2, LandscapeType.Desert, 12, 7, n56),
 );
 
+import n57 from "../assets/sand-witch.png"
 put(
   "SandWitch",
-  new Creature("SandWitch", "", 4, LandscapeType.Desert, 25, 10, ""),
+  new Creature("SandWitch", "", 4, LandscapeType.Desert, 25, 10, n57),
 );
 
 put("Sandy", new Creature("Sandy", "", 5, LandscapeType.Desert, 28, 18, ""));
 
+import n59 from "../assets/wall-of-chocolate.png"
 put(
   "Wall of Chocolate",
-  new Creature("Wall of Chocolate", "", 3, LandscapeType.Desert, 5, 20, ""),
+  new Creature("Wall of Chocolate", "", 3, LandscapeType.Desert, 5, 20, n59),
 );
 
 put(
@@ -980,67 +1038,3 @@ function getCornfieldDeck() {
     ],
   );
 }
-
-
-import n0 from "../assets/swamp-dragon.png"; addUrl("Swamp Dragon", n0)
-import n1 from "../assets/dark-angel.png"; addUrl("Dark Angel", n1)
-import n2 from "../assets/bog-bum.png"; addUrl("Bog Bum", n2)
-import n3 from "../assets/fly-swatter.png"; addUrl("Fly Swatter", n3)
-import n4 from "../assets/unicyclops.png"; addUrl("Unicyclops", n4)
-import n5 from "../assets/man-witch.png"; addUrl("Man Witch", n5)
-import n6 from "../assets/ban-she-princess.png"; addUrl("Ban-She Princess", n6)
-import n7 from "../assets/ban-she-queen.png"; addUrl("Ban-She Queen", n7)
-import n8 from "../assets/ban-she-knight.png"; addUrl("Ban-She Knight", n8)
-import n9 from "../assets/black-merlock.png"; addUrl("Black Merlock", n9)
-import n10 from "../assets/bog-ban-she-angel.png"; addUrl("Bog Ban-She Angel", n10)
-import n11 from "../assets/eye-dude.png"; addUrl("Eye Dude", n11)
-import n12 from "../assets/giant-spider.png"; addUrl("Giant Spider", n12)
-import n13 from "../assets/burning-eyebat.png"; addUrl("Burning Eyebat", n13)
-import n14 from "../assets/instigator.png"; addUrl("InstiGator", n14)
-import n15 from "../assets/axe-stump.png"; addUrl("Axe Stump", n15)
-import n16 from "../assets/skeleton-hand.png"; addUrl("Skeleton Hand", n16)
-import n17 from "../assets/undying-tree.png"; addUrl("Undying Tree", n17)
-import n18 from "../assets/bald-guy.png"; addUrl("Bald Guy", n18)
-import n19 from "../assets/the-sludge.png"; addUrl("The Sludge", n19)
-import n20 from "../assets/sludgebob.png"; addUrl("Sludgebob", n20)
-import n21 from "../assets/general-mushroom.png"; addUrl("General Mushroom", n21)
-import n22 from "../assets/swamp-beast.png"; addUrl("Swamp Beast", n22)
-import n23 from "../assets/flying-gator.png"; addUrl("Flying Gator", n23)
-import n24 from "../assets/orange-slime-monster.png"; addUrl("Orange Slime Monster", n24)
-import n25 from "../assets/green-mermaid.png"; addUrl("Green Mermaid", n25)
-import n26 from "../assets/green-merman.png"; addUrl("Green Merman", n26)
-import n27 from "../assets/furious-hen.png"; addUrl("Furious Hen", n27)
-import n28 from "../assets/furious-rooster.png"; addUrl("Furious Rooster", n28)
-import n29 from "../assets/papercut-tiger.png"; addUrl("Papercut Tiger", n29)
-import n30 from "../assets/cottonpult.png"; addUrl("Cottonpult", n30)
-import n31 from "../assets/music-mallard.png"; addUrl("Music Mallard", n31)
-import n32 from "../assets/beach-mum.png"; addUrl("Beach Mum", n32)
-import n33 from "../assets/black-cat.png"; addUrl("Black Cat", n33)
-import n34 from "../assets/burning-hand.png"; addUrl("Burning Hand", n34)
-import n35 from "../assets/cactus-thug.png"; addUrl("Cactus Thug", n35)
-import n36 from "../assets/count-cactus.png"; addUrl("Count Cactus", n36)
-import n37 from "../assets/fummy.png"; addUrl("Fummy", n37)
-import n38 from "../assets/giant-mummy-hand.png"; addUrl("Giant Mummy Hand", n38)
-import n39 from "../assets/green-cactaball.png"; addUrl("Green Cactaball", n39)
-import n40 from "../assets/green-party-ogre.png"; addUrl("Green Party Ogre", n40)
-import n41 from "../assets/lady-mary.png"; addUrl("Lady Mary", n41)
-import n42 from "../assets/lime-slimey.png"; addUrl("Lime Slimey", n42)
-import n43 from "../assets/lost-golem.png"; addUrl("Lost Golem", n43)
-import n44 from "../assets/mayonaise-angel.png"; addUrl("Mayonaise Angel", n44)
-
-// import n45 from "../assets/ms-mummy.png"; addUrl("Ms. Mummy", n45)
-// import n46 from "../assets/mud-angel.png"; addUrl("Mud Angel", n46)
-// import n47 from "../assets/pieclops.png"; addUrl("Pieclops", n47)
-// import n48 from "../assets/prickle.png"; addUrl("Prickle", n48)
-// import n49 from "../assets/sandbacho.png"; addUrl("Sandbacho", n49)
-// import n50 from "../assets/sand-angel.png"; addUrl("Sand Angel", n50)
-// import n51 from "../assets/sand-eyebat.png"; addUrl("Sand Eyebat", n51)
-// import n52 from "../assets/sand-jackal.png"; addUrl("Sand Jackal", n52)
-// import n53 from "../assets/sand-knight.png"; addUrl("Sand Knight", n53)
-// import n54 from "../assets/sandasaurus-rex.png"; addUrl("Sandasaurus Rex", n54)
-// import n55 from "../assets/sandfoot.png"; addUrl("Sandfoot", n55)
-// import n56 from "../assets/sandsnake.png"; addUrl("Sandsnake", n56)
-// import n57 from "../assets/sandwitch.png"; addUrl("Sandwitch", n57)
-// import n58 from "../assets/sandy.png"; addUrl("Sandy", n58)
-// import n59 from "../assets/wall-of-chocolate.png"; addUrl("Wall of Chocolate", n59)
-// import n60 from "../assets/wall-of-sand.png"; addUrl("Wall of Sand", n60)
\ No newline at end of file
diff --git a/src/engine/game.test.ts b/src/engine/game.test.ts
index 1a2971d..2dca24f 100644
--- a/src/engine/game.test.ts
+++ b/src/engine/game.test.ts
@@ -7,16 +7,8 @@ import {
   CardType,
   Player,
 } from "./game.ts";
-import {
-  Card,
-  Creature,
-  Landscape,
-  GetCardTargetEvent,
-} from "./card.ts";
-import {
-  get as getCardFromCardMap,
-  seeNonNullDecks,
-} from "./CardMap.ts";
+import { Card, Creature, Landscape, GetCardTargetEvent } from "./card.ts";
+import { get as getCardFromCardMap, seeNonNullDecks } from "./CardMap.ts";
 import { GetBoardPosTargetEvent, PlayCardEventName } from "./event.ts";
 
 test("new game works", () => {
diff --git a/src/engine/game.ts b/src/engine/game.ts
index c86d187..cfe6f52 100644
--- a/src/engine/game.ts
+++ b/src/engine/game.ts
@@ -1,9 +1,4 @@
-import {
-  Card,
-  Creature,
-  Landscape,
-  GetCardTargetEvent,
-} from "./card.ts";
+import { Card, Creature, Landscape, GetCardTargetEvent } from "./card.ts";
 import {
   GetBoardPosTargetEvent,
   PlayCardEvent,
@@ -614,7 +609,9 @@ export class Game extends AbstractGame {
                 if (card.play(pos, pos.ownerId)) {
                   Game.getInstance().getPlayerById(playerId).actions -=
                     card.getCost();
-                  Game.getInstance().getPlayerById(playerId).deleteCardFromHand(card);
+                  Game.getInstance()
+                    .getPlayerById(playerId)
+                    .deleteCardFromHand(card);
                   return Game.getInstance().dispatchEvent(
                     new PlayCardEvent(card, pos.ownerId),
                   );
diff --git a/src/machine.ts b/src/machine.ts
index 9830b32..72f02cf 100644
--- a/src/machine.ts
+++ b/src/machine.ts
@@ -1,68 +1,55 @@
 import { assign, setup } from "xstate";
 import { BoardPos, Game, LandscapeType, Player } from "./engine/game.ts";
 import { Card, GetCardTargetEvent, Landscape } from "./engine/card.ts";
-import { globalTempVariable, setGlobalTempVariable } from "./PlayGameScreen.tsx";
+import {
+  globalTempVariable,
+  setGlobalTempVariable,
+} from "./PlayGameScreen.tsx";
 import { GetBoardPosTargetEvent } from "./engine/event.ts";
 
-
-
-
 function initGame(player1Cards: Card[], player2Cards: Card[]) {
-    
-    const swampLand = new Landscape(
-        "Swamp",
-        "Goopy!",
-        LandscapeType.Swamp,
+  const swampLand = new Landscape("Swamp", "Goopy!", LandscapeType.Swamp);
+  Game.startNewGame();
+  let g = Game.getInstance();
+  let p1 = g.getPlayerById(0);
+  let p2 = g.getPlayerById(1);
+
+  g.addEventListener(GetCardTargetEvent, (evt: Event) => {
+    if (evt instanceof GetBoardPosTargetEvent) {
+      var player: Player = Game.getInstance().getPlayerById(evt.executorId);
+      let tmp = Game.getInstance().board.getBoardPosByOwnerId(
+        player.id,
+        globalTempVariable,
       );
-      Game.startNewGame();
-      let g = Game.getInstance();
-      let p1 = g.getPlayerById(0);
-      let p2 = g.getPlayerById(1);
-
-      
-g.addEventListener(GetCardTargetEvent, (evt: Event) => {
-if (evt instanceof GetBoardPosTargetEvent) {
-  var player: Player = Game.getInstance().getPlayerById(evt.executorId);
-  let tmp = Game.getInstance().board.getBoardPosByOwnerId(
-    player.id,
-    globalTempVariable,
-  );
-  if (tmp) {
-    evt.execute(tmp);
-  }
-}
-// globalTempVariable = -1;
-setGlobalTempVariable(-1);
-});
+      if (tmp) {
+        evt.execute(tmp);
+      }
+    }
+    // globalTempVariable = -1;
+    setGlobalTempVariable(-1);
+  });
 
-      
+  g.board.getSideByOwnerId(0)?.map((pos: BoardPos) => {
+    pos.setLandscape(swampLand);
+  });
+  g.board.getSideByOwnerId(1)?.map((pos: BoardPos) => {
+    pos.setLandscape(swampLand);
+  });
 
-g.board.getSideByOwnerId(0)?.map((pos: BoardPos) => {
-pos.setLandscape(swampLand);
-});
-g.board.getSideByOwnerId(1)?.map((pos: BoardPos) => {
-pos.setLandscape(swampLand);
-});
+  p1.setDeck(player1Cards);
+  p2.setDeck(player2Cards);
 
-p1.setDeck(player1Cards);
-p2.setDeck(player2Cards);
+  p1.drawCard(5, false);
+  p2.drawCard(5, false);
 
-p1.drawCard(5, false);
-p2.drawCard(5, false);
-
-p1;
-
-p1.username = "Player 1";
-p2.username = "Player 2";
+  p1;
 
+  p1.username = "Player 1";
+  p2.username = "Player 2";
 
   return Game.getInstance() as Game;
 }
 
-
-
-
-
 export interface Context {
   game: Game | null;
 }
@@ -80,7 +67,7 @@ export const machine = setup({
   },
   actions: {
     startGame: assign({
-        game: ({event}) => initGame(event.player1Cards, event.player2Cards)
+      game: ({ event }) => initGame(event.player1Cards, event.player2Cards),
     }),
   },
   guards: {},
@@ -102,9 +89,7 @@ export const machine = setup({
       },
     },
     Play: {
-        entry: [
-            {type: "startGame"}
-        ]
+      entry: [{ type: "startGame" }],
     },
   },
-});
\ No newline at end of file
+});