Merge pull request 'Proposal written' (#3) from 20220825/homework5:20220825 into 20220825

Reviewed-on: andrea/homework5#3

PROPOSAL_20220825.md

@@ -0,0 +1,128 @@
+Name: Enrique Jose Delgado Garcia  
+ID: 20220825  
+URL: http://git.prototyping.id/20220825/homework5
+
+# My proposal HiLo
+***Table of Contents:***
+- [Game Description](#game-description)  
+    - [Premise](#premise)  
+    - [Powers](#powers)  
+- [Game UI](#game-ui)  
+- [Implementation Overview](#implementation-overview)
+- [Possible Challenges](#possible-challenges)
+
+## Game Description
+HiLo is a strategic luck-based card game, designed by Enrique (me!).
+
+### Premise
+The game is simple. In the game, you hold the last drawn card from a classic deck of 52 playing cards (this card is named **Current Card** in this proposal). When starting the game, you will receive a card from the deck to be your **Current Card**.
+
+The following is the main premise. Press "High" if you think the card on the top of the deck is higher than the **Current Card**, and press "Low" if you think the card on the top of the deck is lower than the **Current Card** (The card on the top of the deck will be referred to as the **top card** for the rest of the report).  
+When either of these buttons are pressed, the card on the top of the deck is revealed. If this **top card** is higher than (or equal to) the **Current Card**, then the player will receive points based on the card's value IF they had pressed "High". If the **top card** is lower than (or equal to) the **Current Card**, the player will receive points IF they had pressed "Low". Otherwise, the player will LOSE points based on *(15 points minus the card's value)*.
+
+Card values are distributed as follows:
+- Number cards
+    - The value of number cards corresponds to the number displayed on the card.
+- Face cards
+    - Jacks are worth 11 points, Queens are worth 12 points and Kings are worth 13 points.
+- Aces
+    - Aces's value depends on if the player chose "High" or "Low" when the **top card** is an Ace. If the player chose "High", the Ace is worth 15 points. If the player chose "Low", the Ace is worth 1 point. This means, regardless of what the player chooses, the player will always win points if the **top card** is an Ace.
+    - If the **Current Card** is an Ace:
+        - All number cards are higher than the Ace.
+        - All face cards are lower than the Ace.
+
+After the score is distributed and added up, the **top card** becomes the player's **Current Card**. The game goes on until all 52 cards are exhausted from the deck.
+
+Those are the basic rules of HiLo.
+
+### Powers
+The game would be too simple if it was just a guessing game, so the player has a few tools at their disposal to strategize.  
+*(How many times each power can be used in a game is still not fixed)*
+- *See The Future*
+    - This power (usable up to 2 times) lets the player view the top 2 cards on the deck. So, the player is able to know with 100% assurance the next two **top cards**.
+- *Reveal Suit*
+    - This power (usable up to 12 times) reveals the suit of the **top card** (Hearts, Diamonds, Spades, Clubs). This can give the player some more information on the top card, and helps if they have good memory on which numbers have passed from which suits.
+- *See Remaining*
+    - This power (usable up to 2 times) lets the player view which cards remain in the deck (but does not let them know their order in the deck). Through this, the player can remember which cards have already been drawn and which ones haven't, giving more information about what could be the **top card**.
+- *Double Down*
+    - This power (usable up to 7 times) doubles the points received from the next "High"/"Low" guess. If the player guesses correctly, they win double the amount of points. However, if the player guesses incorrectly, they lose double the amount of points.
+- *Card Under Sleeve*
+    - This power (usable up to 4 times) allows the player to change the **Current Card** to a card of their choosing (can be any card from the classic deck of 52 cards). This power does not alter the deck. So, if the player were to change a card to a card that's currently in the deck, the card in the deck would continue to be in the deck (it is not "moved").
+
+## Game UI
+The following image displays the UI of HiLo.
+
+![HiLo UI](./assets/HiLo_draft.jpg)
+
+Explained from left to right, top to bottom:
+- *Double Down* & *Card Under Sleeve* powers are activated by pressing the buttons on the top-left. These powers affect the **Current Card** (and score), hence their placement on the left side.
+- "High" & "Low" buttons on the bottom left to guess if the **top card** will be higher or lower than the **Current Card**
+- On the center-left of the game area is the **Current Card**.
+- Below the **Current Card** is the total score so far.
+- To the right of the **Current Card** is the deck (which displays the back of the playing card). When the **top card** is revealed, the card will be briefly displayed on this space to the right of the **Current Card**.
+- Below the deck is text, displaying how many cards remain in the deck.
+- Finally, to the right of the deck is the *See The Future*, *Reveal Suit* and *See Remaining* powers, which affect the **top card** (and the deck).
+
+## Implementation Overview
+- p5.js will definitely help the visual department.
+- Svelte will also help a lot, since I'm implementing buttons, events, things that need to be quickly displayed (like for the powers), etc. While this could be implemented using just HTML, JavaScript and CSS, Svelte will certainly help me code the game more comfortably (I like encapsulation).
+- I'll also try coding this using functional programming.
+
+I'm thinking each card can be programmed as an object like this:
+```javascript
+{
+    value: 4, // number ranging from 1 to 13 (Ace = 1 in this case)
+    suit: "Spades" // "Hearts", "Diamonds", "Clubs", "Spades"
+    type: "Number" // "Number", "Face", "Ace"
+}
+```
+
+And the deck can be built like this:
+```js
+function createDeck()
+{
+    indexSuit = "Hearts"
+    indexVal = 1;
+    function switchSuit()
+    {
+        switch(indexSuit) {
+            case "Hearts":
+                indexSuit = "Diamonds";
+                break;
+            case "Diamonds":
+                indexSuit = "Clubs";
+                break;
+            case "Clubs":
+                indexSuit = "Spades";
+                break;
+            case "Spades":
+                indexSuit = "Hearts";
+                break;
+        }
+    }
+
+    deck = new Array(52).fill({ value: 0, suit: "", type: "" });
+    deck.forEach((obj) => {
+        obj.value = indexVal;
+        obj.suit = indexSuit;
+        if(indexVal == 1) obj.type = "Ace";
+        else if(indexVal <= 10) obj.type = "Number";
+        else obj.type = "Face";
+
+        indexVal += 1;
+        if(indexVal > 13){ 
+            indexVal = 1;
+            switchSuit();
+        }
+    });
+
+    return deck;
+}
+```
+
+## Possible Challenges
+The game is simple, yet the powers make it a bit more complex. Due to the powers, I would have to implement screens to show the "remaining cards", and to show the "next 2 **top cards**", and even to select a card for the *Card Under Sleeve* power. These powers make it so you have to add a lot more into a simple game.
+
+Aside from this, my main concern is the visual aspect. Knowing my lack of skill in CSS, I am 100% sure the final game will not look like my sketch of it.
+
+Regardless, I'm sure coding this will be very fun!

PROPOSAL_20230412.md

@@ -1,68 +0,0 @@
-# Quetzalcoatl: The Fifth Sun
-
-## Author Info
-- **Name**: Chaebean Yang
-- **Student ID**: 20230412
-- **e-mail**: kazed0102@kaist.ac.kr
-- **GIt Repository**: [Link](http://git.prototyping.id/20230412/homework5.git)
-
-
-## Game Description
-This game is based on [Snake Game](https://p5js.org/examples/games-snake/) and Aztec mytology. The player controls a serpent which grows longer by collecting sacrificial items. Upon reaching a score of 100, the serpent transforms into the Fifth Sun — completing the mythological cycle and the game ends.
-
-- **Goal**: Reaching 100 points to become the Fifth Sun
-- **Lose Condition**: Collision with wall or self or run out of lives.
-
-![Snake Game](lib/snake.png)
-
-## Graphic and Game Screen Sketch
-Graphic Sketch
-![Graphic](lib/graphic.png)
-
-Game Screen Sketch
-![Gmae Screen](lib/gamescreen.png)
-
-
-## Game Elements and Implementation
-- Serpent: Quetzalcoatl-inspired
-- Items: heart, obsidian, etc.
-
-
-## Interactions
-- Arrow key movement
-- Eating items increases snake's body length and score 
-
-
-## Tools and Libraries
-- **p5js**
-- **Adobe Illustrator**
-- **Git**
-
-## Features from Class to Use
-- **Arrays** to manage snake's body segments and growth
-- **Conditionals and loops** to check for collisions, item collection, and movement
-- **Custom functions** for drawing and update logic
-- **HTML-JavaScript integration** to handle external inputs and update in-game UI elements
-
-## Anticipated Challenges
-- Designing natural and smooth movement transitions between snake segments  
-- Creating a coherent and symbolic color palette that reflects Aztec aesthetics
-
-## Posible Future Features
-- Additional levels
-- Animated transformation between game screens
-- Game over screen with a graphic of Tepeyóllotl
-
-## References
-- [Snake Game in p5js](https://p5js.org/examples/games-snake/)
-- Smith, Michel E. (2011). *The Aztec*. John Wiley & Sons.
-- Camilla Townsend. (2019). *Fifth Sun: A New History of the Aztecs*. Oxford University Press.
-- Davide Domenici. (2009). *The Aztecs: History and Treasure of an Ancient Civilization*. White Star Promotional.
-
-
-![Image Reference 1](lib/50796479392_f18856016d_b.jpg)
-![Image Reference 2](lib/images.jpg)
-![Image Reference 3](lib/Quetzalcóatl_como_la_serpiente_emplumada_y_el_dios_del_viento_Ehécatl,_en_el_folio_19.jpg)
-![Image Reference 4](lib/azteccal.jpg)
-![Image Reference 5](lib/Tepeyóllotl_1.jpg)
-