Update authentication-game.md

docs/project-5/authentication-game.md

@@ -25,50 +25,50 @@ You can see a timelapse of my work, showcasing the development of these avatars
 ### Geo - Blue Robot
 Designed with a friendly and approachable appearance, the blue robot features a smiling expression, making it more appealing to children. The use of a generic, vibrant blue color enhances its broad appeal, creating a character that feels safe and inviting for younger audiences.
 
-![blue-robot](img\blue-robot.PNG) 
-![blue-robot-back](img\blue-robot-back.PNG)
+![blue-robot](img/blue-robot.PNG) 
+![blue-robot-back](img/blue-robot-back.PNG)
 
 ### Toast - Orange Robot
 The orange robot has a more rustic and edgy design, highlighted by its slightly mischievous grin. The color palette was chosen to give it a rugged look, which contrasts with the other characters, giving it a unique personality that might resonate with those who enjoy a more playful and less conventional character.
 
-![orange-robot](img\orange-robot.PNG) 
-![orange-robot-back](img\orange-robot-back.PNG)
+![orange-robot](img/orange-robot.PNG) 
+![orange-robot-back](img/orange-robot-back.PNG)
 
 ### Tally - Beige Robot
 This robot has a cutesy, rounded form, with wide, expressive features. The two-tone color scheme softens its appearance, making it a more comforting and approachable character. Its design is meant to appeal to users who favor warmth and familiarity.
 
-![beige-robot](img\beige-robot.PNG) 
-![beige-robot-back](img\beige-robot-back.PNG)
+![beige-robot](img/beige-robot.PNG) 
+![beige-robot-back](img/beige-robot-back.PNG)
 
 ### Chim - Green Robot
 With a more 3D appearance, the green robot stands out due to its distinctive pattern and structural design. The texture gives it depth, and its geometric shape makes it feel more modern and mechanical, attracting users who appreciate a more complex, detailed look.
 
-![green-robot](img\green-robot.PNG) 
-![green-robot-back](img\green-robot-back.PNG)
+![green-robot](img/green-robot.PNG) 
+![green-robot-back](img/green-robot-back.PNG)
 
 ### Zappy - Purple Robot
 This character has a goofy and playful design, with exaggerated features like its wide mouth and antenna-like shapes. The use of purple makes it more whimsical, creating an energetic and fun character that can appeal to users who enjoy more lighthearted and quirky designs.
 
-![purple-robot](img\purple-robot.PNG) 
-![purple-robot-back](img\purple-robot-back.PNG) 
+![purple-robot](img/purple-robot.PNG) 
+![purple-robot-back](img/purple-robot-back.PNG) 
 
 ### Squeak - Yellow Robot
 The yellow robot radiates cheerfulness with its rounded form and lively expression. Its simple and vibrant design, highlighted by soft pigtails, makes it highly approachable for younger audiences. The character exudes energy and joy, appealing to those who enjoy playful and lighthearted themes.
 
-![yellow-robot](img\yellow-robot.PNG) 
-![yellow-robot-back](img\yellow-robot-back.PNG) 
+![yellow-robot](img/yellow-robot.PNG) 
+![yellow-robot-back](img/yellow-robot-back.PNG) 
 
 ### Chopper - Pink Robot
 The pink robot is designed to resemble an octopus, blending marine-inspired elements with a playful robotic style. Its spherical body and tentacle-like base give it a soft yet dynamic look, while the propeller on top adds a whimsical touch. The textured shading and blush tones enhance its charm, making it a delightful character for users who enjoy unique and adorable designs.
 
-![pink-robot](img\pink-robot.PNG) 
-![pink-robot-back](img\pink-robot-back.PNG) 
+![pink-robot](img/pink-robot.PNG) 
+![pink-robot-back](img/pink-robot-back.PNG) 
 
 ### Grumpy - Red Robot
 The red robot takes inspiration from a crab, with its angular, shell-like design and claw-like arms. Its tank-like body and claw-like features bring a sense of strength and resilience, while the sharp angles and deep red tones emphasize its assertive personality. Despite its tough exterior, the playful design ensures it remains engaging and fun for all users..
 
-![red-robot](img\red-robot.PNG) 
-![red-robot-back](img\red-robot-back.PNG) 
+![red-robot](img/red-robot.PNG) 
+![red-robot-back](img/red-robot-back.PNG) 
 
 Together, all the characters are designed to cater to different tastes and preferences, ensuring that there is a robot for everyone.
 
@@ -100,7 +100,7 @@ This entire process, from adapting AI-based designs to implementing them into a
 
 **Here’s a step-by-step breakdown of how the authentication game works:**
 
-![Frame 8](img\Frame_8.png) 
+![Frame 8](img/Frame_8.png) 
 
 **1. Starting the Game (Frame 8 - Homepage)**
 
@@ -109,10 +109,10 @@ This entire process, from adapting AI-based designs to implementing them into a
 
 **2. Launching the Mini-Game**
 
-- Once the  ![Code Button](img\Code_Button.png)  button is clicked, the mini-game starts. 
+- Once the  ![Code Button](img/Code_Button.png)  button is clicked, the mini-game starts. 
 - Proposed Randomization Feature: Each time the mini-game starts, we want the positions of the avatar slots are randomized to ensure that the game is different every time the user plays. This is not apparent in the prototype.
 
-![Frame 3](img\Frame_2.png) 
+![Frame 3](img/Frame_2.png) 
 
 **3. Playing the Mini-Game**
 
@@ -122,15 +122,15 @@ This entire process, from adapting AI-based designs to implementing them into a
 
 - **Correct Move:** If the user drags an avatar into the correct slot, the game advances to the next frame (Frame 2 → Frame 3 → Frame 4).
 
-![Frame 3](img\Frame_3.png) ![Frame 4](img\Frame_4.png) 
+![Frame 3](img/Frame_3.png) ![Frame 4](img/Frame_4.png) 
 
 :::
 
 :::danger
 
 - **Wrong Move:** If an avatar is placed in the wrong slot, the game will prompt the user to restart (Frame 7).
 
-![Frame 7](img\Frame_7.png)
+![Frame 7](img/Frame_7.png)
 
 :::
 <br></br>
@@ -140,20 +140,20 @@ This entire process, from adapting AI-based designs to implementing them into a
 - Once all three avatars are placed correctly, the game reaches the final frame (Frame 5).
 - The user is prompted to click the "Go Play" button.
 
-![Frame 5](img\Frame_5.png) 
+![Frame 5](img/Frame_5.png) 
 
 **5. Login Page**
 
 - After clicking "Go Play," the user is directed to the login page (previously at the start of the game).
 - The user generates their credentials to log in.
 
-![Frame 1](img\Frame_1.png) 
+![Frame 1](img/Frame_1.png) 
 
 **6. Accessing the Code Playground**
 
 - After logging in, the user clicks "Go Play" again.
 - The user is then taken to Frame 6, which is the BugBox code playground.
 
-![Frame *](img\Frame_6.png) 
+![Frame *](img/Frame_6.png) 
 
 This structure ensures that the game is played first, adding an interactive layer to the login process, as suggested by Dylan.