119 lines
3.3 KiB
Vue
119 lines
3.3 KiB
Vue
<template>
|
|
<div class="top-menu">
|
|
<button class="icon-btn icon-stats" @click="$emit('stats')" title="Stats"></button>
|
|
<button class="icon-btn icon-feed" @click="$emit('feed')" :disabled="disabled" title="Feed"></button>
|
|
<button class="icon-btn icon-play" @click="$emit('play')" :disabled="disabled" title="Play"></button>
|
|
<button class="icon-btn icon-sleep" @click="$emit('sleep')" :disabled="disabled" title="Sleep"></button>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
const props = defineProps({
|
|
disabled: {
|
|
type: Boolean,
|
|
default: false
|
|
}
|
|
});
|
|
|
|
defineEmits(['stats', 'feed', 'play', 'sleep']);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.top-menu {
|
|
display: flex;
|
|
justify-content: space-around;
|
|
align-items: center;
|
|
padding: 6px 12px;
|
|
background: rgba(155, 188, 15, 0.05);
|
|
border-bottom: 2px solid rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.icon-btn {
|
|
width: 16px;
|
|
height: 16px;
|
|
border: none;
|
|
background: transparent;
|
|
cursor: pointer;
|
|
position: relative;
|
|
padding: 0;
|
|
}
|
|
|
|
.icon-btn:disabled {
|
|
opacity: 0.3;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Stats Icon (Bar Chart) */
|
|
.icon-stats::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 2px;
|
|
background: #333;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
box-shadow:
|
|
-6px 4px 0 #333, -6px 2px 0 #333, -6px 0px 0 #333,
|
|
-2px 4px 0 #333, -2px 2px 0 #333, -2px 0px 0 #333, -2px -2px 0 #333,
|
|
2px 4px 0 #333, 2px 2px 0 #333, 2px 0px 0 #333, 2px -2px 0 #333, 2px -4px 0 #333,
|
|
6px 4px 0 #333, 6px 2px 0 #333;
|
|
}
|
|
|
|
/* Feed Icon (Apple/Food) */
|
|
.icon-feed::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 2px;
|
|
background: #ff4444;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
box-shadow:
|
|
-2px -6px 0 #228822,
|
|
-4px -2px 0 #ff4444, -2px -2px 0 #ff4444, 0px -2px 0 #ff4444, 2px -2px 0 #ff4444,
|
|
-4px 0px 0 #ff4444, -2px 0px 0 #ff4444, 0px 0px 0 #ff4444, 2px 0px 0 #ff4444, 4px 0px 0 #ff4444,
|
|
-4px 2px 0 #ff4444, -2px 2px 0 #ff4444, 0px 2px 0 #ff4444, 2px 2px 0 #ff4444, 4px 2px 0 #ff4444,
|
|
-2px 4px 0 #ff4444, 0px 4px 0 #ff4444, 2px 4px 0 #ff4444;
|
|
}
|
|
|
|
/* Play Icon (Ball/Game) */
|
|
.icon-play::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 2px;
|
|
background: #4444ff;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
box-shadow:
|
|
-2px -4px 0 #4444ff, 0px -4px 0 #4444ff, 2px -4px 0 #4444ff,
|
|
-4px -2px 0 #4444ff, -2px -2px 0 #4444ff, 0px -2px 0 #4444ff, 2px -2px 0 #4444ff, 4px -2px 0 #4444ff,
|
|
-4px 0px 0 #4444ff, -2px 0px 0 #4444ff, 0px 0px 0 #4444ff, 2px 0px 0 #4444ff, 4px 0px 0 #4444ff,
|
|
-4px 2px 0 #4444ff, -2px 2px 0 #4444ff, 0px 2px 0 #4444ff, 2px 2px 0 #4444ff, 4px 2px 0 #4444ff,
|
|
-2px 4px 0 #4444ff, 0px 4px 0 #4444ff, 2px 4px 0 #4444ff;
|
|
}
|
|
|
|
/* Sleep Icon (Moon) */
|
|
.icon-sleep::before {
|
|
content: '';
|
|
position: absolute;
|
|
width: 2px;
|
|
height: 2px;
|
|
background: #ffcc00;
|
|
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;
|
|
}
|
|
</style>
|