Hack4Soc

⚔️ Eclipse Rising

Eclipse Rising is a dark fantasy boss-fighting Action RPG that merges bodyweight exercises with physical/magical combat. Play as a knight or sorceress, execute physical movements, and unleash powerful elemental spells to purge the darkness and defeat the eclipse lords!

The game is built entirely with vanilla front-end web technologies (HTML, CSS, JavaScript) utilizing Three.js for high-fidelity 3D character and boss rendering, custom skeletal animations, and fluid particle effects.

---

🌟 Key Features

• 3D Character & Boss Visuals: High-fidelity GLB models rendered in real-time with responsive combat stance transitions, attack/hit sequences, and death animations.
• Exercise-Driven Combat: Cast spells by performing and holding specific physical poses (squats, lunges, knee raises, punches, and arm extensions).
• Pose Detection Integration:
  • Simulation Mode: Emulate exercises directly using keyboard hotkeys (1 to 0).
  • Real Motion Mode: Ready for camera-based pose tracking via a WebSocket server connection.
• Progressive Boss System: Defeat bosses sequentially to unlock the next challenge, rising from the Tomb of the Bone Warden to the Obsidian Rift of the Eclipse King.
• Save & Progression Tracking: LocalStorage persistent saving for level progression, XP, combos, total exercises, calories burned, and custom achievements.
• Dark Fantasy Aesthetic: Deep ambient styling, particle overlays, and immersive soundscapes built with Web Audio API.

---

🚀 How to Run the Program

Due to modern browser security policies (CORS constraints), loading 3D assets (.glb / .gltf files) directly via the file:// protocol (e.g., double-clicking index.html) will fail.

You must host the project files using a local HTTP web server. Choose any of the simple options below:

Option A: Using Python (Simplest & Built-In)

If you have Python installed, you can launch a server instantly.

1. Open your Terminal (macOS/Linux) or Command Prompt (Windows).
2. Navigate to your project folder:

   cd /path/to/eclipse-rising

3. Run the server command:
   • For Python 3:

     python3 -m http.server 8000

   • For Python 2:

     python -m SimpleHTTPServer 8000

4. Open your web browser and go to: http://localhost:8000

---

Option B: Using Node.js / npm (For Developers)

If you have Node.js installed, you can use npx to serve the folder without manual installations:

1. Open your Terminal in the project directory.
2. Run:

   npx http-server -p 8000

   or

   npx serve

3. Open your web browser and go to: http://localhost:8000 (or the URL printed in the terminal).

---

Option C: Using VS Code "Live Server" Extension

If you use Visual Studio Code:

1. Open the project folder in VS Code.
2. Install the Live Server extension (by Ritwick Dey).
3. Click the Go Live button in the bottom right corner of the status bar.
4. VS Code will automatically open your default browser to the running game (typically at http://127.0.0.1:5500).

---

Option D: Using Other Quick Servers

• PHP: Run php -S localhost:8000 in the directory.
• Ruby: Run ruby -run -e httpd . -p 8000 in the directory.

---

🎮 Game Controls & Keyboard Simulation

If you are not using an external WebSocket pose-detection camera setup, you can play the game and perform spells by pressing and holding keys 1 through 0 on your keyboard.

Key	Spell Name	Required Exercise / Pose	Hold Duration	Damage	Description
1	Iron Roots	Squat Hold	3s	20	Roots yourself, dealing ground-wave earth damage.
2	Earth Stance	Sumo Squat	3s	18	SUMO squat wide stance. Summons shields to absorb hits.
3	Left Fang	Left Lunge	3s	25	Lunge left. Launches a slicing dark projectile.
4	Right Fang	Right Lunge	3s	25	Lunge right. Launches a slicing dark projectile.
5	Storm Wings	Arms Extended Sideways	4s	22	Extend arms to side. Triggers a thunderous strike.
6	Heaven's Gate	Arms Overhead	4s	32	Raise arms straight up. Fires a massive cosmic beam.
7	** **	Arms Forward	3s	20	Push arms forward to project a kinetic blast wave.
8	Wind Bend	Side Bend	4s	21	Bend sideways. Flings sharp slicing wind blades.
9	Shadow Strike	Punches	2s	26	Throw fast alternating punches to hurl shadow daggers.
0	Demon Knee	Knee Raises	3s	30	Raise knees high to summon explosive demon skulls.

Note: The HUD displays a real-time vector-based stick-figure demonstration of how to perform each exercise.

---

👹 The Bosses

Unlock and progress through four boss encounters of increasing difficulty:

1. The Bone Warden (Level 1 - Easy)
   • Lore: Keeper of the Hollow Tomb. An ancient undead guardian armed with the heavy Soul Cleaver.
   • Required Spells: Iron Roots, Earth Stance.
2. The Plague Warlord (Level 2 - Medium)
   • Lore: Vessel of Rotting Decay. A mutated behemoth that slams the ground to release toxic spores.
   • Required Spells: Adds Left Fang & Right Fang.
3. The Void Reaper (Level 3 - Hard)
   • Lore: Shadow of the Obsidian Rift. A swift rift-walking assassin wielding dual scythes.
   • Required Spells: Adds Storm Wings, Heaven's Gate, & .
4. The Eclipse King (Level 4 - Extreme)
   • Lore: Sovereign of the Dying Sun. The creator of the shattering eclipse who commands gravity, fire, and meteors.
   • Required Spells: Unleashes all 10 exercise moves.

---

🛠️ Tech Stack & File Architecture

eclipse-rising/
│
├── index.html          # Core structure, screens, and Three.js Import Map configuration
├── style.css           # Styling, layout, and visual overlays
├── assets/             # Subdirectories containing character/boss models and textures
│
└── js/
    ├── game.js              # Primary controller orchestrating the game loop and screens
    ├── characterRenderer.js # Three.js engine loading & animating GLB heroes and bosses
    ├── animationManager.js  # Manages the 2D canvas effects, visual particle overlays, and glows
    ├── combatManager.js     # Manages duel calculations, combos, HP, shields, and levels
    ├── bossManager.js       # Controls boss AI, wind-ups, attack intervals, and rage scaling
    ├── inputManager.js      # Handles keyboard simulation triggers and WebSocket connections
    ├── spells.js            # Configuration for the 10 spells and the mini guide vector animations
    ├── audioManager.js      # Synthesizes dynamic sound FX and ambient theme melodies
    ├── uiManager.js         # Manages screen transitions, button listeners, HUD, and logs
    └── saveManager.js       # Handles browser local storage saves, achievements, and statistics

---

⚙️ Integrations & Technical Notes

WebSocket Integration

The inputManager.js includes a WebSocket integration layer to connect to a motion tracking client (such as a MediaPipe Python script).

• Endpoint: ws://localhost:8080 (Configurable via Settings)
• Message Schema: The game parses messages in JSON format:

  {
    "spell": "Iron Roots",
    "confidence": 0.95,
    "holdSeconds": 3.1
  }

  If confidence >= 0.8 and the holdSeconds meets or exceeds the spell's threshold, the attack automatically triggers in the game.

Resetting Progress

To clear your save data, level, stats, and achievements, open the browser's developer console (F12) on the game tab and run:

localStorage.removeItem("eclipse_rising_save_v1");
window.location.reload();