"}\n'
+ "3. No extra text, no comments, no prefix/suffix.\n"
+ )
+ return (
+ "【输出要求】\n"
+ "1. 只能从候选人列表中的 id 里选择一位作为队长。\n"
+ "2. 请输出一个 JSON 对象，格式严格为：\n"
+ '{"vote_role_id": "<候选人id>", "reason": "<不超过40字的中文理由>"}\n'
+ "3. 不要输出任何多余文字，不要加注释，不要加前后缀。\n"
+ )
+
+
+def prompt_night_vote_query(lang: Lang, voter_name: str) -> str:
+ if lang == "en":
+ return f'You are team member "{voter_name}". Choose tonight\'s leader from the candidates and give a short reason.'
+ return f"你是队员「{voter_name}」，请在候选人中选出今晚的队长，并给出一句理由。"
+
+
+def prompt_section_candidates(lang: Lang) -> str:
+ if lang == "en":
+ return "【Candidates】"
+ return "【候选人列表】"
+
+
+def prompt_section_memories(lang: Lang) -> str:
+ if lang == "en":
+ return "【Your memory snippets】"
+ return "【你的记忆片段】"
+
+
+def prompt_section_dialogue(lang: Lang) -> str:
+ if lang == "en":
+ return "【Recent dialogue】"
+ return "【最近对话】"
+
+
+def prompt_memory_tag(lang: Lang) -> str:
+ """Prefix for memory search / query (e.g. 鳌太线 or Kilimanjaro). Deprecated: use prompt_memory_tag_by_theme."""
+ if lang == "en":
+ return "Kilimanjaro"
+ return "鳌太线"
+
+
+def prompt_memory_tag_by_theme(theme: str | None) -> str:
+ """Prefix for memory search by theme (aotai = 鳌太线, kili = Kilimanjaro)."""
+ return "Kilimanjaro" if theme == "kili" else "鳌太线"
+
+
+# ----- System messages (game_service) -----
+
+
+def sys_today_leader(lang: Lang, name: str) -> str:
+ if lang == "en":
+ return f"Today's leader: {name}"
+ return f"今日团长：{name}"
+
+
+def sys_location_weather_time(lang: Lang, node_name: str, weather: str, day: int, tod: str) -> str:
+ if lang == "en":
+ return f"Location: {node_name} · Weather: {weather} · Time: Day{day}/{tod}"
+ return f"位置：{node_name} · 天气：{weather} · 时间：Day{day}/{tod}"
+
+
+def sys_night_fall_say_first(lang: Lang) -> str:
+ if lang == "en":
+ return "Night has fallen. Please say something first, then the leader vote will start."
+ return "夜幕降临：请你先发言（发送一句话）后，才能开始票选团长。"
+
+
+def sys_night_vote_ready(lang: Lang) -> str:
+ if lang == "en":
+ return "Night vote ready. Please choose a leader to continue."
+ return "夜晚票选准备就绪：请选择一位队长继续。"
+
+
+def sys_need_say_first(lang: Lang) -> str:
+ if lang == "en":
+ return "Please reply with a message first (say something) before continuing."
+ return "需要你先用「发言」回应队伍（发送一句话）后才能继续。"
+
+
+def sys_camp_or_forward(lang: Lang) -> str:
+ if lang == "en":
+ return "Choose: camp to restore stamina, or continue forward."
+ return "请选择：扎营恢复体力，或继续前进。"
+
+
+def sys_teammate_look_at_you(lang: Lang) -> str:
+ if lang == "en":
+ return "Your teammate looks at you: your turn to speak (say something to continue)."
+ return "队友看向你：轮到你发言了（发一句话后才能继续）。"
+
+
+def sys_unknown_decision(lang: Lang, kind: str) -> str:
+ if lang == "en":
+ return f"Unknown decision type: {kind}"
+ return f"未知决策类型：{kind}"
+
+
+def sys_vote_failed_empty(lang: Lang) -> str:
+ if lang == "en":
+ return "Vote failed: party is empty."
+ return "票选失败：队伍为空。"
+
+
+def sys_start_leader_vote(lang: Lang) -> str:
+ if lang == "en":
+ return "Leader vote: everyone casts one vote."
+ return "开始票选团长：每人投一票。"
+
+
+def sys_vote_action(lang: Lang, voter_name: str, choice_name: str, reason: str) -> str:
+ if lang == "en":
+ return f"{voter_name} voted: {choice_name} (reason: {reason})"
+ return f"{voter_name} 投票：{choice_name}（理由：{reason}）"
+
+
+def sys_vote_action_short(lang: Lang, voter_name: str, choice_name: str) -> str:
+ if lang == "en":
+ return f"{voter_name} voted: {choice_name}"
+ return f"{voter_name} 投票：{choice_name}"
+
+
+def sys_vote_result_change(lang: Lang, old_name: str, new_name: str) -> str:
+ if lang == "en":
+ return f"Vote result: leader changed {old_name} → {new_name}"
+ return f"票选结果：更换团长 {old_name} → {new_name}"
+
+
+def sys_vote_result_keep(lang: Lang, new_name: str) -> str:
+ if lang == "en":
+ return f"Vote result: {new_name} remains leader."
+ return f"票选结果：团长继续由 {new_name} 担任。"
+
+
+def sys_camp_meeting(lang: Lang) -> str:
+ if lang == "en":
+ return "Camp meeting: choose consensus route, lock strength, and tomorrow's leader, then submit to enter next morning."
+ return "营地会议：请选择「共识路线/锁强度/明日团长」，提交后进入第二天早晨。"
+
+
+def sys_night_camp_meeting(lang: Lang) -> str:
+ if lang == "en":
+ return "Night: camp meeting starts (automatic)."
+ return "夜晚到来：营地会议开始（自动）。"
+
+
+def sys_camp_proposal_dest(lang: Lang, dest: str) -> str:
+ if lang == "en":
+ return f"I suggest we go to {dest} tomorrow."
+ return f"明天我建议：去 {dest}。"
+
+
+def sys_camp_proposal_rest(lang: Lang) -> str:
+ if lang == "en":
+ return "I suggest we rest here and decide tomorrow."
+ return "明天我建议：先原地休整再决定。"
+
+
+def sys_camp_meeting_result_vote(lang: Lang, old_name: str, new_name: str, changed: bool) -> str:
+ if lang == "en":
+ return (
+ f"Camp meeting (vote): leader changed {old_name} → {new_name}"
+ if changed
+ else f"Camp meeting (vote): {new_name} remains leader."
+ )
+ return (
+ f"营地会议结果（票选）：更换团长 {old_name} → {new_name}"
+ if changed
+ else f"营地会议结果（票选）：团长继续由 {new_name} 担任。"
+ )
+
+
+def sys_received_say_choose_leader(lang: Lang) -> str:
+ if lang == "en":
+ return "Message received. Now choose a leader to start the vote."
+ return "收到你的发言：现在请选择一位队长开始票选。"
+
+
+def sys_received_say_leader_camp_or_forward(lang: Lang) -> str:
+ if lang == "en":
+ return "Message received. As leader, you can camp to restore stamina or continue forward."
+ return "收到你的回应。作为队长，你可以选择扎营恢复体力，或继续前进。"
+
+
+def sys_received_say_party_forward(lang: Lang) -> str:
+ if lang == "en":
+ return "Message received. The party continues forward."
+ return "收到你的回应，队伍继续前进。"
+
+
+def sys_retreat_rain(lang: Lang) -> str:
+ if lang == "en":
+ return "Retreat in rain failed; returning to junction to continue."
+ return "下撤途中遇雨，撤退失败，返回岔路继续前进。"
+
+
+def sys_advance_km_arrived(lang: Lang, step_km: float, node_name: str, ev: str) -> str:
+ if lang == "en":
+ return f"Advanced {step_km:.0f}km, arrived at: {node_name}. {ev}"
+ return f"前进 {step_km:.0f}km，已抵达：{node_name}。{ev}"
+
+
+def sys_advance_km_en_route(
+ lang: Lang, step_km: float, progress: float, total: float, left: float
+) -> str:
+ if lang == "en":
+ return (
+ f"Advanced {step_km:.0f}km, en route… ({progress:.0f}/{total:.0f}km, {left:.0f}km left)"
+ )
+ return f"前进 {step_km:.0f}km，路上…（{progress:.0f}/{total:.0f}km，剩余 {left:.0f}km）"
+
+
+def sys_depart_for_advance(
+ lang: Lang, node_name: str, step_km: float, progress: float, total: float, left: float
+) -> str:
+ if lang == "en":
+ return f"Depart for {node_name}, advance {step_km:.0f}km… ({progress:.0f}/{total:.0f}km, {left:.0f}km left)"
+ return f"出发去 {node_name}，前进 {step_km:.0f}km…（{progress:.0f}/{total:.0f}km，剩余 {left:.0f}km）"
+
+
+def sys_end_no_route(lang: Lang) -> str:
+ if lang == "en":
+ return "Reached the end / no route forward."
+ return "已到达终点/无可用前进路线。"
+
+
+def sys_at_junction_choose_leader(lang: Lang) -> str:
+ if lang == "en":
+ return "At junction: please choose the route (as leader)."
+ return "到达岔路：请团长选择路线。"
+
+
+def sys_at_junction_leader_chose(lang: Lang, leader_name: str, node_name: str) -> str:
+ if lang == "en":
+ return f"At junction: {leader_name} chose → {node_name}."
+ return f"到达岔路：{leader_name}做出选择 → {node_name}。"
+
+
+def sys_rainy_no_retreat_main(lang: Lang) -> str:
+ if lang == "en":
+ return "Rain: retreat not suitable; taking main route instead."
+ return "雨天不适合下撤，改走主线路线。"
+
+
+def sys_rainy_no_retreat_back(lang: Lang) -> str:
+ if lang == "en":
+ return "Rain: cannot retreat; going back one step."
+ return "雨天无法下撤，只能回撤上一步。"
+
+
+def sys_only_leader_camp(lang: Lang) -> str:
+ if lang == "en":
+ return "Only the leader can decide to camp."
+ return "只有队长可以决定扎营。"
+
+
+def sys_you_choose_rest(lang: Lang, ev: str) -> str:
+ if lang == "en":
+ return f"You chose to rest. {ev}"
+ return f"你选择休息。{ev}"
+
+
+def sys_decide_camp(lang: Lang, name: str, ev: str) -> str:
+ if lang == "en":
+ return f"{name} decided to camp. {ev} Stamina restored, but used more supplies."
+ return f"{name}决定扎营。{ev} 体力恢复，但消耗了较多物资。"
+
+
+def sys_unimplemented_action(lang: Lang, action: str) -> str:
+ if lang == "en":
+ return f"Unimplemented action: {action}"
+ return f"未实现动作：{action}"
+
+
+def sys_silence(lang: Lang) -> str:
+ if lang == "en":
+ return "(silence)"
+ return "（沉默）"
+
+
+# Event phrases (for Message content / _push_event); lang-aware lists
+def event_arrived_phrases(lang: Lang) -> list[str]:
+ if lang == "en":
+ return [
+ "You see the landmark ahead.",
+ "Steady steps, you've arrived.",
+ "The wind fades as you reach the node.",
+ ]
+ return ["你终于看见前方地标。", "脚步放轻，稳稳抵达。", "风声渐远，你到达了节点。"]
+
+
+def event_arrived_phrases_start(lang: Lang) -> list[str]:
+ if lang == "en":
+ return ["You reach a new landmark.", "The slope underfoot changes.", "The view opens up."]
+ return ["你来到新的地标。", "脚下坡度变化明显。", "视野忽然开阔。"]
+
+
+def event_rest_phrases(lang: Lang) -> list[str]:
+ if lang == "en":
+ return ["Rehydrate and rest.", "Adjust the pack.", "Slow your breath.", "Soak up the sun."]
+ return ["补水休整。", "调整背负。", "放慢呼吸。", "晒晒太阳。"]
+
+
+def event_camp_phrases(lang: Lang) -> list[str]:
+ if lang == "en":
+ return ["Light the stove.", "Pitch the tent.", "Assign watch.", "Check supplies."]
+ return ["升起炉火。", "搭好帐篷。", "分配守夜。", "检查余粮。"]
+
+
+def event_camp_label(lang: Lang, ev: str) -> str:
+ if lang == "en":
+ return f"Camp: {ev}"
+ return f"扎营：{ev}"
+
+
+def event_observe_phrases(lang: Lang) -> list[str]:
+ if lang == "en":
+ return [
+ "You observe clouds rolling in the distance.",
+ "You notice footprints and broken branches.",
+ "You note a steadier foothold.",
+ "You hear a faint echo in the wind.",
+ ]
+ return [
+ "你观察到远处云层翻涌。",
+ "你发现脚印与折断的灌木。",
+ "你记录了一个更稳的落脚点。",
+ "你听见风里隐约的回声。",
+ ]
+
+
+def event_observe_label(lang: Lang, obs: str) -> str:
+ if lang == "en":
+ return f"Observe: {obs}"
+ return f"观察：{obs}"
+
+
+# ----- Companion action labels (chat action messages: 调整背包, 观察地形, etc.) -----
+
+
+def companion_action_labels(lang: Lang) -> tuple[str, ...]:
+ """Labels for NPC action messages (e.g. after speech). Shown in chat as (label)."""
+ if lang == "en":
+ return ("Adjust pack", "Observe terrain", "Drink water", "Wipe sweat")
+ return ("调整背包", "观察地形", "喝水", "擦汗")
+
+
+def companion_action_message_content(lang: Lang, role_name: str, action_label: str) -> str:
+ """Format 'Name: action' for action message content (frontend may append (action) to previous msg)."""
+ if lang == "en":
+ return f"{role_name}: {action_label}"
+ return f"{role_name}：{action_label}"
+
+
+# ----- Memory / MemOS payload (add_memory, search, chat_complete) -----
+
+
+def mem_round_no_npc(lang: Lang) -> str:
+ if lang == "en":
+ return "No NPC speech this round."
+ return "本轮无NPC发言。"
+
+
+def mem_round_event_header(lang: Lang, location_name: str, weather: str, time_of_day: str) -> str:
+ if lang == "en":
+ return f"Round event: location {location_name}, weather {weather}, time {time_of_day}."
+ return f"本轮事件：位置 {location_name}，天气 {weather}，时间段 {time_of_day}。"
+
+
+def mem_player_action_label(lang: Lang) -> str:
+ if lang == "en":
+ return " Player action: "
+ return " 玩家动作："
+
+
+def mem_speaker_said(lang: Lang) -> str:
+ if lang == "en":
+ return " said: "
+ return "说："
+
+
+def mem_speaker_action(lang: Lang) -> str:
+ if lang == "en":
+ return " action: "
+ return "动作："
+
+
+def mem_round_no_dialogue(lang: Lang) -> str:
+ if lang == "en":
+ return "No dialogue or actions this round."
+ return "本轮暂无有效对话或动作。"
+
+
+def mem_leader_vote_player_chose(lang: Lang) -> str:
+ if lang == "en":
+ return "Player chose in UI."
+ return "玩家在界面中明确选择。"
+
+
+def mem_leader_vote_search_prefix(lang: Lang) -> str:
+ if lang == "en":
+ return "Choose tonight's leader."
+ return "选择今晚队长。"
+
+
+def mem_search_weather_time(lang: Lang, weather: str, time_of_day: str) -> str:
+ if lang == "en":
+ return f" weather:{weather} time:{time_of_day}"
+ return f" 天气:{weather} 时间:{time_of_day}"
+
+
+def format_user_action_for_memory(lang: Lang, user_action: str) -> str:
+ """Format user_action string for MemOS add/search/chat (lang-aware)."""
+ ua = str(user_action or "").strip()
+ if not ua:
+ if lang == "en":
+ return "No action"
+ return "无动作"
+
+ if ua.startswith("SAY:"):
+ text = ua.split(":", 1)[1] if ":" in ua else ""
+ text = text.strip()
+ if lang == "en":
+ return f"Player said: {text}" if text else "Player said"
+ return f"玩家发言：{text}" if text else "玩家发言"
+
+ if ua.startswith("MOVE_FORWARD:"):
+ if lang == "en":
+ if ":arrive:" in ua:
+ return "Party advanced and arrived at a new node"
+ if ":retreat_rain" in ua:
+ return "Retreat in rain failed; party returned to junction"
+ if ":start" in ua:
+ return "Party departed from current node, started new segment"
+ if ":step" in ua:
+ return "Party continued along the route"
+ if ":end" in ua:
+ return "Reached the end or no route forward"
+ return "Party moved forward"
+ if ":arrive:" in ua:
+ return "队伍前进并抵达新的路段节点"
+ if ":retreat_rain" in ua:
+ return "下撤途中遇雨，队伍被迫返回岔路"
+ if ":start" in ua:
+ return "队伍从当前节点出发，开始新的前进路段"
+ if ":step" in ua:
+ return "队伍在路线上继续前进"
+ if ":end" in ua:
+ return "已到达终点或无可前进路线"
+ return "队伍前进"
+
+ if ua == "REST":
+ return "Party chose to rest and recover" if lang == "en" else "队伍选择原地休息调整状态"
+ if ua == "CAMP":
+ return (
+ "Leader decided to camp overnight, restore stamina but use supplies"
+ if lang == "en"
+ else "队长决定扎营过夜，恢复体力但消耗物资"
+ )
+ if ua == "OBSERVE":
+ return (
+ "Party stopped to observe surroundings and conditions"
+ if lang == "en"
+ else "队伍停下观察周围环境与路况"
+ )
+
+ if ua.startswith("DECIDE:"):
+ kind = ua.split(":", 1)[1] if ":" in ua else ""
+ if lang == "en":
+ if kind == "night_vote":
+ return "Night vote to choose leader"
+ if kind == "camp_meeting":
+ return "Camp meeting to decide next route"
+ return f"Decision: {kind or 'unknown'}"
+ if kind == "night_vote":
+ return "进行夜间票选决定队长"
+ if kind == "camp_meeting":
+ return "讨论并决定下一步路线"
+ return f"做出决策：{kind or '未知'}"
+
+ return ua
+
+
+def mem_memory_time_map(lang: Lang) -> dict[str, str]:
+ if lang == "en":
+ return {
+ "morning": "morning",
+ "noon": "noon",
+ "afternoon": "afternoon",
+ "evening": "evening",
+ "night": "night",
+ }
+ return {
+ "morning": "早晨",
+ "noon": "中午",
+ "afternoon": "下午",
+ "evening": "傍晚",
+ "night": "夜晚",
+ }
+
+
+def mem_memory_weather_map(lang: Lang) -> dict[str, str]:
+ if lang == "en":
+ return {
+ "sunny": "sunny",
+ "cloudy": "cloudy",
+ "windy": "windy",
+ "rainy": "rainy",
+ "snowy": "snowy",
+ "foggy": "foggy",
+ }
+ return {
+ "sunny": "晴",
+ "cloudy": "多云",
+ "windy": "有风",
+ "rainy": "雨",
+ "snowy": "雪",
+ "foggy": "雾",
+ }
+
+
+def mem_memory_action_map(lang: Lang) -> dict[str, str]:
+ if lang == "en":
+ return {
+ "SAY": "say",
+ "MOVE_FORWARD": "forward",
+ "REST": "rest",
+ "CAMP": "camp",
+ "OBSERVE": "observe",
+ "DECIDE": "decide",
+ }
+ return {
+ "SAY": "发言",
+ "MOVE_FORWARD": "前进",
+ "REST": "休息",
+ "CAMP": "扎营",
+ "OBSERVE": "观察",
+ "DECIDE": "决策",
+ }
+
+
+def mem_memory_event_day_line(lang: Lang, day: int, tod: str, weather: str, node_name: str) -> str:
+ if lang == "en":
+ return f"Day {day}, {tod}, weather {weather}, location: {node_name}."
+ return f"第{day}天，{tod}，天气{weather}，位置：{node_name}。"
+
+
+def mem_memory_event_action_label(lang: Lang) -> str:
+ if lang == "en":
+ return "Action: "
+ return "动作："
+
+
+def mem_memory_event_recent_label(lang: Lang) -> str:
+ if lang == "en":
+ return "Recent events: "
+ return "最近事件："
+
+
+def mem_memory_event_dialogue_label(lang: Lang) -> str:
+ if lang == "en":
+ return "Key dialogue: "
+ return "关键对话："
+
+
+def mem_memory_query_action_label(lang: Lang) -> str:
+ if lang == "en":
+ return "action:"
+ return "动作:"
+
+
+def mem_memory_query_events_label(lang: Lang) -> str:
+ if lang == "en":
+ return "events:"
+ return "事件:"
+
+
+def mem_memory_query_persona_label(lang: Lang) -> str:
+ if lang == "en":
+ return "persona:"
+ return "人设:"
+
+
+def mem_teammate_label(lang: Lang) -> str:
+ if lang == "en":
+ return "teammate"
+ return "队员"
+
+
+def prompt_dialogue_prefix_narrator(lang: Lang) -> str:
+ if lang == "en":
+ return "[Narrator]"
+ return "[旁白]"
+
+
+def prompt_dialogue_prefix_you(lang: Lang) -> str:
+ if lang == "en":
+ return "[You]"
+ return "[你]"
+
+
+def prompt_dialogue_prefix_teammate(lang: Lang) -> str:
+ if lang == "en":
+ return "[Teammate]"
+ return "[队友]"
+
+
+def prompt_no_recent_dialogue(lang: Lang) -> str:
+ if lang == "en":
+ return "No recent dialogue."
+ return "（暂无近期对话）"
+
+
+def prompt_none(lang: Lang) -> str:
+ if lang == "en":
+ return "None"
+ return "（暂无）"
+
+
+def prompt_no_key_dialogue(lang: Lang) -> str:
+ if lang == "en":
+ return "No key dialogue."
+ return "（暂无关键对话）"
+
+
+def prompt_unknown_altitude(lang: Lang) -> str:
+ if lang == "en":
+ return "unknown altitude"
+ return "未知海拔"
+
+
+def prompt_terrain_hint_none(lang: Lang) -> str:
+ if lang == "en":
+ return "No special hint."
+ return "无特别提示"
+
+
+def prompt_location_line(lang: Lang, location_name: str, altitude: str, terrain_hint: str) -> str:
+ if lang == "en":
+ return f"You are at: {location_name} ({altitude}), terrain hint: {terrain_hint}.\n"
+ return f"你们现在位于：{location_name}（{altitude}），地形提示：{terrain_hint}。\n"
+
+
+def prompt_leader_line(lang: Lang, leader_name: str) -> str:
+ if lang == "en":
+ return f"Current leader: {leader_name}.\n"
+ return f"当前队长是：{leader_name}。\n"
+
+
+def prompt_player_role_line(lang: Lang, active_name: str) -> str:
+ if lang == "en":
+ return f"The player is currently playing: {active_name}.\n"
+ return f"玩家当前扮演的角色是：{active_name}。\n"
+
+
+def prompt_role_focus_line(lang: Lang, role_name: str) -> str:
+ if lang == "en":
+ return f"The story focuses on {role_name}; {role_name} should react and speak.\n"
+ return f"剧情围绕{role_name}展开，{role_name}需要根据当前情况做出反应和发言。\n"
+
+
+def prompt_route_line(lang: Lang, mainline_str: str) -> str:
+ if lang == "en":
+ return f"Route: {mainline_str}.\n"
+ return f"整条路线示意：{mainline_str}。\n"
+
+
+def prompt_bailout_suffix(lang: Lang, bailout_label: str) -> str:
+ if lang == "en":
+ return f"(evac to {bailout_label})"
+ return f"(可下撤至{bailout_label})"
diff --git a/demos/AOTAI_Hike/backend/aotai_hike/utils/share_image.py b/demos/AOTAI_Hike/backend/aotai_hike/utils/share_image.py
new file mode 100644
index 000000000..860626e10
--- /dev/null
+++ b/demos/AOTAI_Hike/backend/aotai_hike/utils/share_image.py
@@ -0,0 +1,813 @@
+"""
+Independent module for generating share images when the game ends (success or failure).
+Generates pixel-style images showing character config, route, journey, distance, outcome, and current location.
+"""
+
+from __future__ import annotations
+
+import io
+
+from dataclasses import dataclass
+from pathlib import Path
+from typing import TYPE_CHECKING, Any
+
+from aotai_hike.theme import (
+ _lang,
+ _theme,
+ share_days_unit,
+ share_epithet_first_timer,
+ share_epithet_junction,
+ share_epithet_leader,
+ share_epithet_night_walker,
+ share_epithet_retreat_fail,
+ share_epithet_retreat_snow,
+ share_epithet_steadfast,
+ share_epithet_storm_walker,
+ share_epithet_veteran,
+ share_failure_all_stamina,
+ share_failure_challenge_failed,
+ share_final_weather_time,
+ share_footer,
+ share_journey_summary_label,
+ share_key_memories_label,
+ share_lore_first_timer,
+ share_lore_junction,
+ share_lore_leader,
+ share_lore_night_walker,
+ share_lore_retreat_fail,
+ share_lore_retreat_snow,
+ share_lore_steadfast,
+ share_lore_storm_walker,
+ share_lore_veteran,
+ share_outcome_fail,
+ share_outcome_success_cross,
+ share_outcome_success_retreat,
+ share_result_finished_fail,
+ share_result_finished_success,
+ share_result_running,
+ share_role_leader,
+ share_role_line,
+ share_route_nodes_label,
+ share_stat_days,
+ share_stat_distance,
+ share_stat_location,
+ share_stat_sep,
+ share_status_running,
+ share_summary_nodes_events,
+ share_team_members_label,
+ share_team_stat_mood,
+ share_team_stat_risk,
+ share_team_stat_stamina,
+ share_title,
+)
+from aotai_hike.world.map_data import get_graph, get_node_display_name
+from PIL import Image, ImageDraw, ImageFilter, ImageFont
+
+
+if TYPE_CHECKING:
+ from aotai_hike.schemas import Role, WorldState, WorldStats
+
+
+def _node_exists(node_id: str, theme: str | None = None) -> bool:
+ """Check if a node exists in the graph."""
+ try:
+ get_graph(theme).get_node(node_id)
+ return True
+ except Exception:
+ return False
+
+
+@dataclass
+class GameOutcome:
+ """Game outcome information."""
+
+ is_success: bool
+ outcome_type: str # "cross_success" or "retreat_success" or "failure" or "in_progress"
+ total_distance_km: float
+ current_node_id: str
+ current_node_name: str
+ days_spent: int
+ roles: list[Role]
+ visited_nodes: list[str]
+ journey_summary: dict[str, Any]
+ is_finished: bool = False # Whether the game has ended
+ failure_reason: str | None = None # Detailed failure reason if game failed
+
+
+class ShareImageGenerator:
+ """Generate pixel-style share images for game completion."""
+
+ # Pixel art style constants
+ # Keep share card at strict 3:4 (WIDTH : HEIGHT) to match frontend modal
+ # and the 3:4 background asset in `frontend/assets/share_background.png`.
+ WIDTH = 1024
+ HEIGHT = 1365
+ PIXEL_SIZE = 4 # Scale factor for pixel art effect
+ BG_COLOR = (240, 240, 230)
+ TEXT_COLOR = (40, 40, 40)
+ ACCENT_COLOR = (100, 150, 200)
+ SUCCESS_COLOR = (80, 180, 100)
+ FAILURE_COLOR = (200, 100, 100)
+
+ def __init__(self):
+ """Initialize the generator."""
+ self._font_cache: dict[str, ImageFont.FreeTypeFont | ImageFont.ImageFont] = {}
+
+ @staticmethod
+ def _short_text(s: str, limit: int = 10) -> str:
+ s = (s or "").strip()
+ if len(s) <= limit:
+ return s
+ return s[:limit] + "…"
+
+ @staticmethod
+ def _pick_epithet_and_lore(
+ stats: WorldStats, outcome: GameOutcome, world_state: WorldState
+ ) -> tuple[str, str]:
+ """Rule-based epithet + lore (localized by session language)."""
+ lang = _lang(world_state)
+ d = float(getattr(stats, "total_distance_km", 0.0) or 0.0)
+ decisions = int(getattr(stats, "decision_times", 0) or 0)
+ leader = int(getattr(stats, "leader_times", 0) or 0)
+ bad_weather = int(getattr(stats, "bad_weather_steps", 0) or 0)
+ weather = str(world_state.weather)
+
+ # Failure path first
+ if outcome.is_finished and not outcome.is_success:
+ if bad_weather > 0:
+ return (share_epithet_retreat_snow(lang), share_lore_retreat_snow(lang))
+ return (share_epithet_retreat_fail(lang), share_lore_retreat_fail(lang))
+
+ # Base by distance
+ if d >= 40:
+ epithet, lore = share_epithet_veteran(lang), share_lore_veteran(lang)
+ elif d >= 20:
+ epithet, lore = share_epithet_steadfast(lang), share_lore_steadfast(lang)
+ else:
+ epithet, lore = share_epithet_first_timer(lang), share_lore_first_timer(lang)
+
+ # Strategy / leadership
+ if decisions >= 8 and leader >= 2:
+ epithet, lore = share_epithet_leader(lang), share_lore_leader(lang)
+ elif decisions >= 5:
+ epithet, lore = share_epithet_junction(lang), share_lore_junction(lang)
+
+ # Harsh weather
+ if bad_weather >= 5:
+ if weather in {"snowy", "foggy"}:
+ epithet, lore = share_epithet_night_walker(lang), share_lore_night_walker(lang)
+ elif weather in {"rainy", "windy"}:
+ epithet, lore = share_epithet_storm_walker(lang), share_lore_storm_walker(lang)
+
+ return epithet, lore
+
+ def _get_font(self, size: int) -> ImageFont.FreeTypeFont | ImageFont.ImageFont:
+ """Get or create a font of the specified size that supports Chinese characters."""
+ if size not in self._font_cache:
+ # Try common Chinese fonts on different platforms
+ font_paths = [
+ # macOS
+ "/System/Library/Fonts/PingFang.ttc",
+ "/System/Library/Fonts/STHeiti Light.ttc",
+ "/System/Library/Fonts/STHeiti Medium.ttc",
+ "/System/Library/Fonts/Supplemental/Songti.ttc",
+ # Linux
+ "/usr/share/fonts/truetype/wqy/wqy-microhei.ttc",
+ "/usr/share/fonts/truetype/wqy/wqy-zenhei.ttc",
+ "/usr/share/fonts/truetype/arphic/uming.ttc",
+ # Windows (common paths)
+ "C:/Windows/Fonts/msyh.ttc", # Microsoft YaHei
+ "C:/Windows/Fonts/simhei.ttf", # SimHei
+ "C:/Windows/Fonts/simsun.ttc", # SimSun
+ ]
+
+ font_loaded = False
+ for font_path in font_paths:
+ try:
+ # For .ttc files, we need to specify index (0 for first font)
+ if font_path.endswith(".ttc"):
+ self._font_cache[size] = ImageFont.truetype(font_path, size, index=0)
+ else:
+ self._font_cache[size] = ImageFont.truetype(font_path, size)
+ font_loaded = True
+ break
+ except Exception:
+ continue
+
+ if not font_loaded:
+ # Last resort: try to use default font (may not support Chinese)
+ try:
+ self._font_cache[size] = ImageFont.load_default()
+ except Exception:
+ # If all else fails, create a basic font
+ self._font_cache[size] = ImageFont.load_default()
+ return self._font_cache[size]
+
+ def generate(
+ self, world_state: WorldState, outcome: GameOutcome
+ ) -> tuple[bytes, dict[str, Any]]:
+ """
+ Generate a share image and return both the image bytes and structured JSON data.
+
+ Returns:
+ tuple[bytes, dict]: (image_bytes, structured_json_data)
+ """
+ # Create base image: try to use share_background.png, fallback to solid color
+ img = None
+ try:
+ # Backend dir: demos/AOTAI_Hike/backend/aotai_hike/utils/share_image.py
+ # Frontend assets: demos/AOTAI_Hike/frontend/assets/share_background.png
+ root = Path(__file__).resolve().parents[3]
+ bg_path = root / "frontend" / "assets" / "share_background.png"
+ if bg_path.is_file():
+ bg = Image.open(bg_path).convert("RGB")
+ # Use NEAREST to keep a clear pixel-art look (avoid smoothing)
+ bg = bg.resize((self.WIDTH, self.HEIGHT), Image.NEAREST)
+ img = bg
+ except Exception:
+ img = None
+
+ if img is None:
+ img = Image.new("RGB", (self.WIDTH, self.HEIGHT), self.BG_COLOR)
+
+ # Convert to RGBA and add a dark, textured panel behind text
+ img = img.convert("RGBA")
+
+ # === Dark panel with subtle vignette & texture =======================
+ overlay = Image.new("RGBA", img.size, (0, 0, 0, 0))
+
+ # Panel margins
+ panel_margin_x = 72
+ panel_margin_top = 96
+ panel_margin_bottom = 132
+ panel_rect = (
+ panel_margin_x,
+ panel_margin_top,
+ self.WIDTH - panel_margin_x,
+ self.HEIGHT - panel_margin_bottom,
+ )
+
+ base_panel_color_top = (18, 24, 40, 220)
+ base_panel_color_bottom = (10, 12, 22, 235)
+ panel = Image.new("RGBA", img.size, (0, 0, 0, 0))
+ panel_draw = ImageDraw.Draw(panel)
+ panel_draw.rectangle(panel_rect, fill=base_panel_color_bottom)
+
+ grad_steps = 32
+ top, bottom = panel_rect[1], panel_rect[3]
+ height_panel = bottom - top
+ for i in range(grad_steps):
+ t = i / max(1, grad_steps - 1)
+ alpha = int(220 + (235 - 220) * t)
+ r = int(
+ base_panel_color_top[0] + (base_panel_color_bottom[0] - base_panel_color_top[0]) * t
+ )
+ g = int(
+ base_panel_color_top[1] + (base_panel_color_bottom[1] - base_panel_color_top[1]) * t
+ )
+ b = int(
+ base_panel_color_top[2] + (base_panel_color_bottom[2] - base_panel_color_top[2]) * t
+ )
+ y = top + int(height_panel * t)
+ panel_draw.line([(panel_rect[0], y), (panel_rect[2], y)], fill=(r, g, b, alpha))
+
+ border_color = (220, 180, 90, 120)
+ for i in range(2):
+ inset = i
+ panel_draw.rectangle(
+ (
+ panel_rect[0] + inset,
+ panel_rect[1] + inset,
+ panel_rect[2] - inset,
+ panel_rect[3] - inset,
+ ),
+ outline=border_color,
+ )
+
+ vignette = Image.new("L", img.size, 0)
+ v_draw = ImageDraw.Draw(vignette)
+ v_draw.ellipse(
+ (
+ panel_rect[0] - 80,
+ panel_rect[1] - 60,
+ panel_rect[2] + 80,
+ panel_rect[3] + 120,
+ ),
+ fill=255,
+ )
+ vignette = vignette.filter(ImageFilter.GaussianBlur(60))
+ panel.putalpha(vignette)
+
+ overlay = Image.alpha_composite(overlay, panel)
+ img = Image.alpha_composite(img, overlay)
+
+ draw = ImageDraw.Draw(img)
+
+ # Vertical layout metrics tuned for the new panel
+ y_offset = panel_rect[1] + 36
+ line_height = 34
+ section_spacing = 22
+
+ # Precompute epithet
+ epithet, lore = self._pick_epithet_and_lore(world_state.stats, outcome, world_state)
+
+ lang = _lang(world_state)
+ theme = _theme(world_state)
+ graph = get_graph(theme)
+ title_font = self._get_font(50)
+ title_text = share_title(theme, lang)
+ draw.text(
+ (self.WIDTH // 2, y_offset),
+ title_text,
+ fill=(234, 242, 255),
+ anchor="mt",
+ font=title_font,
+ stroke_width=2,
+ stroke_fill=(20, 24, 40),
+ )
+ y_offset += 68
+
+ # Outcome banner (only show if game is finished)
+ if outcome.is_finished:
+ if outcome.is_success:
+ if outcome.outcome_type == "cross_success":
+ outcome_text = share_outcome_success_cross(lang, outcome.current_node_name)
+ outcome_color = self.SUCCESS_COLOR
+ else: # retreat_success
+ outcome_text = share_outcome_success_retreat(lang, outcome.current_node_name)
+ outcome_color = self.SUCCESS_COLOR
+ else:
+ outcome_text = share_outcome_fail(lang, outcome.failure_reason)
+ outcome_color = self.FAILURE_COLOR
+
+ outcome_font = self._get_font(32)
+ draw.text(
+ (self.WIDTH // 2, y_offset),
+ outcome_text,
+ fill=outcome_color,
+ anchor="mt",
+ font=outcome_font,
+ )
+ y_offset += 50
+ else:
+ # Game in progress - show status
+ status_font = self._get_font(32)
+ status_text = share_status_running(lang)
+ draw.text(
+ (self.WIDTH // 2, y_offset),
+ status_text,
+ fill=self.ACCENT_COLOR,
+ anchor="mt",
+ font=status_font,
+ )
+ y_offset += 50
+
+ # Epithet + lore block
+ epithet_font = self._get_font(32)
+ lore_font = self._get_font(22)
+
+ draw.text(
+ (self.WIDTH // 2, y_offset + 10),
+ epithet,
+ fill=(236, 228, 196),
+ anchor="mt",
+ font=epithet_font,
+ stroke_width=2,
+ stroke_fill=(20, 18, 12),
+ )
+ y_offset += 52
+
+ draw.text(
+ (self.WIDTH // 2, y_offset),
+ lore,
+ fill=(210, 208, 222),
+ anchor="mt",
+ font=lore_font,
+ )
+ y_offset += 46
+
+ stats_font = self._get_font(28)
+ left_x = panel_rect[0] + 36
+ sep = share_stat_sep(lang)
+ days_unit = share_days_unit(lang)
+
+ stats = [
+ f"{share_stat_distance(lang)}{sep}{outcome.total_distance_km:.1f} km",
+ f"{share_stat_days(lang)}{sep}{outcome.days_spent} {days_unit}",
+ f"{share_stat_location(lang)}{sep}{outcome.current_node_name}",
+ ]
+ for stat in stats:
+ draw.text(
+ (left_x, y_offset),
+ stat,
+ fill=(225, 235, 248),
+ font=stats_font,
+ stroke_width=1,
+ stroke_fill=(10, 12, 20),
+ )
+ y_offset += line_height
+ y_offset += section_spacing
+
+ # Separator line
+ sep_y = y_offset - int(section_spacing * 0.4)
+ draw.line(
+ (panel_rect[0] + 20, sep_y, panel_rect[2] - 20, sep_y),
+ fill=(210, 170, 90, 180),
+ width=1,
+ )
+
+ # Roles section
+ role_font = self._get_font(28)
+ draw.text(
+ (left_x, y_offset),
+ share_team_members_label(lang),
+ fill=self.ACCENT_COLOR,
+ font=role_font,
+ )
+ y_offset += line_height + 5
+ for role in outcome.roles:
+ role_text = share_role_line(lang, role.name, role.attrs.stamina, role.attrs.mood)
+ draw.text(
+ (left_x + 8, y_offset),
+ role_text,
+ fill=(225, 235, 248),
+ font=role_font,
+ )
+ y_offset += line_height - 5
+ y_offset += section_spacing
+
+ # Route section
+ route_font = self._get_font(28)
+ draw.text(
+ (left_x, y_offset),
+ share_route_nodes_label(lang),
+ fill=self.ACCENT_COLOR,
+ font=route_font,
+ )
+ y_offset += line_height + 5
+
+ # Show visited nodes (limit to fit on image, localized)
+ visited_display = outcome.visited_nodes[:15] # Limit display
+ node_names = []
+ for nid in visited_display:
+ node_names.append(get_node_display_name(theme, lang, nid))
+ route_text = " → ".join(node_names)
+ if len(outcome.visited_nodes) > 15:
+ route_text += " ..."
+
+ # Wrap long route text
+ max_width = self.WIDTH - 120
+ words = route_text.split(" → ")
+ lines = []
+ current_line = ""
+ for word in words:
+ test_line = current_line + (" → " if current_line else "") + word
+ bbox = draw.textbbox((0, 0), test_line, font=route_font)
+ if bbox[2] - bbox[0] <= max_width:
+ current_line = test_line
+ else:
+ if current_line:
+ lines.append(current_line)
+ current_line = word
+ if current_line:
+ lines.append(current_line)
+
+ for line in lines[:5]: # Limit to 5 lines
+ draw.text(
+ (left_x + 8, y_offset),
+ line,
+ fill=(215, 225, 240),
+ font=route_font,
+ )
+ y_offset += line_height - 5
+ y_offset += section_spacing
+
+ # Journey summary as human-readable sentences (no raw JSON)
+ summary_font = self._get_font(28)
+ draw.text(
+ (left_x, y_offset),
+ share_journey_summary_label(lang),
+ fill=self.ACCENT_COLOR,
+ font=summary_font,
+ )
+ y_offset += line_height + 2
+
+ total_nodes = outcome.journey_summary.get("total_nodes_visited", 0)
+ key_events = outcome.journey_summary.get("key_events") or []
+ final_weather = outcome.journey_summary.get("final_weather", "")
+ final_time = outcome.journey_summary.get("final_time", "")
+
+ summary_lines = []
+ summary_lines.append(share_summary_nodes_events(lang, total_nodes, len(key_events)))
+ if final_weather or final_time:
+ summary_lines.append(share_final_weather_time(lang, final_weather, final_time))
+
+ for line in summary_lines:
+ draw.text(
+ (left_x + 8, y_offset),
+ line,
+ fill=(200, 210, 230),
+ font=summary_font,
+ )
+ y_offset += line_height - 6
+
+ memory_font = self._get_font(24)
+ highlights = list(getattr(world_state.stats, "memory_highlights", []) or [])
+ if highlights:
+ y_offset += section_spacing
+ draw.text(
+ (left_x, y_offset),
+ share_key_memories_label(lang),
+ fill=self.ACCENT_COLOR,
+ font=memory_font,
+ )
+ y_offset += line_height
+ for h in highlights:
+ draw.text(
+ (left_x + 8, y_offset),
+ f"· {self._short_text(h, 24)}",
+ fill=(210, 220, 235),
+ font=memory_font,
+ )
+ y_offset += line_height - 4
+
+ # Footer
+ footer_font = self._get_font(28)
+ footer_text = share_footer(lang)
+ draw.text(
+ (self.WIDTH // 2, self.HEIGHT - 30),
+ footer_text,
+ fill=(150, 150, 150),
+ anchor="mt",
+ font=footer_font,
+ )
+
+ # Convert to bytes
+ img_bytes = io.BytesIO()
+ img.save(img_bytes, format="PNG")
+ img_bytes.seek(0)
+
+ # Structured JSON data (v2-style, compatible with original info)
+ result_text = (
+ share_result_finished_success(lang)
+ if outcome.is_finished and outcome.is_success
+ else (
+ share_result_finished_fail(lang)
+ if outcome.is_finished
+ else share_result_running(lang)
+ )
+ )
+ json_data = {
+ "summary": {
+ "title": share_title(theme, lang),
+ "status": "finished"
+ if outcome.is_finished and outcome.is_success
+ else ("failed" if outcome.is_finished else "running"),
+ "result_text": result_text,
+ "fail_reason": outcome.failure_reason or "",
+ "epithet": epithet,
+ "lore": lore,
+ },
+ "party": [
+ {
+ "role_id": r.role_id,
+ "name": r.name,
+ "persona": r.persona,
+ "persona_short": self._short_text(r.persona, 10),
+ "role_tag": (
+ share_role_leader(lang) if r.role_id == world_state.leader_role_id else ""
+ ),
+ "is_player": (r.role_id == world_state.active_role_id),
+ "attrs": {
+ "stamina": r.attrs.stamina,
+ "mood": r.attrs.mood,
+ "experience": r.attrs.experience,
+ "risk_tolerance": r.attrs.risk_tolerance,
+ "supplies": r.attrs.supplies,
+ },
+ }
+ for r in outcome.roles
+ ],
+ "team_stats": [
+ {
+ "label": share_team_stat_stamina(lang),
+ "value": round(
+ sum(r.attrs.stamina for r in outcome.roles) / max(1, len(outcome.roles)), 1
+ ),
+ "max": 100,
+ },
+ {
+ "label": share_team_stat_mood(lang),
+ "value": round(
+ sum(r.attrs.mood for r in outcome.roles) / max(1, len(outcome.roles)), 1
+ ),
+ "max": 100,
+ },
+ {
+ "label": share_team_stat_risk(lang),
+ "value": round(
+ sum(r.attrs.risk_tolerance for r in outcome.roles)
+ / max(1, len(outcome.roles)),
+ 1,
+ ),
+ "max": 100,
+ },
+ ],
+ "map": {
+ "distance_km": outcome.total_distance_km,
+ "current_node": outcome.current_node_name,
+ "key_nodes": [
+ get_node_display_name(theme, lang, nid)
+ for nid in outcome.visited_nodes
+ if _node_exists(nid, theme)
+ and graph.get_node(nid).kind in {"camp", "junction", "exit", "peak", "lake"}
+ ],
+ },
+ "env": {
+ "weather_main": world_state.weather,
+ "road_tags": list(
+ {
+ get_node_display_name(theme, lang, nid)
+ for nid in outcome.visited_nodes
+ if _node_exists(nid, theme)
+ }
+ ),
+ },
+ "memory": {
+ "tags": [],
+ "highlight": list(getattr(world_state.stats, "memory_highlights", []) or []),
+ "count_new": len(getattr(world_state.stats, "memory_highlights", []) or []),
+ "count_forgot": 0,
+ },
+ "actions": {
+ "download_enabled": True,
+ "close_enabled": True,
+ },
+ "watermark": share_footer(lang),
+ "outcome": {
+ "is_success": outcome.is_success,
+ "outcome_type": outcome.outcome_type,
+ "total_distance_km": outcome.total_distance_km,
+ "days_spent": outcome.days_spent,
+ "is_finished": outcome.is_finished,
+ "failure_reason": outcome.failure_reason,
+ },
+ "current_location": {
+ "node_id": outcome.current_node_id,
+ "node_name": outcome.current_node_name,
+ },
+ "route": {
+ "visited_node_ids": outcome.visited_nodes,
+ "visited_node_names": [
+ get_node_display_name(theme, lang, nid)
+ for nid in outcome.visited_nodes
+ if _node_exists(nid, theme)
+ ],
+ },
+ "journey_summary": outcome.journey_summary,
+ }
+
+ return img_bytes.getvalue(), json_data
+
+
+def calculate_current_state(world_state: WorldState) -> GameOutcome:
+ """
+ Calculate current game state for sharing (works for both finished and in-progress games).
+
+ Args:
+ world_state: Current world state
+
+ Returns:
+ GameOutcome with current state information (node names and failure reasons localized).
+ """
+ theme = _theme(world_state)
+ lang = _lang(world_state)
+ graph = get_graph(theme)
+ current_node_id = world_state.current_node_id
+
+ # Check if reached end nodes
+ is_end = current_node_id in ("end_exit", "bailout_2800", "bailout_ridge")
+
+ # Check for failure conditions
+ all_stamina_zero = (
+ all(role.attrs.stamina <= 0 for role in world_state.roles) if world_state.roles else False
+ )
+
+ # Determine outcome
+ if is_end:
+ is_finished = True
+ if current_node_id == "end_exit":
+ outcome_type = "cross_success"
+ is_success = True
+ failure_reason = None
+ elif current_node_id in ("bailout_2800", "bailout_ridge"):
+ outcome_type = "retreat_success"
+ is_success = True
+ failure_reason = None
+ else:
+ outcome_type = "failure"
+ is_success = False
+ failure_reason = share_failure_challenge_failed(lang)
+ elif all_stamina_zero:
+ is_finished = True
+ outcome_type = "failure"
+ is_success = False
+ failure_reason = share_failure_all_stamina(lang)
+ else:
+ is_finished = False
+ outcome_type = "in_progress"
+ is_success = False
+ failure_reason = None
+
+ # Calculate total distance
+ total_distance = 0.0
+ visited = world_state.visited_node_ids
+ for i in range(len(visited) - 1):
+ from_id = visited[i]
+ to_id = visited[i + 1]
+ edges = graph.outgoing(from_id)
+ for edge in edges:
+ if edge.to_node_id == to_id:
+ total_distance += getattr(edge, "distance_km", 1.0)
+ break
+
+ # Add current transit progress if in transit
+ if world_state.in_transit_progress_km:
+ total_distance += world_state.in_transit_progress_km
+
+ # Get current node name (localized)
+ current_node_name = get_node_display_name(theme, lang, current_node_id)
+
+ # Build journey summary
+ journey_summary = {
+ "total_nodes_visited": len(visited),
+ "key_events": world_state.recent_events[-10:], # Last 10 events
+ "final_weather": world_state.weather,
+ "final_time": world_state.time_of_day,
+ "leader_history": [], # Could be expanded to track leader changes
+ }
+
+ return GameOutcome(
+ is_success=is_success,
+ outcome_type=outcome_type,
+ total_distance_km=total_distance,
+ current_node_id=current_node_id,
+ current_node_name=current_node_name,
+ days_spent=world_state.day,
+ roles=world_state.roles,
+ visited_nodes=visited,
+ journey_summary=journey_summary,
+ is_finished=is_finished,
+ failure_reason=failure_reason,
+ )
+
+
+def calculate_outcome(world_state: WorldState) -> GameOutcome | None:
+ """
+ Calculate game outcome based on current world state.
+ Returns None if game is not finished yet.
+
+ Args:
+ world_state: Current world state
+
+ Returns:
+ GameOutcome if game is finished, None otherwise
+ """
+ outcome = calculate_current_state(world_state)
+ if not outcome.is_finished:
+ return None
+ return outcome
+
+
+def generate_share_image(world_state: WorldState) -> tuple[bytes, dict[str, Any]] | None:
+ """
+ Main entry point: generate share image if game is finished.
+
+ Args:
+ world_state: Current world state
+
+ Returns:
+ tuple[bytes, dict] if game finished: (image_bytes, json_data)
+ None if game not finished
+ """
+ outcome = calculate_outcome(world_state)
+ if outcome is None:
+ return None
+
+ generator = ShareImageGenerator()
+ return generator.generate(world_state, outcome)
+
+
+def generate_current_share_image(world_state: WorldState) -> tuple[bytes, dict[str, Any]]:
+ """
+ Generate share image for current game state (works for both finished and in-progress games).
+
+ Args:
+ world_state: Current world state
+
+ Returns:
+ tuple[bytes, dict]: (image_bytes, json_data)
+ """
+ outcome = calculate_current_state(world_state)
+ generator = ShareImageGenerator()
+ return generator.generate(world_state, outcome)
diff --git a/demos/AOTAI_Hike/backend/aotai_hike/world/kilimanjaro_map_data.py b/demos/AOTAI_Hike/backend/aotai_hike/world/kilimanjaro_map_data.py
new file mode 100644
index 000000000..ca49d6c23
--- /dev/null
+++ b/demos/AOTAI_Hike/backend/aotai_hike/world/kilimanjaro_map_data.py
@@ -0,0 +1,209 @@
+"""
+Kilimanjaro trek map (Conquer Kilimanjaro theme).
+Same node_id / edge structure as AoTai for game logic compatibility;
+names and labels are Kilimanjaro-themed.
+"""
+
+from __future__ import annotations
+
+from dataclasses import dataclass
+from typing import ClassVar
+
+from aotai_hike.schemas import AoTaiEdge, AoTaiNode
+
+
+# Same node_ids as AoTai (start, slope_forest, camp_2800, ...) for phase/terminal logic.
+# Names and hints are Kilimanjaro route themed (Marangu / Machame style).
+KILIMANJARO_NODES: dict[str, AoTaiNode] = {
+ "start": AoTaiNode(
+ node_id="start",
+ name="Marangu Gate",
+ altitude_m=1879,
+ scene_id="trailhead",
+ hint="Gear check, team briefing.",
+ x=5,
+ y=55,
+ kind="start",
+ ),
+ "slope_forest": AoTaiNode(
+ node_id="slope_forest",
+ name="Forest Trail",
+ altitude_m=2700,
+ scene_id="forest",
+ hint="Dense forest, humidity rises.",
+ x=18,
+ y=55,
+ kind="main",
+ ),
+ "camp_2800": AoTaiNode(
+ node_id="camp_2800",
+ name="Mandara Hut",
+ altitude_m=2720,
+ scene_id="camp",
+ hint="First camp, rest or evacuate from here.",
+ x=30,
+ y=45,
+ kind="camp",
+ ),
+ "stone_sea": AoTaiNode(
+ node_id="stone_sea",
+ name="Moorland Zone",
+ altitude_m=3200,
+ scene_id="stone",
+ hint="Rocky terrain, pace yourself.",
+ x=42,
+ y=55,
+ kind="main",
+ ),
+ "ridge_wind": AoTaiNode(
+ node_id="ridge_wind",
+ name="Horombo / Saddle",
+ altitude_m=3720,
+ scene_id="ridge",
+ hint="Wind exposure, stay together.",
+ x=55,
+ y=45,
+ kind="junction",
+ ),
+ "da_ye_hai": AoTaiNode(
+ node_id="da_ye_hai",
+ name="Kibo Hut",
+ altitude_m=4703,
+ scene_id="lake",
+ hint="Summit push base, weather can change fast.",
+ x=66,
+ y=55,
+ kind="lake",
+ ),
+ "ba_xian_tai": AoTaiNode(
+ node_id="ba_xian_tai",
+ name="Uhuru Peak",
+ altitude_m=5895,
+ scene_id="summit",
+ hint="Summit. Proceed with care.",
+ x=82,
+ y=45,
+ kind="peak",
+ ),
+ "end_exit": AoTaiNode(
+ node_id="end_exit",
+ name="Descent Finish",
+ altitude_m=1879,
+ scene_id="end",
+ hint="Trek complete, memories saved.",
+ x=95,
+ y=55,
+ kind="end",
+ ),
+ "bailout_2800": AoTaiNode(
+ node_id="bailout_2800",
+ name="Mandara Evacuation",
+ altitude_m=2720,
+ scene_id="end",
+ hint="Evacuation from Mandara Hut (demo).",
+ x=30,
+ y=70,
+ kind="exit",
+ ),
+ "bailout_ridge": AoTaiNode(
+ node_id="bailout_ridge",
+ name="Horombo Evacuation",
+ altitude_m=3720,
+ scene_id="end",
+ hint="Emergency evacuation from saddle (demo).",
+ x=55,
+ y=70,
+ kind="exit",
+ ),
+}
+
+KILIMANJARO_EDGES: list[AoTaiEdge] = [
+ AoTaiEdge(
+ from_node_id="start",
+ to_node_id="slope_forest",
+ kind="main",
+ label="Enter forest",
+ distance_km=4.0,
+ ),
+ AoTaiEdge(
+ from_node_id="slope_forest",
+ to_node_id="camp_2800",
+ kind="main",
+ label="To Mandara",
+ distance_km=6.0,
+ ),
+ AoTaiEdge(
+ from_node_id="camp_2800",
+ to_node_id="stone_sea",
+ kind="main",
+ label="Continue main route",
+ distance_km=4.0,
+ ),
+ AoTaiEdge(
+ from_node_id="stone_sea",
+ to_node_id="ridge_wind",
+ kind="main",
+ label="To saddle",
+ distance_km=6.0,
+ ),
+ AoTaiEdge(
+ from_node_id="ridge_wind",
+ to_node_id="da_ye_hai",
+ kind="main",
+ label="To Kibo Hut",
+ distance_km=3.0,
+ ),
+ AoTaiEdge(
+ from_node_id="da_ye_hai",
+ to_node_id="ba_xian_tai",
+ kind="main",
+ label="Summit push",
+ distance_km=8.0,
+ ),
+ AoTaiEdge(
+ from_node_id="ba_xian_tai",
+ to_node_id="end_exit",
+ kind="main",
+ label="Descent",
+ distance_km=10.0,
+ ),
+ AoTaiEdge(
+ from_node_id="camp_2800",
+ to_node_id="bailout_2800",
+ kind="exit",
+ label="Evacuate",
+ distance_km=7.0,
+ ),
+ AoTaiEdge(
+ from_node_id="ridge_wind",
+ to_node_id="bailout_ridge",
+ kind="exit",
+ label="Emergency evacuate",
+ distance_km=9.0,
+ ),
+]
+
+
+@dataclass(frozen=True)
+class KilimanjaroGraph:
+ start_node_id: ClassVar[str] = "start"
+
+ @staticmethod
+ def get_node(node_id: str) -> AoTaiNode:
+ return KILIMANJARO_NODES[node_id]
+
+ @staticmethod
+ def nodes() -> list[AoTaiNode]:
+ return list(KILIMANJARO_NODES.values())
+
+ @staticmethod
+ def edges() -> list[AoTaiEdge]:
+ return list(KILIMANJARO_EDGES)
+
+ @staticmethod
+ def outgoing(node_id: str) -> list[AoTaiEdge]:
+ return [e for e in KILIMANJARO_EDGES if e.from_node_id == node_id]
+
+ @staticmethod
+ def next_node_ids(node_id: str) -> list[str]:
+ return [e.to_node_id for e in KilimanjaroGraph.outgoing(node_id)]
diff --git a/demos/AOTAI_Hike/backend/aotai_hike/world/map_data.py b/demos/AOTAI_Hike/backend/aotai_hike/world/map_data.py
new file mode 100644
index 000000000..088335ff3
--- /dev/null
+++ b/demos/AOTAI_Hike/backend/aotai_hike/world/map_data.py
@@ -0,0 +1,258 @@
+from __future__ import annotations
+
+from dataclasses import dataclass
+from typing import ClassVar
+
+from aotai_hike.schemas import AoTaiEdge, AoTaiNode
+
+
+# NOTE: This is a demo-scale AoTai graph with key landmarks + branches.
+# It is not a precise topo map, but it encodes the core "mainline + bailout" structure.
+
+
+NODES: dict[str, AoTaiNode] = {
+ # Start
+ "start": AoTaiNode(
+ node_id="start",
+ name="塘口起点",
+ altitude_m=2350,
+ scene_id="trailhead",
+ hint="补给检查，确认队伍状态。",
+ x=5,
+ y=55,
+ kind="start",
+ ),
+ # Mainline
+ "slope_forest": AoTaiNode(
+ node_id="slope_forest",
+ name="林间缓坡",
+ altitude_m=2550,
+ scene_id="forest",
+ hint="树影摇晃，风开始大了。",
+ x=18,
+ y=55,
+ kind="main",
+ ),
+ "camp_2800": AoTaiNode(
+ node_id="camp_2800",
+ name="2800营地",
+ altitude_m=2800,
+ scene_id="camp",
+ hint="常见营地节点，可休整/扎营，也可能下撤。",
+ x=30,
+ y=45,
+ kind="camp",
+ ),
+ "stone_sea": AoTaiNode(
+ node_id="stone_sea",
+ name="石海边缘",
+ altitude_m=2900,
+ scene_id="stone",
+ hint="碎石路更耗体力，注意脚下。",
+ x=42,
+ y=55,
+ kind="main",
+ ),
+ "ridge_wind": AoTaiNode(
+ node_id="ridge_wind",
+ name="风口山脊",
+ altitude_m=3150,
+ scene_id="ridge",
+ hint="能见度下降，队形别散。",
+ x=55,
+ y=45,
+ kind="junction",
+ ),
+ "da_ye_hai": AoTaiNode(
+ node_id="da_ye_hai",
+ name="大爷海",
+ altitude_m=3250,
+ scene_id="lake",
+ hint="关键地标，天气变化快。",
+ x=66,
+ y=55,
+ kind="lake",
+ ),
+ "ba_xian_tai": AoTaiNode(
+ node_id="ba_xian_tai",
+ name="拔仙台（太白最高点）",
+ altitude_m=3767,
+ scene_id="summit",
+ hint="海拔最高点，谨慎推进。",
+ x=82,
+ y=45,
+ kind="peak",
+ ),
+ "end_exit": AoTaiNode(
+ node_id="end_exit",
+ name="下撤终点",
+ altitude_m=3200,
+ scene_id="end",
+ hint="抵达终点，整理记忆。",
+ x=95,
+ y=55,
+ kind="end",
+ ),
+ # Bailout / branch nodes
+ "bailout_2800": AoTaiNode(
+ node_id="bailout_2800",
+ name="2800下撤口",
+ altitude_m=2700,
+ scene_id="end",
+ hint="从 2800营地下撤的出口（demo）。",
+ x=30,
+ y=70,
+ kind="exit",
+ ),
+ "bailout_ridge": AoTaiNode(
+ node_id="bailout_ridge",
+ name="山脊下撤口",
+ altitude_m=3000,
+ scene_id="end",
+ hint="山脊处紧急下撤节点（demo）。",
+ x=55,
+ y=70,
+ kind="exit",
+ ),
+}
+
+# English names for AoTai nodes (when lang=en, theme=aotai)
+AOTAI_NODE_NAMES_EN: dict[str, str] = {
+ "start": "Trailhead",
+ "slope_forest": "Forest Slope",
+ "camp_2800": "2800 Camp",
+ "stone_sea": "Stone Sea Edge",
+ "ridge_wind": "Ridge Wind",
+ "da_ye_hai": "Da Ye Hai",
+ "ba_xian_tai": "Ba Xian Tai (Summit)",
+ "end_exit": "Exit Finish",
+ "bailout_2800": "2800 Evac",
+ "bailout_ridge": "Ridge Evac",
+}
+
+# English labels for AoTai edges (from_node_id, to_node_id) -> label
+AOTAI_EDGE_LABELS_EN: dict[tuple[str, str], str] = {
+ ("start", "slope_forest"): "Into forest",
+ ("slope_forest", "camp_2800"): "To 2800",
+ ("camp_2800", "stone_sea"): "Main route",
+ ("stone_sea", "ridge_wind"): "To ridge",
+ ("ridge_wind", "da_ye_hai"): "To Da Ye Hai",
+ ("da_ye_hai", "ba_xian_tai"): "Summit push",
+ ("ba_xian_tai", "end_exit"): "Descent",
+ ("camp_2800", "bailout_2800"): "Evac",
+ ("ridge_wind", "bailout_ridge"): "Emergency evac",
+}
+
+
+EDGES: list[AoTaiEdge] = [
+ # Mainline distances are demo values (km) and can be tuned.
+ AoTaiEdge(
+ from_node_id="start",
+ to_node_id="slope_forest",
+ kind="main",
+ label="进入山林",
+ distance_km=4.0,
+ ),
+ AoTaiEdge(
+ from_node_id="slope_forest",
+ to_node_id="camp_2800",
+ kind="main",
+ label="上到2800",
+ distance_km=6.0,
+ ),
+ AoTaiEdge(
+ from_node_id="camp_2800",
+ to_node_id="stone_sea",
+ kind="main",
+ label="继续主线",
+ distance_km=4.0,
+ ),
+ AoTaiEdge(
+ from_node_id="stone_sea",
+ to_node_id="ridge_wind",
+ kind="main",
+ label="上山脊",
+ distance_km=6.0,
+ ),
+ AoTaiEdge(
+ from_node_id="ridge_wind",
+ to_node_id="da_ye_hai",
+ kind="main",
+ label="去大爷海",
+ distance_km=3.0,
+ ),
+ AoTaiEdge(
+ from_node_id="da_ye_hai",
+ to_node_id="ba_xian_tai",
+ kind="main",
+ label="冲顶",
+ distance_km=8.0,
+ ),
+ AoTaiEdge(
+ from_node_id="ba_xian_tai",
+ to_node_id="end_exit",
+ kind="main",
+ label="下撤",
+ distance_km=10.0,
+ ),
+ # Branches / exits
+ AoTaiEdge(
+ from_node_id="camp_2800",
+ to_node_id="bailout_2800",
+ kind="exit",
+ label="下撤",
+ distance_km=7.0,
+ ),
+ AoTaiEdge(
+ from_node_id="ridge_wind",
+ to_node_id="bailout_ridge",
+ kind="exit",
+ label="紧急下撤",
+ distance_km=9.0,
+ ),
+]
+
+
+@dataclass(frozen=True)
+class AoTaiGraph:
+ start_node_id: ClassVar[str] = "start"
+
+ @staticmethod
+ def get_node(node_id: str) -> AoTaiNode:
+ return NODES[node_id]
+
+ @staticmethod
+ def nodes() -> list[AoTaiNode]:
+ return list(NODES.values())
+
+ @staticmethod
+ def edges() -> list[AoTaiEdge]:
+ return list(EDGES)
+
+ @staticmethod
+ def outgoing(node_id: str) -> list[AoTaiEdge]:
+ return [e for e in EDGES if e.from_node_id == node_id]
+
+ @staticmethod
+ def next_node_ids(node_id: str) -> list[str]:
+ return [e.to_node_id for e in AoTaiGraph.outgoing(node_id)]
+
+
+def get_graph(theme: str | None) -> type[AoTaiGraph]:
+ """Return the map graph for the given theme (aotai = 鳌太线, kili = 乞力马扎罗)."""
+ from aotai_hike.world.kilimanjaro_map_data import KilimanjaroGraph
+
+ return KilimanjaroGraph if theme == "kili" else AoTaiGraph
+
+
+def get_node_display_name(theme: str | None, lang: str | None, node_id: str) -> str:
+ """Return the node name for display in messages (localized when theme=aotai and lang=en)."""
+ graph = get_graph(theme)
+ try:
+ node = graph.get_node(node_id)
+ default_name = node.name
+ except Exception:
+ default_name = node_id
+ if theme == "aotai" and lang == "en":
+ return AOTAI_NODE_NAMES_EN.get(node_id, default_name)
+ return default_name
diff --git a/demos/AOTAI_Hike/backend/app.py b/demos/AOTAI_Hike/backend/app.py
new file mode 100644
index 000000000..e28edfcde
--- /dev/null
+++ b/demos/AOTAI_Hike/backend/app.py
@@ -0,0 +1,55 @@
+from __future__ import annotations
+
+import sys
+
+from pathlib import Path
+
+from aotai_hike.router import router
+from fastapi import FastAPI
+from fastapi.middleware.cors import CORSMiddleware
+from fastapi.staticfiles import StaticFiles
+from loguru import logger
+
+
+logger.add("demos/AOTAI_Hike/logs/aotai_hike.log", encoding="utf-8", enqueue=True, backtrace=True)
+
+
+ROOT = Path(__file__).resolve().parent.parent
+FRONTEND_DIR = ROOT / "frontend"
+LOG_DIR = ROOT / "logs"
+LOG_DIR.mkdir(exist_ok=True)
+LOG_FILE = LOG_DIR / "aotai_hike.log"
+
+app = FastAPI(title="AoTai Pixel Hike Demo", version="0.1.0")
+
+# Configure CORS
+app.add_middleware(
+ CORSMiddleware,
+ allow_origins=["*"], # In production, specify actual origins
+ allow_credentials=True,
+ allow_methods=["*"],
+ allow_headers=["*"],
+)
+
+app.include_router(router)
+app.mount("/demo/ao-tai", StaticFiles(directory=str(FRONTEND_DIR), html=True), name="ao-tai-demo")
+
+# Configure logging: both stdout and file
+logger.remove()
+# Console output
+logger.add(
+ sys.stdout,
+ level="INFO",
+ format="{time:YYYY-MM-DD HH:mm:ss} | {level} | {message}",
+ colorize=True,
+)
+# File output with rotation
+logger.add(
+ LOG_FILE,
+ level="INFO",
+ format="{time:YYYY-MM-DD HH:mm:ss} | {level} | {name}:{function}:{line} | {message}",
+ rotation="100 MB", # Rotate when file reaches 100MB
+ retention="7 days", # Keep logs for 7 days
+ compression="zip", # Compress old logs
+ encoding="utf-8",
+)
diff --git a/demos/AOTAI_Hike/banner.png b/demos/AOTAI_Hike/banner.png
new file mode 100644
index 000000000..91d2e8ad3
Binary files /dev/null and b/demos/AOTAI_Hike/banner.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/Dark Brick 1.png b/demos/AOTAI_Hike/frontend/assets/Dark Brick 1.png
new file mode 100644
index 000000000..44dd64867
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/Dark Brick 1.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/Dark Bush 1.png b/demos/AOTAI_Hike/frontend/assets/Dark Bush 1.png
new file mode 100644
index 000000000..1d0ecb0b3
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/Dark Bush 1.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/Dark Tree 1.png b/demos/AOTAI_Hike/frontend/assets/Dark Tree 1.png
new file mode 100644
index 000000000..d2bd08f04
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/Dark Tree 1.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/Dark fence 1.png b/demos/AOTAI_Hike/frontend/assets/Dark fence 1.png
new file mode 100644
index 000000000..663639812
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/Dark fence 1.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/Dark grass 1.png b/demos/AOTAI_Hike/frontend/assets/Dark grass 1.png
new file mode 100644
index 000000000..8e886f6c7
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/Dark grass 1.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/Fallen Leaves 1.png b/demos/AOTAI_Hike/frontend/assets/Fallen Leaves 1.png
new file mode 100644
index 000000000..609056dcc
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/Fallen Leaves 1.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/Mock Up 1.png b/demos/AOTAI_Hike/frontend/assets/Mock Up 1.png
new file mode 100644
index 000000000..faa2a5f34
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/Mock Up 1.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/Pumpkin 1.png b/demos/AOTAI_Hike/frontend/assets/Pumpkin 1.png
new file mode 100644
index 000000000..fa3aa4ac5
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/Pumpkin 1.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/Tilemap 1.png b/demos/AOTAI_Hike/frontend/assets/Tilemap 1.png
new file mode 100644
index 000000000..1a4e9f28c
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/Tilemap 1.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/avatars/ava_blue.svg b/demos/AOTAI_Hike/frontend/assets/avatars/ava_blue.svg
new file mode 100644
index 000000000..04182f61d
--- /dev/null
+++ b/demos/AOTAI_Hike/frontend/assets/avatars/ava_blue.svg
@@ -0,0 +1,20 @@
+
diff --git a/demos/AOTAI_Hike/frontend/assets/avatars/ava_default.svg b/demos/AOTAI_Hike/frontend/assets/avatars/ava_default.svg
new file mode 100644
index 000000000..91401cddf
--- /dev/null
+++ b/demos/AOTAI_Hike/frontend/assets/avatars/ava_default.svg
@@ -0,0 +1,19 @@
+
diff --git a/demos/AOTAI_Hike/frontend/assets/avatars/ava_green.svg b/demos/AOTAI_Hike/frontend/assets/avatars/ava_green.svg
new file mode 100644
index 000000000..cd7aea506
--- /dev/null
+++ b/demos/AOTAI_Hike/frontend/assets/avatars/ava_green.svg
@@ -0,0 +1,20 @@
+
diff --git a/demos/AOTAI_Hike/frontend/assets/avatars/ava_red.svg b/demos/AOTAI_Hike/frontend/assets/avatars/ava_red.svg
new file mode 100644
index 000000000..5c04296cd
--- /dev/null
+++ b/demos/AOTAI_Hike/frontend/assets/avatars/ava_red.svg
@@ -0,0 +1,20 @@
+
diff --git a/demos/AOTAI_Hike/frontend/assets/scenes/scene_base/scene_0_base.png b/demos/AOTAI_Hike/frontend/assets/scenes/scene_base/scene_0_base.png
new file mode 100644
index 000000000..8df98ae27
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/scenes/scene_base/scene_0_base.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/scenes/scene_base/scene_0_full.png b/demos/AOTAI_Hike/frontend/assets/scenes/scene_base/scene_0_full.png
new file mode 100644
index 000000000..514c13c05
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/scenes/scene_base/scene_0_full.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/scenes/scene_base/scene_0_props.png b/demos/AOTAI_Hike/frontend/assets/scenes/scene_base/scene_0_props.png
new file mode 100644
index 000000000..4f2d2d5c1
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/scenes/scene_base/scene_0_props.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/scenes/scene_kilimanjaro/scene_0_base.png b/demos/AOTAI_Hike/frontend/assets/scenes/scene_kilimanjaro/scene_0_base.png
new file mode 100644
index 000000000..4ba599eec
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/scenes/scene_kilimanjaro/scene_0_base.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/scenes/scene_kilimanjaro/scene_0_props.png b/demos/AOTAI_Hike/frontend/assets/scenes/scene_kilimanjaro/scene_0_props.png
new file mode 100644
index 000000000..ab8d340a5
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/scenes/scene_kilimanjaro/scene_0_props.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/share_background.png b/demos/AOTAI_Hike/frontend/assets/share_background.png
new file mode 100644
index 000000000..2767a1346
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/share_background.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/share_frame.png b/demos/AOTAI_Hike/frontend/assets/share_frame.png
new file mode 100644
index 000000000..ffaa3c337
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/share_frame.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/share_noise.png b/demos/AOTAI_Hike/frontend/assets/share_noise.png
new file mode 100644
index 000000000..18abfdd42
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/share_noise.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/ao/idle/frame_000.png b/demos/AOTAI_Hike/frontend/assets/sprites/ao/idle/frame_000.png
new file mode 100644
index 000000000..426c5896b
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/ao/idle/frame_000.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/ao/idle/frame_001.png b/demos/AOTAI_Hike/frontend/assets/sprites/ao/idle/frame_001.png
new file mode 100644
index 000000000..1f3e6330a
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/ao/idle/frame_001.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/ao/idle/frame_002.png b/demos/AOTAI_Hike/frontend/assets/sprites/ao/idle/frame_002.png
new file mode 100644
index 000000000..19f1e4cbe
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/ao/idle/frame_002.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/ao/idle/frame_003.png b/demos/AOTAI_Hike/frontend/assets/sprites/ao/idle/frame_003.png
new file mode 100644
index 000000000..98cc056d4
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/ao/idle/frame_003.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/ao/idle/frame_004.png b/demos/AOTAI_Hike/frontend/assets/sprites/ao/idle/frame_004.png
new file mode 100644
index 000000000..46911492a
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/ao/idle/frame_004.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/ao/idle/frame_005.png b/demos/AOTAI_Hike/frontend/assets/sprites/ao/idle/frame_005.png
new file mode 100644
index 000000000..3bf5cf6db
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/ao/idle/frame_005.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_000.png b/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_000.png
new file mode 100644
index 000000000..ebe205d9d
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_000.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_001.png b/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_001.png
new file mode 100644
index 000000000..1e8125836
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_001.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_002.png b/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_002.png
new file mode 100644
index 000000000..3e01e3321
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_002.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_003.png b/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_003.png
new file mode 100644
index 000000000..39b33e054
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_003.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_004.png b/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_004.png
new file mode 100644
index 000000000..51ece9678
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_004.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_005.png b/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_005.png
new file mode 100644
index 000000000..422ef0824
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_005.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_006.png b/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_006.png
new file mode 100644
index 000000000..346725559
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_006.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_007.png b/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_007.png
new file mode 100644
index 000000000..d156e8297
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/ao/walk/frame_007.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/taibai/idle/frame_000.png b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/idle/frame_000.png
new file mode 100644
index 000000000..863b0c096
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/idle/frame_000.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/taibai/idle/frame_001.png b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/idle/frame_001.png
new file mode 100644
index 000000000..863b0c096
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/idle/frame_001.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/taibai/idle/frame_002.png b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/idle/frame_002.png
new file mode 100644
index 000000000..a4a034489
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/idle/frame_002.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/taibai/idle/frame_003.png b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/idle/frame_003.png
new file mode 100644
index 000000000..accf8ccf0
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/idle/frame_003.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/taibai/idle/frame_004.png b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/idle/frame_004.png
new file mode 100644
index 000000000..b9d793218
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/idle/frame_004.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/taibai/idle/frame_005.png b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/idle/frame_005.png
new file mode 100644
index 000000000..ea84a536e
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/idle/frame_005.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/taibai/idle/frame_006.png b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/idle/frame_006.png
new file mode 100644
index 000000000..4315f10fb
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/idle/frame_006.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_000.png b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_000.png
new file mode 100644
index 000000000..7d0fe253c
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_000.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_001.png b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_001.png
new file mode 100644
index 000000000..b53c1a2b9
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_001.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_002.png b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_002.png
new file mode 100644
index 000000000..ad9214eb0
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_002.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_003.png b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_003.png
new file mode 100644
index 000000000..8c6bb01d8
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_003.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_004.png b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_004.png
new file mode 100644
index 000000000..2f457aea6
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_004.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_005.png b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_005.png
new file mode 100644
index 000000000..a15603bc0
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_005.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_006.png b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_006.png
new file mode 100644
index 000000000..12e2a9768
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_006.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_007.png b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_007.png
new file mode 100644
index 000000000..0d1ad9e8b
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/taibai/walk/frame_007.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/xiaoshan/idle/frame_000.png b/demos/AOTAI_Hike/frontend/assets/sprites/xiaoshan/idle/frame_000.png
new file mode 100644
index 000000000..91c250b59
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/xiaoshan/idle/frame_000.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/xiaoshan/idle/frame_001.png b/demos/AOTAI_Hike/frontend/assets/sprites/xiaoshan/idle/frame_001.png
new file mode 100644
index 000000000..eb88d6565
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/xiaoshan/idle/frame_001.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/xiaoshan/idle/frame_002.png b/demos/AOTAI_Hike/frontend/assets/sprites/xiaoshan/idle/frame_002.png
new file mode 100644
index 000000000..c33c511f2
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/xiaoshan/idle/frame_002.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/xiaoshan/walk/frame_000.png b/demos/AOTAI_Hike/frontend/assets/sprites/xiaoshan/walk/frame_000.png
new file mode 100644
index 000000000..62df148c0
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/xiaoshan/walk/frame_000.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/xiaoshan/walk/frame_001.png b/demos/AOTAI_Hike/frontend/assets/sprites/xiaoshan/walk/frame_001.png
new file mode 100644
index 000000000..1f720f530
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/xiaoshan/walk/frame_001.png differ
diff --git a/demos/AOTAI_Hike/frontend/assets/sprites/xiaoshan/walk/frame_002.png b/demos/AOTAI_Hike/frontend/assets/sprites/xiaoshan/walk/frame_002.png
new file mode 100644
index 000000000..33d82664f
Binary files /dev/null and b/demos/AOTAI_Hike/frontend/assets/sprites/xiaoshan/walk/frame_002.png differ
diff --git a/demos/AOTAI_Hike/frontend/main.js b/demos/AOTAI_Hike/frontend/main.js
new file mode 100644
index 000000000..532b68abd
--- /dev/null
+++ b/demos/AOTAI_Hike/frontend/main.js
@@ -0,0 +1,11 @@
+import { installActionsToWindow } from "./src/actions.js";
+import { bootstrap } from "./src/bootstrap.js";
+import { t } from "./src/i18n.js";
+import { logMsg } from "./src/render.js";
+
+installActionsToWindow();
+
+bootstrap().catch((err) => {
+ console.error(err);
+ logMsg({ kind: "system", content: t("msgStartupFailed") + err.message, timestamp_ms: Date.now() });
+});
diff --git a/demos/AOTAI_Hike/frontend/src/actions.js b/demos/AOTAI_Hike/frontend/src/actions.js
new file mode 100644
index 000000000..681769fdc
--- /dev/null
+++ b/demos/AOTAI_Hike/frontend/src/actions.js
@@ -0,0 +1,203 @@
+import { getLang, t } from "./i18n.js";
+import { sessionId, setMapData, setSessionId, setWorldState, worldState } from "./state.js";
+import { logMsg, renderBranchChoices, renderPartyStatus, renderRoles, setStatus, checkAndShowShareButton } from "./render.js";
+import { applyPhaseUI, isNightVoteModalBlocking } from "./phase_ui.js";
+
+export const API_BASE = "/api/demo/ao-tai";
+
+let _autoTimer = null;
+let _autoInFlight = false;
+
+function _isGameOver(ws) {
+ if (!ws) return false;
+ const roles = ws.roles || [];
+ if (roles.length > 0 && roles.every((r) => Number(r?.attrs?.stamina || 0) <= 0)) return true;
+ const terminalIds = new Set(["end_exit", "bailout_2800", "bailout_ridge"]);
+ const curId = String(ws.current_node_id || "");
+ return terminalIds.has(curId);
+}
+
+function _shouldAutoContinue(ws) {
+ if (!ws) return false;
+ if (_isGameOver(ws)) return false;
+ if (!ws.active_role_id) return false;
+ const phase = ws.phase || "free";
+ if (phase !== "free") return false;
+ if (isNightVoteModalBlocking?.()) return false;
+ // Stop when reaching a terminal node (no outgoing edges in this demo).
+ const terminal = new Set(["end_exit", "bailout_2800", "bailout_ridge"]);
+ if (terminal.has(String(ws.current_node_id || ""))) return false;
+ return true;
+}
+
+function _scheduleAutoContinue() {
+ if (_autoTimer) return;
+ if (!_shouldAutoContinue(worldState)) return;
+ _autoTimer = setTimeout(async () => {
+ _autoTimer = null;
+ if (_autoInFlight) return;
+ if (!_shouldAutoContinue(worldState)) return;
+ _autoInFlight = true;
+ try {
+ await apiAct("CONTINUE");
+ } finally {
+ _autoInFlight = false;
+ }
+ }, 900);
+}
+
+export function scheduleAutoContinue() {
+ _scheduleAutoContinue();
+}
+
+async function api(path, body, method = "POST") {
+ const resp = await fetch(`${API_BASE}${path}`, {
+ method,
+ headers: { "Content-Type": "application/json" },
+ body: body ? JSON.stringify(body) : undefined,
+ });
+ if (!resp.ok) {
+ const text = await resp.text();
+ throw new Error(`${resp.status} ${resp.statusText}: ${text}`);
+ }
+ return resp.json();
+}
+
+export async function apiGetMap(theme, lang) {
+ const params = new URLSearchParams();
+ if (theme != null) params.set("theme", theme);
+ if (lang != null) params.set("lang", lang);
+ const q = params.toString() ? `?${params.toString()}` : "";
+ const resp = await fetch(`${API_BASE}/map${q}`);
+ const data = await resp.json();
+ setMapData(data);
+}
+
+function _makeUserId() {
+ const ts = Date.now().toString(36);
+ const rand = Math.random().toString(36).slice(2, 8);
+ return `demo_user_${ts}_${rand}`;
+}
+
+export async function apiNewSession(theme, lang) {
+ const data = await api("/session/new", {
+ user_id: _makeUserId(),
+ theme: theme != null ? theme : "aotai",
+ lang: lang != null ? lang : getLang(),
+ });
+ setSessionId(data.session_id);
+ setWorldState(data.world_state);
+ logMsg({ kind: "system", content: t("msgNewSession"), timestamp_ms: Date.now() });
+ setStatus();
+ renderPartyStatus();
+ renderBranchChoices();
+ if (window.__aoTaiMapView) window.__aoTaiMapView.setState(worldState);
+ if (window.__aoTaiMinimap) window.__aoTaiMinimap.setState(worldState);
+ applyPhaseUI(worldState);
+ checkAndShowShareButton(data.world_state);
+ _scheduleAutoContinue();
+}
+
+export async function apiUpsertRole(role) {
+ const data = await api("/roles/upsert", { session_id: sessionId, role });
+ worldState.roles = data.roles;
+ worldState.active_role_id = data.active_role_id;
+ renderRoles();
+ renderPartyStatus();
+ renderBranchChoices();
+ setStatus();
+ if (window.__aoTaiMinimap) window.__aoTaiMinimap.setState(worldState);
+ // ensure Phaser shows the party immediately after creation/update
+ if (window.__aoTaiMapView) window.__aoTaiMapView.setState(worldState);
+ applyPhaseUI(worldState);
+ _scheduleAutoContinue();
+}
+
+export async function apiRolesQuickstart(overwrite = false) {
+ const data = await api("/roles/quickstart", { session_id: sessionId, overwrite });
+ worldState.roles = data.roles;
+ worldState.active_role_id = data.active_role_id;
+ renderRoles();
+ renderPartyStatus();
+ renderBranchChoices();
+ setStatus();
+ if (window.__aoTaiMinimap) window.__aoTaiMinimap.setState(worldState);
+ // ensure Phaser shows the party immediately after creation/update
+ if (window.__aoTaiMapView) window.__aoTaiMapView.setState(worldState);
+ applyPhaseUI(worldState);
+ _scheduleAutoContinue();
+}
+
+export async function apiSetActiveRole(roleId) {
+ const ws = await api("/session/active_role", { session_id: sessionId, active_role_id: roleId }, "PUT");
+ setWorldState(ws);
+ renderRoles();
+ renderPartyStatus();
+ renderBranchChoices();
+ setStatus();
+ if (window.__aoTaiMinimap) window.__aoTaiMinimap.setState(worldState);
+ // ensure Phaser updates the active-role animation/pose immediately
+ if (window.__aoTaiMapView) window.__aoTaiMapView.setState(worldState);
+ const active = (worldState.roles || []).find((r) => r.role_id === roleId);
+ logMsg({
+ kind: "system",
+ content: t("msgSwitchRole") + (active?.name || roleId),
+ timestamp_ms: Date.now(),
+ });
+ applyPhaseUI(worldState);
+ _scheduleAutoContinue();
+}
+
+export async function apiAct(action, payload = {}) {
+ if (_isGameOver(worldState)) return null;
+ // Show "conversing" hint immediately when moving forward (may trigger NPC chat)
+ if (action === "MOVE_FORWARD") {
+ logMsg({
+ kind: "system",
+ content: t("msgTalking"),
+ timestamp_ms: Date.now(),
+ });
+ }
+ const data = await api("/act", { session_id: sessionId, action, payload });
+ setWorldState(data.world_state);
+
+ for (const m of data.messages || []) logMsg(m);
+ setStatus();
+ renderRoles();
+ renderPartyStatus();
+ renderBranchChoices();
+ if (window.__aoTaiMapView) window.__aoTaiMapView.setState(worldState);
+ if (window.__aoTaiMinimap) window.__aoTaiMinimap.setState(worldState);
+ applyPhaseUI(worldState);
+
+ // 检查并显示分享按钮（随时可见）
+ checkAndShowShareButton(data.world_state);
+
+ _scheduleAutoContinue();
+ return data;
+}
+
+export async function apiSetSessionLang(lang) {
+ if (!sessionId) return;
+ const ws = await api("/session/lang", { session_id: sessionId, lang }, "PUT");
+ setWorldState(ws);
+}
+
+export async function apiSetSessionTheme(theme) {
+ if (!sessionId) return;
+ const ws = await api("/session/theme", { session_id: sessionId, theme }, "PUT");
+ setWorldState(ws);
+}
+
+export function installActionsToWindow() {
+ window.__aoTaiActions = {
+ apiGetMap,
+ apiNewSession,
+ apiUpsertRole,
+ apiSetActiveRole,
+ apiAct,
+ apiSetSessionLang,
+ apiSetSessionTheme,
+ scheduleAutoContinue,
+ };
+}
diff --git a/demos/AOTAI_Hike/frontend/src/bootstrap.js b/demos/AOTAI_Hike/frontend/src/bootstrap.js
new file mode 100644
index 000000000..1de578100
--- /dev/null
+++ b/demos/AOTAI_Hike/frontend/src/bootstrap.js
@@ -0,0 +1,293 @@
+import { $ } from "./dom.js";
+import { apiAct, apiGetMap, apiNewSession, apiSetActiveRole, apiSetSessionLang, apiSetSessionTheme, apiUpsertRole, apiRolesQuickstart } from "./actions.js";
+import { setLang, getLang, t, getPageTitle, getTitle, getSubtitle } from "./i18n.js";
+import { initMinimapCanvas } from "./minimap.js";
+import { initPhaser } from "./phaser_view.js";
+import { applyPhaseUI } from "./phase_ui.js";
+import { logMsg, checkAndShowShareButton, setStatus, renderPartyStatus } from "./render.js";
+import { worldState } from "./state.js";
+import { makeRole } from "./utils.js";
+
+function refreshStaticUI() {
+ const theme = worldState?.theme ?? "aotai";
+ const lang = getLang();
+ document.title = getPageTitle(theme, lang);
+ document.documentElement.lang = lang === "zh" ? "zh-CN" : "en";
+ const set = (id, key, attr = "textContent") => {
+ const el = document.getElementById(id);
+ if (el) el[attr] = t(key);
+ };
+ const titleEl = document.getElementById("i18n-title");
+ if (titleEl) titleEl.textContent = getTitle(theme, lang);
+ const subEl = document.getElementById("i18n-subtitle");
+ if (subEl) subEl.textContent = getSubtitle(theme, lang);
+ set("i18n-party-panel-title", "partyPanelTitle");
+ set("i18n-interact-panel-title", "interactPanelTitle");
+ set("i18n-btn-forward", "moveForward");
+ set("i18n-btn-rest", "rest");
+ set("i18n-btn-camp", "camp");
+ set("i18n-btn-observe", "observe");
+ set("btn-say", "send");
+ set("i18n-hint-switch", "hintSwitchRole");
+ set("i18n-setup-title", "setupTitle");
+ set("i18n-setup-lang-label", "setupLangLabel");
+ set("i18n-setup-map-label", "setupMapLabel");
+ set("i18n-setup-sub", "setupSub");
+ set("i18n-setup-name-label", "setupNameLabel");
+ set("i18n-setup-persona-label", "setupPersonaLabel");
+ set("i18n-setup-pending-title", "setupPendingTitle");
+ set("i18n-night-vote-title", "nightVoteTitle");
+ set("i18n-share-modal-title", "shareModalTitle");
+ const shareBtn = $("#share-button");
+ if (shareBtn) {
+ shareBtn.textContent = t("share");
+ shareBtn.title = t("shareTitle");
+ }
+ const langBtn = $("#lang-button");
+ if (langBtn) {
+ langBtn.textContent = getLang() === "zh" ? t("langEn") : t("langZh");
+ }
+ $("#setup-role-name") && ($("#setup-role-name").placeholder = t("setupNamePlaceholder"));
+ $("#setup-role-persona") && ($("#setup-role-persona").placeholder = t("setupPersonaPlaceholder"));
+ $("#setup-add-role") && ($("#setup-add-role").textContent = t("setupAddRole"));
+ $("#setup-quickstart") && ($("#setup-quickstart").textContent = t("setupQuickstart"));
+ $("#setup-create") && ($("#setup-create").textContent = t("setupCreate"));
+ $("#night-vote-sub") && ($("#night-vote-sub").textContent = t("nightVoteSub"));
+ $("#night-vote-close") && ($("#night-vote-close").textContent = t("nightVoteContinue"));
+ $("#share-download-btn") && ($("#share-download-btn").textContent = t("shareDownload"));
+ $("#share-close-btn") && ($("#share-close-btn").textContent = t("shareClose"));
+ const shareModalTitleEl = document.getElementById("i18n-share-modal-title");
+ if (shareModalTitleEl) shareModalTitleEl.textContent = t("shareModalTitle");
+ const minimapCanvas = document.getElementById("minimap-canvas");
+ if (minimapCanvas) minimapCanvas.setAttribute("aria-label", t("minimapAriaLabel"));
+ const themeLabel = $("#i18n-setup-theme-label");
+ if (themeLabel) themeLabel.textContent = t("setupThemeLabel");
+ const setupLangZh = $("#setup-lang-zh");
+ const setupLangEn = $("#setup-lang-en");
+ const setupMapAotai = $("#setup-map-aotai");
+ const setupMapKili = $("#setup-map-kili");
+ const currentTheme = worldState?.theme ?? "aotai";
+ const currentLang = getLang();
+ if (setupLangZh) {
+ setupLangZh.textContent = t("setupLangZh");
+ setupLangZh.classList.toggle("primary", currentLang === "zh");
+ }
+ if (setupLangEn) {
+ setupLangEn.textContent = t("setupLangEn");
+ setupLangEn.classList.toggle("primary", currentLang === "en");
+ }
+ if (setupMapAotai) {
+ setupMapAotai.textContent = t("setupMapAotai");
+ setupMapAotai.classList.toggle("primary", currentTheme === "aotai");
+ }
+ if (setupMapKili) {
+ setupMapKili.textContent = t("setupMapKilimanjaro");
+ setupMapKili.classList.toggle("primary", currentTheme === "kili");
+ }
+ if (typeof window.__aoTaiRefreshSetupList === "function") {
+ window.__aoTaiRefreshSetupList();
+ }
+}
+
+export async function refreshAllUIText() {
+ refreshStaticUI();
+ // Do NOT re-fetch map here: map is tied to theme, not lang. Switching lang must not change map.
+ setStatus();
+ renderPartyStatus();
+ applyPhaseUI(worldState);
+ if (window.__aoTaiMinimap && typeof window.__aoTaiMinimap.setState === "function") {
+ window.__aoTaiMinimap.setState(worldState);
+ }
+ if (window.__aoTaiMapView && typeof window.__aoTaiMapView.setState === "function") {
+ window.__aoTaiMapView.setState(worldState);
+ }
+}
+
+export async function bootstrap() {
+ await apiNewSession("aotai", getLang());
+ await apiGetMap(worldState?.theme ?? "aotai", getLang());
+ window.__aoTaiMinimap = initMinimapCanvas();
+ if (window.__aoTaiMinimap) window.__aoTaiMinimap.setState(worldState);
+ initPhaser();
+
+ // Language switcher (left of share button)
+ const langBtn = $("#lang-button");
+ if (langBtn) {
+ langBtn.onclick = async () => {
+ const newLang = getLang() === "zh" ? "en" : "zh";
+ setLang(newLang);
+ await apiSetSessionLang(newLang).catch((e) => console.warn("Failed to set session lang", e));
+ await refreshAllUIText();
+ };
+ }
+ refreshStaticUI();
+
+ // Initialize share button
+ checkAndShowShareButton(worldState);
+
+ window.addEventListener("aotai:langchange", () => refreshAllUIText());
+
+ // Initial role setup modal (must create at least one role; modal is removed after creation)
+ const setupEl = $("#role-setup");
+ const setupNameEl = $("#setup-role-name");
+ const setupPersonaEl = $("#setup-role-persona");
+ const setupListEl = $("#setup-role-list");
+ const setupErrEl = $("#setup-error");
+ const pending = [];
+
+ const showSetupErr = (msg) => {
+ if (!setupErrEl) return;
+ setupErrEl.style.display = msg ? "block" : "none";
+ setupErrEl.textContent = msg || "";
+ };
+
+ const renderPending = () => {
+ if (!setupListEl) return;
+ setupListEl.innerHTML = "";
+ if (pending.length === 0) {
+ const empty = document.createElement("div");
+ empty.className = "hint";
+ empty.textContent = t("setupEmptyList");
+ setupListEl.appendChild(empty);
+ return;
+ }
+ pending.forEach((r, idx) => {
+ const item = document.createElement("div");
+ item.className = "setup-item";
+ const left = document.createElement("div");
+ left.innerHTML = `${r.name}
${(r.persona || "")
+ .replaceAll("<", "<")
+ .replaceAll(">", ">")}
`;
+ const btn = document.createElement("button");
+ btn.textContent = t("setupRemove");
+ btn.onclick = () => {
+ pending.splice(idx, 1);
+ renderPending();
+ };
+ item.appendChild(left);
+ item.appendChild(btn);
+ setupListEl.appendChild(item);
+ });
+ };
+ window.__aoTaiRefreshSetupList = renderPending;
+
+ const hideAndRemoveSetup = () => {
+ if (!setupEl) return;
+ setupEl.style.display = "none";
+ try {
+ setupEl.remove();
+ } catch {}
+ };
+
+ const openSetupIfNeeded = () => {
+ if (!setupEl) return;
+ const roles = worldState && worldState.roles ? worldState.roles : [];
+ if (roles.length > 0) return; // already has roles, don't block
+ setupEl.style.display = "flex";
+ showSetupErr("");
+ renderPending();
+ try {
+ setupNameEl && setupNameEl.focus();
+ } catch {}
+ };
+
+ $("#setup-add-role")?.addEventListener("click", () => {
+ const name = (setupNameEl?.value || "").trim();
+ const persona = (setupPersonaEl?.value || "").trim();
+ if (!name) {
+ showSetupErr(t("setupErrName"));
+ return;
+ }
+ showSetupErr("");
+ pending.push({ name, persona });
+ if (setupNameEl) setupNameEl.value = "";
+ if (setupPersonaEl) setupPersonaEl.value = "";
+ renderPending();
+ try {
+ setupNameEl && setupNameEl.focus();
+ } catch {}
+ });
+
+ $("#setup-create")?.addEventListener("click", async () => {
+ if (pending.length === 0) {
+ showSetupErr(t("setupErrMinOne"));
+ return;
+ }
+ showSetupErr("");
+ for (const r of pending) {
+ await apiUpsertRole(makeRole(r.name, r.persona));
+ logMsg({ kind: "system", content: t("msgRoleAdded") + r.name, timestamp_ms: Date.now() });
+ }
+ const roles = worldState?.roles || [];
+ const pick = roles[0];
+ if (pick?.role_id) await apiSetActiveRole(pick.role_id);
+ hideAndRemoveSetup();
+ });
+
+ $("#setup-quickstart")?.addEventListener("click", async () => {
+ showSetupErr("");
+ // Use backend's roles/quickstart endpoint to create default roles with correct attributes
+ await apiRolesQuickstart(false);
+ logMsg({ kind: "system", content: t("msgQuickstartDone"), timestamp_ms: Date.now() });
+ const roles = worldState?.roles || [];
+ const pick = roles[0];
+ if (pick?.role_id) await apiSetActiveRole(pick.role_id);
+ hideAndRemoveSetup();
+ });
+
+ // Wire action buttons
+ $("#actions-panel").addEventListener("click", (e) => {
+ const btn = e.target.closest("button[data-act]");
+ if (!btn) return;
+ apiAct(btn.getAttribute("data-act"));
+ });
+
+ // New flow: movement/rest/observe are now automatic. Hide all action buttons by default.
+ // CAMP button will be shown only in AWAIT_CAMP_DECISION phase by phase_ui.js
+ try {
+ document.querySelectorAll("#actions-panel button[data-act]").forEach((b) => {
+ b.style.display = "none"; // Hide all action buttons by default
+ });
+ } catch {}
+
+ $("#btn-say").onclick = async () => {
+ const text = ($("#say-input").value || "").trim();
+ $("#say-input").value = "";
+ await apiAct("SAY", { text });
+ };
+
+ // Language choice in setup modal (independent of map; refetch map so labels match lang)
+ $("#setup-lang-zh")?.addEventListener("click", async () => {
+ setLang("zh");
+ await apiSetSessionLang("zh").catch((e) => console.warn("Failed to set session lang", e));
+ await apiGetMap(worldState?.theme ?? "aotai", getLang()).catch((e) => console.warn("Failed to refresh map", e));
+ await refreshAllUIText();
+ });
+ $("#setup-lang-en")?.addEventListener("click", async () => {
+ setLang("en");
+ await apiSetSessionLang("en").catch((e) => console.warn("Failed to set session lang", e));
+ await apiGetMap(worldState?.theme ?? "aotai", getLang()).catch((e) => console.warn("Failed to refresh map", e));
+ await refreshAllUIText();
+ });
+ // Map choice in setup modal (independent of language)
+ $("#setup-map-aotai")?.addEventListener("click", async () => {
+ await apiSetSessionTheme("aotai").catch((e) => console.warn("Failed to set session theme", e));
+ await apiGetMap("aotai", getLang()).catch((e) => console.warn("Failed to refresh map", e));
+ await refreshAllUIText();
+ });
+ $("#setup-map-kili")?.addEventListener("click", async () => {
+ await apiSetSessionTheme("kili").catch((e) => console.warn("Failed to set session theme", e));
+ await apiGetMap("kili", getLang()).catch((e) => console.warn("Failed to refresh map", e));
+ await refreshAllUIText();
+ });
+
+ // Show role setup modal on first open
+ openSetupIfNeeded();
+
+ // First hint
+ logMsg({
+ kind: "system",
+ content: t("msgFirstHint"),
+ timestamp_ms: Date.now(),
+ });
+}
diff --git a/demos/AOTAI_Hike/frontend/src/dom.js b/demos/AOTAI_Hike/frontend/src/dom.js
new file mode 100644
index 000000000..9297d40e1
--- /dev/null
+++ b/demos/AOTAI_Hike/frontend/src/dom.js
@@ -0,0 +1,7 @@
+export const $ = (sel) => document.querySelector(sel);
+
+export const chatEl = $("#chat");
+export const rolesEl = $("#roles");
+export const statusEl = $("#status");
+export const partyEl = $("#party-status");
+export const branchEl = $("#branch-choices");
diff --git a/demos/AOTAI_Hike/frontend/src/i18n.js b/demos/AOTAI_Hike/frontend/src/i18n.js
new file mode 100644
index 000000000..4fd151364
--- /dev/null
+++ b/demos/AOTAI_Hike/frontend/src/i18n.js
@@ -0,0 +1,292 @@
+/**
+ * Multi-language (zh/en) for AoTai Hike demo.
+ * Usage: t("key") returns current language string; setLang("zh"|"en") then refresh UI.
+ */
+
+const STORAGE_KEY = "aotai_hike_lang";
+
+const messages = {
+ zh: {
+ // Page & title
+ pageTitle: "鳌太线·像素徒步模拟器（Demo）",
+ title: "鳌太线·像素徒步模拟器",
+ subtitle: "单人多角色 · 其他角色由生成接口驱动（当前为 mock）",
+
+ // Top bar buttons
+ share: "分享",
+ shareTitle: "分享游戏记录",
+ langZh: "中",
+ langEn: "英",
+
+ // Party panel
+ partyPanelTitle: "队伍状态（点击卡片切换角色）",
+ partyStatus: "队伍状态",
+ partyEmpty: "还没有队员。请先在启动弹窗里创建角色。",
+ currentPlay: "当前扮演",
+ yes: "是",
+ no: "否",
+
+ // Stats
+ stamina: "体力",
+ mood: "心情",
+ experience: "经验",
+ risk: "冒险",
+ supplies: "物资",
+
+ // Interact panel
+ interactPanelTitle: "互动（动作 + 像素聊天）",
+ moveForward: "前进",
+ rest: "休息",
+ camp: "扎营",
+ observe: "观察",
+ campButtonTitle: "扎营（恢复体力，消耗较多物资）",
+ sayPlaceholder: "当前角色说点什么…",
+ sayPlaceholderDisabled: "队伍行动中…（需要你发言时会提示）",
+ sayPlaceholderGameOver: "游戏已结束",
+ send: "发送",
+ hintSwitchRole: "提示：点击上方「队伍状态」的卡片即可切换当前角色。",
+
+ // Status line
+ statusLocation: "位置",
+ statusDay: "Day",
+ statusWeather: "天气",
+ statusCurrentRole: "当前角色",
+ statusEnRoute: "路上→",
+
+ // Branch
+ nextStep: "下一步",
+ junctionChoose: "分岔口：请选择下一步",
+
+ // Chat / system
+ system: "系统",
+ unknown: "未知",
+
+ // Role setup modal
+ setupTitle: "创建队伍角色",
+ setupThemeLabel: "路线主题（决定剧情与默认角色设定）：",
+ setupLangLabel: "语言：",
+ setupMapLabel: "地图：",
+ setupLangZh: "中文",
+ setupLangEn: "English",
+ setupMapAotai: "鳌太线",
+ setupMapKilimanjaro: "乞力马扎罗",
+ setupThemeAotai: "鳌太线",
+ setupThemeKilimanjaro: "乞力马扎罗",
+ setupSub: "先创建 1 个或多个角色（名字 + 角色介绍），创建完成后该弹窗会消失。也可以一键快速创建。",
+ setupNameLabel: "名字",
+ setupNamePlaceholder: "例如：阿鳌",
+ setupPersonaLabel: "角色介绍",
+ setupPersonaPlaceholder: "例如：经验丰富的徒步向导，谨慎但乐观。",
+ setupAddRole: "加入列表",
+ setupQuickstart: "快速创建 3 角色",
+ setupPendingTitle: "待创建",
+ setupCreate: "创建并开始",
+ setupEmptyList: "还没有待创建的角色。可以先填写名字/介绍加入列表，或点击「快速创建 3 角色」。",
+ setupRemove: "移除",
+ setupErrName: "请先填写名字。",
+ setupErrMinOne: "请至少加入 1 个角色，或点击「快速创建 3 角色」。",
+
+ // Night vote
+ nightVoteTitle: "夜间票选队长",
+ nightVoteSub: "请选择一位队长。选择后将展示全员投票与理由。",
+ nightVoteSelectAsLeader: "选择为队长",
+ nightVoteDone: "投票完成。",
+ nightVoteContinue: "继续出发",
+
+ // Share modal
+ shareModalTitle: "分享游戏记录",
+ shareDownload: "下载图片",
+ shareClose: "关闭",
+ shareGenerating: "正在生成分享图片...",
+ shareNoSession: "游戏会话不可用",
+ shareLoadFailed: "加载失败",
+
+ // Phase hints
+ phaseWaitSay: "队伍等待你发言：请在输入框里发一句话（发言后才能继续）。",
+ phaseCampDecision: "作为队长，你可以选择扎营恢复体力（消耗较多物资），或继续前进。",
+ phaseNightWaitSay: "夜晚到来：请先发言（发送一句话）后才能开始票选队长。",
+ phaseNightVote: "夜晚票选：请在弹窗中选择队长。",
+ phaseUnknown: "当前阶段：{phase}（动作暂不可用）",
+
+ // System messages
+ msgNewSession: "已创建新 Session。",
+ msgTalking: "正在与队友对话…",
+ msgSwitchRole: "切换当前角色为：",
+ msgRoleAdded: "新增角色：",
+ msgQuickstartDone: "已创建 3 个默认角色。",
+ msgFirstHint: "先创建角色（弹窗里可快速创建），然后用动作按钮开始徒步。",
+ msgStartupFailed: "启动失败：",
+
+ // Phaser fallback
+ roleLabel: "角色",
+
+ // Minimap
+ minimapAriaLabel: "小地图",
+ },
+
+ en: {
+ pageTitle: "Conquer Kilimanjaro · Pixel Trail Simulator (Demo)",
+ title: "Conquer Kilimanjaro · Pixel Trail Simulator",
+ subtitle: "Single-player multi-role · Other roles driven by API (mock)",
+
+ share: "Share",
+ shareTitle: "Share game record",
+ langZh: "中",
+ langEn: "EN",
+
+ partyPanelTitle: "Party (click card to switch role)",
+ partyStatus: "Party",
+ partyEmpty: "No members yet. Create roles in the setup popup first.",
+ currentPlay: "Playing",
+ yes: "Yes",
+ no: "No",
+
+ stamina: "Stamina",
+ mood: "Mood",
+ experience: "Exp",
+ risk: "Risk",
+ supplies: "Supplies",
+
+ interactPanelTitle: "Interact (actions + pixel chat)",
+ moveForward: "Forward",
+ rest: "Rest",
+ camp: "Camp",
+ observe: "Observe",
+ campButtonTitle: "Camp (restore stamina, uses more supplies)",
+ sayPlaceholder: "Say something as current role…",
+ sayPlaceholderDisabled: "Party on the move… (you'll be prompted when to speak)",
+ sayPlaceholderGameOver: "Game over",
+ send: "Send",
+ hintSwitchRole: "Tip: click a card above to switch the current role.",
+
+ statusLocation: "Location",
+ statusDay: "Day",
+ statusWeather: "Weather",
+ statusCurrentRole: "Role",
+ statusEnRoute: "En route→",
+
+ nextStep: "Next",
+ junctionChoose: "Junction: choose next step",
+
+ system: "System",
+ unknown: "Unknown",
+
+ setupTitle: "Create party roles",
+ setupThemeLabel: "Trek theme (sets story & default roles):",
+ setupLangLabel: "Language:",
+ setupMapLabel: "Map:",
+ setupLangZh: "中文",
+ setupLangEn: "English",
+ setupMapAotai: "AoTai Trail",
+ setupMapKilimanjaro: "Kilimanjaro",
+ setupThemeAotai: "AoTai Trail",
+ setupThemeKilimanjaro: "Kilimanjaro",
+ setupSub: "Create one or more roles (name + intro). This popup closes when done. Or quick-create.",
+ setupNameLabel: "Name",
+ setupNamePlaceholder: "e.g. Ao",
+ setupPersonaLabel: "Role intro",
+ setupPersonaPlaceholder: "e.g. Experienced trail guide, cautious but optimistic.",
+ setupAddRole: "Add to list",
+ setupQuickstart: "Quick create 3 roles",
+ setupPendingTitle: "Pending",
+ setupCreate: "Create & start",
+ setupEmptyList: "No pending roles. Add name/intro or click «Quick create 3 roles».",
+ setupRemove: "Remove",
+ setupErrName: "Please enter a name.",
+ setupErrMinOne: "Add at least one role, or click «Quick create 3 roles».",
+
+ nightVoteTitle: "Night vote: choose leader",
+ nightVoteSub: "Choose one leader. After that, votes and reasons will be shown.",
+ nightVoteSelectAsLeader: "Select as leader",
+ nightVoteDone: "Vote complete.",
+ nightVoteContinue: "Continue",
+
+ shareModalTitle: "Share game record",
+ shareDownload: "Download image",
+ shareClose: "Close",
+ shareGenerating: "Generating share image...",
+ shareNoSession: "Game session not available",
+ shareLoadFailed: "Load failed",
+
+ phaseWaitSay: "Party is waiting for you: type a message and send to continue.",
+ phaseCampDecision: "As leader, you can camp to restore stamina (uses more supplies) or continue.",
+ phaseNightWaitSay: "Night: say something first, then the leader vote will start.",
+ phaseNightVote: "Night vote: choose the leader in the popup.",
+ phaseUnknown: "Phase: {phase} (actions disabled)",
+
+ msgNewSession: "New session created.",
+ msgTalking: "Talking with party…",
+ msgSwitchRole: "Switched to: ",
+ msgRoleAdded: "Added role: ",
+ msgQuickstartDone: "Created 3 default roles.",
+ msgFirstHint: "Create roles (quick create in popup), then use actions to start the hike.",
+ msgStartupFailed: "Startup failed: ",
+
+ roleLabel: "Role",
+
+ minimapAriaLabel: "Minimap",
+ },
+};
+
+let currentLang = (typeof localStorage !== "undefined" && localStorage.getItem(STORAGE_KEY)) || "zh";
+if (currentLang !== "zh" && currentLang !== "en") currentLang = "zh";
+
+export function getLang() {
+ return currentLang;
+}
+
+export function setLang(lang) {
+ if (lang !== "zh" && lang !== "en") return;
+ currentLang = lang;
+ try {
+ localStorage.setItem(STORAGE_KEY, lang);
+ } catch {}
+ try {
+ window.dispatchEvent(new CustomEvent("aotai:langchange", { detail: { lang } }));
+ } catch {}
+}
+
+export function t(key) {
+ const m = messages[currentLang];
+ const s = m && m[key];
+ if (s === undefined) return messages.zh[key] || key;
+ return s;
+}
+
+/** Replace placeholders like {phase} in t("phaseUnknown") */
+export function tFormat(key, vars = {}) {
+ let s = t(key);
+ Object.entries(vars).forEach(([k, v]) => {
+ s = s.replace(new RegExp(`\\{${k}\\}`, "g"), String(v));
+ });
+ return s;
+}
+
+/** Title / page title / subtitle by theme (aotai|kili) and lang (zh|en). */
+export function getPageTitle(theme, lang) {
+ const key = theme === "kili" ? "pageTitleKili" : "pageTitleAotai";
+ const m = messages[lang] || messages.zh;
+ return (m && m[key]) || (theme === "kili" ? "Conquer Kilimanjaro · Pixel Trail Simulator (Demo)" : "鳌太线·像素徒步模拟器（Demo）");
+}
+
+export function getTitle(theme, lang) {
+ const key = theme === "kili" ? "titleKili" : "titleAotai";
+ const m = messages[lang] || messages.zh;
+ return (m && m[key]) || (theme === "kili" ? "Conquer Kilimanjaro · Pixel Trail Simulator" : "鳌太线·像素徒步模拟器");
+}
+
+export function getSubtitle(theme, lang) {
+ const key = "subtitle";
+ const m = messages[lang] || messages.zh;
+ return (m && m[key]) || "单人多角色 · 其他角色由生成接口驱动（当前为 mock）";
+}
+
+// Title variants by theme (used by getPageTitle / getTitle)
+messages.zh.pageTitleAotai = "鳌太线·像素徒步模拟器（Demo）";
+messages.zh.titleAotai = "鳌太线·像素徒步模拟器";
+messages.zh.pageTitleKili = "决胜乞力马扎罗·像素徒步模拟器（Demo）";
+messages.zh.titleKili = "决胜乞力马扎罗·像素徒步模拟器";
+messages.en.pageTitleAotai = "AoTai Trail · Pixel Hiking Simulator (Demo)";
+messages.en.titleAotai = "AoTai Trail · Pixel Hiking Simulator";
+messages.en.pageTitleKili = "Conquer Kilimanjaro · Pixel Trail Simulator (Demo)";
+messages.en.titleKili = "Conquer Kilimanjaro · Pixel Trail Simulator";
diff --git a/demos/AOTAI_Hike/frontend/src/minimap.js b/demos/AOTAI_Hike/frontend/src/minimap.js
new file mode 100644
index 000000000..c612bddbe
--- /dev/null
+++ b/demos/AOTAI_Hike/frontend/src/minimap.js
@@ -0,0 +1,208 @@
+import { mapEdges, mapNodes, mapStartNodeId } from "./state.js";
+import { clamp } from "./utils.js";
+
+export function initMinimapCanvas() {
+ const root = document.getElementById("minimap-root");
+ const canvas = document.getElementById("minimap-canvas");
+ const ctx = canvas && canvas.getContext ? canvas.getContext("2d") : null;
+ if (!root || !canvas || !ctx) return null;
+
+ const fontStack =
+ '"PingFang SC","Hiragino Sans GB","Microsoft YaHei",system-ui,sans-serif';
+ const state = { ws: null, dpr: 1 };
+
+ const nodeByIdLocal = (id) =>
+ (mapNodes || []).find((n) => String(n.node_id) === String(id));
+
+ const resize = () => {
+ const r = root.getBoundingClientRect();
+ const dpr = Math.max(1, Math.min(4, window.devicePixelRatio || 1));
+ state.dpr = dpr;
+ canvas.width = Math.max(1, Math.round(r.width * dpr));
+ canvas.height = Math.max(1, Math.round(r.height * dpr));
+ ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+ ctx.imageSmoothingEnabled = false;
+ };
+
+ const draw = () => {
+ const ws = state.ws;
+ if (!ws) return;
+ const r = root.getBoundingClientRect();
+ const W = Math.max(1, Math.round(r.width));
+ const H = Math.max(1, Math.round(r.height));
+
+ ctx.clearRect(0, 0, W, H);
+ ctx.fillStyle = "rgba(10,16,28,0.92)";
+ ctx.fillRect(0, 0, W, H);
+ ctx.strokeStyle = "rgba(124,242,255,0.38)";
+ ctx.lineWidth = 2;
+ ctx.strokeRect(1, 1, W - 2, H - 2);
+
+ const pad = 14;
+ const mapW = Math.max(10, W - pad * 2);
+ const mapH = Math.max(10, H - pad * 2);
+ const toMini = (n) => {
+ const x = pad + (clamp(n.x, 0, 100) / 100) * mapW;
+ const y = pad + (clamp(n.y, 0, 100) / 100) * mapH;
+ return { x, y };
+ };
+
+ const nodeId = ws.current_node_id || mapStartNodeId || "start";
+ const visitedSet = new Set((ws.visited_node_ids || [nodeId]).map(String));
+
+ const curveSign = (s) => {
+ let h = 0;
+ for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0;
+ return h & 1 ? 1 : -1;
+ };
+
+ // edges
+ for (const e of mapEdges || []) {
+ const a = nodeByIdLocal(e.from_node_id);
+ const b = nodeByIdLocal(e.to_node_id);
+ if (!a || !b) continue;
+ const pa = toMini(a);
+ const pb = toMini(b);
+
+ const visited = visitedSet.has(String(e.to_node_id));
+ const isExit = e.kind === "exit";
+ const alpha = visited ? 0.85 : 0.28;
+ const width = visited ? 3 : 2;
+
+ const dx = pb.x - pa.x;
+ const dy = pb.y - pa.y;
+ const len = Math.max(1, Math.hypot(dx, dy));
+ const px = -dy / len;
+ const py = dx / len;
+ const midx = (pa.x + pb.x) * 0.5;
+ const midy = (pa.y + pb.y) * 0.5;
+ const bend =
+ (8 + (isExit ? 6 : 0) + (visited ? 3 : 0)) *
+ curveSign(String(e.from_node_id) + "->" + String(e.to_node_id));
+ const cx = midx + px * bend;
+ const cy = midy + py * bend;
+
+ ctx.strokeStyle = `rgba(11,22,48,${Math.min(0.65, alpha)})`;
+ ctx.lineWidth = width + 3;
+ ctx.beginPath();
+ ctx.moveTo(pa.x, pa.y);
+ ctx.quadraticCurveTo(cx, cy, pb.x, pb.y);
+ ctx.stroke();
+
+ ctx.strokeStyle = isExit
+ ? `rgba(255,124,124,${alpha})`
+ : `rgba(124,242,255,${alpha})`;
+ ctx.lineWidth = width;
+ ctx.beginPath();
+ ctx.moveTo(pa.x, pa.y);
+ ctx.quadraticCurveTo(cx, cy, pb.x, pb.y);
+ ctx.stroke();
+ }
+
+ // nodes + labels
+ const fontPx = 12;
+ ctx.textBaseline = "middle";
+ ctx.font = `${fontPx}px ${fontStack}`;
+
+ for (const n of mapNodes || []) {
+ const p = toMini(n);
+ const isCur = String(n.node_id) === String(nodeId);
+ const isVisited = visitedSet.has(String(n.node_id)) || isCur;
+ const kind = n.kind || "main";
+ const kColor =
+ kind === "exit"
+ ? "#ff7c7c"
+ : kind === "camp"
+ ? "#7cffc6"
+ : kind === "lake"
+ ? "#7ca8ff"
+ : kind === "peak"
+ ? "#ffd27c"
+ : kind === "start"
+ ? "#9dff7c"
+ : kind === "end"
+ ? "#b0b6c6"
+ : "#7cf2ff";
+
+ ctx.fillStyle = "rgba(11,22,48,0.85)";
+ ctx.beginPath();
+ ctx.arc(p.x, p.y, isCur ? 7 : 6, 0, Math.PI * 2);
+ ctx.fill();
+
+ ctx.fillStyle = isVisited ? kColor : "rgba(124,242,255,0.55)";
+ ctx.beginPath();
+ ctx.arc(p.x, p.y, isCur ? 5 : 4, 0, Math.PI * 2);
+ ctx.fill();
+
+ const isKey =
+ isCur || ["start", "camp", "junction", "lake", "peak", "exit", "end"].includes(kind);
+ const label = (n.name || n.node_id || "").trim();
+ if (isKey && label) {
+ const x = Math.round(p.x + 8);
+ const y = Math.round(p.y - 12);
+ const textW = ctx.measureText(label).width;
+
+ ctx.fillStyle = "rgba(6,16,34,0.92)";
+ ctx.fillRect(x - 2, y - fontPx / 2 - 4, textW + 10, fontPx + 8);
+
+ ctx.lineWidth = 2;
+ ctx.strokeStyle = "rgba(6,16,34,1)";
+ ctx.fillStyle = isVisited ? "#d6faff" : "#7aa0b3";
+ ctx.strokeText(label, x + 3, y);
+ ctx.fillText(label, x + 3, y);
+ }
+ }
+
+ // marker (transit aware)
+ const toId = ws.in_transit_to_node_id;
+ const fromId = ws.in_transit_from_node_id;
+ const prog = Number(ws.in_transit_progress_km || 0);
+ const tot = Number(ws.in_transit_total_km || 0);
+
+ let mp = null;
+ if (fromId && toId && tot > 0) {
+ const a = nodeByIdLocal(fromId);
+ const b = nodeByIdLocal(toId);
+ if (a && b) {
+ const pa = toMini(a);
+ const pb = toMini(b);
+ const t = clamp(prog / tot, 0, 1);
+ mp = { x: pa.x + (pb.x - pa.x) * t, y: pa.y + (pb.y - pa.y) * t };
+ }
+ }
+ if (!mp) {
+ const cur = nodeByIdLocal(nodeId);
+ if (cur) mp = toMini(cur);
+ }
+ if (mp) {
+ ctx.fillStyle = "#ffd27c";
+ ctx.fillRect(Math.round(mp.x - 4), Math.round(mp.y - 12), 8, 12);
+ ctx.strokeStyle = "rgba(0,0,0,0.35)";
+ ctx.lineWidth = 1;
+ ctx.strokeRect(Math.round(mp.x - 4) + 0.5, Math.round(mp.y - 12) + 0.5, 8, 12);
+ }
+ };
+
+ const api = {
+ setState(ws) {
+ state.ws = ws;
+ resize();
+ draw();
+ },
+ };
+
+ try {
+ new ResizeObserver(() => {
+ resize();
+ draw();
+ }).observe(root);
+ } catch {
+ window.addEventListener("resize", () => {
+ resize();
+ draw();
+ });
+ }
+
+ resize();
+ return api;
+}
diff --git a/demos/AOTAI_Hike/frontend/src/phase_ui.js b/demos/AOTAI_Hike/frontend/src/phase_ui.js
new file mode 100644
index 000000000..3bf0f3de8
--- /dev/null
+++ b/demos/AOTAI_Hike/frontend/src/phase_ui.js
@@ -0,0 +1,280 @@
+import { $ } from "./dom.js";
+import { t, tFormat } from "./i18n.js";
+import { avatarUrl } from "./utils.js";
+import { checkAndShowShareButton } from "./render.js";
+
+let phasePanel = null;
+let hintEl = null;
+let submitBtn = null;
+let nightVoteBackdrop = null;
+let nightVoteRoles = null;
+let nightVoteLog = null;
+let nightVoteActions = null;
+let nightVoteClose = null;
+let nightVoteSub = null;
+let nightVoteMode = "hidden"; // hidden | select | result
+let nightVoteBusy = false;
+
+function ensurePhasePanel() {
+ if (phasePanel) return;
+ const actions = $("#actions-panel");
+ if (!actions) return;
+ phasePanel = document.createElement("div");
+ phasePanel.id = "phase-panel";
+ phasePanel.className = "phase-panel";
+ phasePanel.style.marginTop = "8px";
+ phasePanel.style.padding = "8px";
+ phasePanel.style.border = "1px solid rgba(124,242,255,0.35)";
+ phasePanel.style.background = "rgba(6,16,34,0.55)";
+ phasePanel.style.display = "none";
+
+ hintEl = document.createElement("div");
+ hintEl.className = "hint";
+ hintEl.style.marginBottom = "6px";
+ phasePanel.appendChild(hintEl);
+
+ actions.appendChild(phasePanel);
+}
+
+function setActionButtonsEnabled(enabled) {
+ const actions = $("#actions-panel");
+ if (!actions) return;
+ actions.querySelectorAll("button[data-act]").forEach((b) => {
+ b.disabled = !enabled;
+ });
+}
+
+function updateCampButtonState(ws) {
+ const actions = $("#actions-panel");
+ if (!actions) return;
+ const campBtn = actions.querySelector('button[data-act="CAMP"]');
+ if (!campBtn) return;
+
+ // Only show CAMP button in AWAIT_CAMP_DECISION phase (after player says something)
+ const phase = String(ws?.phase || "free").toLowerCase();
+ const isCampDecisionPhase = phase === "await_camp_decision";
+ const isLeader = ws?.active_role_id && ws?.active_role_id === ws?.leader_role_id;
+
+ // Show button only in AWAIT_CAMP_DECISION phase and if player is leader
+ campBtn.style.display = isCampDecisionPhase && isLeader ? "block" : "none";
+ if (isCampDecisionPhase && isLeader) {
+ campBtn.disabled = false;
+ campBtn.title = t("campButtonTitle");
+ }
+}
+
+function ensureNightVoteModal() {
+ if (nightVoteBackdrop) return;
+ nightVoteBackdrop = $("#night-vote-modal");
+ nightVoteRoles = $("#night-vote-roles");
+ nightVoteLog = $("#night-vote-log");
+ nightVoteActions = $("#night-vote-actions");
+ nightVoteClose = $("#night-vote-close");
+ nightVoteSub = $("#night-vote-sub");
+ if (nightVoteClose) {
+ nightVoteClose.onclick = () => {
+ hideNightVoteModal();
+ window.__aoTaiActions?.scheduleAutoContinue?.();
+ };
+ }
+}
+
+function showNightVoteModal() {
+ ensureNightVoteModal();
+ if (!nightVoteBackdrop) return;
+ nightVoteBackdrop.style.display = "flex";
+ window.__aoTaiNightVoteOpen = true;
+}
+
+function hideNightVoteModal() {
+ if (!nightVoteBackdrop) return;
+ nightVoteBackdrop.style.display = "none";
+ nightVoteMode = "hidden";
+ nightVoteBusy = false;
+ window.__aoTaiNightVoteOpen = false;
+}
+
+function renderNightVoteSelect(ws) {
+ ensureNightVoteModal();
+ if (!nightVoteBackdrop || !nightVoteRoles || !nightVoteLog || !nightVoteActions) return;
+ nightVoteMode = "select";
+ nightVoteBusy = false;
+ showNightVoteModal();
+ nightVoteLog.style.display = "none";
+ nightVoteActions.style.display = "none";
+ if (nightVoteSub) {
+ nightVoteSub.textContent = t("nightVoteSub");
+ }
+
+ nightVoteRoles.innerHTML = "";
+ const roles = ws?.roles || [];
+ roles.forEach((r) => {
+ const card = document.createElement("div");
+ card.className = "vote-card";
+ const img = document.createElement("img");
+ img.className = "vote-ava";
+ img.src = avatarUrl(r);
+ img.alt = `${r.name} avatar`;
+ const meta = document.createElement("div");
+ meta.innerHTML = `${r.name}
${t("nightVoteSelectAsLeader")}
`;
+ card.appendChild(img);
+ card.appendChild(meta);
+ card.onclick = async () => {
+ if (nightVoteBusy) return;
+ nightVoteBusy = true;
+ nightVoteRoles.querySelectorAll(".vote-card").forEach((el) => {
+ el.classList.add("disabled");
+ });
+ const data = await window.__aoTaiActions?.apiAct?.("DECIDE", {
+ kind: "night_vote",
+ leader_role_id: r.role_id,
+ });
+ renderNightVoteResult(data?.messages || []);
+ };
+ nightVoteRoles.appendChild(card);
+ });
+}
+
+function renderNightVoteResult(messages) {
+ ensureNightVoteModal();
+ if (!nightVoteLog || !nightVoteActions) return;
+ nightVoteMode = "result";
+ showNightVoteModal();
+ const lines = [];
+ (messages || []).forEach((m) => {
+ if (m?.kind === "action" || m?.kind === "system") {
+ lines.push(m.content);
+ }
+ });
+ nightVoteLog.innerHTML = lines.length ? lines.map((l) => `${l}
`).join("") : t("nightVoteDone");
+ nightVoteLog.style.display = "block";
+ nightVoteActions.style.display = "block";
+}
+
+export function isNightVoteModalBlocking() {
+ return nightVoteMode !== "hidden";
+}
+
+export function applyPhaseUI(ws) {
+ ensurePhasePanel();
+ ensureNightVoteModal();
+ if (!ws) return;
+
+ const phase = String(ws.phase || "free").toLowerCase();
+ const roles = ws.roles || [];
+ const exhausted = roles.length > 0 && roles.every((r) => Number(r?.attrs?.stamina || 0) <= 0);
+ const terminalIds = new Set(["end_exit", "bailout_2800", "bailout_ridge"]);
+ const isGameOver = exhausted || terminalIds.has(String(ws.current_node_id || ""));
+
+ // SAY input is only enabled when the game explicitly asks the player to respond.
+ const sayInput = $("#say-input");
+ const sayBtn = $("#btn-say");
+ const enableSay = (phase === "await_player_say" || phase === "night_wait_player") && !isGameOver;
+ if (sayInput) {
+ sayInput.disabled = !enableSay;
+ sayInput.classList.toggle("input-attn", phase === "night_wait_player" && !isGameOver);
+ sayInput.placeholder = isGameOver
+ ? t("sayPlaceholderGameOver")
+ : enableSay
+ ? t("sayPlaceholder")
+ : t("sayPlaceholderDisabled");
+ }
+ if (sayBtn) sayBtn.disabled = !enableSay;
+
+ // Ensure phasePanel is available
+ if (!phasePanel || !hintEl) {
+ console.warn("phasePanel or hintEl not initialized", { phasePanel, hintEl });
+ return;
+ }
+
+ // Default: free play
+ if (phase === "free") {
+ setActionButtonsEnabled(false);
+ updateCampButtonState(ws); // Hide CAMP button
+ // Hide MOVE_FORWARD button in FREE phase
+ const actions = $("#actions-panel");
+ if (actions) {
+ const forwardBtn = actions.querySelector('button[data-act="MOVE_FORWARD"]');
+ if (forwardBtn) {
+ forwardBtn.style.display = "none";
+ }
+ }
+ phasePanel.style.display = "none";
+ if (nightVoteMode !== "result") hideNightVoteModal();
+ return;
+ }
+
+ if (isGameOver) {
+ setActionButtonsEnabled(false);
+ updateCampButtonState(ws); // Disable CAMP button when game over
+ phasePanel.style.display = "none";
+ hideNightVoteModal();
+ // 显示分享按钮
+ checkAndShowShareButton(ws);
+ return;
+ }
+
+ // Always show phasePanel for non-free phases
+ phasePanel.style.display = "block";
+
+ if (phase === "await_player_say") {
+ // Block all action buttons; allow user to SAY.
+ setActionButtonsEnabled(false);
+ updateCampButtonState(ws); // Hide CAMP button
+ hintEl.textContent = t("phaseWaitSay");
+ phasePanel.querySelectorAll("div,select,button").forEach((n) => {
+ if (n !== hintEl) n.remove?.();
+ });
+ return;
+ }
+
+ if (phase === "await_camp_decision") {
+ // After SAY, leader can choose to camp or continue
+ setActionButtonsEnabled(false);
+ updateCampButtonState(ws); // Show CAMP button if leader
+ // Enable MOVE_FORWARD button (continue without camping)
+ const actions = $("#actions-panel");
+ if (actions) {
+ const forwardBtn = actions.querySelector('button[data-act="MOVE_FORWARD"]');
+ if (forwardBtn) {
+ forwardBtn.style.display = "block";
+ forwardBtn.disabled = false;
+ }
+ }
+ hintEl.textContent = t("phaseCampDecision");
+ phasePanel.querySelectorAll("div,select,button").forEach((n) => {
+ if (n !== hintEl) n.remove?.();
+ });
+ return;
+ }
+
+ if (phase === "night_wait_player") {
+ setActionButtonsEnabled(false);
+ updateCampButtonState(ws); // Disable CAMP button
+ hintEl.textContent = t("phaseNightWaitSay");
+ phasePanel.querySelectorAll("div,select,button").forEach((n) => {
+ if (n !== hintEl) n.remove?.();
+ });
+ hideNightVoteModal();
+ return;
+ }
+
+ if (phase === "night_vote_ready") {
+ setActionButtonsEnabled(false);
+ updateCampButtonState(ws); // Disable CAMP button
+ hintEl.textContent = t("phaseNightVote");
+ phasePanel.querySelectorAll("div,select,button").forEach((n) => {
+ if (n !== hintEl) n.remove?.();
+ });
+ renderNightVoteSelect(ws);
+ return;
+ }
+
+ // camp_meeting_decide / junction_decision were for the old manual-decision flow.
+ // In the new flow, camp meeting and leader junction picks are automatic.
+
+ // Unknown phase: be safe and block actions.
+ setActionButtonsEnabled(false);
+ updateCampButtonState(ws); // Disable CAMP button
+ hintEl.textContent = tFormat("phaseUnknown", { phase });
+}
diff --git a/demos/AOTAI_Hike/frontend/src/phaser_view.js b/demos/AOTAI_Hike/frontend/src/phaser_view.js
new file mode 100644
index 000000000..1489fb1a5
--- /dev/null
+++ b/demos/AOTAI_Hike/frontend/src/phaser_view.js
@@ -0,0 +1,1595 @@
+import { t as i18nT } from "./i18n.js";
+import { clamp } from "./utils.js";
+import { mapEdges, mapNodes, mapStartNodeId, nodeById, worldState } from "./state.js";
+
+// Phaser trail view (chunk streaming)
+// - Renders an endless-ish forest trail by streaming procedurally generated chunks.
+// - Uses pixelArt rendering and fixed tile size for a crisp pixel look.
+// - For now, chunks are rendered via RenderTexture + simple pixel primitives.
+// Later you can swap `renderChunkToTexture()` to draw real tiles from your tileset.
+export function initPhaser() {
+ const root = document.getElementById("game-root");
+ const rect = root ? root.getBoundingClientRect() : { width: 960, height: 540 };
+ const qs = new URLSearchParams(window.location.search);
+ // Default to scale=2 for a chunkier pixel look. For sharper text without making the world too "fine",
+ // bump DPR via ?dpr=2 or ?dpr=3. You can still force more detail with ?scale=1.
+ const ZOOM = Math.max(1, Math.floor(Number(qs.get("scale")) || 2));
+ const VIEW_W = Math.max(160, Math.floor((rect.width || 960) / ZOOM));
+ const VIEW_H = Math.max(120, Math.floor((rect.height || 540) / ZOOM));
+
+ // Minimap label clarity tunables
+ // - Increase font size to improve readability (defaults to 8px instead of 5px)
+ // - Keep text resolution aligned to devicePixelRatio (avoid huge downscale blur)
+ // - Also set Phaser canvas resolution to devicePixelRatio for crisp rendering on HiDPI screens
+ // URL params:
+ // - miniFontPx / mmFontPx: integer px (e.g. ?miniFontPx=9)
+ // - miniTextRes: 1..4 (e.g. ?miniTextRes=2)
+ // - dpr: 1..3 (e.g. ?dpr=2)
+ // - miniOverlay: 1/0 (default 1) render minimap via a separate HiDPI overlay canvas
+ // - miniDpr: 1..8 (default ~ max(3, devicePixelRatio*2)) overlay-only pixel density (minimap can be sharper than main view)
+ // - miniHidePhaser: 1/0 (default 1) when using overlay, skip drawing the Phaser minimap layer
+ const GAME_RESOLUTION = Math.max(
+ 1,
+ // Allow a slightly higher cap; helps keep UI readable while world stays chunky at scale=2.
+ Math.min(4, Number(qs.get("dpr")) || (window.devicePixelRatio || 1)),
+ );
+
+ try {
+ console.info(
+ `[ao-tai] scale=${ZOOM} dpr=${GAME_RESOLUTION} view=${VIEW_W}x${VIEW_H} root=${Math.round(
+ rect.width,
+ )}x${Math.round(rect.height)}`,
+ );
+ } catch {}
+
+ // Default to a slightly higher internal text resolution for crisp pixel text.
+ // (You can still override via ?uiTextRes= / ?bubbleTextRes= / ?nameTextRes=)
+ const UI_TEXT_RES = clamp(
+ Math.round(Number(qs.get("uiTextRes")) || Math.max(2, window.devicePixelRatio || 1)),
+ 1,
+ 4,
+ );
+ const NAME_TEXT_RES = clamp(Math.round(Number(qs.get("nameTextRes")) || UI_TEXT_RES), 1, 4);
+ const BUBBLE_TEXT_RES = clamp(Math.round(Number(qs.get("bubbleTextRes")) || 4), 1, 4);
+
+ // UI font size tunables (final on-screen px). Override via URL: ?nameFontPx=11&bubbleFontPx=14
+ const NAME_FONT_PX = clamp(Math.round(Number(qs.get("nameFontPx")) || 11), 6, 28);
+ const BUBBLE_FONT_PX = clamp(Math.round(Number(qs.get("bubbleFontPx")) || 14), 8, 40);
+ // Minimap is now an independent DOM canvas (#minimap-canvas), not Phaser/overlay.
+ const USE_MINIMAP_OVERLAY = false;
+ const SKIP_PHASER_MINIMAP = true;
+ const MINI_LABEL_FONT_PX = Math.max(
+ 6,
+ Math.floor(Number(qs.get("miniFontPx") || qs.get("mmFontPx")) || 14),
+ );
+ const MINI_TEXT_RESOLUTION = Math.max(
+ 1,
+ Math.min(6, Math.round(Number(qs.get("miniTextRes")) || Math.max(2, GAME_RESOLUTION))),
+ );
+ const MINI_LABEL_OFF_X = 8;
+ const MINI_LABEL_OFF_Y = Math.max(6, Math.round(MINI_LABEL_FONT_PX * 0.95));
+ const MINI_LABEL_STROKE_W = Math.max(1, Math.round(MINI_LABEL_FONT_PX / 9));
+
+ // Main scene only
+ const MINI_H = 0;
+ const MAIN_H = VIEW_H;
+
+ const TILE = 48; // matches your pixel assets scale
+
+ // Scene layering config (two-copy loop)
+ // - Add/remove layers by editing this list (order = render order, bottom -> top).
+ // - For each sceneId, assets should exist at:
+ // `./assets/scenes/scene_${sceneId}/scene_0_${layer}.png`
+ // - base = 鳌太, kilimanjaro = 乞力马扎罗; select by theme in setState
+ const SCENE_IDS = ["base", "kilimanjaro"];
+ const SCENE_LAYERS = ["base", "props"];
+ const sceneKey = (sceneId, layer) => `scene:${sceneId}:${layer}`;
+ const sceneFile = (sceneId, layer) => `scenes/scene_${sceneId}/scene_0_${layer}.png`;
+
+ // Sprite pool for roles (pixel-art PNG sequences)
+ // - Quickstart(default) roles map by name to fixed keys
+ // - Manually created roles auto-match from this pool by stable hash of role_id
+ const SPRITE_POOL = ["ao", "taibai", "xiaoshan"];
+ const SPRITE_META = {
+ ao: { idle: { frames: 6, fps: 8 }, walk: { frames: 8, fps: 10 } },
+ taibai: { idle: { frames: 7, fps: 8 }, walk: { frames: 8, fps: 10 } },
+ xiaoshan: { idle: { frames: 3, fps: 6 }, walk: { frames: 3, fps: 8 } },
+ };
+
+ const hash32 = (s) => {
+ let h = 2166136261 >>> 0;
+ for (let i = 0; i < s.length; i++) {
+ h ^= s.charCodeAt(i);
+ h = Math.imul(h, 16777619);
+ }
+ return h >>> 0;
+ };
+
+ const mulberry32 = (seed) => {
+ let t = seed >>> 0;
+ return () => {
+ t += 0x6d2b79f5;
+ let r = Math.imul(t ^ (t >>> 15), 1 | t);
+ r ^= r + Math.imul(r ^ (r >>> 7), 61 | r);
+ return ((r ^ (r >>> 14)) >>> 0) / 4294967296;
+ };
+ };
+
+ class HikeScene extends Phaser.Scene {
+ constructor() {
+ super({ key: "HikeScene" });
+ this.world = null;
+ this.worldRT = null;
+ this.worldOverlay = null;
+
+ // New: N-layer scrolling scene (two-copy loop)
+ this.worldLayers = null;
+ this.layerImgs = null; // { [layerName]: [imgA, imgB] }
+ this._sceneLayers = SCENE_LAYERS.slice();
+ this._scrollY = 0;
+ this._scrollSpeed = 18; // px/s (slower)
+ this._loopH = 0;
+ this._sceneId = "base";
+
+ // minimap removed from Phaser (now DOM canvas)
+
+ this._curNodeId = null;
+ this._visited = new Set();
+ this._weather = null;
+ this._tod = null;
+ this._ws = null;
+ this._walkKey = "";
+ this._sceneKey = "";
+ this._theme = null; // current theme for scene choice (aotai -> base, kili -> kilimanjaro)
+
+ this.mainCam = null;
+
+ // roles rendered on big map
+ this.roleSprites = new Map(); // role_id -> Phaser.GameObjects.Sprite
+ this._spriteBounds = {}; // spriteKey -> { texW, texH, x, y, w, h }
+ this._targetContentH = 38; // non-transparent content height ≈ 38px
+
+ // head UI: name labels + speech bubbles
+ this.roleNameLabels = new Map(); // role_id -> Phaser.GameObjects.Text
+ this.roleBubbles = new Map(); // role_id -> Phaser.GameObjects.Container
+ this._bubbleTimers = new Map(); // role_id -> Phaser.Time.TimerEvent
+
+ // text resolution (sharpness) for UI
+ this._nameTextRes = NAME_TEXT_RES;
+ this._bubbleTextRes = BUBBLE_TEXT_RES;
+ this._nameFontPx = NAME_FONT_PX;
+ this._bubbleFontPx = BUBBLE_FONT_PX;
+
+ // outcome banner (success / fail)
+ this._outcomeBanner = null;
+ this._outcomeState = null; // "success" | "fail" | null
+
+ // weather effects
+ this._rainGfx = null;
+ this._rainDrops = [];
+ this._rainActive = false;
+ this._snowGfx = null;
+ this._snowFlakes = [];
+ this._snowActive = false;
+ this._windGfx = null;
+ this._windStreaks = [];
+ this._windActive = false;
+ this._fogGfx = null;
+ this._fogBlobs = [];
+ this._fogActive = false;
+ }
+
+ preload() {
+ this._assetErrors = [];
+ this.load.setPath("./assets/");
+
+ const loadImg = (key, file) => {
+ // encode spaces etc
+ this.load.image(key, encodeURI(file));
+ };
+
+ loadImg("grass", "Dark grass 1.png");
+ loadImg("brick", "Dark Brick 1.png");
+ loadImg("bush", "Dark Bush 1.png");
+ loadImg("tree", "Dark Tree 1.png");
+ loadImg("fence", "Dark fence 1.png");
+ loadImg("leaves", "Fallen Leaves 1.png");
+ loadImg("pumpkin", "Pumpkin 1.png");
+
+ // Scene templates
+ for (const sid of SCENE_IDS) {
+ for (const layer of SCENE_LAYERS) {
+ loadImg(sceneKey(sid, layer), sceneFile(sid, layer));
+ }
+ }
+
+ // preload role sprite frames (png sequences)
+ const loadFrame = (spriteKey, action, idx) => {
+ const k = `spr:${spriteKey}:${action}:${String(idx).padStart(3, "0")}`;
+ const file = `sprites/${spriteKey}/${action}/frame_${String(idx).padStart(3, "0")}.png`;
+ this.load.image(k, file);
+ };
+ for (const sk of SPRITE_POOL) {
+ const meta = SPRITE_META[sk];
+ for (const action of ["idle", "walk"]) {
+ const n = Number(meta?.[action]?.frames || 0);
+ for (let i = 0; i < n; i++) loadFrame(sk, action, i);
+ }
+ }
+
+ this.load.on("loaderror", (file) => {
+ try {
+ this._assetErrors.push(
+ file && (file.key || file.src || file.url)
+ ? file.key || file.src || file.url
+ : "unknown",
+ );
+ } catch {
+ this._assetErrors.push("unknown");
+ }
+ });
+ }
+
+ create() {
+ // --- containers ---
+ this.world = this.add.container(0, 0);
+
+ // --- main world layers (three layers, two-copy loop) ---
+ this.worldLayers = this.add.container(0, 0);
+ this.world.add(this.worldLayers);
+
+ this.layerImgs = {};
+ for (const layer of this._sceneLayers) {
+ const key = sceneKey(this._sceneId, layer);
+ const a = this.add.image(0, 0, key).setOrigin(0, 0);
+ const b = this.add.image(0, 0, key).setOrigin(0, 0);
+ this.layerImgs[layer] = [a, b];
+ this.worldLayers.add(a);
+ this.worldLayers.add(b);
+ }
+ this._swapScene(this._sceneId);
+
+ // init animations + nearest filter for pixel art sprites
+ this._initRoleAnims();
+
+ // --- overlay for weather/time mood ---
+ this.worldOverlay = this.add
+ .rectangle(0, 0, VIEW_W, MAIN_H, 0x000000, 0.0)
+ .setOrigin(0, 0);
+ this.worldOverlay.setDepth(10);
+ this.world.add(this.worldOverlay);
+
+ // --- rain layer (code-generated) ---
+ this._rainGfx = this.add.graphics();
+ this._rainGfx.setDepth(20);
+ this.world.add(this._rainGfx);
+ this._initRainDrops();
+
+ // --- snow layer ---
+ this._snowGfx = this.add.graphics();
+ this._snowGfx.setDepth(21);
+ this.world.add(this._snowGfx);
+ this._initSnowFlakes();
+
+ // --- wind layer ---
+ this._windGfx = this.add.graphics();
+ this._windGfx.setDepth(22);
+ this.world.add(this._windGfx);
+ this._initWindStreaks();
+
+ // --- fog layer ---
+ this._fogGfx = this.add.graphics();
+ this._fogGfx.setDepth(23);
+ this.world.add(this._fogGfx);
+ this._initFogBlobs();
+
+ // --- cameras ---
+ this.mainCam = this.cameras.main;
+ this.mainCam.setViewport(0, 0, VIEW_W, MAIN_H);
+ this.mainCam.setBackgroundColor("rgba(0,0,0,0)");
+ this.mainCam.roundPixels = true;
+
+ // Expose API
+ window.__aoTaiMapView = {
+ setState: (ws) => this.setState(ws),
+ // compat
+ setNode: (nodeId, visitedIds) =>
+ this.setState({ current_node_id: nodeId, visited_node_ids: visitedIds }),
+ // show/update speech bubble for a role
+ say: (roleId, text) => this._say(roleId, text),
+ };
+
+ // initial paint: pick scene from theme (kili -> kilimanjaro, else base)
+ const initialTheme = worldState?.theme || "aotai";
+ const initialSceneId = initialTheme === "kili" ? "kilimanjaro" : "base";
+ this._theme = initialTheme;
+ this._swapScene(initialSceneId);
+ this.setState({
+ current_node_id: mapStartNodeId || "start",
+ visited_node_ids: [mapStartNodeId || "start"],
+ weather: "cloudy",
+ time_of_day: "morning",
+ theme: initialTheme,
+ });
+ }
+
+ _swapScene(id) {
+ this._sceneId = String(id || "base");
+ if (!this.layerImgs) return;
+
+ // Set NEAREST for the scene textures.
+ try {
+ for (const layer of this._sceneLayers) {
+ const key = sceneKey(this._sceneId, layer);
+ if (this.textures.exists(key)) {
+ this.textures.get(key).setFilter(Phaser.Textures.FilterMode.NEAREST);
+ }
+ }
+ } catch {}
+
+ for (const layer of this._sceneLayers) {
+ const key = sceneKey(this._sceneId, layer);
+ const [a, b] = this.layerImgs[layer];
+ a.setTexture(key);
+ b.setTexture(key);
+ }
+ this._layoutLoopImages();
+ }
+
+ _layoutLoopImages() {
+ if (!this.layerImgs) return;
+ const refLayer = (this._sceneLayers && this._sceneLayers[0]) || "base";
+ const tex = this.layerImgs[refLayer]?.[0]?.texture || this.layerImgs.base?.[0]?.texture;
+ const img = tex && tex.getSourceImage ? tex.getSourceImage() : null;
+ const nativeW = img && img.width ? img.width : VIEW_W;
+ const nativeH = img && img.height ? img.height : MAIN_H;
+
+ // Keep aspect ratio: fit by width, but ensure height covers the viewport.
+ let scale = VIEW_W / Math.max(1, nativeW);
+ if (nativeH * scale < MAIN_H) scale = MAIN_H / Math.max(1, nativeH);
+ const dispW = Math.round(nativeW * scale);
+ const dispH = Math.round(nativeH * scale);
+ const x0 = Math.round((VIEW_W - dispW) / 2);
+
+ // Force width alignment (best: art exports at VIEW_W px so no scaling occurs)
+ for (const k of this._sceneLayers) {
+ const [a, b] = this.layerImgs[k];
+ a.setDisplaySize(dispW, dispH);
+ b.setDisplaySize(dispW, dispH);
+ a.x = x0;
+ a.y = 0;
+ b.x = x0;
+ b.y = -dispH;
+ }
+
+ this._loopH = Math.max(1, Math.round(dispH));
+ this._scrollY = 0;
+ }
+
+ update(time, delta) {
+ const ws = this._ws || {};
+ this._updateRain(delta);
+ this._updateSnow(delta);
+ this._updateWind(delta);
+ this._updateFog(delta);
+ const walking = Boolean(ws && ws.in_transit_to_node_id);
+ const phase = ws && ws.phase ? String(ws.phase) : "free";
+ const modalBlocking = Boolean(window.__aoTaiNightVoteOpen);
+ const speed = walking && phase === "free" && !modalBlocking ? this._scrollSpeed : 0;
+ if (speed <= 0 || !this.layerImgs || !this._loopH) return;
+
+ const dy = (Number(delta || 0) / 1000) * speed;
+ this._scrollY = (this._scrollY + dy) % this._loopH;
+
+ // Scroll DOWN: background moves down (player feels moving forward/up).
+ const ay = Math.round(this._scrollY);
+ for (const k of this._sceneLayers) {
+ const [a, b] = this.layerImgs[k];
+ a.y = ay;
+ b.y = ay - this._loopH;
+ }
+ }
+
+ _pickSpriteKey(role) {
+ const explicit = role && (role.sprite_key || role.spriteKey || role.sprite);
+ if (explicit && SPRITE_META[String(explicit)]) return String(explicit);
+
+ const name = String(role?.name || "").trim();
+ if (name === "阿鳌" || name === "Leo" || name === "利奥") return "ao";
+ if (name === "太白" || name === "Sam" || name === "山姆") return "taibai";
+ if (name === "小山" || name === "Jade" || name === "杰德") return "xiaoshan";
+
+ const rid = String(role?.role_id || name || "role");
+ const h = hash32(rid);
+ return SPRITE_POOL[h % SPRITE_POOL.length];
+ }
+
+ _frameKey(spriteKey, action, idx) {
+ return `spr:${spriteKey}:${action}:${String(idx).padStart(3, "0")}`;
+ }
+
+ _initRoleAnims() {
+ // set NEAREST filter
+ try {
+ for (const sk of SPRITE_POOL) {
+ const meta = SPRITE_META[sk];
+ for (const action of ["idle", "walk"]) {
+ const n = Number(meta?.[action]?.frames || 0);
+ for (let i = 0; i < n; i++) {
+ const k = this._frameKey(sk, action, i);
+ try {
+ this.textures.get(k).setFilter(Phaser.Textures.FilterMode.NEAREST);
+ } catch {}
+ }
+ }
+ }
+ } catch {}
+
+ // create animations
+ for (const sk of SPRITE_POOL) {
+ const meta = SPRITE_META[sk];
+ for (const action of ["idle", "walk"]) {
+ const animKey = `anim:${sk}:${action}`;
+ if (this.anims.exists(animKey)) continue;
+ const n = Number(meta?.[action]?.frames || 0);
+ const fps = Number(meta?.[action]?.fps || 8);
+ const frames = [];
+ for (let i = 0; i < n; i++)
+ frames.push({ key: this._frameKey(sk, action, i) });
+ this.anims.create({
+ key: animKey,
+ frames,
+ frameRate: Math.max(1, fps),
+ repeat: -1,
+ });
+ }
+ }
+ }
+
+ _calcOpaqueBoundsForTexture(texKey) {
+ try {
+ const tex = this.textures.get(texKey);
+ const img = tex && tex.getSourceImage ? tex.getSourceImage() : null;
+ if (!img || !img.width || !img.height) return null;
+ const w = img.width;
+ const h = img.height;
+ const c = document.createElement("canvas");
+ c.width = w;
+ c.height = h;
+ const ctx = c.getContext("2d", { willReadFrequently: true });
+ if (!ctx) return null;
+ ctx.clearRect(0, 0, w, h);
+ ctx.drawImage(img, 0, 0);
+ const data = ctx.getImageData(0, 0, w, h).data;
+ let minX = w,
+ minY = h,
+ maxX = -1,
+ maxY = -1;
+ for (let y = 0; y < h; y++) {
+ for (let x = 0; x < w; x++) {
+ const a = data[(y * w + x) * 4 + 3];
+ if (a > 0) {
+ if (x < minX) minX = x;
+ if (y < minY) minY = y;
+ if (x > maxX) maxX = x;
+ if (y > maxY) maxY = y;
+ }
+ }
+ }
+ if (maxX < 0) return null;
+ return { texW: w, texH: h, x: minX, y: minY, w: maxX - minX + 1, h: maxY - minY + 1 };
+ } catch {
+ return null;
+ }
+ }
+
+ _ensureSpriteBounds(spriteKey) {
+ if (this._spriteBounds[spriteKey]) return this._spriteBounds[spriteKey];
+ const k = this._frameKey(spriteKey, "idle", 0);
+ if (!this.textures.exists(k)) return null;
+ const b = this._calcOpaqueBoundsForTexture(k);
+ if (!b) return null;
+ this._spriteBounds[spriteKey] = b;
+ return b;
+ }
+
+ _applySpriteScaleOrigin(spr, spriteKey) {
+ const b = this._ensureSpriteBounds(spriteKey);
+ if (b && b.h > 0) {
+ const s = this._targetContentH / b.h;
+ spr.setScale(s);
+ const ox = (b.x + b.w * 0.5) / b.texW;
+ const oy = (b.y + b.h) / b.texH;
+ spr.setOrigin(ox, oy);
+ } else {
+ spr.setOrigin(0.5, 1);
+ if (spr.height > 0) spr.setScale(this._targetContentH / spr.height);
+ }
+ }
+
+ _syncRolesOnMap(ws) {
+ const roles = ws?.roles || [];
+ const activeId = ws?.active_role_id || null;
+ const inTransit = Boolean(ws?.in_transit_to_node_id);
+
+ // Assign sprite keys with minimal repetition:
+ // 1) explicit sprite_key from backend
+ // 2) default trio by name
+ // 3) keep existing rendered assignment (spr.__spriteKey) if valid
+ // 4) pick an unused key from the pool
+ // 5) fallback to stable hash
+ const assignedKeyByRoleId = new Map();
+ const usedKeys = new Set();
+ const namePresetKey = (r) => {
+ const n = String(r?.name || "").trim();
+ if (n === "阿鳌" || n === "Leo" || n === "利奥") return "ao";
+ if (n === "太白" || n === "Sam" || n === "山姆") return "taibai";
+ if (n === "小山" || n === "Jade" || n === "杰德") return "xiaoshan";
+ return null;
+ };
+
+ for (const r of roles) {
+ const rid = String(r.role_id);
+ const explicit = r && (r.sprite_key || r.spriteKey || r.sprite);
+ const k = explicit && SPRITE_META[String(explicit)] ? String(explicit) : null;
+ if (k) {
+ assignedKeyByRoleId.set(rid, k);
+ usedKeys.add(k);
+ }
+ }
+ for (const r of roles) {
+ const rid = String(r.role_id);
+ if (assignedKeyByRoleId.has(rid)) continue;
+ const k = namePresetKey(r);
+ if (k && SPRITE_META[k]) {
+ assignedKeyByRoleId.set(rid, k);
+ usedKeys.add(k);
+ }
+ }
+ for (const r of roles) {
+ const rid = String(r.role_id);
+ if (assignedKeyByRoleId.has(rid)) continue;
+ const spr = this.roleSprites.get(rid);
+ const k =
+ spr && spr.__spriteKey && SPRITE_META[String(spr.__spriteKey)]
+ ? String(spr.__spriteKey)
+ : null;
+ if (k) {
+ assignedKeyByRoleId.set(rid, k);
+ usedKeys.add(k);
+ }
+ }
+ for (const r of roles) {
+ const rid = String(r.role_id);
+ if (assignedKeyByRoleId.has(rid)) continue;
+ const k = SPRITE_POOL.find((x) => !usedKeys.has(x));
+ if (k) {
+ assignedKeyByRoleId.set(rid, k);
+ usedKeys.add(k);
+ } else {
+ // pool exhausted: fallback to stable hash (will reuse)
+ const h = hash32(rid);
+ assignedKeyByRoleId.set(rid, SPRITE_POOL[h % SPRITE_POOL.length]);
+ }
+ }
+
+ const keep = new Set();
+ const centerX = Math.floor(VIEW_W * 0.5);
+ const baseY = Math.floor(MAIN_H * 0.78);
+ // not a straight line: spread + slight arc + deterministic jitter per role
+ const maxSpread = Math.min(Math.floor(VIEW_W * 0.62), 340);
+ const spread = roles.length <= 1 ? 0 : Math.min(maxSpread, 56 * (roles.length - 1));
+ const step = roles.length <= 1 ? 0 : spread / (roles.length - 1);
+ const startX = Math.floor(centerX - spread / 2);
+
+ for (let i = 0; i < roles.length; i++) {
+ const r = roles[i];
+ const rid = String(r.role_id);
+ keep.add(rid);
+ let spr = this.roleSprites.get(rid);
+ const spriteKey = assignedKeyByRoleId.get(rid) || this._pickSpriteKey(r);
+ const action = inTransit && rid === String(activeId) ? "walk" : "idle";
+ const animKey = `anim:${spriteKey}:${action}`;
+
+ if (!spr) {
+ spr = this.add.sprite(0, 0, this._frameKey(spriteKey, "idle", 0));
+ spr.__spriteKey = spriteKey;
+ spr.__action = null;
+ this.world.add(spr);
+ this.roleSprites.set(rid, spr);
+ this._applySpriteScaleOrigin(spr, spriteKey);
+ }
+
+ // deterministic jitter from role_id
+ const h = hash32(rid);
+ const jx = ((h & 0xff) / 255 - 0.5) * 10; // [-5,5]
+ const jy = (((h >>> 8) & 0xff) / 255 - 0.5) * 8; // [-4,4]
+ const t = roles.length <= 1 ? 0.5 : i / (roles.length - 1);
+ const arc = Math.sin(t * Math.PI) * -10; // lift middle a bit
+ const x = Math.round(startX + i * step + jx);
+ const y = Math.round(baseY + arc + jy);
+ spr.setPosition(x, y);
+ spr.setDepth(20 + i);
+ spr.setAlpha(rid === String(activeId) ? 1.0 : 0.9);
+
+ if (spr.__spriteKey !== spriteKey) {
+ spr.setTexture(this._frameKey(spriteKey, "idle", 0));
+ spr.__spriteKey = spriteKey;
+ this._applySpriteScaleOrigin(spr, spriteKey);
+ spr.__action = null;
+ }
+
+ if (spr.__action !== action && this.anims.exists(animKey)) {
+ spr.play(animKey, true);
+ spr.__action = action;
+ }
+
+ // --- name label (always visible) ---
+ const leaderId = ws?.leader_role_id ? String(ws.leader_role_id) : null;
+ this._upsertNameLabel(rid, r.name, spr, rid === String(activeId), rid === leaderId);
+
+ // keep bubble anchored (respect per-bubble lift)
+ const bub = this.roleBubbles.get(rid);
+ if (bub) {
+ const lift = Math.round(Number(bub.__lift || 0));
+ bub.x = Math.round(spr.x);
+ bub.y = Math.round(spr.y - 54 - lift);
+ }
+ }
+
+ // After positioning all labels, resolve overlaps.
+ try {
+ this._resolveNameLabelOverlaps();
+ } catch {}
+
+ for (const [rid, spr] of this.roleSprites.entries()) {
+ if (!keep.has(rid)) {
+ try {
+ spr.destroy();
+ } catch {}
+ this.roleSprites.delete(rid);
+ const lbl = this.roleNameLabels.get(rid);
+ if (lbl) {
+ try {
+ lbl.destroy();
+ } catch {}
+ this.roleNameLabels.delete(rid);
+ }
+ const bub = this.roleBubbles.get(rid);
+ if (bub) {
+ try {
+ bub.destroy();
+ } catch {}
+ this.roleBubbles.delete(rid);
+ }
+ const t = this._bubbleTimers.get(rid);
+ if (t) {
+ try {
+ t.remove(false);
+ } catch {}
+ this._bubbleTimers.delete(rid);
+ }
+ }
+ }
+ }
+
+ _resolveNameLabelOverlaps() {
+ // Simple vertical push-down to avoid name labels overlapping when party members stand close.
+ const items = [];
+ for (const [rid, lbl] of this.roleNameLabels.entries()) {
+ if (!lbl || !lbl.active) continue;
+ items.push({ rid, lbl });
+ }
+ // Sort by y (top to bottom)
+ items.sort((a, b) => (a.lbl.y || 0) - (b.lbl.y || 0));
+
+ const pad = 2;
+ for (let i = 0; i < items.length; i++) {
+ const a = items[i].lbl;
+ const ab = a.getBounds();
+ for (let j = i + 1; j < items.length; j++) {
+ const b = items[j].lbl;
+ const bb = b.getBounds();
+ const overlapX = Math.min(ab.right, bb.right) - Math.max(ab.left, bb.left);
+ const overlapY = Math.min(ab.bottom, bb.bottom) - Math.max(ab.top, bb.top);
+ if (overlapX > 0 && overlapY > 0) {
+ // push the lower one down
+ const dy = overlapY + pad;
+ b.y = Math.round(b.y + dy);
+ // update bb for subsequent checks
+ bb.y += dy;
+ bb.top += dy;
+ bb.bottom += dy;
+ }
+ }
+ }
+ }
+
+ _makePixelText(text, fontPx = 10, color = "#e8f0ff", pixelScale = 4) {
+ // Hard-edge pixel text (baked): render large on a canvas, then downsample with NEAREST into a new canvas,
+ // upload as a texture, and display as an Image (no fractional scaling at runtime).
+ const scale = clamp(Math.round(Number(pixelScale) || 4), 1, 4);
+ // Wrap width in *final* pixels. Keep bubbles readable on narrow viewports.
+ const wrapW = clamp(Math.round(VIEW_W * 0.55), 140, 260);
+ // Prefer CJK-friendly fonts first; fall back to pixel latin font where available.
+ const fontFamily =
+ '"PingFang SC","Hiragino Sans GB","Microsoft YaHei","Press Start 2P",ui-monospace,Menlo,Monaco,Consolas,monospace';
+
+ const srcFontPx = Math.round(fontPx * scale);
+ const srcWrapW = Math.round(wrapW * scale);
+
+ // Simple wrap (works well for CJK and short phrases)
+ const measureCtx = document.createElement("canvas").getContext("2d");
+ measureCtx.font = `${srcFontPx}px ${fontFamily}`;
+ const raw = String(text ?? "");
+ const tokens = raw.split("");
+ const lines = [];
+ let line = "";
+ for (const ch of tokens) {
+ if (ch === "\n") {
+ lines.push(line);
+ line = "";
+ continue;
+ }
+ const test = line + ch;
+ const w = measureCtx.measureText(test).width;
+ if (w > srcWrapW && line.length > 0) {
+ lines.push(line);
+ line = ch;
+ } else {
+ line = test;
+ }
+ }
+ if (line) lines.push(line);
+
+ // More line height so bold stroke text doesn't collide between lines.
+ const lineH = Math.round(srcFontPx * 1.45);
+ const padX = Math.round(5 * scale);
+ const padY = Math.round(4 * scale);
+ let maxLineW = 0;
+ for (const l of lines) maxLineW = Math.max(maxLineW, Math.ceil(measureCtx.measureText(l).width));
+ const srcW = Math.max(1, maxLineW + padX * 2);
+ const srcH = Math.max(1, lines.length * lineH + padY * 2);
+
+ const src = document.createElement("canvas");
+ src.width = srcW;
+ src.height = srcH;
+ const sctx = src.getContext("2d", { willReadFrequently: true });
+ sctx.imageSmoothingEnabled = false;
+ sctx.clearRect(0, 0, srcW, srcH);
+ sctx.font = `${srcFontPx}px ${fontFamily}`;
+ sctx.textBaseline = "top";
+ sctx.fillStyle = color;
+
+ // Thick dark stroke improves readability for small CJK glyphs after downsampling.
+ const strokeW = Math.max(1, Math.round(2.0 * scale));
+ sctx.lineJoin = "round";
+ sctx.miterLimit = 2;
+ sctx.lineWidth = strokeW;
+ sctx.strokeStyle = "#061022";
+
+ // Draw text at integer coords
+ let y = padY;
+ for (const l of lines) {
+ sctx.strokeText(l, padX, y);
+ sctx.fillText(l, padX, y);
+ y += lineH;
+ }
+
+ // Harden edges: binarize alpha so glyphs don't look "foggy".
+ try {
+ const imgData = sctx.getImageData(0, 0, srcW, srcH);
+ const d = imgData.data;
+ const thresh = 96;
+ for (let i = 0; i < d.length; i += 4) {
+ d[i + 3] = d[i + 3] < thresh ? 0 : 255;
+ }
+ sctx.putImageData(imgData, 0, 0);
+ } catch {}
+
+ // Downsample baked output
+ const out = document.createElement("canvas");
+ const outW = Math.max(1, Math.round(srcW / scale));
+ const outH = Math.max(1, Math.round(srcH / scale));
+ out.width = outW;
+ out.height = outH;
+ const octx = out.getContext("2d", { willReadFrequently: true });
+ octx.imageSmoothingEnabled = false;
+ octx.clearRect(0, 0, outW, outH);
+ octx.drawImage(src, 0, 0, outW, outH);
+
+ const key = `pixtext:${hash32(`${raw}|${fontPx}|${color}|${scale}|${Date.now()}|${Math.random()}`)}`;
+ try {
+ if (this.textures.exists(key)) this.textures.remove(key);
+ } catch {}
+ this.textures.addCanvas(key, out);
+ try {
+ this.textures.get(key).setFilter(Phaser.Textures.FilterMode.NEAREST);
+ } catch {}
+
+ const img = this.add.image(0, 0, key);
+ img.setOrigin(0.5, 0.5);
+ img.setDepth(55);
+ // Avoid subpixel blur
+ img.x = Math.round(img.x);
+ img.y = Math.round(img.y);
+ return img;
+ }
+
+ _resolveOutcome(ws) {
+ const roles = ws?.roles || [];
+ const exhausted = roles.length > 0 && roles.every((r) => Number(r?.attrs?.stamina || 0) <= 0);
+ if (exhausted) return "fail";
+ const terminalIds = new Set(["end_exit", "bailout_2800", "bailout_ridge"]);
+ const curId = String(ws?.current_node_id || "");
+ if (terminalIds.has(curId)) return "success";
+ const node = nodeById(curId);
+ const kind = String(node?.kind || "").toLowerCase();
+ if (kind === "end" || kind === "exit") return "success";
+ return null;
+ }
+
+ _updateOutcomeBanner(ws) {
+ const outcome = this._resolveOutcome(ws);
+ if (outcome === this._outcomeState) return;
+ this._outcomeState = outcome;
+ if (this._outcomeBanner) {
+ try {
+ this._outcomeBanner.destroy();
+ } catch {}
+ this._outcomeBanner = null;
+ }
+ if (!outcome) return;
+ const label = outcome === "success" ? "success" : "fail";
+ const color = outcome === "success" ? "#a1ffb9" : "#ff7c7c";
+ const textImg = this._makePixelText(label, 18, color, 4);
+ textImg.setOrigin(0.5, 0.5);
+ const padX = 12;
+ const padY = 8;
+ const w = Math.ceil(textImg.displayWidth + padX * 2);
+ const h = Math.ceil(textImg.displayHeight + padY * 2);
+ const bg = this.add.rectangle(0, 0, w, h, 0x061022, 0.82);
+ bg.setStrokeStyle(2, 0x3a4a66, 0.95);
+ const c = this.add.container(Math.round(VIEW_W / 2), Math.round(MAIN_H * 0.22));
+ c.add(bg);
+ c.add(textImg);
+ c.setDepth(90);
+ c.setScrollFactor(0);
+ this._outcomeBanner = c;
+ }
+
+ _upsertNameLabel(roleId, name, spr, isActive, isLeader) {
+ const rid = String(roleId);
+ const labelText = String(name || "").trim() || i18nT("roleLabel");
+ const color = isActive
+ ? (isLeader ? "#ffe6a8" : "#e8f0ff")
+ : (isLeader ? "#ffd27c" : "#cfe8ff");
+ const needsRecreate = (obj, nextText, nextColor) => {
+ if (!obj) return true;
+ if (obj.__pixText !== nextText) return true;
+ if (obj.__pixColor !== nextColor) return true;
+ return false;
+ };
+ let t = this.roleNameLabels.get(rid);
+ if (needsRecreate(t, labelText, color)) {
+ if (t) {
+ try {
+ t.destroy();
+ } catch {}
+ this.roleNameLabels.delete(rid);
+ }
+ // Names: baked hard-edge pixel text
+ t = this._makePixelText(labelText, this._nameFontPx, color, 4);
+ t.__pixText = labelText;
+ t.__pixColor = color;
+ t.setDepth(55);
+ this.world.add(t);
+ this.roleNameLabels.set(rid, t);
+ }
+ // Place under feet
+ t.setOrigin(0.5, 0);
+ t.x = spr.x;
+ t.y = spr.y + 4;
+ t.setAlpha(isActive ? 1.0 : 0.9);
+ }
+
+ _say(roleId, text) {
+ const rid = String(roleId || "");
+ if (!rid) return;
+ const spr = this.roleSprites.get(rid);
+ if (!spr) return;
+
+ const msg = String(text || "").trim();
+ if (!msg) return;
+
+ // replace existing bubble
+ const prev = this.roleBubbles.get(rid);
+ if (prev) {
+ try {
+ prev.destroy();
+ } catch {}
+ this.roleBubbles.delete(rid);
+ }
+
+ const g = this.add.graphics();
+ // Speech bubble text: always use the highest supersample for crisp hard edges.
+ const t = this._makePixelText(msg, this._bubbleFontPx, "#e8f0ff", 4);
+ t.setOrigin(0.5, 1);
+
+ const maxW = 220;
+ const w = Math.min(maxW, Math.ceil(t.displayWidth));
+ const h = Math.ceil(t.displayHeight);
+ const padX = 10;
+ const padY = 8;
+
+ // transparent bubble feel
+ g.fillStyle(0x0b1630, 0.35);
+ g.fillRect(-w / 2 - padX, -h - padY * 1.2, w + padX * 2, h + padY * 1.6);
+ g.lineStyle(2, 0x7cf2ff, 0.35);
+ g.strokeRect(-w / 2 - padX, -h - padY * 1.2, w + padX * 2, h + padY * 1.6);
+
+ // small tail
+ g.fillStyle(0x0b1630, 0.35);
+ g.beginPath();
+ g.moveTo(0, 0);
+ g.lineTo(-6, -10);
+ g.lineTo(6, -10);
+ g.closePath();
+ g.fillPath();
+
+ const lift = Math.round(Math.min(70, Math.max(0, h * 0.6)));
+ const c = this.add.container(spr.x, spr.y - 54 - lift);
+ c.__lift = lift;
+ c.setPosition(Math.round(c.x), Math.round(c.y));
+ c.setDepth(60);
+ c.add(g);
+ t.setPosition(0, -10);
+ c.add(t);
+ this.world.add(c);
+ this.roleBubbles.set(rid, c);
+
+ // reset timer: fade out then destroy
+ const prevTimer = this._bubbleTimers.get(rid);
+ if (prevTimer) {
+ try {
+ prevTimer.remove(false);
+ } catch {}
+ }
+ const timer = this.time.delayedCall(3600, () => {
+ const b = this.roleBubbles.get(rid);
+ if (!b) return;
+ this.tweens.add({
+ targets: b,
+ alpha: 0,
+ duration: 220,
+ onComplete: () => {
+ try {
+ b.destroy();
+ } catch {}
+ this.roleBubbles.delete(rid);
+ },
+ });
+ });
+ this._bubbleTimers.set(rid, timer);
+ }
+
+ setState(ws) {
+ const nodeId = ws?.current_node_id || mapStartNodeId || "start";
+ const visited = ws?.visited_node_ids || [nodeId];
+ const weather = ws?.weather || "cloudy";
+ const tod = ws?.time_of_day || "morning";
+ const prevTod = this._tod;
+
+ const nodeChanged = nodeId !== this._curNodeId;
+ const moodChanged = weather !== this._weather || tod !== this._tod;
+
+ const walkKey = `${nodeId}|${ws?.in_transit_from_node_id || ""}|${ws?.in_transit_to_node_id || ""}|${Number(
+ ws?.in_transit_progress_km || 0,
+ )}`;
+ const walkChanged = walkKey !== this._walkKey;
+ this._walkKey = walkKey;
+
+ this._curNodeId = nodeId;
+ this._visited = new Set(visited);
+ this._weather = weather;
+ this._tod = tod;
+ this._ws = ws || {};
+ this._rainActive = String(weather) === "rainy";
+ this._snowActive = String(weather) === "snowy";
+ this._windActive = String(weather) === "windy";
+ this._fogActive = String(weather) === "foggy";
+
+ // theme change: kili -> scene_kilimanjaro, else -> scene_base
+ const theme = String(ws?.theme || worldState?.theme || "aotai");
+ const themeChanged = theme !== this._theme;
+ if (themeChanged) this._theme = theme;
+
+ // render roles on big map
+ try {
+ this._syncRolesOnMap(ws);
+ } catch {}
+
+ // 2) update main world: re-render when location/segment or theme changes
+ const segFrom = ws?.in_transit_from_node_id || nodeId;
+ const segTo = ws?.in_transit_to_node_id || nodeId;
+ const sceneKey = `${nodeId}|${segFrom}|${segTo}`;
+ const sceneChanged = sceneKey !== this._sceneKey;
+ this._sceneKey = sceneKey;
+ if (nodeChanged || sceneChanged || themeChanged) {
+ const nextSceneId = theme === "kili" ? "kilimanjaro" : "base";
+ if (nextSceneId !== this._sceneId) this._swapScene(nextSceneId);
+ }
+
+ this._updateOutcomeBanner(ws);
+
+ // mood overlay can change frequently without re-rendering tiles
+ if (moodChanged) {
+ // Night arrival: fade to dark gradually
+ if (this.worldOverlay && tod === "night" && prevTod !== "night") {
+ try {
+ this.worldOverlay.fillColor = 0x000000;
+ this.tweens.add({
+ targets: this.worldOverlay,
+ alpha: 0.35,
+ duration: 1200,
+ ease: "Sine.easeInOut",
+ });
+ } catch {
+ this._applyMoodOverlay(weather, tod);
+ }
+ } else {
+ this._applyMoodOverlay(weather, tod);
+ }
+ }
+
+ // 3) small "step" animation on move
+ if (nodeChanged || walkChanged) {
+ // Background is continuously scrolling now (two-copy loop), so no extra world bob here.
+ // tiny bob on active role (if present)
+ const activeId = ws?.active_role_id ? String(ws.active_role_id) : null;
+ const activeSpr = activeId ? this.roleSprites.get(activeId) : null;
+ if (activeSpr) {
+ this.tweens.add({
+ targets: activeSpr,
+ y: activeSpr.y - 6,
+ duration: 220,
+ yoyo: true,
+ ease: "Sine.easeInOut",
+ });
+ }
+ }
+ }
+
+ _applyMoodOverlay(weather, tod) {
+ let overlayColor = 0x000000;
+ let overlayAlpha = 0.0;
+
+ if (tod === "evening" || tod === "night") {
+ overlayColor = 0x000000;
+ overlayAlpha = tod === "night" ? 0.35 : 0.18;
+ }
+ if (tod === "morning") {
+ overlayColor = 0x0b1630;
+ overlayAlpha = 0.08;
+ }
+
+ if (weather === "foggy") {
+ overlayColor = 0xc6d0e8;
+ overlayAlpha = 0.18;
+ }
+ if (weather === "rainy") {
+ overlayColor = 0x2b3c66;
+ overlayAlpha = 0.16;
+ }
+ if (weather === "sunny") {
+ overlayColor = 0xffd27c;
+ overlayAlpha = 0.06;
+ }
+
+ if (this.worldOverlay) {
+ this.worldOverlay.fillColor = overlayColor;
+ this.worldOverlay.setAlpha(overlayAlpha);
+ }
+ }
+
+ _initRainDrops() {
+ this._rainDrops = [];
+ const count = Math.max(80, Math.floor((VIEW_W * MAIN_H) / 6000));
+ for (let i = 0; i < count; i++) {
+ this._rainDrops.push({
+ x: Math.random() * VIEW_W,
+ y: Math.random() * MAIN_H,
+ len: 6 + Math.random() * 6,
+ speed: 140 + Math.random() * 120,
+ drift: -12 + Math.random() * 24,
+ });
+ }
+ }
+
+ _updateRain(delta) {
+ if (!this._rainGfx) return;
+ if (!this._rainActive) {
+ this._rainGfx.clear();
+ return;
+ }
+ const dt = Math.max(0, Number(delta || 0) / 1000);
+ this._rainGfx.clear();
+ this._rainGfx.lineStyle(1, 0x8ab4ff, 0.6);
+ for (const d of this._rainDrops) {
+ d.y += d.speed * dt;
+ d.x += d.drift * dt;
+ if (d.y > MAIN_H + d.len) {
+ d.y = -d.len;
+ d.x = Math.random() * VIEW_W;
+ }
+ if (d.x < -20) d.x = VIEW_W + 20;
+ if (d.x > VIEW_W + 20) d.x = -20;
+ const x1 = Math.round(d.x);
+ const y1 = Math.round(d.y);
+ const x2 = Math.round(d.x + 1);
+ const y2 = Math.round(d.y + d.len);
+ this._rainGfx.beginPath();
+ this._rainGfx.moveTo(x1, y1);
+ this._rainGfx.lineTo(x2, y2);
+ this._rainGfx.strokePath();
+ }
+ }
+
+ _initSnowFlakes() {
+ this._snowFlakes = [];
+ const count = Math.max(60, Math.floor((VIEW_W * MAIN_H) / 9000));
+ for (let i = 0; i < count; i++) {
+ this._snowFlakes.push({
+ x: Math.random() * VIEW_W,
+ y: Math.random() * MAIN_H,
+ r: 1 + Math.random() * 1.6,
+ speed: 26 + Math.random() * 24,
+ drift: -8 + Math.random() * 16,
+ });
+ }
+ }
+
+ _updateSnow(delta) {
+ if (!this._snowGfx) return;
+ if (!this._snowActive) {
+ this._snowGfx.clear();
+ return;
+ }
+ const dt = Math.max(0, Number(delta || 0) / 1000);
+ this._snowGfx.clear();
+ this._snowGfx.fillStyle(0xe8f0ff, 0.75);
+ for (const f of this._snowFlakes) {
+ f.y += f.speed * dt;
+ f.x += f.drift * dt;
+ if (f.y > MAIN_H + 4) {
+ f.y = -4;
+ f.x = Math.random() * VIEW_W;
+ }
+ if (f.x < -10) f.x = VIEW_W + 10;
+ if (f.x > VIEW_W + 10) f.x = -10;
+ this._snowGfx.fillCircle(Math.round(f.x), Math.round(f.y), f.r);
+ }
+ }
+
+ _initWindStreaks() {
+ this._windStreaks = [];
+ const count = Math.max(40, Math.floor((VIEW_W * MAIN_H) / 12000));
+ for (let i = 0; i < count; i++) {
+ this._windStreaks.push({
+ x: Math.random() * VIEW_W,
+ y: Math.random() * MAIN_H,
+ len: 10 + Math.random() * 12,
+ speed: 80 + Math.random() * 60,
+ });
+ }
+ }
+
+ _updateWind(delta) {
+ if (!this._windGfx) return;
+ if (!this._windActive) {
+ this._windGfx.clear();
+ return;
+ }
+ const dt = Math.max(0, Number(delta || 0) / 1000);
+ this._windGfx.clear();
+ this._windGfx.lineStyle(1, 0xc6d0e8, 0.5);
+ for (const w of this._windStreaks) {
+ w.x += w.speed * dt;
+ w.y += (w.speed * 0.12) * dt;
+ if (w.x > VIEW_W + w.len) {
+ w.x = -w.len;
+ w.y = Math.random() * MAIN_H;
+ }
+ if (w.y > MAIN_H + 10) w.y = -10;
+ const x1 = Math.round(w.x);
+ const y1 = Math.round(w.y);
+ const x2 = Math.round(w.x + w.len);
+ const y2 = Math.round(w.y + w.len * 0.15);
+ this._windGfx.beginPath();
+ this._windGfx.moveTo(x1, y1);
+ this._windGfx.lineTo(x2, y2);
+ this._windGfx.strokePath();
+ }
+ }
+
+ _initFogBlobs() {
+ this._fogBlobs = [];
+ const count = 5;
+ for (let i = 0; i < count; i++) {
+ this._fogBlobs.push({
+ x: Math.random() * VIEW_W,
+ y: Math.random() * MAIN_H,
+ w: VIEW_W * (0.4 + Math.random() * 0.5),
+ h: MAIN_H * (0.12 + Math.random() * 0.18),
+ speed: 6 + Math.random() * 6,
+ });
+ }
+ }
+
+ _updateFog(delta) {
+ if (!this._fogGfx) return;
+ if (!this._fogActive) {
+ this._fogGfx.clear();
+ return;
+ }
+ const dt = Math.max(0, Number(delta || 0) / 1000);
+ this._fogGfx.clear();
+ this._fogGfx.fillStyle(0xc6d0e8, 0.18);
+ for (const b of this._fogBlobs) {
+ b.x += b.speed * dt;
+ if (b.x > VIEW_W + b.w) b.x = -b.w;
+ const x = Math.round(b.x);
+ const y = Math.round(b.y);
+ const w = Math.round(b.w);
+ const h = Math.round(b.h);
+ this._fogGfx.fillRect(x, y, w, h);
+ }
+ }
+
+ _renderWorld(nodeId, segFrom, segTo) {
+ // Deterministic seed from session + node + mood
+ const seedStr =
+ String((worldState && worldState.session_id) || "seed") +
+ "|" +
+ String(nodeId) +
+ "|" +
+ String(segFrom || "") +
+ "|" +
+ String(segTo || "");
+ const rng = mulberry32(hash32(seedStr));
+
+ // Fallback: if assets failed to load, render a simple placeholder
+ if (!this.textures.exists("grass") || (this._assetErrors && this._assetErrors.length)) {
+ this.worldRT.clear();
+ this.worldRT.fill(0x0b1630, 1, 0, 0, VIEW_W, MAIN_H);
+ // simple path
+ const py = Math.floor(MAIN_H * 0.55);
+ this.worldRT.fill(0x223044, 1, 0, py, VIEW_W, 80);
+ return;
+ }
+
+ // Clear
+ this.worldRT.clear();
+
+ // Base tiling (grass)
+ const tilesX = Math.ceil(VIEW_W / TILE) + 1;
+ const tilesY = Math.ceil(MAIN_H / TILE) + 1;
+ for (let y = 0; y < tilesY; y++) {
+ for (let x = 0; x < tilesX; x++) {
+ this.worldRT.draw("grass", x * TILE, y * TILE);
+ }
+ }
+
+ // Path depending on node kind (VERTICAL: bottom -> top)
+ const n = nodeById(nodeId);
+ const kind = n?.kind || "main";
+
+ // center X, with a gentle drift as Y increases
+ let cx = Math.floor(tilesX / 2);
+ const pathW = kind === "camp" ? 3 : kind === "lake" ? 3 : 2;
+ const driftMax = kind === "junction" ? 2 : 1;
+
+ // Track the path center per row so side props can follow the corridor
+ const pathCenterByY = new Array(tilesY);
+
+ for (let y = tilesY - 1; y >= 0; y--) {
+ // occasional drift
+ if (rng() < 0.22) {
+ const d = rng() < 0.5 ? -1 : 1;
+ cx = clamp(cx + d, 2, tilesX - 3);
+ }
+ // small wobble around drifted center
+ const wobble = rng() < 0.18 ? (rng() < 0.5 ? -driftMax : driftMax) : 0;
+ const xCenter = clamp(cx + wobble, 2, tilesX - 3);
+ pathCenterByY[y] = xCenter;
+
+ for (let dx = -Math.floor(pathW / 2); dx <= Math.floor(pathW / 2); dx++) {
+ this.worldRT.draw("brick", (xCenter + dx) * TILE, y * TILE);
+ }
+
+ // slightly rough edges
+ if (rng() < 0.12)
+ this.worldRT.draw(
+ "brick",
+ (xCenter - Math.floor(pathW / 2) - 1) * TILE,
+ y * TILE,
+ );
+ if (rng() < 0.12)
+ this.worldRT.draw(
+ "brick",
+ (xCenter + Math.floor(pathW / 2) + 1) * TILE,
+ y * TILE,
+ );
+ }
+
+ // Sprinkle leaves
+ const leafN = 40 + Math.floor(rng() * 80);
+ for (let i = 0; i < leafN; i++) {
+ const px = Math.floor(rng() * (VIEW_W - 16));
+ const py = Math.floor(rng() * (MAIN_H - 16));
+ this.worldRT.draw("leaves", px, py);
+ }
+
+ // Trees/bushes/fence depending on kind (favor lining the path sides)
+ const leftBandMax = Math.max(2, Math.floor(tilesX / 2) - Math.floor(pathW / 2) - 2);
+ const rightBandMin = Math.min(tilesX - 3, Math.floor(tilesX / 2) + Math.floor(pathW / 2) + 2);
+ // Trees: place props along the path for "forest corridor" feel
+ // Keep spacing stable across different PIXEL_SCALE (small tilesY would otherwise over-pack rows).
+ const minGapTiles = 2;
+ const maxRows = Math.max(3, Math.floor((tilesY - 2) / minGapTiles));
+ const targetRows = clamp(4 + Math.floor(rng() * 3), 3, maxRows);
+
+ let lastLX = -999;
+ let lastRX = 999;
+ let placed = 0;
+ for (let yTile = 1; yTile < tilesY - 1 && placed < targetRows; yTile += minGapTiles) {
+ // probabilistic skip for variety / less crowd
+ if (rng() < 0.35) continue;
+
+ const yPx = yTile * TILE;
+ const center = pathCenterByY[yTile] ?? Math.floor(tilesX / 2);
+ const corridorHalf = Math.floor(pathW / 2);
+ const maxOffset = Math.max(5, Math.floor(tilesX * 0.32));
+
+ // alternate offsets so trees don't align into a single column
+ const alt = (placed % 3) * 2;
+ const offL = 4 + alt + Math.floor(rng() * Math.max(2, maxOffset - alt));
+ const offR = 4 + (2 - (placed % 3)) * 2 + Math.floor(rng() * Math.max(2, maxOffset));
+
+ let lxTile = clamp(center - corridorHalf - offL, 1, tilesX - 2);
+ let rxTile = clamp(center + corridorHalf + offR, 1, tilesX - 2);
+
+ // ensure some horizontal separation from last placed columns
+ if (Math.abs(lxTile - lastLX) < 2) lxTile = clamp(lxTile + 2, 1, tilesX - 2);
+ if (Math.abs(rxTile - lastRX) < 2) rxTile = clamp(rxTile - 2, 1, tilesX - 2);
+
+ const lx = lxTile * TILE;
+ const rx = rxTile * TILE;
+
+ // Not every row needs both sides
+ const both = rng() < 0.40;
+ if (both || rng() < 0.65) this.worldRT.draw("tree", lx, yPx - 64);
+ if (both || rng() < 0.65) this.worldRT.draw("tree", rx, yPx - 64);
+
+ lastLX = lxTile;
+ lastRX = rxTile;
+ placed += 1;
+ }
+
+ // Bushes: sprinkle near bottom and sides
+ const bushN = 10 + Math.floor(rng() * 10);
+ for (let i = 0; i < bushN; i++) {
+ const sideLeft = rng() < 0.5;
+ const xTile = sideLeft
+ ? Math.floor(rng() * leftBandMax)
+ : rightBandMin + Math.floor(rng() * Math.max(1, tilesX - rightBandMin));
+ const yPx = Math.floor(rng() * (VIEW_H - 32));
+ this.worldRT.draw("bush", xTile * TILE, yPx - 24);
+ }
+
+ // Fence hints in camp/exits
+ if (kind === "camp" || kind === "exit" || rng() < 0.18) {
+ const fx = Math.floor(VIEW_W * 0.18);
+ const fy = Math.floor(VIEW_H * 0.78);
+ this.worldRT.draw("fence", fx, fy);
+ this.worldRT.draw("fence", VIEW_W - fx - 160, fy);
+ }
+
+ if (rng() < 0.18) {
+ const x = Math.floor(VIEW_W * 0.45 + rng() * 120);
+ const y = Math.floor(VIEW_H * 0.72);
+ this.worldRT.draw("pumpkin", x, y);
+ }
+ }
+
+ // (The Phaser minimap code remains here for compatibility, but is currently disabled via SKIP_PHASER_MINIMAP.)
+ _drawMinimap(nodeId) {
+ const ws = this._ws || {};
+ const MINI_W = this.miniCam.width;
+ const MINI_H = this.miniCam.height;
+
+ const pad = 14;
+ const mapW = MINI_W - pad * 2;
+ const mapH = MINI_H - pad * 2;
+
+ const toMini = (n) => {
+ const x = pad + (clamp(n.x, 0, 100) / 100) * mapW;
+ const y = pad + (clamp(n.y, 0, 100) / 100) * mapH;
+ return { x: x, y: y };
+ };
+
+ this.minimapG.clear();
+
+ for (const t of this.minimapLabels || []) {
+ try {
+ t.destroy();
+ } catch {}
+ }
+ this.minimapLabels = [];
+
+ // frame
+ this.minimapG.lineStyle(2, 0x3a4a66, 1);
+ this.minimapG.strokeRect(1, 1, MINI_W - 2, MINI_H - 2);
+
+ // edges (curved for a softer look)
+ const curveSign = (s) => {
+ let h = 0;
+ for (let i = 0; i < s.length; i++) h = (h * 31 + s.charCodeAt(i)) | 0;
+ return h & 1 ? 1 : -1;
+ };
+
+ // Phaser Graphics doesn't support Canvas quadraticCurveTo; draw curves by sampling points.
+ const strokeQuad = (g, ax, ay, cx, cy, bx, by, segments = 16) => {
+ g.beginPath();
+ g.moveTo(ax, ay);
+ for (let i = 1; i <= segments; i++) {
+ const t = i / segments;
+ const mt = 1 - t;
+ const x = mt * mt * ax + 2 * mt * t * cx + t * t * bx;
+ const y = mt * mt * ay + 2 * mt * t * cy + t * t * by;
+ g.lineTo(x, y);
+ }
+ g.strokePath();
+ };
+
+ for (const e of mapEdges || []) {
+ const a = nodeById(e.from_node_id);
+ const b = nodeById(e.to_node_id);
+ if (!a || !b) continue;
+ const pa = toMini(a);
+ const pb = toMini(b);
+
+ const visited = this._visited.has(e.to_node_id);
+ const isExit = e.kind === "exit";
+
+ const baseColor = isExit ? 0xff7c7c : 0x7cf2ff;
+ const alpha = visited ? 0.85 : 0.28;
+ const width = visited ? 3 : 2;
+
+ const dx = pb.x - pa.x;
+ const dy = pb.y - pa.y;
+ const len = Math.max(1, Math.hypot(dx, dy));
+ const px = -dy / len;
+ const py = dx / len;
+ const midx = (pa.x + pb.x) * 0.5;
+ const midy = (pa.y + pb.y) * 0.5;
+ const bend =
+ (8 + (isExit ? 6 : 0) + (visited ? 3 : 0)) *
+ curveSign(String(e.from_node_id) + "->" + String(e.to_node_id));
+ const cx = midx + px * bend;
+ const cy = midy + py * bend;
+ // glow
+ this.minimapG.lineStyle(width + 3, 0x0b1630, Math.min(0.65, alpha));
+ strokeQuad(this.minimapG, pa.x, pa.y, cx, cy, pb.x, pb.y, 16);
+ // main stroke
+ this.minimapG.lineStyle(width, baseColor, alpha);
+ strokeQuad(this.minimapG, pa.x, pa.y, cx, cy, pb.x, pb.y, 16);
+ }
+
+ // nodes + labels
+ for (const n of mapNodes || []) {
+ const p = toMini(n);
+ const isCur = n.node_id === nodeId;
+ const isVisited = this._visited.has(n.node_id) || isCur;
+
+ const kind = n.kind || "main";
+ const kColor =
+ kind === "exit"
+ ? 0xff7c7c
+ : kind === "camp"
+ ? 0x7cffc6
+ : kind === "lake"
+ ? 0x7ca8ff
+ : kind === "peak"
+ ? 0xffd27c
+ : kind === "start"
+ ? 0x9dff7c
+ : kind === "end"
+ ? 0xb0b6c6
+ : 0x7cf2ff;
+
+ // soft glow + dot
+ this.minimapG.fillStyle(0x0b1630, 0.85);
+ this.minimapG.fillCircle(p.x, p.y, isCur ? 7 : 6);
+ this.minimapG.fillStyle(kColor, isVisited ? 0.95 : 0.55);
+ this.minimapG.fillCircle(p.x, p.y, isCur ? 5 : 4);
+
+ // label (only key nodes + current to avoid clutter)
+ const isKey =
+ isCur ||
+ ["start", "camp", "junction", "lake", "peak", "exit", "end"].includes(kind);
+ const label = (n.name || n.node_id || "").trim();
+ if (isKey && label) {
+ const t = this.add.text(p.x + MINI_LABEL_OFF_X, p.y - MINI_LABEL_OFF_Y, label, {
+ // Use a CJK-friendly font stack to improve readability for Chinese labels
+ fontFamily:
+ '"PingFang SC","Hiragino Sans GB","Microsoft YaHei",ui-monospace,Menlo,Monaco,Consolas,monospace',
+ fontSize: `${MINI_LABEL_FONT_PX}px`,
+ antialias: false,
+ color: isVisited ? "#d6faff" : "#7aa0b3",
+ });
+ // keep internal text resolution close to actual device pixel ratio
+ t.setResolution(MINI_TEXT_RESOLUTION);
+ // force nearest-neighbor sampling for the text texture (avoid blur)
+ try {
+ this.textures.get(t.texture.key).setFilter(Phaser.Textures.FilterMode.NEAREST);
+ } catch {}
+ t.setStroke("#061022", MINI_LABEL_STROKE_W);
+ t.setAlpha(isCur ? 1.0 : 0.86);
+ t.setPadding(2, 1, 2, 1);
+ t.setBackgroundColor("#061022");
+ t.setDepth(5);
+ // snap label to whole pixels
+ t.x = Math.round(t.x);
+ t.y = Math.round(t.y);
+ this.minimap.add(t);
+ this.minimapLabels.push(t);
+ }
+ }
+
+ // marker
+ const cur = nodeById(nodeId);
+ const toId = ws && ws.in_transit_to_node_id;
+ const fromId = ws && ws.in_transit_from_node_id;
+ const prog = (ws && ws.in_transit_progress_km) || 0;
+ const tot = (ws && ws.in_transit_total_km) || 0;
+
+ if (fromId && toId && tot > 0) {
+ const a = nodeById(fromId);
+ const b = nodeById(toId);
+ if (a && b) {
+ const pa = toMini(a);
+ const pb = toMini(b);
+ const t = clamp(prog / tot, 0, 1);
+ this.minimapMarker.setPosition(pa.x + (pb.x - pa.x) * t, pa.y + (pb.y - pa.y) * t);
+ return;
+ }
+ }
+
+ if (cur) {
+ const mp = toMini(cur);
+ this.minimapMarker.setPosition(mp.x, mp.y);
+ }
+ }
+ }
+
+ const config = {
+ type: Phaser.AUTO,
+ parent: "game-root",
+ width: VIEW_W,
+ height: VIEW_H,
+ resolution: GAME_RESOLUTION,
+ scale: {
+ mode: Phaser.Scale.NONE,
+ zoom: ZOOM,
+ autoCenter: Phaser.Scale.CENTER_BOTH,
+ },
+ backgroundColor: "rgba(0,0,0,0)",
+ pixelArt: true,
+ antialias: false,
+ transparent: true,
+ scene: [HikeScene],
+ };
+
+ new Phaser.Game(config);
+}
diff --git a/demos/AOTAI_Hike/frontend/src/render.js b/demos/AOTAI_Hike/frontend/src/render.js
new file mode 100644
index 000000000..0439f3748
--- /dev/null
+++ b/demos/AOTAI_Hike/frontend/src/render.js
@@ -0,0 +1,519 @@
+import { branchEl, chatEl, partyEl, rolesEl, statusEl } from "./dom.js";
+import { t } from "./i18n.js";
+import { edgeByToId, mapNodes, nodeById, worldState, sessionId } from "./state.js";
+import { avatarUrl, pct, statClass } from "./utils.js";
+
+export function logMsg(msg) {
+ if (!chatEl) return;
+ const isNearBottom = (el, thresholdPx = 32) =>
+ el.scrollTop + el.clientHeight >= el.scrollHeight - thresholdPx;
+ const stickToBottom = isNearBottom(chatEl);
+
+ if (msg.kind === "action") {
+ const last = chatEl.lastElementChild;
+ if (last && last.dataset && last.dataset.roleName === (msg.role_name || "")) {
+ const contentEl = last.querySelector(".content");
+ if (contentEl) {
+ const raw = String(msg.content || "");
+ const sep = raw.includes("：") ? "：" : ": ";
+ const action = raw.includes(sep) ? raw.split(sep).slice(1).join(sep) : raw;
+ contentEl.textContent = `${contentEl.textContent}(${action})`;
+ if (stickToBottom) {
+ const scrollToBottom = () => {
+ try {
+ chatEl.scrollTop = chatEl.scrollHeight;
+ } catch {}
+ };
+ try {
+ requestAnimationFrame(scrollToBottom);
+ setTimeout(scrollToBottom, 0);
+ } catch {
+ scrollToBottom();
+ }
+ }
+ return;
+ }
+ }
+ }
+
+ const div = document.createElement("div");
+ div.className = `msg ${msg.kind}`;
+ div.dataset.roleName = msg.role_name || "";
+ const meta = document.createElement("div");
+ meta.className = "meta";
+ const who = msg.kind === "system" ? t("system") : msg.role_name || t("unknown");
+ meta.textContent = `[${who}]`;
+ const content = document.createElement("div");
+ content.className = "content";
+ content.textContent = msg.content;
+ div.appendChild(meta);
+ div.appendChild(content);
+ chatEl.appendChild(div);
+
+ // Notify Phaser: show bubble for role speech
+ try {
+ if (
+ msg.kind === "speech" &&
+ msg.role_id &&
+ window.__aoTaiMapView &&
+ typeof window.__aoTaiMapView.say === "function"
+ ) {
+ window.__aoTaiMapView.say(msg.role_id, msg.content);
+ }
+ } catch {}
+
+ // Auto-scroll only if user is already near bottom.
+ if (stickToBottom) {
+ const scrollToBottom = () => {
+ try {
+ chatEl.scrollTop = chatEl.scrollHeight;
+ } catch {}
+ };
+ try {
+ requestAnimationFrame(scrollToBottom);
+ setTimeout(scrollToBottom, 0);
+ } catch {
+ scrollToBottom();
+ }
+ }
+}
+
+export function setStatus() {
+ if (!worldState) return;
+ const node =
+ nodeById(worldState.current_node_id) ||
+ mapNodes[Math.min(worldState.route_node_index, mapNodes.length - 1)];
+ const active = (worldState.roles || []).find((r) => r.role_id === worldState.active_role_id);
+ let locStr = node?.name || "?";
+ if (worldState.in_transit_to_node_id) {
+ const toN = nodeById(worldState.in_transit_to_node_id);
+ const prog = Math.floor(worldState.in_transit_progress_km || 0);
+ const tot = Math.floor(worldState.in_transit_total_km || 0);
+ locStr = `${t("statusEnRoute")}${toN?.name || worldState.in_transit_to_node_id} (${prog}/${tot}km)`;
+ }
+ statusEl.textContent = `Session: ${worldState.session_id} | ${t("statusLocation")}: ${locStr} | ${t("statusDay")} ${
+ worldState.day
+ }/${worldState.time_of_day} | ${t("statusWeather")}: ${worldState.weather} | ${t("statusCurrentRole")}: ${active?.name || "-"}`;
+}
+
+export function renderRoles() {
+ if (!rolesEl || !worldState) return;
+ rolesEl.innerHTML = "";
+ for (const r of worldState.roles || []) {
+ const pill = document.createElement("div");
+ pill.className = "role-pill" + (r.role_id === worldState.active_role_id ? " active" : "");
+ pill.textContent = r.name;
+ pill.onclick = async () => {
+ await window.__aoTaiActions.apiSetActiveRole(r.role_id);
+ };
+ rolesEl.appendChild(pill);
+ }
+}
+
+export function renderBranchChoices() {
+ if (!branchEl || !worldState) return;
+ const fromId = worldState.current_node_id;
+ const nextIds = worldState.available_next_node_ids || [];
+ if (!nextIds || nextIds.length <= 1) {
+ branchEl.style.display = "none";
+ branchEl.innerHTML = "";
+ return;
+ }
+
+ const leader = worldState.leader_role_id;
+ const active = worldState.active_role_id;
+ if (leader && active && leader !== active) {
+ branchEl.style.display = "none";
+ branchEl.innerHTML = "";
+ return;
+ }
+
+ const items = [];
+ for (const id of nextIds) {
+ const n = nodeById(id);
+ const e = edgeByToId(fromId, id);
+ const label = e && e.label ? e.label : t("nextStep");
+ const name = n ? n.name : id;
+ items.push({ id: id, text: label + "：" + name });
+ }
+
+ branchEl.style.display = "block";
+ branchEl.innerHTML = "";
+
+ const label = document.createElement("div");
+ label.className = "label";
+ label.textContent = t("junctionChoose");
+
+ const box = document.createElement("div");
+ box.className = "choices";
+
+ for (const it of items) {
+ const btn = document.createElement("button");
+ btn.textContent = it.text;
+
+ btn.onclick = async () => {
+
+ branchEl.style.display = "none";
+ branchEl.innerHTML = "";
+
+ worldState.available_next_node_ids = [];
+ worldState.phase = "free";
+
+ await window.__aoTaiActions.apiAct("MOVE_FORWARD", { next_node_id: it.id });
+ };
+
+ box.appendChild(btn);
+ }
+
+ branchEl.appendChild(label);
+ branchEl.appendChild(box);
+}
+
+export function renderPartyStatus() {
+ if (!worldState) return;
+ partyEl.innerHTML = "";
+
+ const roles = worldState.roles || [];
+ if (roles.length === 0) {
+ const empty = document.createElement("div");
+ empty.className = "party-card";
+ empty.style.width = "520px";
+ empty.innerHTML = `${t("partyStatus")}
${t("partyEmpty")}
`;
+ partyEl.appendChild(empty);
+ return;
+ }
+
+ for (const r of roles) {
+ const card = document.createElement("div");
+ card.className = "party-card" + (r.role_id === worldState.active_role_id ? " active" : "");
+ card.onclick = async () => {
+ await window.__aoTaiActions.apiSetActiveRole(r.role_id);
+ };
+ if (r.persona) attachRoleTooltip(card, r.persona);
+
+ const stamina = pct(r?.attrs?.stamina);
+ const mood = pct(r?.attrs?.mood);
+ const exp = pct(r?.attrs?.experience);
+ const risk = pct(r?.attrs?.risk_tolerance);
+ const supplies = pct(r?.attrs?.supplies || 80);
+
+ const head = document.createElement("div");
+ head.className = "party-head";
+
+ const img = document.createElement("img");
+ img.className = "party-ava";
+ img.alt = `${r.name} avatar`;
+ img.src = avatarUrl(r);
+
+ const meta = document.createElement("div");
+ meta.innerHTML = `${r.name}
+ ${t("currentPlay")}：${r.role_id === worldState.active_role_id ? t("yes") : t("no")}
`;
+
+ head.appendChild(img);
+ head.appendChild(meta);
+
+ const stat = document.createElement("div");
+ stat.className = "stat";
+ stat.innerHTML = `
+
+
${t("stamina")}
+
+
${stamina}
+
+
${t("mood")}
+
+
${mood}
+
+
${t("experience")}
+
+
${exp}
+
+
${t("risk")}
+
+
${risk}
+
+
${t("supplies")}
+
+
${supplies}
+
+