pet_data/components/pixel/PetHUD.vue

<template>
  <div class="rpg-hud">
    <div class="hud-container">
      <!-- 左側圓形頭像框 -->
      <div class="avatar-circle">
        <div class="circle-border-outer"></div>
        <div class="circle-border-inner"></div>
        <div class="pet-avatar" :class="petEmotion">
          <div class="eye left"></div>
          <div class="eye right"></div>
          <div class="mouth"></div>
        </div>
      </div>

      <!-- 右側血條面板 -->
      <div class="bars-panel">
        <!-- HP 條 -->
        <div class="stat-row">
          <div class="bar-container">
            <div class="bar-bg"></div>
            <div class="bar-fill hp" :style="{ width: `${healthPercent}%` }"></div>
          </div>
          <span class="stat-value">{{ Math.round(health) }}/{{ maxHealth }}</span>
        </div>

        <!-- 飢餓條 -->
        <div class="stat-row">
          <div class="bar-container">
            <div class="bar-bg"></div>
            <div class="bar-fill hunger" :style="{ width: `${hunger}%` }"></div>
          </div>
          <span class="stat-value">{{ Math.round(hunger) }}</span>
        </div>

        <!-- 快樂條 -->
        <div class="stat-row">
          <div class="bar-container">
            <div class="bar-bg"></div>
            <div class="bar-fill happiness" :style="{ width: `${happiness}%` }"></div>
          </div>
          <span class="stat-value">{{ Math.round(happiness) }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  petName: { type: String, default: 'Pet' },
  health: { type: Number, default: 100 },
  maxHealth: { type: Number, default: 100 },
  hunger: { type: Number, default: 100 },
  happiness: { type: Number, default: 100 },
  petEmotion: { type: String, default: 'happy' }
})

const healthPercent = computed(() => {
  return Math.min(100, Math.max(0, (props.health / props.maxHealth) * 100))
})
</script>

<style scoped>
.rpg-hud {
  position: fixed;
  top: 16px;
  left: 16px;
  z-index: 100;
}

.hud-container {
  display: flex;
  align-items: center;
  gap: 0;
}

/* 圓形頭像框 */
.avatar-circle {
  width: 64px;
  height: 64px;
  position: relative;
  flex-shrink: 0;
}

.circle-border-outer {
  position: absolute;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-accent);
  border: 4px solid var(--color-border);
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.2);
}

.circle-border-inner {
  position: absolute;
  top: 6px;
  left: 6px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--color-panel);
  border: 3px solid var(--color-border);
}

.pet-avatar {
  position: absolute;
  top: 9px;
  left: 9px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: linear-gradient(135deg, #ff6b9d 0%, #ff8fab 100%);
}

.eye {
  position: absolute;
  width: 5px;
  height: 5px;
  background: #2a2420;
  border-radius: 50%;
  top: 45%;
  transform: translateY(-50%);
}

.eye.left { left: 28%; }
.eye.right { right: 28%; }

.mouth {
  position: absolute;
  width: 9px;
  height: 4px;
  border: 2px solid #2a2420;
  border-top: none;
  border-radius: 0 0 5px 5px;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
}

.pet-avatar.sad .mouth {
  border-radius: 5px 5px 0 0;
  border-top: 2px solid #2a2420;
  border-bottom: none;
}

/* 血條面板 */
.bars-panel {
  background: var(--color-panel);
  border: 3px solid var(--color-border);
  border-left: none;
  border-radius: 0 8px 8px 0;
  padding: 6px 8px 6px 12px;
  margin-left: -6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.1);
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.bar-container {
  width: 110px;
  height: 14px;
  position: relative;
}

.bar-bg {
  position: absolute;
  width: 100%;
  height: 100%;
  background: var(--color-panel-light);
  border: 2px solid var(--color-border);
  border-radius: 2px;
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, 0.6);
}

.bar-fill {
  position: absolute;
  top: 2px;
  left: 2px;
  height: calc(100% - 4px);
  border-radius: 1px;
  transition: width 0.4s ease;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 0 rgba(0, 0, 0, 0.4);
}

.bar-fill.hp {
  background: linear-gradient(180deg, #e74c3c 0%, #c0392b 100%);
}

.bar-fill.hunger {
  background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-accent-dark) 100%);
}

.bar-fill.happiness {
  background: linear-gradient(180deg, #2ecc71 0%, #27ae60 100%);
}

.stat-value {
  font-size: 9px;
  color: var(--color-text);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.8);
  min-width: 42px;
  text-align: right;
  font-weight: bold;
  letter-spacing: 0.3px;
}

/* 手機直向 */
@media (max-width: 480px) {
  .rpg-hud {
    transform: scale(0.8);
    transform-origin: top left;
  }
}

/* 平板 */
@media (min-width: 481px) and (max-width: 768px) {
  .rpg-hud {
    transform: scale(0.9);
    transform-origin: top left;
  }
}
</style>