refining game details and continuing documentation

README.md

@@ -5,4 +5,95 @@
 **Email**: samantha@kaist.ac.kr
 
 **Gittea Repo**: [https://git.prototyping.id/20266142/The-Full-Hue](https://git.prototyping.id/20266142/The-Full-Hue)
- 
+ 
+ **Video Demo**: []()
+
+ # Game Description 
+ _The Full Hue_ is a 2D platformer game based around the themes of color and emotion. The game begins completely gray. Each level is themed around a specific color and its corresponding meaning: orange is warmth and creativity, yellow is joy and anxiety, blue is depth, and so on. The goal is to collect the color fragments scattered across each levels platforms, restoring color to the world one hue at a time. 
+
+ ### How to play:
+Move utilizing the arrow keys or WASD
+
+| Key | Action | 
+|--------|-----|
+| `← →` or `A D` | Move left/right  |
+| `Space`, ` ↑`, or `w`| Jump|
+
+**Collecting Fragments:** small glowing fragments are placed on the platforms aross each level, to collect them simply walk into them. As they are picked up a small quote appears at the top of the screen and the level's background is gradually tinted to its corresponding color. 
+
+**Avoid Hazards:** Enemies walk back and forth on platform. Tar puddles sit on the ground floor. Coming into contact with either costs the player a life, there are 3 lives per level. Taking damage triggers a short invincibility period with a blinking effect so that the player can recover and reset. 
+
+**Compleating the level:** You successfully complete a level by collecting every fragment at that stage. An overaly with a short reflection will be shown upon level compleation which will allow you to move to the next level. 
+
+**Game progess:** Levels unlock sequentially as they are completed. Compleating a level permanently unlock the next one, making it visible on the level select screen. Locked levels show a `?` symbol.
+
+### After beating all levels
+
+Once all 10 levels are compleated the game enters a free explore mode. The home screen changes to a new message inviting the player to go through the game again now in full color and without obstacles. Re-entering the game levels removes the tar puddles and enemies and the backgrounds are shown in full color. The game becomes a sort of gallery inviting the player to walk through each level again appreciating the art and reading the messages at a more leisurely pace. 
+
+# Code organization 
+
+### The file structure
+
+My files are organized as illustrated below:
+
+![file organization](/svelteP5Play/public/documentation/File%20organization.png)
+
+### Game Screen 
+
+using `Game.svelte` I layer four compnents in a single `800x450` container. The organization is as follows:
+
+| component | contents | z-index|
+|-----------|----------|--------|
+| GameCanvas | p5 canvas | 0 |
+| HUD overlay | lives and fragment info display | 10 |
+| QuoteToast | quote displayed on fragment collection | 20 | 
+| LevelCompleteOverlay | Final level quote & next level button | 30 |
+
+### How GameCanvas.svelte runs the game loop
+
+The p5 `draw()` function is going at 60fps and doing the following each frame:
+
+  -  Draw the background image
+   - `allSprites.update()` - checks for collisions & handles p5play physics 
+   - updates the color tint overlay 
+   - `fragment.drawGlow() and update()` - fragment animation and callback in case of collection
+   - `enemy.update()` and overlap check - enemy animation and updates lives in case of overlap
+   - tar overlap check - updates lives on overlap
+   - splat effect called when triggered 
+   - fall-off-screen check for avatar
+   - `allSprites.draw()` - render all the sprites using p5play
+
+### LevelData.js Organization
+
+```
+{
+    id,
+    name, 
+    color, 
+    bg, 
+    bgcomplete, 
+    playerImg, 
+    spawnX, 
+    spawnY, 
+    platforms: [{x,y,w,h},...],
+    fragments: [{x,y,color},...],
+    enemies: [{x,y,patrol},...],
+    tar: [{x,y},...],
+    fragmentQuotes: [{'...','...'}],
+    completeQuote: '...',
+}
+```
+
+`gameCanvas.setup()` reads this information and draws the game objects from it. This makes it easier to create new levels, change platform positions, text, etc. by only having to update the information on this file. 
+
+### Svelte stores (An observer pattern?) - shared states
+
+stores essentially hold all the global variables and states. If the values are changed all files are able to see this and automatically re-render. We are able to do this with Svelte's `$store` sytanx. 
+
+colorStore.js
+
+| Function | purpose | 
+|----------|---------|
+| `lives` | player lives (0-3)|
+| `colorOpacity` |