pet/src/components/PlayMenu.vue

<template>
  <div class="play-menu-overlay" @click.self="$emit('close')">
    <div class="play-menu-container">
      <h2 class="menu-title">選擇遊戲</h2>
      
      <div class="game-options">
        <button 
          class="game-option"
          @click="selectGame('training')"
        >
          <div class="option-icon icon-training"></div>
          <div class="option-name">訓練</div>
          <div class="option-desc">攻擊訓練</div>
        </button>

        <button 
          class="game-option"
          @click="selectGame('guessing')"
        >
          <div class="option-icon icon-rps"></div>
          <div class="option-name">猜拳</div>
          <div class="option-desc">剪刀石頭布</div>
        </button>

        <button 
          class="game-option"
          @click="selectGame('ball')"
        >
          <div class="option-icon icon-ball"></div>
          <div class="option-name">接球</div>
          <div class="option-desc">反應小遊戲</div>
        </button>
      </div>

      <button class="close-btn" @click="$emit('close')">取消</button>
    </div>
  </div>
</template>

<script setup>
const emit = defineEmits(['close', 'select']);

function selectGame(gameType) {
  emit('select', gameType);
}
</script>

<style scoped>
.play-menu-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  font-family: 'DotGothic16', sans-serif;
  overflow: auto;
}

.play-menu-container {
  background: #f5f5dc;
  border: 4px solid #8b4513;
  border-radius: 12px;
  padding: 15px;
  min-width: 200px;
  max-width: 90%;
  max-height: 85%;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  overflow-y: auto;
  margin: 10px;
}

.menu-title {
  text-align: center;
  font-size: 14px;
  margin: 0 0 12px 0;
  color: #8b4513;
}

.game-options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 10px;
}

.game-option {
  background: #fff;
  border: 3px solid #8b4513;
  border-radius: 8px;
  padding: 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  font-family: 'DotGothic16', sans-serif;
}

.game-option:hover {
  background: #fffacd;
  transform: scale(1.05);
}

.game-option:active {
  transform: scale(0.95);
}

.option-icon {
  width: 24px;
  height: 24px;
  margin: 0 auto 5px;
  position: relative;
}

/* Pixel Art Icons */
.icon-training::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 1px;
  background: transparent;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(2);
  box-shadow:
    /* Explosion/Impact shape */
    0 0 0 #ff0000,
    -2px -2px 0 #ff4400, 2px -2px 0 #ff4400,
    -3px 0 0 #ff6600, -2px 0 0 #ff4400, 0 0 0 #ff0000, 2px 0 0 #ff4400, 3px 0 0 #ff6600,
    -2px 2px 0 #ff4400, 2px 2px 0 #ff4400,
    /* Outer glow */
    -4px -1px 0 #ffaa00, 4px -1px 0 #ffaa00,
    -4px 1px 0 #ffaa00, 4px 1px 0 #ffaa00,
    -1px -4px 0 #ffaa00, 1px -4px 0 #ffaa00,
    -1px 4px 0 #ffaa00, 1px 4px 0 #ffaa00;
}

.icon-rps::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 1px;
  background: transparent;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(2);
  box-shadow:
    /* Fist shape */
    -1px -3px 0 #ffcc99, 0 -3px 0 #ffcc99, 1px -3px 0 #ffcc99,
    -2px -2px 0 #ffcc99, -1px -2px 0 #ffcc99, 0 -2px 0 #ffcc99, 1px -2px 0 #ffcc99, 2px -2px 0 #ffcc99,
    -2px -1px 0 #ffcc99, -1px -1px 0 #ffcc99, 0 -1px 0 #ffcc99, 1px -1px 0 #ffcc99, 2px -1px 0 #ffcc99,
    -2px 0 0 #ffcc99, -1px 0 0 #ffcc99, 0 0 0 #ffaa77, 1px 0 0 #ffcc99, 2px 0 0 #ffcc99,
    -2px 1px 0 #ffcc99, -1px 1px 0 #ffcc99, 0 1px 0 #ffcc99, 1px 1px 0 #ffcc99, 2px 1px 0 #ffcc99,
    -1px 2px 0 #ffcc99, 0 2px 0 #ffcc99, 1px 2px 0 #ffcc99;
}

.icon-ball::before {
  content: '';
  position: absolute;
  width: 1px;
  height: 1px;
  background: transparent;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(2);
  box-shadow:
    /* Ball shape */
    -1px -3px 0 #000, 0 -3px 0 #000, 1px -3px 0 #000,
    -2px -2px 0 #000, -1px -2px 0 #fff, 0 -2px 0 #fff, 1px -2px 0 #fff, 2px -2px 0 #000,
    -3px -1px 0 #000, -2px -1px 0 #fff, -1px -1px 0 #fff, 0 -1px 0 #000, 1px -1px 0 #fff, 2px -1px 0 #fff, 3px -1px 0 #000,
    -3px 0 0 #000, -2px 0 0 #fff, -1px 0 0 #000, 0 0 0 #000, 1px 0 0 #000, 2px 0 0 #fff, 3px 0 0 #000,
    -3px 1px 0 #000, -2px 1px 0 #fff, -1px 1px 0 #fff, 0 1px 0 #000, 1px 1px 0 #fff, 2px 1px 0 #fff, 3px 1px 0 #000,
    -2px 2px 0 #000, -1px 2px 0 #fff, 0 2px 0 #fff, 1px 2px 0 #fff, 2px 2px 0 #000,
    -1px 3px 0 #000, 0 3px 0 #000, 1px 3px 0 #000;
}

.option-name {
  font-size: 13px;
  font-weight: bold;
  color: #8b4513;
  margin-bottom: 2px;
}

.option-desc {
  font-size: 10px;
  color: #a0522d;
}

.close-btn {
  width: 100%;
  padding: 8px;
  background: #cd853f;
  border: 3px solid #8b4513;
  border-radius: 6px;
  color: white;
  font-size: 12px;
  font-weight: bold;
  cursor: pointer;
  font-family: 'DotGothic16', sans-serif;
}

.close-btn:hover {
  background: #d2691e;
}

.close-btn:active {
  transform: scale(0.95);
}
</style>