feat: implement basic RPG mechanics with boss counter-attack

- Add Player and Boss data models (models.py)
- Implement command processing via regex matching (attack/heal/status)
- Add boss counter-attack mechanism (15 dmg per player attack)
- Add player death/respawn system (lose half gold, respawn full HP)
- Update frontend with boss HP bar, player stats panel, quick action buttons
- Add colored event log (red for attack, green for heal)
- Change port from 8000 to 8080

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

frontend/app.js

@@ -1,10 +1,17 @@
 /**
  * The Island - Debug Client JavaScript
- * Handles WebSocket connection and UI interactions
+ * Handles WebSocket connection, UI interactions, and game state display
  */
 
 let ws = null;
-const WS_URL = 'ws://localhost:8000/ws';
+const WS_URL = 'ws://localhost:8080/ws';
+
+// Player state (tracked from server events)
+let playerState = {
+    hp: 100,
+    maxHp: 100,
+    gold: 0
+};
 
 // DOM Elements
 const statusDot = document.getElementById('statusDot');
@@ -14,6 +21,17 @@ const eventLog = document.getElementById('eventLog');
 const usernameInput = document.getElementById('username');
 const messageInput = document.getElementById('message');
 const autoScrollCheckbox = document.getElementById('autoScroll');
+const hideTicksCheckbox = document.getElementById('hideTicks');
+
+// Boss UI Elements
+const bossName = document.getElementById('bossName');
+const bossHpText = document.getElementById('bossHpText');
+const bossHealthBar = document.getElementById('bossHealthBar');
+const bossHealthLabel = document.getElementById('bossHealthLabel');
+
+// Player UI Elements
+const playerHpDisplay = document.getElementById('playerHp');
+const playerGoldDisplay = document.getElementById('playerGold');
 
 /**
  * Toggle WebSocket connection
@@ -59,7 +77,7 @@ function connect() {
     ws.onmessage = (event) => {
         try {
             const data = JSON.parse(event.data);
-            logEvent(data);
+            handleGameEvent(data);
         } catch (e) {
             console.error('Failed to parse message:', e);
         }
@@ -67,7 +85,132 @@ function connect() {
 }
 
 /**
- * Send a mock comment to the server
+ * Handle incoming game events
+ */
+function handleGameEvent(event) {
+    const eventType = event.event_type;
+    const data = event.data || {};
+
+    // Update UI based on event type
+    switch (eventType) {
+        case 'boss_update':
+            updateBossUI(data);
+            break;
+        case 'attack':
+            updateBossFromAttack(data);
+            updatePlayerFromEvent(data);
+            break;
+        case 'heal':
+            updatePlayerFromEvent(data);
+            break;
+        case 'status':
+            updatePlayerFromEvent(data);
+            updateBossFromStatus(data);
+            break;
+        case 'system':
+            // Handle player death/respawn updates
+            if (data.user && data.player_hp !== undefined) {
+                updatePlayerFromEvent(data);
+            }
+            break;
+        case 'tick':
+            if (data.boss_hp !== undefined) {
+                updateBossUI({
+                    boss_hp: data.boss_hp,
+                    boss_max_hp: data.boss_max_hp
+                });
+            }
+            break;
+    }
+
+    // Log the event
+    logEvent(event);
+}
+
+/**
+ * Update Boss health bar UI
+ */
+function updateBossUI(data) {
+    if (data.boss_name) {
+        bossName.textContent = data.boss_name;
+    }
+    if (data.boss_hp !== undefined && data.boss_max_hp !== undefined) {
+        const hp = data.boss_hp;
+        const maxHp = data.boss_max_hp;
+        const percentage = maxHp > 0 ? (hp / maxHp) * 100 : 0;
+
+        bossHpText.textContent = `HP: ${hp} / ${maxHp}`;
+        bossHealthBar.style.width = `${percentage}%`;
+        bossHealthLabel.textContent = `${Math.round(percentage)}%`;
+
+        // Change color based on HP percentage
+        if (percentage <= 25) {
+            bossHealthBar.style.background = 'linear-gradient(90deg, #ff2222 0%, #ff4444 100%)';
+        } else if (percentage <= 50) {
+            bossHealthBar.style.background = 'linear-gradient(90deg, #ff6600 0%, #ff8844 100%)';
+        } else {
+            bossHealthBar.style.background = 'linear-gradient(90deg, #ff4444 0%, #ff6666 100%)';
+        }
+    }
+}
+
+/**
+ * Update boss from attack event
+ */
+function updateBossFromAttack(data) {
+    if (data.boss_hp !== undefined && data.boss_max_hp !== undefined) {
+        updateBossUI({
+            boss_hp: data.boss_hp,
+            boss_max_hp: data.boss_max_hp
+        });
+    }
+}
+
+/**
+ * Update boss from status event
+ */
+function updateBossFromStatus(data) {
+    if (data.boss_hp !== undefined && data.boss_max_hp !== undefined) {
+        updateBossUI({
+            boss_name: data.boss_name,
+            boss_hp: data.boss_hp,
+            boss_max_hp: data.boss_max_hp
+        });
+    }
+}
+
+/**
+ * Update player stats from event data
+ */
+function updatePlayerFromEvent(data) {
+    const currentUser = usernameInput.value.trim() || 'Anonymous';
+
+    // Only update if this event is for the current user
+    if (data.user !== currentUser) return;
+
+    if (data.player_hp !== undefined) {
+        playerState.hp = data.player_hp;
+    }
+    if (data.player_max_hp !== undefined) {
+        playerState.maxHp = data.player_max_hp;
+    }
+    if (data.player_gold !== undefined) {
+        playerState.gold = data.player_gold;
+    }
+
+    updatePlayerUI();
+}
+
+/**
+ * Update player stats UI
+ */
+function updatePlayerUI() {
+    playerHpDisplay.textContent = `${playerState.hp}/${playerState.maxHp}`;
+    playerGoldDisplay.textContent = playerState.gold;
+}
+
+/**
+ * Send a comment/command to the server
  */
 function sendComment() {
     if (!ws || ws.readyState !== WebSocket.OPEN) {
@@ -92,6 +235,25 @@ function sendComment() {
     messageInput.value = '';
 }
 
+/**
+ * Quick action buttons
+ */
+function quickAction(action) {
+    if (!ws || ws.readyState !== WebSocket.OPEN) {
+        alert('Not connected to server');
+        return;
+    }
+
+    const user = usernameInput.value.trim() || 'Anonymous';
+
+    const payload = {
+        action: 'send_comment',
+        payload: { user, message: action }
+    };
+
+    ws.send(JSON.stringify(payload));
+}
+
 /**
  * Format timestamp for display
  */
@@ -110,10 +272,17 @@ function formatEventData(eventType, data) {
         case 'agent_response':
             return data.response;
         case 'tick':
-            return `Tick #${data.tick}`;
+            return `Tick #${data.tick} | Players: ${data.player_count || 0}`;
         case 'system':
         case 'error':
             return data.message;
+        case 'attack':
+        case 'heal':
+        case 'status':
+        case 'boss_defeated':
+            return data.message;
+        case 'boss_update':
+            return `Boss ${data.boss_name}: ${data.boss_hp}/${data.boss_max_hp} (${Math.round(data.boss_hp_percentage)}%)`;
         default:
             return JSON.stringify(data);
     }
@@ -127,6 +296,16 @@ function logEvent(event) {
     const timestamp = event.timestamp || Date.now() / 1000;
     const data = event.data || {};
 
+    // Skip tick events if checkbox is checked
+    if (eventType === 'tick' && hideTicksCheckbox && hideTicksCheckbox.checked) {
+        return;
+    }
+
+    // Skip boss_update events to reduce log noise (they're reflected in the UI)
+    if (eventType === 'boss_update') {
+        return;
+    }
+
     const div = document.createElement('div');
     div.className = `event ${eventType}`;
     div.innerHTML = `

frontend/debug_client.html

@@ -51,6 +51,88 @@
             background: #44ff44;
             box-shadow: 0 0 10px rgba(68, 255, 68, 0.5);
         }
+
+        /* Boss Health Bar */
+        .boss-panel {
+            background: rgba(255, 68, 68, 0.1);
+            border: 1px solid rgba(255, 68, 68, 0.3);
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+        .boss-header {
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            margin-bottom: 10px;
+        }
+        .boss-name {
+            color: #ff6666;
+            font-size: 1.3rem;
+            font-weight: bold;
+        }
+        .boss-hp-text {
+            color: #ffaaaa;
+            font-size: 0.9rem;
+        }
+        .health-bar-container {
+            width: 100%;
+            height: 30px;
+            background: rgba(0, 0, 0, 0.4);
+            border-radius: 15px;
+            overflow: hidden;
+            position: relative;
+        }
+        .health-bar {
+            height: 100%;
+            background: linear-gradient(90deg, #ff4444 0%, #ff6666 100%);
+            border-radius: 15px;
+            transition: width 0.3s ease;
+        }
+        .health-bar-label {
+            position: absolute;
+            top: 50%;
+            left: 50%;
+            transform: translate(-50%, -50%);
+            font-weight: bold;
+            text-shadow: 1px 1px 2px rgba(0,0,0,0.8);
+        }
+
+        /* Player Stats Panel */
+        .player-panel {
+            background: rgba(0, 212, 255, 0.1);
+            border: 1px solid rgba(0, 212, 255, 0.3);
+            border-radius: 12px;
+            padding: 20px;
+            margin-bottom: 20px;
+        }
+        .player-header {
+            color: #00d4ff;
+            font-size: 1.1rem;
+            margin-bottom: 15px;
+        }
+        .player-stats {
+            display: flex;
+            gap: 30px;
+            flex-wrap: wrap;
+        }
+        .stat-item {
+            display: flex;
+            align-items: center;
+            gap: 10px;
+        }
+        .stat-icon {
+            font-size: 1.5rem;
+        }
+        .stat-value {
+            font-size: 1.2rem;
+            font-weight: bold;
+        }
+        .stat-label {
+            font-size: 0.8rem;
+            color: #888;
+        }
+
         .panels {
             display: flex;
             flex-direction: column;
@@ -104,6 +186,19 @@
             background: #666;
             cursor: not-allowed;
         }
+        .quick-actions {
+            display: flex;
+            gap: 10px;
+            margin-top: 10px;
+            flex-wrap: wrap;
+        }
+        .quick-btn {
+            padding: 8px 16px;
+            font-size: 13px;
+        }
+        .quick-btn.attack { background: #ff6666; }
+        .quick-btn.heal { background: #44ff88; }
+        .quick-btn.status { background: #ffaa44; }
         .controls {
             display: flex;
             gap: 15px;
@@ -117,7 +212,7 @@
             font-size: 14px;
         }
         .event-log {
-            height: 400px;
+            height: 350px;
             overflow-y: auto;
             background: rgba(0, 0, 0, 0.4);
             border-radius: 8px;
@@ -133,9 +228,15 @@
         }
         .event.comment { border-color: #ffaa00; background: rgba(255, 170, 0, 0.1); }
         .event.agent_response { border-color: #00ff88; background: rgba(0, 255, 136, 0.1); }
-        .event.tick { border-color: #888; background: rgba(136, 136, 136, 0.1); }
+        .event.tick { border-color: #888; background: rgba(136, 136, 136, 0.05); opacity: 0.6; }
         .event.system { border-color: #00d4ff; background: rgba(0, 212, 255, 0.1); }
         .event.error { border-color: #ff4444; background: rgba(255, 68, 68, 0.1); }
+        /* RPG Event Styles */
+        .event.attack { border-color: #ff4444; background: rgba(255, 68, 68, 0.15); color: #ff8888; }
+        .event.heal { border-color: #44ff88; background: rgba(68, 255, 136, 0.15); color: #88ffaa; }
+        .event.status { border-color: #ffaa44; background: rgba(255, 170, 68, 0.1); }
+        .event.boss_update { border-color: #ff6666; background: rgba(255, 102, 102, 0.1); }
+        .event.boss_defeated { border-color: #ffdd00; background: rgba(255, 221, 0, 0.2); color: #ffee88; font-weight: bold; }
         .event-time { color: #888; font-size: 11px; }
         .event-type { font-weight: bold; text-transform: uppercase; font-size: 11px; }
         .event-data { margin-top: 5px; }
@@ -153,14 +254,52 @@
             <button id="connectBtn" onclick="toggleConnection()">Connect</button>
         </div>
 
+        <!-- Boss Health Panel -->
+        <div class="boss-panel">
+            <div class="boss-header">
+                <span class="boss-name" id="bossName">Dragon</span>
+                <span class="boss-hp-text" id="bossHpText">HP: 1000 / 1000</span>
+            </div>
+            <div class="health-bar-container">
+                <div class="health-bar" id="bossHealthBar" style="width: 100%"></div>
+                <span class="health-bar-label" id="bossHealthLabel">100%</span>
+            </div>
+        </div>
+
+        <!-- Player Stats Panel -->
+        <div class="player-panel">
+            <div class="player-header">Your Stats</div>
+            <div class="player-stats">
+                <div class="stat-item">
+                    <span class="stat-icon">❤️</span>
+                    <div>
+                        <div class="stat-value" id="playerHp">100/100</div>
+                        <div class="stat-label">HP</div>
+                    </div>
+                </div>
+                <div class="stat-item">
+                    <span class="stat-icon">💰</span>
+                    <div>
+                        <div class="stat-value" id="playerGold">0</div>
+                        <div class="stat-label">Gold</div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
         <div class="panels">
             <div class="panel">
-                <h2>Send Mock Comment</h2>
+                <h2>Send Command</h2>
                 <div class="input-group">
                     <input type="text" id="username" placeholder="Username" value="TestUser">
-                    <input type="text" id="message" placeholder="Message (try: Attack!, Heal, Help...)">
+                    <input type="text" id="message" placeholder="Message (attack, heal, status...)">
                     <button onclick="sendComment()">Send</button>
                 </div>
+                <div class="quick-actions">
+                    <button class="quick-btn attack" onclick="quickAction('attack')">⚔️ Attack</button>
+                    <button class="quick-btn heal" onclick="quickAction('heal')">💚 Heal</button>
+                    <button class="quick-btn status" onclick="quickAction('status')">📊 Status</button>
+                </div>
             </div>
 
             <div class="panel">
@@ -168,6 +307,7 @@
                 <div class="controls">
                     <button onclick="clearLog()">Clear Log</button>
                     <label><input type="checkbox" id="autoScroll" checked> Auto-scroll</label>
+                    <label><input type="checkbox" id="hideTicks"> Hide ticks</label>
                 </div>
                 <div class="event-log" id="eventLog"></div>
             </div>