new audio changes for readme and tech illustrations

Author: zachpeltz

README.md

@@ -1,180 +1,125 @@
-# Introduction
+# Game Hub – Design Process
 
-Genome Gamers Frontend is a project designed to support students in their Computer Science and Software Engineering education. It combines educational resources like tech talks, code examples, and blogs with an interactive **Game Hub** that gamifies learning through engaging minigames.
+Welcome to Game Hub!
+This document outlines the journey of designing and building our game hub, focusing on the evolution of our ideas and how they shaped the final product.
 
-The **Game Hub** serves as the central platform where players can explore different worlds, interact with NPCs, and access a variety of games. Players navigate the hub using WASD controls, customize their character's appearance, and earn points by completing challenges. Each world offers unique experiences, with three games per world designed to enhance STEM learning in a fun and interactive way.
+<img width="1280" alt="Image" src="https://github.com/user-attachments/assets/eaaf7ae4-3a85-4045-861a-311e8c6700de" />
 
-GitHub Pages can be customized by the blogger to support computer science learnings as the student works through the pathway of using JavaScript, Python/Flask, Java/Spring.
-
-## Key Features
-
-### Game Hub (World Selector)
-The **Game Hub** acts as the central map where players can select different worlds to explore. Each world is represented by an icon, and players can interact with NPCs to learn more about the world and its games. The hub also includes options for customizing character skins and accessing help or additional resources.
-
-### Worlds and Their Games
-Each world contains three unique games that align with its theme:
-
-1. **Bioverse Central**:
-   - Explore options like skins, help, outlines, and more.
-   - Games: Skins customization, Help section, and Outlines.
-
-2. **Genomic Architects**:
-   - Focus on building DNA, editing genes, and playing blackjack.
-   - Games: DNA Building, Gene Editing, Blackjack.
-
-3. **Pathogen Patrol**:
-   - Predict outbreaks, explore organelles, and engage in scientific adventures.
-   - Games: Outbreak Prediction, Exploration, Adventure.
-
-4. **Arcade Rush**:
-   - Master fast-paced classics like Pac-Man, Flappy Bird, and Geometry Dash.
-   - Games: Pac-Man, Flappy Bird, Jump Challenges.
-
-5. **Party Time**:
-   - Spin slot machines, open digital packs, and enjoy party games.
-   - Games: Slot Machine, Pack Opening, Party Games.
-
-6. **Combat Zone**:
-   - Enter skirmishes, plan tactics, and survive swarms.
-   - Games: Skirmish, Strategy, Survival.
-
-7. **Strategy Core**:
-   - Engage in tower defense, simulations, and bird slinging.
-   - Games: Tower Defense, Simulation, Racing.
-
-8. **Skill & React**:
-   - Test reflexes with table tennis, crossy road, and other challenges.
-   - Games: Table Tennis, Reflex Challenges, Crossy Road.
-
-9. **Click & Collect**:
-   - Farm, race, and click through fast-paced experiences.
-   - Games: Farming, Racing, Clicker.
-
-### Common Features Across the Site
+---
 
-1. **Interactive Minigames**:
-   - A variety of games such as platformers, tower defense, blackjack, farming simulators, and more.
-   - Real-time scoring and leaderboard systems.
+## 1. Initial Plan: The Outline
 
-2. **NPC Interactions**:
-   - NPCs provide hints, dialogue, and guidance for each world and its games.
+Our project began with a simple goal: make biotech-related engaging games. 
+**Outline** was our first plan, where we brainstormed core concepts:
 
-3. **Customization**:
-   - Players can customize their character's appearance using skins.
+- **Biotech Education**: Use games to teach real-world science.
+- **Data & ML Integration**: Incorporate real datasets and machine learning for authentic scenarios.
+- **Adventure Structure**: Start with a single world, inspired by classic adventure games like Mario.
+- **Team Roles**: Assign clear responsibilities (frontend, backend, ML, testing, project management).
 
-4. **Educational Content**:
-   - Games are designed to enhance STEM learning through interactive and engaging experiences.
+We mapped out a handful of games (e.g., Outbreak, DNA Building, Blackjack) and focused on how each would teach a biotech concept.  
+The first prototype was a single map which can be seen in /world10 with 6 games and 3 other experiences.
 
-5. **Responsive Design**:
-   - All pages and games are optimized for desktop and mobile devices.
-   - CSS animations and transitions for smooth user interactions.
+<img width="1280" alt="Image" src="https://github.com/user-attachments/assets/c97ad687-7f25-43f9-8910-2b46e38462e8" />
 
