arch_agent
face8023a4
- api.js: API bridge to FastAPI backend - Dynamic NPC dialogues via gemma4:12b (cached 30s) - Periodic world event generation (every ~10s) - Event validation (no soft-lock) - Backend health check on startup - Fallback to static dialogue if LLM offline - Tested: events ✅, dialogues ✅
80 lines
3.0 KiB
HTML
80 lines
3.0 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Aether Chronicles</title>
|
|
<link rel="stylesheet" href="style.css">
|
|
</head>
|
|
<body>
|
|
<div id="game-container">
|
|
<canvas id="game-canvas" width="960" height="640"></canvas>
|
|
|
|
<!-- UI Overlay -->
|
|
<div id="ui-overlay">
|
|
<!-- HP/SP Bars -->
|
|
<div id="status-bars">
|
|
<div class="bar-row">
|
|
<span class="bar-label">HP</span>
|
|
<div class="bar-container">
|
|
<div id="hp-bar" class="bar-fill hp-fill"></div>
|
|
<span id="hp-text" class="bar-text">100/100</span>
|
|
</div>
|
|
</div>
|
|
<div class="bar-row">
|
|
<span class="bar-label">SP</span>
|
|
<div class="bar-container">
|
|
<div id="sp-bar" class="bar-fill sp-fill"></div>
|
|
<span id="sp-text" class="bar-text">50/50</span>
|
|
</div>
|
|
</div>
|
|
<div class="bar-row">
|
|
<span class="bar-label">EXP</span>
|
|
<div class="bar-container">
|
|
<div id="exp-bar" class="bar-fill exp-fill"></div>
|
|
<span id="exp-text" class="bar-text">0/100</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Skill Bar -->
|
|
<div id="skill-bar">
|
|
<div class="skill-slot" data-slot="1">1</div>
|
|
<div class="skill-slot" data-slot="2">2</div>
|
|
<div class="skill-slot" data-slot="3">3</div>
|
|
<div class="skill-slot" data-slot="4">4</div>
|
|
<div class="skill-slot" data-slot="5">5</div>
|
|
<div class="skill-slot" data-slot="6">6</div>
|
|
<div class="skill-slot" data-slot="7">7</div>
|
|
<div class="skill-slot" data-slot="8">8</div>
|
|
<div class="skill-slot" data-slot="9">9</div>
|
|
<div class="skill-slot" data-slot="0">0</div>
|
|
</div>
|
|
|
|
<!-- Minimap -->
|
|
<div id="minimap-container">
|
|
<canvas id="minimap" width="120" height="120"></canvas>
|
|
</div>
|
|
|
|
<!-- Chat / Event Log -->
|
|
<div id="event-log">
|
|
<div id="event-messages"></div>
|
|
</div>
|
|
|
|
<!-- Character Info -->
|
|
<div id="char-info">
|
|
<div id="char-name">Wanderer</div>
|
|
<div id="char-level">Lv. 1</div>
|
|
<div id="char-class">Wanderer</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="js/tilemap.js"></script>
|
|
<script src="js/camera.js"></script>
|
|
<script src="js/player.js"></script>
|
|
<script src="js/input.js"></script>
|
|
<script src="js/api.js"></script>
|
|
<script src="js/game.js"></script>
|
|
</body>
|
|
</html> |