pet/src/components/ActionMenu.vue

<template>
  <div class="action-menu">
    <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>

<script setup>
const props = defineProps({
  disabled: {
    type: Boolean,
    default: false
  },
  poopCount: {
    type: Number,
    default: 0
  },
  health: {
    type: Number,
    default: 100
  },
  isSick: {
    type: Boolean,
    default: false
  }
});

defineEmits(['clean', 'medicine', 'sleep', 'inventory']);
</script>

<style scoped>
.action-menu {
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 6px 12px;
  background: rgba(155, 188, 15, 0.05);
  border-top: 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;
}

/* Clean Icon (Broom) */
.icon-clean::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: #8B4513;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0px -6px 0 #8B4513, 0px -4px 0 #8B4513,
    0px -2px 0 #8B4513, 0px 0px 0 #8B4513,
    -4px 2px 0 #ffcc00, -2px 2px 0 #ffcc00, 0px 2px 0 #ffcc00, 2px 2px 0 #ffcc00, 4px 2px 0 #ffcc00,
    -4px 4px 0 #ffcc00, -2px 4px 0 #ffcc00, 0px 4px 0 #ffcc00, 2px 4px 0 #ffcc00, 4px 4px 0 #ffcc00,
    -2px 6px 0 #ffcc00, 0px 6px 0 #ffcc00, 2px 6px 0 #ffcc00;
}

/* Medicine Icon (Pill/Cross) */
.icon-medicine::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: #ff4444;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0px -6px 0 #ff4444, 0px -4px 0 #ff4444,
    -4px -2px 0 #ff4444, -2px -2px 0 #ff4444, 0px -2px 0 #ff4444, 2px -2px 0 #ff4444, 4px -2px 0 #ff4444,
    0px 0px 0 #ff4444, 0px 2px 0 #ff4444,
    0px 4px 0 #ff4444, 0px 6px 0 #ff4444;
}

/* Sleep Icon (Light Bulb/燈泡) - Enhanced */
.icon-sleep::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: transparent;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  box-shadow:
    /* 燈泡主體 (圓形) */
    -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;
}

/* Backpack Icon */
.icon-backpack::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: #8d6e63;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    /* 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>