Images are loaded!

README.md

@@ -8,6 +8,9 @@
 
 The game works like this...
 
+https://joyofcode.xyz/using-functions-from-another-svelte-component
+p5 docs
+
 <style>
     .centered {
         text-align: center;

src/App.svelte

@@ -1,7 +1,30 @@
+<Deck bind:this={deckComponent}></Deck>
+
 <script>
+    import P5 from 'p5-svelte';
+    import Deck from './lib/Deck.svelte';
+
+    let deckComponent;
+    
+    const width = 1000;
+    const height = 700;
+
+    const sketch = (p5) => {
+        p5.preload = function() {
+            deckComponent.loadDeckImages(p5);
+        }
+        p5.setup = function(){
+            p5.createCanvas(width, height);
+            p5.background(100);
+        };
+        p5.draw = function(){
+            //
+        };
+    }
 </script>
 
 <main>
+    <P5 sketch={sketch}></P5>
 </main>
 
 <style>

src/lib/Deck.svelte

@@ -1,4 +1,29 @@
 <script>
+  // import P5 from 'p5-svelte';
+
+  export let images = {};
+
+  export function loadDeckImages(p5)
+  {
+      const loop = ["Back", "Ace", 2, 3, 4, 5, 6, 7, 8, 9, 10, "Jack", "Queen", "King"];
+      const suits = ["Hearts", "Diamonds", "Spades", "Clubs"];
+      for(const suit of suits)
+      {
+          for(const num of loop)
+          {
+              const pathString = ("./src/assets/" + suit) + num + ".png";
+              const nameString = ("" + suit) + num;
+              images[nameString] = p5.loadImage(pathString);
+          }
+      }
+
+      images["Back"] = p5.loadImage("./src/assets/Back.png");
+  }
+
+  export const helloWorld = () => {
+    console.log("Hi");
+  }
+
   let deck = [];
 
   class Card {
@@ -70,3 +95,5 @@
       return deck;
   }
 </script>
+
+