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-training" @click="$emit('training')" :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', 'training', '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;
}

/* Training Icon (Praying Hands) */
.icon-training::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: #d4a574; /* 手的膚色 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    /* 光芒 - 頂部 */
    0px -8px 0 #ffcc00,
    -2px -6px 0 #ffcc00, 2px -6px 0 #ffcc00,
    
    /* 合掌的手 - 簡化版 */
    -2px -4px 0 #d4a574, 0px -4px 0 #d4a574, 2px -4px 0 #d4a574,
    -2px -2px 0 #d4a574, 0px -2px 0 #d4a574, 2px -2px 0 #d4a574,
    -2px 0px 0 #d4a574, 0px 0px 0 #d4a574, 2px 0px 0 #d4a574,
    0px 2px 0 #d4a574, 0px 4px 0 #d4a574,
    
    /* 光芒 - 左右 */
    -6px -2px 0 #ffcc00, 6px -2px 0 #ffcc00,
    -6px 0px 0 #ffcc00, 6px 0px 0 #ffcc00;
}

/* 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>