add celestrial phenon to front
This commit is contained in:
@@ -118,6 +118,34 @@ def serialize_events_for_client(events: List[Event]) -> List[dict]:
|
||||
})
|
||||
return serialized
|
||||
|
||||
def serialize_phenomenon(phenomenon) -> Optional[dict]:
|
||||
"""序列化天地灵机对象"""
|
||||
if not phenomenon:
|
||||
return None
|
||||
|
||||
# 安全地获取 rarity.name
|
||||
rarity_str = "N"
|
||||
if hasattr(phenomenon, "rarity") and phenomenon.rarity:
|
||||
# 检查 rarity 是否是 Enum (RarityLevel)
|
||||
if hasattr(phenomenon.rarity, "name"):
|
||||
rarity_str = phenomenon.rarity.name
|
||||
# 检查 rarity 是否是 Rarity dataclass (包含 level 字段)
|
||||
elif hasattr(phenomenon.rarity, "level") and hasattr(phenomenon.rarity.level, "name"):
|
||||
rarity_str = phenomenon.rarity.level.name
|
||||
|
||||
# 生成效果描述
|
||||
from src.utils.effect_desc import format_effects_to_text
|
||||
effect_desc = format_effects_to_text(phenomenon.effects) if hasattr(phenomenon, "effects") else ""
|
||||
|
||||
return {
|
||||
"id": phenomenon.id,
|
||||
"name": phenomenon.name,
|
||||
"desc": phenomenon.desc,
|
||||
"rarity": rarity_str,
|
||||
"duration_years": phenomenon.duration_years,
|
||||
"effect_desc": effect_desc
|
||||
}
|
||||
|
||||
def init_game():
|
||||
"""初始化游戏世界,逻辑复用自 src/run/run.py"""
|
||||
print("正在初始化游戏世界...")
|
||||
@@ -215,7 +243,8 @@ async def game_loop():
|
||||
"year": int(world.month_stamp.get_year()),
|
||||
"month": world.month_stamp.get_month().value,
|
||||
"events": serialize_events_for_client(events),
|
||||
"avatars": avatar_updates
|
||||
"avatars": avatar_updates,
|
||||
"phenomenon": serialize_phenomenon(world.current_phenomenon)
|
||||
}
|
||||
await manager.broadcast(state)
|
||||
except Exception as e:
|
||||
@@ -394,6 +423,7 @@ def get_state():
|
||||
"avatar_count": len(world.avatar_manager.avatars),
|
||||
"avatars": av_list,
|
||||
"events": recent_events,
|
||||
"phenomenon": serialize_phenomenon(world.current_phenomenon),
|
||||
"is_paused": game_instance.get("is_paused", False)
|
||||
}
|
||||
|
||||
|
||||
@@ -18,8 +18,8 @@ ai:
|
||||
max_parse_retries: 3
|
||||
|
||||
game:
|
||||
init_npc_num: 12
|
||||
sect_num: 3 # init_npc_num大于sect_num时,会随机选择sect_num个宗门
|
||||
init_npc_num: 6
|
||||
sect_num: 2 # init_npc_num大于sect_num时,会随机选择sect_num个宗门
|
||||
npc_birth_rate_per_month: 0.01
|
||||
fortune_probability: 0.005
|
||||
|
||||
|
||||
@@ -1,7 +1,8 @@
|
||||
<script setup lang="ts">
|
||||
import { useWorldStore } from '../../stores/world'
|
||||
import { gameSocket } from '../../api/socket'
|
||||
import { ref, onMounted, onUnmounted } from 'vue'
|
||||
import { ref, onMounted, onUnmounted, computed } from 'vue'
|
||||
import { NPopover } from 'naive-ui'
|
||||
|
||||
const store = useWorldStore()
|
||||
const isConnected = ref(false)
|
||||
@@ -18,6 +19,18 @@ onMounted(() => {
|
||||
onUnmounted(() => {
|
||||
if (cleanup) cleanup()
|
||||
})
|
||||
|
||||
const phenomenonColor = computed(() => {
|
||||
const p = store.currentPhenomenon;
|
||||
if (!p) return '#ccc';
|
||||
switch (p.rarity) {
|
||||
case 'N': return '#ccc';
|
||||
case 'R': return '#4dabf7'; // Blue
|
||||
case 'SR': return '#a0d911'; // Lime
|
||||
case 'SSR': return '#fa8c16'; // Orange/Gold
|
||||
default: return '#ccc';
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -28,6 +41,35 @@ onUnmounted(() => {
|
||||
</div>
|
||||
<div class="center">
|
||||
<span class="time">{{ store.year }}年 {{ store.month }}月</span>
|
||||
|
||||
<!-- 天地灵机 -->
|
||||
<div class="phenomenon" v-if="store.currentPhenomenon">
|
||||
<span class="divider">|</span>
|
||||
<n-popover trigger="hover" placement="bottom" style="max-width: 300px;">
|
||||
<template #trigger>
|
||||
<span class="phenomenon-name" :style="{ color: phenomenonColor }">
|
||||
[{{ store.currentPhenomenon.name }}]
|
||||
</span>
|
||||
</template>
|
||||
<div class="phenomenon-card">
|
||||
<div class="p-header" :style="{ color: phenomenonColor }">
|
||||
<span class="p-title">{{ store.currentPhenomenon.name }}</span>
|
||||
<span class="p-rarity">{{ store.currentPhenomenon.rarity }}</span>
|
||||
</div>
|
||||
<div class="p-desc">{{ store.currentPhenomenon.desc }}</div>
|
||||
|
||||
<!-- 效果描述 -->
|
||||
<div class="effect-block" v-if="store.currentPhenomenon.effect_desc">
|
||||
<div class="effect-label">效果:</div>
|
||||
<div class="effect-content">{{ store.currentPhenomenon.effect_desc }}</div>
|
||||
</div>
|
||||
|
||||
<div class="p-duration" v-if="store.currentPhenomenon.duration_years">
|
||||
持续 {{ store.currentPhenomenon.duration_years }} 年
|
||||
</div>
|
||||
</div>
|
||||
</n-popover>
|
||||
</div>
|
||||
</div>
|
||||
<div class="author">
|
||||
肥桥今天吃什么的<a
|
||||
@@ -70,6 +112,86 @@ onUnmounted(() => {
|
||||
margin-right: 8px;
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.phenomenon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.divider {
|
||||
color: #444;
|
||||
}
|
||||
|
||||
.phenomenon-name {
|
||||
cursor: help;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.phenomenon-card {
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.p-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 8px;
|
||||
font-weight: bold;
|
||||
font-size: 15px;
|
||||
border-bottom: 1px solid #333;
|
||||
padding-bottom: 4px;
|
||||
}
|
||||
|
||||
.p-rarity {
|
||||
font-size: 12px;
|
||||
opacity: 0.8;
|
||||
border: 1px solid currentColor;
|
||||
padding: 0 4px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
|
||||
.p-desc {
|
||||
font-size: 13px;
|
||||
color: #ddd;
|
||||
line-height: 1.5;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
/* 统一的效果块样式 */
|
||||
.effect-block {
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid #444;
|
||||
border-radius: 4px;
|
||||
padding: 8px 10px;
|
||||
margin: 8px 0;
|
||||
}
|
||||
|
||||
.effect-label {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.effect-content {
|
||||
font-size: 13px;
|
||||
color: #fadb14; /* 亮黄色,匹配游戏常见的高亮色 */
|
||||
font-weight: 500;
|
||||
line-height: 1.5;
|
||||
white-space: pre-wrap;
|
||||
}
|
||||
|
||||
.p-duration {
|
||||
font-size: 12px;
|
||||
color: #888;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.status-dot {
|
||||
display: inline-block;
|
||||
width: 6px;
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
import { defineStore } from 'pinia';
|
||||
import { ref, shallowRef, computed } from 'vue';
|
||||
import type { AvatarSummary, GameEvent, MapMatrix, RegionSummary } from '../types/core';
|
||||
import type { AvatarSummary, GameEvent, MapMatrix, RegionSummary, CelestialPhenomenon } from '../types/core';
|
||||
import type { TickPayloadDTO, InitialStateDTO, MapResponseDTO } from '../types/api';
|
||||
import { gameApi } from '../api/game';
|
||||
|
||||
@@ -20,6 +20,8 @@ export const useWorldStore = defineStore('world', () => {
|
||||
const regions = shallowRef<Map<string | number, RegionSummary>>(new Map());
|
||||
|
||||
const isLoaded = ref(false);
|
||||
|
||||
const currentPhenomenon = ref<CelestialPhenomenon | null>(null);
|
||||
|
||||
// --- Getters ---
|
||||
|
||||
@@ -118,6 +120,9 @@ export const useWorldStore = defineStore('world', () => {
|
||||
|
||||
if (payload.avatars) updateAvatars(payload.avatars);
|
||||
if (payload.events) addEvents(payload.events);
|
||||
if (payload.phenomenon !== undefined) {
|
||||
currentPhenomenon.value = payload.phenomenon;
|
||||
}
|
||||
}
|
||||
|
||||
async function initialize() {
|
||||
@@ -145,6 +150,9 @@ export const useWorldStore = defineStore('world', () => {
|
||||
// 3. Set Events (Initial state might have history?)
|
||||
events.value = [];
|
||||
if (stateRes.events) addEvents(stateRes.events);
|
||||
|
||||
// 4. Set Phenomenon
|
||||
currentPhenomenon.value = stateRes.phenomenon || null;
|
||||
|
||||
isLoaded.value = true;
|
||||
} catch (e) {
|
||||
@@ -158,6 +166,7 @@ export const useWorldStore = defineStore('world', () => {
|
||||
avatars.value = new Map();
|
||||
events.value = [];
|
||||
isLoaded.value = false;
|
||||
currentPhenomenon.value = null;
|
||||
}
|
||||
|
||||
return {
|
||||
@@ -169,10 +178,10 @@ export const useWorldStore = defineStore('world', () => {
|
||||
mapData,
|
||||
regions,
|
||||
isLoaded,
|
||||
currentPhenomenon,
|
||||
|
||||
initialize,
|
||||
handleTick,
|
||||
reset
|
||||
};
|
||||
});
|
||||
|
||||
|
||||
@@ -3,7 +3,7 @@
|
||||
* 这些类型严格对应后端接口返回的 JSON 结构。
|
||||
*/
|
||||
|
||||
import type { MapMatrix } from './core';
|
||||
import type { MapMatrix, CelestialPhenomenon } from './core';
|
||||
|
||||
// --- 通用响应 ---
|
||||
|
||||
@@ -29,6 +29,7 @@ export interface InitialStateDTO {
|
||||
pic_id?: number;
|
||||
}>;
|
||||
events?: unknown[];
|
||||
phenomenon?: CelestialPhenomenon | null;
|
||||
}
|
||||
|
||||
export interface TickPayloadDTO {
|
||||
@@ -37,6 +38,7 @@ export interface TickPayloadDTO {
|
||||
month: number;
|
||||
avatars?: Array<Partial<InitialStateDTO['avatars'] extends (infer U)[] ? U : never>>;
|
||||
events?: unknown[];
|
||||
phenomenon?: CelestialPhenomenon | null;
|
||||
}
|
||||
|
||||
export interface MapResponseDTO {
|
||||
@@ -64,4 +66,3 @@ export interface SaveFileDTO {
|
||||
game_time: string;
|
||||
version: string;
|
||||
}
|
||||
|
||||
|
||||
@@ -117,6 +117,17 @@ export interface RegionDetail extends EntityBase {
|
||||
plants: EffectEntity[];
|
||||
}
|
||||
|
||||
// --- 天地灵机 ---
|
||||
|
||||
export interface CelestialPhenomenon {
|
||||
id: number;
|
||||
name: string;
|
||||
desc: string;
|
||||
rarity: string;
|
||||
duration_years?: number;
|
||||
effect_desc?: string;
|
||||
}
|
||||
|
||||
// --- 事件 (Events) ---
|
||||
|
||||
export interface GameEvent {
|
||||
@@ -140,4 +151,3 @@ export type HoverSegment = {
|
||||
};
|
||||
|
||||
export type HoverLine = HoverSegment[];
|
||||
|
||||
|
||||
Reference in New Issue
Block a user