-6. **Audio Integration**:
-   - Background music and sound effects are included in most games.
-   - Audio files are preloaded for seamless playback.
+---
 
-7. **Reusable Components**:
-   - Modular JavaScript files for shared functionality across games (e.g., game loops, collision detection, scoring systems).
-   - Shared CSS styles for consistent design.
+## 2. Next Plan: The Format
 
-8. **API Integration**:
-   - Backend API endpoints for updating user points and fetching leaderboard data.
-   - Fetch-based asynchronous calls for real-time updates.
+As the project grew, we realized the need for better organization and scalability.  
+**Format** was our second plan, where we restructured the site:
 
-9. **Customizable Settings**:
-   - Difficulty levels for games (e.g., Easy, Medium, Hard).
-   - Adjustable parameters like speed, jump height, and spawn rates.
+- **Game Categorization**: Grouped games by type (arcade, strategy, party, etc.) for easier navigation.
+- **Worlds & Levels**: Had several related games and designed about worlds that led to different games.
+- **UI/UX Improvements**: Added a central hub and repurposed the games to be on different worlds rather than on one.
+- **Points System**: Integrated backend points and rewards for playing games.
 
-10. **Leaderboard System**:
-    - Persistent leaderboard for tracking top scores across games.
-    - Integration with backend APIs for storing and retrieving leaderboard data.
+This phase led to the creation of /world9 which was our second map design. It grouped similar games next to each other, but had all games on one page which was not UI friendly nor easy to navigate.
+We also began planning for more games, aiming for 24 total, and started to separate design from implementation.
 
-11. **Modular Design**:
-    - Each game is encapsulated in its own file structure for easy maintenance and updates.
-    - Shared assets like images, audio files, and scripts are stored in centralized directories.
+<img width="1280" alt="Image" src="https://github.com/user-attachments/assets/10daf8b2-4dfd-4569-8c4e-d2df44d2467a" />
 
 ---
 
-## Technical Design Overview
+## 3. Final Plan: The Synopsis
 
-### Architecture Diagram
+With feedback and iteration, we moved to our **Final Plan**:  
+**Synopsis** focused on polishing our website and making it scalable.
 
-The technical design of Genome Gamers follows a modular architecture that integrates the front-end, backend, and deployment pipelines. Below is a high-level overview of the architecture:
+- **Eight Themed Worlds**: Each world from /world0 -> /world8 represents a category (e.g., Arcade Rush, Party Time, Combat Zone).
+- **Central Hub**: The index page became the starting world with 9 different worlds - 8 being to groups of 3 with minigames and the other being other experiences.
+- **Dialogue & NPCs**: Added character-driven world entry, with NPCs to interact and talk with before entering a world.
+- **Cosmetics & Points**: Expanded skin selection and integrated a persistent points system.
+- **Modular Design**: Each minigame in each world is in its own .md file, making it easy to navigate the worlds and minigames while programming the website.
+- **Educational Focus**: 6 of the games are still related to our biotech original theme (the first 6 games), with real data and ML models where possible.
 
-- **Frontend**: Built using HTML, CSS, and JavaScript, leveraging Jekyll for static site generation. The front-end is styled using SASS and integrates with GitHub APIs for dynamic content. The interactive game hub is implemented using HTML5 Canvas and JavaScript.
+This structure allowed us to scale, maintain, and expand the site efficiently.  
+The final product is a collection of interconnected worlds, each with its own theme, games, and educational goals.
 
