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

<script setup lang="ts">
const props = withDefaults(
  defineProps<{
    percent: number
    showTooltip?: boolean
    compact?: boolean
  }>(),
  {
    showTooltip: true,
    compact: false,
  },
)

const { t } = useI18n()
const progressionStore = useProgressionStore()
const reducedMotion = useReducedMotion()

const sections = computed(() => [
  {
    key: 'projets',
    name: t('progress.sections.projects'),
    visited: progressionStore.visitedSections.includes('projets'),
  },
  {
    key: 'competences',
    name: t('progress.sections.skills'),
    visited: progressionStore.visitedSections.includes('competences'),
  },
  {
    key: 'temoignages',
    name: t('progress.sections.testimonials'),
    visited: progressionStore.visitedSections.includes('temoignages'),
  },
  {
    key: 'parcours',
    name: t('progress.sections.journey'),
    visited: progressionStore.visitedSections.includes('parcours'),
  },
])

const visitedCount = computed(() => sections.value.filter((s) => s.visited).length)
const remainingCount = computed(() => 4 - visitedCount.value)

const showPopover = ref(false)
</script>

<template>
  <div class="progress-bar-container relative" :class="{ compact: compact }">
    <div
      class="progress-bar-wrapper group cursor-pointer"
      tabindex="0"
      role="progressbar"
      :aria-valuenow="percent"
      aria-valuemin="0"
      aria-valuemax="100"
      :aria-label="t('progress.label', { percent })"
      @mouseenter="showPopover = true"
      @mouseleave="showPopover = false"
      @focus="showPopover = true"
      @blur="showPopover = false"
    >
      <div
        class="progress-frame relative h-6 w-40 rounded-full border-2 border-sky-accent/50 bg-sky-dark overflow-hidden"
      >
        <div class="absolute inset-0 flex">
          <div
            v-for="i in 4"
            :key="i"
            class="flex-1 border-r border-sky-dark-100/30 last:border-r-0"
          />
        </div>

        <div
          class="progress-fill absolute inset-y-0 left-0 bg-gradient-to-r from-sky-accent to-sky-accent-light"
          :class="{ 'transition-all duration-500 ease-out': !reducedMotion }"
          :style="{ width: `${percent}%` }"
        >
          <div class="absolute inset-0 bg-gradient-to-b from-white/20 to-transparent" />

          <div
            class="glow-effect absolute inset-0 opacity-0 group-hover:opacity-100"
            :class="{ 'transition-opacity duration-300': !reducedMotion }"
          />
        </div>

        <div class="absolute inset-0 flex items-center justify-center">
          <span class="text-xs font-ui font-bold text-sky-text drop-shadow-md">
            {{ percent }}%
          </span>
        </div>
      </div>
    </div>

    <Transition name="fade">
      <div
        v-if="showTooltip && showPopover"
        class="absolute top-full left-1/2 -translate-x-1/2 mt-2 z-50"
      >
        <div class="bg-sky-dark-50 border border-sky-dark-100 rounded-lg shadow-xl p-3 min-w-48">
          <p class="text-sm font-ui font-semibold text-sky-text mb-2">
            {{ t('progress.title') }}
          </p>

          <ul class="space-y-1">
            <li
              v-for="section in sections"
              :key="section.key"
              class="flex items-center gap-2 text-sm"
            >
              <span v-if="section.visited" class="text-green-400" aria-hidden="true">&#10003;</span>
              <span v-else class="text-sky-text-muted" aria-hidden="true">&#9675;</span>
              <span :class="section.visited ? 'text-sky-text' : 'text-sky-text-muted'">
                {{ section.name }}
              </span>
            </li>
          </ul>

          <p class="text-xs text-sky-text-muted mt-2 pt-2 border-t border-sky-dark-100">
            {{ t('progress.summary', { visited: visitedCount, remaining: remainingCount }) }}
          </p>

          <div
            class="absolute -top-2 left-1/2 -translate-x-1/2 w-4 h-4 bg-sky-dark-50 border-l border-t border-sky-dark-100 transform rotate-45"
          />
        </div>
      </div>
    </Transition>
  </div>
</template>

<style scoped>
.progress-bar-wrapper:focus {
  outline: 2px solid var(--sky-accent);
  outline-offset: 2px;
  border-radius: 9999px;
}

.glow-effect {
  box-shadow:
    0 0 10px var(--sky-accent),
    0 0 20px var(--sky-accent);
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.15s ease;
}

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

.compact .progress-frame {
  height: 1rem;
  width: 100%;
}

.compact .progress-frame span {
  font-size: 0.65rem;
}

@media (prefers-reduced-motion: reduce) {
  .progress-fill,
  .glow-effect {
    transition: none;
  }
}
</style>