From 60ad03fbc2181676e4dc020176e514423e7b22b2 Mon Sep 17 00:00:00 2001
From: Enrique Delgado <enrdel070504@kaist.ac.kr>
Date: Tue, 29 Apr 2025 17:11:31 +0900
Subject: [PATCH] Some UI implemented

---
 README.md           |   4 ++
 src/App.svelte      |  48 ++++++++++++++++---
 src/lib/Deck.svelte | 110 +++++++++++++++++++++++++++++---------------
 3 files changed, 119 insertions(+), 43 deletions(-)

diff --git a/README.md b/README.md
index 22ce7ac..273f44c 100644
--- a/README.md
+++ b/README.md
@@ -10,6 +10,10 @@ The game works like this...
 
 https://joyofcode.xyz/using-functions-from-another-svelte-component
 p5 docs
+https://www.geeksforgeeks.org/how-to-shuffle-an-array-using-javascript/
+https://stackoverflow.com/questions/4550013/html-element-display-in-horizontal-line
+figma
+
 
 <style>
     .centered {
diff --git a/src/App.svelte b/src/App.svelte
index 4347a14..81c2f5a 100644
--- a/src/App.svelte
+++ b/src/App.svelte
@@ -3,11 +3,16 @@
 <script>
     import P5 from 'p5-svelte';
     import Deck from './lib/Deck.svelte';
+    const windowRatio = 0.9;
+    const width = window.innerWidth * windowRatio;
+    const height = window.innerHeight * windowRatio;
+    const imageRatio = 3 / 2;
+    const cardImageWidth = height * 0.6;
+    const canvasXMargin = height * 0.03;
+    const canvasYMargin = height * 0.07;
 
     let deckComponent;
-    
-    const width = 1000;
-    const height = 700;
+    let card;
 
     const sketch = (p5) => {
         p5.preload = function() {
@@ -16,16 +21,45 @@
         p5.setup = function(){
             p5.createCanvas(width, height);
             p5.background(100);
+            deckComponent.createDeck();
+            deckComponent.shuffleDeck();
+            card = deckComponent.drawCard();
+            p5.image(card.getImage(), canvasXMargin, canvasYMargin, cardImageWidth, cardImageWidth*imageRatio);
         };
-        p5.draw = function(){
-            //
-        };
+        p5.mouseDragged = function(){
+            console.log("mouse dragged");
+        }
     }
 </script>
 
 <main>
-    <P5 sketch={sketch}></P5>
+    <div class="main_screen">
+        <div class="sub_screen">
+            <button>wahoo</button>
+            <button>1</button>
+            <button>2</button>
+        </div>
+        <P5 sketch={sketch}></P5>
+    </div>
 </main>
 
 <style>
+    .main_screen {
+        display: inline-flex;
+    }
+
+    .sub_screen button {
+        display: flex;
+        flex-direction: row;
+        justify-content: center;
+        align-items: center;
+        padding: 6px 0px;
+        gap: 10px;
+
+        position: relative;
+        width: 68px;
+        height: 36px;
+
+        background: #D9D9D9;
+    }
 </style>
diff --git a/src/lib/Deck.svelte b/src/lib/Deck.svelte
index ae553e5..a4ef375 100644
--- a/src/lib/Deck.svelte
+++ b/src/lib/Deck.svelte
@@ -1,7 +1,40 @@
 <script>
   // import P5 from 'p5-svelte';
 
-  export let images = {};
+  let images = {};
+  export let deck = [];
+
+  class Card {
+    value;
+    suit;
+    type;
+    image;
+
+    constructor(value, suit, type, image)
+    {
+      this.value = value;
+      this.suit = suit;
+      this.type = type;
+      this.image = image;
+    }
+
+    getValue() {
+      return this.value;
+    }
+
+    getSuit() {
+      return this.suit;
+    }
+
+    getType() {
+      return this.type;
+    }
+
+    getImage()
+    {
+      return this.image;
+    }
+  }
 
   export function loadDeckImages(p5)
   {
@@ -20,37 +53,6 @@
       images["Back"] = p5.loadImage("./src/assets/Back.png");
   }
 
-  export const helloWorld = () => {
-    console.log("Hi");
-  }
-
-  let deck = [];
-
-  class Card {
-    value;
-    suit;
-    type;
-
-    constructor(value, suit, type)
-    {
-      this.value = value;
-      this.suit = suit;
-      this.type = type;
-    }
-
-    getValue() {
-      return this.value;
-    }
-
-    getSuit() {
-      return this.suit;
-    }
-
-    getType() {
-      return this.type;
-    }
-  }
-
   export function createDeck()
   {
       let indexSuit = "Hearts"
@@ -78,10 +80,35 @@
           const val = indexVal;
           const suit = indexSuit;
 
+          let nameString = suit;
+
           let type;
-          if(indexVal == 1) type = "Ace";
-          else if(indexVal <= 10) type = "Number";
-          else type = "Face";
+          if(indexVal == 1){
+            type = "Ace";
+            nameString += type;
+          }
+          else if(indexVal <= 10)
+          {
+            type = "Number";
+            nameString += indexVal
+          }
+          else {
+            type = "Face";
+            switch(indexVal) {
+              default:
+                nameString += "Back";
+                break;
+              case 11:
+                nameString += "Jack";
+                break;
+              case 12:
+                nameString += "Queen";
+                break;
+              case 13:
+                nameString += "King";
+                break;
+            }
+          }
 
           indexVal += 1;
           if(indexVal > 13){ 
@@ -89,11 +116,22 @@
               switchSuit();
           }
 
-          return new Card(val, suit, type)
+          return new Card(val, suit, type, images[nameString])
       });
 
       return deck;
   }
+
+  export function shuffleDeck()
+  {
+    deck.sort((a, b) => Math.random() - 0.5);
+    console.log(deck);
+  }
+
+  export function drawCard()
+  {
+    return deck.pop();
+  }
 </script>