121 lines
2.1 KiB
Vue
121 lines
2.1 KiB
Vue
|
<template>
|
||
|
|
<PixelCard class="status-panel">
|
||
|
|
<h3 class="panel-title">Status</h3>
|
||
|
|
<div class="status-bars">
|
||
|
|
<PixelProgressBar
|
||
|
|
label="Hunger"
|
||
|
|
:value="hunger"
|
||
|
|
:max="100"
|
||
|
|
:current="hunger"
|
||
|
|
color="warning"
|
||
|
|
/>
|
||
|
|
<PixelProgressBar
|
||
|
|
label="Happiness"
|
||
|
|
:value="happiness"
|
||
|
|
:max="100"
|
||
|
|
:current="happiness"
|
||
|
|
color="primary"
|
||
|
|
/>
|
||
|
|
<PixelProgressBar
|
||
|
|
label="Health"
|
||
|
|
:value="health"
|
||
|
|
:max="maxHealth"
|
||
|
|
:current="health"
|
||
|
|
color="success"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
<div class="status-badges">
|
||
|
|
<span v-if="isSleeping" class="badge badge-info">💤 Sleeping</span>
|
||
|
|
<span v-if="isSick" class="badge badge-danger">🤒 Sick</span>
|
||
|
|
<span v-if="poopCount > 0" class="badge badge-warning">💩 x{{ poopCount }}</span>
|
||
|
|
</div>
|
||
|
|
</PixelCard>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script setup>
|
||
|
|
import PixelCard from './PixelCard.vue'
|
||
|
|
import PixelProgressBar from './PixelProgressBar.vue'
|
||
|
|
|
||
|
|
const props = defineProps({
|
||
|
|
hunger: {
|
||
|
|
type: Number,
|
||
|
|
default: 50
|
||
|
|
},
|
||
|
|
happiness: {
|
||
|
|
type: Number,
|
||
|
|
default: 50
|
||
|
|
},
|
||
|
|
health: {
|
||
|
|
type: Number,
|
||
|
|
default: 50
|
||
|
|
},
|
||
|
|
maxHealth: {
|
||
|
|
type: Number,
|
||
|
|
default: 100
|
||
|
|
},
|
||
|
|
isSleeping: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
isSick: {
|
||
|
|
type: Boolean,
|
||
|
|
default: false
|
||
|
|
},
|
||
|
|
poopCount: {
|
||
|
|
type: Number,
|
||
|
|
default: 0
|
||
|
|
}
|
||
|
|
})
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped>
|
||
|
|
.status-panel {
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.panel-title {
|
||
|
|
font-size: 14px;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
text-align: center;
|
||
|
|
text-transform: uppercase;
|
||
|
|
padding-bottom: 8px;
|
||
|
|
border-bottom: 2px solid #000;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-bars {
|
||
|
|
display: flex;
|
||
|
|
flex-direction: column;
|
||
|
|
gap: 12px;
|
||
|
|
margin-bottom: 16px;
|
||
|
|
}
|
||
|
|
|
||
|
|
.status-badges {
|
||
|
|
display: flex;
|
||
|
|
flex-wrap: wrap;
|
||
|
|
gap: 8px;
|
||
|
|
justify-content: center;
|
||
|
|
}
|
||
|
|
|
||
|
|
.badge {
|
||
|
|
padding: 4px 8px;
|
||
|
|
border: 2px solid #000;
|
||
|
|
font-size: 10px;
|
||
|
|
display: inline-block;
|
||
|
|
}
|
||
|
|
|
||
|
|
.badge-info {
|
||
|
|
background: #3498db;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.badge-danger {
|
||
|
|
background: #e74c3c;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
|
||
|
|
.badge-warning {
|
||
|
|
background: #f39c12;
|
||
|
|
color: white;
|
||
|
|
}
|
||
|
|
</style>
|