✨ feat(frontend): barre de progression XP style RPG
Story 3.4 : Barre de progression globale (XP bar) - ProgressBar.vue avec design RPG (bordure, graduations, glow) - Tooltip au hover avec liste des sections visitées - Animation fluide avec prefers-reduced-motion - ProgressIcon.vue pour mobile (cercle SVG + drawer) - Intégration dans AppHeader (visible si héros choisi) - Traductions progress.* FR/EN Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
169
frontend/app/components/feature/ProgressBar.vue
Normal file
169
frontend/app/components/feature/ProgressBar.vue
Normal file
@@ -0,0 +1,169 @@
|
||||
<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">✓</span>
|
||||
<span v-else class="text-sky-text-muted" aria-hidden="true">○</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>
|
||||
159
frontend/app/components/feature/ProgressIcon.vue
Normal file
159
frontend/app/components/feature/ProgressIcon.vue
Normal file
@@ -0,0 +1,159 @@
|
||||
<script setup lang="ts">
|
||||
const { t } = useI18n()
|
||||
const progressionStore = useProgressionStore()
|
||||
|
||||
const showDrawer = ref(false)
|
||||
|
||||
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)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<button
|
||||
type="button"
|
||||
class="progress-icon relative p-3"
|
||||
:aria-label="t('progress.label', { percent: progressionStore.completionPercent })"
|
||||
@click="showDrawer = true"
|
||||
>
|
||||
<div class="relative w-8 h-8">
|
||||
<svg class="w-full h-full -rotate-90" viewBox="0 0 36 36">
|
||||
<circle
|
||||
cx="18"
|
||||
cy="18"
|
||||
r="16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="3"
|
||||
class="text-sky-dark-100"
|
||||
/>
|
||||
<circle
|
||||
cx="18"
|
||||
cy="18"
|
||||
r="16"
|
||||
fill="none"
|
||||
stroke="currentColor"
|
||||
stroke-width="3"
|
||||
stroke-linecap="round"
|
||||
class="text-sky-accent"
|
||||
:stroke-dasharray="`${progressionStore.completionPercent}, 100`"
|
||||
/>
|
||||
</svg>
|
||||
<span
|
||||
class="absolute inset-0 flex items-center justify-center text-xs font-ui font-bold text-sky-text"
|
||||
>
|
||||
{{ progressionStore.completionPercent }}
|
||||
</span>
|
||||
</div>
|
||||
</button>
|
||||
|
||||
<Teleport to="body">
|
||||
<Transition name="fade">
|
||||
<div
|
||||
v-if="showDrawer"
|
||||
class="fixed inset-0 bg-black/50 z-40"
|
||||
@click="showDrawer = false"
|
||||
/>
|
||||
</Transition>
|
||||
|
||||
<Transition name="slide-up">
|
||||
<div
|
||||
v-if="showDrawer"
|
||||
class="fixed inset-x-0 bottom-0 z-50 bg-sky-dark-50 rounded-t-2xl shadow-xl p-4 pb-8"
|
||||
style="bottom: var(--bottom-bar-height, 64px)"
|
||||
>
|
||||
<div class="w-12 h-1 bg-sky-dark-100 rounded-full mx-auto mb-4" />
|
||||
|
||||
<h3 class="text-lg font-ui font-bold text-sky-text mb-4">
|
||||
{{ t('progress.title') }}
|
||||
</h3>
|
||||
|
||||
<FeatureProgressBar
|
||||
:percent="progressionStore.completionPercent"
|
||||
:show-tooltip="false"
|
||||
compact
|
||||
class="mb-4"
|
||||
/>
|
||||
|
||||
<ul class="space-y-2 mb-4">
|
||||
<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">✓</span>
|
||||
<span v-else class="text-sky-text-muted" aria-hidden="true">○</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 mb-4">
|
||||
{{ t('progress.summary', { visited: visitedCount, remaining: remainingCount }) }}
|
||||
</p>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class="w-full py-2 bg-sky-dark-100 rounded-lg text-sky-text font-ui hover:bg-sky-dark-200 transition-colors"
|
||||
@click="showDrawer = false"
|
||||
>
|
||||
{{ t('common.close') }}
|
||||
</button>
|
||||
</div>
|
||||
</Transition>
|
||||
</Teleport>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.fade-enter-active,
|
||||
.fade-leave-active {
|
||||
transition: opacity 0.3s ease;
|
||||
}
|
||||
|
||||
.fade-enter-from,
|
||||
.fade-leave-to {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
.slide-up-enter-active,
|
||||
.slide-up-leave-active {
|
||||
transition: transform 0.3s ease;
|
||||
}
|
||||
|
||||
.slide-up-enter-from,
|
||||
.slide-up-leave-to {
|
||||
transform: translateY(100%);
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
.fade-enter-active,
|
||||
.fade-leave-active,
|
||||
.slide-up-enter-active,
|
||||
.slide-up-leave-active {
|
||||
transition: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -22,13 +22,12 @@
|
||||
</nav>
|
||||
|
||||
<div class="flex items-center gap-3">
|
||||
<!-- Barre de progression -->
|
||||
<div class="hidden md:block w-24 h-1.5 bg-sky-text/10 rounded-full overflow-hidden">
|
||||
<div
|
||||
class="h-full bg-sky-accent/40 rounded-full transition-all duration-500"
|
||||
:style="{ width: progressPercent + '%' }"
|
||||
/>
|
||||
</div>
|
||||
<!-- Barre de progression XP (desktop) -->
|
||||
<FeatureProgressBar
|
||||
v-if="showProgressBar"
|
||||
:percent="progressPercent"
|
||||
class="hidden md:block"
|
||||
/>
|
||||
|
||||
<UiLanguageSwitcher />
|
||||
|
||||
@@ -88,6 +87,10 @@ const store = useProgressionStore()
|
||||
|
||||
const progressPercent = computed(() => store.progressPercent)
|
||||
|
||||
const showProgressBar = computed(() => {
|
||||
return store.hero !== null
|
||||
})
|
||||
|
||||
const mobileOpen = ref(false)
|
||||
const scrolled = ref(false)
|
||||
|
||||
|
||||
Reference in New Issue
Block a user