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

<template>
  <div class="easter-egg-collection">
    <!-- Header with counter -->
    <div class="flex items-center justify-between mb-6">
      <h2 class="text-xl font-ui font-bold text-sky-text">
        {{ $t('easterEgg.collection') }}
      </h2>
      <div class="flex items-center gap-2">
        <span class="text-sky-accent font-ui font-bold">{{ foundCount }}</span>
        <span class="text-sky-text/60">/</span>
        <span class="text-sky-text/60">{{ totalEasterEggs }}</span>
      </div>
    </div>

    <!-- 100% badge -->
    <div
      v-if="isComplete"
      class="bg-gradient-to-r from-sky-accent to-amber-500 rounded-lg p-4 mb-6 text-center"
    >
      <span class="text-2xl" aria-hidden="true">*</span>
      <p class="text-white font-ui font-bold mt-2">
        {{ $t('easterEgg.allFound') }}
      </p>
    </div>

    <!-- Progress bar -->
    <div class="h-2 bg-sky-dark-100 rounded-full mb-6 overflow-hidden">
      <div
        class="h-full bg-sky-accent transition-all duration-500"
        :style="{ width: `${(foundCount / totalEasterEggs) * 100}%` }"
      />
    </div>

    <!-- Easter eggs grid -->
    <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
      <div
        v-for="egg in availableEasterEggs"
        :key="egg.slug"
        class="easter-egg-card p-4 rounded-lg border transition-all"
        :class="[
          isFound(egg.slug)
            ? 'bg-sky-dark-50 border-sky-accent/50'
            : 'bg-sky-dark border-sky-dark-100 opacity-50'
        ]"
      >
        <!-- Icon or mystery -->
        <div class="text-3xl text-center mb-2">
          {{ isFound(egg.slug) ? getTriggerIcon(egg.trigger_type) : '?' }}
        </div>

        <!-- Name or mystery -->
        <p
          class="text-sm font-ui text-center truncate"
          :class="isFound(egg.slug) ? 'text-sky-text' : 'text-sky-text/60'"
        >
          {{ isFound(egg.slug) ? formatSlug(egg.slug) : '???' }}
        </p>

        <!-- Difficulty -->
        <p class="text-xs text-center mt-1 text-sky-text/60">
          {{ getDifficultyStars(egg.difficulty) }}
        </p>
      </div>
    </div>

    <!-- Hint if not all found -->
    <p
      v-if="!isComplete"
      class="text-sm text-sky-text/60 text-center mt-6 font-narrative italic"
    >
      {{ $t('easterEgg.hint') }}
    </p>
  </div>
</template>

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

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

onMounted(() => {
  fetchList()
})

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

function isFound(slug: string): boolean {
  return progressionStore.easterEggsFound.includes(slug)
}

function getTriggerIcon(trigger: TriggerType): string {
  const icons: Record<TriggerType, string> = {
    click: '^',
    hover: 'o',
    konami: '#',
    scroll: 'v',
    sequence: '1',
  }
  return icons[trigger] || '?'
}

function formatSlug(slug: string): string {
  return slug
    .split('-')
    .map(word => word.charAt(0).toUpperCase() + word.slice(1))
    .join(' ')
}

function getDifficultyStars(difficulty: number): string {
  return '*'.repeat(difficulty) + '.'.repeat(5 - difficulty)
}
</script>