Compare commits
No commits in common. "main" and "feat/add_full_func" have entirely different histories.
main
...
feat/add_f
15
index.html
15
index.html
|
|
@ -1,16 +1,13 @@
|
||||||
<!doctype html>
|
<!doctype html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
|
<head>
|
||||||
<head>
|
|
||||||
<meta charset="UTF-8" />
|
<meta charset="UTF-8" />
|
||||||
<link rel="icon" type="image/png" href="/logo.png" />
|
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||||
<title>Virtual Pet & Fortune</title>
|
<title>temp-vue-app</title>
|
||||||
</head>
|
</head>
|
||||||
|
<body>
|
||||||
<body>
|
|
||||||
<div id="app"></div>
|
<div id="app"></div>
|
||||||
<script type="module" src="/src/main.js"></script>
|
<script type="module" src="/src/main.js"></script>
|
||||||
</body>
|
</body>
|
||||||
|
|
||||||
</html>
|
</html>
|
||||||
BIN
public/logo.png
BIN
public/logo.png
Binary file not shown.
|
Before Width: | Height: | Size: 815 KiB |
82
src/App.vue
82
src/App.vue
|
|
@ -5,15 +5,12 @@ import DeviceScreen from './components/DeviceScreen.vue';
|
||||||
import PetGame from './components/PetGame.vue';
|
import PetGame from './components/PetGame.vue';
|
||||||
import Menu from './components/Menu.vue';
|
import Menu from './components/Menu.vue';
|
||||||
import { usePetSystem } from './composables/usePetSystem';
|
import { usePetSystem } from './composables/usePetSystem';
|
||||||
import { useEventSystem } from './composables/useEventSystem';
|
|
||||||
|
|
||||||
const currentScreen = ref('game');
|
const currentScreen = ref('game');
|
||||||
const petGameRef = ref(null);
|
const petGameRef = ref(null);
|
||||||
const showStats = ref(false); // Stats visibility
|
const showStats = ref(false); // Stats visibility
|
||||||
const debugAction = ref(null); // For passing debug commands to PetGame
|
|
||||||
|
|
||||||
// Initialize Pet System
|
// Initialize Pet System
|
||||||
const petSystem = usePetSystem();
|
|
||||||
const {
|
const {
|
||||||
stage,
|
stage,
|
||||||
state,
|
state,
|
||||||
|
|
@ -24,59 +21,29 @@ const {
|
||||||
clean,
|
clean,
|
||||||
isCleaning,
|
isCleaning,
|
||||||
hatchEgg,
|
hatchEgg,
|
||||||
reset,
|
reset
|
||||||
achievements,
|
} = usePetSystem();
|
||||||
unlockAllAchievements,
|
|
||||||
resurrect,
|
|
||||||
reincarnate
|
|
||||||
} = petSystem;
|
|
||||||
|
|
||||||
// Initialize Event System
|
|
||||||
const { currentEvent, checkEventTriggers, triggerRandomEvent } = useEventSystem(petSystem);
|
|
||||||
|
|
||||||
// Start Event Loop
|
|
||||||
setInterval(() => {
|
|
||||||
checkEventTriggers();
|
|
||||||
}, 10000); // Check every 10 seconds
|
|
||||||
|
|
||||||
|
|
||||||
// Handle Action Menu Events
|
// Handle Action Menu Events
|
||||||
function handleAction(action) {
|
function handleAction(action) {
|
||||||
switch(action) {
|
switch(action) {
|
||||||
case 'feed':
|
case 'feed':
|
||||||
const feedResult = feed();
|
feed();
|
||||||
// If refused (sick or full), shake head
|
|
||||||
if (!feedResult && petGameRef.value) {
|
|
||||||
petGameRef.value.shakeHead();
|
|
||||||
}
|
|
||||||
break;
|
break;
|
||||||
case 'clean':
|
case 'clean':
|
||||||
clean();
|
clean();
|
||||||
break;
|
break;
|
||||||
case 'play':
|
case 'play':
|
||||||
if (play()) {
|
play();
|
||||||
if (petGameRef.value) {
|
|
||||||
petGameRef.value.startPlaying();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
break;
|
break;
|
||||||
case 'sleep':
|
case 'sleep':
|
||||||
sleep();
|
sleep();
|
||||||
break;
|
break;
|
||||||
case 'medicine':
|
case 'medicine':
|
||||||
// Heal the pet with animation
|
// Heal the pet
|
||||||
if (state.value === 'sick') {
|
if (state.value === 'sick') {
|
||||||
if (petGameRef.value) {
|
|
||||||
// Trigger medicine animation
|
|
||||||
petGameRef.value.startFeeding('medicine').then(() => {
|
|
||||||
stats.value.health = 100;
|
stats.value.health = 100;
|
||||||
state.value = 'idle';
|
state.value = 'idle';
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// Fallback if ref not ready
|
|
||||||
stats.value.health = 100;
|
|
||||||
state.value = 'idle';
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 'stats':
|
case 'stats':
|
||||||
|
|
@ -91,22 +58,6 @@ function handleAction(action) {
|
||||||
reset();
|
reset();
|
||||||
}
|
}
|
||||||
break;
|
break;
|
||||||
case 'jiaobei':
|
|
||||||
// 擲筊功能 - 待實作
|
|
||||||
console.log('擲筊功能');
|
|
||||||
// TODO: 實作擲筊邏輯
|
|
||||||
break;
|
|
||||||
case 'fortune':
|
|
||||||
// 求籤功能 - 待實作
|
|
||||||
console.log('求籤功能');
|
|
||||||
// TODO: 實作求籤邏輯
|
|
||||||
break;
|
|
||||||
case 'resurrect':
|
|
||||||
resurrect();
|
|
||||||
break;
|
|
||||||
case 'reincarnate':
|
|
||||||
reincarnate();
|
|
||||||
break;
|
|
||||||
default:
|
default:
|
||||||
console.log('Action not implemented:', action);
|
console.log('Action not implemented:', action);
|
||||||
}
|
}
|
||||||
|
|
@ -116,10 +67,6 @@ function handleAction(action) {
|
||||||
function setPetState(newState) {
|
function setPetState(newState) {
|
||||||
state.value = newState;
|
state.value = newState;
|
||||||
}
|
}
|
||||||
|
|
||||||
function triggerDebugAction(action, payload = null) {
|
|
||||||
debugAction.value = { type: action, payload, timestamp: Date.now() };
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
|
|
@ -134,9 +81,6 @@ function triggerDebugAction(action, payload = null) {
|
||||||
:stats="stats"
|
:stats="stats"
|
||||||
:isCleaning="isCleaning"
|
:isCleaning="isCleaning"
|
||||||
:showStats="showStats"
|
:showStats="showStats"
|
||||||
:debugAction="debugAction"
|
|
||||||
:achievements="achievements"
|
|
||||||
:currentEvent="currentEvent"
|
|
||||||
@update:state="state = $event"
|
@update:state="state = $event"
|
||||||
@action="handleAction"
|
@action="handleAction"
|
||||||
/>
|
/>
|
||||||
|
|
@ -162,22 +106,6 @@ function triggerDebugAction(action, payload = null) {
|
||||||
<button v-if="stage === 'egg'" @click="hatchEgg()">🥚 Hatch Egg</button>
|
<button v-if="stage === 'egg'" @click="hatchEgg()">🥚 Hatch Egg</button>
|
||||||
<button v-else @click="reset()">🔄 Reset to Egg</button>
|
<button v-else @click="reset()">🔄 Reset to Egg</button>
|
||||||
</div>
|
</div>
|
||||||
<div class="btn-group">
|
|
||||||
<button @click="triggerDebugAction('randomEvent')">🎲 Random Event</button>
|
|
||||||
<button @click="triggerDebugAction('addItem', 'sunglasses')">🕶️ Add Sunglasses</button>
|
|
||||||
<button @click="triggerDebugAction('addItem', 'cookie')">🍪 Add Cookie</button>
|
|
||||||
</div>
|
|
||||||
<div class="btn-group">
|
|
||||||
<button @click="triggerDebugAction('setMood', 'happy')">😊 Happy</button>
|
|
||||||
<button @click="triggerDebugAction('setMood', 'angry')">😠 Angry</button>
|
|
||||||
<button @click="triggerDebugAction('setMood', 'sad')">😢 Sad</button>
|
|
||||||
</div>
|
|
||||||
<div class="btn-group">
|
|
||||||
<button @click="unlockAllAchievements()">🏆 Unlock All Achievements</button>
|
|
||||||
</div>
|
|
||||||
<div class="btn-group">
|
|
||||||
<button @click="stats.dailyPrayerCount = 0">🙏 Reset Prayer Count</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="action-menu">
|
<div class="action-menu">
|
||||||
<button class="icon-btn icon-clean" @click="$emit('clean')" :disabled="disabled || poopCount === 0" title="清理"></button>
|
<button class="icon-btn icon-clean" @click="$emit('clean')" :disabled="disabled || poopCount === 0" title="Clean"></button>
|
||||||
<button class="icon-btn icon-medicine" @click="$emit('medicine')" :disabled="disabled || !isSick" title="治療"></button>
|
<button class="icon-btn icon-medicine" @click="$emit('medicine')" :disabled="disabled || !isSick" title="Medicine"></button>
|
||||||
<button class="icon-btn icon-sleep" @click="$emit('sleep')" :disabled="disabled" title="關燈"></button>
|
<button class="icon-btn icon-training" @click="$emit('training')" :disabled="disabled" title="Training"></button>
|
||||||
<button class="icon-btn icon-backpack" @click="$emit('inventory')" :disabled="disabled" title="背包"></button>
|
<button class="icon-btn icon-info" @click="$emit('info')" :disabled="disabled" title="Info"></button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -27,7 +27,7 @@ const props = defineProps({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
defineEmits(['clean', 'medicine', 'sleep', 'inventory']);
|
defineEmits(['clean', 'medicine', 'training', 'info']);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
@ -90,54 +90,37 @@ defineEmits(['clean', 'medicine', 'sleep', 'inventory']);
|
||||||
0px 4px 0 #ff4444, 0px 6px 0 #ff4444;
|
0px 4px 0 #ff4444, 0px 6px 0 #ff4444;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Sleep Icon (Light Bulb/燈泡) - Enhanced */
|
/* Training Icon (Dumbbell) */
|
||||||
.icon-sleep::before {
|
.icon-training::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 2px;
|
width: 2px;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background: transparent;
|
background: #444;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
box-shadow:
|
box-shadow:
|
||||||
/* 燈泡主體 (圓形) */
|
-6px -2px 0 #444, -6px 0px 0 #444, -6px 2px 0 #444,
|
||||||
-2px -6px 0 #ffd700, 0px -6px 0 #ffd700, 2px -6px 0 #ffd700,
|
-4px -2px 0 #444, -4px 0px 0 #444, -4px 2px 0 #444,
|
||||||
-4px -4px 0 #ffd700, -2px -4px 0 #ffd700, 0px -4px 0 #ffd700, 2px -4px 0 #ffd700, 4px -4px 0 #ffd700,
|
-2px 0px 0 #444, 0px 0px 0 #444, 2px 0px 0 #444,
|
||||||
-4px -2px 0 #ffd700, -2px -2px 0 #ffd700, 0px -2px 0 #ffd700, 2px -2px 0 #ffd700, 4px -2px 0 #ffd700,
|
4px -2px 0 #444, 4px 0px 0 #444, 4px 2px 0 #444,
|
||||||
-4px 0px 0 #ffd700, -2px 0px 0 #ffd700, 0px 0px 0 #ffd700, 2px 0px 0 #ffd700, 4px 0px 0 #ffd700,
|
6px -2px 0 #444, 6px 0px 0 #444, 6px 2px 0 #444;
|
||||||
-2px 2px 0 #ffd700, 0px 2px 0 #ffd700, 2px 2px 0 #ffd700,
|
|
||||||
/* 燈泡底部 (螺旋) */
|
|
||||||
-1px 4px 0 #8B4513, 0px 4px 0 #8B4513, 1px 4px 0 #8B4513,
|
|
||||||
/* 光線 (向下) */
|
|
||||||
0px 6px 0 #ffd700, 0px 8px 0 #ffd700;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Backpack Icon */
|
/* Info Icon (i) */
|
||||||
.icon-backpack::before {
|
.icon-info::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 2px;
|
width: 2px;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background: #8d6e63;
|
background: #4444ff;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
/* Top flap */
|
0px -6px 0 #4444ff,
|
||||||
-2px -6px 0 #8d6e63, 0px -6px 0 #8d6e63, 2px -6px 0 #8d6e63,
|
0px -2px 0 #4444ff, 0px 0px 0 #4444ff,
|
||||||
-4px -4px 0 #8d6e63, -2px -4px 0 #a1887f, 0px -4px 0 #a1887f, 2px -4px 0 #a1887f, 4px -4px 0 #8d6e63,
|
0px 2px 0 #4444ff, 0px 4px 0 #4444ff, 0px 6px 0 #4444ff;
|
||||||
|
|
||||||
/* Body */
|
|
||||||
-4px -2px 0 #8d6e63, -2px -2px 0 #5d4037, 0px -2px 0 #5d4037, 2px -2px 0 #5d4037, 4px -2px 0 #8d6e63,
|
|
||||||
-4px 0px 0 #8d6e63, -2px 0px 0 #5d4037, 0px 0px 0 #5d4037, 2px 0px 0 #5d4037, 4px 0px 0 #8d6e63,
|
|
||||||
-4px 2px 0 #8d6e63, -2px 2px 0 #5d4037, 0px 2px 0 #5d4037, 2px 2px 0 #5d4037, 4px 2px 0 #8d6e63,
|
|
||||||
-4px 4px 0 #8d6e63, -2px 4px 0 #5d4037, 0px 4px 0 #5d4037, 2px 4px 0 #5d4037, 4px 4px 0 #8d6e63,
|
|
||||||
|
|
||||||
/* Bottom */
|
|
||||||
-2px 6px 0 #8d6e63, 0px 6px 0 #8d6e63, 2px 6px 0 #8d6e63;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,307 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="ball-game-layer" @touchstart="handleTouch" @mousedown="handleMouse">
|
|
||||||
<canvas ref="gameCanvas" class="game-canvas"></canvas>
|
|
||||||
|
|
||||||
<div class="game-ui">
|
|
||||||
<div class="score">接球: {{ score }}/10</div>
|
|
||||||
|
|
||||||
<div v-if="!gameStarted" class="start-hint">
|
|
||||||
<p>點擊左右移動接球！</p>
|
|
||||||
<p>點擊螢幕開始</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="gameOver" class="game-over-msg">
|
|
||||||
<p>{{ win ? '大成功！' : '再試一次' }}</p>
|
|
||||||
<button @click.stop="handleClose">完成</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 觸控區域提示 (僅在開始前顯示) -->
|
|
||||||
<div v-if="!gameStarted" class="touch-zones">
|
|
||||||
<div class="zone left">← 左</div>
|
|
||||||
<div class="zone right">右 →</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, onMounted, onUnmounted } from 'vue';
|
|
||||||
|
|
||||||
const emit = defineEmits(['close', 'complete', 'updatePetX']);
|
|
||||||
|
|
||||||
const gameCanvas = ref(null);
|
|
||||||
const gameStarted = ref(false);
|
|
||||||
const gameOver = ref(false);
|
|
||||||
const win = ref(false);
|
|
||||||
const score = ref(0);
|
|
||||||
const targetScore = 10;
|
|
||||||
|
|
||||||
// 遊戲數據
|
|
||||||
let balls = [];
|
|
||||||
let animationId = null;
|
|
||||||
let ctx = null;
|
|
||||||
let canvasWidth = 300;
|
|
||||||
let canvasHeight = 150;
|
|
||||||
let lastTime = 0;
|
|
||||||
let spawnTimer = 0;
|
|
||||||
|
|
||||||
// 寵物數據 (需要與 PetGame 同步)
|
|
||||||
let petX = 150;
|
|
||||||
const PET_Y = 100; // 假設寵物在底部
|
|
||||||
const PET_WIDTH = 32;
|
|
||||||
const PET_SPEED = 15; // 移動速度
|
|
||||||
|
|
||||||
function initGame() {
|
|
||||||
if (!gameCanvas.value) return;
|
|
||||||
const canvas = gameCanvas.value;
|
|
||||||
const rect = canvas.parentElement.getBoundingClientRect();
|
|
||||||
canvas.width = rect.width;
|
|
||||||
canvas.height = rect.height;
|
|
||||||
canvasWidth = rect.width;
|
|
||||||
canvasHeight = rect.height;
|
|
||||||
|
|
||||||
// 初始寵物位置在中間
|
|
||||||
petX = canvasWidth / 2 - PET_WIDTH / 2;
|
|
||||||
emit('updatePetX', petX);
|
|
||||||
|
|
||||||
ctx = canvas.getContext('2d');
|
|
||||||
loop(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
function startGame() {
|
|
||||||
gameStarted.value = true;
|
|
||||||
gameOver.value = false;
|
|
||||||
score.value = 0;
|
|
||||||
balls = [];
|
|
||||||
lastTime = performance.now();
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleTouch(e) {
|
|
||||||
if (gameOver.value) return;
|
|
||||||
if (!gameStarted.value) {
|
|
||||||
startGame();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const touchX = e.touches[0].clientX;
|
|
||||||
const rect = gameCanvas.value.getBoundingClientRect();
|
|
||||||
const relativeX = touchX - rect.left;
|
|
||||||
|
|
||||||
movePet(relativeX < rect.width / 2 ? -1 : 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleMouse(e) {
|
|
||||||
if (gameOver.value) return;
|
|
||||||
if (!gameStarted.value) {
|
|
||||||
startGame();
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const rect = gameCanvas.value.getBoundingClientRect();
|
|
||||||
const relativeX = e.clientX - rect.left;
|
|
||||||
|
|
||||||
movePet(relativeX < rect.width / 2 ? -1 : 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
function movePet(direction) {
|
|
||||||
petX += direction * PET_SPEED;
|
|
||||||
// 邊界檢查
|
|
||||||
petX = Math.max(0, Math.min(petX, canvasWidth - PET_WIDTH));
|
|
||||||
emit('updatePetX', petX);
|
|
||||||
}
|
|
||||||
|
|
||||||
function spawnBall() {
|
|
||||||
const size = 12;
|
|
||||||
balls.push({
|
|
||||||
x: Math.random() * (canvasWidth - size),
|
|
||||||
y: -20,
|
|
||||||
speed: 2 + Math.random() * 2, // 隨機速度
|
|
||||||
size: size,
|
|
||||||
color: Math.random() > 0.8 ? '#ffd700' : '#ff4444' // 金球或紅球
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function loop(timestamp) {
|
|
||||||
if (!ctx) return;
|
|
||||||
|
|
||||||
const deltaTime = timestamp - lastTime;
|
|
||||||
lastTime = timestamp;
|
|
||||||
|
|
||||||
// 清空畫布
|
|
||||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
|
||||||
|
|
||||||
if (gameStarted.value && !gameOver.value) {
|
|
||||||
update(deltaTime);
|
|
||||||
}
|
|
||||||
|
|
||||||
draw();
|
|
||||||
|
|
||||||
animationId = requestAnimationFrame(loop);
|
|
||||||
}
|
|
||||||
|
|
||||||
function update(deltaTime) {
|
|
||||||
// 生成球
|
|
||||||
spawnTimer += deltaTime;
|
|
||||||
if (spawnTimer > 1000) { // 每秒一顆
|
|
||||||
spawnBall();
|
|
||||||
spawnTimer = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 更新球的位置
|
|
||||||
for (let i = balls.length - 1; i >= 0; i--) {
|
|
||||||
const ball = balls[i];
|
|
||||||
ball.y += ball.speed;
|
|
||||||
|
|
||||||
// 碰撞檢測 (接球)
|
|
||||||
// 假設寵物判定框
|
|
||||||
if (ball.y + ball.size > PET_Y &&
|
|
||||||
ball.y < PET_Y + 32 &&
|
|
||||||
ball.x + ball.size > petX &&
|
|
||||||
ball.x < petX + PET_WIDTH) {
|
|
||||||
|
|
||||||
// 接到了！
|
|
||||||
score.value++;
|
|
||||||
balls.splice(i, 1);
|
|
||||||
|
|
||||||
// 檢查勝利
|
|
||||||
if (score.value >= targetScore) {
|
|
||||||
gameOver.value = true;
|
|
||||||
win.value = true;
|
|
||||||
}
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 掉出底部
|
|
||||||
if (ball.y > canvasHeight) {
|
|
||||||
balls.splice(i, 1);
|
|
||||||
// 可以扣分或失敗，這裡暫時不處罰，輕鬆一點
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw() {
|
|
||||||
// 繪製球
|
|
||||||
for (const ball of balls) {
|
|
||||||
drawPixelBall(ball);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function drawPixelBall(ball) {
|
|
||||||
const { x, y, size, color } = ball;
|
|
||||||
const pSize = 4; // 像素大小
|
|
||||||
|
|
||||||
ctx.fillStyle = color;
|
|
||||||
// 簡單的 3x3 像素球
|
|
||||||
// X
|
|
||||||
// XXX
|
|
||||||
// X
|
|
||||||
ctx.fillRect(x + pSize, y, pSize, pSize);
|
|
||||||
ctx.fillRect(x, y + pSize, pSize * 3, pSize);
|
|
||||||
ctx.fillRect(x + pSize, y + pSize * 2, pSize, pSize);
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleClose() {
|
|
||||||
emit('complete', win.value);
|
|
||||||
emit('close');
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
initGame();
|
|
||||||
});
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
if (animationId) cancelAnimationFrame(animationId);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.ball-game-layer {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 50;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.game-canvas {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.game-ui {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
pointer-events: none;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.score {
|
|
||||||
font-family: 'DotGothic16', sans-serif;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #8b4513;
|
|
||||||
background: rgba(255, 255, 255, 0.7);
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-hint {
|
|
||||||
margin-top: 40px;
|
|
||||||
font-family: 'DotGothic16', sans-serif;
|
|
||||||
color: #8b4513;
|
|
||||||
text-align: center;
|
|
||||||
animation: pulse 1s infinite;
|
|
||||||
background: rgba(255, 255, 255, 0.5);
|
|
||||||
padding: 5px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.game-over-msg {
|
|
||||||
margin-top: 40px;
|
|
||||||
background: rgba(255, 255, 255, 0.9);
|
|
||||||
padding: 10px;
|
|
||||||
border: 2px solid #8b4513;
|
|
||||||
border-radius: 8px;
|
|
||||||
text-align: center;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.game-over-msg button {
|
|
||||||
margin-top: 5px;
|
|
||||||
padding: 4px 10px;
|
|
||||||
background: #4CAF50;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
.touch-zones {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 10px;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
padding: 0 20px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
pointer-events: none;
|
|
||||||
opacity: 0.5;
|
|
||||||
}
|
|
||||||
|
|
||||||
.zone {
|
|
||||||
font-family: 'DotGothic16', sans-serif;
|
|
||||||
color: #8b4513;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
0%, 100% { opacity: 0.6; }
|
|
||||||
50% { opacity: 1; }
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,637 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="deity-temple-overlay">
|
|
||||||
<div class="temple-container" @click.stop>
|
|
||||||
<!-- Header -->
|
|
||||||
<div class="temple-header">
|
|
||||||
<button class="close-btn" @click="$emit('close')">×</button>
|
|
||||||
<h2 class="temple-title">神廟</h2>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Scrollable Content -->
|
|
||||||
<div class="temple-content">
|
|
||||||
<!-- Deity Display -->
|
|
||||||
<div class="deity-display">
|
|
||||||
<div class="deity-icon" :class="currentDeity.icon"></div>
|
|
||||||
<div class="deity-name">{{ currentDeity.name }}</div>
|
|
||||||
<div class="deity-subtitle">{{ currentDeity.personality }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Dialogue Bubble -->
|
|
||||||
<div class="dialogue-bubble">
|
|
||||||
<p>{{ currentDialogue }}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Favor Progress -->
|
|
||||||
<div class="favor-section">
|
|
||||||
<div class="favor-label">
|
|
||||||
好感度: {{ favorStars }} ({{ currentFavor }}/100)
|
|
||||||
</div>
|
|
||||||
<div class="favor-bar">
|
|
||||||
<div class="favor-fill" :style="{ width: currentFavor + '%' }"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Active Buffs -->
|
|
||||||
<div class="buffs-section" v-if="activeBuffs.length > 0">
|
|
||||||
<div class="buff-title">當前加成：</div>
|
|
||||||
<div class="buff-list">
|
|
||||||
<div v-for="buff in activeBuffs" :key="buff.type" class="buff-item">
|
|
||||||
• {{ buff.description }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Prayer Options -->
|
|
||||||
<div class="prayer-section">
|
|
||||||
<!-- 祈福按鈕 -->
|
|
||||||
<button
|
|
||||||
class="prayer-btn"
|
|
||||||
:disabled="dailyPrayerCount >= 3"
|
|
||||||
@click="handlePrayer"
|
|
||||||
>
|
|
||||||
🙏 祈福 (今日 {{ dailyPrayerCount }}/3)
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<div class="prayer-divider">或</div>
|
|
||||||
|
|
||||||
<div class="prayer-options">
|
|
||||||
<!-- 擲筊選項 -->
|
|
||||||
<button
|
|
||||||
class="prayer-option"
|
|
||||||
@click="handlePrayerSelect('jiaobei')"
|
|
||||||
>
|
|
||||||
<div class="option-icon icon-jiaobei"></div>
|
|
||||||
<span class="option-label">擲筊</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- 求籤選項 -->
|
|
||||||
<button
|
|
||||||
class="prayer-option"
|
|
||||||
@click="handlePrayerSelect('fortune')"
|
|
||||||
>
|
|
||||||
<div class="option-icon icon-fortune"></div>
|
|
||||||
<span class="option-label">求籤</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Bottom Actions -->
|
|
||||||
<div class="bottom-actions">
|
|
||||||
<button class="action-btn" @click="showDeitySelector = !showDeitySelector">
|
|
||||||
切換神明
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Deity Selector (Overlay on top of content) -->
|
|
||||||
<div v-if="showDeitySelector" class="deity-selector-overlay" @click="showDeitySelector = false">
|
|
||||||
<div class="deity-selector-menu" @click.stop>
|
|
||||||
<div class="selector-header">選擇神明</div>
|
|
||||||
<div
|
|
||||||
v-for="deity in DEITIES"
|
|
||||||
:key="deity.id"
|
|
||||||
class="deity-option"
|
|
||||||
:class="{ active: deity.id === currentDeity.id }"
|
|
||||||
@click="selectDeity(deity.id)"
|
|
||||||
>
|
|
||||||
<div class="deity-icon-small" :class="deity.icon"></div>
|
|
||||||
<span>{{ deity.name }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, computed, onMounted } from 'vue';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
deityFavors: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
},
|
|
||||||
currentDeityId: {
|
|
||||||
type: String,
|
|
||||||
default: 'mazu'
|
|
||||||
},
|
|
||||||
dailyPrayerCount: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits(['close', 'prayer', 'change-deity', 'prayer-select']);
|
|
||||||
|
|
||||||
// Deity Data
|
|
||||||
const DEITIES = [
|
|
||||||
{
|
|
||||||
id: 'mazu',
|
|
||||||
name: '媽祖',
|
|
||||||
personality: '溫柔守護',
|
|
||||||
buffs: {
|
|
||||||
gameSuccessRate: 0.1,
|
|
||||||
sicknessReduction: 0.15
|
|
||||||
},
|
|
||||||
buffDescriptions: [
|
|
||||||
'小遊戲成功率 +10%',
|
|
||||||
'生病機率 -15%'
|
|
||||||
],
|
|
||||||
dialogues: [
|
|
||||||
"好孩子，媽祖保佑你平安喔",
|
|
||||||
"海上無風浪，心中有媽祖",
|
|
||||||
"要好好照顧寵物啊"
|
|
||||||
],
|
|
||||||
icon: 'deity-mazu'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'earthgod',
|
|
||||||
name: '土地公',
|
|
||||||
personality: '碎念管家',
|
|
||||||
buffs: {
|
|
||||||
itemDropRate: 0.2,
|
|
||||||
resourceGain: 0.15
|
|
||||||
},
|
|
||||||
buffDescriptions: [
|
|
||||||
'掉落物品機率 +20%',
|
|
||||||
'資源獲得 +15%'
|
|
||||||
],
|
|
||||||
dialogues: [
|
|
||||||
"又來啦？今天有好好餵寵物嗎？",
|
|
||||||
"欸，地上那個便便怎麼不清一清",
|
|
||||||
"拜我就對了，土地公最靈驗"
|
|
||||||
],
|
|
||||||
icon: 'deity-earthgod'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'matchmaker',
|
|
||||||
name: '月老',
|
|
||||||
personality: '八卦熱情',
|
|
||||||
buffs: {
|
|
||||||
happinessRecovery: 0.25,
|
|
||||||
goodEventRate: 0.1
|
|
||||||
},
|
|
||||||
buffDescriptions: [
|
|
||||||
'Happiness 回復 +25%',
|
|
||||||
'好事件機率 +10%'
|
|
||||||
],
|
|
||||||
dialogues: [
|
|
||||||
"哎呀～你的寵物今天心情不錯喔",
|
|
||||||
"要不要幫你牽條紅線？咦，寵物也需要嗎",
|
|
||||||
"姻緣天注定，開心最重要！"
|
|
||||||
],
|
|
||||||
icon: 'deity-matchmaker'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'wenchang',
|
|
||||||
name: '文昌帝君',
|
|
||||||
personality: '嚴肅學者',
|
|
||||||
buffs: {
|
|
||||||
intGrowth: 0.3,
|
|
||||||
guessingReward: 0.2
|
|
||||||
},
|
|
||||||
buffDescriptions: [
|
|
||||||
'INT 成長 +30%',
|
|
||||||
'猜拳獎勵 +20%'
|
|
||||||
],
|
|
||||||
dialogues: [
|
|
||||||
"學海無涯，勤能補拙",
|
|
||||||
"多動腦，少偷懶",
|
|
||||||
"智慧是一切的根本"
|
|
||||||
],
|
|
||||||
icon: 'deity-wenchang'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'guanyin',
|
|
||||||
name: '觀音菩薩',
|
|
||||||
personality: '慈悲救苦',
|
|
||||||
buffs: {
|
|
||||||
healthRecovery: 0.2,
|
|
||||||
autoHeal: true
|
|
||||||
},
|
|
||||||
buffDescriptions: [
|
|
||||||
'Health 回復 +20%',
|
|
||||||
'自動治療 (1次/天)'
|
|
||||||
],
|
|
||||||
dialogues: [
|
|
||||||
"阿彌陀佛，施主請安心",
|
|
||||||
"救苦救難，觀音保佑",
|
|
||||||
"..."
|
|
||||||
],
|
|
||||||
icon: 'deity-guanyin'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
const showDeitySelector = ref(false);
|
|
||||||
const currentDialogue = ref('');
|
|
||||||
const activeBuffs = ref([]);
|
|
||||||
|
|
||||||
const currentDeity = computed(() => {
|
|
||||||
return DEITIES.find(d => d.id === props.currentDeityId) || DEITIES[0];
|
|
||||||
});
|
|
||||||
|
|
||||||
const currentFavor = computed(() => {
|
|
||||||
return props.deityFavors[props.currentDeityId] || 0;
|
|
||||||
});
|
|
||||||
|
|
||||||
const favorStars = computed(() => {
|
|
||||||
const level = Math.floor(currentFavor.value / 20);
|
|
||||||
return '★'.repeat(level) + '☆'.repeat(5 - level);
|
|
||||||
});
|
|
||||||
|
|
||||||
function selectDeity(deityId) {
|
|
||||||
emit('change-deity', deityId);
|
|
||||||
showDeitySelector.value = false;
|
|
||||||
updateDialogue();
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateDialogue() {
|
|
||||||
const dialogues = currentDeity.value.dialogues;
|
|
||||||
currentDialogue.value = dialogues[Math.floor(Math.random() * dialogues.length)];
|
|
||||||
}
|
|
||||||
|
|
||||||
function handlePrayer() {
|
|
||||||
if (props.dailyPrayerCount >= 3) return;
|
|
||||||
|
|
||||||
emit('prayer', currentDeity.value.id);
|
|
||||||
updateDialogue();
|
|
||||||
|
|
||||||
// Update active buffs display
|
|
||||||
activeBuffs.value = currentDeity.value.buffDescriptions.map(desc => ({
|
|
||||||
type: currentDeity.value.id,
|
|
||||||
description: desc
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
|
|
||||||
function handlePrayerSelect(mode) {
|
|
||||||
emit('prayer-select', mode);
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
updateDialogue();
|
|
||||||
|
|
||||||
// Load active buffs if favor > 0
|
|
||||||
if (currentFavor.value > 0) {
|
|
||||||
activeBuffs.value = currentDeity.value.buffDescriptions.map(desc => ({
|
|
||||||
type: currentDeity.value.id,
|
|
||||||
description: desc
|
|
||||||
}));
|
|
||||||
}
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.deity-temple-overlay {
|
|
||||||
position: absolute; /* Absolute to parent (DeviceScreen) */
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.85);
|
|
||||||
z-index: 50; /* Same as PetInfoScreen */
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.temple-container {
|
|
||||||
background: linear-gradient(to bottom, #8B4513 0%, #A0522D 100%);
|
|
||||||
border: 3px solid #654321;
|
|
||||||
border-radius: 6px;
|
|
||||||
width: calc(100% - 8px);
|
|
||||||
max-width: 198px; /* Fit within 210px screen with padding */
|
|
||||||
height: calc(100% - 8px);
|
|
||||||
max-height: 152px; /* Fit within 160px screen with padding */
|
|
||||||
box-shadow: 0 4px 8px rgba(0,0,0,0.5);
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
overflow: hidden; /* Contain children */
|
|
||||||
pointer-events: auto; /* Ensure container can receive clicks */
|
|
||||||
}
|
|
||||||
|
|
||||||
.temple-container::-webkit-scrollbar {
|
|
||||||
width: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.temple-container::-webkit-scrollbar-track {
|
|
||||||
background: rgba(0,0,0,0.2);
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.temple-container::-webkit-scrollbar-thumb {
|
|
||||||
background: #FFD700;
|
|
||||||
border-radius: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.temple-header {
|
|
||||||
background: #654321;
|
|
||||||
padding: 6px;
|
|
||||||
text-align: center;
|
|
||||||
border-bottom: 2px solid #4a3216;
|
|
||||||
flex-shrink: 0; /* Don't shrink header */
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.temple-content {
|
|
||||||
flex: 1;
|
|
||||||
overflow-y: auto; /* Scrollable content area */
|
|
||||||
overflow-x: hidden;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
-webkit-overflow-scrolling: touch;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn {
|
|
||||||
position: absolute;
|
|
||||||
right: 4px;
|
|
||||||
top: 4px;
|
|
||||||
background: #8B0000;
|
|
||||||
border: 2px solid #fff;
|
|
||||||
color: #fff;
|
|
||||||
width: 18px;
|
|
||||||
height: 18px;
|
|
||||||
border-radius: 3px;
|
|
||||||
cursor: pointer;
|
|
||||||
font-size: 14px;
|
|
||||||
line-height: 1;
|
|
||||||
z-index: 10;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.temple-title {
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
color: #FFD700;
|
|
||||||
margin: 0;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.deity-display { padding: 6px; text-align: center; }
|
|
||||||
.deity-icon { width: 32px; height: 32px; margin: 0 auto 4px; background: #FFD700; border: 2px solid #FFA500; border-radius: 50%; }
|
|
||||||
.deity-name { font-family: 'DotGothic16', monospace; font-size: 11px; color: #FFD700; font-weight: bold; margin-bottom: 2px; }
|
|
||||||
.deity-subtitle { font-family: 'DotGothic16', monospace; font-size: 9px; color: #DEB887; }
|
|
||||||
|
|
||||||
.dialogue-bubble {
|
|
||||||
margin: 0 6px 6px;
|
|
||||||
background: #FFF8DC;
|
|
||||||
border: 2px solid #654321;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 6px;
|
|
||||||
position: relative;
|
|
||||||
min-height: 30px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
.dialogue-bubble::before {
|
|
||||||
content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%);
|
|
||||||
border-width: 0 6px 6px 6px; border-style: solid; border-color: transparent transparent #654321 transparent;
|
|
||||||
}
|
|
||||||
.dialogue-bubble p { font-family: 'DotGothic16', monospace; font-size: 9px; color: #333; margin: 0; text-align: center; line-height: 1.3; }
|
|
||||||
|
|
||||||
.favor-section, .buffs-section { padding: 0 6px 6px; }
|
|
||||||
.prayer-section {
|
|
||||||
padding: 0 6px 6px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 5;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prayer-btn {
|
|
||||||
width: 100%;
|
|
||||||
padding: 6px;
|
|
||||||
background: #FFD700;
|
|
||||||
border: 2px solid #FFA500;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #8B4513;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
}
|
|
||||||
.prayer-btn:hover:not(:disabled) {
|
|
||||||
background: #FFA500;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
.prayer-btn:active:not(:disabled) {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
.prayer-btn:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
background: #ccc;
|
|
||||||
border-color: #999;
|
|
||||||
color: #666;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prayer-divider {
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-size: 8px;
|
|
||||||
color: #DEB887;
|
|
||||||
text-align: center;
|
|
||||||
margin: 2px 0;
|
|
||||||
}
|
|
||||||
.bottom-actions {
|
|
||||||
padding: 4px 6px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
border-top: 2px solid #4a3216;
|
|
||||||
background: rgba(101, 67, 33, 0.5);
|
|
||||||
position: relative;
|
|
||||||
z-index: 5;
|
|
||||||
}
|
|
||||||
.favor-label { font-family: 'DotGothic16', monospace; font-size: 9px; color: #FFD700; margin-bottom: 2px; }
|
|
||||||
.favor-bar { height: 8px; background: rgba(0,0,0,0.3); border: 1px solid #654321; border-radius: 4px; overflow: hidden; }
|
|
||||||
.favor-fill { height: 100%; background: linear-gradient(to right, #FFD700, #FFA500); transition: width 0.3s ease; }
|
|
||||||
|
|
||||||
.buffs-section { background: rgba(255,255,255,0.1); border-radius: 3px; padding: 4px; }
|
|
||||||
.buff-title { font-family: 'DotGothic16', monospace; font-size: 9px; color: #FFD700; margin-bottom: 2px; }
|
|
||||||
.buff-list { font-family: 'DotGothic16', monospace; font-size: 8px; color: #FFF8DC; }
|
|
||||||
|
|
||||||
.prayer-options {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prayer-option {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2px;
|
|
||||||
background: rgba(255, 255, 255, 0.9);
|
|
||||||
border: 2px solid #654321;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 4px 6px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: transform 0.2s, box-shadow 0.2s;
|
|
||||||
min-width: 50px;
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prayer-option:hover {
|
|
||||||
transform: translateY(-1px);
|
|
||||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
|
|
||||||
background: #FFD700;
|
|
||||||
border-color: #FFA500;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prayer-option:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.option-icon {
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
position: relative;
|
|
||||||
transform: scale(0.6);
|
|
||||||
}
|
|
||||||
|
|
||||||
.option-label {
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-size: 8px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prayer-count-info {
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-size: 8px;
|
|
||||||
color: #FFD700;
|
|
||||||
text-align: center;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn {
|
|
||||||
width: 100%; padding: 6px; background: #654321; border: 2px solid #4a3216; border-radius: 3px;
|
|
||||||
font-family: 'DotGothic16', monospace; font-size: 9px; color: #FFD700; cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
z-index: 10;
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
}
|
|
||||||
.action-btn:active {
|
|
||||||
transform: translateY(1px);
|
|
||||||
background: #4a3216;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Deity Selector Overlay */
|
|
||||||
.deity-selector-overlay {
|
|
||||||
position: absolute;
|
|
||||||
top: 0; left: 0; width: 100%; height: 100%;
|
|
||||||
background: rgba(0,0,0,0.7);
|
|
||||||
z-index: 20;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.deity-selector-menu {
|
|
||||||
background: #4a3216;
|
|
||||||
border: 2px solid #FFD700;
|
|
||||||
border-radius: 4px;
|
|
||||||
padding: 6px;
|
|
||||||
width: 85%;
|
|
||||||
max-height: 75%;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.selector-header {
|
|
||||||
text-align: center; color: #FFD700; font-family: 'DotGothic16', monospace; margin-bottom: 6px; font-weight: bold; font-size: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.deity-option {
|
|
||||||
display: flex; align-items: center; gap: 6px; padding: 4px; margin: 3px 0;
|
|
||||||
background: #654321; border: 1px solid transparent; border-radius: 3px; cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
z-index: 25;
|
|
||||||
user-select: none;
|
|
||||||
-webkit-user-select: none;
|
|
||||||
}
|
|
||||||
.deity-option:hover {
|
|
||||||
border-color: #FFD700;
|
|
||||||
background: #7a5238;
|
|
||||||
}
|
|
||||||
.deity-option:active {
|
|
||||||
transform: scale(0.98);
|
|
||||||
}
|
|
||||||
.deity-option.active { background: #8B4513; border-color: #FFD700; }
|
|
||||||
.deity-option span { font-family: 'DotGothic16', monospace; font-size: 9px; color: #FFD700; }
|
|
||||||
.deity-icon-small { width: 16px; height: 16px; background: #FFD700; border: 1px solid #FFA500; border-radius: 50%; }
|
|
||||||
|
|
||||||
/* Deity Icons - Pixel Art Placeholders */
|
|
||||||
.deity-mazu,
|
|
||||||
.deity-earthgod,
|
|
||||||
.deity-matchmaker,
|
|
||||||
.deity-wenchang,
|
|
||||||
.deity-guanyin {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-size: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.deity-mazu::after { content: '媽'; }
|
|
||||||
.deity-earthgod::after { content: '土'; }
|
|
||||||
.deity-matchmaker::after { content: '月'; }
|
|
||||||
.deity-wenchang::after { content: '文'; }
|
|
||||||
.deity-guanyin::after { content: '觀'; }
|
|
||||||
|
|
||||||
/* Prayer Option Icons */
|
|
||||||
.icon-jiaobei::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 2px;
|
|
||||||
height: 2px;
|
|
||||||
background: transparent;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
box-shadow:
|
|
||||||
/* 左邊筊杯 */
|
|
||||||
-7px -4px 0 #ff5252, -5px -4px 0 #ff5252, -3px -4px 0 #ff5252,
|
|
||||||
-9px -2px 0 #ff5252, -7px -2px 0 #ff8a80, -5px -2px 0 #ff5252, -3px -2px 0 #ff5252, -1px -2px 0 #ff5252,
|
|
||||||
-9px 0px 0 #ff5252, -7px 0px 0 #ff5252, -5px 0px 0 #ff5252, -3px 0px 0 #ff5252, -1px 0px 0 #ff5252,
|
|
||||||
-7px 2px 0 #ff5252, -5px 2px 0 #ff5252, -3px 2px 0 #ff5252,
|
|
||||||
-5px 4px 0 #d32f2f,
|
|
||||||
/* 右邊筊杯 */
|
|
||||||
3px -4px 0 #ff5252, 5px -4px 0 #ff5252, 7px -4px 0 #ff5252,
|
|
||||||
1px -2px 0 #ff5252, 3px -2px 0 #ff5252, 5px -2px 0 #ff5252, 7px -2px 0 #ff8a80, 9px -2px 0 #ff5252,
|
|
||||||
1px 0px 0 #ff5252, 3px 0px 0 #ff5252, 5px 0px 0 #ff5252, 7px 0px 0 #ff5252, 9px 0px 0 #ff5252,
|
|
||||||
3px 2px 0 #ff5252, 5px 2px 0 #ff5252, 7px 2px 0 #ff5252,
|
|
||||||
5px 4px 0 #d32f2f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-fortune::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 2px;
|
|
||||||
height: 2px;
|
|
||||||
background: #8B4513;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
box-shadow:
|
|
||||||
/* 籤筒本體 */
|
|
||||||
-4px -4px 0 #8B4513, -2px -4px 0 #8B4513, 0px -4px 0 #8B4513, 2px -4px 0 #8B4513, 4px -4px 0 #8B4513,
|
|
||||||
-4px -2px 0 #8B4513, -2px -2px 0 #8B4513, 0px -2px 0 #8B4513, 2px -2px 0 #8B4513, 4px -2px 0 #8B4513,
|
|
||||||
-4px 0px 0 #8B4513, -2px 0px 0 #8B4513, 0px 0px 0 #8B4513, 2px 0px 0 #8B4513, 4px 0px 0 #8B4513,
|
|
||||||
-4px 2px 0 #8B4513, -2px 2px 0 #8B4513, 0px 2px 0 #8B4513, 2px 2px 0 #8B4513, 4px 2px 0 #8B4513,
|
|
||||||
-4px 4px 0 #8B4513, -2px 4px 0 #8B4513, 0px 4px 0 #8B4513, 2px 4px 0 #8B4513, 4px 4px 0 #8B4513,
|
|
||||||
/* 突出的籤條 */
|
|
||||||
-2px -8px 0 #d4522e, 0px -8px 0 #d4522e,
|
|
||||||
-2px -6px 0 #d4522e, 0px -6px 0 #d4522e,
|
|
||||||
2px -6px 0 #d4522e;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,238 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="fortune-result-overlay">
|
|
||||||
<div class="result-card pixel-border">
|
|
||||||
<div class="header">
|
|
||||||
<div class="lot-number pixel-font">{{ lotData.no }}</div>
|
|
||||||
<div class="lot-grade pixel-font" :class="gradeClass">{{ lotData.grade }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="poem-container pixel-font">
|
|
||||||
<div v-for="(line, index) in poemLines" :key="index" class="poem-line">
|
|
||||||
{{ line }}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="details-container pixel-font">
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="label">解曰：</span>
|
|
||||||
<span class="content">{{ lotData.meaning }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="label">仙機：</span>
|
|
||||||
<span class="content">{{ lotData.explanation }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="label">斷語：</span>
|
|
||||||
<div class="content oracle-content">{{ lotData.oracle }}</div>
|
|
||||||
</div>
|
|
||||||
<div class="detail-item">
|
|
||||||
<span class="label">典故：</span>
|
|
||||||
<div class="content story-content">{{ lotData.story }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="action-buttons">
|
|
||||||
<button class="pixel-btn close-btn" @click="$emit('close')">收下籤詩</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { computed } from 'vue';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
lotData: {
|
|
||||||
type: Object,
|
|
||||||
required: true
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
defineEmits(['close']);
|
|
||||||
|
|
||||||
const poemLines = computed(() => {
|
|
||||||
if (!props.lotData.poem1) return [];
|
|
||||||
return props.lotData.poem1.split('\n');
|
|
||||||
});
|
|
||||||
|
|
||||||
const gradeClass = computed(() => {
|
|
||||||
const g = props.lotData.grade || '';
|
|
||||||
if (g.includes('上')) return 'grade-good';
|
|
||||||
if (g.includes('下')) return 'grade-bad';
|
|
||||||
return 'grade-mid';
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
|
|
||||||
/* ... (previous styles) ... */
|
|
||||||
|
|
||||||
.details-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 6px;
|
|
||||||
background: #f5f5f5;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.detail-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-weight: bold;
|
|
||||||
color: #8b4513;
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #333;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.oracle-content {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.story-content {
|
|
||||||
white-space: pre-wrap;
|
|
||||||
max-height: 100px;
|
|
||||||
overflow-y: auto;
|
|
||||||
padding: 4px;
|
|
||||||
background: #fff;
|
|
||||||
border: 1px dashed #ccc;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
|
|
||||||
|
|
||||||
.fortune-result-overlay {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.85);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 300;
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-card {
|
|
||||||
background: #fff8e7;
|
|
||||||
padding: 10px; /* 縮小內邊距 */
|
|
||||||
width: 220px; /* 縮小寬度 */
|
|
||||||
max-height: 95%;
|
|
||||||
overflow-y: auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px; /* 縮小間距 */
|
|
||||||
box-shadow: 0 0 20px rgba(0,0,0,0.5);
|
|
||||||
border: 3px solid #8b4513;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 像素邊框效果 */
|
|
||||||
.pixel-border {
|
|
||||||
box-shadow:
|
|
||||||
-3px 0 0 #8b4513,
|
|
||||||
3px 0 0 #8b4513,
|
|
||||||
0 -3px 0 #8b4513,
|
|
||||||
0 3px 0 #8b4513;
|
|
||||||
margin: 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pixel-font {
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.header {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
border-bottom: 2px dashed #d4a373;
|
|
||||||
padding-bottom: 6px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lot-number {
|
|
||||||
font-size: 16px; /* 縮小字體 */
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.lot-grade {
|
|
||||||
font-size: 14px; /* 縮小字體 */
|
|
||||||
padding: 2px 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
.grade-good { background: #d32f2f; }
|
|
||||||
.grade-mid { background: #fbc02d; color: #333; }
|
|
||||||
.grade-bad { background: #555; }
|
|
||||||
|
|
||||||
.poem-container {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2px;
|
|
||||||
padding: 6px 0;
|
|
||||||
background: #fff;
|
|
||||||
border: 1px solid #e0e0e0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.poem-line {
|
|
||||||
font-size: 14px; /* 縮小字體 */
|
|
||||||
color: #333;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
line-height: 1.4;
|
|
||||||
}
|
|
||||||
|
|
||||||
.meaning {
|
|
||||||
font-size: 12px; /* 縮小字體 */
|
|
||||||
color: #555;
|
|
||||||
line-height: 1.3;
|
|
||||||
background: #f5f5f5;
|
|
||||||
padding: 6px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pixel-btn {
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-size: 12px; /* 縮小字體 */
|
|
||||||
padding: 4px 12px;
|
|
||||||
border: 2px solid #8b4513;
|
|
||||||
background: #d32f2f;
|
|
||||||
color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.1s;
|
|
||||||
box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pixel-btn:hover {
|
|
||||||
transform: translateY(-1px);
|
|
||||||
background: #b71c1c;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pixel-btn:active {
|
|
||||||
transform: translateY(1px);
|
|
||||||
box-shadow: 1px 1px 0 rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,266 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="fortune-stick-overlay">
|
|
||||||
<div class="content">
|
|
||||||
<div class="shaking-container" :class="{ 'shaking': isShaking }">
|
|
||||||
<!-- 籤筒 -->
|
|
||||||
<div class="stick-holder">
|
|
||||||
<div class="holder-body"></div>
|
|
||||||
<div class="holder-rim"></div>
|
|
||||||
<div class="holder-label">籤</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 掉出的籤 (動畫結束後顯示) -->
|
|
||||||
<div v-if="selectedStick" class="falling-stick" :class="{ 'fallen': hasFallen }">
|
|
||||||
<div class="stick-body"></div>
|
|
||||||
<div class="stick-number">{{ selectedStick }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="status-text pixel-font">
|
|
||||||
<span v-if="isShaking">搖籤中...</span>
|
|
||||||
<span v-else-if="selectedStick">第 {{ selectedStick }} 籤</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="!isShaking && selectedStick" class="action-buttons">
|
|
||||||
<button class="pixel-btn confirm-btn" @click="handleConfirm">擲筊確認</button>
|
|
||||||
<button class="pixel-btn close-btn" @click="$emit('close')">返回</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 在搖動時也顯示返回按鈕，但位置可能需要調整 -->
|
|
||||||
<div v-if="isShaking" class="action-buttons">
|
|
||||||
<button class="pixel-btn close-btn" @click="$emit('close')">返回</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, onMounted } from 'vue';
|
|
||||||
|
|
||||||
const emit = defineEmits(['complete', 'close']);
|
|
||||||
|
|
||||||
const isShaking = ref(true);
|
|
||||||
const selectedStick = ref(null);
|
|
||||||
const hasFallen = ref(false);
|
|
||||||
|
|
||||||
function startShake() {
|
|
||||||
isShaking.value = true;
|
|
||||||
selectedStick.value = null;
|
|
||||||
hasFallen.value = false;
|
|
||||||
|
|
||||||
// 搖動 2 秒後掉出籤
|
|
||||||
setTimeout(() => {
|
|
||||||
isShaking.value = false;
|
|
||||||
// 隨機選籤 (1-100)
|
|
||||||
selectedStick.value = Math.floor(Math.random() * 100) + 1;
|
|
||||||
|
|
||||||
// 籤掉落動畫
|
|
||||||
setTimeout(() => {
|
|
||||||
hasFallen.value = true;
|
|
||||||
}, 100);
|
|
||||||
}, 2000);
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleConfirm() {
|
|
||||||
emit('complete', selectedStick.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
startShake();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
|
|
||||||
|
|
||||||
.fortune-stick-overlay {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.85);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 200;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 8px; /* 縮小間距 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.shaking-container {
|
|
||||||
position: relative;
|
|
||||||
width: 40px; /* 縮小寬度 */
|
|
||||||
height: 60px; /* 縮小高度 */
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: flex-end;
|
|
||||||
margin-top: 10px; /* 稍微下移一點 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.shaking {
|
|
||||||
animation: shake 0.1s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes shake {
|
|
||||||
0% { transform: translate(1px, 1px) rotate(0deg); }
|
|
||||||
10% { transform: translate(-1px, -2px) rotate(-1deg); }
|
|
||||||
20% { transform: translate(-3px, 0px) rotate(1deg); }
|
|
||||||
30% { transform: translate(3px, 2px) rotate(0deg); }
|
|
||||||
40% { transform: translate(1px, -1px) rotate(1deg); }
|
|
||||||
50% { transform: translate(-1px, 2px) rotate(-1deg); }
|
|
||||||
60% { transform: translate(-3px, 1px) rotate(0deg); }
|
|
||||||
70% { transform: translate(3px, 1px) rotate(-1deg); }
|
|
||||||
80% { transform: translate(-1px, -1px) rotate(1deg); }
|
|
||||||
90% { transform: translate(1px, 2px) rotate(0deg); }
|
|
||||||
100% { transform: translate(1px, -2px) rotate(-1deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- 籤筒樣式 --- */
|
|
||||||
.stick-holder {
|
|
||||||
position: relative;
|
|
||||||
width: 30px; /* 縮小籤筒 */
|
|
||||||
height: 45px;
|
|
||||||
z-index: 2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.holder-body {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: #8b4513;
|
|
||||||
border: 2px solid #5c2e0e;
|
|
||||||
box-shadow: inset -3px 0 0 rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.holder-rim {
|
|
||||||
position: absolute;
|
|
||||||
top: -3px;
|
|
||||||
left: -2px;
|
|
||||||
width: 34px; /* 調整邊緣 */
|
|
||||||
height: 6px;
|
|
||||||
background: #a0522d;
|
|
||||||
border: 2px solid #5c2e0e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.holder-label {
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
color: #f0d09c;
|
|
||||||
font-size: 14px; /* 縮小字體 */
|
|
||||||
font-weight: bold;
|
|
||||||
text-shadow: 1px 1px 0 #3e1f09;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- 籤樣式 --- */
|
|
||||||
.falling-stick {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 30px; /* 初始位置在籤筒內 */
|
|
||||||
left: 50%;
|
|
||||||
transform: translateX(-50%);
|
|
||||||
width: 8px; /* 縮小籤 */
|
|
||||||
height: 40px;
|
|
||||||
z-index: 1; /* 在籤筒後面 */
|
|
||||||
transition: all 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.falling-stick.fallen {
|
|
||||||
bottom: -10px; /* 掉到籤筒前方下方 */
|
|
||||||
left: 60%; /* 稍微往右掉 */
|
|
||||||
transform: translateX(-50%) rotate(60deg);
|
|
||||||
opacity: 1;
|
|
||||||
z-index: 3; /* 掉出來後在最前面 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.stick-body {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: #f0d09c;
|
|
||||||
border: 1px solid #8b4513;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stick-body::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 6px;
|
|
||||||
background: #ff4444;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stick-number {
|
|
||||||
position: absolute;
|
|
||||||
top: 8px;
|
|
||||||
width: 100%;
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-size: 8px;
|
|
||||||
color: #000;
|
|
||||||
writing-mode: vertical-rl;
|
|
||||||
text-orientation: upright;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- 文字與按鈕 --- */
|
|
||||||
.pixel-font {
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-text {
|
|
||||||
font-size: 12px;
|
|
||||||
color: #fff;
|
|
||||||
text-shadow: 1px 1px 0 #000;
|
|
||||||
min-height: 18px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons {
|
|
||||||
margin-top: 4px;
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
justify-content: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pixel-btn {
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 4px 10px;
|
|
||||||
border: 2px solid #fff;
|
|
||||||
background: transparent;
|
|
||||||
color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.1s;
|
|
||||||
text-shadow: 1px 1px 0 #000;
|
|
||||||
box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pixel-btn:hover {
|
|
||||||
transform: translateY(-1px);
|
|
||||||
background: rgba(255,255,255,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pixel-btn:active {
|
|
||||||
transform: translateY(1px);
|
|
||||||
box-shadow: 1px 1px 0 rgba(0,0,0,0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.confirm-btn {
|
|
||||||
border-color: #ffcc00;
|
|
||||||
color: #ffcc00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn {
|
|
||||||
border-color: #ccc;
|
|
||||||
color: #ccc;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,617 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="game-overlay" @click.self="handleClose">
|
|
||||||
<div class="game-container">
|
|
||||||
<h2 class="game-title">猜拳遊戲</h2>
|
|
||||||
|
|
||||||
<div v-if="!gameStarted" class="game-intro">
|
|
||||||
<p>3回合制</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="gameStarted" class="game-status">
|
|
||||||
<div class="score">
|
|
||||||
<span>你: {{ playerScore }}</span>
|
|
||||||
<span>第{{ currentRound }}/3局</span>
|
|
||||||
<span>電腦: {{ cpuScore }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="result" class="result-display" ref="resultDisplayRef">
|
|
||||||
<div class="hands" :class="{ 'shake': waiting }">
|
|
||||||
<div class="hand player-hand" :class="{ 'slide-in-left': !waiting }">
|
|
||||||
<div class="hand-icon" :class="`icon-${playerChoice}`"></div>
|
|
||||||
</div>
|
|
||||||
<div class="vs">VS</div>
|
|
||||||
<div class="hand cpu-hand" :class="{ 'slide-in-right': !waiting }">
|
|
||||||
<div class="hand-icon" :class="`icon-${cpuChoice}`"></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="result-text" :class="[result, { 'bounce-in': !waiting }]">{{ resultText }}</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="!gameOver" class="choices">
|
|
||||||
<button
|
|
||||||
v-for="choice in choices"
|
|
||||||
:key="choice.id"
|
|
||||||
class="choice-btn"
|
|
||||||
@click="play(choice.id)"
|
|
||||||
:disabled="waiting"
|
|
||||||
>
|
|
||||||
<div class="choice-icon" :class="`icon-${choice.id}`"></div>
|
|
||||||
<span>{{ choice.name }}</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div v-if="gameOver" class="game-over">
|
|
||||||
<div class="final-result" :class="finalResult">
|
|
||||||
<div class="result-icon" :class="`icon-${finalResult}`"></div>
|
|
||||||
<h3>{{ finalResultText }}</h3>
|
|
||||||
</div>
|
|
||||||
<button class="action-btn" @click="playAgain">再玩一次</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button class="close-btn" @click="handleClose">
|
|
||||||
{{ gameOver ? '完成' : '取消' }}
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, computed } from 'vue';
|
|
||||||
|
|
||||||
const emit = defineEmits(['close', 'complete']);
|
|
||||||
|
|
||||||
const choices = [
|
|
||||||
{ id: 'rock', name: '石頭' },
|
|
||||||
{ id: 'paper', name: '布' },
|
|
||||||
{ id: 'scissors', name: '剪刀' }
|
|
||||||
];
|
|
||||||
|
|
||||||
const gameStarted = ref(false);
|
|
||||||
const gameOver = ref(false);
|
|
||||||
const currentRound = ref(1);
|
|
||||||
const playerScore = ref(0);
|
|
||||||
const cpuScore = ref(0);
|
|
||||||
const playerChoice = ref('');
|
|
||||||
const cpuChoice = ref('');
|
|
||||||
const result = ref('');
|
|
||||||
const waiting = ref(false);
|
|
||||||
|
|
||||||
const resultText = computed(() => {
|
|
||||||
if (result.value === 'win') return '你贏了！';
|
|
||||||
if (result.value === 'lose') return '你輸了！';
|
|
||||||
return '平手！';
|
|
||||||
});
|
|
||||||
|
|
||||||
const finalResult = computed(() => {
|
|
||||||
if (playerScore.value > cpuScore.value) return 'win';
|
|
||||||
if (playerScore.value < cpuScore.value) return 'lose';
|
|
||||||
return 'draw';
|
|
||||||
});
|
|
||||||
|
|
||||||
const finalResultText = computed(() => {
|
|
||||||
if (finalResult.value === 'win') return '勝利！';
|
|
||||||
if (finalResult.value === 'lose') return '失敗...';
|
|
||||||
return '平手';
|
|
||||||
});
|
|
||||||
|
|
||||||
function play(choice) {
|
|
||||||
if (waiting.value || gameOver.value) return;
|
|
||||||
|
|
||||||
gameStarted.value = true;
|
|
||||||
waiting.value = true;
|
|
||||||
playerChoice.value = choice;
|
|
||||||
|
|
||||||
// CPU makes a random choice
|
|
||||||
const cpuIndex = Math.floor(Math.random() * 3);
|
|
||||||
cpuChoice.value = choices[cpuIndex].id;
|
|
||||||
|
|
||||||
// Determine winner
|
|
||||||
setTimeout(() => {
|
|
||||||
const outcome = determineWinner(choice, cpuChoice.value);
|
|
||||||
result.value = outcome;
|
|
||||||
|
|
||||||
if (outcome === 'win') {
|
|
||||||
playerScore.value++;
|
|
||||||
} else if (outcome === 'lose') {
|
|
||||||
cpuScore.value++;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check if game is over
|
|
||||||
setTimeout(() => {
|
|
||||||
if (currentRound.value >= 3) {
|
|
||||||
gameOver.value = true;
|
|
||||||
} else {
|
|
||||||
currentRound.value++;
|
|
||||||
result.value = '';
|
|
||||||
waiting.value = false;
|
|
||||||
}
|
|
||||||
}, 1500);
|
|
||||||
}, 500);
|
|
||||||
}
|
|
||||||
|
|
||||||
function determineWinner(player, cpu) {
|
|
||||||
if (player === cpu) return 'draw';
|
|
||||||
if (
|
|
||||||
(player === 'rock' && cpu === 'scissors') ||
|
|
||||||
(player === 'paper' && cpu === 'rock') ||
|
|
||||||
(player === 'scissors' && cpu === 'paper')
|
|
||||||
) {
|
|
||||||
return 'win';
|
|
||||||
}
|
|
||||||
return 'lose';
|
|
||||||
}
|
|
||||||
|
|
||||||
function playAgain() {
|
|
||||||
gameStarted.value = false;
|
|
||||||
gameOver.value = false;
|
|
||||||
currentRound.value = 1;
|
|
||||||
playerScore.value = 0;
|
|
||||||
cpuScore.value = 0;
|
|
||||||
result.value = '';
|
|
||||||
waiting.value = false;
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleClose() {
|
|
||||||
if (gameOver.value && finalResult.value === 'win') {
|
|
||||||
emit('complete', true); // Won the game
|
|
||||||
} else {
|
|
||||||
emit('complete', false); // Didn't win
|
|
||||||
}
|
|
||||||
emit('close');
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.game-overlay {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.8);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 150;
|
|
||||||
font-family: 'DotGothic16', sans-serif;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.game-container {
|
|
||||||
background: #f5f5dc;
|
|
||||||
border: 4px solid #8b4513;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 8px;
|
|
||||||
width: 90%;
|
|
||||||
max-width: 280px;
|
|
||||||
max-height: 90vh;
|
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
|
||||||
animation: slide-up 0.3s ease-out;
|
|
||||||
overflow-y: auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
.game-title {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 13px;
|
|
||||||
margin: 0 0 6px 0;
|
|
||||||
color: #8b4513;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.game-intro {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
color: #8b4513;
|
|
||||||
font-size: 10px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.game-status {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.score {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #8b4513;
|
|
||||||
padding: 0 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-display {
|
|
||||||
margin: 6px 0;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hands {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: space-around;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hands.shake {
|
|
||||||
animation: shake-hands 0.5s ease-in-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes shake-hands {
|
|
||||||
0%, 100% { transform: translateX(0); }
|
|
||||||
25% { transform: translateX(-5px) rotate(-5deg); }
|
|
||||||
75% { transform: translateX(5px) rotate(5deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.hand {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hand.slide-in-left {
|
|
||||||
animation: slide-in-left 0.5s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hand.slide-in-right {
|
|
||||||
animation: slide-in-right 0.5s ease-out;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slide-in-left {
|
|
||||||
from {
|
|
||||||
transform: translateX(-50px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translateX(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slide-in-right {
|
|
||||||
from {
|
|
||||||
transform: translateX(50px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translateX(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.hand span {
|
|
||||||
font-size: 10px;
|
|
||||||
color: #8b4513;
|
|
||||||
}
|
|
||||||
|
|
||||||
.hand-icon {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.vs {
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #8b4513;
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-text {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: bold;
|
|
||||||
padding: 5px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-text.bounce-in {
|
|
||||||
animation: bounce-in 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes bounce-in {
|
|
||||||
0% {
|
|
||||||
transform: scale(0);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
50% {
|
|
||||||
transform: scale(1.1);
|
|
||||||
}
|
|
||||||
100% {
|
|
||||||
transform: scale(1);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-text.win {
|
|
||||||
background: #90EE90;
|
|
||||||
color: #006400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-text.lose {
|
|
||||||
background: #FFB6C1;
|
|
||||||
color: #8b0000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-text.draw {
|
|
||||||
background: #FFE4B5;
|
|
||||||
color: #8b4513;
|
|
||||||
}
|
|
||||||
|
|
||||||
.choices {
|
|
||||||
display: flex;
|
|
||||||
gap: 5px;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.choice-btn {
|
|
||||||
flex: 1;
|
|
||||||
background: #fff;
|
|
||||||
border: 3px solid #8b4513;
|
|
||||||
border-radius: 5px;
|
|
||||||
padding: 6px 3px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 2px;
|
|
||||||
font-family: 'DotGothic16', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.choice-btn:hover:not(:disabled) {
|
|
||||||
background: #fffacd;
|
|
||||||
transform: scale(1.05);
|
|
||||||
animation: pulse 0.6s ease-in-out infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
0%, 100% { transform: scale(1.05); }
|
|
||||||
50% { transform: scale(1.1); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.choice-btn:active:not(:disabled) {
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
.choice-btn:disabled {
|
|
||||||
opacity: 0.5;
|
|
||||||
cursor: not-allowed;
|
|
||||||
}
|
|
||||||
|
|
||||||
.choice-btn span {
|
|
||||||
font-size: 9px;
|
|
||||||
color: #8b4513;
|
|
||||||
}
|
|
||||||
|
|
||||||
.choice-icon, .hand-icon {
|
|
||||||
width: 20px;
|
|
||||||
height: 20px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Pixel Art Icons */
|
|
||||||
.icon-rock::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
background: transparent;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%) scale(2);
|
|
||||||
box-shadow:
|
|
||||||
-2px -2px 0 #888, -1px -2px 0 #888, 0 -2px 0 #888, 1px -2px 0 #888,
|
|
||||||
-3px -1px 0 #888, -2px -1px 0 #aaa, -1px -1px 0 #aaa, 0 -1px 0 #aaa, 1px -1px 0 #aaa, 2px -1px 0 #888,
|
|
||||||
-3px 0 0 #888, -2px 0 0 #aaa, -1px 0 0 #666, 0 0 0 #666, 1px 0 0 #aaa, 2px 0 0 #888,
|
|
||||||
-2px 1px 0 #888, -1px 1px 0 #aaa, 0 1px 0 #aaa, 1px 1px 0 #888,
|
|
||||||
-1px 2px 0 #888, 0 2px 0 #888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-paper::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
background: transparent;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%) scale(2);
|
|
||||||
box-shadow:
|
|
||||||
-2px -3px 0 #ffcc99, -1px -3px 0 #ffcc99, 0 -3px 0 #ffcc99, 1px -3px 0 #ffcc99, 2px -3px 0 #ffcc99,
|
|
||||||
-3px -2px 0 #ffcc99, -2px -2px 0 #ffcc99, -1px -2px 0 #ffcc99, 0 -2px 0 #ffcc99, 1px -2px 0 #ffcc99, 2px -2px 0 #ffcc99, 3px -2px 0 #ffcc99,
|
|
||||||
-3px -1px 0 #ffcc99, -2px -1px 0 #ffcc99, -1px -1px 0 #ffcc99, 0 -1px 0 #ffcc99, 1px -1px 0 #ffcc99, 2px -1px 0 #ffcc99, 3px -1px 0 #ffcc99,
|
|
||||||
-3px 0 0 #ffcc99, -2px 0 0 #ffcc99, -1px 0 0 #ffaa77, 0 0 0 #ffaa77, 1px 0 0 #ffaa77, 2px 0 0 #ffcc99, 3px 0 0 #ffcc99,
|
|
||||||
-3px 1px 0 #ffcc99, -2px 1px 0 #ffcc99, -1px 1px 0 #ffcc99, 0 1px 0 #ffcc99, 1px 1px 0 #ffcc99, 2px 1px 0 #ffcc99, 3px 1px 0 #ffcc99;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-scissors::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
background: transparent;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%) scale(2);
|
|
||||||
box-shadow:
|
|
||||||
-3px -2px 0 #888, -2px -2px 0 #888,
|
|
||||||
-3px -1px 0 #888, -2px -1px 0 #888,
|
|
||||||
-2px 0 0 #888, -1px 0 0 #888, 0 0 0 #888, 1px 0 0 #888, 2px 0 0 #888,
|
|
||||||
-1px 1px 0 #888, 0 1px 0 #888, 1px 1px 0 #888,
|
|
||||||
2px -2px 0 #888, 3px -2px 0 #888,
|
|
||||||
2px -1px 0 #888, 3px -1px 0 #888;
|
|
||||||
}
|
|
||||||
|
|
||||||
.game-over {
|
|
||||||
text-align: center;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.final-result {
|
|
||||||
font-size: 13px;
|
|
||||||
margin: 6px 0;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 5px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-icon {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
position: relative;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Trophy icon for win */
|
|
||||||
.icon-win::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
background: transparent;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%) scale(2);
|
|
||||||
box-shadow:
|
|
||||||
/* Cup top */
|
|
||||||
-3px -4px 0 #ffd700, -2px -4px 0 #ffd700, -1px -4px 0 #ffd700, 0 -4px 0 #ffd700, 1px -4px 0 #ffd700, 2px -4px 0 #ffd700, 3px -4px 0 #ffd700,
|
|
||||||
/* Cup body */
|
|
||||||
-2px -3px 0 #ffd700, -1px -3px 0 #ffed4e, 0 -3px 0 #ffed4e, 1px -3px 0 #ffed4e, 2px -3px 0 #ffd700,
|
|
||||||
-2px -2px 0 #ffd700, -1px -2px 0 #ffed4e, 0 -2px 0 #ffed4e, 1px -2px 0 #ffed4e, 2px -2px 0 #ffd700,
|
|
||||||
-2px -1px 0 #ffd700, -1px -1px 0 #ffed4e, 0 -1px 0 #ffed4e, 1px -1px 0 #ffed4e, 2px -1px 0 #ffd700,
|
|
||||||
-2px 0 0 #ffd700, -1px 0 0 #ffd700, 0 0 0 #ffd700, 1px 0 0 #ffd700, 2px 0 0 #ffd700,
|
|
||||||
/* Base */
|
|
||||||
-1px 1px 0 #b8860b, 0 1px 0 #b8860b, 1px 1px 0 #b8860b,
|
|
||||||
-2px 2px 0 #b8860b, -1px 2px 0 #b8860b, 0 2px 0 #b8860b, 1px 2px 0 #b8860b, 2px 2px 0 #b8860b;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Broken heart icon for lose */
|
|
||||||
.icon-lose::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
background: transparent;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%) scale(2);
|
|
||||||
box-shadow:
|
|
||||||
/* Left side of heart */
|
|
||||||
-3px -2px 0 #ff6b6b, -2px -2px 0 #ff6b6b,
|
|
||||||
-4px -1px 0 #ff6b6b, -3px -1px 0 #ff6b6b, -2px -1px 0 #ff6b6b, -1px -1px 0 #ff6b6b,
|
|
||||||
-4px 0 0 #ff6b6b, -3px 0 0 #ff6b6b, -2px 0 0 #ff6b6b, -1px 0 0 #ff6b6b,
|
|
||||||
/* Right side of heart */
|
|
||||||
1px -2px 0 #ff6b6b, 2px -2px 0 #ff6b6b,
|
|
||||||
0 -1px 0 #ff6b6b, 1px -1px 0 #ff6b6b, 2px -1px 0 #ff6b6b, 3px -1px 0 #ff6b6b,
|
|
||||||
0 0 0 #ff6b6b, 1px 0 0 #ff6b6b, 2px 0 0 #ff6b6b, 3px 0 0 #ff6b6b,
|
|
||||||
/* Bottom crack (broken) */
|
|
||||||
-3px 1px 0 #ff6b6b, -1px 1px 0 #ff6b6b, 1px 1px 0 #ff6b6b,
|
|
||||||
-2px 2px 0 #ff6b6b, 0 2px 0 #ff6b6b,
|
|
||||||
-1px 3px 0 #ff6b6b;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Handshake icon for draw */
|
|
||||||
.icon-draw::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
background: transparent;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%) scale(2);
|
|
||||||
box-shadow:
|
|
||||||
/* Left hand */
|
|
||||||
-4px -1px 0 #ffcc99, -3px -1px 0 #ffcc99, -2px -1px 0 #ffcc99,
|
|
||||||
-4px 0 0 #ffcc99, -3px 0 0 #ffcc99, -2px 0 0 #ffcc99, -1px 0 0 #ffcc99,
|
|
||||||
-4px 1px 0 #ffcc99, -3px 1px 0 #ffcc99, -2px 1px 0 #ffcc99,
|
|
||||||
/* Right hand */
|
|
||||||
1px -1px 0 #ffcc99, 2px -1px 0 #ffcc99, 3px -1px 0 #ffcc99,
|
|
||||||
0 0 0 #ffcc99, 1px 0 0 #ffcc99, 2px 0 0 #ffcc99, 3px 0 0 #ffcc99,
|
|
||||||
1px 1px 0 #ffcc99, 2px 1px 0 #ffcc99, 3px 1px 0 #ffcc99;
|
|
||||||
}
|
|
||||||
|
|
||||||
.final-result h3 {
|
|
||||||
margin: 0;
|
|
||||||
font-size: 13px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.final-result.win {
|
|
||||||
background: #90EE90;
|
|
||||||
color: #006400;
|
|
||||||
}
|
|
||||||
|
|
||||||
.final-result.lose {
|
|
||||||
background: #FFB6C1;
|
|
||||||
color: #8b0000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.final-result.draw {
|
|
||||||
background: #FFE4B5;
|
|
||||||
color: #8b4513;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn {
|
|
||||||
width: 100%;
|
|
||||||
padding: 5px;
|
|
||||||
background: #4CAF50;
|
|
||||||
border: 3px solid #2e7d32;
|
|
||||||
border-radius: 4px;
|
|
||||||
color: white;
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
cursor: pointer;
|
|
||||||
font-family: 'DotGothic16', sans-serif;
|
|
||||||
margin-bottom: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn:hover {
|
|
||||||
background: #45a049;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-btn:active {
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn {
|
|
||||||
width: 100%;
|
|
||||||
padding: 5px;
|
|
||||||
background: #cd853f;
|
|
||||||
border: 3px solid #8b4513;
|
|
||||||
border-radius: 4px;
|
|
||||||
color: white;
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
cursor: pointer;
|
|
||||||
font-family: 'DotGothic16', sans-serif;
|
|
||||||
flex-shrink: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn:hover {
|
|
||||||
background: #d2691e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn:active {
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slide-up {
|
|
||||||
from {
|
|
||||||
transform: translateY(50px);
|
|
||||||
opacity: 0;
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translateY(0);
|
|
||||||
opacity: 1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,416 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="inventory-screen" @click.self="$emit('close')">
|
|
||||||
<div class="inventory-container" @click="$emit('close')">
|
|
||||||
<div class="screen-title">背包</div>
|
|
||||||
|
|
||||||
<div class="inventory-grid">
|
|
||||||
<div
|
|
||||||
v-for="(item, index) in items"
|
|
||||||
:key="index"
|
|
||||||
class="inventory-slot"
|
|
||||||
:class="{ 'selected': selectedIndex === index, 'empty': !item }"
|
|
||||||
:draggable="!!item"
|
|
||||||
@dragstart="handleDragStart(index, $event)"
|
|
||||||
@dragover.prevent
|
|
||||||
@drop="handleDrop(index)"
|
|
||||||
@click.stop="selectItem(index)"
|
|
||||||
@mouseenter="item ? handleMouseEnter(item, $event) : null"
|
|
||||||
@mouseleave="handleMouseLeave"
|
|
||||||
@dblclick="item ? useItem() : null"
|
|
||||||
>
|
|
||||||
<template v-if="item">
|
|
||||||
<div class="item-icon" :class="item.iconClass"></div>
|
|
||||||
<div class="item-count" v-if="item.count > 1">x{{ item.count }}</div>
|
|
||||||
<div class="equipped-badge" v-if="isEquipped(item)">E</div>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Floating Tooltip -->
|
|
||||||
<div
|
|
||||||
v-if="hoveredItem"
|
|
||||||
class="floating-tooltip"
|
|
||||||
:style="tooltipStyle"
|
|
||||||
@mouseenter="cancelHideTooltip"
|
|
||||||
@mouseleave="handleMouseLeave"
|
|
||||||
>
|
|
||||||
<div class="tooltip-name">{{ hoveredItem.name }}</div>
|
|
||||||
<div class="tooltip-desc">{{ hoveredItem.description }}</div>
|
|
||||||
<div class="tooltip-footer">
|
|
||||||
<div class="tooltip-hint">雙擊使用</div>
|
|
||||||
<button class="tooltip-delete-btn" @click.stop="handleDeleteItem(hoveredItem)">
|
|
||||||
<div class="trash-icon-small"></div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, computed } from 'vue';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
inventory: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
},
|
|
||||||
equippedItems: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits(['close', 'use-item', 'update:inventory']);
|
|
||||||
|
|
||||||
const selectedIndex = ref(-1);
|
|
||||||
const draggedIndex = ref(null);
|
|
||||||
const isDragging = ref(false);
|
|
||||||
|
|
||||||
const items = computed(() => props.inventory);
|
|
||||||
const selectedItem = computed(() => {
|
|
||||||
if (selectedIndex.value >= 0 && selectedIndex.value < items.value.length) {
|
|
||||||
return items.value[selectedIndex.value];
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
});
|
|
||||||
|
|
||||||
function selectItem(index) {
|
|
||||||
if (items.value[index]) {
|
|
||||||
selectedIndex.value = index;
|
|
||||||
} else {
|
|
||||||
selectedIndex.value = -1;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// Drag and Drop Logic
|
|
||||||
function handleDragStart(index, event) {
|
|
||||||
if (!items.value[index]) return;
|
|
||||||
draggedIndex.value = index;
|
|
||||||
isDragging.value = true;
|
|
||||||
// Set drag image or effect if needed
|
|
||||||
event.dataTransfer.effectAllowed = 'move';
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleDrop(targetIndex) {
|
|
||||||
isDragging.value = false;
|
|
||||||
if (draggedIndex.value === null) return;
|
|
||||||
|
|
||||||
const newInventory = [...items.value];
|
|
||||||
const draggedItem = newInventory[draggedIndex.value];
|
|
||||||
const targetItem = newInventory[targetIndex];
|
|
||||||
|
|
||||||
// Swap items
|
|
||||||
newInventory[draggedIndex.value] = targetItem;
|
|
||||||
newInventory[targetIndex] = draggedItem;
|
|
||||||
|
|
||||||
emit('update:inventory', newInventory);
|
|
||||||
draggedIndex.value = null;
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleDeleteItem(item) {
|
|
||||||
const index = items.value.indexOf(item);
|
|
||||||
if (index !== -1) {
|
|
||||||
const newInventory = [...items.value];
|
|
||||||
newInventory[index] = null;
|
|
||||||
emit('update:inventory', newInventory);
|
|
||||||
|
|
||||||
// Clear hover if deleted
|
|
||||||
if (hoveredItem.value === item) {
|
|
||||||
hoveredItem.value = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function useItem() {
|
|
||||||
// Use selected item if available, otherwise use hovered item (for double click)
|
|
||||||
const itemToUse = selectedItem.value || hoveredItem.value;
|
|
||||||
if (itemToUse) {
|
|
||||||
emit('use-item', itemToUse);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function isEquipped(item) {
|
|
||||||
return props.equippedItems.includes(item.id);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Tooltip Logic
|
|
||||||
const hoveredItem = ref(null);
|
|
||||||
const tooltipStyle = ref({ top: '0px', left: '0px' });
|
|
||||||
let hideTooltipTimeout = null;
|
|
||||||
|
|
||||||
function handleMouseEnter(item, event) {
|
|
||||||
cancelHideTooltip();
|
|
||||||
hoveredItem.value = item;
|
|
||||||
updateTooltipPosition(event);
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleMouseLeave() {
|
|
||||||
// Delay hiding to allow moving to tooltip
|
|
||||||
hideTooltipTimeout = setTimeout(() => {
|
|
||||||
hoveredItem.value = null;
|
|
||||||
}, 200);
|
|
||||||
}
|
|
||||||
|
|
||||||
function cancelHideTooltip() {
|
|
||||||
if (hideTooltipTimeout) {
|
|
||||||
clearTimeout(hideTooltipTimeout);
|
|
||||||
hideTooltipTimeout = null;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateTooltipPosition(event) {
|
|
||||||
const rect = event.target.getBoundingClientRect();
|
|
||||||
const tooltipWidth = 150; // Estimated width
|
|
||||||
const tooltipHeight = 80; // Estimated height
|
|
||||||
|
|
||||||
let top = rect.top - 10;
|
|
||||||
let left = rect.left + rect.width / 2;
|
|
||||||
let transform = 'translate(-50%, -100%)';
|
|
||||||
|
|
||||||
// Check top boundary
|
|
||||||
if (top < tooltipHeight) {
|
|
||||||
// Show below if not enough space above
|
|
||||||
top = rect.bottom + 10;
|
|
||||||
transform = 'translate(-50%, 0)';
|
|
||||||
}
|
|
||||||
|
|
||||||
// Check left/right boundary
|
|
||||||
const viewportWidth = window.innerWidth;
|
|
||||||
if (left - tooltipWidth / 2 < 0) {
|
|
||||||
left = tooltipWidth / 2 + 10;
|
|
||||||
} else if (left + tooltipWidth / 2 > viewportWidth) {
|
|
||||||
left = viewportWidth - tooltipWidth / 2 - 10;
|
|
||||||
}
|
|
||||||
|
|
||||||
tooltipStyle.value = {
|
|
||||||
top: top + 'px',
|
|
||||||
left: left + 'px',
|
|
||||||
transform: transform
|
|
||||||
};
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
|
|
||||||
|
|
||||||
.inventory-screen {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: rgba(0, 0, 0, 0.8);
|
|
||||||
z-index: 100;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inventory-container {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: #f0d09c;
|
|
||||||
border: none;
|
|
||||||
padding: 12px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.screen-title {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 20px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #3d2f1f;
|
|
||||||
border-bottom: 2px dashed #8b4513;
|
|
||||||
padding-bottom: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inventory-grid {
|
|
||||||
display: grid;
|
|
||||||
grid-template-columns: repeat(4, 1fr);
|
|
||||||
gap: 4px;
|
|
||||||
background: #e0b070;
|
|
||||||
padding: 4px;
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 2px solid #c49454;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inventory-slot {
|
|
||||||
aspect-ratio: 1;
|
|
||||||
background: #f8e8c8;
|
|
||||||
border: 2px solid #c49454;
|
|
||||||
border-radius: 4px;
|
|
||||||
position: relative;
|
|
||||||
cursor: pointer;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
transition: all 0.1s;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inventory-slot:hover {
|
|
||||||
background: #fff;
|
|
||||||
transform: translateY(-1px);
|
|
||||||
}
|
|
||||||
|
|
||||||
.inventory-slot.selected {
|
|
||||||
border-color: #d32f2f;
|
|
||||||
background: #fff;
|
|
||||||
box-shadow: 0 0 0 2px #d32f2f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inventory-slot.empty {
|
|
||||||
background: rgba(0,0,0,0.05);
|
|
||||||
border-color: rgba(0,0,0,0.1);
|
|
||||||
cursor: default;
|
|
||||||
}
|
|
||||||
|
|
||||||
.inventory-slot.empty:hover {
|
|
||||||
background: rgba(0,0,0,0.05);
|
|
||||||
transform: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-count {
|
|
||||||
position: absolute;
|
|
||||||
bottom: 2px;
|
|
||||||
right: 2px;
|
|
||||||
font-size: 10px;
|
|
||||||
color: #333;
|
|
||||||
background: rgba(255,255,255,0.8);
|
|
||||||
padding: 0 2px;
|
|
||||||
border-radius: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.equipped-badge {
|
|
||||||
position: absolute;
|
|
||||||
top: 2px;
|
|
||||||
right: 2px;
|
|
||||||
font-size: 10px;
|
|
||||||
color: #fff;
|
|
||||||
background: #4caf50;
|
|
||||||
padding: 0 3px;
|
|
||||||
border-radius: 2px;
|
|
||||||
font-weight: bold;
|
|
||||||
box-shadow: 0 1px 2px rgba(0,0,0,0.3);
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
/* Item Icons (CSS Shapes) */
|
|
||||||
.icon-cookie::before {
|
|
||||||
content: '';
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
background: #d4a373;
|
|
||||||
border-radius: 50%;
|
|
||||||
display: block;
|
|
||||||
box-shadow: inset -2px -2px 0 #8b4513;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-water::before {
|
|
||||||
content: '';
|
|
||||||
width: 12px;
|
|
||||||
height: 16px;
|
|
||||||
background: #4fc3f7;
|
|
||||||
border-radius: 40% 40% 40% 40% / 60% 60% 40% 40%;
|
|
||||||
display: block;
|
|
||||||
box-shadow: inset -2px -2px 0 #0288d1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-amulet::before {
|
|
||||||
content: '';
|
|
||||||
width: 14px;
|
|
||||||
height: 18px;
|
|
||||||
background: #ffeb3b;
|
|
||||||
border: 1px solid #fbc02d;
|
|
||||||
display: block;
|
|
||||||
box-shadow: 0 2px 0 rgba(0,0,0,0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-sunglasses::before {
|
|
||||||
content: '';
|
|
||||||
width: 18px;
|
|
||||||
height: 8px;
|
|
||||||
background: #333;
|
|
||||||
border-radius: 2px;
|
|
||||||
display: block;
|
|
||||||
box-shadow:
|
|
||||||
inset 1px 1px 0 #555,
|
|
||||||
4px 0 0 #000,
|
|
||||||
-4px 0 0 #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Floating Tooltip */
|
|
||||||
.floating-tooltip {
|
|
||||||
position: fixed; /* Use fixed to position relative to viewport */
|
|
||||||
background: rgba(0, 0, 0, 0.9);
|
|
||||||
border: 1px solid #fff;
|
|
||||||
padding: 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
/* pointer-events: none; <-- Removed to allow clicking button */
|
|
||||||
z-index: 200; /* Above everything */
|
|
||||||
min-width: 120px;
|
|
||||||
max-width: 200px;
|
|
||||||
box-shadow: 0 4px 8px rgba(0,0,0,0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip-name {
|
|
||||||
color: #ffcc00;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 12px;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip-desc {
|
|
||||||
color: #fff;
|
|
||||||
font-size: 10px;
|
|
||||||
line-height: 1.3;
|
|
||||||
margin-bottom: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip-footer {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
margin-top: 4px;
|
|
||||||
padding-top: 4px;
|
|
||||||
border-top: 1px dashed #555;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip-hint {
|
|
||||||
color: #aaa;
|
|
||||||
font-size: 9px;
|
|
||||||
font-style: italic;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip-delete-btn {
|
|
||||||
background: #d32f2f;
|
|
||||||
border: 1px solid #b71c1c;
|
|
||||||
border-radius: 2px;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
cursor: pointer;
|
|
||||||
padding: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip-delete-btn:hover {
|
|
||||||
background: #f44336;
|
|
||||||
}
|
|
||||||
|
|
||||||
.trash-icon-small {
|
|
||||||
width: 10px;
|
|
||||||
height: 10px;
|
|
||||||
background: #fff;
|
|
||||||
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E") no-repeat center;
|
|
||||||
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z'/%3E%3C/svg%3E") no-repeat center;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,333 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="jiaobei-overlay">
|
|
||||||
<div class="content">
|
|
||||||
|
|
||||||
<!-- 動畫區域 -->
|
|
||||||
<div class="blocks-container" :class="{ 'tossing': isTossing }">
|
|
||||||
<!-- 左筊杯 -->
|
|
||||||
<div class="block block-left" :class="leftBlockClass"></div>
|
|
||||||
<!-- 右筊杯 -->
|
|
||||||
<div class="block block-right" :class="rightBlockClass"></div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 文字狀態 -->
|
|
||||||
<div class="status-text pixel-font">
|
|
||||||
<span v-if="isTossing">
|
|
||||||
{{ mode === 'fortune' ? '擲筊確認中...' : '擲筊中...' }}
|
|
||||||
</span>
|
|
||||||
<template v-else>
|
|
||||||
<span class="result-text" :class="resultType">{{ resultText }}</span>
|
|
||||||
<span v-if="mode === 'fortune' && resultType === 'saint'" class="sub-text">
|
|
||||||
(連續 {{ consecutiveCount }}/3)
|
|
||||||
</span>
|
|
||||||
<span v-if="mode === 'fortune' && resultType !== 'saint'" class="sub-text">
|
|
||||||
需連續三次聖筊
|
|
||||||
</span>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 操作按鈕 (結果出來後顯示) -->
|
|
||||||
<div v-if="!isTossing" class="action-buttons">
|
|
||||||
<!-- 一般模式 -->
|
|
||||||
<template v-if="mode === 'normal'">
|
|
||||||
<button class="pixel-btn retry-btn" @click="startToss">再一次</button>
|
|
||||||
<button class="pixel-btn close-btn" @click="handleClose">關閉</button>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 求籤模式 -->
|
|
||||||
<template v-else-if="mode === 'fortune'">
|
|
||||||
<!-- 失敗 (非聖筊) -->
|
|
||||||
<button v-if="resultType !== 'saint'" class="pixel-btn close-btn" @click="handleRetryFortune">重新求籤</button>
|
|
||||||
|
|
||||||
<!-- 成功 (聖筊) -->
|
|
||||||
<template v-else>
|
|
||||||
<button v-if="consecutiveCount < 2" class="pixel-btn retry-btn" @click="startToss">繼續擲筊</button>
|
|
||||||
<button v-else class="pixel-btn retry-btn" @click="$emit('finish-fortune')">查看籤詩</button>
|
|
||||||
</template>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<!-- 招魂模式 -->
|
|
||||||
<template v-else-if="mode === 'resurrect'">
|
|
||||||
<button class="pixel-btn retry-btn" @click="$emit('resurrect-confirm')">確認</button>
|
|
||||||
</template>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, computed, onMounted } from 'vue';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
mode: {
|
|
||||||
type: String,
|
|
||||||
default: 'normal' // 'normal' | 'fortune'
|
|
||||||
},
|
|
||||||
consecutiveCount: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const emit = defineEmits(['close', 'result', 'retry-fortune', 'finish-fortune']);
|
|
||||||
|
|
||||||
const isTossing = ref(true);
|
|
||||||
const resultLeft = ref('round');
|
|
||||||
const resultRight = ref('round');
|
|
||||||
const resultType = ref('');
|
|
||||||
const resultText = ref('');
|
|
||||||
|
|
||||||
const leftBlockClass = computed(() => {
|
|
||||||
if (isTossing.value) return 'anim-spin';
|
|
||||||
return resultLeft.value === 'round' ? 'style-round' : 'style-flat';
|
|
||||||
});
|
|
||||||
|
|
||||||
const rightBlockClass = computed(() => {
|
|
||||||
if (isTossing.value) return 'anim-spin-reverse';
|
|
||||||
return resultRight.value === 'round' ? 'style-round' : 'style-flat';
|
|
||||||
});
|
|
||||||
|
|
||||||
function startToss() {
|
|
||||||
isTossing.value = true;
|
|
||||||
resultType.value = '';
|
|
||||||
resultText.value = '';
|
|
||||||
|
|
||||||
setTimeout(() => {
|
|
||||||
calculateResult();
|
|
||||||
isTossing.value = false;
|
|
||||||
}, 1500);
|
|
||||||
}
|
|
||||||
|
|
||||||
function calculateResult() {
|
|
||||||
const isLeftFlat = Math.random() > 0.5;
|
|
||||||
const isRightFlat = Math.random() > 0.5;
|
|
||||||
|
|
||||||
resultLeft.value = isLeftFlat ? 'flat' : 'round';
|
|
||||||
resultRight.value = isRightFlat ? 'flat' : 'round';
|
|
||||||
|
|
||||||
if (isLeftFlat !== isRightFlat) {
|
|
||||||
resultType.value = 'saint';
|
|
||||||
resultText.value = '聖筊';
|
|
||||||
} else if (isLeftFlat && isRightFlat) {
|
|
||||||
resultType.value = 'laugh';
|
|
||||||
resultText.value = '笑筊';
|
|
||||||
} else {
|
|
||||||
resultType.value = 'yin';
|
|
||||||
resultText.value = '陰筊';
|
|
||||||
}
|
|
||||||
|
|
||||||
emit('result', resultType.value);
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleClose() {
|
|
||||||
emit('close');
|
|
||||||
}
|
|
||||||
|
|
||||||
function handleRetryFortune() {
|
|
||||||
emit('retry-fortune');
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
startToss();
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');
|
|
||||||
|
|
||||||
.jiaobei-overlay {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.85);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 200;
|
|
||||||
}
|
|
||||||
|
|
||||||
.content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.blocks-container {
|
|
||||||
position: relative;
|
|
||||||
width: 80px;
|
|
||||||
height: 40px;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.block {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
position: relative;
|
|
||||||
transition: all 0.3s;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- 像素圖樣式 (保持不變) --- */
|
|
||||||
.style-round::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 2px;
|
|
||||||
height: 2px;
|
|
||||||
background: #d4522e;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%) scale(1.2);
|
|
||||||
box-shadow:
|
|
||||||
-6px -4px 0 #d4522e, -4px -4px 0 #d4522e, -2px -4px 0 #d4522e,
|
|
||||||
-8px -2px 0 #d4522e, -6px -2px 0 #ff7f50, -4px -2px 0 #d4522e, -2px -2px 0 #d4522e, 0px -2px 0 #d4522e, 2px -2px 0 #d4522e,
|
|
||||||
-8px 0px 0 #d4522e, -6px 0px 0 #d4522e, -4px 0px 0 #d4522e, -2px 0px 0 #d4522e, 0px 0px 0 #d4522e, 2px 0px 0 #d4522e,
|
|
||||||
-6px 2px 0 #d4522e, -4px 2px 0 #d4522e, -2px 2px 0 #d4522e, 0px 2px 0 #d4522e,
|
|
||||||
-4px 4px 0 #a03010;
|
|
||||||
}
|
|
||||||
|
|
||||||
.style-flat::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 2px;
|
|
||||||
height: 2px;
|
|
||||||
background: #f0d09c;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%) scale(1.2);
|
|
||||||
box-shadow:
|
|
||||||
-6px -4px 0 #f0d09c, -4px -4px 0 #f0d09c, -2px -4px 0 #f0d09c,
|
|
||||||
-8px -2px 0 #f0d09c, -6px -2px 0 #f0d09c, -4px -2px 0 #e0b070, -2px -2px 0 #f0d09c, 0px -2px 0 #f0d09c, 2px -2px 0 #f0d09c,
|
|
||||||
-8px 0px 0 #f0d09c, -6px 0px 0 #f0d09c, -4px 0px 0 #f0d09c, -2px 0px 0 #f0d09c, 0px 0px 0 #f0d09c, 2px 0px 0 #f0d09c,
|
|
||||||
-6px 2px 0 #f0d09c, -4px 2px 0 #f0d09c, -2px 2px 0 #f0d09c, 0px 2px 0 #f0d09c,
|
|
||||||
-4px 4px 0 #c49454;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anim-spin::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 2px;
|
|
||||||
height: 2px;
|
|
||||||
background: #d4522e;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%) scale(1.2);
|
|
||||||
animation: spin 0.3s infinite linear;
|
|
||||||
box-shadow:
|
|
||||||
-4px -4px 0 #d4522e, 0px -4px 0 #f0d09c, 4px -4px 0 #d4522e,
|
|
||||||
-4px 0px 0 #f0d09c, 0px 0px 0 #d4522e, 4px 0px 0 #f0d09c,
|
|
||||||
-4px 4px 0 #d4522e, 0px 4px 0 #f0d09c, 4px 4px 0 #d4522e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.anim-spin-reverse::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 2px;
|
|
||||||
height: 2px;
|
|
||||||
background: #d4522e;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%) scale(1.2);
|
|
||||||
animation: spin-reverse 0.3s infinite linear;
|
|
||||||
box-shadow:
|
|
||||||
-4px -4px 0 #f0d09c, 0px -4px 0 #d4522e, 4px -4px 0 #f0d09c,
|
|
||||||
-4px 0px 0 #d4522e, 0px 0px 0 #f0d09c, 4px 0px 0 #d4522e,
|
|
||||||
-4px 4px 0 #f0d09c, 0px 4px 0 #d4522e, 4px 4px 0 #f0d09c;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin {
|
|
||||||
0% { transform: translate(-50%, -50%) scale(1.2) rotate(0deg); }
|
|
||||||
100% { transform: translate(-50%, -50%) scale(1.2) rotate(360deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes spin-reverse {
|
|
||||||
0% { transform: translate(-50%, -50%) scale(1.2) rotate(0deg); }
|
|
||||||
100% { transform: translate(-50%, -50%) scale(1.2) rotate(-360deg); }
|
|
||||||
}
|
|
||||||
|
|
||||||
.tossing .block {
|
|
||||||
animation: bounce 0.5s infinite alternate;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes bounce {
|
|
||||||
0% { transform: translateY(0); }
|
|
||||||
100% { transform: translateY(-10px); }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* --- 文字與按鈕樣式 --- */
|
|
||||||
|
|
||||||
.pixel-font {
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.status-text {
|
|
||||||
font-size: 12px; /* 縮小字體 */
|
|
||||||
font-weight: bold;
|
|
||||||
color: #fff;
|
|
||||||
text-align: center;
|
|
||||||
min-height: 20px;
|
|
||||||
text-shadow: 1px 1px 0 #000;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
line-height: 1.2;
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-text {
|
|
||||||
font-size: 16px; /* 縮小結果字體 */
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.result-text.saint { color: #ffcc00; }
|
|
||||||
.result-text.laugh { color: #88ff88; }
|
|
||||||
.result-text.yin { color: #ff8888; }
|
|
||||||
|
|
||||||
.sub-text {
|
|
||||||
font-size: 10px;
|
|
||||||
color: #ccc;
|
|
||||||
margin-top: 2px;
|
|
||||||
font-weight: normal;
|
|
||||||
}
|
|
||||||
|
|
||||||
.action-buttons {
|
|
||||||
display: flex;
|
|
||||||
gap: 8px;
|
|
||||||
margin-top: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pixel-btn {
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-size: 10px; /* 縮小按鈕字體 */
|
|
||||||
padding: 4px 8px;
|
|
||||||
border: 2px solid #fff;
|
|
||||||
background: transparent;
|
|
||||||
color: #fff;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.1s;
|
|
||||||
text-shadow: 1px 1px 0 #000;
|
|
||||||
box-shadow: 2px 2px 0 rgba(0,0,0,0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pixel-btn:hover {
|
|
||||||
transform: translateY(-1px);
|
|
||||||
background: rgba(255,255,255,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pixel-btn:active {
|
|
||||||
transform: translateY(1px);
|
|
||||||
box-shadow: 1px 1px 0 rgba(0,0,0,0.5);
|
|
||||||
}
|
|
||||||
|
|
||||||
.retry-btn {
|
|
||||||
border-color: #ffcc00;
|
|
||||||
color: #ffcc00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn {
|
|
||||||
border-color: #aaa;
|
|
||||||
color: #aaa;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,773 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="pet-info-screen" @click="$emit('close')">
|
|
||||||
<div class="info-container">
|
|
||||||
<!-- Tabs -->
|
|
||||||
<div class="info-tabs" @click.stop>
|
|
||||||
<button
|
|
||||||
class="tab-btn"
|
|
||||||
:class="{ active: activeTab === 0 }"
|
|
||||||
@click="activeTab = 0"
|
|
||||||
>
|
|
||||||
狀態
|
|
||||||
</button>
|
|
||||||
<button
|
|
||||||
class="tab-btn"
|
|
||||||
:class="{ active: activeTab === 1 }"
|
|
||||||
@click="activeTab = 1"
|
|
||||||
>
|
|
||||||
成就
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Close Button Removed -->
|
|
||||||
|
|
||||||
<!-- Stats View -->
|
|
||||||
<div v-if="activeTab === 0" class="stats-view">
|
|
||||||
<!-- Stats Bars at Top (Pixel Style) -->
|
|
||||||
<div class="stats-section">
|
|
||||||
<div class="stat-item">
|
|
||||||
<div class="stat-label-row">
|
|
||||||
<span class="stat-label">飢餓</span>
|
|
||||||
<span class="stat-value">{{ displayHunger }}%</span>
|
|
||||||
</div>
|
|
||||||
<div class="pixel-bar">
|
|
||||||
<div
|
|
||||||
v-for="i in 10"
|
|
||||||
:key="'hunger-' + i"
|
|
||||||
class="pixel-block"
|
|
||||||
:class="{
|
|
||||||
'filled': i <= Math.floor(displayHunger / 10),
|
|
||||||
'color-orange': i <= Math.floor(displayHunger / 10)
|
|
||||||
}"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-item">
|
|
||||||
<div class="stat-label-row">
|
|
||||||
<span class="stat-label">快樂</span>
|
|
||||||
<span class="stat-value">{{ displayHappiness }}%</span>
|
|
||||||
</div>
|
|
||||||
<div class="pixel-bar">
|
|
||||||
<div
|
|
||||||
v-for="i in 10"
|
|
||||||
:key="'happiness-' + i"
|
|
||||||
class="pixel-block"
|
|
||||||
:class="{
|
|
||||||
'filled': i <= Math.floor(displayHappiness / 10),
|
|
||||||
'color-yellow': i <= Math.floor(displayHappiness / 10)
|
|
||||||
}"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="stat-item">
|
|
||||||
<div class="stat-label-row">
|
|
||||||
<span class="stat-label">健康</span>
|
|
||||||
<span class="stat-value">{{ displayHealth }}%</span>
|
|
||||||
</div>
|
|
||||||
<div class="pixel-bar">
|
|
||||||
<div
|
|
||||||
v-for="i in 10"
|
|
||||||
:key="'health-' + i"
|
|
||||||
class="pixel-block pixel-heart"
|
|
||||||
:class="{
|
|
||||||
'filled': i <= Math.floor(displayHealth / 10),
|
|
||||||
'color-red': i <= Math.floor(displayHealth / 10)
|
|
||||||
}"
|
|
||||||
></div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info-content">
|
|
||||||
<div class="info-title">═ 寵物資料 ═</div>
|
|
||||||
|
|
||||||
<div class="info-item">
|
|
||||||
<span class="label">名字</span>
|
|
||||||
<span class="value">{{ petName }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-item">
|
|
||||||
<span class="label">階段</span>
|
|
||||||
<span class="value">{{ stageText }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-item">
|
|
||||||
<span class="label">年齡</span>
|
|
||||||
<span class="value">{{ age }}歲</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-item">
|
|
||||||
<span class="label">身高</span>
|
|
||||||
<span class="value">{{ height }}cm</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-item">
|
|
||||||
<span class="label">體重</span>
|
|
||||||
<span class="value">{{ weight }}kg</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info-divider"></div>
|
|
||||||
|
|
||||||
<!-- Destiny -->
|
|
||||||
<div class="info-item destiny-item" v-if="destiny">
|
|
||||||
<span class="label">命格</span>
|
|
||||||
<div class="destiny-content">
|
|
||||||
<span class="value destiny-name">{{ destiny.name }}</span>
|
|
||||||
<span class="destiny-desc">{{ destiny.description }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div class="info-item" v-else>
|
|
||||||
<span class="label">命格</span>
|
|
||||||
<span class="value">???</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info-divider"></div>
|
|
||||||
|
|
||||||
<!-- V2 Stats -->
|
|
||||||
<div class="info-item">
|
|
||||||
<span class="label">力量 (STR)</span>
|
|
||||||
<span class="value">{{ str }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-item">
|
|
||||||
<span class="label">智力 (INT)</span>
|
|
||||||
<span class="value">{{ int }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-item">
|
|
||||||
<span class="label">敏捷 (DEX)</span>
|
|
||||||
<span class="value">{{ dex }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-item">
|
|
||||||
<span class="label">世代</span>
|
|
||||||
<span class="value">第 {{ generation }} 代</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-item">
|
|
||||||
<span class="label">神明好感</span>
|
|
||||||
<span class="value">{{ deityFavor }}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div class="info-item">
|
|
||||||
<span class="label">HP</span>
|
|
||||||
<span class="value">{{ baseStats.hp }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-item">
|
|
||||||
<span class="label">攻擊</span>
|
|
||||||
<span class="value">{{ baseStats.attack }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-item">
|
|
||||||
<span class="label">防禦</span>
|
|
||||||
<span class="value">{{ baseStats.defense }}</span>
|
|
||||||
</div>
|
|
||||||
<div class="info-item">
|
|
||||||
<span class="label">速度</span>
|
|
||||||
<span class="value">{{ baseStats.speed }}</span>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Achievements View -->
|
|
||||||
<div v-if="activeTab === 1" class="achievements-view">
|
|
||||||
<div class="info-title">═ 成就列表 ═</div>
|
|
||||||
<div class="achievements-list">
|
|
||||||
<div
|
|
||||||
v-for="ach in achievements"
|
|
||||||
:key="ach.id"
|
|
||||||
class="achievement-item"
|
|
||||||
:class="{ unlocked: ach.unlocked }"
|
|
||||||
>
|
|
||||||
<div class="ach-icon">
|
|
||||||
<div v-if="ach.unlocked" :class="'pixel-icon-' + ach.id"></div>
|
|
||||||
<div v-else class="pixel-icon-locked"></div>
|
|
||||||
</div>
|
|
||||||
<div class="ach-info">
|
|
||||||
<div class="ach-name">{{ ach.name }}</div>
|
|
||||||
<div class="ach-desc">{{ ach.desc }}</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { computed, ref } from 'vue';
|
|
||||||
|
|
||||||
const props = defineProps({
|
|
||||||
petName: String,
|
|
||||||
stage: String,
|
|
||||||
poopCount: Number,
|
|
||||||
baseStats: Object,
|
|
||||||
hunger: {
|
|
||||||
type: Number,
|
|
||||||
default: 100
|
|
||||||
},
|
|
||||||
happiness: {
|
|
||||||
type: Number,
|
|
||||||
default: 100
|
|
||||||
},
|
|
||||||
health: {
|
|
||||||
type: Number,
|
|
||||||
default: 100
|
|
||||||
},
|
|
||||||
// v2 Stats
|
|
||||||
str: { type: Number, default: 0 },
|
|
||||||
int: { type: Number, default: 0 },
|
|
||||||
dex: { type: Number, default: 0 },
|
|
||||||
generation: { type: Number, default: 1 },
|
|
||||||
deityFavor: { type: Number, default: 0 },
|
|
||||||
destiny: { type: Object, default: null },
|
|
||||||
achievements: {
|
|
||||||
type: Array,
|
|
||||||
default: () => []
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
const activeTab = ref(0);
|
|
||||||
|
|
||||||
defineEmits(['close']);
|
|
||||||
|
|
||||||
// Display values (ceiling for bars)
|
|
||||||
const displayHunger = computed(() => Math.ceil(props.hunger));
|
|
||||||
const displayHappiness = computed(() => Math.ceil(props.happiness));
|
|
||||||
const displayHealth = computed(() => Math.ceil(props.health));
|
|
||||||
|
|
||||||
const stageText = computed(() => {
|
|
||||||
const stageMap = {
|
|
||||||
'egg': '蛋',
|
|
||||||
'baby': '幼年',
|
|
||||||
'child': '成長',
|
|
||||||
'adult': '成熟'
|
|
||||||
};
|
|
||||||
return stageMap[props.stage] || props.stage;
|
|
||||||
});
|
|
||||||
|
|
||||||
const age = computed(() => {
|
|
||||||
const ageMap = { 'egg': 0, 'baby': 1, 'child': 3, 'adult': 7 };
|
|
||||||
return ageMap[props.stage] || 0;
|
|
||||||
});
|
|
||||||
|
|
||||||
const height = computed(() => {
|
|
||||||
const heightMap = { 'egg': 5, 'baby': 15, 'child': 30, 'adult': 45 };
|
|
||||||
return heightMap[props.stage] || 30;
|
|
||||||
});
|
|
||||||
|
|
||||||
const weight = computed(() => {
|
|
||||||
const weightMap = { 'egg': 0.5, 'baby': 2, 'child': 5, 'adult': 8 };
|
|
||||||
return weightMap[props.stage] || 5;
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.pet-info-screen {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: #f0d09c;
|
|
||||||
z-index: 50;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
image-rendering: pixelated;
|
|
||||||
overflow-y: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-container {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
min-height: min-content;
|
|
||||||
position: relative; /* For absolute positioning of close button */
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn {
|
|
||||||
position: absolute;
|
|
||||||
top: 6px;
|
|
||||||
right: 6px;
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
background: #d32f2f;
|
|
||||||
border: 2px solid #8b4513;
|
|
||||||
color: white;
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 14px;
|
|
||||||
cursor: pointer;
|
|
||||||
z-index: 10;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
box-shadow: 0 2px 0 #8b4513;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn:active {
|
|
||||||
transform: translateY(2px);
|
|
||||||
box-shadow: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Tabs */
|
|
||||||
.info-tabs {
|
|
||||||
display: flex;
|
|
||||||
background: #c49454;
|
|
||||||
padding: 8px 6px 0 6px; /* Increased top padding */
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-btn {
|
|
||||||
flex: 1;
|
|
||||||
border: 2px solid transparent; /* Reserve space */
|
|
||||||
border-bottom: none;
|
|
||||||
background: #a67c43;
|
|
||||||
color: #3d2f1f;
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-size: 12px;
|
|
||||||
padding: 4px 0;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 4px 4px 0 0;
|
|
||||||
cursor: pointer;
|
|
||||||
position: relative;
|
|
||||||
top: 2px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
height: 32px;
|
|
||||||
outline: none; /* Remove blue focus ring */
|
|
||||||
}
|
|
||||||
|
|
||||||
.tab-btn.active {
|
|
||||||
background: #f0d09c; /* Match body bg */
|
|
||||||
font-weight: bold;
|
|
||||||
top: 0;
|
|
||||||
border-color: #8b6f47;
|
|
||||||
border-bottom: 2px solid #f0d09c; /* Blend with content */
|
|
||||||
z-index: 2;
|
|
||||||
height: 34px; /* Slightly taller to cover bottom gap */
|
|
||||||
margin-bottom: -2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-view, .achievements-view {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Stats Section - Pixel Style */
|
|
||||||
.stats-section {
|
|
||||||
padding: 12px 14px;
|
|
||||||
background: #c49454;
|
|
||||||
border-bottom: 3px solid #8b6f47;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-item {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-label-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-size: 11px;
|
|
||||||
color: #3d2f1f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-label {
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-value {
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pixel-bar {
|
|
||||||
display: flex;
|
|
||||||
gap: 3px;
|
|
||||||
padding: 0;
|
|
||||||
background: transparent;
|
|
||||||
border: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pixel-block {
|
|
||||||
width: 14px;
|
|
||||||
height: 14px;
|
|
||||||
background: rgba(139, 111, 71, 0.3);
|
|
||||||
border: 1px solid rgba(139, 111, 71, 0.5);
|
|
||||||
border-radius: 2px;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pixel-block.filled {
|
|
||||||
box-shadow:
|
|
||||||
inset 1px 1px 0 rgba(255, 255, 255, 0.4),
|
|
||||||
0 2px 2px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.pixel-block.color-orange.filled {
|
|
||||||
background: linear-gradient(135deg, #ff9966 0%, #ff6633 100%);
|
|
||||||
border-color: #cc4422;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pixel-block.color-yellow.filled {
|
|
||||||
background: linear-gradient(135deg, #ffdd66 0%, #ffcc33 100%);
|
|
||||||
border-color: #ccaa22;
|
|
||||||
}
|
|
||||||
|
|
||||||
.pixel-block.color-red.filled {
|
|
||||||
background: linear-gradient(135deg, #ff6666 0%, #ff3333 100%);
|
|
||||||
border-color: #cc2222;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Pixel Heart Shape */
|
|
||||||
.pixel-heart {
|
|
||||||
position: relative;
|
|
||||||
background: transparent !important;
|
|
||||||
border: none !important;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Empty heart outline */
|
|
||||||
.pixel-heart::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
background: transparent;
|
|
||||||
box-shadow:
|
|
||||||
/* Top bumps - outline only */
|
|
||||||
-3px -3px 0 0 #8b6f47,
|
|
||||||
-2px -3px 0 0 #8b6f47,
|
|
||||||
2px -3px 0 0 #8b6f47,
|
|
||||||
3px -3px 0 0 #8b6f47,
|
|
||||||
/* Upper sides */
|
|
||||||
-4px -2px 0 0 #8b6f47,
|
|
||||||
4px -2px 0 0 #8b6f47,
|
|
||||||
/* Middle sides */
|
|
||||||
-4px -1px 0 0 #8b6f47,
|
|
||||||
4px -1px 0 0 #8b6f47,
|
|
||||||
-4px 0px 0 0 #8b6f47,
|
|
||||||
4px 0px 0 0 #8b6f47,
|
|
||||||
/* Lower sides */
|
|
||||||
-3px 1px 0 0 #8b6f47,
|
|
||||||
3px 1px 0 0 #8b6f47,
|
|
||||||
-2px 2px 0 0 #8b6f47,
|
|
||||||
2px 2px 0 0 #8b6f47,
|
|
||||||
-1px 3px 0 0 #8b6f47,
|
|
||||||
1px 3px 0 0 #8b6f47,
|
|
||||||
/* Bottom point */
|
|
||||||
0px 4px 0 0 #8b6f47;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Filled heart */
|
|
||||||
.pixel-heart.filled::before {
|
|
||||||
box-shadow:
|
|
||||||
/* Top bumps */
|
|
||||||
-3px -3px 0 0 #cc2222,
|
|
||||||
-2px -3px 0 0 #cc2222,
|
|
||||||
2px -3px 0 0 #cc2222,
|
|
||||||
3px -3px 0 0 #cc2222,
|
|
||||||
/* Second row */
|
|
||||||
-4px -2px 0 0 #ff3333,
|
|
||||||
-3px -2px 0 0 #ff6666,
|
|
||||||
-2px -2px 0 0 #ff6666,
|
|
||||||
-1px -2px 0 0 #ff6666,
|
|
||||||
0px -2px 0 0 #ff6666,
|
|
||||||
1px -2px 0 0 #ff6666,
|
|
||||||
2px -2px 0 0 #ff6666,
|
|
||||||
3px -2px 0 0 #ff6666,
|
|
||||||
4px -2px 0 0 #ff3333,
|
|
||||||
/* Third row */
|
|
||||||
-4px -1px 0 0 #ff3333,
|
|
||||||
-3px -1px 0 0 #ff6666,
|
|
||||||
-2px -1px 0 0 #ff8888,
|
|
||||||
-1px -1px 0 0 #ff8888,
|
|
||||||
0px -1px 0 0 #ff8888,
|
|
||||||
1px -1px 0 0 #ff8888,
|
|
||||||
2px -1px 0 0 #ff8888,
|
|
||||||
3px -1px 0 0 #ff6666,
|
|
||||||
4px -1px 0 0 #ff3333,
|
|
||||||
/* Middle row */
|
|
||||||
-4px 0px 0 0 #ff3333,
|
|
||||||
-3px 0px 0 0 #ff6666,
|
|
||||||
-2px 0px 0 0 #ff6666,
|
|
||||||
-1px 0px 0 0 #ff6666,
|
|
||||||
0px 0px 0 0 #ff6666,
|
|
||||||
1px 0px 0 0 #ff6666,
|
|
||||||
2px 0px 0 0 #ff6666,
|
|
||||||
3px 0px 0 0 #ff6666,
|
|
||||||
4px 0px 0 0 #ff3333,
|
|
||||||
/* Lower rows */
|
|
||||||
-3px 1px 0 0 #ff3333,
|
|
||||||
-2px 1px 0 0 #ff3333,
|
|
||||||
-1px 1px 0 0 #ff3333,
|
|
||||||
0px 1px 0 0 #ff3333,
|
|
||||||
1px 1px 0 0 #ff3333,
|
|
||||||
2px 1px 0 0 #ff3333,
|
|
||||||
3px 1px 0 0 #ff3333,
|
|
||||||
-2px 2px 0 0 #ff3333,
|
|
||||||
-1px 2px 0 0 #ff3333,
|
|
||||||
0px 2px 0 0 #ff3333,
|
|
||||||
1px 2px 0 0 #ff3333,
|
|
||||||
2px 2px 0 0 #ff3333,
|
|
||||||
-1px 3px 0 0 #cc2222,
|
|
||||||
0px 3px 0 0 #cc2222,
|
|
||||||
1px 3px 0 0 #cc2222,
|
|
||||||
/* Bottom point */
|
|
||||||
0px 4px 0 0 #cc2222;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-content {
|
|
||||||
padding: 12px 10px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 5px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-title {
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #3d2f1f;
|
|
||||||
margin-bottom: 6px;
|
|
||||||
padding-bottom: 6px;
|
|
||||||
border-bottom: 2px solid #c49454;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-divider {
|
|
||||||
height: 2px;
|
|
||||||
background: #c49454;
|
|
||||||
margin: 6px 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-item {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 6px 10px;
|
|
||||||
background: #e0b070;
|
|
||||||
border: 2px solid #c49454;
|
|
||||||
box-shadow:
|
|
||||||
inset 1px 1px 0 #f0d09c,
|
|
||||||
inset -1px -1px 0 #8b6f47;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-size: 11px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #3d2f1f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-size: 11px;
|
|
||||||
color: #3d2f1f;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
.value {
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-size: 11px;
|
|
||||||
color: #3d2f1f;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.destiny-item {
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: flex-start;
|
|
||||||
gap: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.destiny-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
width: 100%;
|
|
||||||
padding-left: 4px;
|
|
||||||
gap: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.destiny-name {
|
|
||||||
color: #d32f2f; /* Red for emphasis */
|
|
||||||
font-size: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.destiny-desc {
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-size: 10px;
|
|
||||||
color: #665544;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Achievements */
|
|
||||||
.achievements-view {
|
|
||||||
padding: 12px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.achievements-list {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.achievement-item {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 10px;
|
|
||||||
padding: 8px;
|
|
||||||
background: #dcb880;
|
|
||||||
border: 2px solid #c49454;
|
|
||||||
border-radius: 4px;
|
|
||||||
opacity: 0.7;
|
|
||||||
}
|
|
||||||
|
|
||||||
.achievement-item.unlocked {
|
|
||||||
background: #fff8e0;
|
|
||||||
border-color: #ffd700;
|
|
||||||
opacity: 1;
|
|
||||||
box-shadow: 0 2px 4px rgba(0,0,0,0.1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.ach-icon {
|
|
||||||
font-size: 20px;
|
|
||||||
width: 30px;
|
|
||||||
text-align: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ach-info {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ach-name {
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-weight: bold;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #3d2f1f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ach-desc {
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-size: 10px;
|
|
||||||
color: #665544;
|
|
||||||
}
|
|
||||||
/* Pixel Icons for Achievements */
|
|
||||||
.ach-icon {
|
|
||||||
width: 32px;
|
|
||||||
height: 32px;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
overflow: hidden;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Common Pixel Art Base */
|
|
||||||
.pixel-art {
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
background: transparent;
|
|
||||||
transform: scale(2); /* Scale up the 1px pixels */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Locked Icon (Padlock) */
|
|
||||||
.pixel-icon-locked {
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
background: transparent;
|
|
||||||
transform: scale(2);
|
|
||||||
color: #8b6f47;
|
|
||||||
box-shadow:
|
|
||||||
/* Body */
|
|
||||||
-3px 0, -2px 0, -1px 0, 0px 0, 1px 0, 2px 0, 3px 0,
|
|
||||||
-3px 1px, -2px 1px, -1px 1px, 0px 1px, 1px 1px, 2px 1px, 3px 1px,
|
|
||||||
-3px 2px, -2px 2px, -1px 2px, 0px 2px, 1px 2px, 2px 2px, 3px 2px,
|
|
||||||
-3px 3px, -2px 3px, -1px 3px, 0px 3px, 1px 3px, 2px 3px, 3px 3px,
|
|
||||||
/* Shackle */
|
|
||||||
-2px -1px, 2px -1px,
|
|
||||||
-2px -2px, 2px -2px,
|
|
||||||
-1px -3px, 0px -3px, 1px -3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Newbie (Chick) - Yellow */
|
|
||||||
.pixel-icon-newbie {
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
background: transparent;
|
|
||||||
transform: scale(2);
|
|
||||||
box-shadow:
|
|
||||||
/* Top feathers */
|
|
||||||
0px -5px #ffe135,
|
|
||||||
/* Head */
|
|
||||||
-2px -4px #ffe135, -1px -4px #ffe135, 0px -4px #ffe135, 1px -4px #ffe135, 2px -4px #ffe135,
|
|
||||||
-3px -3px #ffe135, -2px -3px #ffe135, -1px -3px #ffe135, 0px -3px #ffe135, 1px -3px #ffe135, 2px -3px #ffe135, 3px -3px #ffe135,
|
|
||||||
-3px -2px #ffe135, -2px -2px #000, -1px -2px #ffe135, 0px -2px #ffe135, 1px -2px #ffe135, 2px -2px #000, 3px -2px #ffe135, /* Eyes */
|
|
||||||
-3px -1px #ffe135, -2px -1px #ff69b4, -1px -1px #ffe135, 0px -1px #ff8c00, 1px -1px #ffe135, 2px -1px #ff69b4, 3px -1px #ffe135, /* Cheeks & Beak */
|
|
||||||
/* Body */
|
|
||||||
-3px 0px #ffe135, -2px 0px #ffe135, -1px 0px #ffe135, 0px 0px #ffe135, 1px 0px #ffe135, 2px 0px #ffe135, 3px 0px #ffe135,
|
|
||||||
-2px 1px #ffe135, -1px 1px #ffe135, 0px 1px #ffe135, 1px 1px #ffe135, 2px 1px #ffe135,
|
|
||||||
/* Feet */
|
|
||||||
-2px 2px #ff8c00, 2px 2px #ff8c00;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Veteran (Mario Style) */
|
|
||||||
.pixel-icon-veteran {
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
background: transparent;
|
|
||||||
transform: scale(2);
|
|
||||||
box-shadow:
|
|
||||||
/* Hat */
|
|
||||||
-2px -6px #f00, -1px -6px #f00, 0px -6px #f00, 1px -6px #f00, 2px -6px #f00,
|
|
||||||
-3px -5px #f00, -2px -5px #f00, -1px -5px #f00, 0px -5px #f00, 1px -5px #f00, 2px -5px #f00, 3px -5px #f00,
|
|
||||||
/* Face */
|
|
||||||
-2px -4px #fc9, -1px -4px #fc9, 0px -4px #fc9, 1px -4px #fc9, 2px -4px #000, 3px -4px #fc9,
|
|
||||||
-3px -3px #fc9, -2px -3px #fc9, -1px -3px #fc9, 0px -3px #fc9, 1px -3px #000, 2px -3px #fc9, 3px -3px #fc9,
|
|
||||||
/* Mustache */
|
|
||||||
-1px -2px #000, 0px -2px #000, 1px -2px #000, 2px -2px #000,
|
|
||||||
/* Body */
|
|
||||||
-2px -1px #f00, -1px -1px #00f, 0px -1px #f00, 1px -1px #00f, 2px -1px #f00,
|
|
||||||
-2px 0px #f00, -1px 0px #00f, 0px 0px #00f, 1px 0px #00f, 2px 0px #f00,
|
|
||||||
-2px 1px #00f, -1px 1px #00f, 0px 1px #00f, 1px 1px #00f, 2px 1px #00f,
|
|
||||||
/* Shoes */
|
|
||||||
-2px 2px #8b4513, -1px 2px #8b4513, 1px 2px #8b4513, 2px 2px #8b4513;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Healthy (Donald Style) */
|
|
||||||
.pixel-icon-healthy {
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
background: transparent;
|
|
||||||
transform: scale(2);
|
|
||||||
box-shadow:
|
|
||||||
/* Hat */
|
|
||||||
-2px -6px #1e90ff, -1px -6px #1e90ff, 0px -6px #1e90ff, 1px -6px #1e90ff,
|
|
||||||
-3px -5px #000, -2px -5px #1e90ff, -1px -5px #1e90ff, 0px -5px #1e90ff, 1px -5px #1e90ff, 2px -5px #000,
|
|
||||||
/* Face */
|
|
||||||
-2px -4px #fff, -1px -4px #fff, 0px -4px #fff, 1px -4px #fff,
|
|
||||||
-3px -3px #fff, -2px -3px #00f, -1px -3px #fff, 0px -3px #fff, 1px -3px #00f, 2px -3px #fff, /* Eyes */
|
|
||||||
/* Beak */
|
|
||||||
-2px -2px #ffa500, -1px -2px #ffa500, 0px -2px #ffa500, 1px -2px #ffa500,
|
|
||||||
-1px -1px #ffa500, 0px -1px #ffa500,
|
|
||||||
/* Body (Sailor) */
|
|
||||||
-2px 0px #1e90ff, -1px 0px #1e90ff, 0px 0px #d00, 1px 0px #1e90ff, 2px 0px #1e90ff, /* Bowtie */
|
|
||||||
-2px 1px #fff, -1px 1px #fff, 0px 1px #fff, 1px 1px #fff, 2px 1px #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Happy (Heart) */
|
|
||||||
.pixel-icon-happy {
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
background: transparent;
|
|
||||||
transform: scale(2);
|
|
||||||
color: #ff1493;
|
|
||||||
box-shadow:
|
|
||||||
-2px -2px, -1px -2px, 1px -2px, 2px -2px,
|
|
||||||
-3px -1px, -2px -1px, -1px -1px, 0px -1px, 1px -1px, 2px -1px, 3px -1px,
|
|
||||||
-3px 0px, -2px 0px, -1px 0px, 0px 0px, 1px 0px, 2px 0px, 3px 0px,
|
|
||||||
-2px 1px, -1px 1px, 0px 1px, 1px 1px, 2px 1px,
|
|
||||||
-1px 2px, 0px 2px, 1px 2px,
|
|
||||||
0px 3px;
|
|
||||||
}
|
|
||||||
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,212 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="play-menu-overlay" @click.self="$emit('close')">
|
|
||||||
<div class="play-menu-container">
|
|
||||||
<h2 class="menu-title">選擇遊戲</h2>
|
|
||||||
|
|
||||||
<div class="game-options">
|
|
||||||
<button
|
|
||||||
class="game-option"
|
|
||||||
@click="selectGame('training')"
|
|
||||||
>
|
|
||||||
<div class="option-icon icon-training"></div>
|
|
||||||
<div class="option-name">訓練</div>
|
|
||||||
<div class="option-desc">攻擊訓練</div>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="game-option"
|
|
||||||
@click="selectGame('guessing')"
|
|
||||||
>
|
|
||||||
<div class="option-icon icon-rps"></div>
|
|
||||||
<div class="option-name">猜拳</div>
|
|
||||||
<div class="option-desc">剪刀石頭布</div>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<button
|
|
||||||
class="game-option"
|
|
||||||
@click="selectGame('ball')"
|
|
||||||
>
|
|
||||||
<div class="option-icon icon-ball"></div>
|
|
||||||
<div class="option-name">接球</div>
|
|
||||||
<div class="option-desc">反應小遊戲</div>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<button class="close-btn" @click="$emit('close')">取消</button>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
const emit = defineEmits(['close', 'select']);
|
|
||||||
|
|
||||||
function selectGame(gameType) {
|
|
||||||
emit('select', gameType);
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.play-menu-overlay {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(0, 0, 0, 0.7);
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
z-index: 100;
|
|
||||||
font-family: 'DotGothic16', sans-serif;
|
|
||||||
overflow: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.play-menu-container {
|
|
||||||
background: #f5f5dc;
|
|
||||||
border: 4px solid #8b4513;
|
|
||||||
border-radius: 12px;
|
|
||||||
padding: 15px;
|
|
||||||
min-width: 200px;
|
|
||||||
max-width: 90%;
|
|
||||||
max-height: 85%;
|
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
|
|
||||||
overflow-y: auto;
|
|
||||||
margin: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-title {
|
|
||||||
text-align: center;
|
|
||||||
font-size: 14px;
|
|
||||||
margin: 0 0 12px 0;
|
|
||||||
color: #8b4513;
|
|
||||||
}
|
|
||||||
|
|
||||||
.game-options {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
margin-bottom: 10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.game-option {
|
|
||||||
background: #fff;
|
|
||||||
border: 3px solid #8b4513;
|
|
||||||
border-radius: 8px;
|
|
||||||
padding: 10px;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: all 0.2s;
|
|
||||||
text-align: center;
|
|
||||||
font-family: 'DotGothic16', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.game-option:hover {
|
|
||||||
background: #fffacd;
|
|
||||||
transform: scale(1.05);
|
|
||||||
}
|
|
||||||
|
|
||||||
.game-option:active {
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
|
|
||||||
.option-icon {
|
|
||||||
width: 24px;
|
|
||||||
height: 24px;
|
|
||||||
margin: 0 auto 5px;
|
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Pixel Art Icons */
|
|
||||||
.icon-training::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
background: transparent;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%) scale(2);
|
|
||||||
box-shadow:
|
|
||||||
/* Explosion/Impact shape */
|
|
||||||
0 0 0 #ff0000,
|
|
||||||
-2px -2px 0 #ff4400, 2px -2px 0 #ff4400,
|
|
||||||
-3px 0 0 #ff6600, -2px 0 0 #ff4400, 0 0 0 #ff0000, 2px 0 0 #ff4400, 3px 0 0 #ff6600,
|
|
||||||
-2px 2px 0 #ff4400, 2px 2px 0 #ff4400,
|
|
||||||
/* Outer glow */
|
|
||||||
-4px -1px 0 #ffaa00, 4px -1px 0 #ffaa00,
|
|
||||||
-4px 1px 0 #ffaa00, 4px 1px 0 #ffaa00,
|
|
||||||
-1px -4px 0 #ffaa00, 1px -4px 0 #ffaa00,
|
|
||||||
-1px 4px 0 #ffaa00, 1px 4px 0 #ffaa00;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-rps::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
background: transparent;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%) scale(2);
|
|
||||||
box-shadow:
|
|
||||||
/* Fist shape */
|
|
||||||
-1px -3px 0 #ffcc99, 0 -3px 0 #ffcc99, 1px -3px 0 #ffcc99,
|
|
||||||
-2px -2px 0 #ffcc99, -1px -2px 0 #ffcc99, 0 -2px 0 #ffcc99, 1px -2px 0 #ffcc99, 2px -2px 0 #ffcc99,
|
|
||||||
-2px -1px 0 #ffcc99, -1px -1px 0 #ffcc99, 0 -1px 0 #ffcc99, 1px -1px 0 #ffcc99, 2px -1px 0 #ffcc99,
|
|
||||||
-2px 0 0 #ffcc99, -1px 0 0 #ffcc99, 0 0 0 #ffaa77, 1px 0 0 #ffcc99, 2px 0 0 #ffcc99,
|
|
||||||
-2px 1px 0 #ffcc99, -1px 1px 0 #ffcc99, 0 1px 0 #ffcc99, 1px 1px 0 #ffcc99, 2px 1px 0 #ffcc99,
|
|
||||||
-1px 2px 0 #ffcc99, 0 2px 0 #ffcc99, 1px 2px 0 #ffcc99;
|
|
||||||
}
|
|
||||||
|
|
||||||
.icon-ball::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 1px;
|
|
||||||
height: 1px;
|
|
||||||
background: transparent;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%) scale(2);
|
|
||||||
box-shadow:
|
|
||||||
/* Ball shape */
|
|
||||||
-1px -3px 0 #000, 0 -3px 0 #000, 1px -3px 0 #000,
|
|
||||||
-2px -2px 0 #000, -1px -2px 0 #fff, 0 -2px 0 #fff, 1px -2px 0 #fff, 2px -2px 0 #000,
|
|
||||||
-3px -1px 0 #000, -2px -1px 0 #fff, -1px -1px 0 #fff, 0 -1px 0 #000, 1px -1px 0 #fff, 2px -1px 0 #fff, 3px -1px 0 #000,
|
|
||||||
-3px 0 0 #000, -2px 0 0 #fff, -1px 0 0 #000, 0 0 0 #000, 1px 0 0 #000, 2px 0 0 #fff, 3px 0 0 #000,
|
|
||||||
-3px 1px 0 #000, -2px 1px 0 #fff, -1px 1px 0 #fff, 0 1px 0 #000, 1px 1px 0 #fff, 2px 1px 0 #fff, 3px 1px 0 #000,
|
|
||||||
-2px 2px 0 #000, -1px 2px 0 #fff, 0 2px 0 #fff, 1px 2px 0 #fff, 2px 2px 0 #000,
|
|
||||||
-1px 3px 0 #000, 0 3px 0 #000, 1px 3px 0 #000;
|
|
||||||
}
|
|
||||||
|
|
||||||
.option-name {
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #8b4513;
|
|
||||||
margin-bottom: 2px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.option-desc {
|
|
||||||
font-size: 10px;
|
|
||||||
color: #a0522d;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn {
|
|
||||||
width: 100%;
|
|
||||||
padding: 8px;
|
|
||||||
background: #cd853f;
|
|
||||||
border: 3px solid #8b4513;
|
|
||||||
border-radius: 6px;
|
|
||||||
color: white;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
cursor: pointer;
|
|
||||||
font-family: 'DotGothic16', sans-serif;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn:hover {
|
|
||||||
background: #d2691e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.close-btn:active {
|
|
||||||
transform: scale(0.95);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,174 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="prayer-menu">
|
|
||||||
<h2 class="menu-title">選擇祈禱方式</h2>
|
|
||||||
|
|
||||||
<div class="prayer-options">
|
|
||||||
<!-- 擲筊選項 -->
|
|
||||||
<button
|
|
||||||
class="prayer-option"
|
|
||||||
@click="$emit('select', 'jiaobei')"
|
|
||||||
>
|
|
||||||
<div class="option-icon icon-jiaobei"></div>
|
|
||||||
<span class="option-label">擲筊</span>
|
|
||||||
</button>
|
|
||||||
|
|
||||||
<!-- 求籤選項 -->
|
|
||||||
<button
|
|
||||||
class="prayer-option"
|
|
||||||
@click="$emit('select', 'fortune')"
|
|
||||||
>
|
|
||||||
<div class="option-icon icon-fortune"></div>
|
|
||||||
<span class="option-label">求籤</span>
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- 返回按鈕 -->
|
|
||||||
<button class="back-button" @click="$emit('close')">
|
|
||||||
返回
|
|
||||||
</button>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
defineEmits(['select', 'close']);
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.prayer-menu {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
background: rgba(155, 188, 15, 0.95);
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
gap: 8px; /* 減少間距 */
|
|
||||||
padding: 8px;
|
|
||||||
box-sizing: border-box;
|
|
||||||
z-index: 100;
|
|
||||||
}
|
|
||||||
|
|
||||||
.menu-title {
|
|
||||||
font-size: 12px; /* 縮小標題 */
|
|
||||||
font-weight: bold;
|
|
||||||
color: #000;
|
|
||||||
margin: 0;
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prayer-options {
|
|
||||||
display: flex;
|
|
||||||
gap: 16px; /* 減少選項間距 */
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.prayer-option {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
gap: 4px;
|
|
||||||
background: rgba(255, 255, 255, 0.9);
|
|
||||||
border: 2px solid #000;
|
|
||||||
border-radius: 6px;
|
|
||||||
padding: 8px 8px; /* 減少內邊距 */
|
|
||||||
cursor: pointer;
|
|
||||||
transition: transform 0.2s, box-shadow 0.2s;
|
|
||||||
min-width: 60px; /* 縮小最小寬度 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.prayer-option:hover {
|
|
||||||
transform: translateY(-2px);
|
|
||||||
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
|
|
||||||
}
|
|
||||||
|
|
||||||
.prayer-option:active {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
|
|
||||||
.option-icon {
|
|
||||||
width: 24px; /* 縮小圖標 */
|
|
||||||
height: 24px;
|
|
||||||
position: relative;
|
|
||||||
transform: scale(0.8); /* 稍微縮小圖標內容 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.option-label {
|
|
||||||
font-size: 10px; /* 縮小標籤 */
|
|
||||||
font-weight: bold;
|
|
||||||
color: #333;
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 擲筊圖標 - 可愛版（一對圓潤的紅筊） */
|
|
||||||
.icon-jiaobei::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 2px;
|
|
||||||
height: 2px;
|
|
||||||
background: transparent;
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
box-shadow:
|
|
||||||
/* --- 左邊筊杯 (胖胖的月牙) --- */
|
|
||||||
-7px -4px 0 #ff5252, -5px -4px 0 #ff5252, -3px -4px 0 #ff5252,
|
|
||||||
-9px -2px 0 #ff5252, -7px -2px 0 #ff8a80, -5px -2px 0 #ff5252, -3px -2px 0 #ff5252, -1px -2px 0 #ff5252, /* #ff8a80 是高光 */
|
|
||||||
-9px 0px 0 #ff5252, -7px 0px 0 #ff5252, -5px 0px 0 #ff5252, -3px 0px 0 #ff5252, -1px 0px 0 #ff5252,
|
|
||||||
-7px 2px 0 #ff5252, -5px 2px 0 #ff5252, -3px 2px 0 #ff5252,
|
|
||||||
-5px 4px 0 #d32f2f, /* 陰影 */
|
|
||||||
|
|
||||||
/* --- 右邊筊杯 (對稱的胖月牙) --- */
|
|
||||||
3px -4px 0 #ff5252, 5px -4px 0 #ff5252, 7px -4px 0 #ff5252,
|
|
||||||
1px -2px 0 #ff5252, 3px -2px 0 #ff5252, 5px -2px 0 #ff5252, 7px -2px 0 #ff8a80, 9px -2px 0 #ff5252, /* 高光在右側 */
|
|
||||||
1px 0px 0 #ff5252, 3px 0px 0 #ff5252, 5px 0px 0 #ff5252, 7px 0px 0 #ff5252, 9px 0px 0 #ff5252,
|
|
||||||
3px 2px 0 #ff5252, 5px 2px 0 #ff5252, 7px 2px 0 #ff5252,
|
|
||||||
5px 4px 0 #d32f2f; /* 陰影 */
|
|
||||||
}
|
|
||||||
|
|
||||||
/* 求籤圖標 - 籤筒和籤條 */
|
|
||||||
.icon-fortune::before {
|
|
||||||
content: '';
|
|
||||||
position: absolute;
|
|
||||||
width: 2px;
|
|
||||||
height: 2px;
|
|
||||||
background: #8B4513; /* 木色 */
|
|
||||||
top: 50%;
|
|
||||||
left: 50%;
|
|
||||||
transform: translate(-50%, -50%);
|
|
||||||
box-shadow:
|
|
||||||
/* 籤筒本體 */
|
|
||||||
-4px -4px 0 #8B4513, -2px -4px 0 #8B4513, 0px -4px 0 #8B4513, 2px -4px 0 #8B4513, 4px -4px 0 #8B4513,
|
|
||||||
-4px -2px 0 #8B4513, -2px -2px 0 #8B4513, 0px -2px 0 #8B4513, 2px -2px 0 #8B4513, 4px -2px 0 #8B4513,
|
|
||||||
-4px 0px 0 #8B4513, -2px 0px 0 #8B4513, 0px 0px 0 #8B4513, 2px 0px 0 #8B4513, 4px 0px 0 #8B4513,
|
|
||||||
-4px 2px 0 #8B4513, -2px 2px 0 #8B4513, 0px 2px 0 #8B4513, 2px 2px 0 #8B4513, 4px 2px 0 #8B4513,
|
|
||||||
-4px 4px 0 #8B4513, -2px 4px 0 #8B4513, 0px 4px 0 #8B4513, 2px 4px 0 #8B4513, 4px 4px 0 #8B4513,
|
|
||||||
|
|
||||||
/* 突出的籤條（紅色） */
|
|
||||||
-2px -8px 0 #d4522e, 0px -8px 0 #d4522e,
|
|
||||||
-2px -6px 0 #d4522e, 0px -6px 0 #d4522e,
|
|
||||||
2px -6px 0 #d4522e;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-button {
|
|
||||||
margin-top: 4px;
|
|
||||||
padding: 4px 12px;
|
|
||||||
background: rgba(255, 255, 255, 0.9);
|
|
||||||
border: 2px solid #000;
|
|
||||||
border-radius: 4px;
|
|
||||||
font-size: 10px;
|
|
||||||
font-weight: bold;
|
|
||||||
cursor: pointer;
|
|
||||||
font-family: monospace;
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-button:hover {
|
|
||||||
background: rgba(255, 255, 255, 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
.back-button:active {
|
|
||||||
transform: translateY(1px);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,7 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="stats-bar">
|
<div class="stats-bar">
|
||||||
<div class="stats-content">
|
|
||||||
<div class="stat-rows">
|
|
||||||
<div class="stat-row">
|
<div class="stat-row">
|
||||||
<div class="stat-icon pixel-heart"></div>
|
<div class="stat-icon pixel-heart"></div>
|
||||||
<div class="pixel-bar">
|
<div class="pixel-bar">
|
||||||
|
|
@ -10,12 +8,12 @@
|
||||||
:key="'happy-' + i"
|
:key="'happy-' + i"
|
||||||
class="pixel-block"
|
class="pixel-block"
|
||||||
:class="{
|
:class="{
|
||||||
'filled': i <= Math.floor(displayHappiness / 10),
|
'filled': i <= Math.floor(happiness / 10),
|
||||||
'color-red': i <= Math.floor(displayHappiness / 10)
|
'color-red': i <= Math.floor(happiness / 10)
|
||||||
}"
|
}"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
<span class="stat-value" :class="{ 'warning': displayHappiness < 30 }">{{ displayHappiness }}</span>
|
<span class="stat-value" :class="{ 'warning': happiness < 30 }">{{ happiness }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat-row">
|
<div class="stat-row">
|
||||||
|
|
@ -26,12 +24,12 @@
|
||||||
:key="'food-' + i"
|
:key="'food-' + i"
|
||||||
class="pixel-block"
|
class="pixel-block"
|
||||||
:class="{
|
:class="{
|
||||||
'filled': i <= Math.floor(displayHunger / 10),
|
'filled': i <= Math.floor(hunger / 10),
|
||||||
'color-yellow': i <= Math.floor(displayHunger / 10)
|
'color-yellow': i <= Math.floor(hunger / 10)
|
||||||
}"
|
}"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
<span class="stat-value" :class="{ 'warning': displayHunger < 30 }">{{ displayHunger }}</span>
|
<span class="stat-value" :class="{ 'warning': hunger < 30 }">{{ hunger }}</span>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="stat-row">
|
<div class="stat-row">
|
||||||
|
|
@ -42,26 +40,17 @@
|
||||||
:key="'health-' + i"
|
:key="'health-' + i"
|
||||||
class="pixel-block"
|
class="pixel-block"
|
||||||
:class="{
|
:class="{
|
||||||
'filled': i <= Math.floor(displayHealth / 10),
|
'filled': i <= Math.floor(health / 10),
|
||||||
'color-green': i <= Math.floor(displayHealth / 10)
|
'color-green': i <= Math.floor(health / 10)
|
||||||
}"
|
}"
|
||||||
></div>
|
></div>
|
||||||
</div>
|
</div>
|
||||||
<span class="stat-value" :class="{ 'warning': displayHealth < 30 }">{{ displayHealth }}</span>
|
<span class="stat-value" :class="{ 'warning': health < 30 }">{{ health }}</span>
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<!-- Info Icon Button -->
|
|
||||||
<button class="info-icon-btn" @click="$emit('toggle-info')" title="寵物資訊">
|
|
||||||
<div class="pixel-i-icon"></div>
|
|
||||||
</button>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
import { ref, computed } from 'vue';
|
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
hunger: {
|
hunger: {
|
||||||
type: Number,
|
type: Number,
|
||||||
|
|
@ -74,54 +63,18 @@ const props = defineProps({
|
||||||
health: {
|
health: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: 100
|
default: 100
|
||||||
},
|
|
||||||
petName: {
|
|
||||||
type: String,
|
|
||||||
default: ''
|
|
||||||
},
|
|
||||||
stage: {
|
|
||||||
type: String,
|
|
||||||
default: 'adult'
|
|
||||||
},
|
|
||||||
poopCount: {
|
|
||||||
type: Number,
|
|
||||||
default: 0
|
|
||||||
},
|
|
||||||
baseStats: {
|
|
||||||
type: Object,
|
|
||||||
default: () => ({ hp: 0, attack: 0, defense: 0, speed: 0 })
|
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
defineEmits(['toggle-info']);
|
|
||||||
|
|
||||||
// 向上取整顯示，只有小數扣到0才會掉下一個整數
|
|
||||||
const displayHunger = computed(() => Math.ceil(props.hunger));
|
|
||||||
const displayHappiness = computed(() => Math.ceil(props.happiness));
|
|
||||||
const displayHealth = computed(() => Math.ceil(props.health));
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.stats-bar {
|
.stats-bar {
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
gap: 2px;
|
||||||
|
padding: 4px 8px 3px 8px;
|
||||||
background: rgba(155, 188, 15, 0.08);
|
background: rgba(155, 188, 15, 0.08);
|
||||||
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
|
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
|
||||||
position: relative;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-content {
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
gap: 6px;
|
|
||||||
padding: 4px 8px 3px 8px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stat-rows {
|
|
||||||
flex: 1;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 2px;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.stat-row {
|
.stat-row {
|
||||||
|
|
@ -282,206 +235,4 @@ const displayHealth = computed(() => Math.ceil(props.health));
|
||||||
0%, 100% { opacity: 1; }
|
0%, 100% { opacity: 1; }
|
||||||
50% { opacity: 0.5; }
|
50% { opacity: 0.5; }
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Info Icon Button - Game Boy Pixel Style */
|
|
||||||
.info-icon-btn {
|
|
||||||
width: 30px;
|
|
||||||
height: 30px;
|
|
||||||
flex-shrink: 0;
|
|
||||||
background: #9bbc0f;
|
|
||||||
border: 2px solid #306230;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: none;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
padding: 0;
|
|
||||||
box-shadow:
|
|
||||||
inset -2px -2px 0 #0f380f,
|
|
||||||
inset 2px 2px 0 #8bac0f;
|
|
||||||
image-rendering: pixelated;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Pixel Art "i" Icon */
|
|
||||||
.pixel-i-icon {
|
|
||||||
width: 2px;
|
|
||||||
height: 2px;
|
|
||||||
background: #0f380f;
|
|
||||||
position: relative;
|
|
||||||
box-shadow:
|
|
||||||
/* Top dot */
|
|
||||||
0px -7px 0 #0f380f,
|
|
||||||
/* Vertical bar */
|
|
||||||
0px -3px 0 #0f380f, 0px -1px 0 #0f380f,
|
|
||||||
0px 0px 0 #0f380f, 0px 1px 0 #0f380f,
|
|
||||||
0px 3px 0 #0f380f, 0px 5px 0 #0f380f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-icon-btn:hover {
|
|
||||||
background: #8bac0f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-icon-btn:active {
|
|
||||||
box-shadow:
|
|
||||||
inset 2px 2px 0 #0f380f;
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Backdrop Overlay */
|
|
||||||
.info-backdrop {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
bottom: 0;
|
|
||||||
background: rgba(15, 56, 15, 0.7);
|
|
||||||
z-index: 999;
|
|
||||||
animation: fadeIn 0.2s steps(4);
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes fadeIn {
|
|
||||||
from { opacity: 0; }
|
|
||||||
to { opacity: 1; }
|
|
||||||
}
|
|
||||||
|
|
||||||
/* Bottom Slide-out Info Panel - Game Boy Style */
|
|
||||||
.info-panel {
|
|
||||||
position: fixed;
|
|
||||||
bottom: 0;
|
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
background: #9bbc0f;
|
|
||||||
border-top: 4px solid #0f380f;
|
|
||||||
z-index: 1000;
|
|
||||||
max-height: 50vh;
|
|
||||||
overflow-y: auto;
|
|
||||||
animation: slideUp 0.2s steps(5);
|
|
||||||
box-shadow:
|
|
||||||
0 -2px 0 #306230,
|
|
||||||
0 -4px 8px rgba(0, 0, 0, 0.3);
|
|
||||||
image-rendering: pixelated;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes slideUp {
|
|
||||||
from {
|
|
||||||
transform: translateY(100%);
|
|
||||||
}
|
|
||||||
to {
|
|
||||||
transform: translateY(0);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-panel-header {
|
|
||||||
padding: 10px 16px;
|
|
||||||
background: #306230;
|
|
||||||
border-bottom: 2px solid #0f380f;
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-title {
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-size: 13px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #9bbc0f;
|
|
||||||
text-shadow: 1px 1px 0 #0f380f;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.page-indicator {
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-size: 11px;
|
|
||||||
color: #8bac0f;
|
|
||||||
background: #0f380f;
|
|
||||||
padding: 2px 6px;
|
|
||||||
border: 1px solid #306230;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-panel-body {
|
|
||||||
padding: 12px 16px 8px;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: 8px;
|
|
||||||
min-height: 180px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.stats-header {
|
|
||||||
text-align: center;
|
|
||||||
padding: 4px 0 8px;
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #306230;
|
|
||||||
letter-spacing: 1px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-row {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 8px 12px;
|
|
||||||
background: #8bac0f;
|
|
||||||
border: 2px solid #306230;
|
|
||||||
box-shadow:
|
|
||||||
inset 1px 1px 0 #9bbc0f,
|
|
||||||
inset -1px -1px 0 #0f380f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-label {
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-size: 12px;
|
|
||||||
font-weight: bold;
|
|
||||||
color: #0f380f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-value {
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-size: 12px;
|
|
||||||
color: #0f380f;
|
|
||||||
font-weight: 600;
|
|
||||||
}
|
|
||||||
|
|
||||||
.info-nav {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: 10px 16px;
|
|
||||||
background: #306230;
|
|
||||||
border-top: 2px solid #0f380f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-btn {
|
|
||||||
width: 36px;
|
|
||||||
height: 28px;
|
|
||||||
background: #8bac0f;
|
|
||||||
border: 2px solid #0f380f;
|
|
||||||
color: #0f380f;
|
|
||||||
font-size: 14px;
|
|
||||||
font-weight: bold;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: none;
|
|
||||||
box-shadow:
|
|
||||||
inset 1px 1px 0 #9bbc0f,
|
|
||||||
inset -1px -1px 0 #306230;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-btn:hover {
|
|
||||||
background: #9bbc0f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-btn:active {
|
|
||||||
box-shadow: inset 2px 2px 0 #0f380f;
|
|
||||||
}
|
|
||||||
|
|
||||||
.nav-hint {
|
|
||||||
font-family: 'DotGothic16', monospace;
|
|
||||||
font-size: 9px;
|
|
||||||
color: #8bac0f;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,9 +1,9 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="top-menu">
|
<div class="top-menu">
|
||||||
<button class="icon-btn icon-stats" @click="$emit('info')" title="Status"></button>
|
<button class="icon-btn icon-stats" @click="$emit('stats')" title="Stats"></button>
|
||||||
<button class="icon-btn icon-feed" @click="$emit('feed')" :disabled="disabled" title="Feed"></button>
|
<button class="icon-btn icon-feed" @click="$emit('feed')" :disabled="disabled" title="Feed"></button>
|
||||||
<button class="icon-btn icon-play" @click="$emit('playMenu')" :disabled="disabled" title="Play"></button>
|
<button class="icon-btn icon-play" @click="$emit('play')" :disabled="disabled" title="Play"></button>
|
||||||
<button class="icon-btn icon-temple" @click="$emit('temple')" :disabled="disabled" title="Temple"></button>
|
<button class="icon-btn icon-sleep" @click="$emit('sleep')" :disabled="disabled" title="Sleep"></button>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -15,7 +15,7 @@ const props = defineProps({
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
defineEmits(['info', 'feed', 'playMenu', 'temple']);
|
defineEmits(['stats', 'feed', 'play', 'sleep']);
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
|
|
@ -96,26 +96,23 @@ defineEmits(['info', 'feed', 'playMenu', 'temple']);
|
||||||
-2px 4px 0 #4444ff, 0px 4px 0 #4444ff, 2px 4px 0 #4444ff;
|
-2px 4px 0 #4444ff, 0px 4px 0 #4444ff, 2px 4px 0 #4444ff;
|
||||||
}
|
}
|
||||||
|
|
||||||
/* Temple Icon (廟宇) */
|
/* Sleep Icon (Moon) */
|
||||||
.icon-temple::before {
|
.icon-sleep::before {
|
||||||
content: '';
|
content: '';
|
||||||
position: absolute;
|
position: absolute;
|
||||||
width: 2px;
|
width: 2px;
|
||||||
height: 2px;
|
height: 2px;
|
||||||
background: #D2691E;
|
background: #ffcc00;
|
||||||
top: 50%;
|
top: 50%;
|
||||||
left: 50%;
|
left: 50%;
|
||||||
transform: translate(-50%, -50%);
|
transform: translate(-50%, -50%);
|
||||||
box-shadow:
|
box-shadow:
|
||||||
/* 屋頂 */
|
0px -6px 0 #ffcc00, 2px -6px 0 #ffcc00,
|
||||||
-4px -6px 0 #8B4513, -2px -6px 0 #8B4513, 0px -6px 0 #8B4513, 2px -6px 0 #8B4513, 4px -6px 0 #8B4513,
|
-2px -4px 0 #ffcc00, 0px -4px 0 #ffcc00, 2px -4px 0 #ffcc00, 4px -4px 0 #ffcc00,
|
||||||
/* 屋簷 */
|
-2px -2px 0 #ffcc00, 0px -2px 0 #ffcc00, 4px -2px 0 #ffcc00,
|
||||||
-6px -4px 0 #D2691E, -4px -4px 0 #D2691E, -2px -4px 0 #D2691E, 0px -4px 0 #D2691E, 2px -4px 0 #D2691E, 4px -4px 0 #D2691E, 6px -4px 0 #D2691E,
|
-2px 0px 0 #ffcc00, 0px 0px 0 #ffcc00, 4px 0px 0 #ffcc00,
|
||||||
/* 柱子與牆 */
|
-2px 2px 0 #ffcc00, 0px 2px 0 #ffcc00, 4px 2px 0 #ffcc00,
|
||||||
-4px -2px 0 #8B4513, 4px -2px 0 #8B4513,
|
-2px 4px 0 #ffcc00, 0px 4px 0 #ffcc00, 2px 4px 0 #ffcc00, 4px 4px 0 #ffcc00,
|
||||||
-4px 0px 0 #8B4513, -2px 0px 0 #FFD700, 0px 0px 0 #FFD700, 2px 0px 0 #FFD700, 4px 0px 0 #8B4513,
|
0px 6px 0 #ffcc00, 2px 6px 0 #ffcc00;
|
||||||
-4px 2px 0 #8B4513, 4px 2px 0 #8B4513,
|
|
||||||
/* 底座 */
|
|
||||||
-4px 4px 0 #654321, -2px 4px 0 #654321, 0px 4px 0 #654321, 2px 4px 0 #654321, 4px 4px 0 #654321;
|
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,330 +0,0 @@
|
||||||
<template>
|
|
||||||
<div class="training-layer" @click="handleTap">
|
|
||||||
<canvas ref="gameCanvas" class="game-canvas"></canvas>
|
|
||||||
|
|
||||||
<!-- 移除所有 UI，變成純觀賞模式 -->
|
|
||||||
<div class="training-ui">
|
|
||||||
<!-- 隱藏 UI -->
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup>
|
|
||||||
import { ref, onMounted, onUnmounted, computed } from 'vue';
|
|
||||||
|
|
||||||
const emit = defineEmits(['close', 'complete', 'attack']);
|
|
||||||
|
|
||||||
const gameCanvas = ref(null);
|
|
||||||
const gameStarted = ref(false);
|
|
||||||
const gameOver = ref(false);
|
|
||||||
const score = ref(0);
|
|
||||||
const attackCount = ref(0);
|
|
||||||
const totalAttacks = ref(3); // 改為 3 次
|
|
||||||
|
|
||||||
// 遊戲數據
|
|
||||||
let projectiles = [];
|
|
||||||
// let targets = []; // 移除目標
|
|
||||||
let explosions = [];
|
|
||||||
let animationId = null;
|
|
||||||
let ctx = null;
|
|
||||||
let canvasWidth = 300;
|
|
||||||
let canvasHeight = 150;
|
|
||||||
|
|
||||||
// 寵物位置 (假設在右側)
|
|
||||||
const PET_X = 260;
|
|
||||||
const PET_Y = 100; // 嘴巴的高度
|
|
||||||
|
|
||||||
function handleTap() {
|
|
||||||
// 自動模式，禁用點擊
|
|
||||||
}
|
|
||||||
|
|
||||||
function initGame() {
|
|
||||||
if (!gameCanvas.value) return;
|
|
||||||
const canvas = gameCanvas.value;
|
|
||||||
// 設置畫布大小為父容器大小
|
|
||||||
const rect = canvas.parentElement.getBoundingClientRect();
|
|
||||||
canvas.width = rect.width;
|
|
||||||
canvas.height = rect.height;
|
|
||||||
canvasWidth = rect.width;
|
|
||||||
canvasHeight = rect.height;
|
|
||||||
|
|
||||||
ctx = canvas.getContext('2d');
|
|
||||||
loop(); // 開始渲染循環
|
|
||||||
startGame(); // 自動開始
|
|
||||||
}
|
|
||||||
|
|
||||||
function startGame() {
|
|
||||||
gameStarted.value = true;
|
|
||||||
gameOver.value = false;
|
|
||||||
score.value = 0;
|
|
||||||
attackCount.value = 0;
|
|
||||||
projectiles = [];
|
|
||||||
explosions = [];
|
|
||||||
|
|
||||||
// 自動攻擊序列
|
|
||||||
scheduleAttack(1000);
|
|
||||||
scheduleAttack(2500);
|
|
||||||
scheduleAttack(4000);
|
|
||||||
}
|
|
||||||
|
|
||||||
function scheduleAttack(delay) {
|
|
||||||
setTimeout(() => {
|
|
||||||
if (!gameOver.value) {
|
|
||||||
attack();
|
|
||||||
}
|
|
||||||
}, delay);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 移除 spawnTargetLoop 和 spawnTarget 函數
|
|
||||||
|
|
||||||
function attack() {
|
|
||||||
emit('attack'); // 通知父組件播放寵物攻擊動畫
|
|
||||||
attackCount.value++;
|
|
||||||
|
|
||||||
// 隨機決定攻擊模式：雙發 (填滿螢幕) 或 強力單發
|
|
||||||
const isDouble = Math.random() > 0.4; // 60% 機率雙發
|
|
||||||
|
|
||||||
// 發射位置修正：寵物在右側 (約 X=240)，火球要從前方出現 (約 X=180)
|
|
||||||
const spawnX = 180;
|
|
||||||
const centerY = 80; // 畫面中心高度
|
|
||||||
|
|
||||||
if (isDouble) {
|
|
||||||
// 雙發模式：上下兩顆，填滿垂直空間
|
|
||||||
// 上方火球
|
|
||||||
projectiles.push({
|
|
||||||
x: spawnX,
|
|
||||||
y: centerY - 50,
|
|
||||||
speed: -4, // 速度減慢 (原本 -10)
|
|
||||||
width: 48,
|
|
||||||
height: 48,
|
|
||||||
color: '#000000'
|
|
||||||
});
|
|
||||||
// 下方火球
|
|
||||||
projectiles.push({
|
|
||||||
x: spawnX,
|
|
||||||
y: centerY + 10,
|
|
||||||
speed: -4, // 速度減慢
|
|
||||||
width: 48,
|
|
||||||
height: 48,
|
|
||||||
color: '#000000'
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
// 強力單發：一顆超大火球
|
|
||||||
projectiles.push({
|
|
||||||
x: spawnX,
|
|
||||||
y: centerY - 32, // 居中
|
|
||||||
speed: -5, // 速度減慢 (原本 -12)
|
|
||||||
width: 64,
|
|
||||||
height: 64,
|
|
||||||
color: '#000000'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// 檢查是否完成訓練
|
|
||||||
if (attackCount.value >= totalAttacks.value) {
|
|
||||||
setTimeout(() => {
|
|
||||||
gameOver.value = true;
|
|
||||||
handleClose(); // 自動結束
|
|
||||||
}, 2000); // 等最後一發飛完
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function loop() {
|
|
||||||
if (!ctx) return;
|
|
||||||
|
|
||||||
// 清空畫布 (透明)
|
|
||||||
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
|
|
||||||
|
|
||||||
if (gameStarted.value) {
|
|
||||||
update();
|
|
||||||
draw();
|
|
||||||
}
|
|
||||||
|
|
||||||
animationId = requestAnimationFrame(loop);
|
|
||||||
}
|
|
||||||
|
|
||||||
function update() {
|
|
||||||
if (gameOver.value) return;
|
|
||||||
|
|
||||||
// 更新子彈
|
|
||||||
for (let i = projectiles.length - 1; i >= 0; i--) {
|
|
||||||
const p = projectiles[i];
|
|
||||||
p.x += p.speed;
|
|
||||||
|
|
||||||
// 子彈飛出螢幕左側
|
|
||||||
if (p.x < -50) {
|
|
||||||
projectiles.splice(i, 1);
|
|
||||||
continue;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 移除碰撞檢測
|
|
||||||
}
|
|
||||||
|
|
||||||
// 移除目標更新邏輯
|
|
||||||
|
|
||||||
// 更新爆炸 (如果有保留的話)
|
|
||||||
updateExplosions();
|
|
||||||
}
|
|
||||||
|
|
||||||
function draw() {
|
|
||||||
// 移除繪製目標
|
|
||||||
|
|
||||||
// 繪製火球
|
|
||||||
for (const p of projectiles) {
|
|
||||||
drawFireball(p);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 繪製爆炸
|
|
||||||
ctx.fillStyle = '#ff0000';
|
|
||||||
for (const e of explosions) {
|
|
||||||
ctx.fillRect(e.x, e.y, 4, 4);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// 繪製像素塊 (模擬 V-Pet 的點陣)
|
|
||||||
function drawPixelBlock(x, y, w, h, color) {
|
|
||||||
const pixelSize = 4;
|
|
||||||
ctx.fillStyle = color || '#000000';
|
|
||||||
ctx.fillRect(x, y, w, h);
|
|
||||||
// 簡單的邊框
|
|
||||||
ctx.strokeStyle = 'rgba(0,0,0,0.3)';
|
|
||||||
ctx.strokeRect(x, y, w, h);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 繪製火球 (動態大小)
|
|
||||||
function drawFireball(p) {
|
|
||||||
const { x, y, width, height } = p;
|
|
||||||
// 根據寬度計算像素大小，保持 4x4 的網格比例
|
|
||||||
const pixelSize = width / 4;
|
|
||||||
|
|
||||||
// 經典 V-Pet 火球形狀 (4x4)
|
|
||||||
const pattern = [
|
|
||||||
[0,1,1,0],
|
|
||||||
[1,1,1,1],
|
|
||||||
[1,1,1,1],
|
|
||||||
[0,1,1,0]
|
|
||||||
];
|
|
||||||
|
|
||||||
ctx.fillStyle = p.color || '#000000';
|
|
||||||
pattern.forEach((row, r) => {
|
|
||||||
row.forEach((col, c) => {
|
|
||||||
if (col) {
|
|
||||||
ctx.fillRect(x + c*pixelSize, y + r*pixelSize, pixelSize, pixelSize);
|
|
||||||
}
|
|
||||||
});
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
function createExplosion(x, y) {
|
|
||||||
for(let i=0; i<8; i++) {
|
|
||||||
explosions.push({
|
|
||||||
x: x + 10,
|
|
||||||
y: y + 10,
|
|
||||||
vx: (Math.random() - 0.5) * 4,
|
|
||||||
vy: (Math.random() - 0.5) * 4,
|
|
||||||
life: 10
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function updateExplosions() {
|
|
||||||
for(let i = explosions.length - 1; i >= 0; i--) {
|
|
||||||
const e = explosions[i];
|
|
||||||
e.x += e.vx;
|
|
||||||
e.y += e.vy;
|
|
||||||
e.life--;
|
|
||||||
if(e.life <= 0) explosions.splice(i, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// drawPixelPet 移除，因為現在顯示真實寵物
|
|
||||||
|
|
||||||
function handleClose() {
|
|
||||||
if (gameOver.value) {
|
|
||||||
emit('complete', true);
|
|
||||||
} else {
|
|
||||||
emit('complete', false);
|
|
||||||
}
|
|
||||||
emit('close');
|
|
||||||
}
|
|
||||||
|
|
||||||
onMounted(() => {
|
|
||||||
initGame();
|
|
||||||
});
|
|
||||||
|
|
||||||
onUnmounted(() => {
|
|
||||||
if (animationId) cancelAnimationFrame(animationId);
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.training-layer {
|
|
||||||
position: absolute;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
z-index: 50; /* 在寵物之上，但在 UI 之下 */
|
|
||||||
pointer-events: auto; /* 允許點擊 */
|
|
||||||
}
|
|
||||||
|
|
||||||
.game-canvas {
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
display: block;
|
|
||||||
}
|
|
||||||
|
|
||||||
.training-ui {
|
|
||||||
position: absolute;
|
|
||||||
top: 10px;
|
|
||||||
left: 0;
|
|
||||||
width: 100%;
|
|
||||||
pointer-events: none;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
|
|
||||||
.score {
|
|
||||||
font-family: 'DotGothic16', sans-serif;
|
|
||||||
font-size: 16px;
|
|
||||||
color: #8b4513;
|
|
||||||
background: rgba(255, 255, 255, 0.7);
|
|
||||||
padding: 2px 8px;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.start-hint {
|
|
||||||
margin-top: 40px;
|
|
||||||
font-family: 'DotGothic16', sans-serif;
|
|
||||||
color: #8b4513;
|
|
||||||
animation: pulse 1s infinite;
|
|
||||||
}
|
|
||||||
|
|
||||||
.game-over-msg {
|
|
||||||
margin-top: 40px;
|
|
||||||
background: rgba(255, 255, 255, 0.9);
|
|
||||||
padding: 10px;
|
|
||||||
border: 2px solid #8b4513;
|
|
||||||
border-radius: 8px;
|
|
||||||
text-align: center;
|
|
||||||
pointer-events: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.game-over-msg button {
|
|
||||||
margin-top: 5px;
|
|
||||||
padding: 4px 10px;
|
|
||||||
background: #4CAF50;
|
|
||||||
color: white;
|
|
||||||
border: none;
|
|
||||||
border-radius: 4px;
|
|
||||||
cursor: pointer;
|
|
||||||
}
|
|
||||||
|
|
||||||
@keyframes pulse {
|
|
||||||
0%, 100% { opacity: 0.6; }
|
|
||||||
50% { opacity: 1; }
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,144 +0,0 @@
|
||||||
import { ref } from 'vue';
|
|
||||||
|
|
||||||
export function useEventSystem(petSystem) {
|
|
||||||
const { stats, state, triggerState } = petSystem;
|
|
||||||
|
|
||||||
const currentEvent = ref(null);
|
|
||||||
const eventHistory = ref([]);
|
|
||||||
|
|
||||||
// --- Event Database ---
|
|
||||||
// Categories: 'good', 'bad', 'weird'
|
|
||||||
const EVENT_DATABASE = [
|
|
||||||
// --- Good Events ---
|
|
||||||
{
|
|
||||||
id: 'found_charm',
|
|
||||||
type: 'good',
|
|
||||||
text: '撿到小符',
|
|
||||||
effect: (s) => { s.happiness = Math.min(100, s.happiness + 5); },
|
|
||||||
condition: () => true,
|
|
||||||
icon: 'pixel-charm'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'self_clean',
|
|
||||||
type: 'good',
|
|
||||||
text: '自己掃地',
|
|
||||||
effect: (s) => { if (s.poopCount > 0) s.poopCount--; },
|
|
||||||
condition: (s) => s.poopCount > 0,
|
|
||||||
icon: 'pixel-broom'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'dance',
|
|
||||||
type: 'good',
|
|
||||||
text: '開心地跳舞',
|
|
||||||
effect: (s) => { s.happiness = Math.min(100, s.happiness + 10); },
|
|
||||||
condition: (s) => s.happiness > 70,
|
|
||||||
icon: 'pixel-note'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'gift_apple',
|
|
||||||
type: 'good',
|
|
||||||
text: '給你一顆果子',
|
|
||||||
effect: (s) => { /* Add to inventory logic later */ s.hunger = Math.min(100, s.hunger + 5); },
|
|
||||||
condition: () => Math.random() < 0.3,
|
|
||||||
icon: 'pixel-apple'
|
|
||||||
},
|
|
||||||
|
|
||||||
// --- Bad Events ---
|
|
||||||
{
|
|
||||||
id: 'night_noise',
|
|
||||||
type: 'bad',
|
|
||||||
text: '半夜亂叫',
|
|
||||||
effect: (s) => { s.happiness = Math.max(0, s.happiness - 5); },
|
|
||||||
condition: (s) => isNight(),
|
|
||||||
icon: 'pixel-angry'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'overeat',
|
|
||||||
type: 'bad',
|
|
||||||
text: '偷吃太多',
|
|
||||||
effect: (s) => { s.hunger = Math.min(100, s.hunger + 20); s.health = Math.max(0, s.health - 5); },
|
|
||||||
condition: (s) => s.hunger > 80,
|
|
||||||
icon: 'pixel-meat'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'stomach_ache',
|
|
||||||
type: 'bad',
|
|
||||||
text: '胃痛',
|
|
||||||
effect: (s) => { s.health = Math.max(0, s.health - 10); },
|
|
||||||
condition: (s) => s.health < 50,
|
|
||||||
icon: 'pixel-skull'
|
|
||||||
},
|
|
||||||
|
|
||||||
// --- Weird Events ---
|
|
||||||
{
|
|
||||||
id: 'stare',
|
|
||||||
type: 'weird',
|
|
||||||
text: '盯著螢幕外面看...',
|
|
||||||
effect: () => { },
|
|
||||||
condition: () => true,
|
|
||||||
icon: 'pixel-eye'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'corner_squat',
|
|
||||||
type: 'weird',
|
|
||||||
text: '走到角落蹲著',
|
|
||||||
effect: (s) => { s.happiness = Math.max(0, s.happiness - 5); },
|
|
||||||
condition: () => true,
|
|
||||||
icon: 'pixel-cloud'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'glitch',
|
|
||||||
type: 'weird',
|
|
||||||
text: '#@!$%^&*',
|
|
||||||
effect: (s) => { if (s.int > 5) s.int++; },
|
|
||||||
condition: () => Math.random() < 0.1,
|
|
||||||
icon: 'pixel-glitch'
|
|
||||||
}
|
|
||||||
];
|
|
||||||
|
|
||||||
function isNight() {
|
|
||||||
const hour = new Date().getHours();
|
|
||||||
return hour >= 22 || hour < 6;
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkEventTriggers() {
|
|
||||||
if (state.value === 'sleep' || state.value === 'dead') return;
|
|
||||||
|
|
||||||
// 10% chance to trigger an event per check
|
|
||||||
// Destiny Effect: Luck (福運) - Good events more likely?
|
|
||||||
// Destiny Effect: Spiritual (靈視) - Night events more likely
|
|
||||||
|
|
||||||
if (Math.random() < 0.1) {
|
|
||||||
triggerRandomEvent();
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function triggerRandomEvent() {
|
|
||||||
// Filter valid events
|
|
||||||
const validEvents = EVENT_DATABASE.filter(e => e.condition(stats.value));
|
|
||||||
if (validEvents.length === 0) return;
|
|
||||||
|
|
||||||
const event = validEvents[Math.floor(Math.random() * validEvents.length)];
|
|
||||||
|
|
||||||
// Apply effect
|
|
||||||
event.effect(stats.value);
|
|
||||||
|
|
||||||
// Set current event for UI
|
|
||||||
currentEvent.value = event;
|
|
||||||
eventHistory.value.unshift({ ...event, time: new Date() });
|
|
||||||
|
|
||||||
// Auto-clear event after 3 seconds
|
|
||||||
setTimeout(() => {
|
|
||||||
currentEvent.value = null;
|
|
||||||
}, 4000);
|
|
||||||
|
|
||||||
console.log('Event Triggered:', event.text);
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
currentEvent,
|
|
||||||
eventHistory,
|
|
||||||
checkEventTriggers,
|
|
||||||
triggerRandomEvent
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
@ -5,79 +5,24 @@ export function usePetSystem() {
|
||||||
const stage = ref('egg'); // egg, baby, adult
|
const stage = ref('egg'); // egg, baby, adult
|
||||||
const state = ref('idle'); // idle, sleep, eating, sick, dead, refuse
|
const state = ref('idle'); // idle, sleep, eating, sick, dead, refuse
|
||||||
|
|
||||||
// --- Destiny Data ---
|
|
||||||
const DESTINIES = [
|
|
||||||
{ id: 'luck', name: '福運', description: '籤詩好籤率 +10%', rarity: 1 },
|
|
||||||
{ id: 'diligence', name: '勤奮', description: '訓練遊戲獎勵 +20%', rarity: 1 },
|
|
||||||
{ id: 'gluttony', name: '暴食', description: '飢餓下降速度 +30%', rarity: 1 },
|
|
||||||
{ id: 'playful', name: '愛玩', description: 'Happiness 更快下降／更快上升', rarity: 1 },
|
|
||||||
{ id: 'purification', name: '淨化', description: '生病機率 -20%', rarity: 1 },
|
|
||||||
{ id: 'thirdeye', name: '天眼', description: '擲筊出聖筊機率微升', rarity: 2 },
|
|
||||||
{ id: 'medium', name: '冥感', description: '死亡後招魂成功率提升', rarity: 2 }
|
|
||||||
];
|
|
||||||
|
|
||||||
// --- Stats ---
|
// --- Stats ---
|
||||||
const stats = ref({
|
const stats = ref({
|
||||||
hunger: 100, // 0-100 (0 = Starving)
|
hunger: 100, // 0-100 (0 = Starving)
|
||||||
happiness: 100, // 0-100 (0 = Depressed)
|
happiness: 100, // 0-100 (0 = Depressed)
|
||||||
health: 100, // 0-100 (0 = Sick risk)
|
health: 100, // 0-100 (0 = Sick risk)
|
||||||
weight: 500, // grams
|
weight: 500, // grams
|
||||||
age: 1, // days (start at day 1)
|
age: 0, // days
|
||||||
poopCount: 0, // Number of poops on screen
|
poopCount: 0 // Number of poops on screen
|
||||||
// v2 Stats
|
|
||||||
str: 0, // 力量 (Fireball Game)
|
|
||||||
int: 0, // 智力 (Guessing Game)
|
|
||||||
dex: 0, // 敏捷 (Catch Ball)
|
|
||||||
generation: 1, // 輪迴世代
|
|
||||||
deityFavor: 0, // 神明好感度
|
|
||||||
destiny: null, // 天生命格 (Object)
|
|
||||||
// Deity System
|
|
||||||
currentDeity: 'mazu',
|
|
||||||
deityFavors: {
|
|
||||||
mazu: 0,
|
|
||||||
earthgod: 0,
|
|
||||||
matchmaker: 0,
|
|
||||||
wenchang: 0,
|
|
||||||
guanyin: 0
|
|
||||||
},
|
|
||||||
dailyPrayerCount: 0
|
|
||||||
});
|
});
|
||||||
|
|
||||||
const achievements = ref([
|
|
||||||
{ id: 'newbie', name: '新手飼主', desc: '養育超過 1 天', unlocked: false, icon: '🥚' },
|
|
||||||
{ id: 'veteran', name: '資深飼主', desc: '養育超過 7 天', unlocked: false, icon: '🏆' },
|
|
||||||
{ id: 'healthy', name: '健康寶寶', desc: '3歲且健康 > 90', unlocked: false, icon: '💪' },
|
|
||||||
{ id: 'happy', name: '快樂天使', desc: '3歲且快樂 > 90', unlocked: false, icon: '💖' }
|
|
||||||
]);
|
|
||||||
|
|
||||||
// --- Internal Timers ---
|
// --- Internal Timers ---
|
||||||
let gameLoopId = null;
|
let gameLoopId = null;
|
||||||
let tickCount = 0;
|
|
||||||
const TICK_RATE = 3000; // 3 seconds per tick
|
const TICK_RATE = 3000; // 3 seconds per tick
|
||||||
const TICKS_PER_DAY = 20; // For testing: 1 minute = 1 day (usually 28800 for 24h)
|
|
||||||
|
|
||||||
const isCleaning = ref(false);
|
const isCleaning = ref(false);
|
||||||
|
|
||||||
// --- Actions ---
|
// --- Actions ---
|
||||||
|
|
||||||
function assignDestiny() {
|
|
||||||
// Simple weighted random or just random for now
|
|
||||||
// Rarity 2 has lower chance
|
|
||||||
const roll = Math.random();
|
|
||||||
let pool = DESTINIES;
|
|
||||||
|
|
||||||
// 20% chance for rare destiny
|
|
||||||
if (roll < 0.2) {
|
|
||||||
pool = DESTINIES.filter(d => d.rarity === 2);
|
|
||||||
} else {
|
|
||||||
pool = DESTINIES.filter(d => d.rarity === 1);
|
|
||||||
}
|
|
||||||
|
|
||||||
const picked = pool[Math.floor(Math.random() * pool.length)];
|
|
||||||
stats.value.destiny = picked;
|
|
||||||
console.log('Assigned Destiny:', picked);
|
|
||||||
}
|
|
||||||
|
|
||||||
function feed() {
|
function feed() {
|
||||||
if (state.value === 'sleep' || state.value === 'dead' || stage.value === 'egg' || isCleaning.value) return false;
|
if (state.value === 'sleep' || state.value === 'dead' || stage.value === 'egg' || isCleaning.value) return false;
|
||||||
|
|
||||||
|
|
@ -92,9 +37,8 @@ export function usePetSystem() {
|
||||||
stats.value.hunger = Math.min(100, stats.value.hunger + 20);
|
stats.value.hunger = Math.min(100, stats.value.hunger + 20);
|
||||||
stats.value.weight += 50;
|
stats.value.weight += 50;
|
||||||
|
|
||||||
// Chance to poop after eating (降低機率)
|
// Chance to poop after eating
|
||||||
// Destiny Effect: Gluttony (暴食) might increase poop chance? Or just hunger decay.
|
if (Math.random() < 0.3) {
|
||||||
if (Math.random() < 0.15) { // 從 0.3 降到 0.15
|
|
||||||
setTimeout(() => {
|
setTimeout(() => {
|
||||||
if (stats.value.poopCount < 4) {
|
if (stats.value.poopCount < 4) {
|
||||||
stats.value.poopCount++;
|
stats.value.poopCount++;
|
||||||
|
|
@ -145,146 +89,43 @@ export function usePetSystem() {
|
||||||
if (state.value === 'dead' || stage.value === 'egg') return;
|
if (state.value === 'dead' || stage.value === 'egg') return;
|
||||||
|
|
||||||
// Decrease stats naturally
|
// Decrease stats naturally
|
||||||
// Destiny Effect: Gluttony (暴食) - Hunger decreases faster (+30%)
|
|
||||||
let hungerDecay = 0.05;
|
|
||||||
if (stats.value.destiny?.id === 'gluttony') {
|
|
||||||
hungerDecay *= 1.3;
|
|
||||||
}
|
|
||||||
|
|
||||||
// Destiny Effect: Playful (愛玩) - Happiness decreases faster
|
|
||||||
let happinessDecay = 0.08;
|
|
||||||
if (stats.value.destiny?.id === 'playful') {
|
|
||||||
happinessDecay *= 1.2; // Faster decay
|
|
||||||
}
|
|
||||||
|
|
||||||
// Destiny Effect: DEX (敏捷) - Hunger decreases slower
|
|
||||||
// DEX 10 = -10% decay, DEX 50 = -50% decay
|
|
||||||
if (stats.value.dex > 0) {
|
|
||||||
const reduction = Math.min(0.5, stats.value.dex * 0.01); // Max 50% reduction
|
|
||||||
hungerDecay *= (1 - reduction);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (state.value !== 'sleep') {
|
if (state.value !== 'sleep') {
|
||||||
stats.value.hunger = Math.max(0, stats.value.hunger - hungerDecay);
|
stats.value.hunger = Math.max(0, stats.value.hunger - 2);
|
||||||
stats.value.happiness = Math.max(0, stats.value.happiness - happinessDecay);
|
stats.value.happiness = Math.max(0, stats.value.happiness - 1);
|
||||||
} else {
|
} else {
|
||||||
// Slower decay when sleeping (約 1/3 速度)
|
// Slower decay when sleeping
|
||||||
stats.value.hunger = Math.max(0, stats.value.hunger - (hungerDecay * 0.3));
|
stats.value.hunger = Math.max(0, stats.value.hunger - 0.5);
|
||||||
stats.value.happiness = Math.max(0, stats.value.happiness - (happinessDecay * 0.3));
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Random poop generation (更低的機率：約 0.5% per tick)
|
// Random poop generation (5% chance per tick)
|
||||||
// 平均約每 200 ticks = 10 分鐘拉一次
|
if (state.value !== 'sleep' && Math.random() < 0.05 && stats.value.poopCount < 4 && !isCleaning.value) {
|
||||||
if (state.value !== 'sleep' && Math.random() < 0.005 && stats.value.poopCount < 4 && !isCleaning.value) {
|
|
||||||
stats.value.poopCount++;
|
stats.value.poopCount++;
|
||||||
}
|
}
|
||||||
|
|
||||||
// Health Logic (更溫和的健康下降)
|
// Health Logic (Poop hurts health)
|
||||||
// 便便影響健康：每個便便每 tick -0.1 health
|
|
||||||
if (stats.value.poopCount > 0) {
|
if (stats.value.poopCount > 0) {
|
||||||
stats.value.health = Math.max(0, stats.value.health - (0.1 * stats.value.poopCount));
|
stats.value.health = Math.max(0, stats.value.health - (2 * stats.value.poopCount));
|
||||||
}
|
}
|
||||||
|
|
||||||
// 飢餓影響健康：飢餓值低於 20 時開始影響健康
|
if (stats.value.hunger === 0) {
|
||||||
if (stats.value.hunger < 20) {
|
stats.value.health = Math.max(0, stats.value.health - 5);
|
||||||
const hungerPenalty = (20 - stats.value.hunger) * 0.02; // 飢餓越嚴重，扣越多
|
|
||||||
stats.value.health = Math.max(0, stats.value.health - hungerPenalty);
|
|
||||||
}
|
|
||||||
|
|
||||||
// 不開心影響健康：快樂值低於 20 時開始影響健康（較輕微）
|
|
||||||
if (stats.value.happiness < 20) {
|
|
||||||
const happinessPenalty = (20 - stats.value.happiness) * 0.01;
|
|
||||||
stats.value.health = Math.max(0, stats.value.health - happinessPenalty);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Sickness Check (更低的生病機率)
|
|
||||||
// Destiny Effect: Purification (淨化) - Sickness chance -20%
|
|
||||||
// Deity Buff: 媽祖 - Sickness chance -15%
|
|
||||||
let sickChance = 0.1;
|
|
||||||
if (stats.value.destiny?.id === 'purification') {
|
|
||||||
sickChance *= 0.8;
|
|
||||||
}
|
|
||||||
if (stats.value.currentDeity === 'mazu' && stats.value.deityFavors?.mazu > 0) {
|
|
||||||
sickChance *= 0.85;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
// Sickness Check
|
||||||
if (stats.value.health < 30 && state.value !== 'sick') {
|
if (stats.value.health < 30 && state.value !== 'sick') {
|
||||||
if (Math.random() < sickChance) {
|
if (Math.random() < 0.3) {
|
||||||
state.value = 'sick';
|
state.value = 'sick';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// Health Recovery (健康值可以緩慢恢復)
|
// Death Check
|
||||||
// 如果沒有便便、飢餓值和快樂值都高，健康值會緩慢恢復
|
if (stats.value.health === 0) {
|
||||||
let healthRecovery = 0.05;
|
state.value = 'dead';
|
||||||
|
|
||||||
// Deity Buff: 觀音 - Health 回復 +20%
|
|
||||||
if (stats.value.currentDeity === 'guanyin' && stats.value.deityFavors?.guanyin > 0) {
|
|
||||||
healthRecovery *= 1.2;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Deity Buff: 月老 - Happiness 回復 +25%
|
// Evolution / Growth (Simple Age increment)
|
||||||
if (stats.value.currentDeity === 'matchmaker' && stats.value.deityFavors?.matchmaker > 0) {
|
// In a real game, 1 day might be 24h, here maybe every 100 ticks?
|
||||||
// Apply to happiness decay reduction (slower decay = faster recovery)
|
// For now, let's just say age increases slowly.
|
||||||
happinessDecay *= 0.75;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (stats.value.poopCount === 0 && stats.value.hunger > 50 && stats.value.happiness > 50 && stats.value.health < 100 && state.value !== 'sick') {
|
|
||||||
stats.value.health = Math.min(100, stats.value.health + healthRecovery);
|
|
||||||
}
|
|
||||||
|
|
||||||
// Death Check (移除死亡機制，依照之前的討論)
|
|
||||||
// if (stats.value.health === 0) {
|
|
||||||
// state.value = 'dead';
|
|
||||||
// }
|
|
||||||
|
|
||||||
// Evolution / Growth
|
|
||||||
tickCount++;
|
|
||||||
if (tickCount >= TICKS_PER_DAY) {
|
|
||||||
stats.value.age++;
|
|
||||||
tickCount = 0;
|
|
||||||
checkEvolution();
|
|
||||||
}
|
|
||||||
|
|
||||||
checkAchievements();
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkAchievements() {
|
|
||||||
if (!achievements.value[0].unlocked && stats.value.age >= 1) {
|
|
||||||
unlockAchievement(0);
|
|
||||||
}
|
|
||||||
if (!achievements.value[1].unlocked && stats.value.age >= 7) {
|
|
||||||
unlockAchievement(1);
|
|
||||||
}
|
|
||||||
if (!achievements.value[2].unlocked && stats.value.age >= 3 && stats.value.health >= 90) {
|
|
||||||
unlockAchievement(2);
|
|
||||||
}
|
|
||||||
if (!achievements.value[3].unlocked && stats.value.age >= 3 && stats.value.happiness >= 90) {
|
|
||||||
unlockAchievement(3);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function unlockAchievement(index) {
|
|
||||||
if (!achievements.value[index].unlocked) {
|
|
||||||
achievements.value[index].unlocked = true;
|
|
||||||
triggerState('happy', 2000); // Celebrate achievement
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
function unlockAllAchievements() {
|
|
||||||
achievements.value.forEach(a => a.unlocked = true);
|
|
||||||
triggerState('happy', 2000);
|
|
||||||
}
|
|
||||||
|
|
||||||
function checkEvolution() {
|
|
||||||
// Simple evolution logic
|
|
||||||
if (stage.value === 'baby' && stats.value.age >= 3) {
|
|
||||||
stage.value = 'child';
|
|
||||||
triggerState('happy', 2000); // Celebrate
|
|
||||||
} else if (stage.value === 'child' && stats.value.age >= 7) {
|
|
||||||
stage.value = 'adult';
|
|
||||||
triggerState('happy', 2000);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- Helpers ---
|
// --- Helpers ---
|
||||||
|
|
@ -308,10 +149,6 @@ export function usePetSystem() {
|
||||||
stats.value.happiness = 50;
|
stats.value.happiness = 50;
|
||||||
stats.value.health = 100;
|
stats.value.health = 100;
|
||||||
stats.value.poopCount = 0;
|
stats.value.poopCount = 0;
|
||||||
|
|
||||||
// v2: Assign Destiny
|
|
||||||
assignDestiny();
|
|
||||||
|
|
||||||
isCleaning.value = false;
|
isCleaning.value = false;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -325,55 +162,9 @@ export function usePetSystem() {
|
||||||
happiness: 100,
|
happiness: 100,
|
||||||
health: 100,
|
health: 100,
|
||||||
weight: 500,
|
weight: 500,
|
||||||
age: 1,
|
age: 0,
|
||||||
poopCount: 0,
|
poopCount: 0
|
||||||
// v2 Reset
|
|
||||||
str: 0,
|
|
||||||
int: 0,
|
|
||||||
dex: 0,
|
|
||||||
generation: 1,
|
|
||||||
deityFavor: 0,
|
|
||||||
destiny: null
|
|
||||||
};
|
};
|
||||||
tickCount = 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
function resurrect() {
|
|
||||||
if (state.value !== 'dead') return;
|
|
||||||
|
|
||||||
state.value = 'idle';
|
|
||||||
stats.value.health = 50; // Revive with half health
|
|
||||||
stats.value.happiness = 50;
|
|
||||||
stats.value.hunger = 50;
|
|
||||||
|
|
||||||
// Penalty or Ghost Buff?
|
|
||||||
// For now just a console log, maybe visual effect later
|
|
||||||
console.log('Pet Resurrected!');
|
|
||||||
}
|
|
||||||
|
|
||||||
function reincarnate() {
|
|
||||||
// Inherit logic
|
|
||||||
const prevDestiny = stats.value.destiny;
|
|
||||||
const prevFavor = stats.value.deityFavor;
|
|
||||||
const nextGen = (stats.value.generation || 1) + 1;
|
|
||||||
|
|
||||||
// Reset everything
|
|
||||||
reset();
|
|
||||||
|
|
||||||
// Apply Inheritance
|
|
||||||
stats.value.generation = nextGen;
|
|
||||||
|
|
||||||
// 20% Favor inheritance
|
|
||||||
stats.value.deityFavor = Math.floor(prevFavor * 0.2);
|
|
||||||
|
|
||||||
// Destiny Inheritance (Optional: Maybe keep if it was a rare one?)
|
|
||||||
// For now, let's say if you had a Rare (2) destiny, you keep it.
|
|
||||||
// Otherwise, you get a new one on hatch.
|
|
||||||
if (prevDestiny && prevDestiny.rarity === 2) {
|
|
||||||
stats.value.destiny = prevDestiny;
|
|
||||||
}
|
|
||||||
|
|
||||||
console.log('Pet Reincarnated to Gen', nextGen);
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// --- Lifecycle ---
|
// --- Lifecycle ---
|
||||||
|
|
@ -395,11 +186,6 @@ export function usePetSystem() {
|
||||||
clean,
|
clean,
|
||||||
sleep,
|
sleep,
|
||||||
hatchEgg,
|
hatchEgg,
|
||||||
reset,
|
reset
|
||||||
achievements,
|
|
||||||
unlockAllAchievements,
|
|
||||||
assignDestiny, // Export for debug if needed
|
|
||||||
resurrect,
|
|
||||||
reincarnate
|
|
||||||
};
|
};
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -74,140 +74,37 @@ export const SPRITE_PRESETS = {
|
||||||
iconBackLeft: { x: 3, y: 2 },
|
iconBackLeft: { x: 3, y: 2 },
|
||||||
iconBackRight: { x: 12, y: 2 },
|
iconBackRight: { x: 12, y: 2 },
|
||||||
},
|
},
|
||||||
tinyTigerCatB: {
|
tinyTigerCat: {
|
||||||
id: 'tinyTigerCatB',
|
|
||||||
meta: {
|
|
||||||
name: '小虎斑貓',
|
name: '小虎斑貓',
|
||||||
displayNameEn: 'Tiny Tiger Cat',
|
|
||||||
species: 'cat',
|
|
||||||
element: 'normal',
|
|
||||||
description: '一隻活潑、黏人的小虎斑貓，喜歡被餵食和玩耍。'
|
|
||||||
},
|
|
||||||
|
|
||||||
// === 1. 生命週期設定 ===
|
|
||||||
lifecycle: {
|
|
||||||
baseLifeMinutes: 7 * 24 * 60,
|
|
||||||
stages: [
|
|
||||||
{
|
|
||||||
id: 'egg',
|
|
||||||
name: '蛋',
|
|
||||||
minAgeMinutes: 0,
|
|
||||||
maxAgeMinutes: 30,
|
|
||||||
spriteKey: 'egg',
|
|
||||||
canBattle: false,
|
|
||||||
canEquip: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'baby',
|
|
||||||
name: '幼年期',
|
|
||||||
minAgeMinutes: 30,
|
|
||||||
maxAgeMinutes: 6 * 60,
|
|
||||||
spriteKey: 'child',
|
|
||||||
canBattle: false,
|
|
||||||
canEquip: false
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'child',
|
|
||||||
name: '成長期',
|
|
||||||
minAgeMinutes: 6 * 60,
|
|
||||||
maxAgeMinutes: 24 * 60,
|
|
||||||
spriteKey: 'child',
|
|
||||||
canBattle: true,
|
|
||||||
canEquip: true
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'adult',
|
|
||||||
name: '成熟期',
|
|
||||||
minAgeMinutes: 24 * 60,
|
|
||||||
maxAgeMinutes: Infinity,
|
|
||||||
spriteKey: 'adult',
|
|
||||||
canBattle: true,
|
|
||||||
canEquip: true
|
|
||||||
}
|
|
||||||
],
|
|
||||||
evolutionRules: [
|
|
||||||
{
|
|
||||||
fromStage: 'baby',
|
|
||||||
toStage: 'child',
|
|
||||||
condition: {
|
|
||||||
maxHungerEvents: 5,
|
|
||||||
maxSicknessEvents: 2
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
|
|
||||||
// === 2. 需求衰減設定 ===
|
|
||||||
needs: {
|
|
||||||
hunger: {
|
|
||||||
max: 100,
|
|
||||||
startValue: 70,
|
|
||||||
decayPerMinute: 2,
|
|
||||||
warnThreshold: 40,
|
|
||||||
criticalThreshold: 10,
|
|
||||||
feedRecover: 40
|
|
||||||
},
|
|
||||||
happiness: {
|
|
||||||
max: 100,
|
|
||||||
startValue: 60,
|
|
||||||
decayPerMinute: 1,
|
|
||||||
playRecover: 25,
|
|
||||||
lowThreshold: 30
|
|
||||||
},
|
|
||||||
cleanliness: {
|
|
||||||
max: 100,
|
|
||||||
startValue: 80,
|
|
||||||
decayPerPoop: 30,
|
|
||||||
criticalThreshold: 30
|
|
||||||
},
|
|
||||||
energy: {
|
|
||||||
max: 100,
|
|
||||||
startValue: 80,
|
|
||||||
decayPerMinuteActive: 2,
|
|
||||||
recoverPerMinuteSleep: 5,
|
|
||||||
sleepSuggestThreshold: 30
|
|
||||||
},
|
|
||||||
poop: {
|
|
||||||
feedsPerPoop: 3,
|
|
||||||
maxPoopOnScreen: 3
|
|
||||||
},
|
|
||||||
sickness: {
|
|
||||||
baseChancePerMinute: 0.001,
|
|
||||||
extraChanceIfDirty: 0.01,
|
|
||||||
extraChanceIfStarving: 0.02
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// === 3. 數值設定 ===
|
|
||||||
stats: {
|
|
||||||
base: {
|
|
||||||
hp: 30,
|
|
||||||
attack: 8,
|
|
||||||
defense: 5,
|
|
||||||
speed: 7
|
|
||||||
},
|
|
||||||
stageModifiers: {
|
|
||||||
baby: { hp: 0.6, attack: 0.5, defense: 0.5, speed: 0.8 },
|
|
||||||
child: { hp: 1.0, attack: 1.0, defense: 1.0, speed: 1.0 },
|
|
||||||
adult: { hp: 1.4, attack: 1.3, defense: 1.2, speed: 1.1 }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// === 4. 外觀 / Sprite 設定 ===
|
|
||||||
appearance: {
|
|
||||||
pixelSize: 3,
|
pixelSize: 3,
|
||||||
sprites: {
|
sprite: [
|
||||||
child: {
|
'0000000000000000',
|
||||||
idle: [
|
'0011000000110000', // row 1 - Ears
|
||||||
|
'0122111111221000', // row 2
|
||||||
|
'0122222222221000', // row 3
|
||||||
|
'0122322223221000', // row 4 - Stripes
|
||||||
|
'0122222222221000', // row 5
|
||||||
|
'0120022220021000', // row 6 - Eyes
|
||||||
|
'0122223322221000', // row 7 - Nose/Mouth
|
||||||
|
'0122222222221000', // row 8
|
||||||
|
'0011222222110000', // row 9 - Body
|
||||||
|
'0001222222121000', // row 10 - Body + Tail
|
||||||
|
'0001222222121000', // row 11
|
||||||
|
'0001100110110000', // row 12 - Legs
|
||||||
|
'0000000000000000', // row 13
|
||||||
|
'0000000000000000', // row 14
|
||||||
|
'0000000000000000', // row 15
|
||||||
|
],
|
||||||
|
spriteMouthOpen: [
|
||||||
'0000000000000000',
|
'0000000000000000',
|
||||||
'0011000000110000',
|
'0011000000110000',
|
||||||
'0124444111442100',
|
'0122111111221000',
|
||||||
'0123222323221000',
|
'0122222222221000',
|
||||||
'0122322223221000',
|
'0122322223221000',
|
||||||
'0122522222522100',
|
'0122222222221000',
|
||||||
'0125052225052100',
|
'0120022220021000',
|
||||||
'0112223322221100',
|
'0122223322221000',
|
||||||
'0122220222221000',
|
'0122200002221000', // Mouth Open
|
||||||
'0011222222110000',
|
'0011222222110000',
|
||||||
'0001222222121000',
|
'0001222222121000',
|
||||||
'0001222222121000',
|
'0001222222121000',
|
||||||
|
|
@ -216,7 +113,54 @@ export const SPRITE_PRESETS = {
|
||||||
'0000000000000000',
|
'0000000000000000',
|
||||||
'0000000000000000',
|
'0000000000000000',
|
||||||
],
|
],
|
||||||
mouthOpen: [
|
palette: {
|
||||||
|
'0': '#000000', // Black eyes/outline
|
||||||
|
'1': '#2b1d12', // Dark brown outline
|
||||||
|
'2': '#ffb347', // Orange fur
|
||||||
|
'3': '#cd853f', // Darker stripes/nose
|
||||||
|
},
|
||||||
|
tailPixels: [
|
||||||
|
[11, 10], [12, 10],
|
||||||
|
[11, 11], [12, 11],
|
||||||
|
],
|
||||||
|
earPixels: [
|
||||||
|
[2, 1], [3, 1],
|
||||||
|
[10, 1], [11, 1],
|
||||||
|
],
|
||||||
|
legFrontPixels: [
|
||||||
|
[4, 12], [5, 12],
|
||||||
|
],
|
||||||
|
legBackPixels: [
|
||||||
|
[8, 12], [9, 12],
|
||||||
|
],
|
||||||
|
blushPixels: [
|
||||||
|
[3, 7], [10, 7]
|
||||||
|
],
|
||||||
|
iconBackLeft: { x: 2, y: 2 },
|
||||||
|
iconBackRight: { x: 11, y: 2 }
|
||||||
|
},
|
||||||
|
tinyTigerCatB: {
|
||||||
|
name: '小虎斑貓',
|
||||||
|
pixelSize: 3,
|
||||||
|
sprite: [
|
||||||
|
'0000000000000000',
|
||||||
|
'0011000000110000', // row 1 - Ears
|
||||||
|
'0124444111442100', // row 2 粉紅耳朵內側
|
||||||
|
'0123222323221000', // row 3 三條虎紋
|
||||||
|
'0122322223221000', // row 4 - Stripes
|
||||||
|
'0122522222522100', // row 5 眼睛反光
|
||||||
|
'0125052225052100', // row 6 大圓眼＋黑瞳孔＋白反光
|
||||||
|
'0112223322221100', // row 7 鼻子＋左右鬍鬚
|
||||||
|
'0122220222221000', // row 8 小微笑
|
||||||
|
'0011222222110000', // row 9 - Body
|
||||||
|
'0001222222121000', // row 10 - Body + Tail
|
||||||
|
'0001222222121000', // row 11
|
||||||
|
'0001100110110000', // row 12 - Legs
|
||||||
|
'0000000000000000', // row 13
|
||||||
|
'0000000000000000', // row 14
|
||||||
|
'0000000000000000', // row 15
|
||||||
|
],
|
||||||
|
spriteMouthOpen: [
|
||||||
'0000000000000000',
|
'0000000000000000',
|
||||||
'0011000000110000',
|
'0011000000110000',
|
||||||
'0124444111442100',
|
'0124444111442100',
|
||||||
|
|
@ -225,7 +169,7 @@ export const SPRITE_PRESETS = {
|
||||||
'0122522222522100',
|
'0122522222522100',
|
||||||
'0125052225052100',
|
'0125052225052100',
|
||||||
'0112223322221100',
|
'0112223322221100',
|
||||||
'0122204002221000',
|
'0122204002221000', // Mouth Open 粉紅舌頭
|
||||||
'0011222222110000',
|
'0011222222110000',
|
||||||
'0001222222121000',
|
'0001222222121000',
|
||||||
'0001222222121000',
|
'0001222222121000',
|
||||||
|
|
@ -234,62 +178,14 @@ export const SPRITE_PRESETS = {
|
||||||
'0000000000000000',
|
'0000000000000000',
|
||||||
'0000000000000000',
|
'0000000000000000',
|
||||||
],
|
],
|
||||||
eyesClosed: [
|
palette: {
|
||||||
'0000000000000000',
|
'0': '#000000', // Black eyes/outline
|
||||||
'0011000000110000',
|
'1': '#2b1d12', // Dark brown outline
|
||||||
'0124444111442100',
|
'2': '#ffb347', // Orange fur
|
||||||
'0123222323221000',
|
'3': '#cd853f', // Darker stripes/nose
|
||||||
'0122322223221000',
|
'4': '#ffb6c1', // Pink (ears, blush, tongue)
|
||||||
'0122522222522100',
|
'5': '#ffffff' // White eye highlight
|
||||||
'0122222222222100',
|
|
||||||
'0112223322221100',
|
|
||||||
'0122220222221000',
|
|
||||||
'0011222222110000',
|
|
||||||
'0001222222121000',
|
|
||||||
'0001222222121000',
|
|
||||||
'0001100110110000',
|
|
||||||
'0000000000000000',
|
|
||||||
'0000000000000000',
|
|
||||||
'0000000000000000',
|
|
||||||
]
|
|
||||||
},
|
},
|
||||||
egg: {
|
|
||||||
idle: [
|
|
||||||
'0000000000000000',
|
|
||||||
'0000000000000000',
|
|
||||||
'0000000111000000',
|
|
||||||
'0000001222100000',
|
|
||||||
'0000012232210000',
|
|
||||||
'0000122333221000',
|
|
||||||
'0000122232221000',
|
|
||||||
'0001222222222100',
|
|
||||||
'0001233322332100',
|
|
||||||
'0001223222232100',
|
|
||||||
'0000122222221000',
|
|
||||||
'0000122222221000',
|
|
||||||
'0000011222110000',
|
|
||||||
'0000000111000000',
|
|
||||||
'0000000000000000',
|
|
||||||
'0000000000000000',
|
|
||||||
]
|
|
||||||
}
|
|
||||||
},
|
|
||||||
palettes: {
|
|
||||||
default: {
|
|
||||||
'0': '#000000',
|
|
||||||
'1': '#2b1d12',
|
|
||||||
'2': '#ffb347',
|
|
||||||
'3': '#cd853f',
|
|
||||||
'4': '#ffb6c1',
|
|
||||||
'5': '#ffffff'
|
|
||||||
},
|
|
||||||
egg: {
|
|
||||||
'1': '#5d4037',
|
|
||||||
'2': '#fff8e1',
|
|
||||||
'3': '#ffb74d',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
bodyParts: {
|
|
||||||
tailPixels: [
|
tailPixels: [
|
||||||
[11, 10], [12, 10],
|
[11, 10], [12, 10],
|
||||||
[11, 11], [12, 11],
|
[11, 11], [12, 11],
|
||||||
|
|
@ -308,191 +204,53 @@ export const SPRITE_PRESETS = {
|
||||||
[3, 7], [10, 7]
|
[3, 7], [10, 7]
|
||||||
],
|
],
|
||||||
eyePixels: [
|
eyePixels: [
|
||||||
[3, 6], [4, 6],
|
[3, 6], [4, 6], // Left eye
|
||||||
[8, 6], [9, 6]
|
[8, 6], [9, 6] // Right eye
|
||||||
|
],
|
||||||
|
spriteEyesClosed: [
|
||||||
|
'0000000000000000',
|
||||||
|
'0011000000110000',
|
||||||
|
'0124444111442100',
|
||||||
|
'0123222323221000',
|
||||||
|
'0122322223221000',
|
||||||
|
'0122522222522100',
|
||||||
|
'0122222222222100', // row 6 - Eyes closed (all '2' = closed eyes)
|
||||||
|
'0112223322221100',
|
||||||
|
'0122220222221000',
|
||||||
|
'0011222222110000',
|
||||||
|
'0001222222121000',
|
||||||
|
'0001222222121000',
|
||||||
|
'0001100110110000',
|
||||||
|
'0000000000000000',
|
||||||
|
'0000000000000000',
|
||||||
|
'0000000000000000',
|
||||||
],
|
],
|
||||||
iconBackLeft: { x: 2, y: 2 },
|
iconBackLeft: { x: 2, y: 2 },
|
||||||
iconBackRight: { x: 13, y: 2 }
|
iconBackRight: { x: 13, y: 2 },
|
||||||
},
|
|
||||||
behaviorAnimation: {
|
|
||||||
blinkIntervalSec: 5,
|
|
||||||
blinkDurationMs: 200,
|
|
||||||
mouthOpenDurationMs: 300,
|
|
||||||
idleEmoteIntervalSec: 15
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
// === 5. 裝備設定 ===
|
// Growth Stages
|
||||||
equipment: {
|
eggSprite: [
|
||||||
slots: ['head', 'face', 'neck', 'back'],
|
'0000000000000000',
|
||||||
items: [
|
'0000000000000000',
|
||||||
{
|
'0000000111000000', // Top (Narrow)
|
||||||
id: 'sunglasses_basic',
|
'0000001222100000',
|
||||||
name: '基本墨鏡',
|
'0000012232210000', // Small stripe
|
||||||
slot: 'face',
|
'0000122333221000',
|
||||||
overlays: {
|
'0000122232221000',
|
||||||
child: {
|
'0001222222222100', // Widest part
|
||||||
pixels: [
|
'0001233322332100', // Side stripes
|
||||||
{ x: 3, y: 6, color: '0' },
|
'0001223222232100',
|
||||||
{ x: 4, y: 6, color: '0' },
|
'0000122222221000',
|
||||||
{ x: 8, y: 6, color: '0' },
|
'0000122222221000',
|
||||||
{ x: 9, y: 6, color: '0' },
|
'0000011222110000', // Bottom
|
||||||
]
|
'0000000111000000',
|
||||||
}
|
'0000000000000000',
|
||||||
},
|
'0000000000000000',
|
||||||
statModifiers: {
|
|
||||||
coolness: +10
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
|
|
||||||
// === 6. 個性系統 ===
|
|
||||||
personality: {
|
|
||||||
traits: [
|
|
||||||
{
|
|
||||||
id: 'clingy',
|
|
||||||
name: '黏人',
|
|
||||||
description: '喜歡被互動，不理牠會生氣',
|
|
||||||
effects: {
|
|
||||||
decayRateMultiplier: { happiness: 1.2 },
|
|
||||||
idleActionChance: { 'seek_owner': 0.3 }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'aggressive',
|
|
||||||
name: '暴躁',
|
|
||||||
description: '吃東西時容易咬碗',
|
|
||||||
effects: {
|
|
||||||
decayRateMultiplier: { hunger: 1.1 },
|
|
||||||
interactionReaction: { 'poke': 'bite' }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'lazy',
|
|
||||||
name: '懶惰',
|
|
||||||
description: '容易睡過頭',
|
|
||||||
effects: {
|
|
||||||
decayRateMultiplier: { energy: 0.8 },
|
|
||||||
sleepDurationMultiplier: 1.2
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'curious',
|
|
||||||
name: '好奇',
|
|
||||||
description: 'Idle 時會到處張望',
|
|
||||||
effects: {
|
|
||||||
idleActionChance: { 'explore': 0.4 }
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'shy',
|
|
||||||
name: '膽小',
|
|
||||||
description: '怕生',
|
|
||||||
effects: {
|
|
||||||
stressThreshold: 0.8
|
|
||||||
}
|
|
||||||
}
|
|
||||||
],
|
],
|
||||||
defaultTrait: 'clingy'
|
eggPalette: {
|
||||||
},
|
'1': '#5d4037', // Dark brown outline
|
||||||
|
'2': '#fff8e1', // Creamy white shell
|
||||||
// === 7. 情緒濾鏡（Mood System）===
|
'3': '#ffb74d', // Orange tiger stripes
|
||||||
mood: {
|
|
||||||
states: [
|
|
||||||
{
|
|
||||||
id: 'happy',
|
|
||||||
name: '開心',
|
|
||||||
condition: 'needs.happiness > 80 && needs.hunger > 50',
|
|
||||||
spriteModifier: 'bounce'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'sleepy',
|
|
||||||
name: '愛睏',
|
|
||||||
condition: 'needs.energy < 30',
|
|
||||||
spriteModifier: 'yawn'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'naughty',
|
|
||||||
name: '調皮',
|
|
||||||
condition: 'needs.happiness > 90 && needs.energy > 90',
|
|
||||||
spriteModifier: 'prank'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'angry',
|
|
||||||
name: '生氣',
|
|
||||||
condition: 'needs.happiness < 20',
|
|
||||||
spriteModifier: 'turn_away'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'sad',
|
|
||||||
name: '難過',
|
|
||||||
condition: 'needs.happiness < 40 || needs.sickness > 0',
|
|
||||||
spriteModifier: 'cry'
|
|
||||||
}
|
}
|
||||||
],
|
|
||||||
updateIntervalMinutes: 60
|
|
||||||
},
|
|
||||||
|
|
||||||
// === 8. 隨機事件 ===
|
|
||||||
randomEvents: [
|
|
||||||
{
|
|
||||||
id: 'gift_flower',
|
|
||||||
name: '叼來一朵花',
|
|
||||||
chance: 0.05,
|
|
||||||
effects: { happiness: +20, message: '送你一朵花！' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'play_toy',
|
|
||||||
name: '自己找玩具玩',
|
|
||||||
chance: 0.1,
|
|
||||||
effects: { happiness: +10, animation: 'play' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'sneeze',
|
|
||||||
name: '打噴嚏',
|
|
||||||
chance: 0.05,
|
|
||||||
effects: { sickness: +10, animation: 'sneeze' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'find_treasure',
|
|
||||||
name: '挖到寶物',
|
|
||||||
chance: 0.01,
|
|
||||||
effects: { happiness: +50, message: '挖到金幣了！' }
|
|
||||||
},
|
|
||||||
{
|
|
||||||
id: 'nightmare',
|
|
||||||
name: '做惡夢',
|
|
||||||
chance: 0.05,
|
|
||||||
condition: { time: 'night' },
|
|
||||||
effects: { happiness: -20, energy: -10, message: '做惡夢了...' }
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
// Backward Compatibility Layer
|
|
||||||
// Create flat versions for components that expect the old structure
|
|
||||||
export const SPRITE_PRESETS_FLAT = {
|
|
||||||
tigerChick: SPRITE_PRESETS.tigerChick,
|
|
||||||
tinyTigerCat: SPRITE_PRESETS.tinyTigerCat,
|
|
||||||
tinyTigerCatB: {
|
|
||||||
// Legacy flat structure for backward compatibility
|
|
||||||
name: SPRITE_PRESETS.tinyTigerCatB.meta.name,
|
|
||||||
pixelSize: SPRITE_PRESETS.tinyTigerCatB.appearance.pixelSize,
|
|
||||||
sprite: SPRITE_PRESETS.tinyTigerCatB.appearance.sprites.child.idle,
|
|
||||||
spriteMouthOpen: SPRITE_PRESETS.tinyTigerCatB.appearance.sprites.child.mouthOpen,
|
|
||||||
spriteEyesClosed: SPRITE_PRESETS.tinyTigerCatB.appearance.sprites.child.eyesClosed,
|
|
||||||
palette: SPRITE_PRESETS.tinyTigerCatB.appearance.palettes.default,
|
|
||||||
tailPixels: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.tailPixels,
|
|
||||||
earPixels: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.earPixels,
|
|
||||||
legFrontPixels: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.legFrontPixels,
|
|
||||||
legBackPixels: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.legBackPixels,
|
|
||||||
blushPixels: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.blushPixels,
|
|
||||||
eyePixels: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.eyePixels,
|
|
||||||
iconBackLeft: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.iconBackLeft,
|
|
||||||
iconBackRight: SPRITE_PRESETS.tinyTigerCatB.appearance.bodyParts.iconBackRight,
|
|
||||||
eggSprite: SPRITE_PRESETS.tinyTigerCatB.appearance.sprites.egg.idle,
|
|
||||||
eggPalette: SPRITE_PRESETS.tinyTigerCatB.appearance.palettes.egg
|
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue