Compare commits
11 Commits
feat/add_f
...
main
| Author | SHA1 | Date |
|---|---|---|
 王性驊
|
00862de989 | |
|
王性驊
|
34adb9c15c | |
|
王性驊
|
53bdcb8a9d | |
|
王性驊
|
1c068b1672 | |
|
王性驊
|
11c01fb1ea | |
|
王性驊
|
687a83922f | |
|
王性驊
|
3c9a7f1e7b | |
|
王性驊
|
01cf45ceb9 | |
王性驊
|
4dddadcaf7 | |
|
王性驊
|
737b74f220 | |
|
王性驊
|
2e10064a00 |
15
index.html
15
index.html
|
|
@ -1,13 +1,16 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<link rel="icon" type="image/png" href="/logo.png" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>temp-vue-app</title>
|
||||
</head>
|
||||
<body>
|
||||
<title>Virtual Pet & Fortune</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div id="app"></div>
|
||||
<script type="module" src="/src/main.js"></script>
|
||||
</body>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 815 KiB |
82
src/App.vue
82
src/App.vue
|
|
@ -5,12 +5,15 @@ import DeviceScreen from './components/DeviceScreen.vue';
|
|||
import PetGame from './components/PetGame.vue';
|
||||
import Menu from './components/Menu.vue';
|
||||
import { usePetSystem } from './composables/usePetSystem';
|
||||
import { useEventSystem } from './composables/useEventSystem';
|
||||
|
||||
const currentScreen = ref('game');
|
||||
const petGameRef = ref(null);
|
||||
const showStats = ref(false); // Stats visibility
|
||||
const debugAction = ref(null); // For passing debug commands to PetGame
|
||||
|
||||
// Initialize Pet System
|
||||
const petSystem = usePetSystem();
|
||||
const {
|
||||
stage,
|
||||
state,
|
||||
|
|
@ -21,29 +24,59 @@ const {
|
|||
clean,
|
||||
isCleaning,
|
||||
hatchEgg,
|
||||
reset
|
||||
} = usePetSystem();
|
||||
reset,
|
||||
achievements,
|
||||
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
|
||||
function handleAction(action) {
|
||||
switch(action) {
|
||||
case 'feed':
|
||||
feed();
|
||||
const feedResult = feed();
|
||||
// If refused (sick or full), shake head
|
||||
if (!feedResult && petGameRef.value) {
|
||||
petGameRef.value.shakeHead();
|
||||
}
|
||||
break;
|
||||
case 'clean':
|
||||
clean();
|
||||
break;
|
||||
case 'play':
|
||||
play();
|
||||
if (play()) {
|
||||
if (petGameRef.value) {
|
||||
petGameRef.value.startPlaying();
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'sleep':
|
||||
sleep();
|
||||
break;
|
||||
case 'medicine':
|
||||
// Heal the pet
|
||||
// Heal the pet with animation
|
||||
if (state.value === 'sick') {
|
||||
if (petGameRef.value) {
|
||||
// Trigger medicine animation
|
||||
petGameRef.value.startFeeding('medicine').then(() => {
|
||||
stats.value.health = 100;
|
||||
state.value = 'idle';
|
||||
});
|
||||
} else {
|
||||
// Fallback if ref not ready
|
||||
stats.value.health = 100;
|
||||
state.value = 'idle';
|
||||
}
|
||||
}
|
||||
break;
|
||||
case 'stats':
|
||||
|
|
@ -58,6 +91,22 @@ function handleAction(action) {
|
|||
reset();
|
||||
}
|
||||
break;
|
||||
case 'jiaobei':
|
||||
// 擲筊功能 - 待實作
|
||||
console.log('擲筊功能');
|
||||
// TODO: 實作擲筊邏輯
|
||||
break;
|
||||
case 'fortune':
|
||||
// 求籤功能 - 待實作
|
||||
console.log('求籤功能');
|
||||
// TODO: 實作求籤邏輯
|
||||
break;
|
||||
case 'resurrect':
|
||||
resurrect();
|
||||
break;
|
||||
case 'reincarnate':
|
||||
reincarnate();
|
||||
break;
|
||||
default:
|
||||
console.log('Action not implemented:', action);
|
||||
}
|
||||
|
|
@ -67,6 +116,10 @@ function handleAction(action) {
|
|||
function setPetState(newState) {
|
||||
state.value = newState;
|
||||
}
|
||||
|
||||
function triggerDebugAction(action, payload = null) {
|
||||
debugAction.value = { type: action, payload, timestamp: Date.now() };
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
|
|
@ -81,6 +134,9 @@ function setPetState(newState) {
|
|||
:stats="stats"
|
||||
:isCleaning="isCleaning"
|
||||
:showStats="showStats"
|
||||
:debugAction="debugAction"
|
||||
:achievements="achievements"
|
||||
:currentEvent="currentEvent"
|
||||
@update:state="state = $event"
|
||||
@action="handleAction"
|
||||
/>
|
||||
|
|
@ -106,6 +162,22 @@ function setPetState(newState) {
|
|||
<button v-if="stage === 'egg'" @click="hatchEgg()">🥚 Hatch Egg</button>
|
||||
<button v-else @click="reset()">🔄 Reset to Egg</button>
|
||||
</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>
|
||||
</template>
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="action-menu">
|
||||
<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="Medicine"></button>
|
||||
<button class="icon-btn icon-training" @click="$emit('training')" :disabled="disabled" title="Training"></button>
|
||||
<button class="icon-btn icon-info" @click="$emit('info')" :disabled="disabled" title="Info"></button>
|
||||
<button class="icon-btn icon-clean" @click="$emit('clean')" :disabled="disabled || poopCount === 0" title="清理"></button>
|
||||
<button class="icon-btn icon-medicine" @click="$emit('medicine')" :disabled="disabled || !isSick" title="治療"></button>
|
||||
<button class="icon-btn icon-sleep" @click="$emit('sleep')" :disabled="disabled" title="關燈"></button>
|
||||
<button class="icon-btn icon-backpack" @click="$emit('inventory')" :disabled="disabled" title="背包"></button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -27,7 +27,7 @@ const props = defineProps({
|
|||
}
|
||||
});
|
||||
|
||||
defineEmits(['clean', 'medicine', 'training', 'info']);
|
||||
defineEmits(['clean', 'medicine', 'sleep', 'inventory']);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -90,37 +90,54 @@ defineEmits(['clean', 'medicine', 'training', 'info']);
|
|||
0px 4px 0 #ff4444, 0px 6px 0 #ff4444;
|
||||
}
|
||||
|
||||
/* Training Icon (Dumbbell) */
|
||||
.icon-training::before {
|
||||
/* Sleep Icon (Light Bulb/燈泡) - Enhanced */
|
||||
.icon-sleep::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: #444;
|
||||
background: transparent;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow:
|
||||
-6px -2px 0 #444, -6px 0px 0 #444, -6px 2px 0 #444,
|
||||
-4px -2px 0 #444, -4px 0px 0 #444, -4px 2px 0 #444,
|
||||
-2px 0px 0 #444, 0px 0px 0 #444, 2px 0px 0 #444,
|
||||
4px -2px 0 #444, 4px 0px 0 #444, 4px 2px 0 #444,
|
||||
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 -4px 0 #ffd700, -2px -4px 0 #ffd700, 0px -4px 0 #ffd700, 2px -4px 0 #ffd700, 4px -4px 0 #ffd700,
|
||||
-4px -2px 0 #ffd700, -2px -2px 0 #ffd700, 0px -2px 0 #ffd700, 2px -2px 0 #ffd700, 4px -2px 0 #ffd700,
|
||||
-4px 0px 0 #ffd700, -2px 0px 0 #ffd700, 0px 0px 0 #ffd700, 2px 0px 0 #ffd700, 4px 0px 0 #ffd700,
|
||||
-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;
|
||||
}
|
||||
|
||||
/* Info Icon (i) */
|
||||
.icon-info::before {
|
||||
/* Backpack Icon */
|
||||
.icon-backpack::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: #4444ff;
|
||||
background: #8d6e63;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow:
|
||||
0px -6px 0 #4444ff,
|
||||
0px -2px 0 #4444ff, 0px 0px 0 #4444ff,
|
||||
0px 2px 0 #4444ff, 0px 4px 0 #4444ff, 0px 6px 0 #4444ff;
|
||||
/* Top flap */
|
||||
-2px -6px 0 #8d6e63, 0px -6px 0 #8d6e63, 2px -6px 0 #8d6e63,
|
||||
-4px -4px 0 #8d6e63, -2px -4px 0 #a1887f, 0px -4px 0 #a1887f, 2px -4px 0 #a1887f, 4px -4px 0 #8d6e63,
|
||||
|
||||
/* 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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,307 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,637 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,238 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,266 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,617 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,416 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,333 @@
|
|||
<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
|
|
@ -0,0 +1,773 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,212 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,174 @@
|
|||
<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,5 +1,7 @@
|
|||
<template>
|
||||
<div class="stats-bar">
|
||||
<div class="stats-content">
|
||||
<div class="stat-rows">
|
||||
<div class="stat-row">
|
||||
<div class="stat-icon pixel-heart"></div>
|
||||
<div class="pixel-bar">
|
||||
|
|
@ -8,12 +10,12 @@
|
|||
:key="'happy-' + i"
|
||||
class="pixel-block"
|
||||
:class="{
|
||||
'filled': i <= Math.floor(happiness / 10),
|
||||
'color-red': i <= Math.floor(happiness / 10)
|
||||
'filled': i <= Math.floor(displayHappiness / 10),
|
||||
'color-red': i <= Math.floor(displayHappiness / 10)
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<span class="stat-value" :class="{ 'warning': happiness < 30 }">{{ happiness }}</span>
|
||||
<span class="stat-value" :class="{ 'warning': displayHappiness < 30 }">{{ displayHappiness }}</span>
|
||||
</div>
|
||||
|
||||
<div class="stat-row">
|
||||
|
|
@ -24,12 +26,12 @@
|
|||
:key="'food-' + i"
|
||||
class="pixel-block"
|
||||
:class="{
|
||||
'filled': i <= Math.floor(hunger / 10),
|
||||
'color-yellow': i <= Math.floor(hunger / 10)
|
||||
'filled': i <= Math.floor(displayHunger / 10),
|
||||
'color-yellow': i <= Math.floor(displayHunger / 10)
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<span class="stat-value" :class="{ 'warning': hunger < 30 }">{{ hunger }}</span>
|
||||
<span class="stat-value" :class="{ 'warning': displayHunger < 30 }">{{ displayHunger }}</span>
|
||||
</div>
|
||||
|
||||
<div class="stat-row">
|
||||
|
|
@ -40,17 +42,26 @@
|
|||
:key="'health-' + i"
|
||||
class="pixel-block"
|
||||
:class="{
|
||||
'filled': i <= Math.floor(health / 10),
|
||||
'color-green': i <= Math.floor(health / 10)
|
||||
'filled': i <= Math.floor(displayHealth / 10),
|
||||
'color-green': i <= Math.floor(displayHealth / 10)
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<span class="stat-value" :class="{ 'warning': health < 30 }">{{ health }}</span>
|
||||
<span class="stat-value" :class="{ 'warning': displayHealth < 30 }">{{ displayHealth }}</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>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
hunger: {
|
||||
type: Number,
|
||||
|
|
@ -63,18 +74,54 @@ const props = defineProps({
|
|||
health: {
|
||||
type: Number,
|
||||
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>
|
||||
|
||||
<style scoped>
|
||||
.stats-bar {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
padding: 4px 8px 3px 8px;
|
||||
background: rgba(155, 188, 15, 0.08);
|
||||
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 {
|
||||
|
|
@ -235,4 +282,206 @@ const props = defineProps({
|
|||
0%, 100% { opacity: 1; }
|
||||
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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
<template>
|
||||
<div class="top-menu">
|
||||
<button class="icon-btn icon-stats" @click="$emit('stats')" title="Stats"></button>
|
||||
<button class="icon-btn icon-stats" @click="$emit('info')" title="Status"></button>
|
||||
<button class="icon-btn icon-feed" @click="$emit('feed')" :disabled="disabled" title="Feed"></button>
|
||||
<button class="icon-btn icon-play" @click="$emit('play')" :disabled="disabled" title="Play"></button>
|
||||
<button class="icon-btn icon-sleep" @click="$emit('sleep')" :disabled="disabled" title="Sleep"></button>
|
||||
<button class="icon-btn icon-play" @click="$emit('playMenu')" :disabled="disabled" title="Play"></button>
|
||||
<button class="icon-btn icon-temple" @click="$emit('temple')" :disabled="disabled" title="Temple"></button>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -15,7 +15,7 @@ const props = defineProps({
|
|||
}
|
||||
});
|
||||
|
||||
defineEmits(['stats', 'feed', 'play', 'sleep']);
|
||||
defineEmits(['info', 'feed', 'playMenu', 'temple']);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
@ -96,23 +96,26 @@ defineEmits(['stats', 'feed', 'play', 'sleep']);
|
|||
-2px 4px 0 #4444ff, 0px 4px 0 #4444ff, 2px 4px 0 #4444ff;
|
||||
}
|
||||
|
||||
/* Sleep Icon (Moon) */
|
||||
.icon-sleep::before {
|
||||
/* Temple Icon (廟宇) */
|
||||
.icon-temple::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 2px;
|
||||
height: 2px;
|
||||
background: #ffcc00;
|
||||
background: #D2691E;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
box-shadow:
|
||||
0px -6px 0 #ffcc00, 2px -6px 0 #ffcc00,
|
||||
-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,
|
||||
-2px 0px 0 #ffcc00, 0px 0px 0 #ffcc00, 4px 0px 0 #ffcc00,
|
||||
-2px 2px 0 #ffcc00, 0px 2px 0 #ffcc00, 4px 2px 0 #ffcc00,
|
||||
-2px 4px 0 #ffcc00, 0px 4px 0 #ffcc00, 2px 4px 0 #ffcc00, 4px 4px 0 #ffcc00,
|
||||
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,
|
||||
/* 屋簷 */
|
||||
-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,
|
||||
/* 柱子與牆 */
|
||||
-4px -2px 0 #8B4513, 4px -2px 0 #8B4513,
|
||||
-4px 0px 0 #8B4513, -2px 0px 0 #FFD700, 0px 0px 0 #FFD700, 2px 0px 0 #FFD700, 4px 0px 0 #8B4513,
|
||||
-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>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,330 @@
|
|||
<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>
|
||||
|
|
@ -0,0 +1,144 @@
|
|||
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,24 +5,79 @@ export function usePetSystem() {
|
|||
const stage = ref('egg'); // egg, baby, adult
|
||||
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 ---
|
||||
const stats = ref({
|
||||
hunger: 100, // 0-100 (0 = Starving)
|
||||
happiness: 100, // 0-100 (0 = Depressed)
|
||||
health: 100, // 0-100 (0 = Sick risk)
|
||||
weight: 500, // grams
|
||||
age: 0, // days
|
||||
poopCount: 0 // Number of poops on screen
|
||||
age: 1, // days (start at day 1)
|
||||
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 ---
|
||||
let gameLoopId = null;
|
||||
let tickCount = 0;
|
||||
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);
|
||||
|
||||
// --- 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() {
|
||||
if (state.value === 'sleep' || state.value === 'dead' || stage.value === 'egg' || isCleaning.value) return false;
|
||||
|
||||
|
|
@ -37,8 +92,9 @@ export function usePetSystem() {
|
|||
stats.value.hunger = Math.min(100, stats.value.hunger + 20);
|
||||
stats.value.weight += 50;
|
||||
|
||||
// Chance to poop after eating
|
||||
if (Math.random() < 0.3) {
|
||||
// Chance to poop after eating (降低機率)
|
||||
// Destiny Effect: Gluttony (暴食) might increase poop chance? Or just hunger decay.
|
||||
if (Math.random() < 0.15) { // 從 0.3 降到 0.15
|
||||
setTimeout(() => {
|
||||
if (stats.value.poopCount < 4) {
|
||||
stats.value.poopCount++;
|
||||
|
|
@ -89,43 +145,146 @@ export function usePetSystem() {
|
|||
if (state.value === 'dead' || stage.value === 'egg') return;
|
||||
|
||||
// Decrease stats naturally
|
||||
if (state.value !== 'sleep') {
|
||||
stats.value.hunger = Math.max(0, stats.value.hunger - 2);
|
||||
stats.value.happiness = Math.max(0, stats.value.happiness - 1);
|
||||
} else {
|
||||
// Slower decay when sleeping
|
||||
stats.value.hunger = Math.max(0, stats.value.hunger - 0.5);
|
||||
// Destiny Effect: Gluttony (暴食) - Hunger decreases faster (+30%)
|
||||
let hungerDecay = 0.05;
|
||||
if (stats.value.destiny?.id === 'gluttony') {
|
||||
hungerDecay *= 1.3;
|
||||
}
|
||||
|
||||
// Random poop generation (5% chance per tick)
|
||||
if (state.value !== 'sleep' && Math.random() < 0.05 && stats.value.poopCount < 4 && !isCleaning.value) {
|
||||
// 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') {
|
||||
stats.value.hunger = Math.max(0, stats.value.hunger - hungerDecay);
|
||||
stats.value.happiness = Math.max(0, stats.value.happiness - happinessDecay);
|
||||
} else {
|
||||
// Slower decay when sleeping (約 1/3 速度)
|
||||
stats.value.hunger = Math.max(0, stats.value.hunger - (hungerDecay * 0.3));
|
||||
stats.value.happiness = Math.max(0, stats.value.happiness - (happinessDecay * 0.3));
|
||||
}
|
||||
|
||||
// Random poop generation (更低的機率：約 0.5% per tick)
|
||||
// 平均約每 200 ticks = 10 分鐘拉一次
|
||||
if (state.value !== 'sleep' && Math.random() < 0.005 && stats.value.poopCount < 4 && !isCleaning.value) {
|
||||
stats.value.poopCount++;
|
||||
}
|
||||
|
||||
// Health Logic (Poop hurts health)
|
||||
// Health Logic (更溫和的健康下降)
|
||||
// 便便影響健康：每個便便每 tick -0.1 health
|
||||
if (stats.value.poopCount > 0) {
|
||||
stats.value.health = Math.max(0, stats.value.health - (2 * stats.value.poopCount));
|
||||
stats.value.health = Math.max(0, stats.value.health - (0.1 * stats.value.poopCount));
|
||||
}
|
||||
|
||||
if (stats.value.hunger === 0) {
|
||||
stats.value.health = Math.max(0, stats.value.health - 5);
|
||||
// 飢餓影響健康：飢餓值低於 20 時開始影響健康
|
||||
if (stats.value.hunger < 20) {
|
||||
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 (Math.random() < 0.3) {
|
||||
if (Math.random() < sickChance) {
|
||||
state.value = 'sick';
|
||||
}
|
||||
}
|
||||
|
||||
// Death Check
|
||||
if (stats.value.health === 0) {
|
||||
state.value = 'dead';
|
||||
// Health Recovery (健康值可以緩慢恢復)
|
||||
// 如果沒有便便、飢餓值和快樂值都高，健康值會緩慢恢復
|
||||
let healthRecovery = 0.05;
|
||||
|
||||
// Deity Buff: 觀音 - Health 回復 +20%
|
||||
if (stats.value.currentDeity === 'guanyin' && stats.value.deityFavors?.guanyin > 0) {
|
||||
healthRecovery *= 1.2;
|
||||
}
|
||||
|
||||
// Evolution / Growth (Simple Age increment)
|
||||
// In a real game, 1 day might be 24h, here maybe every 100 ticks?
|
||||
// For now, let's just say age increases slowly.
|
||||
// Deity Buff: 月老 - Happiness 回復 +25%
|
||||
if (stats.value.currentDeity === 'matchmaker' && stats.value.deityFavors?.matchmaker > 0) {
|
||||
// Apply to happiness decay reduction (slower decay = faster recovery)
|
||||
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 ---
|
||||
|
|
@ -149,6 +308,10 @@ export function usePetSystem() {
|
|||
stats.value.happiness = 50;
|
||||
stats.value.health = 100;
|
||||
stats.value.poopCount = 0;
|
||||
|
||||
// v2: Assign Destiny
|
||||
assignDestiny();
|
||||
|
||||
isCleaning.value = false;
|
||||
}
|
||||
}
|
||||
|
|
@ -162,9 +325,55 @@ export function usePetSystem() {
|
|||
happiness: 100,
|
||||
health: 100,
|
||||
weight: 500,
|
||||
age: 0,
|
||||
poopCount: 0
|
||||
age: 1,
|
||||
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 ---
|
||||
|
|
@ -186,6 +395,11 @@ export function usePetSystem() {
|
|||
clean,
|
||||
sleep,
|
||||
hatchEgg,
|
||||
reset
|
||||
reset,
|
||||
achievements,
|
||||
unlockAllAchievements,
|
||||
assignDestiny, // Export for debug if needed
|
||||
resurrect,
|
||||
reincarnate
|
||||
};
|
||||
}
|
||||
|
|
|
|||
|
|
@ -74,93 +74,131 @@ export const SPRITE_PRESETS = {
|
|||
iconBackLeft: { x: 3, y: 2 },
|
||||
iconBackRight: { x: 12, y: 2 },
|
||||
},
|
||||
tinyTigerCat: {
|
||||
name: '小虎斑貓',
|
||||
pixelSize: 3,
|
||||
sprite: [
|
||||
'0000000000000000',
|
||||
'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',
|
||||
'0011000000110000',
|
||||
'0122111111221000',
|
||||
'0122222222221000',
|
||||
'0122322223221000',
|
||||
'0122222222221000',
|
||||
'0120022220021000',
|
||||
'0122223322221000',
|
||||
'0122200002221000', // Mouth Open
|
||||
'0011222222110000',
|
||||
'0001222222121000',
|
||||
'0001222222121000',
|
||||
'0001100110110000',
|
||||
'0000000000000000',
|
||||
'0000000000000000',
|
||||
'0000000000000000',
|
||||
],
|
||||
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: {
|
||||
id: 'tinyTigerCatB',
|
||||
meta: {
|
||||
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
|
||||
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
|
||||
}
|
||||
],
|
||||
spriteMouthOpen: [
|
||||
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,
|
||||
sprites: {
|
||||
child: {
|
||||
idle: [
|
||||
'0000000000000000',
|
||||
'0011000000110000',
|
||||
'0124444111442100',
|
||||
|
|
@ -169,7 +207,7 @@ export const SPRITE_PRESETS = {
|
|||
'0122522222522100',
|
||||
'0125052225052100',
|
||||
'0112223322221100',
|
||||
'0122204002221000', // Mouth Open 粉紅舌頭
|
||||
'0122220222221000',
|
||||
'0011222222110000',
|
||||
'0001222222121000',
|
||||
'0001222222121000',
|
||||
|
|
@ -178,14 +216,80 @@ export const SPRITE_PRESETS = {
|
|||
'0000000000000000',
|
||||
'0000000000000000',
|
||||
],
|
||||
palette: {
|
||||
'0': '#000000', // Black eyes/outline
|
||||
'1': '#2b1d12', // Dark brown outline
|
||||
'2': '#ffb347', // Orange fur
|
||||
'3': '#cd853f', // Darker stripes/nose
|
||||
'4': '#ffb6c1', // Pink (ears, blush, tongue)
|
||||
'5': '#ffffff' // White eye highlight
|
||||
mouthOpen: [
|
||||
'0000000000000000',
|
||||
'0011000000110000',
|
||||
'0124444111442100',
|
||||
'0123222323221000',
|
||||
'0122322223221000',
|
||||
'0122522222522100',
|
||||
'0125052225052100',
|
||||
'0112223322221100',
|
||||
'0122204002221000',
|
||||
'0011222222110000',
|
||||
'0001222222121000',
|
||||
'0001222222121000',
|
||||
'0001100110110000',
|
||||
'0000000000000000',
|
||||
'0000000000000000',
|
||||
'0000000000000000',
|
||||
],
|
||||
eyesClosed: [
|
||||
'0000000000000000',
|
||||
'0011000000110000',
|
||||
'0124444111442100',
|
||||
'0123222323221000',
|
||||
'0122322223221000',
|
||||
'0122522222522100',
|
||||
'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: [
|
||||
[11, 10], [12, 10],
|
||||
[11, 11], [12, 11],
|
||||
|
|
@ -204,53 +308,191 @@ export const SPRITE_PRESETS = {
|
|||
[3, 7], [10, 7]
|
||||
],
|
||||
eyePixels: [
|
||||
[3, 6], [4, 6], // Left eye
|
||||
[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',
|
||||
[3, 6], [4, 6],
|
||||
[8, 6], [9, 6]
|
||||
],
|
||||
iconBackLeft: { x: 2, y: 2 },
|
||||
iconBackRight: { x: 13, y: 2 },
|
||||
|
||||
// Growth Stages
|
||||
eggSprite: [
|
||||
'0000000000000000',
|
||||
'0000000000000000',
|
||||
'0000000111000000', // Top (Narrow)
|
||||
'0000001222100000',
|
||||
'0000012232210000', // Small stripe
|
||||
'0000122333221000',
|
||||
'0000122232221000',
|
||||
'0001222222222100', // Widest part
|
||||
'0001233322332100', // Side stripes
|
||||
'0001223222232100',
|
||||
'0000122222221000',
|
||||
'0000122222221000',
|
||||
'0000011222110000', // Bottom
|
||||
'0000000111000000',
|
||||
'0000000000000000',
|
||||
'0000000000000000',
|
||||
],
|
||||
eggPalette: {
|
||||
'1': '#5d4037', // Dark brown outline
|
||||
'2': '#fff8e1', // Creamy white shell
|
||||
'3': '#ffb74d', // Orange tiger stripes
|
||||
iconBackRight: { x: 13, y: 2 }
|
||||
},
|
||||
behaviorAnimation: {
|
||||
blinkIntervalSec: 5,
|
||||
blinkDurationMs: 200,
|
||||
mouthOpenDurationMs: 300,
|
||||
idleEmoteIntervalSec: 15
|
||||
}
|
||||
},
|
||||
|
||||
// === 5. 裝備設定 ===
|
||||
equipment: {
|
||||
slots: ['head', 'face', 'neck', 'back'],
|
||||
items: [
|
||||
{
|
||||
id: 'sunglasses_basic',
|
||||
name: '基本墨鏡',
|
||||
slot: 'face',
|
||||
overlays: {
|
||||
child: {
|
||||
pixels: [
|
||||
{ x: 3, y: 6, color: '0' },
|
||||
{ x: 4, y: 6, color: '0' },
|
||||
{ x: 8, y: 6, color: '0' },
|
||||
{ x: 9, y: 6, color: '0' },
|
||||
]
|
||||
}
|
||||
},
|
||||
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'
|
||||
},
|
||||
|
||||
// === 7. 情緒濾鏡（Mood System）===
|
||||
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