Comments

README.md

@@ -2,7 +2,7 @@
 **Name:** Enrique Jose Delgado Garcia  
 **ID:** 20220825  
 **Email:** enrdel070504@kaist.ac.kr  
-**Repository link:** http://git.prototyping.id/20220825/HiLo_GameProject
+**Repository link:** http://git.prototyping.id/20220825/HiLo_GameProject  
 **Video demo:** https://youtu.be/LpC3dNiW6G8
 
 ## Game Description
@@ -95,6 +95,8 @@ The code also manages the functions that are called when a power is used. All po
 My main issue had to do with the button placements. I tried my best to think of a way for the "High"/"Low" buttons to be at the top of the p5 canvas, while the Power buttons were to the left, but implementing that was a lot harder than I expected. I tried making a separate "PowerButtons.svelte" file, but I would need the power buttons to interact with both App.svelte and HiLo.svelte, but I could not figure out a way to use functions from PowerButtons.svelte in HiLo.svelte without including the buttons in HiLo.svelte (which would result in them being together with the HiLo buttons). I would need to have the PowerButtons and the High/Low buttons to be in separate files.  
 I certainly believe it is possible, but, frankly speaking, I don't have much time to make it possible. As such, I will leave the buttons to be like that.
 
+One minor bug is when you press any other button except "Go Back" in the Remaining Screen Mode. It will correctly go to the Main Screen, but the Remaining Screen will still be there until High/Low is pressed.
+
 Another issue was not being able to figure out a way to make the game "more advanced". I find it nice to have such a simple game as a project, but I am sure that other people's projects will be even more amazing. I struggled A LOT, even for something as simple as this, so I'm actually quite glad I went with a simple game.
 
 ## Acknowledgements

src/App.svelte

@@ -2,6 +2,7 @@
     import P5 from 'p5-svelte';
     import HiLo from './lib/HiLo.svelte';
 
+    // All of these constants in an effort to not have magic numbers (and I still sometimes do)
     const windowRatio = 0.9;
     const imageRatio = 3 / 2;
     const width = window.innerWidth * windowRatio * 0.85;
@@ -17,6 +18,7 @@
     const greenBackground = [10, 150, 10];
     const redBackground = [150, 10, 10];
     const animationInterval = 300;
+
     let outP5;
     let backImage;
 
@@ -24,7 +26,7 @@
 
     const sketch = (p5) => {
         p5.preload = function() {
-            outP5 = p5;
+            outP5 = p5; // outP5 is a, frankly, dumb solution to the problem of not having access to P5js outside of sketch
             gameLogic.initiateGame(p5);
         }
         p5.setup = function(){
@@ -84,6 +86,7 @@
         p5.text("Score: " + gameLogic.getScore(), p5.width/2, p5.height/2);
     }
 
+    // just a fading animation
     const backgroundAnimation = (event) => {
         const recentScore = event.detail.recentScore;
         backImage = gameLogic.getBackCardImage();
@@ -112,7 +115,7 @@
     };
 
     const doubleDownEffect = (event) => {
-        //
+        // was going to do something here
     };
 
     const revealSuitEffect = (event) => {

src/lib/Deck.svelte

@@ -3,7 +3,7 @@
 
   let images = {};
   let deck = [];
-  let fullDeck = [];
+  let fullDeck = []; // fullDeck is basically an unshuffled deck. It's useful for the SeeRemainingFunction
 
   export const NUMBER = "Number";
   export const FACE = "Face";
@@ -56,6 +56,8 @@
   {
       const loop = ["Back", "Ace", 2, 3, 4, 5, 6, 7, 8, 9, 10, "Jack", "Queen", "King"];
       const suits = ["Hearts", "Diamonds", "Spades", "Clubs"];
+
+      // I could not figure a way to make this in functional programming without just complicating myself
       for(const suit of suits)
       {
           for(const num of loop)
@@ -74,6 +76,8 @@
   {
       let indexSuit = HEARTS
       let indexVal = 0;
+
+      // This function switches the suit during the "iteration"
       function switchSuit()
       {
           switch(indexSuit) {
@@ -93,6 +97,7 @@
       }
 
       const placeholder = new Array(52).fill(0);
+
       fullDeck = placeholder.map((obj) => {
           const val = (indexVal % 13) + 1;
           const suit = indexSuit;
@@ -141,6 +146,7 @@
 
   export function shuffleDeck()
   {
+    // Fisher-Yates shuffle from https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
       let currentIndex = deck.length;
 
       while(currentIndex != 0) {

src/lib/HiLo.svelte

@@ -9,6 +9,7 @@
     const FINAL_SCREEN = "FinalScreen";
     export let screenMode = MAIN_SCREEN;
 
+    // buttons
     let doubleButton;
     let suitButton;
     let remainingButton;
@@ -71,6 +72,7 @@
         if(gameEnd) return;
         if(screenMode == REMAINING_SCREEN)
         {
+            // I don't want the player pressing High/Low, when they're in the Remaining Screen
             changeScreenMode(MAIN_SCREEN);
             return;
         }