feat: add gameplay enhancements and visual improvements

Backend: - Add weather system with 6 weather types and transition probabilities - Add day/night cycle (dawn, day, dusk, night) with phase modifiers - Add mood system for agents (happy, neutral, sad, anxious) - Add new commands: heal, talk, encourage, revive - Add agent social interaction system with relationships - Add casual mode with auto-revive and reduced decay rates Frontend (Web): - Add world state display (weather, time of day) - Add mood bar to agent cards - Add new action buttons for heal, encourage, talk, revive - Handle new event types from server Unity Client: - Add EnvironmentManager with dynamic sky gradient and island scene - Add WeatherEffects with rain, sun rays, fog, and heat particles - Add SceneBootstrap for automatic visual system initialization - Improve AgentVisual with better character sprites and animations - Add breathing and bobbing idle animations - Add character shadows - Improve UI panels with rounded corners and borders - Improve SpeechBubble with rounded corners and proper tail - Add support for all new server events and commands 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
2026-01-01 15:25:15 +08:00
parent 8264fe2be3
commit 6c66764cce
18 changed files with 3418 additions and 313 deletions
--- a/frontend/app.js
+++ b/frontend/app.js
@@ -12,6 +12,13 @@ let userGold = 100;
 // Agents state
 let agents = [];

+// World state
+let worldState = {
+    day_count: 1,
+    time_of_day: 'day',
+    weather: 'Sunny'
+};
+
 // DOM Elements
 const statusDot = document.getElementById('statusDot');
 const statusText = document.getElementById('statusText');
@@ -87,6 +94,9 @@ function handleGameEvent(event) {
            updateAgentsUI(data.agents);
            break;
        case 'feed':
+        case 'heal':
+        case 'encourage':
+        case 'revive':
        case 'user_update':
            updateUserGold(data);
            break;
@@ -97,7 +107,35 @@ function handleGameEvent(event) {
            }
            break;
        case 'agent_speak':
-            showSpeechBubble(data.agent_id, data.agent_name, data.text);
+        case 'talk':
+            if (data.agent_id !== undefined) {
+                showSpeechBubble(data.agent_id, data.agent_name, data.text || data.response);
+            }
+            break;
+        case 'social_interaction':
+            showSocialInteraction(data);
+            break;
+        case 'world_update':
+            updateWorldState(data);
+            break;
+        case 'weather_change':
+            worldState.weather = data.new_weather;
+            updateWorldDisplay();
+            break;
+        case 'phase_change':
+            worldState.time_of_day = data.new_phase;
+            updateWorldDisplay();
+            break;
+        case 'day_change':
+            worldState.day_count = data.day;
+            updateWorldDisplay();
+            break;
+        case 'tick':
+            // Update world state from tick data
+            if (data.day) worldState.day_count = data.day;
+            if (data.time_of_day) worldState.time_of_day = data.time_of_day;
+            if (data.weather) worldState.weather = data.weather;
+            updateWorldDisplay();
            break;
    }

