feat:merge health
This commit is contained in:
王性驊
parent
737b74f220
commit
4dddadcaf7
|
|
@ -3,7 +3,7 @@
|
|||
<!-- Top Menu -->
|
||||
<TopMenu
|
||||
:disabled="stage === 'egg'"
|
||||
@stats="$emit('action', 'stats')"
|
||||
@info="showPetInfo = !showPetInfo"
|
||||
@feed="$emit('action', 'feed')"
|
||||
@play="$emit('action', 'play')"
|
||||
@sleep="$emit('action', 'sleep')"
|
||||
|
|
@ -15,6 +15,10 @@
|
|||
:hunger="stats?.hunger || 100"
|
||||
:happiness="stats?.happiness || 100"
|
||||
:health="stats?.health || 100"
|
||||
:petName="CURRENT_PRESET.name"
|
||||
:stage="stage"
|
||||
:poopCount="poopCount"
|
||||
:baseStats="baseStats"
|
||||
/>
|
||||
|
||||
<!-- Game Area (Center) -->
|
||||
|
|
@ -162,6 +166,19 @@
|
|||
@close="handleCloseResult"
|
||||
/>
|
||||
|
||||
<!-- Pet Info Screen (覆蓋整個遊戲區域) -->
|
||||
<PetInfoScreen
|
||||
v-if="showPetInfo"
|
||||
:petName="CURRENT_PRESET.name"
|
||||
:stage="stage"
|
||||
:poopCount="poopCount"
|
||||
:baseStats="baseStats"
|
||||
:hunger="stats?.hunger || 100"
|
||||
:happiness="stats?.happiness || 100"
|
||||
:health="stats?.health || 100"
|
||||
@close="showPetInfo = false"
|
||||
/>
|
||||
|
||||
<!-- Action Menu (Bottom) -->
|
||||
<ActionMenu
|
||||
:disabled="stage === 'egg'"
|
||||
|
|
@ -171,7 +188,7 @@
|
|||
@clean="$emit('action', 'clean')"
|
||||
@medicine="$emit('action', 'medicine')"
|
||||
@training="showPrayerMenu = true"
|
||||
@info="$emit('action', 'info')"
|
||||
@info="showPetInfo = !showPetInfo"
|
||||
/>
|
||||
</div>
|
||||
|
||||
|
|
@ -179,7 +196,7 @@
|
|||
|
||||
<script setup>
|
||||
import { ref, computed, onMounted, onUnmounted, watch, nextTick } from 'vue';
|
||||
import { SPRITE_PRESETS } from '../data/petPresets.js';
|
||||
import { SPRITE_PRESETS_FLAT as SPRITE_PRESETS, SPRITE_PRESETS as FULL_PRESETS } from '../data/petPresets.js';
|
||||
import { FOOD_OPTIONS } from '../data/foodOptions.js';
|
||||
import StatsBar from './StatsBar.vue';
|
||||
import ActionMenu from './ActionMenu.vue';
|
||||
|
|
@ -188,6 +205,7 @@ import PrayerMenu from './PrayerMenu.vue';
|
|||
import JiaobeiAnimation from './JiaobeiAnimation.vue';
|
||||
import FortuneStickAnimation from './FortuneStickAnimation.vue';
|
||||
import FortuneResult from './FortuneResult.vue';
|
||||
import PetInfoScreen from './PetInfoScreen.vue';
|
||||
import guanyinLots from '../assets/guanyin_100_lots.json';
|
||||
|
||||
const props = defineProps({
|
||||
|
|
@ -217,22 +235,23 @@ const emit = defineEmits(['update:state', 'action']);
|
|||
|
||||
// Prayer Menu State
|
||||
const showPrayerMenu = ref(false);
|
||||
const fortuneMode = ref('jiaobei');
|
||||
const showJiaobeiAnimation = ref(false);
|
||||
const showFortuneStick = ref(false);
|
||||
const showFortuneResult = ref(false);
|
||||
|
||||
// Fortune Logic State
|
||||
const fortuneMode = ref('normal'); // 'normal' or 'fortune'
|
||||
const currentLotNumber = ref(null);
|
||||
const consecutiveSaintCount = ref(0);
|
||||
const currentLotData = ref(null);
|
||||
const consecutiveSaintCount = ref(0);
|
||||
const showPetInfo = ref(false);
|
||||
const infoPage = ref(0);
|
||||
|
||||
function handlePrayerSelect(type) {
|
||||
const handlePrayerSelect = (mode) => {
|
||||
fortuneMode.value = mode;
|
||||
showPrayerMenu.value = false;
|
||||
|
||||
if (type === 'jiaobei') {
|
||||
fortuneMode.value = 'normal';
|
||||
if (mode === 'jiaobei') {
|
||||
showJiaobeiAnimation.value = true;
|
||||
} else if (mode === 'lots') {
|
||||
showFortuneStick.value = true;
|
||||
} else if (type === 'fortune') {
|
||||
// 開始求籤流程
|
||||
fortuneMode.value = 'fortune';
|
||||
|
|
@ -379,8 +398,27 @@ const FOOD_PALETTE = FOOD_OPTIONS[currentFood].palette;
|
|||
|
||||
|
||||
const CURRENT_PRESET = SPRITE_PRESETS.tinyTigerCatB;
|
||||
const FULL_PRESET = FULL_PRESETS.tinyTigerCatB;
|
||||
const pixelSize = CURRENT_PRESET.pixelSize;
|
||||
|
||||
// Calculate base stats based on current stage
|
||||
const baseStats = computed(() => {
|
||||
if (!FULL_PRESET.stats) {
|
||||
return { hp: 0, attack: 0, defense: 0, speed: 0 };
|
||||
}
|
||||
|
||||
const base = FULL_PRESET.stats.base;
|
||||
const stageId = props.stage === 'egg' ? 'baby' : props.stage;
|
||||
const modifier = FULL_PRESET.stats.stageModifiers?.[stageId] || { hp: 1, attack: 1, defense: 1, speed: 1 };
|
||||
|
||||
return {
|
||||
hp: Math.floor(base.hp * modifier.hp),
|
||||
attack: Math.floor(base.attack * modifier.attack),
|
||||
defense: Math.floor(base.defense * modifier.defense),
|
||||
speed: Math.floor(base.speed * modifier.speed)
|
||||
};
|
||||
});
|
||||
|
||||
// Define dimensions
|
||||
const rows = CURRENT_PRESET.sprite.length;
|
||||
const cols = CURRENT_PRESET.sprite[0].length;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,407 @@
|
|||
<template>
|
||||
<div class="pet-info-screen" @click="$emit('close')">
|
||||
<div class="info-container">
|
||||
<!-- 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>
|
||||
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } 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
|
||||
}
|
||||
});
|
||||
|
||||
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;
|
||||
}
|
||||
|
||||
/* 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;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,57 +1,66 @@
|
|||
<template>
|
||||
<div class="stats-bar">
|
||||
<div class="stat-row">
|
||||
<div class="stat-icon pixel-heart"></div>
|
||||
<div class="pixel-bar">
|
||||
<div
|
||||
v-for="i in 10"
|
||||
:key="'happy-' + i"
|
||||
class="pixel-block"
|
||||
:class="{
|
||||
'filled': i <= Math.floor(displayHappiness / 10),
|
||||
'color-red': i <= Math.floor(displayHappiness / 10)
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<span class="stat-value" :class="{ 'warning': displayHappiness < 30 }">{{ displayHappiness }}</span>
|
||||
</div>
|
||||
<div class="stats-content">
|
||||
<div class="stat-rows">
|
||||
<div class="stat-row">
|
||||
<div class="stat-icon pixel-heart"></div>
|
||||
<div class="pixel-bar">
|
||||
<div
|
||||
v-for="i in 10"
|
||||
:key="'happy-' + i"
|
||||
class="pixel-block"
|
||||
:class="{
|
||||
'filled': i <= Math.floor(displayHappiness / 10),
|
||||
'color-red': i <= Math.floor(displayHappiness / 10)
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<span class="stat-value" :class="{ 'warning': displayHappiness < 30 }">{{ displayHappiness }}</span>
|
||||
</div>
|
||||
|
||||
<div class="stat-row">
|
||||
<div class="stat-icon pixel-food"></div>
|
||||
<div class="pixel-bar">
|
||||
<div
|
||||
v-for="i in 10"
|
||||
:key="'food-' + i"
|
||||
class="pixel-block"
|
||||
:class="{
|
||||
'filled': i <= Math.floor(displayHunger / 10),
|
||||
'color-yellow': i <= Math.floor(displayHunger / 10)
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<span class="stat-value" :class="{ 'warning': displayHunger < 30 }">{{ displayHunger }}</span>
|
||||
</div>
|
||||
<div class="stat-row">
|
||||
<div class="stat-icon pixel-food"></div>
|
||||
<div class="pixel-bar">
|
||||
<div
|
||||
v-for="i in 10"
|
||||
:key="'food-' + i"
|
||||
class="pixel-block"
|
||||
:class="{
|
||||
'filled': i <= Math.floor(displayHunger / 10),
|
||||
'color-yellow': i <= Math.floor(displayHunger / 10)
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<span class="stat-value" :class="{ 'warning': displayHunger < 30 }">{{ displayHunger }}</span>
|
||||
</div>
|
||||
|
||||
<div class="stat-row">
|
||||
<div class="stat-icon pixel-health"></div>
|
||||
<div class="pixel-bar">
|
||||
<div
|
||||
v-for="i in 10"
|
||||
:key="'health-' + i"
|
||||
class="pixel-block"
|
||||
:class="{
|
||||
'filled': i <= Math.floor(displayHealth / 10),
|
||||
'color-green': i <= Math.floor(displayHealth / 10)
|
||||
}"
|
||||
></div>
|
||||
<div class="stat-row">
|
||||
<div class="stat-icon pixel-health"></div>
|
||||
<div class="pixel-bar">
|
||||
<div
|
||||
v-for="i in 10"
|
||||
:key="'health-' + i"
|
||||
class="pixel-block"
|
||||
:class="{
|
||||
'filled': i <= Math.floor(displayHealth / 10),
|
||||
'color-green': i <= Math.floor(displayHealth / 10)
|
||||
}"
|
||||
></div>
|
||||
</div>
|
||||
<span class="stat-value" :class="{ 'warning': displayHealth < 30 }">{{ displayHealth }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<span class="stat-value" :class="{ 'warning': displayHealth < 30 }">{{ displayHealth }}</span>
|
||||
|
||||
<!-- 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 { computed } from 'vue';
|
||||
import { ref, computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
hunger: {
|
||||
|
|
@ -65,9 +74,27 @@ 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));
|
||||
|
|
@ -78,10 +105,23 @@ const displayHealth = computed(() => Math.ceil(props.health));
|
|||
.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 {
|
||||
|
|
@ -242,4 +282,206 @@ const displayHealth = computed(() => Math.ceil(props.health));
|
|||
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,6 +1,6 @@
|
|||
<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>
|
||||
|
|
@ -15,7 +15,7 @@ const props = defineProps({
|
|||
}
|
||||
});
|
||||
|
||||
defineEmits(['stats', 'feed', 'play', 'sleep']);
|
||||
defineEmits(['info', 'feed', 'play', 'sleep']);
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
|
|
|||
|
|
@ -74,183 +74,425 @@ 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: {
|
||||
name: '小虎斑貓',
|
||||
pixelSize: 3,
|
||||
sprite: [
|
||||
'0000000000000000',
|
||||
'0011000000110000', // row 1 - Ears
|
||||
'0124444111442100', // row 2 粉紅耳朵內側
|
||||
'0123222323221000', // row 3 三條虎紋
|
||||
'0122322223221000', // row 4 - Stripes
|
||||
'0122522222522100', // row 5 眼睛反光
|
||||
'0125052225052100', // row 6 大圓眼＋黑瞳孔＋白反光
|
||||
'0112223322221100', // row 7 鼻子＋左右鬍鬚
|
||||
'0122220222221000', // row 8 小微笑
|
||||
'0011222222110000', // row 9 - Body
|
||||
'0001222222121000', // row 10 - Body + Tail
|
||||
'0001222222121000', // row 11
|
||||
'0001100110110000', // row 12 - Legs
|
||||
'0000000000000000', // row 13
|
||||
'0000000000000000', // row 14
|
||||
'0000000000000000', // row 15
|
||||
],
|
||||
spriteMouthOpen: [
|
||||
'0000000000000000',
|
||||
'0011000000110000',
|
||||
'0124444111442100',
|
||||
'0123222323221000',
|
||||
'0122322223221000',
|
||||
'0122522222522100',
|
||||
'0125052225052100',
|
||||
'0112223322221100',
|
||||
'0122204002221000', // 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
|
||||
'4': '#ffb6c1', // Pink (ears, blush, tongue)
|
||||
'5': '#ffffff' // White eye highlight
|
||||
id: 'tinyTigerCatB',
|
||||
meta: {
|
||||
name: '小虎斑貓',
|
||||
displayNameEn: 'Tiny Tiger Cat',
|
||||
species: 'cat',
|
||||
element: 'normal',
|
||||
description: '一隻活潑、黏人的小虎斑貓，喜歡被餵食和玩耍。'
|
||||
},
|
||||
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]
|
||||
],
|
||||
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',
|
||||
],
|
||||
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
|
||||
}
|
||||
// === 1. 生命週期設定 ===
|
||||
lifecycle: {
|
||||
baseLifeMinutes: 7 * 24 * 60,
|
||||
stages: [
|
||||
{
|
||||
id: 'egg',
|
||||
name: '蛋',
|
||||
minAgeMinutes: 0,
|
||||
maxAgeMinutes: 30,
|
||||
spriteKey: 'egg',
|
||||
canBattle: false,
|
||||
canEquip: false
|
||||
},
|
||||
{
|
||||
id: 'baby',
|
||||
name: '幼年期',
|
||||
minAgeMinutes: 30,
|
||||
maxAgeMinutes: 6 * 60,
|
||||
spriteKey: 'child',
|
||||
canBattle: false,
|
||||
canEquip: false
|
||||
},
|
||||
{
|
||||
id: 'child',
|
||||
name: '成長期',
|
||||
minAgeMinutes: 6 * 60,
|
||||
maxAgeMinutes: 24 * 60,
|
||||
spriteKey: 'child',
|
||||
canBattle: true,
|
||||
canEquip: true
|
||||
},
|
||||
{
|
||||
id: 'adult',
|
||||
name: '成熟期',
|
||||
minAgeMinutes: 24 * 60,
|
||||
maxAgeMinutes: Infinity,
|
||||
spriteKey: 'adult',
|
||||
canBattle: true,
|
||||
canEquip: true
|
||||
}
|
||||
],
|
||||
evolutionRules: [
|
||||
{
|
||||
fromStage: 'baby',
|
||||
toStage: 'child',
|
||||
condition: {
|
||||
maxHungerEvents: 5,
|
||||
maxSicknessEvents: 2
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
// === 2. 需求衰減設定 ===
|
||||
needs: {
|
||||
hunger: {
|
||||
max: 100,
|
||||
startValue: 70,
|
||||
decayPerMinute: 2,
|
||||
warnThreshold: 40,
|
||||
criticalThreshold: 10,
|
||||
feedRecover: 40
|
||||
},
|
||||
happiness: {
|
||||
max: 100,
|
||||
startValue: 60,
|
||||
decayPerMinute: 1,
|
||||
playRecover: 25,
|
||||
lowThreshold: 30
|
||||
},
|
||||
cleanliness: {
|
||||
max: 100,
|
||||
startValue: 80,
|
||||
decayPerPoop: 30,
|
||||
criticalThreshold: 30
|
||||
},
|
||||
energy: {
|
||||
max: 100,
|
||||
startValue: 80,
|
||||
decayPerMinuteActive: 2,
|
||||
recoverPerMinuteSleep: 5,
|
||||
sleepSuggestThreshold: 30
|
||||
},
|
||||
poop: {
|
||||
feedsPerPoop: 3,
|
||||
maxPoopOnScreen: 3
|
||||
},
|
||||
sickness: {
|
||||
baseChancePerMinute: 0.001,
|
||||
extraChanceIfDirty: 0.01,
|
||||
extraChanceIfStarving: 0.02
|
||||
}
|
||||
},
|
||||
|
||||
// === 3. 數值設定 ===
|
||||
stats: {
|
||||
base: {
|
||||
hp: 30,
|
||||
attack: 8,
|
||||
defense: 5,
|
||||
speed: 7
|
||||
},
|
||||
stageModifiers: {
|
||||
baby: { hp: 0.6, attack: 0.5, defense: 0.5, speed: 0.8 },
|
||||
child: { hp: 1.0, attack: 1.0, defense: 1.0, speed: 1.0 },
|
||||
adult: { hp: 1.4, attack: 1.3, defense: 1.2, speed: 1.1 }
|
||||
}
|
||||
},
|
||||
|
||||
// === 4. 外觀 / Sprite 設定 ===
|
||||
appearance: {
|
||||
pixelSize: 3,
|
||||
sprites: {
|
||||
child: {
|
||||
idle: [
|
||||
'0000000000000000',
|
||||
'0011000000110000',
|
||||
'0124444111442100',
|
||||
'0123222323221000',
|
||||
'0122322223221000',
|
||||
'0122522222522100',
|
||||
'0125052225052100',
|
||||
'0112223322221100',
|
||||
'0122220222221000',
|
||||
'0011222222110000',
|
||||
'0001222222121000',
|
||||
'0001222222121000',
|
||||
'0001100110110000',
|
||||
'0000000000000000',
|
||||
'0000000000000000',
|
||||
'0000000000000000',
|
||||
],
|
||||
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],
|
||||
],
|
||||
earPixels: [
|
||||
[2, 1], [3, 1],
|
||||
[10, 1], [11, 1],
|
||||
],
|
||||
legFrontPixels: [
|
||||
[4, 12], [5, 12],
|
||||
],
|
||||
legBackPixels: [
|
||||
[8, 12], [9, 12],
|
||||
],
|
||||
blushPixels: [
|
||||
[3, 7], [10, 7]
|
||||
],
|
||||
eyePixels: [
|
||||
[3, 6], [4, 6],
|
||||
[8, 6], [9, 6]
|
||||
],
|
||||
iconBackLeft: { x: 2, y: 2 },
|
||||
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