3916 lines
106 KiB
Vue
3916 lines
106 KiB
Vue
<template>
|
||
<div class="pet-system-container">
|
||
<!-- 名字輸入對話框 -->
|
||
<div v-if="showNameInput" class="name-input-modal">
|
||
<div class="modal-content">
|
||
<h2> 為你的寵物命名</h2>
|
||
<p>請為你的新寵物取一個名字</p>
|
||
<input
|
||
v-model="inputPetName"
|
||
@keyup.enter="confirmName"
|
||
type="text"
|
||
placeholder="輸入寵物名字..."
|
||
maxlength="20"
|
||
class="name-input"
|
||
/>
|
||
<div class="modal-buttons">
|
||
<button @click="confirmName" :disabled="!inputPetName || inputPetName.trim().length === 0">
|
||
確認
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="header">
|
||
<h1>{{ petState?.name || 'LOADING...' }}</h1>
|
||
<p class="subtitle">{{ systemStatus }}</p>
|
||
</div>
|
||
|
||
<!-- 寵物狀態顯示 -->
|
||
<div class="pet-status" v-if="petState">
|
||
<!-- 基礎屬性 -->
|
||
<div class="status-section">
|
||
<h3>基礎屬性</h3>
|
||
<div class="status-grid">
|
||
<div class="stat-item">
|
||
<span class="stat-label">飢餓</span>
|
||
<div class="stat-bar">
|
||
<div class="stat-fill" :style="{ width: `${petState.hunger || 0}%` }"></div>
|
||
</div>
|
||
<span class="stat-value">{{ Math.round(petState.hunger || 0) }}</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">快樂</span>
|
||
<div class="stat-bar">
|
||
<div class="stat-fill" :style="{ width: `${petState.happiness || 0}%` }"></div>
|
||
</div>
|
||
<span class="stat-value">{{ Math.round(petState.happiness || 0) }}</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span class="stat-label">健康</span>
|
||
<div class="stat-bar">
|
||
<div class="stat-fill" :style="{ width: `${(petState.health / getMaxHealth(petState)) * 100 || 0}%` }"></div>
|
||
</div>
|
||
<span class="stat-value">{{ Math.round(petState.health || 0) }}/{{ getMaxHealth(petState) }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 寵物資料 -->
|
||
<div class="status-section">
|
||
<h3>═ 寵物資料 ═</h3>
|
||
<div class="pet-info-grid">
|
||
<div class="info-item">
|
||
<span class="info-label">名字</span>
|
||
<span class="info-value">{{ petState.name || '未命名' }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">階段</span>
|
||
<span class="info-value">{{ getStageName(petState.stage) }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">年齡</span>
|
||
<span class="info-value">{{ formatAge(petState.ageSeconds) }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">身高</span>
|
||
<span class="info-value">{{ Math.round(petState.height || 0) }} cm</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">身高</span>
|
||
<span class="info-value">{{ Math.round(petState.height || 0) }} cm</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">體重</span>
|
||
<span class="info-value">{{ Math.round(petState.weight || 0) }} g</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">命格</span>
|
||
<div class="info-value-group">
|
||
<span class="info-value highlight">{{ petState.destiny ? petState.destiny.name : '無' }}</span>
|
||
<span v-if="petState.destiny" class="info-sub">{{ petState.destiny.description }}</span>
|
||
</div>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">力量 (STR)</span>
|
||
<span class="info-value">{{ Math.round(petState.effectiveStr || petState.str || 0) }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">智力 (INT)</span>
|
||
<span class="info-value">{{ Math.round(petState.effectiveInt || petState.int || 0) }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">敏捷 (DEX)</span>
|
||
<span class="info-value">{{ Math.round(petState.effectiveDex || petState.dex || 0) }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">運勢 (LUCK)</span>
|
||
<span class="info-value">{{ Math.round(petState.effectiveLuck || petState.luck || 0) }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">世代</span>
|
||
<span class="info-value">第 {{ petState.generation || 1 }} 代</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">神明好感</span>
|
||
<span class="info-value">{{ getDeityFavorDisplay(petState) }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">HP</span>
|
||
<span class="info-value">{{ Math.round(petState.hp || petState.health || 0) }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">攻擊</span>
|
||
<span class="info-value">{{ Math.round(petState.attack || 0) }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">防禦</span>
|
||
<span class="info-value">{{ Math.round(petState.defense || 0) }}</span>
|
||
</div>
|
||
<div class="info-item">
|
||
<span class="info-label">速度</span>
|
||
<span class="info-value">{{ Math.round(petState.speed || 0) }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
|
||
|
||
<div class="status-section">
|
||
<h3>═ 加成與隱藏數值 ═</h3>
|
||
<div class="bonus-grid">
|
||
<div
|
||
class="bonus-item"
|
||
v-for="(value, key) in getAllBonuses(petState)"
|
||
:key="key"
|
||
:class="{ 'not-implemented': !isImplemented(key) }"
|
||
>
|
||
<span class="bonus-label">{{ getBonusName(key) }}</span>
|
||
<span class="bonus-value" :class="{ positive: value > 0, negative: value < 0 }">
|
||
{{ value > 0 ? '+' : '' }}{{ value }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 狀態標籤 -->
|
||
<div class="status-badges">
|
||
<span v-if="petState.isSleeping" class="badge">[SLEEP] 睡覺中</span>
|
||
<span v-if="petState.isSick" class="badge sick">[SICK] 生病</span>
|
||
<span v-if="petState.poopCount > 0" class="badge">[POOP] 便便 x{{ petState.poopCount }}</span>
|
||
</div>
|
||
|
||
<!-- 成就系統 -->
|
||
<div class="status-section">
|
||
<h3>═ 成就系統 ═</h3>
|
||
<div class="achievement-summary">
|
||
<div class="achievement-stats">
|
||
<span>已解鎖: {{ unlockedAchievementsCount }}/{{ totalAchievementsCount }}</span>
|
||
<span>進度: {{ achievementProgress }}%</span>
|
||
</div>
|
||
</div>
|
||
<details class="achievement-list">
|
||
<summary>查看成就列表 ({{ unlockedAchievementsCount }}/{{ totalAchievementsCount }})</summary>
|
||
<div class="achievement-grid">
|
||
<div
|
||
v-for="achievement in allAchievements"
|
||
:key="achievement.id"
|
||
class="achievement-item"
|
||
:class="{ unlocked: isAchievementUnlocked(achievement.id), locked: !isAchievementUnlocked(achievement.id) }"
|
||
>
|
||
<div class="achievement-icon">{{ achievement.icon || '🏆' }}</div>
|
||
<div class="achievement-info">
|
||
<div class="achievement-name">{{ achievement.name }}</div>
|
||
<div class="achievement-desc">{{ achievement.description }}</div>
|
||
<div v-if="!isAchievementUnlocked(achievement.id)" class="achievement-progress">
|
||
<div class="progress-bar">
|
||
<div class="progress-fill" :style="{ width: getAchievementProgressPercent(achievement) + '%' }"></div>
|
||
</div>
|
||
<span class="progress-text">{{ getAchievementProgressText(achievement) }}</span>
|
||
</div>
|
||
<div v-if="isAchievementUnlocked(achievement.id) && achievement.reward" class="achievement-reward">
|
||
<span class="reward-label">獎勵:</span>
|
||
<span v-for="(value, key) in achievement.reward.buffs" :key="key" class="reward-item">
|
||
{{ getBonusName(key) }}{{ formatBonusValue(value) }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
|
||
<!-- 背包系統 -->
|
||
<div class="status-section">
|
||
<h3>═ 背包系統 ═</h3>
|
||
|
||
<!-- 裝備槽位 -->
|
||
<div class="equipment-slots">
|
||
<h4>裝備槽位</h4>
|
||
<div class="rarity-legend">
|
||
<div class="legend-title">稀有度說明：</div>
|
||
<div class="legend-items">
|
||
<span
|
||
v-for="(rarityData, rarityKey) in itemRarity"
|
||
:key="rarityKey"
|
||
class="legend-item"
|
||
:class="`rarity-${rarityKey}`"
|
||
>
|
||
{{ rarityData.name }} (掉落: {{ (rarityData.dropRate * 100).toFixed(0) }}%)
|
||
</span>
|
||
</div>
|
||
<div class="legend-note">邊框顏色代表稀有度，數字為基礎掉落機率</div>
|
||
</div>
|
||
<div class="slots-grid">
|
||
<div
|
||
v-for="(slotName, slotKey) in equipmentSlots"
|
||
:key="slotKey"
|
||
class="equipment-slot-container"
|
||
>
|
||
<div class="slot-header">{{ slotName.name }} {{ slotName.icon }}</div>
|
||
|
||
<!-- 實際裝備槽位 -->
|
||
<div class="equipment-slot equipment-slot-main" :class="{ equipped: hasEquipped(slotKey, 'equipment') }">
|
||
<div class="slot-label">實際裝備</div>
|
||
<div v-if="hasEquipped(slotKey, 'equipment')" class="slot-item">
|
||
<span class="item-icon">{{ getEquippedItemIcon(slotKey, 'equipment') }}</span>
|
||
<span class="item-name">{{ getEquippedItemName(slotKey, 'equipment') }}</span>
|
||
<button
|
||
@click="handleUnequip(slotKey, 'equipment')"
|
||
class="unequip-btn"
|
||
title="卸下實際裝備"
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
<div v-else class="slot-empty">空</div>
|
||
</div>
|
||
|
||
<!-- 外觀套件槽位 -->
|
||
<div class="equipment-slot equipment-slot-appearance" :class="{ equipped: hasEquipped(slotKey, 'appearance') }">
|
||
<div class="slot-label">外觀套件</div>
|
||
<div v-if="hasEquipped(slotKey, 'appearance')" class="slot-item">
|
||
<span class="item-icon">{{ getEquippedItemIcon(slotKey, 'appearance') }}</span>
|
||
<span class="item-name">{{ getEquippedItemName(slotKey, 'appearance') }}</span>
|
||
<button
|
||
@click="handleUnequip(slotKey, 'appearance')"
|
||
class="unequip-btn"
|
||
title="卸下外觀套件"
|
||
>
|
||
✕
|
||
</button>
|
||
</div>
|
||
<div v-else class="slot-empty">空</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 背包道具列表 -->
|
||
<details class="inventory-list">
|
||
<summary>查看背包 ({{ inventoryItemCount }} 種道具)</summary>
|
||
<div class="inventory-grid">
|
||
<div
|
||
v-for="(itemData, itemId) in inventoryItems"
|
||
:key="itemId"
|
||
class="inventory-item"
|
||
:class="getRarityClass(itemData.item.rarity)"
|
||
@mouseenter="showItemTooltip($event, itemData.item, itemId, itemData.instance)"
|
||
@mouseleave="hideItemTooltip"
|
||
>
|
||
<div class="item-header">
|
||
<span class="item-icon">{{ itemData.item.icon || '📦' }}</span>
|
||
<span class="item-name" :style="{ color: getRarityColor(itemData.item.rarity) }">
|
||
{{ itemData.item.name }}
|
||
</span>
|
||
<span v-if="itemData.count > 1" class="item-count">x{{ itemData.count }}</span>
|
||
</div>
|
||
<div class="item-info">
|
||
<div class="item-rarity" :style="{ color: getRarityColor(itemData.item.rarity) }">
|
||
{{ getRarityName(itemData.item.rarity) }}
|
||
<span v-if="itemData.item.dropRate !== undefined" class="drop-rate">
|
||
(掉落: {{ (itemData.item.dropRate * 100).toFixed(0) }}%)
|
||
</span>
|
||
</div>
|
||
<div class="item-type">{{ itemTypeNames[itemData.item.type] || itemData.item.type }}</div>
|
||
<div class="item-description">{{ itemData.item.description }}</div>
|
||
|
||
<!-- 道具效果說明 -->
|
||
<div v-if="itemData.item.effects" class="item-effects">
|
||
<div class="effects-title">效果：</div>
|
||
<div v-if="itemData.item.effects.flat" class="effects-flat">
|
||
<span v-for="(value, key) in itemData.item.effects.flat" :key="key" class="effect-item">
|
||
{{ getStatName(key) }}{{ formatStatValue(value) }}
|
||
</span>
|
||
</div>
|
||
<div v-if="itemData.item.effects.percent" class="effects-percent">
|
||
<span v-for="(value, key) in itemData.item.effects.percent" :key="key" class="effect-item">
|
||
{{ getStatName(key) }}{{ formatPercentValue(value) }}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="itemData.instance && itemData.instance.durability !== undefined && itemData.instance.durability !== Infinity" class="item-durability">
|
||
耐久度: {{ itemData.instance.durability }}/{{ itemData.item.maxDurability }}
|
||
</div>
|
||
</div>
|
||
<div class="item-actions">
|
||
<button
|
||
v-if="itemData.item.type === 'consumable'"
|
||
@click="handleUseItem(itemId)"
|
||
class="action-btn use-btn"
|
||
:disabled="!inventorySystem || itemData.count < 1"
|
||
>
|
||
使用
|
||
</button>
|
||
<button
|
||
v-if="canEquip(itemData.item) && itemData.item.type !== 'appearance'"
|
||
@click="handleEquip(itemId, itemData.item.slot, 'equipment')"
|
||
class="action-btn equip-btn"
|
||
:disabled="!inventorySystem"
|
||
title="裝備為實際裝備（有數值效果）"
|
||
>
|
||
裝備（實際）
|
||
</button>
|
||
<button
|
||
v-if="canEquip(itemData.item) && itemData.item.type === 'appearance'"
|
||
@click="handleEquip(itemId, itemData.item.slot, 'appearance')"
|
||
class="action-btn equip-btn appearance-btn"
|
||
:disabled="!inventorySystem"
|
||
title="裝備為外觀套件（只改變外觀）"
|
||
>
|
||
裝備（外觀）
|
||
</button>
|
||
<button
|
||
v-if="itemData.item.type === 'equipment' && itemData.item.durability !== Infinity"
|
||
@click="handleRepair(itemId)"
|
||
class="action-btn repair-btn"
|
||
:disabled="!inventorySystem || getItemDurability(itemId) >= itemData.item.maxDurability"
|
||
>
|
||
修復
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 刪除區域 -->
|
||
<div class="item-delete-section">
|
||
<div class="delete-controls">
|
||
<label class="delete-label">刪除數量：</label>
|
||
<input
|
||
type="number"
|
||
:min="1"
|
||
:max="itemData.count"
|
||
v-model.number="deleteCounts[itemId]"
|
||
class="delete-input"
|
||
@input="updateDeleteCount(itemId, $event.target.value, itemData.count)"
|
||
/>
|
||
<span class="delete-max">/ {{ itemData.count }}</span>
|
||
</div>
|
||
<button
|
||
@click="handleDeleteItem(itemId, deleteCounts[itemId] || 1)"
|
||
class="action-btn delete-btn"
|
||
:disabled="!inventorySystem || !deleteCounts[itemId] || deleteCounts[itemId] < 1"
|
||
:title="`刪除 ${deleteCounts[itemId] || 1} 個 ${itemData.item.name}`"
|
||
>
|
||
刪除
|
||
</button>
|
||
</div>
|
||
</div>
|
||
<div v-if="inventoryItemCount === 0" class="inventory-empty">
|
||
背包是空的
|
||
</div>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 道具 Tooltip -->
|
||
<div
|
||
v-if="itemTooltip && tooltipContent"
|
||
class="item-tooltip"
|
||
:style="{ left: tooltipPosition.x + 'px', top: tooltipPosition.y + 'px' }"
|
||
>
|
||
<div class="tooltip-header">
|
||
<span class="tooltip-icon">{{ tooltipContent.icon }}</span>
|
||
<span class="tooltip-name" :style="{ color: tooltipContent.rarityColor }">
|
||
{{ tooltipContent.name }}
|
||
</span>
|
||
</div>
|
||
<div class="tooltip-rarity" :style="{ color: tooltipContent.rarityColor }">
|
||
{{ tooltipContent.rarity }} (掉落: {{ tooltipContent.dropRate }}%)
|
||
</div>
|
||
<div class="tooltip-type">{{ tooltipContent.type }}</div>
|
||
<div class="tooltip-description">{{ tooltipContent.description }}</div>
|
||
|
||
<div v-if="tooltipContent.effects.length > 0" class="tooltip-effects">
|
||
<div class="tooltip-effects-title">效果：</div>
|
||
<div v-for="(effect, idx) in tooltipContent.effects" :key="idx" class="tooltip-effect-item">
|
||
{{ effect.stat }}{{ effect.value }}
|
||
</div>
|
||
</div>
|
||
|
||
<div v-if="tooltipContent.durability" class="tooltip-durability">
|
||
耐久度: {{ tooltipContent.durability.current }}/{{ tooltipContent.durability.max }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 操作按鈕區 -->
|
||
<div class="action-panel">
|
||
<div class="action-group">
|
||
<h3> 寵物互動</h3>
|
||
<div class="button-grid">
|
||
<button @click="handleFeed"
|
||
:disabled="!canDoAction('feed')"
|
||
:title="!canDoAction('feed') ? getDisabledReason('feed') : '增加飢餓值 (+體重)'">
|
||
[FEED] 餵食
|
||
</button>
|
||
|
||
<!-- 玩耍選項 -->
|
||
<div class="play-group" style="grid-column: span 2; display: flex; gap: 5px;">
|
||
<button @click="handlePlay('normal')"
|
||
:disabled="!canDoAction('play')"
|
||
:title="!canDoAction('play') ? getDisabledReason('play') : '一般玩耍 (體重 -1g)'"
|
||
style="flex: 1;">
|
||
[PLAY] 玩耍
|
||
</button>
|
||
<button @click="handlePlay('training')"
|
||
:disabled="!canDoAction('play')"
|
||
:title="!canDoAction('play') ? getDisabledReason('play') : '體能訓練 (體重 -3g)'"
|
||
style="flex: 1;">
|
||
[TRAIN] 訓練
|
||
</button>
|
||
<button @click="handlePlay('puzzle')"
|
||
:disabled="!canDoAction('play')"
|
||
:title="!canDoAction('play') ? getDisabledReason('play') : '益智遊戲 (體重不變)'"
|
||
style="flex: 1;">
|
||
[PUZZLE] 益智
|
||
</button>
|
||
</div>
|
||
|
||
<button @click="handleClean"
|
||
:disabled="!canDoAction('clean')"
|
||
:title="!canDoAction('clean') ? getDisabledReason('clean') : '清理便便'">
|
||
[CLEAN] 清理
|
||
</button>
|
||
<button @click="handleHeal"
|
||
:disabled="!canDoAction('heal')"
|
||
:title="!canDoAction('heal') ? getDisabledReason('heal') : '恢復健康'">
|
||
[HEAL] 治療
|
||
</button>
|
||
<button @click="handleSleep"
|
||
:disabled="!canDoAction('sleep')"
|
||
:title="!canDoAction('sleep') ? getDisabledReason('sleep') : '睡覺恢復健康'">
|
||
{{ petState?.isSleeping ? '[WAKE] 起床' : '[SLEEP] 睡覺' }}
|
||
</button>
|
||
<button @click="handleShowStatus" :disabled="!isReady">[STATUS] 查看狀態</button>
|
||
<button @click="handleCheckEvolution" :disabled="!isReady" title="檢查進化條件">[CHECK] 進化檢查</button>
|
||
<button @click="handleDeletePet" :disabled="!isReady" class="danger-button">[DEL] 刪除寵物</button>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="action-group">
|
||
<h3>[ROLL] 事件系統</h3>
|
||
<div class="button-grid">
|
||
<button @click="handleStart" :disabled="!isReady || isRunning">[START] 啟動循環</button>
|
||
<button @click="handleStop" :disabled="!isRunning">[STOP] 停止循環</button>
|
||
<button @click="handleListEvents" :disabled="!isReady">[LIST] 事件列表</button>
|
||
<button @click="handleEventHistory" :disabled="!isReady">[HISTORY] 事件歷史</button>
|
||
<button @click="handleTestAllEvents" :disabled="!isReady">[TEST] 測試所有事件</button>
|
||
</div>
|
||
<!-- 快速觸發事件 -->
|
||
<details class="event-list">
|
||
<summary>* 快速觸發事件</summary>
|
||
<div class="button-grid small">
|
||
<button @click="handleTriggerEvent('lucky_find')" :disabled="!isReady">幸運發現</button>
|
||
<button @click="handleTriggerEvent('find_treat')" :disabled="!isReady">發現點心</button>
|
||
<button @click="handleTriggerEvent('playful_moment')" :disabled="!isReady">玩耍時光</button>
|
||
<button @click="handleTriggerEvent('deity_blessing')" :disabled="!isReady">神明祝福</button>
|
||
<button @click="handleTriggerEvent('over_eat')" :disabled="!isReady">吃太多</button>
|
||
<button @click="handleTriggerEvent('catch_cold')" :disabled="!isReady">感冒</button>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
|
||
<div class="action-group">
|
||
<h3>[PRAY] 神明系統</h3>
|
||
<div class="button-grid">
|
||
<button @click="handlePray" :disabled="!isReady">[PRAY] 祈福</button>
|
||
<!-- 若神明有多個籤詩類型，顯示下拉選單 -->
|
||
<div v-if="deityLotTypes.length > 1" class="lot-type-select" style="margin: 5px 0;">
|
||
<label for="lotTypeSelect" style="color: #00ffff; margin-right: 4px;">籤詩類型：</label>
|
||
<select id="lotTypeSelect" v-model="selectedLotType" style="background: #111; color: #00ff00; border: 1px solid #00ffff;">
|
||
<option v-for="type in deityLotTypes" :key="type" :value="type">{{ type }}</option>
|
||
</select>
|
||
</div>
|
||
<button @click="handleDrawLot" :disabled="!isReady">[LOT] 求籤</button>
|
||
<button @click="handleVerifyLot" :disabled="!isReady">[VERIFY] 驗證</button>
|
||
<button @click="handleThrowJiaobei" :disabled="!isReady">[JIAOBEI] 擲筊</button>
|
||
<button @click="handleListDeities" :disabled="!isReady">[LIST] 神明列表</button>
|
||
</div>
|
||
<!-- 切換神明 -->
|
||
<details class="deity-list">
|
||
<summary>[SWITCH] 切換神明</summary>
|
||
<div class="button-grid small">
|
||
<button @click="handleSwitchDeity('mazu')" :disabled="!isReady"
|
||
:class="{ active: petState?.currentDeityId === 'mazu' }">媽祖</button>
|
||
<button @click="handleSwitchDeity('earthgod')" :disabled="!isReady"
|
||
:class="{ active: petState?.currentDeityId === 'earthgod' }">土地公</button>
|
||
<button @click="handleSwitchDeity('yuelao')" :disabled="!isReady"
|
||
:class="{ active: petState?.currentDeityId === 'yuelao' }">月老</button>
|
||
<button @click="handleSwitchDeity('wenchang')" :disabled="!isReady"
|
||
:class="{ active: petState?.currentDeityId === 'wenchang' }">文昌</button>
|
||
<button @click="handleSwitchDeity('guanyin')" :disabled="!isReady"
|
||
:class="{ active: petState?.currentDeityId === 'guanyin' }">觀音</button>
|
||
</div>
|
||
</details>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- Debug 面板 -->
|
||
<div class="debug-toggle" @click="showDebug = !showDebug">[DEBUG]</div>
|
||
|
||
<div v-if="showDebug" class="debug-panel">
|
||
<h3>[TOOLS] Debug 工具</h3>
|
||
<div class="debug-group">
|
||
<h4>神明系統</h4>
|
||
<button @click="debugResetPrayer">重置祈福次數</button>
|
||
<button @click="debugAddFavor(10)">好感度 +10</button>
|
||
<button @click="debugAddFavor(50)">好感度 +50</button>
|
||
</div>
|
||
|
||
<div class="debug-group">
|
||
<h4>事件系統</h4>
|
||
<button @click="debugTriggerEvent">隨機觸發事件</button>
|
||
</div>
|
||
|
||
<div class="debug-group">
|
||
<h4>寵物狀態</h4>
|
||
<button @click="debugFillStats">填滿飢餓/快樂</button>
|
||
<button @click="debugMaxAttributes">屬性全滿 (100)</button>
|
||
<button @click="debugAddPoop">[POOP] 便便 x4</button>
|
||
<button @click="debugKill">一鍵瀕死</button>
|
||
</div>
|
||
|
||
<div class="debug-group">
|
||
<h4>成就系統</h4>
|
||
<input
|
||
v-model="debugAchievementId"
|
||
type="text"
|
||
placeholder="輸入成就 ID..."
|
||
class="debug-input"
|
||
@keyup.enter="debugUnlockAchievement"
|
||
/>
|
||
<button @click="debugUnlockAchievement">解鎖成就 (ID)</button>
|
||
<button @click="debugListAchievements">查看成就列表</button>
|
||
<button @click="debugUnlockAllAchievements">解鎖全部成就</button>
|
||
<button @click="debugResetAchievements">重置成就</button>
|
||
</div>
|
||
|
||
<div class="debug-group">
|
||
<h4>背包系統</h4>
|
||
<button @click="debugAddRandomItem" style="margin-bottom: 8px;">🎲 隨機產生道具</button>
|
||
<div style="margin-top: 8px; margin-bottom: 8px;">
|
||
<div style="font-size: 10px; color: #888; margin-bottom: 4px;">按類型:</div>
|
||
<div style="display: flex; flex-direction: column; gap: 4px;">
|
||
<button @click="debugAddItemByType('equipment')">⚔️ 產生裝備類</button>
|
||
<button @click="debugAddItemByType('appearance')">👕 產生外觀類</button>
|
||
<button @click="debugAddItemByType('consumable')">🍪 產生消耗品</button>
|
||
<button @click="debugAddItemByType('talisman')">🔮 產生護身符</button>
|
||
<button @click="debugAddItemByType('special')">⭐ 產生特殊道具</button>
|
||
</div>
|
||
</div>
|
||
<div style="margin-top: 8px;">
|
||
<div style="font-size: 10px; color: #888; margin-bottom: 4px;">按類別:</div>
|
||
<div style="display: flex; flex-direction: column; gap: 4px;">
|
||
<button @click="debugAddItemByCategory('weapon')">🗡️ 產生武器</button>
|
||
<button @click="debugAddItemByCategory('armor')">🛡️ 產生防具</button>
|
||
<button @click="debugAddItemByCategory('food')">🍪 產生食物</button>
|
||
<button @click="debugAddItemByCategory('potion')">🧪 產生藥水</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<style scoped>
|
||
/* Debug 面板樣式 */
|
||
.debug-toggle {
|
||
position: fixed;
|
||
bottom: 10px;
|
||
right: 10px;
|
||
width: 40px;
|
||
height: 40px;
|
||
background: rgba(0, 0, 0, 0.5);
|
||
color: white;
|
||
border-radius: 50%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
cursor: pointer;
|
||
z-index: 9999;
|
||
font-size: 20px;
|
||
}
|
||
|
||
.debug-panel {
|
||
position: fixed;
|
||
bottom: 60px;
|
||
right: 10px;
|
||
background: rgba(0, 0, 0, 0.95);
|
||
color: white;
|
||
padding: 15px;
|
||
border-radius: 10px;
|
||
z-index: 9999;
|
||
width: 280px;
|
||
max-height: calc(100vh - 80px);
|
||
overflow-y: auto;
|
||
overflow-x: hidden;
|
||
border: 2px solid #ff00ff;
|
||
box-shadow: 0 0 20px rgba(255, 0, 255, 0.5);
|
||
}
|
||
|
||
/* Debug 面板滾動條樣式 */
|
||
.debug-panel::-webkit-scrollbar {
|
||
width: 8px;
|
||
}
|
||
|
||
.debug-panel::-webkit-scrollbar-track {
|
||
background: rgba(255, 0, 255, 0.1);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.debug-panel::-webkit-scrollbar-thumb {
|
||
background: rgba(255, 0, 255, 0.5);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.debug-panel::-webkit-scrollbar-thumb:hover {
|
||
background: rgba(255, 0, 255, 0.8);
|
||
}
|
||
|
||
.debug-panel h3 {
|
||
margin: 0 0 10px 0;
|
||
font-size: 16px;
|
||
border-bottom: 1px solid #444;
|
||
padding-bottom: 5px;
|
||
}
|
||
|
||
.debug-group {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.debug-group h4 {
|
||
margin: 0 0 5px 0;
|
||
font-size: 12px;
|
||
color: #aaa;
|
||
}
|
||
|
||
.debug-panel button {
|
||
display: block;
|
||
width: 100%;
|
||
margin-bottom: 5px;
|
||
padding: 5px;
|
||
background: #333;
|
||
border: 1px solid #555;
|
||
color: white;
|
||
border-radius: 4px;
|
||
cursor: pointer;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.debug-panel button:hover {
|
||
background: #555;
|
||
}
|
||
</style>
|
||
|
||
<script setup>
|
||
import { onMounted, onUnmounted, ref } from 'vue'
|
||
import { PetSystem } from '../core/pet-system.js'
|
||
import { EventSystem } from '../core/event-system.js'
|
||
import { TempleSystem } from '../core/temple-system.js'
|
||
import { AchievementSystem } from '../core/achievement-system.js'
|
||
import { InventorySystem } from '../core/inventory-system.js'
|
||
import { ApiService } from '../core/api-service.js'
|
||
|
||
// 創建 API 服務
|
||
const apiService = new ApiService({
|
||
useMock: true,
|
||
baseUrl: 'http://localhost:3000/api',
|
||
mockDelay: 100
|
||
})
|
||
|
||
// 響應式狀態
|
||
const petState = ref(null)
|
||
const systemStatus = ref('正在初始化...')
|
||
const isReady = ref(false)
|
||
const isRunning = ref(false)
|
||
const showNameInput = ref(false)
|
||
const inputPetName = ref('')
|
||
const deityLotTypes = ref([])
|
||
const selectedLotType = ref('')
|
||
|
||
// 系統實例
|
||
let petSystem, eventSystem, templeSystem, achievementSystem, inventorySystem
|
||
|
||
// 更新狀態顯示
|
||
function updatePetState() {
|
||
if (petSystem) {
|
||
petState.value = petSystem.getState()
|
||
}
|
||
}
|
||
|
||
// 檢查當前階段是否可以執行某個動作
|
||
function canDoAction(action) {
|
||
if (!isReady.value || !petSystem) return false
|
||
return petSystem.isActionAllowed(action)
|
||
}
|
||
|
||
// 獲取按鈕禁用的原因
|
||
function getDisabledReason(action) {
|
||
if (!isReady.value || !petSystem) return '系統尚未就緒'
|
||
if (!petSystem.isActionAllowed(action)) {
|
||
const stage = petState.value?.stage || 'unknown'
|
||
const stageNames = {
|
||
'egg': '蛋階段',
|
||
'baby': '幼體',
|
||
'child': '幼年',
|
||
'adult': '成年'
|
||
}
|
||
return `${stageNames[stage] || stage}不能執行此操作`
|
||
}
|
||
return ''
|
||
}
|
||
|
||
// 格式化年齡
|
||
function formatAge(ageSeconds) {
|
||
if (!ageSeconds) return '0 秒'
|
||
const days = Math.floor(ageSeconds / 86400)
|
||
const hours = Math.floor((ageSeconds % 86400) / 3600)
|
||
const minutes = Math.floor((ageSeconds % 3600) / 60)
|
||
const seconds = Math.floor(ageSeconds % 60)
|
||
|
||
if (days > 0) return `${days} 天 ${hours} 小時`
|
||
if (hours > 0) return `${hours} 小時 ${minutes} 分鐘`
|
||
if (minutes > 0) return `${minutes} 分鐘 ${seconds} 秒`
|
||
return `${seconds} 秒`
|
||
}
|
||
|
||
// 獲取階段名稱
|
||
function getStageName(stage) {
|
||
const stageNames = {
|
||
'egg': '蛋',
|
||
'baby': '幼體',
|
||
'child': '幼年',
|
||
'adult': '成年'
|
||
}
|
||
return stageNames[stage] || stage
|
||
}
|
||
|
||
// 獲取神明好感顯示
|
||
function getDeityFavorDisplay(state) {
|
||
if (!state || !state.currentDeityId) return '無'
|
||
const favor = state.deityFavors?.[state.currentDeityId] || 0
|
||
const deityNames = {
|
||
'mazu': '媽祖',
|
||
'earthgod': '土地公',
|
||
'yuelao': '月老',
|
||
'wenchang': '文昌',
|
||
'guanyin': '觀音'
|
||
}
|
||
return `${deityNames[state.currentDeityId] || state.currentDeityId}: ${favor}/100`
|
||
}
|
||
|
||
// 獲取所有加成
|
||
// 獲取所有加成
|
||
function getAllBonuses(state) {
|
||
if (!state) return {}
|
||
|
||
const bonuses = {}
|
||
|
||
// 1. 命格加成
|
||
if (state.destiny && state.destiny.buffs) {
|
||
for (const [key, value] of Object.entries(state.destiny.buffs)) {
|
||
bonuses[key] = (bonuses[key] || 0) + value
|
||
}
|
||
}
|
||
|
||
// 獲取當前神明（如果在神明系統範圍內）
|
||
let currentDeity = null
|
||
if (templeSystem) {
|
||
currentDeity = templeSystem.getCurrentDeity()
|
||
}
|
||
|
||
// 2. 神明基礎加成
|
||
if (currentDeity && currentDeity.buffs) {
|
||
for (const [key, value] of Object.entries(currentDeity.buffs)) {
|
||
bonuses[key] = (bonuses[key] || 0) + value
|
||
}
|
||
}
|
||
|
||
// 3. 臨時 Buff (需要從 eventSystem 獲取)
|
||
if (eventSystem) {
|
||
const activeBuffs = eventSystem.getBuffManager().getActiveBuffs()
|
||
for (const buff of activeBuffs) {
|
||
if (buff.effects) {
|
||
for (const [key, value] of Object.entries(buff.effects)) {
|
||
bonuses[key] = (bonuses[key] || 0) + value
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 4. 神明好感度等級加成
|
||
if (currentDeity && currentDeity.favorLevelBuffs) {
|
||
const favor = state.deityFavors?.[state.currentDeityId] || 0
|
||
const level = Math.floor(favor / currentDeity.favorLevelBuffs.interval)
|
||
|
||
if (level > 0 && currentDeity.favorLevelBuffs.buffsPerLevel) {
|
||
for (const [key, valuePerLevel] of Object.entries(currentDeity.favorLevelBuffs.buffsPerLevel)) {
|
||
bonuses[key] = (bonuses[key] || 0) + (valuePerLevel * level)
|
||
}
|
||
}
|
||
}
|
||
|
||
// 5. 神明滿級特殊 Buff
|
||
if (currentDeity && currentDeity.maxFavorBuff) {
|
||
const favor = state.deityFavors?.[state.currentDeityId] || 0
|
||
if (favor >= 100 && currentDeity.maxFavorBuff.effects) {
|
||
for (const [key, value] of Object.entries(currentDeity.maxFavorBuff.effects)) {
|
||
// 排除非數值效果（如 sicknessImmune）
|
||
if (typeof value === 'number') {
|
||
bonuses[key] = (bonuses[key] || 0) + value
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 6. 成就加成
|
||
if (state.achievementBuffs) {
|
||
for (const [key, value] of Object.entries(state.achievementBuffs)) {
|
||
bonuses[key] = (bonuses[key] || 0) + value
|
||
}
|
||
}
|
||
|
||
return bonuses
|
||
}
|
||
|
||
// 检查加成是否已实现
|
||
function isImplemented(key) {
|
||
const implemented = [
|
||
'str', 'int', 'dex', 'luck', 'health',
|
||
'strGain', 'intGain', 'dexGain',
|
||
'happinessRecovery', 'healthRecovery'
|
||
]
|
||
return implemented.includes(key)
|
||
}
|
||
|
||
// 獲取加成名稱
|
||
function getBonusName(key) {
|
||
const names = {
|
||
// 基礎屬性（影响战斗数值）
|
||
str: '力量',
|
||
int: '智力',
|
||
dex: '敏捷',
|
||
luck: '運勢',
|
||
health: '最大健康',
|
||
|
||
// 成長效率
|
||
strGain: '力量成長',
|
||
intGain: '智力成長',
|
||
dexGain: '敏捷成長',
|
||
|
||
// 状态恢复
|
||
happinessRecovery: '快樂恢復',
|
||
healthRecovery: '健康恢復',
|
||
|
||
// 未实现的加成
|
||
gameSuccessRate: '小遊戲成功率',
|
||
sicknessReduction: '生病抗性',
|
||
resourceGain: '資源獲得',
|
||
breedingSuccess: '繁殖成功率',
|
||
dropRate: '掉落率',
|
||
miniGameBonus: '小遊戲獎勵',
|
||
badEventReduction: '壞事件減少'
|
||
}
|
||
return names[key] || key
|
||
}
|
||
|
||
// 获取最大健康值
|
||
function getMaxHealth(state) {
|
||
if (!state) return 100
|
||
const bonuses = getAllBonuses(state)
|
||
return 100 + (bonuses.health || 0)
|
||
}
|
||
|
||
// 顯示狀態（簡潔版）
|
||
function showStatus() {
|
||
if (!petSystem || !eventSystem || !templeSystem) {
|
||
console.log('系統尚未初始化')
|
||
return
|
||
}
|
||
|
||
const state = petSystem.getState()
|
||
if (!state) {
|
||
console.log('狀態尚未載入')
|
||
return
|
||
}
|
||
|
||
updatePetState()
|
||
|
||
const buffs = eventSystem.getBuffManager().getActiveBuffs()
|
||
const currentDeity = templeSystem.getCurrentDeity()
|
||
const favorStars = templeSystem.getFavorStars(state.currentDeityId)
|
||
const buffNames = buffs.map(b => b.name)
|
||
|
||
// 檢查神明滿級 Buff
|
||
if (currentDeity && state.deityFavors?.[state.currentDeityId] >= 100 && currentDeity.maxFavorBuff) {
|
||
const buff = currentDeity.maxFavorBuff
|
||
buffNames.push(`*${buff.name}(${buff.description})`)
|
||
}
|
||
|
||
// 安全獲取數值，避免 undefined
|
||
const safeNum = (val) => (typeof val === 'number' && !isNaN(val) ? val.toFixed(0) : '0')
|
||
|
||
console.log(` 狀態 | 飢餓:${safeNum(state.hunger)} 快樂:${safeNum(state.happiness)} 健康:${safeNum(state.health)} | 力量:${safeNum(state.str)} 智力:${safeNum(state.int)} 敏捷:${safeNum(state.dex)} 運勢:${safeNum(state.luck)} | ${currentDeity?.name || '未知'}${favorStars} | Buff:${buffNames.length > 0 ? buffNames.join(', ') : '無'}`)
|
||
}
|
||
|
||
// 啟動遊戲循環
|
||
function start() {
|
||
if (isRunning.value) {
|
||
console.log('[WARN] 遊戲循環已在運行中')
|
||
return
|
||
}
|
||
|
||
isRunning.value = true
|
||
// 移除 tick 回調中的自動輸出，只在有事件時才輸出
|
||
petSystem.startTickLoop(() => {
|
||
// 更新狀態顯示
|
||
updatePetState()
|
||
})
|
||
|
||
eventSystem.startEventCheck()
|
||
|
||
// 初始化全局 Debug 工具
|
||
window.debug = {
|
||
// 重置祈福次數
|
||
resetPrayer: async () => {
|
||
await templeSystem.debugResetDailyPrayer()
|
||
console.log('[OK] 祈福次數已重置')
|
||
showStatus()
|
||
},
|
||
|
||
// 設置好感度
|
||
setFavor: async (deityId, amount) => {
|
||
const state = petSystem.getState()
|
||
await petSystem.updateState({
|
||
deityFavors: {
|
||
...state.deityFavors,
|
||
[deityId]: amount
|
||
}
|
||
})
|
||
console.log(`[OK] ${deityId} 好感度已設置為 ${amount}`)
|
||
showStatus()
|
||
},
|
||
|
||
// 觸發事件
|
||
triggerEvent: async (eventId) => {
|
||
await eventSystem.debugTriggerEvent(eventId)
|
||
showStatus()
|
||
},
|
||
|
||
// 設置屬性
|
||
setStat: async (stat, value) => {
|
||
await petSystem.debugSetStat(stat, value)
|
||
showStatus()
|
||
},
|
||
|
||
// 幫助
|
||
help: () => {
|
||
console.log(`
|
||
[TOOLS] Debug 工具列表:
|
||
- debug.resetPrayer() 重置每日祈福次數
|
||
- debug.setFavor(id, amount) 設置神明好感度 (例如: 'mazu', 99)
|
||
- debug.triggerEvent(id) 觸發事件 (不填 ID 則隨機)
|
||
- debug.setStat(stat, value) 設置屬性 (例如: 'hunger', 100)
|
||
`)
|
||
}
|
||
}
|
||
|
||
console.log('[DEBUG] Debug 工具已就緒，輸入 debug.help() 查看指令')
|
||
|
||
console.log('[OK] 遊戲循環已啟動（靜默模式，只在事件觸發時輸出）')
|
||
}
|
||
|
||
// 停止遊戲循環
|
||
function stop() {
|
||
if (!isRunning.value) {
|
||
console.log('[WARN] 遊戲循環未運行')
|
||
return
|
||
}
|
||
|
||
petSystem.stopTickLoop()
|
||
eventSystem.stopEventCheck()
|
||
isRunning.value = false
|
||
|
||
console.log('[STOP] 遊戲循環已停止')
|
||
}
|
||
|
||
// 餵食
|
||
async function feed(amount = 20) {
|
||
const result = await petSystem.feed(amount)
|
||
if (result.success) {
|
||
console.log(`[OK] 餵食 飢餓+${amount} 體重+${(amount * 0.5).toFixed(1)}g | STR+${result.strGain?.toFixed(2)}`)
|
||
showStatus()
|
||
} else {
|
||
console.log(`[ERR] ${result.message}`)
|
||
}
|
||
}
|
||
|
||
// 玩耍
|
||
async function play(amount = 15) {
|
||
const result = await petSystem.play(amount)
|
||
if (result.success) {
|
||
const baseAmount = amount
|
||
const actualGain = result.happinessGain
|
||
const bonusPercent = actualGain > baseAmount ? `+${((actualGain / baseAmount - 1) * 100).toFixed(0)}%` : ''
|
||
console.log(`[OK] 玩耍 快樂 ${actualGain.toFixed(1)} ${bonusPercent} | DEX+${result.dexGain.toFixed(2)} INT+${result.intGain.toFixed(2)}`)
|
||
showStatus()
|
||
} else {
|
||
console.log(`[ERR] ${result.message}`)
|
||
}
|
||
}
|
||
|
||
// 清理便便
|
||
async function clean() {
|
||
const result = await petSystem.cleanPoop()
|
||
if (result.success) {
|
||
console.log('[OK] 清理便便 +10 快樂')
|
||
showStatus()
|
||
} else {
|
||
console.log(`[ERR] ${result.message}`)
|
||
}
|
||
}
|
||
|
||
// 治療
|
||
async function heal(amount = 20) {
|
||
const result = await petSystem.heal(amount)
|
||
if (result.success) {
|
||
const actualHeal = result.healAmount?.toFixed(1) || amount
|
||
const bonusText = result.healAmount > amount ? ` (+${((result.healAmount / amount - 1) * 100).toFixed(0)}%)` : ''
|
||
console.log(`[OK] 治療 健康+${actualHeal}${bonusText}${result.cured ? ' (已治癒)' : ''}`)
|
||
showStatus()
|
||
} else {
|
||
console.log(`[ERR] ${result.message}`)
|
||
}
|
||
}
|
||
|
||
// 睡覺/起床
|
||
async function sleep() {
|
||
const result = await petSystem.toggleSleep()
|
||
if (result.success) {
|
||
if (result.message) {
|
||
console.log(`[OK] ${result.message}`)
|
||
} else {
|
||
console.log(`[OK] ${result.isSleeping ? '已入睡' : '已醒來'}`)
|
||
}
|
||
showStatus()
|
||
} else {
|
||
console.log(`[ERR] ${result.message}`)
|
||
}
|
||
}
|
||
|
||
// 觸發事件
|
||
async function triggerEvent(eventId) {
|
||
const result = await eventSystem.triggerEvent(eventId)
|
||
if (result) {
|
||
console.log(`[OK] 事件 ${eventId} 觸發`)
|
||
showStatus()
|
||
} else {
|
||
console.log(`[ERR] 事件 ${eventId} 條件不滿足`)
|
||
}
|
||
}
|
||
|
||
// 查看事件列表
|
||
async function listEvents() {
|
||
const events = await apiService.getEvents()
|
||
console.log('\n[LIST] 可用事件列表 (共 ' + events.length + ' 個):')
|
||
console.log('='.repeat(60))
|
||
|
||
// 按類型分組
|
||
const grouped = {
|
||
good: events.filter(e => e.type === 'good'),
|
||
bad: events.filter(e => e.type === 'bad'),
|
||
weird: events.filter(e => e.type === 'weird'),
|
||
rare: events.filter(e => e.type === 'rare')
|
||
}
|
||
|
||
for (const [type, list] of Object.entries(grouped)) {
|
||
if (list.length === 0) continue
|
||
|
||
const typeEmoji = {
|
||
good: '*',
|
||
bad: '💀',
|
||
weird: '👻',
|
||
rare: '🌟'
|
||
}
|
||
|
||
console.log(`\n${typeEmoji[type]} ${type.toUpperCase()} 事件 (${list.length}個):`)
|
||
list.forEach(e => {
|
||
const effectsDesc = e.effects.map(eff => {
|
||
if (eff.type === 'modifyStats') {
|
||
const stats = Object.entries(eff.payload)
|
||
.map(([k, v]) => `${k}${v > 0 ? '+' : ''}${v}`)
|
||
.join(', ')
|
||
return stats
|
||
}
|
||
return eff.type
|
||
}).join(' | ')
|
||
|
||
console.log(` ${e.id}`)
|
||
console.log(` 效果: ${effectsDesc}`)
|
||
console.log(` 測試: triggerEvent('${e.id}')`)
|
||
})
|
||
}
|
||
|
||
console.log('\n' + '='.repeat(60))
|
||
console.log('[TIP] 快速測試所有事件: testAllEvents()')
|
||
console.log('='.repeat(60) + '\n')
|
||
}
|
||
|
||
// 查看事件歷史
|
||
function eventHistory() {
|
||
const history = eventSystem.getHistory()
|
||
console.log('\n[HISTORY] 事件歷史:')
|
||
console.log('='.repeat(50))
|
||
if (history.length === 0) {
|
||
console.log(' (無)')
|
||
} else {
|
||
history.forEach((h, i) => {
|
||
const time = new Date(h.timestamp).toLocaleTimeString()
|
||
console.log(`${i + 1}. [${time}] ${h.eventId} (${h.eventType})`)
|
||
})
|
||
}
|
||
console.log('='.repeat(50) + '\n')
|
||
}
|
||
|
||
// 祈福
|
||
async function pray() {
|
||
const result = await templeSystem.pray()
|
||
if (result.success) {
|
||
let message = `[OK] 祈福 +${result.favorIncrease} 好感 → ${result.newFavor}/100 | ${result.dialogue}`
|
||
|
||
// 等级提升提示
|
||
if (result.levelUp) {
|
||
message += `\n🌟 好感度等級提升！Lv.${result.oldLevel} → Lv.${result.newLevel}`
|
||
if (result.deity.favorLevelBuffs) {
|
||
const buffs = Object.entries(result.deity.favorLevelBuffs.buffsPerLevel)
|
||
.map(([key, value]) => `${key.toUpperCase()}+${value}`)
|
||
.join(', ')
|
||
message += ` (${buffs})`
|
||
}
|
||
}
|
||
|
||
// 滿級特殊 Buff 提示
|
||
if (result.reachedMax && result.deity.maxFavorBuff) {
|
||
message += `\n** 滿級祝福！獲得特殊 Buff: ${result.deity.maxFavorBuff.name}`
|
||
message += `\n ${result.deity.maxFavorBuff.description}`
|
||
}
|
||
|
||
console.log(message)
|
||
showStatus()
|
||
} else {
|
||
console.log(`[ERR] ${result.message}`)
|
||
}
|
||
}
|
||
|
||
// 切換神明
|
||
async function switchDeity(deityId) {
|
||
const result = await templeSystem.switchDeity(deityId)
|
||
if (result.success) {
|
||
console.log(`[OK] 已切換到 ${result.deity.name}`)
|
||
} else {
|
||
console.log(`[ERR] ${result.message}`)
|
||
}
|
||
showStatus()
|
||
}
|
||
|
||
// 擲筊
|
||
async function handleThrowJiaobei() {
|
||
const result = await templeSystem.throwJiaobei()
|
||
|
||
if (result.success) {
|
||
const resultSymbols = {
|
||
holy: '⚪⚫', // 一正一反 - 聖筊
|
||
laughing: '⚪⚪', // 兩個正面 - 笑筊
|
||
negative: '⚫⚫' // 兩個反面 - 陰筊
|
||
}
|
||
|
||
const resultNames = {
|
||
holy: '聖筊',
|
||
laughing: '笑筊',
|
||
negative: '陰筊'
|
||
}
|
||
|
||
console.log('\n[JIAOBEI] 擲筊結果:')
|
||
console.log('='.repeat(50))
|
||
console.log(`神明: ${result.deity}`)
|
||
console.log(`結果: ${resultSymbols[result.result]} ${resultNames[result.result]}`)
|
||
console.log(`訊息: ${result.message}`)
|
||
console.log(`\n概率:`)
|
||
console.log(` 聖筊: ${(result.probabilities.holy * 100).toFixed(1)}%`)
|
||
console.log(` 笑筊: ${(result.probabilities.laughing * 100).toFixed(1)}%`)
|
||
console.log(` 陰筊: ${(result.probabilities.negative * 100).toFixed(1)}%`)
|
||
console.log('='.repeat(50) + '\n')
|
||
}
|
||
|
||
showStatus()
|
||
}
|
||
|
||
// 全局变量存储当前抽中的签
|
||
let currentLotData = null
|
||
|
||
// 求籤
|
||
async function handleDrawLot() {
|
||
const result = await templeSystem.drawLot('guanyin_100')
|
||
|
||
if (!result.success) {
|
||
console.log(`[ERR] ${result.message}`)
|
||
return
|
||
}
|
||
|
||
if (result.needVerification) {
|
||
currentLotData = result
|
||
|
||
console.log('\n[LOT] 求籤結果:')
|
||
console.log('='.repeat(50))
|
||
console.log(`${result.lot.no} (${result.lot.grade})`)
|
||
console.log(`神明: ${result.deity}`)
|
||
console.log(`\n⚠️ 需要三聖筊驗證才能解籤`)
|
||
console.log(`目前: ${result.verificationCount}/${result.requiredHoly} 聖筊`)
|
||
console.log('\n請使用 verify() 命令擲筊驗證')
|
||
console.log('='.repeat(50) + '\n')
|
||
}
|
||
}
|
||
|
||
// 驗證籤詩（擲筊確認）
|
||
async function handleVerifyLot() {
|
||
if (!currentLotData) {
|
||
console.log('[ERR] 請先求籤 (使用 [LOT] 求籤 按鈕)')
|
||
return
|
||
}
|
||
|
||
const verifyResult = await templeSystem.verifyLot(currentLotData)
|
||
|
||
console.log('\n[VERIFY] 擲筊驗證:')
|
||
console.log('='.repeat(50))
|
||
console.log(`結果: ${verifyResult.jiaobeiResult.result === 'holy' ? '⚪⚫ 聖筊' :
|
||
verifyResult.jiaobeiResult.result === 'laughing' ? '⚪⚪ 笑筊' : '⚫⚫ 陰筊'}`)
|
||
console.log(`訊息: ${verifyResult.message}`)
|
||
|
||
if (verifyResult.verified) {
|
||
// 三聖筊！可以解籤
|
||
const lot = currentLotData.lot
|
||
console.log('\n' + '🎉'.repeat(20))
|
||
console.log(`\n【${lot.no}】${lot.grade}`)
|
||
console.log('\n【籤詩】')
|
||
console.log(lot.poem1)
|
||
console.log('\n【解曰】')
|
||
console.log(lot.meaning)
|
||
console.log('\n【解籤】')
|
||
console.log(lot.explanation)
|
||
console.log('\n【問神】')
|
||
console.log(lot.oracle)
|
||
if (lot.story) {
|
||
console.log('\n【典故】')
|
||
console.log(lot.story)
|
||
}
|
||
console.log('\n' + '='.repeat(50) + '\n')
|
||
|
||
// 清除當前籤
|
||
currentLotData = null
|
||
} else if (verifyResult.needMore) {
|
||
// 需要更多聖筊
|
||
currentLotData.verificationCount = verifyResult.verificationCount
|
||
console.log(`\n✓ 進度: ${verifyResult.verificationCount}/${verifyResult.requiredHoly} 聖筊`)
|
||
console.log('請繼續使用 verify() 擲筊驗證')
|
||
console.log('='.repeat(50) + '\n')
|
||
} else if (verifyResult.needRedraw) {
|
||
// 笑筊或陰筊，需要重抽
|
||
console.log('\n✗ 需要重新求籤')
|
||
console.log('='.repeat(50) + '\n')
|
||
currentLotData = null
|
||
}
|
||
}
|
||
|
||
// 查看神明列表
|
||
function listDeities() {
|
||
const deities = templeSystem.getDeities()
|
||
console.log('\n[PRAY] 神明列表:')
|
||
console.log('='.repeat(50))
|
||
deities.forEach(d => {
|
||
const state = petSystem.getState()
|
||
const favor = state.deityFavors[d.id] || 0
|
||
const stars = templeSystem.getFavorStars(d.id)
|
||
console.log(`\n${d.id}: ${d.name}`)
|
||
console.log(` 個性: ${d.personality}`)
|
||
console.log(` 好感: ${stars} (${favor}/100)`)
|
||
console.log(` 加成: ${d.buffDescriptions.join(', ')}`)
|
||
})
|
||
console.log('='.repeat(50) + '\n')
|
||
}
|
||
|
||
// 抽籤（簡化版，兼容舊 API）
|
||
async function drawFortune() {
|
||
// 使用 drawLot 作為實現
|
||
const result = await handleDrawLot()
|
||
return result
|
||
}
|
||
|
||
// 應用 Buff
|
||
async function applyBuffs() {
|
||
await eventSystem.applyBuffs()
|
||
eventSystem.getBuffManager().tick()
|
||
console.log('[OK] Buff 已更新')
|
||
showStatus()
|
||
}
|
||
|
||
// 確認名字並初始化
|
||
async function confirmName() {
|
||
if (!inputPetName.value || inputPetName.value.trim().length === 0) {
|
||
return
|
||
}
|
||
|
||
showNameInput.value = false
|
||
const name = inputPetName.value.trim()
|
||
|
||
await init(name)
|
||
}
|
||
|
||
// 初始化系統
|
||
async function init(petName = null) {
|
||
// 先創建成就系統
|
||
achievementSystem = new AchievementSystem(null, null, null, apiService)
|
||
|
||
// 先創建背包系統（因為其他系統可能需要它）
|
||
inventorySystem = new InventorySystem(null, null, apiService)
|
||
|
||
// 創建其他系統，並傳入成就系統和背包系統
|
||
petSystem = new PetSystem(apiService, achievementSystem, inventorySystem)
|
||
eventSystem = new EventSystem(petSystem, apiService, achievementSystem, inventorySystem)
|
||
templeSystem = new TempleSystem(petSystem, apiService, achievementSystem)
|
||
|
||
// 更新成就系統的引用
|
||
achievementSystem.petSystem = petSystem
|
||
achievementSystem.eventSystem = eventSystem
|
||
achievementSystem.templeSystem = templeSystem
|
||
|
||
// 更新背包系統的引用
|
||
inventorySystem.petSystem = petSystem
|
||
inventorySystem.eventSystem = eventSystem
|
||
|
||
try {
|
||
await petSystem.initialize('tinyTigerCat')
|
||
// 如果有提供名字，更新寵物名字
|
||
if (petName) {
|
||
await petSystem.updateState({ name: petName })
|
||
}
|
||
await eventSystem.initialize()
|
||
await templeSystem.initialize()
|
||
await achievementSystem.initialize() // 這會重新應用已解鎖成就的加成
|
||
await inventorySystem.initialize() // 初始化背包系統，會重新應用裝備效果
|
||
|
||
// 設置神明籤詩類型
|
||
if (templeSystem) {
|
||
const currentDeity = templeSystem.getCurrentDeity()
|
||
deityLotTypes.value = currentDeity?.lotTypes || ['guanyin_100']
|
||
selectedLotType.value = deityLotTypes.value[0]
|
||
}
|
||
|
||
// 重新計算戰鬥數值（確保成就加成已應用）
|
||
petSystem.calculateCombatStats()
|
||
|
||
// 初始化道具類型名稱和稀有度映射（提前載入）
|
||
try {
|
||
const { ITEM_TYPES, ITEM_RARITY } = await import('../data/items.js')
|
||
for (const [type, typeData] of Object.entries(ITEM_TYPES)) {
|
||
itemTypeNames.value[type] = typeData.name
|
||
}
|
||
for (const [rarity, rarityData] of Object.entries(ITEM_RARITY)) {
|
||
itemRarity.value[rarity] = rarityData
|
||
}
|
||
} catch (error) {
|
||
console.warn('[App] 載入道具類型失敗:', error)
|
||
}
|
||
|
||
// 初始檢查成就
|
||
await achievementSystem.checkAndUnlockAchievements()
|
||
|
||
// 更新成就列表
|
||
await updateAchievementList()
|
||
|
||
// 更新背包列表
|
||
await updateInventoryList()
|
||
|
||
updatePetState()
|
||
isReady.value = true
|
||
systemStatus.value = '[OK] 系統已就緒'
|
||
|
||
console.log('[OK] 系統已初始化')
|
||
console.log('[SWITCH] 自動啟動遊戲循環...')
|
||
|
||
// 自動啟動遊戲循環
|
||
start()
|
||
|
||
// 定期更新成就列表（每 5 秒）
|
||
setInterval(async () => {
|
||
if (achievementSystem) {
|
||
await achievementSystem.checkAndUnlockAchievements()
|
||
await updateAchievementList()
|
||
}
|
||
// 更新背包列表
|
||
if (inventorySystem) {
|
||
await updateInventoryList()
|
||
}
|
||
}, 5000)
|
||
|
||
showStatus()
|
||
} catch (error) {
|
||
// 如果沒有名字，顯示輸入對話框
|
||
if (error.message && error.message.includes('名字')) {
|
||
showNameInput.value = true
|
||
systemStatus.value = '請為寵物命名'
|
||
} else {
|
||
systemStatus.value = '[ERR] 初始化失敗: ' + error.message
|
||
console.error(error)
|
||
}
|
||
}
|
||
|
||
return { petSystem, eventSystem, templeSystem }
|
||
}
|
||
|
||
// 按鈕處理函數
|
||
async function handleFeed() {
|
||
await feed(20)
|
||
updatePetState()
|
||
}
|
||
|
||
async function handlePlay(gameType = 'normal') {
|
||
const result = await play({ amount: 15, gameType })
|
||
if (result && result.success) {
|
||
console.log(`${result.gameType} 體重變化: ${result.weightChange > 0 ? '+' : ''}${result.weightChange}g`)
|
||
}
|
||
updatePetState()
|
||
}
|
||
|
||
async function handleClean() {
|
||
await clean()
|
||
updatePetState()
|
||
}
|
||
|
||
async function handleHeal() {
|
||
await heal(20)
|
||
updatePetState()
|
||
}
|
||
|
||
async function handleSleep() {
|
||
await sleep()
|
||
updatePetState()
|
||
}
|
||
|
||
function handleShowStatus() {
|
||
showStatus()
|
||
}
|
||
|
||
function handleCheckEvolution() {
|
||
if (window.checkEvolution) {
|
||
window.checkEvolution()
|
||
}
|
||
}
|
||
|
||
function handleTestAllEvents() {
|
||
if (window.testAllEvents) {
|
||
window.testAllEvents()
|
||
}
|
||
}
|
||
|
||
function handleStart() {
|
||
start()
|
||
}
|
||
|
||
function handleStop() {
|
||
stop()
|
||
}
|
||
|
||
async function handleListEvents() {
|
||
await listEvents()
|
||
}
|
||
|
||
function handleEventHistory() {
|
||
eventHistory()
|
||
}
|
||
|
||
async function handleTriggerEvent(eventId) {
|
||
await triggerEvent(eventId)
|
||
updatePetState()
|
||
}
|
||
|
||
async function handlePray() {
|
||
await pray()
|
||
updatePetState()
|
||
}
|
||
|
||
|
||
function handleListDeities() {
|
||
listDeities()
|
||
}
|
||
|
||
async function handleSwitchDeity(deityId) {
|
||
await switchDeity(deityId)
|
||
updatePetState()
|
||
}
|
||
|
||
// 刪除寵物
|
||
async function handleDeletePet() {
|
||
if (!confirm('確定要刪除當前寵物嗎？此操作無法復原！')) {
|
||
return
|
||
}
|
||
|
||
try {
|
||
// 停止遊戲循環
|
||
if (isRunning.value) {
|
||
stop()
|
||
}
|
||
|
||
// 刪除寵物
|
||
const result = await petSystem.deletePet()
|
||
|
||
if (result.success) {
|
||
console.log('[OK] ' + result.message)
|
||
|
||
// 重置所有狀態
|
||
petState.value = null
|
||
isReady.value = false
|
||
isRunning.value = false
|
||
systemStatus.value = '寵物已刪除，請重新建立'
|
||
|
||
// 清除事件系統歷史
|
||
if (eventSystem) {
|
||
eventSystem.eventHistory = []
|
||
eventSystem.getBuffManager().buffs = []
|
||
}
|
||
|
||
// 顯示名字輸入對話框
|
||
inputPetName.value = ''
|
||
showNameInput.value = true
|
||
} else {
|
||
console.log('[ERR] 刪除失敗')
|
||
}
|
||
} catch (error) {
|
||
console.error('刪除寵物時發生錯誤:', error)
|
||
alert('刪除寵物時發生錯誤，請重試')
|
||
}
|
||
}
|
||
|
||
// 幫助
|
||
function help() {
|
||
console.log('\n' + '='.repeat(50))
|
||
console.log('📖 可用命令列表')
|
||
console.log('='.repeat(50))
|
||
console.log('\n[PLAY] 遊戲控制:')
|
||
console.log(' start() - 啟動遊戲循環')
|
||
console.log(' stop() - 停止遊戲循環')
|
||
console.log(' showStatus() - 顯示當前狀態')
|
||
console.log('\n 寵物互動:')
|
||
console.log(' feed(amount) - 餵食（預設 +20）')
|
||
console.log(' play(amount) - 玩耍（預設 +15）')
|
||
console.log(' clean() - 清理便便')
|
||
console.log(' heal(amount) - 治療（預設 +20）')
|
||
console.log(' sleep() - 睡覺/起床')
|
||
console.log('\n[ROLL] 事件系統:')
|
||
console.log(' triggerEvent(id) - 手動觸發事件')
|
||
console.log(' listEvents() - 查看所有事件')
|
||
console.log(' eventHistory() - 查看事件歷史')
|
||
console.log(' applyBuffs() - 手動應用 Buff')
|
||
console.log('\n[PRAY] 神明系統:')
|
||
console.log(' pray() - 祈福（每日 3 次）')
|
||
console.log(' drawFortune() - 抽籤')
|
||
console.log(' switchDeity(id) - 切換神明')
|
||
console.log(' listDeities() - 查看神明列表')
|
||
console.log('\n[TIP] 提示:')
|
||
console.log(' - 所有數值操作都會同步到 API（mock 模式使用 localStorage）')
|
||
console.log(' - 事件每 10 秒自動檢查（10% 機率觸發）')
|
||
console.log(' - 遊戲循環每 3 秒執行一次 tick')
|
||
console.log(' - 輸入 help() 再次查看此列表')
|
||
console.log('='.repeat(50) + '\n')
|
||
}
|
||
|
||
// 測試加成系統
|
||
function testBonuses() {
|
||
if (!petSystem || !petState.value) {
|
||
console.log('[ERR] 系統尚未初始化')
|
||
return
|
||
}
|
||
|
||
console.log('\n' + '='.repeat(60))
|
||
console.log('[CHECK] 加成系統測試報告')
|
||
console.log('='.repeat(60))
|
||
|
||
const state = petSystem.getState()
|
||
|
||
// 1. 命格信息
|
||
console.log('\n[HISTORY] 命格信息:')
|
||
if (state.destiny) {
|
||
console.log(` 名稱: ${state.destiny.name}`)
|
||
console.log(` 描述: ${state.destiny.description}`)
|
||
console.log(` 加成:`, state.destiny.buffs)
|
||
} else {
|
||
console.log(' [ERR] 未分配命格')
|
||
}
|
||
|
||
// 1.5 神明信息
|
||
console.log('\n[PRAY] 當前神明:')
|
||
if (templeSystem) {
|
||
const deity = templeSystem.getCurrentDeity()
|
||
if (deity) {
|
||
console.log(` 名稱: ${deity.name}`)
|
||
console.log(` 加成:`, deity.buffs)
|
||
}
|
||
}
|
||
|
||
// 2. 所有加成（合計）
|
||
const bonuses = petSystem.getAllBonuses()
|
||
console.log('\n💫 總加成（命格+神明）:')
|
||
if (Object.keys(bonuses).length === 0) {
|
||
console.log(' 無')
|
||
} else {
|
||
for (const [key, value] of Object.entries(bonuses)) {
|
||
const sign = value > 0 ? '+' : ''
|
||
const percent = (value * 100).toFixed(0)
|
||
console.log(` ${key}: ${sign}${percent}%`)
|
||
}
|
||
}
|
||
|
||
// 3. 當前屬性
|
||
console.log('\n[STATUS] 當前屬性:')
|
||
console.log(` STR: ${state.str.toFixed(1)} | INT: ${state.int.toFixed(1)} | DEX: ${state.dex.toFixed(1)}`)
|
||
console.log(` 攻擊: ${state.attack?.toFixed(1)} | 防禦: ${state.defense?.toFixed(1)} | 速度: ${state.speed?.toFixed(1)}`)
|
||
|
||
// 4. 計算示例
|
||
console.log('\n[TEST] 計算示例:')
|
||
const strGainBase = 0.5
|
||
const strGainWithBonus = strGainBase * (1 + (bonuses.strGain || 0))
|
||
console.log(` 餵食時 STR 增長: ${strGainBase} → ${strGainWithBonus.toFixed(2)} (${bonuses.strGain ? '+' + (bonuses.strGain * 100).toFixed(0) + '%' : '無加成'})`)
|
||
|
||
const intGainBase = 0.2
|
||
const intGainWithBonus = intGainBase * (1 + (bonuses.intGain || 0))
|
||
console.log(` 玩耍時 INT 增長: ${intGainBase} → ${intGainWithBonus.toFixed(2)} (${bonuses.intGain ? '+' + (bonuses.intGain * 100).toFixed(0) + '%' : '無加成'})`)
|
||
|
||
const happinessGainBase = 15
|
||
const happinessGainWithBonus = happinessGainBase * (1 + (bonuses.happinessRecovery || 0))
|
||
console.log(` 玩耍時快樂恢復: ${happinessGainBase} → ${happinessGainWithBonus.toFixed(1)} (${bonuses.happinessRecovery ? '+' + (bonuses.happinessRecovery * 100).toFixed(0) + '%' : '無加成'})`)
|
||
|
||
console.log('\n' + '='.repeat(60))
|
||
console.log('[TIP] 提示: 執行 feed() 或 play() 來驗證實際效果')
|
||
|
||
}
|
||
|
||
// 掛載到 window
|
||
// Debug UI 狀態
|
||
const showDebug = ref(false)
|
||
const debugAchievementId = ref('')
|
||
|
||
// 成就相關響應式數據
|
||
const allAchievements = ref([])
|
||
const unlockedAchievementsCount = ref(0)
|
||
const totalAchievementsCount = ref(0)
|
||
const achievementProgress = ref(0)
|
||
|
||
// 背包相關響應式數據
|
||
const inventoryItems = ref({})
|
||
const inventoryItemCount = ref(0)
|
||
const equipmentSlots = ref({
|
||
weapon: { name: '武器', icon: '⚔️' },
|
||
armor: { name: '防具', icon: '🛡️' },
|
||
hat: { name: '帽子', icon: '🎩' },
|
||
accessory: { name: '飾品', icon: '💍' },
|
||
talisman: { name: '護身符', icon: '🔮' },
|
||
special: { name: '特殊', icon: '⭐' }
|
||
})
|
||
const itemTypeNames = ref({})
|
||
const itemRarity = ref({})
|
||
const deleteCounts = ref({}) // 每個道具的刪除數量
|
||
|
||
// Debug 方法
|
||
const debugResetPrayer = async () => {
|
||
await window.debug.resetPrayer()
|
||
}
|
||
|
||
const debugAddFavor = async (amount) => {
|
||
const state = petSystem.getState()
|
||
const currentFavor = state.deityFavors?.[state.currentDeityId] || 0
|
||
await window.debug.setFavor(state.currentDeityId, Math.min(100, currentFavor + amount))
|
||
}
|
||
|
||
const debugTriggerEvent = async () => {
|
||
await window.debug.triggerEvent()
|
||
}
|
||
|
||
const debugFillStats = async () => {
|
||
await window.debug.setStat('hunger', 100)
|
||
await window.debug.setStat('happiness', 100)
|
||
}
|
||
|
||
const debugMaxAttributes = async () => {
|
||
await window.debug.setStat('str', 100)
|
||
await window.debug.setStat('int', 100)
|
||
await window.debug.setStat('dex', 100)
|
||
}
|
||
|
||
const debugKill = async () => {
|
||
await window.debug.setStat('health', 0)
|
||
}
|
||
|
||
const debugAddPoop = async () => {
|
||
await window.debug.setStat('poopCount', 4)
|
||
}
|
||
|
||
// 成就相關函數
|
||
function isAchievementUnlocked(achievementId) {
|
||
if (!achievementSystem) return false
|
||
return achievementSystem.unlockedAchievements.includes(achievementId)
|
||
}
|
||
|
||
function getAchievementProgressPercent(achievement) {
|
||
if (!achievementSystem) return 0
|
||
const progress = achievementSystem.getAchievementProgress(achievement)
|
||
return progress.progress || 0
|
||
}
|
||
|
||
function getAchievementProgressText(achievement) {
|
||
if (!achievementSystem) return '0%'
|
||
const progress = achievementSystem.getAchievementProgress(achievement)
|
||
if (progress.current !== undefined && progress.target !== undefined) {
|
||
return `${progress.current}/${progress.target} (${Math.round(progress.progress)}%)`
|
||
}
|
||
return `${Math.round(progress.progress)}%`
|
||
}
|
||
|
||
function formatBonusValue(value) {
|
||
if (typeof value === 'number' && value < 1 && value > 0) {
|
||
return ` +${(value * 100).toFixed(0)}%`
|
||
}
|
||
return value > 0 ? ` +${value}` : ` ${value}`
|
||
}
|
||
|
||
async function updateAchievementList() {
|
||
if (!achievementSystem) return
|
||
|
||
const { ACHIEVEMENTS } = await import('../data/achievements.js')
|
||
allAchievements.value = ACHIEVEMENTS
|
||
totalAchievementsCount.value = ACHIEVEMENTS.length
|
||
unlockedAchievementsCount.value = achievementSystem.unlockedAchievements.length
|
||
achievementProgress.value = totalAchievementsCount.value > 0
|
||
? Math.round((unlockedAchievementsCount.value / totalAchievementsCount.value) * 100)
|
||
: 0
|
||
}
|
||
|
||
// 更新背包列表（過濾掉已裝備的道具）
|
||
async function updateInventoryList() {
|
||
if (!inventorySystem) return
|
||
|
||
const inventory = inventorySystem.getInventory()
|
||
const equipped = inventorySystem.getEquipped()
|
||
const items = {}
|
||
|
||
const { ITEMS, ITEM_TYPES, ITEM_RARITY } = await import('../data/items.js')
|
||
|
||
// 更新道具類型名稱映射（只在第一次或需要時更新）
|
||
if (Object.keys(itemTypeNames.value).length === 0) {
|
||
for (const [type, typeData] of Object.entries(ITEM_TYPES)) {
|
||
itemTypeNames.value[type] = typeData.name
|
||
}
|
||
}
|
||
|
||
// 更新稀有度映射（只在第一次或需要時更新）
|
||
if (Object.keys(itemRarity.value).length === 0) {
|
||
for (const [rarity, rarityData] of Object.entries(ITEM_RARITY)) {
|
||
itemRarity.value[rarity] = rarityData
|
||
}
|
||
}
|
||
|
||
// 收集所有已裝備的道具 ID（用於過濾）
|
||
const equippedItemIds = new Set()
|
||
for (const [slot, slotData] of Object.entries(equipped)) {
|
||
if (slotData && typeof slotData === 'object') {
|
||
if (slotData.equipment) {
|
||
const eqItemId = typeof slotData.equipment === 'string' ? slotData.equipment : slotData.equipment.itemId
|
||
if (eqItemId) {
|
||
// 計算已裝備的實例數量
|
||
const instanceId = typeof slotData.equipment === 'object' ? slotData.equipment.instanceId : null
|
||
if (instanceId) {
|
||
equippedItemIds.add(`${eqItemId}_${instanceId}`)
|
||
} else {
|
||
equippedItemIds.add(eqItemId)
|
||
}
|
||
}
|
||
}
|
||
if (slotData.appearance) {
|
||
const apItemId = typeof slotData.appearance === 'string' ? slotData.appearance : slotData.appearance.itemId
|
||
if (apItemId) {
|
||
const instanceId = typeof slotData.appearance === 'object' ? slotData.appearance.instanceId : null
|
||
if (instanceId) {
|
||
equippedItemIds.add(`${apItemId}_${instanceId}`)
|
||
} else {
|
||
equippedItemIds.add(apItemId)
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 從 inventorySystem 獲取道具數據（已從 API 載入）
|
||
const itemsData = inventorySystem.items || {}
|
||
|
||
for (const [itemId, data] of Object.entries(inventory)) {
|
||
// 優先使用 API 載入的道具數據
|
||
let item = itemsData[itemId] || ITEMS[itemId]
|
||
|
||
if (item) {
|
||
// 如果道具沒有 dropRate，使用稀有度的默認掉落率
|
||
if (item.dropRate === undefined && item.rarity) {
|
||
const rarityData = ITEM_RARITY[item.rarity]
|
||
if (rarityData) {
|
||
item = { ...item, dropRate: rarityData.dropRate }
|
||
}
|
||
}
|
||
|
||
// 只有消耗品可以堆疊，裝備類每件分開顯示
|
||
if (item.type === 'consumable') {
|
||
// 消耗品：顯示堆疊數量
|
||
items[itemId] = {
|
||
item,
|
||
count: data.count,
|
||
totalCount: data.count,
|
||
equippedCount: 0,
|
||
isStackable: true
|
||
}
|
||
} else {
|
||
// 裝備類：每件分開顯示
|
||
if (data.items && data.items.length > 0) {
|
||
// 為每個未裝備的實例創建一個條目
|
||
for (const instance of data.items) {
|
||
const instanceKey = `${itemId}_${instance.id}`
|
||
if (!equippedItemIds.has(instanceKey)) {
|
||
// 使用實例 ID 作為 key，這樣每件裝備都會單獨顯示
|
||
const instanceItemId = `${itemId}_${instance.id}`
|
||
items[instanceItemId] = {
|
||
item,
|
||
count: 1,
|
||
totalCount: 1,
|
||
equippedCount: 0,
|
||
isStackable: false,
|
||
instanceId: instance.id,
|
||
instance: instance, // 保存實例數據用於顯示耐久度等
|
||
originalItemId: itemId // 保存原始 itemId 用於操作
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
inventoryItems.value = items
|
||
inventoryItemCount.value = Object.keys(items).length
|
||
|
||
// 初始化刪除數量（如果還沒有設置）
|
||
for (const itemId of Object.keys(items)) {
|
||
if (deleteCounts.value[itemId] === undefined) {
|
||
deleteCounts.value[itemId] = 1
|
||
}
|
||
}
|
||
|
||
// 清理已不存在的道具的刪除數量
|
||
for (const itemId of Object.keys(deleteCounts.value)) {
|
||
if (!items[itemId]) {
|
||
delete deleteCounts.value[itemId]
|
||
}
|
||
}
|
||
}
|
||
|
||
// 獲取道具類型名稱（備用函數）
|
||
function getItemTypeName(type) {
|
||
return itemTypeNames.value[type] || type
|
||
}
|
||
|
||
// 獲取稀有度名稱
|
||
function getRarityName(rarity) {
|
||
return itemRarity.value[rarity]?.name || rarity || '普通'
|
||
}
|
||
|
||
// 獲取稀有度顏色
|
||
function getRarityColor(rarity) {
|
||
return itemRarity.value[rarity]?.color || '#9d9d9d'
|
||
}
|
||
|
||
// 獲取稀有度 CSS 類
|
||
function getRarityClass(rarity) {
|
||
return `rarity-${rarity || 'common'}`
|
||
}
|
||
|
||
// 獲取道具掉落率（如果道具沒有指定，使用稀有度的默認值）
|
||
function getItemDropRate(item) {
|
||
if (item.dropRate !== undefined) {
|
||
return (item.dropRate * 100).toFixed(0)
|
||
}
|
||
// 如果沒有指定掉落率，使用稀有度的默認值
|
||
if (item.rarity && itemRarity.value[item.rarity]) {
|
||
return (itemRarity.value[item.rarity].dropRate * 100).toFixed(0)
|
||
}
|
||
return '0'
|
||
}
|
||
|
||
// Tooltip 相關
|
||
const itemTooltip = ref(false)
|
||
const tooltipContent = ref(null)
|
||
const tooltipPosition = ref({ x: 0, y: 0 })
|
||
|
||
function showItemTooltip(event, item, itemId, instance = null) {
|
||
if (!item) return
|
||
|
||
const tooltip = {
|
||
name: item.name,
|
||
icon: item.icon || '📦',
|
||
type: itemTypeNames.value[item.type] || item.type,
|
||
rarity: getRarityName(item.rarity),
|
||
rarityColor: getRarityColor(item.rarity),
|
||
description: item.description,
|
||
effects: [],
|
||
durability: null,
|
||
dropRate: getItemDropRate(item)
|
||
}
|
||
|
||
// 收集效果
|
||
if (item.effects) {
|
||
if (item.effects.flat) {
|
||
for (const [key, value] of Object.entries(item.effects.flat)) {
|
||
tooltip.effects.push({
|
||
type: 'flat',
|
||
stat: getStatName(key),
|
||
value: formatStatValue(value)
|
||
})
|
||
}
|
||
}
|
||
if (item.effects.percent) {
|
||
for (const [key, value] of Object.entries(item.effects.percent)) {
|
||
tooltip.effects.push({
|
||
type: 'percent',
|
||
stat: getStatName(key),
|
||
value: formatPercentValue(value)
|
||
})
|
||
}
|
||
}
|
||
}
|
||
|
||
// 耐久度（如果有實例數據）
|
||
if (instance && instance.durability !== undefined && instance.durability !== Infinity) {
|
||
tooltip.durability = {
|
||
current: instance.durability,
|
||
max: instance.maxDurability || item.maxDurability
|
||
}
|
||
} else if (item.durability !== Infinity && item.maxDurability) {
|
||
tooltip.durability = {
|
||
current: item.durability,
|
||
max: item.maxDurability
|
||
}
|
||
}
|
||
|
||
tooltipContent.value = tooltip
|
||
tooltipPosition.value = {
|
||
x: event.clientX + 15,
|
||
y: event.clientY + 15
|
||
}
|
||
itemTooltip.value = true
|
||
}
|
||
|
||
function hideItemTooltip() {
|
||
itemTooltip.value = false
|
||
tooltipContent.value = null
|
||
}
|
||
|
||
// 獲取屬性名稱（用於顯示效果）
|
||
function getStatName(key) {
|
||
const names = {
|
||
// 基礎屬性
|
||
str: '力量',
|
||
int: '智力',
|
||
dex: '敏捷',
|
||
luck: '運勢',
|
||
health: '最大健康',
|
||
attack: '攻擊',
|
||
defense: '防禦',
|
||
speed: '速度',
|
||
hp: 'HP',
|
||
// 狀態
|
||
hunger: '飢餓',
|
||
happiness: '快樂',
|
||
// 成長
|
||
strGain: '力量成長',
|
||
intGain: '智力成長',
|
||
dexGain: '敏捷成長',
|
||
// 恢復
|
||
happinessRecovery: '快樂恢復',
|
||
healthRecovery: '健康恢復',
|
||
// 其他
|
||
dropRate: '掉落率',
|
||
sicknessReduction: '生病抗性'
|
||
}
|
||
return names[key] || key
|
||
}
|
||
|
||
// 格式化數值（固定值）
|
||
function formatStatValue(value) {
|
||
if (value > 0) {
|
||
return ` +${value}`
|
||
} else if (value < 0) {
|
||
return ` ${value}`
|
||
}
|
||
return ''
|
||
}
|
||
|
||
// 格式化百分比值
|
||
function formatPercentValue(value) {
|
||
if (typeof value === 'number') {
|
||
const percent = (value * 100).toFixed(0)
|
||
if (value > 0) {
|
||
return ` +${percent}%`
|
||
} else if (value < 0) {
|
||
return ` ${percent}%`
|
||
}
|
||
}
|
||
return ''
|
||
}
|
||
|
||
// 獲取裝備的道具 ID（支持新雙槽位結構）
|
||
function getEquippedItemId(slot, type = 'equipment') {
|
||
if (!inventorySystem) return null
|
||
const equipped = inventorySystem.getEquipped()
|
||
const slotData = equipped[slot]
|
||
if (!slotData) return null
|
||
|
||
// 兼容舊格式
|
||
if (typeof slotData === 'string' || (typeof slotData === 'object' && slotData.itemId)) {
|
||
return typeof slotData === 'string' ? slotData : slotData.itemId
|
||
}
|
||
|
||
// 新格式：雙槽位
|
||
const equippedData = slotData[type]
|
||
if (!equippedData) return null
|
||
return typeof equippedData === 'string' ? equippedData : equippedData.itemId
|
||
}
|
||
|
||
// 獲取裝備的道具圖標
|
||
function getEquippedItemIcon(slot, type = 'equipment') {
|
||
if (!inventorySystem) return '📦'
|
||
const itemId = getEquippedItemId(slot, type)
|
||
if (!itemId) return '📦'
|
||
|
||
// 從 inventoryItems 中查找
|
||
const itemData = inventoryItems.value[itemId]
|
||
return itemData?.item?.icon || '📦'
|
||
}
|
||
|
||
// 獲取裝備的道具名稱
|
||
function getEquippedItemName(slot, type = 'equipment') {
|
||
if (!inventorySystem) return ''
|
||
const itemId = getEquippedItemId(slot, type)
|
||
if (!itemId) return ''
|
||
|
||
// 從 inventoryItems 中查找
|
||
const itemData = inventoryItems.value[itemId]
|
||
return itemData?.item?.name || ''
|
||
}
|
||
|
||
// 檢查槽位是否有裝備（支持新結構）
|
||
function hasEquipped(slot, type = null) {
|
||
if (!inventorySystem) return false
|
||
const equipped = inventorySystem.getEquipped()
|
||
const slotData = equipped[slot]
|
||
if (!slotData) return false
|
||
|
||
// 兼容舊格式
|
||
if (typeof slotData === 'string' || (typeof slotData === 'object' && slotData.itemId)) {
|
||
return type === null || type === 'equipment'
|
||
}
|
||
|
||
// 新格式：雙槽位
|
||
if (type === null) {
|
||
return !!(slotData.equipment || slotData.appearance)
|
||
}
|
||
return !!slotData[type]
|
||
}
|
||
|
||
// 檢查是否可以裝備
|
||
function canEquip(item) {
|
||
return item.type === 'equipment' ||
|
||
item.type === 'appearance' ||
|
||
item.type === 'talisman' ||
|
||
item.type === 'special'
|
||
}
|
||
|
||
// 獲取道具耐久度
|
||
function getItemDurability(itemId, instanceId = null) {
|
||
if (!inventorySystem) return 0
|
||
const inventory = inventorySystem.getInventory()
|
||
|
||
// 如果是實例 ID（包含下劃線和實例 ID）
|
||
if (itemId.includes('_') && itemId.split('_').length > 2) {
|
||
const parts = itemId.split('_')
|
||
const originalItemId = parts[0]
|
||
const instanceId = parts.slice(1).join('_')
|
||
const itemData = inventory[originalItemId]
|
||
if (itemData && itemData.items) {
|
||
const instance = itemData.items.find(i => i.id === instanceId)
|
||
return instance ? (instance.durability || 0) : 0
|
||
}
|
||
} else {
|
||
// 舊格式或消耗品
|
||
const itemData = inventory[itemId]
|
||
if (!itemData) return 0
|
||
|
||
// 如果有實例數據
|
||
if (itemData.items && itemData.items.length > 0) {
|
||
if (instanceId) {
|
||
const instance = itemData.items.find(i => i.id === instanceId)
|
||
return instance ? (instance.durability || 0) : 0
|
||
}
|
||
return itemData.items[0].durability || 0
|
||
}
|
||
}
|
||
|
||
return 0
|
||
}
|
||
|
||
// 處理使用道具
|
||
async function handleUseItem(itemId) {
|
||
if (!inventorySystem) return
|
||
|
||
try {
|
||
const result = await inventorySystem.useItem(itemId, 1)
|
||
if (result.success) {
|
||
await updateInventoryList()
|
||
updatePetState()
|
||
console.log(`[UI] 使用了道具: ${itemId}`)
|
||
} else {
|
||
console.error(`[UI] 使用道具失敗: ${result.message}`)
|
||
}
|
||
} catch (error) {
|
||
console.error('[UI] 使用道具錯誤:', error)
|
||
}
|
||
}
|
||
|
||
// 處理裝備道具
|
||
// equipType: 'equipment' | 'appearance' | 'auto'
|
||
async function handleEquip(itemId, slot, equipType = 'auto') {
|
||
if (!inventorySystem) return
|
||
|
||
try {
|
||
// 如果是實例 ID（裝備類分開顯示），需要提取原始 itemId 和 instanceId
|
||
let actualItemId = itemId
|
||
let instanceId = null
|
||
|
||
const itemData = inventoryItems.value[itemId]
|
||
if (itemData) {
|
||
if (itemData.originalItemId) {
|
||
// 這是分開顯示的裝備實例
|
||
actualItemId = itemData.originalItemId
|
||
instanceId = itemData.instanceId
|
||
} else if (itemId.includes('_') && itemId.split('_').length > 2) {
|
||
// 實例 ID 格式：itemId_instanceId
|
||
const parts = itemId.split('_')
|
||
actualItemId = parts[0]
|
||
instanceId = parts.slice(1).join('_')
|
||
}
|
||
}
|
||
|
||
const result = await inventorySystem.equipItem(actualItemId, slot, equipType, instanceId)
|
||
if (result.success) {
|
||
await updateInventoryList()
|
||
updatePetState()
|
||
const typeName = result.type === 'appearance' ? '外觀' : '實際'
|
||
console.log(`[UI] 裝備了道具: ${actualItemId} (${typeName})`)
|
||
} else {
|
||
console.error(`[UI] 裝備失敗: ${result.message}`)
|
||
}
|
||
} catch (error) {
|
||
console.error('[UI] 裝備錯誤:', error)
|
||
}
|
||
}
|
||
|
||
// 處理卸下裝備
|
||
// type: 'equipment' | 'appearance' | null (卸下全部)
|
||
async function handleUnequip(slot, type = null) {
|
||
if (!inventorySystem) return
|
||
|
||
try {
|
||
const result = await inventorySystem.unequipItem(slot, type)
|
||
if (result.success) {
|
||
await updateInventoryList()
|
||
updatePetState()
|
||
const typeName = type === 'appearance' ? '外觀' : (type === 'equipment' ? '實際' : '全部')
|
||
console.log(`[UI] 卸下了裝備: ${slot} (${typeName})`)
|
||
} else {
|
||
console.error(`[UI] 卸下失敗: ${result.message}`)
|
||
}
|
||
} catch (error) {
|
||
console.error('[UI] 卸下錯誤:', error)
|
||
}
|
||
}
|
||
|
||
// 處理修復裝備
|
||
async function handleRepair(itemId) {
|
||
if (!inventorySystem) return
|
||
|
||
try {
|
||
const result = await inventorySystem.repairItem(itemId)
|
||
if (result.success) {
|
||
await updateInventoryList()
|
||
updatePetState()
|
||
console.log(`[UI] 修復了裝備: ${itemId}`)
|
||
} else {
|
||
console.error(`[UI] 修復失敗: ${result.message}`)
|
||
}
|
||
} catch (error) {
|
||
console.error('[UI] 修復錯誤:', error)
|
||
}
|
||
}
|
||
|
||
// Debug 成就功能
|
||
async function debugUnlockAchievement() {
|
||
if (!achievementSystem || !debugAchievementId.value) {
|
||
console.log('[ERR] 請輸入成就 ID')
|
||
return
|
||
}
|
||
|
||
const achievement = allAchievements.value.find(a => a.id === debugAchievementId.value)
|
||
if (!achievement) {
|
||
console.log(`[ERR] 找不到成就: ${debugAchievementId.value}`)
|
||
return
|
||
}
|
||
|
||
await achievementSystem.unlockAchievement(achievement)
|
||
await updateAchievementList()
|
||
updatePetState()
|
||
console.log(`[OK] 成就已解鎖: ${achievement.name}`)
|
||
}
|
||
|
||
async function debugListAchievements() {
|
||
if (!achievementSystem) {
|
||
console.log('[ERR] 成就系統未初始化')
|
||
return
|
||
}
|
||
|
||
const unlocked = achievementSystem.getUnlockedAchievements()
|
||
const locked = achievementSystem.getLockedAchievements()
|
||
|
||
console.log('\n' + '='.repeat(60))
|
||
console.log('🏆 成就列表')
|
||
console.log('='.repeat(60))
|
||
console.log(`\n✅ 已解鎖 (${unlocked.length}/${allAchievements.value.length}):`)
|
||
unlocked.forEach(a => {
|
||
console.log(` ${a.icon} ${a.name} - ${a.description}`)
|
||
})
|
||
|
||
console.log(`\n🔒 未解鎖 (${locked.length}):`)
|
||
locked.forEach(a => {
|
||
const progress = achievementSystem.getAchievementProgress(a)
|
||
if (progress.current !== undefined && progress.target !== undefined) {
|
||
console.log(` ${a.icon} ${a.name} - ${a.description}`)
|
||
console.log(` 進度: ${progress.current}/${progress.target} (${Math.round(progress.progress)}%)`)
|
||
} else {
|
||
console.log(` ${a.icon} ${a.name} - ${a.description}`)
|
||
}
|
||
})
|
||
console.log('='.repeat(60) + '\n')
|
||
}
|
||
|
||
async function debugUnlockAllAchievements() {
|
||
if (!achievementSystem) {
|
||
console.log('[ERR] 成就系統未初始化')
|
||
return
|
||
}
|
||
|
||
const { ACHIEVEMENTS } = await import('../data/achievements.js')
|
||
let count = 0
|
||
|
||
for (const achievement of ACHIEVEMENTS) {
|
||
if (!achievementSystem.unlockedAchievements.includes(achievement.id)) {
|
||
await achievementSystem.unlockAchievement(achievement)
|
||
count++
|
||
}
|
||
}
|
||
|
||
await updateAchievementList()
|
||
updatePetState()
|
||
console.log(`[OK] 已解鎖 ${count} 個成就`)
|
||
}
|
||
|
||
async function debugResetAchievements() {
|
||
if (!achievementSystem) {
|
||
console.log('[ERR] 成就系統未初始化')
|
||
return
|
||
}
|
||
|
||
if (!confirm('確定要重置所有成就嗎？此操作無法復原！')) {
|
||
return
|
||
}
|
||
|
||
achievementSystem.unlockedAchievements = []
|
||
achievementSystem.achievementStats = {
|
||
actionCounts: {
|
||
feed: 0,
|
||
play: 0,
|
||
clean: 0,
|
||
heal: 0,
|
||
sleep: 0,
|
||
pray: 0,
|
||
drawFortune: 0
|
||
},
|
||
eventCount: 0,
|
||
eventTypeCounts: {
|
||
good: 0,
|
||
bad: 0,
|
||
weird: 0,
|
||
rare: 0
|
||
},
|
||
recoveredFromDying: false,
|
||
perfectStateReached: false
|
||
}
|
||
|
||
// 清除成就加成
|
||
await petSystem.updateState({ achievementBuffs: {} })
|
||
petSystem.calculateCombatStats()
|
||
|
||
// 同步到 API
|
||
try {
|
||
await achievementSystem.api.saveAchievements({
|
||
unlocked: [],
|
||
stats: achievementSystem.achievementStats
|
||
})
|
||
} catch (error) {
|
||
localStorage.setItem('achievements', JSON.stringify({
|
||
unlocked: [],
|
||
stats: achievementSystem.achievementStats
|
||
}))
|
||
}
|
||
|
||
await updateAchievementList()
|
||
updatePetState()
|
||
console.log('[OK] 成就已重置')
|
||
}
|
||
|
||
// Debug 背包功能
|
||
async function debugAddRandomItem() {
|
||
if (!inventorySystem) {
|
||
console.log('[ERR] 背包系統未初始化')
|
||
return
|
||
}
|
||
|
||
const { ITEMS } = await import('../data/items.js')
|
||
const itemIds = Object.keys(ITEMS)
|
||
const randomItemId = itemIds[Math.floor(Math.random() * itemIds.length)]
|
||
|
||
const result = await inventorySystem.addItem(randomItemId, 1)
|
||
if (result.success) {
|
||
await updateInventoryList()
|
||
updatePetState()
|
||
console.log(`[OK] 隨機產生道具: ${result.item.name}`)
|
||
} else {
|
||
console.error(`[ERR] 產生道具失敗: ${result.message}`)
|
||
}
|
||
}
|
||
|
||
async function debugAddItemByType(type) {
|
||
if (!inventorySystem) {
|
||
console.log('[ERR] 背包系統未初始化')
|
||
return
|
||
}
|
||
|
||
const { ITEMS } = await import('../data/items.js')
|
||
const itemsOfType = Object.entries(ITEMS)
|
||
.filter(([id, item]) => item.type === type)
|
||
.map(([id]) => id)
|
||
|
||
if (itemsOfType.length === 0) {
|
||
console.log(`[ERR] 沒有找到類型為 ${type} 的道具`)
|
||
return
|
||
}
|
||
|
||
const randomItemId = itemsOfType[Math.floor(Math.random() * itemsOfType.length)]
|
||
const result = await inventorySystem.addItem(randomItemId, 1)
|
||
|
||
if (result.success) {
|
||
await updateInventoryList()
|
||
updatePetState()
|
||
console.log(`[OK] 產生 ${type} 道具: ${result.item.name}`)
|
||
} else {
|
||
console.error(`[ERR] 產生道具失敗: ${result.message}`)
|
||
}
|
||
}
|
||
|
||
async function debugAddItemByCategory(category) {
|
||
if (!inventorySystem) {
|
||
console.log('[ERR] 背包系統未初始化')
|
||
return
|
||
}
|
||
|
||
const { ITEMS } = await import('../data/items.js')
|
||
const itemsOfCategory = Object.entries(ITEMS)
|
||
.filter(([id, item]) => item.category === category)
|
||
.map(([id]) => id)
|
||
|
||
if (itemsOfCategory.length === 0) {
|
||
console.log(`[ERR] 沒有找到類別為 ${category} 的道具`)
|
||
return
|
||
}
|
||
|
||
const randomItemId = itemsOfCategory[Math.floor(Math.random() * itemsOfCategory.length)]
|
||
const result = await inventorySystem.addItem(randomItemId, 1)
|
||
|
||
if (result.success) {
|
||
await updateInventoryList()
|
||
updatePetState()
|
||
console.log(`[OK] 產生 ${category} 道具: ${result.item.name}`)
|
||
} else {
|
||
console.error(`[ERR] 產生道具失敗: ${result.message}`)
|
||
}
|
||
}
|
||
|
||
// 處理鍵盤輸入（可選）
|
||
const handleKeydown = (e) => {
|
||
// Ctrl + Shift + D 開關 Debug 面板
|
||
if (e.ctrlKey && e.shiftKey && e.key === 'D') {
|
||
showDebug.value = !showDebug.value
|
||
}
|
||
}
|
||
|
||
onMounted(async () => {
|
||
window.addEventListener('keydown', handleKeydown)
|
||
// 檢查是否已有寵物
|
||
try {
|
||
const existingState = localStorage.getItem('petState')
|
||
if (existingState) {
|
||
// 已有寵物，直接初始化
|
||
systemStatus.value = '正在載入寵物...'
|
||
await init()
|
||
} else {
|
||
// 新寵物，顯示名字輸入
|
||
systemStatus.value = '歡迎！請為你的寵物命名'
|
||
showNameInput.value = true
|
||
}
|
||
|
||
// 將所有函數掛載到 window
|
||
window.petSystem = petSystem
|
||
window.eventSystem = eventSystem
|
||
window.templeSystem = templeSystem
|
||
window.inventorySystem = inventorySystem
|
||
window.showStatus = showStatus
|
||
window.start = start
|
||
window.stop = stop
|
||
window.feed = feed
|
||
window.play = play
|
||
window.clean = clean
|
||
window.heal = heal
|
||
window.sleep = sleep
|
||
window.triggerEvent = triggerEvent
|
||
window.listEvents = listEvents
|
||
window.eventHistory = eventHistory
|
||
window.pray = pray
|
||
window.drawFortune = drawFortune
|
||
window.switchDeity = switchDeity
|
||
window.listDeities = listDeities
|
||
window.applyBuffs = applyBuffs
|
||
window.help = help
|
||
window.init = init
|
||
window.testBonuses = testBonuses
|
||
|
||
// 事件測試函數
|
||
window.testEvent = async (eventId) => {
|
||
const events = await apiService.getEvents()
|
||
const event = events.find(e => e.id === eventId)
|
||
if (!event) {
|
||
console.log(`[ERR] 找不到事件: ${eventId}`)
|
||
return
|
||
}
|
||
console.log(`\n[TEST] 測試: ${event.id} (${event.type})`)
|
||
showStatus()
|
||
await triggerEvent(eventId)
|
||
await new Promise(r => setTimeout(r, 100))
|
||
showStatus()
|
||
}
|
||
|
||
window.testAllEvents = async () => {
|
||
const events = await apiService.getEvents()
|
||
console.log(`\n[TEST] 測試 ${events.length} 個事件...\n`)
|
||
for (const e of events) {
|
||
console.log(`[START] ${e.id}`)
|
||
await triggerEvent(e.id)
|
||
await new Promise(r => setTimeout(r, 50))
|
||
}
|
||
console.log('\n[OK] 完成')
|
||
showStatus()
|
||
}
|
||
|
||
// 檢查進化狀態
|
||
window.checkEvolution = () => {
|
||
const state = petSystem.getState()
|
||
const species = petSystem.speciesConfig
|
||
|
||
console.log('\n' + '='.repeat(60))
|
||
console.log('[CHECK] 進化系統檢查')
|
||
console.log('='.repeat(60))
|
||
console.log(`\n當前階段: ${state.stage}`)
|
||
console.log(`年齡: ${state.ageSeconds.toFixed(1)} 秒`)
|
||
console.log(`屬性: STR ${state.str.toFixed(1)} | INT ${state.int.toFixed(1)} | DEX ${state.dex.toFixed(1)}`)
|
||
|
||
// 找到當前階段
|
||
const currentIdx = species.lifecycle.findIndex(s => s.stage === state.stage)
|
||
if (currentIdx < 0) {
|
||
console.log('\n[ERR] 找不到當前階段配置')
|
||
return
|
||
}
|
||
|
||
const currentStage = species.lifecycle[currentIdx]
|
||
|
||
if (currentIdx < species.lifecycle.length - 1) {
|
||
const nextStage = species.lifecycle[currentIdx + 1]
|
||
console.log(`\n下一階段: ${nextStage.stage}`)
|
||
|
||
// 檢查當前階段是否已達到結束時間
|
||
const timeRequirement = currentStage.durationSeconds
|
||
const timeMet = state.ageSeconds >= timeRequirement
|
||
|
||
if (timeRequirement === Infinity) {
|
||
console.log(`年齡條件: 已達到最終階段，無需再進化`)
|
||
} else {
|
||
console.log(`年齡條件: ${state.ageSeconds.toFixed(1)}/${timeRequirement} 秒 ${timeMet ? '[OK]' : '[ERR]'}`)
|
||
}
|
||
|
||
// 檢查屬性條件
|
||
if (nextStage.conditions && Object.keys(nextStage.conditions).length > 0) {
|
||
console.log('屬性條件:')
|
||
if (nextStage.conditions.str) {
|
||
const met = state.str >= nextStage.conditions.str
|
||
console.log(` STR: ${state.str.toFixed(1)}/${nextStage.conditions.str} ${met ? '[OK]' : '[ERR]'}`)
|
||
}
|
||
if (nextStage.conditions.int) {
|
||
const met = state.int >= nextStage.conditions.int
|
||
console.log(` INT: ${state.int.toFixed(1)}/${nextStage.conditions.int} ${met ? '[OK]' : '[ERR]'}`)
|
||
}
|
||
if (nextStage.conditions.dex) {
|
||
const met = state.dex >= nextStage.conditions.dex
|
||
console.log(` DEX: ${state.dex.toFixed(1)}/${nextStage.conditions.dex} ${met ? '[OK]' : '[ERR]'}`)
|
||
}
|
||
} else {
|
||
console.log('屬性條件: 無')
|
||
}
|
||
|
||
// 顯示進化建議
|
||
if (timeMet && nextStage.conditions) {
|
||
const allStatsMet = Object.entries(nextStage.conditions).every(([key, value]) => state[key] >= value)
|
||
if (allStatsMet) {
|
||
console.log('\n* 條件已滿足！應該會自動進化')
|
||
} else {
|
||
console.log('\n[TIP] 提示: 年齡已足夠，再提升屬性即可進化')
|
||
}
|
||
} else if (!timeMet) {
|
||
const remaining = timeRequirement - state.ageSeconds
|
||
console.log(`\n[WAIT] 還需等待 ${remaining.toFixed(1)} 秒`)
|
||
}
|
||
} else {
|
||
console.log('\n[DONE] 已達到最終階段')
|
||
}
|
||
|
||
console.log('='.repeat(60) + '\n')
|
||
}
|
||
} catch (error) {
|
||
systemStatus.value = '[ERR] 初始化失敗: ' + error.message
|
||
console.error(error)
|
||
}
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
if (isRunning.value) {
|
||
stop()
|
||
}
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
/* 像素字体 - Zpix 支持繁体中文 */
|
||
@import url('https://cdn.jsdelivr.net/npm/zpix-pixel-font@latest/dist/Zpix.css');
|
||
|
||
* {
|
||
font-family: 'Zpix', 'Noto Sans TC', monospace;
|
||
image-rendering: pixelated;
|
||
}
|
||
|
||
.pet-system-container {
|
||
min-height: 100vh;
|
||
background: #0a0a0a;
|
||
color: #00ff00;
|
||
padding: 15px;
|
||
}
|
||
|
||
.header {
|
||
text-align: center;
|
||
margin-bottom: 20px;
|
||
border: 3px solid #00ff00;
|
||
padding: 15px;
|
||
background: #000;
|
||
box-shadow: 0 0 15px #00ff00;
|
||
}
|
||
|
||
.header h1 {
|
||
color: #00ffff;
|
||
font-size: 18px;
|
||
margin: 0 0 10px 0;
|
||
text-shadow: 2px 2px 0 #000, 0 0 10px #00ffff;
|
||
}
|
||
|
||
.subtitle {
|
||
color: #00aa00;
|
||
font-size: 10px;
|
||
}
|
||
|
||
/* 寵物狀態顯示 */
|
||
.pet-status {
|
||
background: #000;
|
||
padding: 15px;
|
||
margin-bottom: 15px;
|
||
border: 3px solid #00ff00;
|
||
box-shadow: inset 0 0 20px rgba(0, 255, 0, 0.1);
|
||
}
|
||
|
||
.status-section {
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.status-section h3 {
|
||
color: #00ffff;
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
text-align: center;
|
||
padding-bottom: 8px;
|
||
border-bottom: 2px solid #00ff00;
|
||
text-shadow: 0 0 5px #00ffff;
|
||
}
|
||
|
||
.status-grid {
|
||
display: grid;
|
||
gap: 10px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.stat-item {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.stat-label {
|
||
min-width: 50px;
|
||
color: #00aa00;
|
||
font-weight: bold;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.stat-bar {
|
||
flex: 1;
|
||
height: 12px;
|
||
background: #000;
|
||
border: 2px solid #00ff00;
|
||
position: relative;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.stat-fill {
|
||
height: 100%;
|
||
background: #00ff00;
|
||
transition: width 0.3s ease;
|
||
box-shadow: 0 0 10px #00ff00;
|
||
}
|
||
|
||
.stat-value {
|
||
min-width: 40px;
|
||
text-align: right;
|
||
color: #ffffff;
|
||
font-size: 10px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.pet-info-grid,
|
||
.bonus-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||
gap: 8px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.info-item,
|
||
.bonus-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 5px 8px;
|
||
background: #001100;
|
||
border: 1px solid #00ff00;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.info-item:hover,
|
||
.bonus-item:hover {
|
||
background: #002200;
|
||
box-shadow: 0 0 5px #00ff00;
|
||
}
|
||
|
||
.info-label,
|
||
.bonus-label {
|
||
color: #00aa00;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.info-value,
|
||
.bonus-value {
|
||
color: #ffffff;
|
||
font-size: 10px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.bonus-value.positive {
|
||
color: #00ff00;
|
||
}
|
||
|
||
.bonus-value.negative {
|
||
color: #ff0000;
|
||
}
|
||
|
||
.bonus-item.not-implemented {
|
||
opacity: 0.6;
|
||
border-color: #ff0000;
|
||
background: #110000;
|
||
box-shadow: inset 0 0 10px rgba(255, 0, 0, 0.1);
|
||
}
|
||
|
||
.bonus-item.not-implemented .bonus-label {
|
||
color: #ff0000;
|
||
text-decoration: line-through;
|
||
}
|
||
|
||
.bonus-item.not-implemented .bonus-value {
|
||
color: #ff0000 !important;
|
||
}
|
||
|
||
.status-badges {
|
||
display: flex;
|
||
gap: 8px;
|
||
flex-wrap: wrap;
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.badge {
|
||
background: #000;
|
||
border: 2px solid #ffff00;
|
||
color: #ffff00;
|
||
padding: 4px 8px;
|
||
font-size: 10px;
|
||
animation: blink 1s infinite;
|
||
}
|
||
|
||
.badge.sick {
|
||
border-color: #ff0000;
|
||
color: #ff0000;
|
||
}
|
||
|
||
@keyframes blink {
|
||
0%, 50% { opacity: 1; }
|
||
51%, 100% { opacity: 0.5; }
|
||
}
|
||
|
||
/* 操作按鈕區 */
|
||
.action-panel {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
|
||
gap: 20px;
|
||
margin-bottom: 20px;
|
||
}
|
||
|
||
.action-group {
|
||
background: #252526;
|
||
padding: 20px;
|
||
border-radius: 8px;
|
||
border-left: 4px solid #4ec9b0;
|
||
}
|
||
|
||
.action-group h3 {
|
||
color: #4ec9b0;
|
||
margin-bottom: 15px;
|
||
font-size: 1.1em;
|
||
}
|
||
|
||
.button-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
|
||
gap: 8px;
|
||
}
|
||
|
||
button {
|
||
background: #000;
|
||
border: 2px solid #00ff00;
|
||
color: #00ff00;
|
||
padding: 10px;
|
||
cursor: pointer;
|
||
transition: all 0.1s;
|
||
font-size: 12px;
|
||
}
|
||
|
||
button:hover:not(:disabled) {
|
||
background: #00ff00;
|
||
color: #000;
|
||
box-shadow: 0 0 10px #00ff00;
|
||
}
|
||
|
||
button:active:not(:disabled) {
|
||
transform: translate(2px, 2px);
|
||
}
|
||
|
||
button:disabled {
|
||
border-color: #003300;
|
||
color: #003300;
|
||
cursor: not-allowed;
|
||
opacity: 0.5;
|
||
}
|
||
|
||
.danger-button {
|
||
background: #d32f2f !important;
|
||
}
|
||
|
||
.danger-button:hover:not(:disabled) {
|
||
background: #f44336 !important;
|
||
}
|
||
|
||
.console-output {
|
||
background: #000;
|
||
border: 3px solid #00ff00;
|
||
padding: 10px;
|
||
min-height: 200px;
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
font-size: 10px;
|
||
box-shadow: inset 0 0 20px rgba(0, 255, 0, 0.1);
|
||
}
|
||
|
||
.log-entry {
|
||
margin: 3px 0;
|
||
padding: 3px;
|
||
border-left: 2px solid #00ff00;
|
||
padding-left: 8px;
|
||
color: #00ff00;
|
||
}
|
||
|
||
/* Debug 面板樣式 */
|
||
.debug-toggle {
|
||
position: fixed;
|
||
top: 10px;
|
||
right: 10px;
|
||
background: #000;
|
||
border: 2px solid #ff00ff;
|
||
color: #ff00ff;
|
||
padding: 5px 10px;
|
||
cursor: pointer;
|
||
font-size: 10px;
|
||
z-index: 100;
|
||
box-shadow: 0 0 10px #ff00ff;
|
||
}
|
||
|
||
.debug-toggle:hover {
|
||
background: #ff00ff;
|
||
color: #000;
|
||
}
|
||
|
||
.debug-panel {
|
||
position: fixed;
|
||
top: 50px;
|
||
right: 10px;
|
||
background: #000;
|
||
border: 3px solid #ff00ff;
|
||
padding: 15px;
|
||
max-width: 250px;
|
||
z-index: 99;
|
||
box-shadow: 0 0 20px #ff00ff;
|
||
}
|
||
|
||
.debug-panel h3 {
|
||
color: #ff00ff;
|
||
margin-bottom: 10px;
|
||
font-size: 12px;
|
||
text-shadow: 0 0 5px #ff00ff;
|
||
}
|
||
|
||
.debug-group {
|
||
margin-bottom: 10px;
|
||
padding-bottom: 10px;
|
||
border-bottom: 1px solid #330033;
|
||
}
|
||
|
||
.debug-group:last-child {
|
||
border-bottom: none;
|
||
}
|
||
|
||
.debug-group h4 {
|
||
color: #ff00ff;
|
||
margin-bottom: 5px;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.debug-panel button {
|
||
width: 100%;
|
||
margin-bottom: 5px;
|
||
border-color: #ff00ff;
|
||
color: #ff00ff;
|
||
font-size: 9px;
|
||
}
|
||
|
||
.debug-panel button:hover:not(:disabled) {
|
||
background: #ff00ff;
|
||
}
|
||
|
||
.name-input-modal {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background: rgba(0, 0, 0, 0.95);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 1000;
|
||
}
|
||
|
||
.modal-content {
|
||
background: #000;
|
||
border: 3px solid #00ffff;
|
||
padding: 20px;
|
||
min-width: 300px;
|
||
box-shadow: 0 0 30px #00ffff;
|
||
}
|
||
|
||
.modal-content h2 {
|
||
color: #00ffff;
|
||
font-size: 14px;
|
||
margin-bottom: 10px;
|
||
text-shadow: 0 0 10px #00ffff;
|
||
text-align: center;
|
||
}
|
||
|
||
.modal-content p {
|
||
color: #00aa00;
|
||
font-size: 10px;
|
||
margin-bottom: 15px;
|
||
text-align: center;
|
||
}
|
||
|
||
.name-input {
|
||
width: 100%;
|
||
background: #000;
|
||
border: 2px solid #00ff00;
|
||
color: #00ff00;
|
||
padding: 10px;
|
||
font-size: 12px;
|
||
margin-bottom: 15px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.name-input:focus {
|
||
outline: none;
|
||
border-color: #00ffff;
|
||
box-shadow: 0 0 10px #00ffff;
|
||
}
|
||
|
||
.modal-buttons {
|
||
display: flex;
|
||
justify-content: center;
|
||
}
|
||
|
||
.modal-buttons button {
|
||
min-width: 100px;
|
||
}
|
||
|
||
/* 滚动条样式 */
|
||
::-webkit-scrollbar {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: #000;
|
||
border: 1px solid #00ff00;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: #00ff00;
|
||
border: 2px solid #000;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: #00ffff;
|
||
box-shadow: 0 0 5px #00ffff;
|
||
}
|
||
|
||
/* 其他修正 */
|
||
.info-value-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.info-value.highlight {
|
||
color: #00ffff;
|
||
text-shadow: 0 0 5px #00ffff;
|
||
}
|
||
|
||
.info-sub {
|
||
color: #00aa00;
|
||
font-size: 8px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
button.active {
|
||
background: #00ff00;
|
||
color: #000;
|
||
box-shadow: 0 0 10px #00ff00;
|
||
}
|
||
|
||
/* 滚动条样式 */
|
||
::-webkit-scrollbar {
|
||
width: 12px;
|
||
height: 12px;
|
||
}
|
||
|
||
::-webkit-scrollbar-track {
|
||
background: #000;
|
||
border: 1px solid #00ff00;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb {
|
||
background: #00ff00;
|
||
border: 2px solid #000;
|
||
}
|
||
|
||
::-webkit-scrollbar-thumb:hover {
|
||
background: #00ffff;
|
||
box-shadow: 0 0 5px #00ffff;
|
||
}
|
||
|
||
/* 其他修正 */
|
||
.info-value-group {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: flex-end;
|
||
}
|
||
|
||
.info-value.highlight {
|
||
color: #00ffff;
|
||
text-shadow: 0 0 5px #00ffff;
|
||
}
|
||
|
||
.info-sub {
|
||
color: #00aa00;
|
||
font-size: 8px;
|
||
margin-top: 2px;
|
||
}
|
||
|
||
.modal-content {
|
||
padding: 30px;
|
||
border-radius: 12px;
|
||
border: 2px solid #4ec9b0;
|
||
min-width: 400px;
|
||
max-width: 90%;
|
||
}
|
||
|
||
.modal-content h2 {
|
||
color: #4ec9b0;
|
||
margin-bottom: 10px;
|
||
text-align: center;
|
||
}
|
||
|
||
.modal-content p {
|
||
color: #d4d4d4;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.name-input {
|
||
width: 100%;
|
||
padding: 12px;
|
||
background: #1e1e1e;
|
||
border: 2px solid #3c3c3c;
|
||
border-radius: 6px;
|
||
color: #d4d4d4;
|
||
font-size: 1.1em;
|
||
margin-bottom: 20px;
|
||
text-align: center;
|
||
}
|
||
|
||
.name-input:focus {
|
||
outline: none;
|
||
border-color: #4ec9b0;
|
||
}
|
||
|
||
.modal-buttons {
|
||
display: flex;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
}
|
||
|
||
.modal-buttons button {
|
||
background: #007acc;
|
||
color: #fff;
|
||
border: none;
|
||
padding: 12px 24px;
|
||
border-radius: 6px;
|
||
cursor: pointer;
|
||
font-size: 1em;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.modal-buttons button:hover:not(:disabled) {
|
||
background: #0098ff;
|
||
}
|
||
|
||
.modal-buttons button:disabled {
|
||
background: #3c3c3c;
|
||
color: #858585;
|
||
cursor: not-allowed;
|
||
opacity: 0.6;
|
||
}
|
||
|
||
@media (max-width: 768px) {
|
||
.action-panel {
|
||
grid-template-columns: 1fr;
|
||
}
|
||
|
||
.modal-content {
|
||
min-width: 90%;
|
||
padding: 20px;
|
||
}
|
||
}
|
||
|
||
/* 折疊面板樣式 */
|
||
details.event-list, details.deity-list {
|
||
margin-top: 10px;
|
||
border: 1px solid #3c3c3c;
|
||
border-radius: 4px;
|
||
padding: 10px;
|
||
}
|
||
|
||
details summary {
|
||
cursor: pointer;
|
||
user-select: none;
|
||
color: #4ec9b0;
|
||
font-weight: bold;
|
||
padding: 5px;
|
||
list-style-position: inside;
|
||
}
|
||
|
||
details summary:hover {
|
||
background: rgba(78, 201, 176, 0.1);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
details[open] summary {
|
||
margin-bottom: 10px;
|
||
border-bottom: 1px solid #3c3c3c;
|
||
}
|
||
|
||
/* 小按鈕網格 */
|
||
.button-grid.small {
|
||
gap: 8px;
|
||
}
|
||
|
||
.button-grid.small button {
|
||
padding: 8px 12px;
|
||
font-size: 0.85em;
|
||
}
|
||
|
||
/* 激活狀態的按鈕 */
|
||
button.active {
|
||
background: #4ec9b0 !important;
|
||
color: #1e1e1e !important;
|
||
font-weight: bold;
|
||
border: 2px solid #6ee2c4;
|
||
}
|
||
|
||
button.active:hover {
|
||
background: #6ee2c4 !important;
|
||
}
|
||
|
||
/* 成就系統樣式 */
|
||
.achievement-summary {
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.achievement-stats {
|
||
display: flex;
|
||
justify-content: space-around;
|
||
padding: 10px;
|
||
background: #001100;
|
||
border: 1px solid #00ff00;
|
||
border-radius: 4px;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.achievement-stats span {
|
||
color: #00ff00;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.achievement-list {
|
||
margin-top: 10px;
|
||
border: 1px solid #3c3c3c;
|
||
border-radius: 4px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.achievement-list summary {
|
||
cursor: pointer;
|
||
user-select: none;
|
||
color: #4ec9b0;
|
||
font-weight: bold;
|
||
padding: 5px;
|
||
list-style-position: inside;
|
||
}
|
||
|
||
.achievement-list summary:hover {
|
||
background: rgba(78, 201, 176, 0.1);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.achievement-list[open] summary {
|
||
margin-bottom: 10px;
|
||
border-bottom: 1px solid #3c3c3c;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.achievement-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
||
gap: 10px;
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.achievement-item {
|
||
display: flex;
|
||
gap: 10px;
|
||
padding: 10px;
|
||
background: #001100;
|
||
border: 2px solid #003300;
|
||
border-radius: 4px;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.achievement-item.unlocked {
|
||
border-color: #00ff00;
|
||
background: #002200;
|
||
box-shadow: 0 0 10px rgba(0, 255, 0, 0.3);
|
||
}
|
||
|
||
.achievement-item.locked {
|
||
opacity: 0.6;
|
||
border-color: #333;
|
||
}
|
||
|
||
.achievement-icon {
|
||
font-size: 24px;
|
||
min-width: 30px;
|
||
text-align: center;
|
||
}
|
||
|
||
.achievement-info {
|
||
flex: 1;
|
||
}
|
||
|
||
.achievement-name {
|
||
color: #00ffff;
|
||
font-weight: bold;
|
||
font-size: 14px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.achievement-item.locked .achievement-name {
|
||
color: #888;
|
||
}
|
||
|
||
.achievement-desc {
|
||
color: #aaa;
|
||
font-size: 11px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.achievement-progress {
|
||
margin-top: 6px;
|
||
}
|
||
|
||
.progress-bar {
|
||
width: 100%;
|
||
height: 6px;
|
||
background: #000;
|
||
border: 1px solid #333;
|
||
border-radius: 3px;
|
||
overflow: hidden;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.progress-fill {
|
||
height: 100%;
|
||
background: #00ff00;
|
||
transition: width 0.3s;
|
||
}
|
||
|
||
.progress-text {
|
||
color: #888;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.achievement-reward {
|
||
margin-top: 6px;
|
||
padding-top: 6px;
|
||
border-top: 1px solid #333;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.reward-label {
|
||
color: #00aa00;
|
||
margin-right: 4px;
|
||
}
|
||
|
||
.reward-item {
|
||
color: #00ff00;
|
||
margin-right: 8px;
|
||
}
|
||
|
||
/* 背包系統樣式 */
|
||
.equipment-slots {
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.equipment-slots h4 {
|
||
color: #4ec9b0;
|
||
margin-bottom: 10px;
|
||
font-size: 14px;
|
||
}
|
||
|
||
/* 稀有度圖例 */
|
||
.rarity-legend {
|
||
background: #001100;
|
||
border: 2px solid #3c3c3c;
|
||
border-radius: 4px;
|
||
padding: 10px;
|
||
margin-bottom: 15px;
|
||
}
|
||
|
||
.legend-title {
|
||
color: #4ec9b0;
|
||
font-size: 12px;
|
||
font-weight: bold;
|
||
margin-bottom: 8px;
|
||
}
|
||
|
||
.legend-items {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 8px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.legend-item {
|
||
padding: 4px 8px;
|
||
border-radius: 3px;
|
||
font-size: 10px;
|
||
border: 2px solid;
|
||
}
|
||
|
||
.legend-item.rarity-common {
|
||
border-color: #9d9d9d;
|
||
color: #9d9d9d;
|
||
}
|
||
|
||
.legend-item.rarity-uncommon {
|
||
border-color: #1eff00;
|
||
color: #1eff00;
|
||
box-shadow: 0 0 5px rgba(30, 255, 0, 0.3);
|
||
}
|
||
|
||
.legend-item.rarity-rare {
|
||
border-color: #0070dd;
|
||
color: #0070dd;
|
||
box-shadow: 0 0 8px rgba(0, 112, 221, 0.4);
|
||
}
|
||
|
||
.legend-item.rarity-epic {
|
||
border-color: #a335ee;
|
||
color: #a335ee;
|
||
box-shadow: 0 0 10px rgba(163, 53, 238, 0.5);
|
||
}
|
||
|
||
.legend-item.rarity-legendary {
|
||
border-color: #ff8000;
|
||
color: #ff8000;
|
||
box-shadow: 0 0 15px rgba(255, 128, 0, 0.6);
|
||
}
|
||
|
||
.legend-note {
|
||
color: #888;
|
||
font-size: 9px;
|
||
font-style: italic;
|
||
}
|
||
|
||
.slots-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(3, 1fr);
|
||
gap: 12px;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.equipment-slot-container {
|
||
border: 2px solid #3c3c3c;
|
||
border-radius: 4px;
|
||
padding: 8px;
|
||
background: #000511;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.slot-header {
|
||
font-size: 11px;
|
||
color: #4ec9b0;
|
||
font-weight: bold;
|
||
text-align: center;
|
||
padding-bottom: 4px;
|
||
border-bottom: 1px solid #3c3c3c;
|
||
}
|
||
|
||
.equipment-slot {
|
||
border: 2px solid #3c3c3c;
|
||
border-radius: 4px;
|
||
padding: 6px;
|
||
background: #001100;
|
||
min-height: 50px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
position: relative;
|
||
}
|
||
|
||
.equipment-slot-main.equipped {
|
||
border-color: #00ff00;
|
||
background: #002200;
|
||
box-shadow: 0 0 5px rgba(0, 255, 0, 0.3);
|
||
}
|
||
|
||
.equipment-slot-appearance.equipped {
|
||
border-color: #00ffff;
|
||
background: #002222;
|
||
box-shadow: 0 0 5px rgba(0, 255, 255, 0.3);
|
||
}
|
||
|
||
.slot-label {
|
||
font-size: 10px;
|
||
color: #888;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.slot-item {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 4px;
|
||
position: relative;
|
||
width: 100%;
|
||
}
|
||
|
||
.slot-item .item-icon {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.slot-item .item-name {
|
||
font-size: 10px;
|
||
color: #00ff00;
|
||
text-align: center;
|
||
}
|
||
|
||
.unequip-btn, .delete-btn {
|
||
width: 20px;
|
||
height: 20px;
|
||
padding: 0;
|
||
background: #ff0000;
|
||
border: 1px solid #ff0000;
|
||
border-radius: 3px;
|
||
color: white;
|
||
font-size: 10px;
|
||
cursor: pointer;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.unequip-btn:hover, .delete-btn:hover {
|
||
background: #cc0000;
|
||
transform: scale(1.1);
|
||
}
|
||
|
||
.delete-btn {
|
||
background: #aa0000;
|
||
border-color: #aa0000;
|
||
}
|
||
|
||
.delete-btn:hover {
|
||
background: #880000;
|
||
}
|
||
|
||
.slot-empty {
|
||
color: #666;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.inventory-list {
|
||
margin-top: 10px;
|
||
border: 1px solid #3c3c3c;
|
||
border-radius: 4px;
|
||
padding: 10px;
|
||
}
|
||
|
||
.inventory-list summary {
|
||
cursor: pointer;
|
||
user-select: none;
|
||
color: #4ec9b0;
|
||
font-weight: bold;
|
||
padding: 5px;
|
||
list-style-position: inside;
|
||
}
|
||
|
||
.inventory-list summary:hover {
|
||
background: rgba(78, 201, 176, 0.1);
|
||
border-radius: 4px;
|
||
}
|
||
|
||
.inventory-list[open] summary {
|
||
margin-bottom: 10px;
|
||
border-bottom: 1px solid #3c3c3c;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
.inventory-grid {
|
||
display: grid;
|
||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||
gap: 10px;
|
||
max-height: 400px;
|
||
overflow-y: auto;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.inventory-item {
|
||
border: 2px solid #3c3c3c;
|
||
border-radius: 4px;
|
||
padding: 10px;
|
||
background: #001100;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
/* 稀有度邊框顏色 */
|
||
.inventory-item.rarity-common {
|
||
border-color: #9d9d9d;
|
||
}
|
||
|
||
.inventory-item.rarity-uncommon {
|
||
border-color: #1eff00;
|
||
box-shadow: 0 0 5px rgba(30, 255, 0, 0.3);
|
||
}
|
||
|
||
.inventory-item.rarity-rare {
|
||
border-color: #0070dd;
|
||
box-shadow: 0 0 8px rgba(0, 112, 221, 0.4);
|
||
}
|
||
|
||
.inventory-item.rarity-epic {
|
||
border-color: #a335ee;
|
||
box-shadow: 0 0 10px rgba(163, 53, 238, 0.5);
|
||
}
|
||
|
||
.inventory-item.rarity-legendary {
|
||
border-color: #ff8000;
|
||
box-shadow: 0 0 15px rgba(255, 128, 0, 0.6);
|
||
background: linear-gradient(135deg, #001100 0%, #331100 100%);
|
||
}
|
||
|
||
.inventory-item .item-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
}
|
||
|
||
.inventory-item .item-icon {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.inventory-item .item-name {
|
||
flex: 1;
|
||
color: #00ffff;
|
||
font-weight: bold;
|
||
font-size: 13px;
|
||
}
|
||
|
||
.inventory-item .item-count {
|
||
color: #888;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.inventory-item .item-info {
|
||
font-size: 11px;
|
||
color: #aaa;
|
||
}
|
||
|
||
.inventory-item .item-type {
|
||
color: #4ec9b0;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.inventory-item .item-rarity {
|
||
font-weight: bold;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.inventory-item .drop-rate {
|
||
color: #888;
|
||
font-size: 10px;
|
||
font-weight: normal;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.inventory-item .item-description {
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.inventory-item .item-durability {
|
||
color: #ffaa00;
|
||
}
|
||
|
||
.inventory-item .item-actions {
|
||
display: flex;
|
||
gap: 5px;
|
||
flex-wrap: wrap;
|
||
}
|
||
|
||
.action-btn {
|
||
padding: 4px 8px;
|
||
font-size: 10px;
|
||
background: #333;
|
||
border: 1px solid #555;
|
||
color: #fff;
|
||
border-radius: 3px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
}
|
||
|
||
.action-btn:hover:not(:disabled) {
|
||
background: #555;
|
||
border-color: #777;
|
||
}
|
||
|
||
.action-btn:disabled {
|
||
opacity: 0.5;
|
||
cursor: not-allowed;
|
||
}
|
||
|
||
.use-btn:hover:not(:disabled) {
|
||
background: #00aa00;
|
||
border-color: #00ff00;
|
||
}
|
||
|
||
.equip-btn:hover:not(:disabled) {
|
||
background: #0066aa;
|
||
border-color: #0099ff;
|
||
}
|
||
|
||
.appearance-btn {
|
||
background: #333366 !important;
|
||
border-color: #6666aa !important;
|
||
}
|
||
|
||
.appearance-btn:hover:not(:disabled) {
|
||
background: #444477 !important;
|
||
border-color: #7777bb !important;
|
||
}
|
||
|
||
.repair-btn:hover:not(:disabled) {
|
||
background: #aa6600;
|
||
border-color: #ff9900;
|
||
}
|
||
|
||
/* 刪除區域樣式 */
|
||
.item-delete-section {
|
||
margin-top: 8px;
|
||
padding-top: 8px;
|
||
border-top: 1px solid #333;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 6px;
|
||
}
|
||
|
||
.delete-controls {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
}
|
||
|
||
.delete-label {
|
||
color: #888;
|
||
font-size: 10px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.delete-input {
|
||
width: 50px;
|
||
padding: 4px;
|
||
background: #1e1e1e;
|
||
border: 1px solid #3c3c3c;
|
||
border-radius: 3px;
|
||
color: #fff;
|
||
font-size: 11px;
|
||
text-align: center;
|
||
}
|
||
|
||
.delete-input:focus {
|
||
outline: none;
|
||
border-color: #ff0000;
|
||
box-shadow: 0 0 5px rgba(255, 0, 0, 0.3);
|
||
}
|
||
|
||
.delete-max {
|
||
color: #666;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.action-btn.delete-btn {
|
||
background: #aa0000 !important;
|
||
border-color: #aa0000 !important;
|
||
color: white !important;
|
||
width: 100%;
|
||
}
|
||
|
||
.action-btn.delete-btn:hover:not(:disabled) {
|
||
background: #cc0000 !important;
|
||
border-color: #cc0000 !important;
|
||
}
|
||
|
||
.inventory-empty {
|
||
grid-column: 1 / -1;
|
||
text-align: center;
|
||
color: #666;
|
||
padding: 20px;
|
||
}
|
||
|
||
.debug-input {
|
||
width: 100%;
|
||
padding: 5px;
|
||
margin-bottom: 5px;
|
||
background: #1e1e1e;
|
||
border: 1px solid #ff00ff;
|
||
color: #ff00ff;
|
||
font-size: 10px;
|
||
border-radius: 3px;
|
||
}
|
||
|
||
.debug-input:focus {
|
||
outline: none;
|
||
border-color: #ff00ff;
|
||
box-shadow: 0 0 5px rgba(255, 0, 255, 0.5);
|
||
}
|
||
|
||
/* 道具效果說明 */
|
||
.item-effects {
|
||
margin-top: 6px;
|
||
padding-top: 6px;
|
||
border-top: 1px solid #333;
|
||
font-size: 10px;
|
||
}
|
||
|
||
.effects-title {
|
||
color: #4ec9b0;
|
||
font-weight: bold;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.effects-flat, .effects-percent {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 6px;
|
||
margin-top: 4px;
|
||
}
|
||
|
||
.effect-item {
|
||
padding: 2px 6px;
|
||
background: #001122;
|
||
border: 1px solid #3c3c3c;
|
||
border-radius: 3px;
|
||
color: #00ff00;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
/* 道具 Tooltip 樣式 */
|
||
.item-tooltip {
|
||
position: fixed;
|
||
background: #000;
|
||
border: 2px solid #00ff00;
|
||
border-radius: 4px;
|
||
padding: 10px;
|
||
min-width: 200px;
|
||
max-width: 300px;
|
||
z-index: 10000;
|
||
box-shadow: 0 0 20px rgba(0, 255, 0, 0.5);
|
||
pointer-events: none;
|
||
font-size: 11px;
|
||
}
|
||
|
||
.tooltip-header {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 6px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.tooltip-icon {
|
||
font-size: 20px;
|
||
}
|
||
|
||
.tooltip-name {
|
||
font-weight: bold;
|
||
font-size: 13px;
|
||
color: #00ffff;
|
||
}
|
||
|
||
.tooltip-rarity {
|
||
font-size: 10px;
|
||
margin-bottom: 4px;
|
||
font-weight: bold;
|
||
}
|
||
|
||
.tooltip-type {
|
||
color: #4ec9b0;
|
||
font-size: 10px;
|
||
margin-bottom: 6px;
|
||
}
|
||
|
||
.tooltip-description {
|
||
color: #aaa;
|
||
font-size: 10px;
|
||
margin-bottom: 8px;
|
||
line-height: 1.4;
|
||
}
|
||
|
||
.tooltip-effects {
|
||
margin-top: 8px;
|
||
padding-top: 8px;
|
||
border-top: 1px solid #333;
|
||
}
|
||
|
||
.tooltip-effects-title {
|
||
color: #4ec9b0;
|
||
font-weight: bold;
|
||
font-size: 10px;
|
||
margin-bottom: 4px;
|
||
}
|
||
|
||
.tooltip-effect-item {
|
||
color: #00ff00;
|
||
font-size: 10px;
|
||
padding: 2px 0;
|
||
}
|
||
|
||
.tooltip-durability {
|
||
margin-top: 8px;
|
||
padding-top: 8px;
|
||
border-top: 1px solid #333;
|
||
color: #ffaa00;
|
||
font-size: 10px;
|
||
font-weight: bold;
|
||
}
|
||
</style>
|