@@ -152,6 +190,10 @@ function createAgentCard(agent) {
    const statusClass = isDead ? 'dead' : 'alive';
    const statusText = isDead ? '已死亡' : '存活';

+    // Mood emoji and color
+    const moodEmoji = getMoodEmoji(agent.mood_state);
+    const moodColor = getMoodColor(agent.mood_state);
+
    card.innerHTML = `
        <div class="agent-header">
            <div>
@@ -178,18 +220,175 @@ function createAgentCard(agent) {
                <div class="stat-bar-fill energy" style="width: ${agent.energy}%"></div>
            </div>
        </div>
-        <button class="feed-btn" onclick="feedAgent('${agent.name}')" ${isDead ? 'disabled' : ''}>
-            🍖 投喂 (10金币)
-        </button>
+        <div class="stat-bar-container">
+            <div class="stat-bar-label">
+                <span>${moodEmoji} 心情</span>
+                <span>${agent.mood}/100</span>
+            </div>
+            <div class="stat-bar">
+                <div class="stat-bar-fill" style="width: ${agent.mood}%; background: ${moodColor}"></div>
+            </div>
+        </div>
+        <div class="agent-actions">
+            ${isDead ? `
+                <button class="action-btn revive" onclick="reviveAgent('${agent.name}')">
+                    💫 复活 (10g)
+                </button>
+            ` : `
+                <button class="action-btn feed" onclick="feedAgent('${agent.name}')">
+                    🍖 投喂 (10g)
+                </button>
+                <button class="action-btn heal" onclick="healAgent('${agent.name}')">
+                    💊 治疗 (15g)
+                </button>
+                <button class="action-btn encourage" onclick="encourageAgent('${agent.name}')">
+                    💪 鼓励 (5g)
+                </button>
+                <button class="action-btn talk" onclick="talkToAgent('${agent.name}')">
+                    💬 交谈
+                </button>
+            `}
+        </div>
    `;

    return card;
 }

