459 lines
11 KiB
Vue
459 lines
11 KiB
Vue
<template>
|
||
<div class="cute-game-container">
|
||
<!-- 左上角 HUD -->
|
||
<PetHUD
|
||
:pet-name="petState.name || 'Pet'"
|
||
:health="petState.health || 0"
|
||
:max-health="getMaxHealth()"
|
||
:hunger="petState.hunger || 0"
|
||
:happiness="petState.happiness || 0"
|
||
:pet-emotion="petEmotion"
|
||
/>
|
||
|
||
<!-- 主場景 -->
|
||
<div class="main-scene">
|
||
<ScrollableScene
|
||
:pet-emotion="petEmotion"
|
||
@interact="handleSceneInteract"
|
||
/>
|
||
</div>
|
||
|
||
<!-- 底部快捷欄 -->
|
||
<div class="bottom-toolbar">
|
||
<button class="tool-btn" @click="handleFeed" title="餵食">
|
||
🍖
|
||
</button>
|
||
<button class="tool-btn" @click="handlePlay" title="玩耍">
|
||
🎾
|
||
</button>
|
||
<button class="tool-btn" @click="handleClean" title="清理">
|
||
🧹
|
||
</button>
|
||
<button class="tool-btn" @click="handleHeal" title="治療">
|
||
💊
|
||
</button>
|
||
<button class="tool-btn" @click="handleSleep" title="睡覺">
|
||
{{ petState.isSleeping ? '⏰' : '💤' }}
|
||
</button>
|
||
<button class="tool-btn inventory-btn" @click="showInventory = true" title="背包">
|
||
🎒
|
||
</button>
|
||
<button class="tool-btn" @click="showStats = !showStats" title="狀態">
|
||
📊
|
||
</button>
|
||
</div>
|
||
|
||
<!-- 背包界面 -->
|
||
<InventoryModal
|
||
:is-open="showInventory"
|
||
:coins="petState.coins || 0"
|
||
:attack="petState.attack || 10"
|
||
:defense="petState.defense || 5"
|
||
@close="showInventory = false"
|
||
@use-item="handleUseItem"
|
||
@drop-item="handleDropItem"
|
||
/>
|
||
|
||
<!-- 狀態面板（可選顯示） -->
|
||
<div v-if="showStats" class="stats-overlay" @click="showStats = false">
|
||
<div class="stats-panel" @click.stop>
|
||
<h3>📊 寵物狀態</h3>
|
||
<div class="stat-list">
|
||
<div class="stat-item">
|
||
<span>名稱:</span>
|
||
<span>{{ petState.name || '寵物' }}</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span>階段:</span>
|
||
<span>{{ petState.stage || '蛋' }}</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span>年齡:</span>
|
||
<span>{{ formatAge(petState.ageSeconds) }}</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span>力量:</span>
|
||
<span>{{ petState.str || 0 }}</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span>智力:</span>
|
||
<span>{{ petState.int || 0 }}</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span>敏捷:</span>
|
||
<span>{{ petState.dex || 0 }}</span>
|
||
</div>
|
||
<div class="stat-item">
|
||
<span>運勢:</span>
|
||
<span>{{ petState.luck || 0 }}</span>
|
||
</div>
|
||
</div>
|
||
<button class="close-stats-btn" @click="showStats = false">關閉</button>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 載入畫面 -->
|
||
<div v-if="!initialized" class="loading-overlay">
|
||
<div class="loading-content">
|
||
<div class="loading-spinner"></div>
|
||
<p>載入中...</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, computed, onMounted } from 'vue'
|
||
import { PetSystem } from '../../core/pet-system.js'
|
||
import { apiService } from '../../core/api-service.js'
|
||
|
||
import PetHUD from '../../components/pixel/PetHUD.vue'
|
||
import ScrollableScene from '../../components/pixel/ScrollableScene.vue'
|
||
import InventoryModal from '../../components/pixel/InventoryModal.vue'
|
||
|
||
const petSystem = ref(null)
|
||
const petState = ref({})
|
||
const initialized = ref(false)
|
||
const showInventory = ref(false)
|
||
const showStats = ref(false)
|
||
|
||
onMounted(async () => {
|
||
try {
|
||
petSystem.value = new PetSystem(apiService)
|
||
await petSystem.value.initialize()
|
||
|
||
const state = await petSystem.value.getState()
|
||
if (!state.name || state.name.trim() === '') {
|
||
await petSystem.value.updateState({ name: '我的寵物' })
|
||
}
|
||
|
||
updatePetState()
|
||
initialized.value = true
|
||
|
||
setInterval(() => {
|
||
updatePetState()
|
||
}, 1000)
|
||
} catch (error) {
|
||
console.error('[Index] Failed to initialize:', error)
|
||
initialized.value = true
|
||
petState.value = {
|
||
name: '錯誤',
|
||
stage: 'egg',
|
||
hunger: 0,
|
||
happiness: 0,
|
||
health: 0,
|
||
isSleeping: false,
|
||
isSick: false,
|
||
isDead: false
|
||
}
|
||
}
|
||
})
|
||
|
||
const updatePetState = () => {
|
||
if (petSystem.value) {
|
||
petState.value = { ...petSystem.value.getState() }
|
||
}
|
||
}
|
||
|
||
const getMaxHealth = () => {
|
||
if (!petSystem.value) return 100
|
||
const state = petSystem.value.getState()
|
||
return 100 + (state.achievementBuffs?.health || 0)
|
||
}
|
||
|
||
const petEmotion = computed(() => {
|
||
const state = petState.value
|
||
if (state.isSick) return 'sick'
|
||
if (state.health < 30) return 'sad'
|
||
if (state.happiness < 30) return 'sad'
|
||
if (state.hunger < 20) return 'sad'
|
||
return 'happy'
|
||
})
|
||
|
||
const formatAge = (seconds) => {
|
||
if (!seconds) return '0h'
|
||
const hours = Math.floor(seconds / 3600)
|
||
const minutes = Math.floor((seconds % 3600) / 60)
|
||
if (hours > 0) return `${hours}h ${minutes}m`
|
||
return `${minutes}m`
|
||
}
|
||
|
||
const handleFeed = async () => {
|
||
if (petSystem.value) {
|
||
await petSystem.value.feed()
|
||
updatePetState()
|
||
}
|
||
}
|
||
|
||
const handlePlay = async () => {
|
||
if (petSystem.value) {
|
||
await petSystem.value.play()
|
||
updatePetState()
|
||
}
|
||
}
|
||
|
||
const handleClean = async () => {
|
||
if (petSystem.value) {
|
||
await petSystem.value.cleanPoop()
|
||
updatePetState()
|
||
}
|
||
}
|
||
|
||
const handleHeal = async () => {
|
||
if (petSystem.value) {
|
||
await petSystem.value.heal()
|
||
updatePetState()
|
||
}
|
||
}
|
||
|
||
const handleSleep = async () => {
|
||
if (petSystem.value) {
|
||
await petSystem.value.toggleSleep()
|
||
updatePetState()
|
||
}
|
||
}
|
||
|
||
const handleSceneInteract = (objectType) => {
|
||
console.log('[Index] Interacted with:', objectType)
|
||
if (objectType === 'food') handleFeed()
|
||
else if (objectType === 'toy') handlePlay()
|
||
else if (objectType === 'bed') handleSleep()
|
||
}
|
||
|
||
const handleUseItem = (item) => {
|
||
console.log('[Index] Use item:', item)
|
||
}
|
||
|
||
const handleDropItem = (item) => {
|
||
console.log('[Index] Drop item:', item)
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.cute-game-container {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
background: var(--color-bg);
|
||
position: relative;
|
||
overflow: hidden;
|
||
font-family: 'Press Start 2P', 'Noto Sans TC', cursive;
|
||
touch-action: manipulation; /* 改善觸控體驗 */
|
||
}
|
||
|
||
.main-scene {
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
width: min(90vw, 900px);
|
||
padding: 0 10px;
|
||
}
|
||
|
||
/* 手機直向 */
|
||
@media (max-width: 480px) {
|
||
.main-scene {
|
||
width: 95vw;
|
||
top: 45%;
|
||
}
|
||
}
|
||
|
||
/* 平板 */
|
||
@media (min-width: 481px) and (max-width: 768px) {
|
||
.main-scene {
|
||
width: 85vw;
|
||
}
|
||
}
|
||
|
||
/* 底部工具欄 */
|
||
.bottom-toolbar {
|
||
position: fixed;
|
||
bottom: 20px;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
justify-content: center;
|
||
gap: 10px;
|
||
background: var(--color-panel);
|
||
padding: 12px 16px;
|
||
border: 3px solid var(--color-accent);
|
||
border-radius: 16px;
|
||
box-shadow: 0 6px 16px rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.1);
|
||
z-index: 100;
|
||
max-width: 90vw;
|
||
}
|
||
|
||
.tool-btn {
|
||
width: 52px;
|
||
height: 52px;
|
||
min-width: 44px; /* 觸控友好最小尺寸 */
|
||
min-height: 44px;
|
||
background: linear-gradient(180deg, var(--color-panel-light) 0%, var(--color-panel) 100%);
|
||
border: 2px solid var(--color-accent-dark);
|
||
border-radius: 8px;
|
||
font-size: 24px;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
box-shadow: 0 3px 0 var(--color-border), inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||
position: relative;
|
||
-webkit-tap-highlight-color: transparent; /* 移除點擊高亮 */
|
||
}
|
||
|
||
/* 手機直向 */
|
||
@media (max-width: 480px) {
|
||
.bottom-toolbar {
|
||
bottom: 10px;
|
||
padding: 10px 12px;
|
||
gap: 8px;
|
||
max-width: 95vw;
|
||
}
|
||
|
||
.tool-btn {
|
||
width: 48px;
|
||
height: 48px;
|
||
font-size: 22px;
|
||
}
|
||
}
|
||
|
||
/* 手機橫向 */
|
||
@media (max-width: 768px) and (orientation: landscape) {
|
||
.bottom-toolbar {
|
||
bottom: 8px;
|
||
padding: 8px 12px;
|
||
gap: 6px;
|
||
}
|
||
|
||
.tool-btn {
|
||
width: 44px;
|
||
height: 44px;
|
||
font-size: 20px;
|
||
}
|
||
}
|
||
|
||
.tool-btn:hover {
|
||
background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 0 var(--color-border), inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
.tool-btn:active {
|
||
transform: translateY(1px);
|
||
box-shadow: 0 1px 0 var(--color-border), inset 0 1px 0 rgba(0, 0, 0, 0.2);
|
||
}
|
||
|
||
.tool-btn.inventory-btn {
|
||
background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
|
||
border-color: var(--color-accent-dark);
|
||
}
|
||
|
||
/* 狀態面板覆蓋 */
|
||
.stats-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: rgba(0, 0, 0, 0.6);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 999;
|
||
}
|
||
|
||
.stats-panel {
|
||
width: 90%;
|
||
max-width: 400px;
|
||
background: var(--color-panel);
|
||
border: 3px solid var(--color-accent);
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), inset 0 2px 0 rgba(255, 255, 255, 0.1);
|
||
}
|
||
|
||
.stats-panel h3 {
|
||
margin: 0 0 16px 0;
|
||
color: var(--color-text);
|
||
text-align: center;
|
||
font-size: 14px;
|
||
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
|
||
}
|
||
|
||
.stat-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 8px;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.stat-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 8px 12px;
|
||
background: var(--color-panel-light);
|
||
border: 2px solid var(--color-border);
|
||
border-radius: 6px;
|
||
font-size: 10px;
|
||
color: var(--color-text);
|
||
}
|
||
|
||
.close-stats-btn {
|
||
width: 100%;
|
||
padding: 12px;
|
||
background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
|
||
border: 2px solid var(--color-border);
|
||
border-radius: 8px;
|
||
color: var(--color-text);
|
||
font-weight: bold;
|
||
cursor: pointer;
|
||
transition: all 0.2s;
|
||
box-shadow: 0 3px 0 var(--color-border), inset 0 1px 0 rgba(255, 255, 255, 0.2);
|
||
}
|
||
|
||
.close-stats-btn:hover {
|
||
transform: translateY(-2px);
|
||
box-shadow: 0 5px 0 var(--color-border), inset 0 1px 0 rgba(255, 255, 255, 0.3);
|
||
}
|
||
|
||
/* 載入畫面 */
|
||
.loading-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 100%;
|
||
background: var(--color-bg);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 9999;
|
||
}
|
||
|
||
.loading-content {
|
||
text-align: center;
|
||
}
|
||
|
||
.loading-spinner {
|
||
width: 60px;
|
||
height: 60px;
|
||
border: 6px solid var(--color-panel);
|
||
border-top: 6px solid var(--color-accent);
|
||
border-radius: 50%;
|
||
animation: spin 1s linear infinite;
|
||
margin: 0 auto 20px;
|
||
}
|
||
|
||
@keyframes spin {
|
||
0% { transform: rotate(0deg); }
|
||
100% { transform: rotate(360deg); }
|
||
}
|
||
|
||
.loading-content p {
|
||
color: var(--color-text);
|
||
font-size: 12px;
|
||
text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
|
||
}
|
||
</style>
|