managarten/games/whopixels/index.html
Till JS c0c11c325a feat(whopixels): major refactor with 20 improvements across architecture, gameplay, UX, security, and i18n
Split monolithic RPGScene.js (1210 lines) into modular manager classes:
- WorldManager, PlayerManager, NPCManager, ChatUI, StorageManager,
  SoundManager, TouchControls

Key improvements:
- Constants config (GAME_CONFIG) replacing all magic numbers
- JSDoc types + jsconfig.json for IDE type-safety
- LocalStorage persistence for progress, stats, and custom avatars
- Synthesized sound effects via Web Audio API
- 26 NPCs (up from 10) in 3 categories
- Stats/leaderboard in main menu
- Pixel editor avatar integration with RPG game
- Mobile touch controls (virtual joystick + interact button)
- Chat UI with typing indicator and conversation history
- Interactive tutorial overlay for first-time players
- Floating question mark over NPCs in range
- Server hardened: rate limiting, input sanitization, CORS restrictions,
  API timeouts, conversation history cap
- Particle effect object pooling
- i18n framework with DE/EN and language switcher

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2026-03-21 15:26:40 +01:00

38 lines
1.3 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>WhoPixels - Pixel Game</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div id="game-container"></div>
<!-- Phaser Library -->
<script src="https://cdn.jsdelivr.net/npm/phaser@3.55.2/dist/phaser.min.js"></script>
<!-- Game Data -->
<script src="data/npc_characters.js"></script>
<!-- Config -->
<script src="js/config/constants.js"></script>
<script src="js/config/i18n.js"></script>
<!-- Manager Classes -->
<script src="js/managers/StorageManager.js"></script>
<script src="js/managers/SoundManager.js"></script>
<script src="js/managers/WorldManager.js"></script>
<script src="js/managers/PlayerManager.js"></script>
<script src="js/managers/NPCManager.js"></script>
<script src="js/managers/ChatUI.js"></script>
<script src="js/managers/TouchControls.js"></script>
<!-- Game Scenes -->
<script src="js/scenes/BootScene.js"></script>
<script src="js/scenes/MainMenuScene.js"></script>
<script src="js/scenes/GameScene.js"></script>
<script src="js/scenes/RPGScene.js"></script>
<script src="js/main.js"></script>
</body>
</html>