-A detailed architecture diagram is available on [Draw.io](https://app.diagrams.net/). You can find the diagram file in the repository under `docs/architecture.drawio`.
+<img width="1279" alt="Image" src="https://github.com/user-attachments/assets/def86fbb-4268-4dce-ac24-59a7a494e188" />
 
 ---
 
-## Technical Description
+## Design Principles & Lessons Learned
 
-### Frontend Design
+- **Iterative Design**: Each plan built on the last, responding to user feedback and technical challenges.
+- **User Experience**: Navigation, clarity, and engagement were prioritized at every stage.
+- **Educational Value**: Games were chosen and designed for their ability to teach, not just entertain.
+- **Team Collaboration**: Clear roles and regular planning meetings kept the project on track.
 
-The front-end is based on the structure of the website, which includes:
+<img width="1280" alt="Image" src="https://github.com/user-attachments/assets/1ea65e63-4da7-440f-b36d-7ebcaf3d781c" />
 
-1. **Game Hub**: The index page (`index.md`) serves as the central hub for navigating different worlds and minigames. It features:
-   - Interactive elements like NPC dialogues and skin customization.
-   - Dynamic rendering using HTML5 Canvas.
-   - Background music and visual styling for an immersive experience.
-2. **Navigation Bar**: Configured in `_config.yml` to provide easy access to different sections of the website.
-3. **Styling**: Custom themes are applied using SASS, with options to switch themes in `_sass/minima/custom-styles.scss`.
+---
 
-### Interactive Features
+## File Structure Overview
 
-The game hub includes several interactive features:
+- Index.md: Central hub with navigation and NPCs.
+- World0 to World8: Themed worlds, each with unique games and experiences.
+- World9 and World10: Our early prototypes and "legacies" of our old maps to document our journey creating the game
+- Outline, Synopsis, and Format: Our planning documents for our website.
+- Music, Aboutus, Skin, and Help: Other experiences showing our credibility, how to help the user, custom music on each    level for immersive and engaging purposes, and a way to customize your profile.
+- Points, Home Icons, and Other Documents: Even more ways to make your experience at Game Hub better.
 
-- **NPC Dialogues**: NPCs provide hints and guidance for navigating different worlds. Dialogues are dynamically rendered using JavaScript.
-- **Skin Customization**: Players can customize their character's appearance using a modal interface.
-- **Game Worlds**: Each world is represented by an interactive object on the canvas, allowing players to enter different experiences.
+<img width="1280" alt="Image" src="https://github.com/user-attachments/assets/1016de84-348c-4f02-a079-6028b1dba6c9" />
 
 ---
 
-## Getting Started
-
-To set up the Genome Gamers Frontend project, follow the steps below:
-
-### Prerequisites
+## Next Steps
 
-Ensure you have the following installed on your system:
-1. **Node.js**: Download and install from [Node.js Official Website](https://nodejs.org/).
-2. **npm**: Comes bundled with Node.js.
-3. **Git**: Download and install from [Git Official Website](https://git-scm.com/).
+- Continue fixing bugs to our games and worlds (will probably stop after presenting at N@TM).
+- Refine our content to be more educational and useful rather than just for entertainment.
+- Expand cosmetic, social, and interactive features.
 
-### Setup Instructions
+<img width="1280" alt="Image" src="https://github.com/user-attachments/assets/c8cda384-13b3-4f7c-98b6-393405918194" />
 
-1. **Clone the Repository**:
-   Open a terminal and run the following command to clone the repository:
-   ```bash
-   git clone https://github.com/your-username/GenomeGamersFrontend.git
-   ```
-   Replace `your-username` with the actual GitHub username.
+---
 
-2. **Navigate to the Project Directory**:
-   ```bash
-   cd GenomeGamersFrontend
-   ```
+## Credits
 
-3. **Install Dependencies**:
-   Run the following command to install the required dependencies:
-   ```bash
-   npm install
-   ```
+- **Project Manager/Scrum Master**: Ian Manangan
+- **Frontend/Backend Developer**: Zach Peltz
+- **ML Engineer/Data Science Lead**: Aarush Kota
 
-4. **Start the Development Server**:
-   Launch the development server using:
-   ```bash
-   npm start
-   ```
-   This will start the server and open the project in your default web browser.
+<img width="1280" alt="Image" src="https://github.com/user-attachments/assets/27b1f3ae-92df-43df-8bf1-4e1c9f353c45" />
 
-5. **Build the Project**:
-   To generate the production-ready files, use:
-   ```bash
-   npm run build
-   ```
 
-6. **Deploy**:
-   Follow the deployment instructions in the repository to host the project on GitHub Pages or another platform.
+---
 
----
+<script>
+// filepath: /home/kasm-user/nighthawk/GenomeGamersFrontend/navigation/Worlds/world0.md
+// ...existing code...
+
+// --- Background Music ---
+const music = new Audio('{{site.baseurl}}/assets/audio/39iceiceoutpost.mp3'); // Change path as needed
+music.loop = true;
+music.volume = 0.5;
+
+// Play music after first user interaction (required by browsers)
+function startMusicOnce() {
+  music.play().catch(() => {});
+  window.removeEventListener('click', startMusicOnce);
+  window.removeEventListener('keydown', startMusicOnce);
+}
+window.addEventListener('click', startMusicOnce);
+window.addEventListener('keydown', startMusicOnce);
+</script>