+/**
+ * Get mood emoji based on mood state
+ */
+function getMoodEmoji(moodState) {
+    const emojis = {
+        'happy': '😊',
+        'neutral': '😐',
+        'sad': '😢',
+        'anxious': '😰'
+    };
+    return emojis[moodState] || '😐';
+}
+
+/**
+ * Get mood color based on mood state
+ */
+function getMoodColor(moodState) {
+    const colors = {
+        'happy': '#4ade80',
+        'neutral': '#fbbf24',
+        'sad': '#60a5fa',
+        'anxious': '#f87171'
+    };
+    return colors[moodState] || '#fbbf24';
+}
+
+/**
+ * Update world state from server
+ */
+function updateWorldState(data) {
+    if (data.day_count) worldState.day_count = data.day_count;
+    if (data.time_of_day) worldState.time_of_day = data.time_of_day;
+    if (data.weather) worldState.weather = data.weather;
+    updateWorldDisplay();
+}
+
+/**
+ * Update the world display panel
+ */
+function updateWorldDisplay() {
+    const worldDisplay = document.getElementById('worldDisplay');
+    if (!worldDisplay) return;
+
+    const weatherEmojis = {
+        'Sunny': '☀️',
+        'Cloudy': '☁️',
+        'Rainy': '🌧️',
+        'Stormy': '⛈️',
+        'Hot': '🔥',
+        'Foggy': '🌫️'
+    };
+
+    const phaseEmojis = {
+        'dawn': '🌅',
+        'day': '☀️',
+        'dusk': '🌇',
+        'night': '🌙'
+    };
+
+    const phaseNames = {
+        'dawn': '黎明',
+        'day': '白天',
+        'dusk': '黄昏',
+        'night': '夜晚'
+    };
+
+    worldDisplay.innerHTML = `
+        <span>📅 第${worldState.day_count}天</span>
+        <span>${phaseEmojis[worldState.time_of_day] || '☀️'} ${phaseNames[worldState.time_of_day] || '白天'}</span>
+        <span>${weatherEmojis[worldState.weather] || '☀️'} ${worldState.weather}</span>
+    `;
+}
+
+/**
+ * Show social interaction notification
+ */
+function showSocialInteraction(data) {
+    const interactionNames = {
+        'chat': '聊天',
+        'share_food': '分享食物',
+        'help': '互相帮助',
+        'argue': '争吵',
+        'comfort': '安慰'
+    };
+
+    const message = `${data.initiator_name} 和 ${data.target_name} ${interactionNames[data.interaction_type] || '互动'}了`;
+    logEvent({
+        event_type: 'social_interaction',
+        timestamp: Date.now() / 1000,
+        data: { message, dialogue: data.dialogue }
+    });
+}
+
 /**
 * Feed an agent
 */
 function feedAgent(agentName) {
+    sendCommand(`feed ${agentName}`);
+}
+
+/**
+ * Heal an agent
+ */
+function healAgent(agentName) {
+    sendCommand(`heal ${agentName}`);
+}
+
+/**
+ * Encourage an agent
+ */
+function encourageAgent(agentName) {
+    sendCommand(`encourage ${agentName}`);
+}
+
+/**
+ * Talk to an agent
+ */
+function talkToAgent(agentName) {
+    const topic = prompt(`想和 ${agentName} 聊什么？（留空则随便聊聊）`);
+    if (topic !== null) {
+        sendCommand(`talk ${agentName} ${topic}`.trim());
+    }
+}
+
+/**
+ * Revive a dead agent
+ */
+function reviveAgent(agentName) {
+    sendCommand(`revive ${agentName}`);
+}
+
+/**
+ * Send a command to the server
+ */
+function sendCommand(command) {
    if (!ws || ws.readyState !== WebSocket.OPEN) {
        alert('未连接到服务器');
        return;
@@ -198,7 +397,7 @@ function feedAgent(agentName) {
    const user = getCurrentUser();
    const payload = {
        action: 'send_comment',
-        payload: { user, message: `feed ${agentName}` }
+        payload: { user, message: command }
    };

    ws.send(JSON.stringify(payload));
@@ -315,19 +514,38 @@ function formatEventData(eventType, data) {
        case 'comment':
            return `${data.user}: ${data.message}`;
        case 'tick':
-            return `Tick #${data.tick} | 第${data.day}天 | 存活: ${data.alive_agents}人`;
+            const phaseEmoji = { 'dawn': '🌅', 'day': '☀️', 'dusk': '🌇', 'night': '🌙' };
+            const weatherEmoji = { 'Sunny': '☀️', 'Cloudy': '☁️', 'Rainy': '🌧️', 'Stormy': '⛈️', 'Hot': '🔥', 'Foggy': '🌫️' };
+            return `第${data.day}天 ${phaseEmoji[data.time_of_day] || ''}${data.time_of_day} | ${weatherEmoji[data.weather] || ''}${data.weather} | 存活: ${data.alive_agents}人`;
        case 'system':
        case 'error':
        case 'feed':
+        case 'heal':
+        case 'encourage':
+        case 'revive':
+        case 'auto_revive':
        case 'agent_died':
        case 'check':
            return data.message;
        case 'agent_speak':
            return `💬 ${data.agent_name}: "${data.text}"`;
+        case 'talk':
+            return `💬 ${data.agent_name} 对 ${data.user} 说: "${data.response}"`;
        case 'agents_update':
            return `角色状态已更新`;
        case 'user_update':
            return `${data.user} 金币: ${data.gold}`;
+        case 'weather_change':
+            return `🌤️ 天气变化: ${data.old_weather} → ${data.new_weather}`;
+        case 'phase_change':
+            return `🕐 ${data.message}`;
+        case 'day_change':
+            return `📅 ${data.message}`;
+        case 'social_interaction':
+            const dialogue = data.dialogue ? `\n"${data.dialogue}"` : '';
+            return `👥 ${data.message}${dialogue}`;
+        case 'world_update':
+            return `🌍 世界状态已更新`;
        default:
            return JSON.stringify(data);
    }
--- a/frontend/debug_client.html
+++ b/frontend/debug_client.html
@@ -326,10 +326,64 @@
        .event.feed { border-color: #ffaa00; background: rgba(255, 170, 0, 0.1); color: #ffcc66; }
        .event.agent_died { border-color: #ff4444; background: rgba(255, 68, 68, 0.15); color: #ff8888; }
        .event.agent_speak { border-color: #88ccff; background: rgba(136, 204, 255, 0.1); color: #aaddff; }
+        .event.talk { border-color: #88ccff; background: rgba(136, 204, 255, 0.1); color: #aaddff; }
        .event.check { border-color: #88cc88; background: rgba(136, 204, 136, 0.1); }
+        .event.heal { border-color: #ff88cc; background: rgba(255, 136, 204, 0.1); color: #ffaadd; }
+        .event.encourage { border-color: #ffcc44; background: rgba(255, 204, 68, 0.1); color: #ffdd88; }
+        .event.revive { border-color: #cc88ff; background: rgba(204, 136, 255, 0.1); color: #ddaaff; }
+        .event.auto_revive { border-color: #cc88ff; background: rgba(204, 136, 255, 0.1); color: #ddaaff; }
+        .event.weather_change { border-color: #66cccc; background: rgba(102, 204, 204, 0.1); color: #88dddd; }
+        .event.phase_change { border-color: #ccaa44; background: rgba(204, 170, 68, 0.1); color: #ddcc88; }
+        .event.day_change { border-color: #88ccff; background: rgba(136, 204, 255, 0.15); color: #aaddff; }
+        .event.social_interaction { border-color: #ff8888; background: rgba(255, 136, 136, 0.1); color: #ffaaaa; }
        .event-time { color: #888; font-size: 11px; }
        .event-type { font-weight: bold; text-transform: uppercase; font-size: 11px; }
-        .event-data { margin-top: 5px; }
+        .event-data { margin-top: 5px; white-space: pre-wrap; }
+
+        /* World Display */
+        .world-panel {
+            background: rgba(102, 204, 204, 0.1);
+            border: 1px solid rgba(102, 204, 204, 0.3);
+            border-radius: 12px;
+            padding: 12px 20px;
+            margin-bottom: 20px;
+            display: flex;
+            justify-content: center;
+            gap: 30px;
+            font-size: 1rem;
+        }
+        .world-panel span {
+            display: flex;
+            align-items: center;
+            gap: 6px;
+        }
+
+        /* Agent Actions */
+        .agent-actions {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 8px;
+            margin-top: 12px;
+        }
+        .action-btn {
+            padding: 6px 8px;
+            font-size: 0.8rem;
+            border-radius: 6px;
+            border: none;
+            cursor: pointer;
+            transition: all 0.2s;
+            font-weight: bold;
+        }
+        .action-btn.feed { background: #88cc88; color: #1a2a1a; }
+        .action-btn.feed:hover { background: #66aa66; }
+        .action-btn.heal { background: #ff88cc; color: #1a2a1a; }
+        .action-btn.heal:hover { background: #ff66bb; }
+        .action-btn.encourage { background: #ffcc44; color: #1a2a1a; }
+        .action-btn.encourage:hover { background: #ffbb22; }
+        .action-btn.talk { background: #88ccff; color: #1a2a1a; }
+        .action-btn.talk:hover { background: #66bbff; }
+        .action-btn.revive { background: #cc88ff; color: #1a2a1a; grid-column: span 2; }
+        .action-btn.revive:hover { background: #bb66ff; }
    </style>
 </head>
 <body>
@@ -356,6 +410,13 @@
            </div>
        </div>

+        <!-- World State Panel -->
+        <div class="world-panel" id="worldDisplay">
+            <span>📅 第1天</span>
+            <span>☀️ 白天</span>
+            <span>☀️ Sunny</span>
+        </div>
+
        <!-- Agents Section -->
        <div class="agents-section">
            <div class="speech-bubbles-overlay" id="speechBubblesOverlay"></div>
@@ -379,7 +440,7 @@
                    <button onclick="sendComment()">发送</button>
                </div>
                <p style="margin-top: 10px; font-size: 0.85rem; color: #888;">
-                    指令: <code>feed [名字]</code> - 投喂 | <code>check</code> - 查询 | <code>reset</code> - 重新开始
+                    指令: <code>feed/heal/encourage/revive [名字]</code> | <code>talk [名字] [话题]</code> | <code>check</code> | <code>reset</code>
                </p>
            </div>