pet/src/components/ActionMenu.vue

<template>
  <div class="action-menu">
    <button class="icon-btn icon-clean" @click="$emit('clean')" :disabled="disabled || poopCount === 0" title="Clean"></button>
    <button class="icon-btn icon-medicine" @click="$emit('medicine')" :disabled="disabled || !isSick" title="Medicine"></button>
    <button class="icon-btn icon-training" @click="$emit('training')" :disabled="disabled" title="Training"></button>
    <button class="icon-btn icon-info" @click="$emit('info')" :disabled="disabled" title="Info"></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', 'info']);
</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 (Dumbbell) */
.icon-training::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: #444;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    -6px -2px 0 #444, -6px 0px 0 #444, -6px 2px 0 #444,
    -4px -2px 0 #444, -4px 0px 0 #444, -4px 2px 0 #444,
    -2px 0px 0 #444, 0px 0px 0 #444, 2px 0px 0 #444,
    4px -2px 0 #444, 4px 0px 0 #444, 4px 2px 0 #444,
    6px -2px 0 #444, 6px 0px 0 #444, 6px 2px 0 #444;
}

/* Info Icon (i) */
.icon-info::before {
  content: '';
  position: absolute;
  width: 2px;
  height: 2px;
  background: #4444ff;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow:
    0px -6px 0 #4444ff,
    0px -2px 0 #4444ff, 0px 0px 0 #4444ff,
    0px 2px 0 #4444ff, 0px 4px 0 #4444ff, 0px 6px 0 #4444ff;
}
</style>