Portfolio-Game/frontend/app/components/feature/EasterEggPopup.vue

<template>
  <Teleport to="body">
    <Transition name="popup">
      <div
        v-if="visible && reward"
        class="fixed inset-0 z-50 flex items-center justify-center p-4"
      >
        <!-- Overlay -->
        <div
          class="absolute inset-0 bg-black/70 backdrop-blur-sm"
          @click="emit('close')"
        />

        <!-- Modal -->
        <div
          class="relative bg-sky-dark-50 rounded-2xl p-8 max-w-md w-full border border-sky-accent/50 shadow-2xl shadow-sky-accent/20 animate-bounce-in"
        >
          <!-- Confetti -->
          <div class="absolute -top-4 left-1/2 -translate-x-1/2 text-4xl animate-bounce">
            <span aria-hidden="true">*</span>
          </div>

          <!-- Type icon -->
          <div class="text-6xl text-center mb-4">
            {{ rewardIcon }}
          </div>

          <!-- Title -->
          <h2 class="text-2xl font-ui font-bold text-sky-accent text-center mb-2">
            {{ $t('easterEgg.found') }}
          </h2>

          <!-- Counter -->
          <p class="text-sm text-sky-text/60 text-center mb-6">
            {{ $t('easterEgg.count', { found: foundCount, total: totalEasterEggs }) }}
          </p>

          <!-- Reward -->
          <div class="bg-sky-dark rounded-lg p-4 mb-6">
            <!-- Code snippet -->
            <pre
              v-if="reward.reward_type === 'snippet'"
              class="font-mono text-sm text-sky-accent overflow-x-auto whitespace-pre-wrap"
            ><code>{{ reward.reward }}</code></pre>

            <!-- Anecdote -->
            <p
              v-else-if="reward.reward_type === 'anecdote'"
              class="font-narrative text-sky-text italic"
            >
              {{ reward.reward }}
            </p>

            <!-- Badge -->
            <div
              v-else-if="reward.reward_type === 'badge'"
              class="text-center"
            >
              <p class="font-ui text-sky-text">{{ reward.reward }}</p>
            </div>

            <!-- Image -->
            <div
              v-else-if="reward.reward_type === 'image'"
              class="text-center"
            >
              <p class="font-ui text-sky-text">{{ reward.reward }}</p>
            </div>
          </div>

          <!-- Difficulty -->
          <div class="flex items-center justify-center gap-1 mb-6">
            <span class="text-xs text-sky-text/60 mr-2">{{ $t('easterEgg.difficulty') }}:</span>
            <span
              v-for="i in 5"
              :key="i"
              class="text-sm"
              :class="i <= reward.difficulty ? 'text-sky-accent' : 'text-sky-dark-100'"
            >
              *
            </span>
          </div>

          <!-- Close button -->
          <button
            type="button"
            class="w-full py-3 bg-sky-accent text-white font-ui font-semibold rounded-lg hover:bg-sky-accent/90 transition-colors"
            @click="emit('close')"
          >
            {{ $t('common.continue') }}
          </button>
        </div>
      </div>
    </Transition>
  </Teleport>
</template>

<script setup lang="ts">
import type { EasterEggReward } from '~/composables/useFetchEasterEggs'

const props = defineProps<{
  visible: boolean
  reward: EasterEggReward | null
}>()

const emit = defineEmits<{
  close: []
}>()

const progressionStore = useProgressionStore()
const { availableEasterEggs } = useFetchEasterEggs()

const totalEasterEggs = computed(() => availableEasterEggs.value.length || 8)
const foundCount = computed(() => progressionStore.easterEggsFoundCount)

// Icon based on reward type
const rewardIcon = computed(() => {
  if (!props.reward) return ''
  const icons: Record<string, string> = {
    snippet: '</>', // Code icon
    anecdote: '!',  // Story icon
    image: '[]',    // Image icon
    badge: '*',     // Trophy icon
  }
  return icons[props.reward.reward_type] || ''
})
</script>

<style scoped>
.popup-enter-active,
.popup-leave-active {
  transition: all 0.3s ease;
}

.popup-enter-from,
.popup-leave-to {
  opacity: 0;
}

.popup-enter-from .relative,
.popup-leave-to .relative {
  transform: scale(0.9);
}

@keyframes bounce-in {
  0% {
    transform: scale(0.5);
    opacity: 0;
  }
  50% {
    transform: scale(1.05);
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

.animate-bounce-in {
  animation: bounce-in 0.4s ease-out;
}
</style>