skycel
64b1a33d10
- Add ZoneCard component for zone display with status indicators - Add CheminLibre drawer with vertical zone cards and path decoration - Add BottomBar with Map, Progress, and Settings buttons - Add ProgressDetail modal showing visited sections - Add SettingsDrawer with language, consent, and reset options - Add i18n translations for zone, cheminLibre, bottomBar, settings - Add --bottom-bar-height CSS variable for spacing - Modify layouts to include BottomBar on mobile (< 768px) - Support safe-area-inset for iOS devices - Touch targets minimum 48x48px for WCAG compliance Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
104 lines
2.5 KiB
Vue
104 lines
2.5 KiB
Vue
<script setup lang="ts">
|
|
import type { MapZone } from '~/data/mapZones'
|
|
|
|
const props = defineProps<{
|
|
zone: MapZone
|
|
isVisited: boolean
|
|
isLocked: boolean
|
|
isCurrent: boolean
|
|
}>()
|
|
|
|
const emit = defineEmits<{
|
|
select: []
|
|
}>()
|
|
|
|
const { locale, t } = useI18n()
|
|
|
|
const zoneName = computed(() => {
|
|
return locale.value === 'fr' ? props.zone.label.fr : props.zone.label.en
|
|
})
|
|
|
|
const statusText = computed(() => {
|
|
if (props.isLocked) return t('zone.locked')
|
|
if (props.isVisited) return t('zone.visited')
|
|
return t('zone.new')
|
|
})
|
|
|
|
const statusClass = computed(() => {
|
|
if (props.isLocked) return 'text-gray-500'
|
|
if (props.isVisited) return 'text-green-400'
|
|
return 'text-sky-accent'
|
|
})
|
|
</script>
|
|
|
|
<template>
|
|
<button
|
|
type="button"
|
|
class="zone-card relative w-full flex items-center gap-4 p-4 bg-sky-dark-50 rounded-xl border border-sky-dark-100 transition-all active:scale-98"
|
|
:class="[
|
|
isCurrent && 'ring-2 ring-sky-accent',
|
|
isLocked && 'opacity-60',
|
|
]"
|
|
:disabled="isLocked"
|
|
@click="emit('select')"
|
|
>
|
|
<!-- Illustration / Emoji -->
|
|
<div
|
|
class="shrink-0 w-16 h-16 rounded-lg flex items-center justify-center text-3xl"
|
|
:style="{ backgroundColor: `${zone.color}20` }"
|
|
>
|
|
<template v-if="isLocked">
|
|
🔒
|
|
</template>
|
|
<template v-else>
|
|
{{ zone.emoji }}
|
|
</template>
|
|
</div>
|
|
|
|
<!-- Contenu -->
|
|
<div class="flex-1 text-left">
|
|
<h3 class="font-ui font-semibold text-sky-text text-lg">
|
|
{{ zoneName }}
|
|
</h3>
|
|
<p class="text-sm" :class="statusClass">
|
|
{{ statusText }}
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Indicateurs -->
|
|
<div class="shrink-0">
|
|
<!-- Checkmark si visité -->
|
|
<span
|
|
v-if="isVisited && !isLocked"
|
|
class="inline-flex items-center justify-center w-8 h-8 rounded-full bg-green-500/20 text-green-400"
|
|
>
|
|
✓
|
|
</span>
|
|
<!-- Badge "Nouveau" si non visité et non verrouillé -->
|
|
<span
|
|
v-else-if="!isVisited && !isLocked"
|
|
class="inline-flex items-center justify-center px-2 py-1 rounded-full bg-sky-accent/20 text-sky-accent text-xs font-ui font-medium"
|
|
>
|
|
{{ t('zone.newBadge') }}
|
|
</span>
|
|
<!-- Cadenas si verrouillé -->
|
|
<span
|
|
v-else-if="isLocked"
|
|
class="inline-flex items-center justify-center w-8 h-8 text-gray-500"
|
|
>
|
|
🔒
|
|
</span>
|
|
</div>
|
|
</button>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.zone-card:active {
|
|
transform: scale(0.98);
|
|
}
|
|
|
|
.zone-card:disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
</style>
|