skycel
4a7fba5999
Story 3.6 : Carte interactive desktop (Konva.js) - Installation de konva et vue-konva - Configuration nuxt.config.ts pour transpile Konva - Création mapZones.ts avec 5 zones et connexions - Composant InteractiveMap.client.vue : - Canvas Konva avec zones cliquables - États visuels (visité/non visité/verrouillé) - Tooltip au hover avec statut - Marqueur de position animé - Navigation clavier (Tab + Enter) - Légende interactive - Traductions map.* FR/EN - Lazy-loading client-only (.client.vue) Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
72 lines
1.6 KiB
TypeScript
72 lines
1.6 KiB
TypeScript
export interface MapZone {
|
|
id: 'projets' | 'competences' | 'temoignages' | 'parcours' | 'contact'
|
|
label: {
|
|
fr: string
|
|
en: string
|
|
}
|
|
route: {
|
|
fr: string
|
|
en: string
|
|
}
|
|
position: { x: number; y: number }
|
|
color: string
|
|
emoji: string
|
|
size: number
|
|
}
|
|
|
|
export const mapZones: MapZone[] = [
|
|
{
|
|
id: 'projets',
|
|
label: { fr: 'Projets', en: 'Projects' },
|
|
route: { fr: '/projets', en: '/en/projects' },
|
|
position: { x: 150, y: 180 },
|
|
color: '#3b82f6',
|
|
emoji: '💻',
|
|
size: 70,
|
|
},
|
|
{
|
|
id: 'competences',
|
|
label: { fr: 'Compétences', en: 'Skills' },
|
|
route: { fr: '/competences', en: '/en/skills' },
|
|
position: { x: 350, y: 100 },
|
|
color: '#10b981',
|
|
emoji: '⚡',
|
|
size: 70,
|
|
},
|
|
{
|
|
id: 'temoignages',
|
|
label: { fr: 'Témoignages', en: 'Testimonials' },
|
|
route: { fr: '/temoignages', en: '/en/testimonials' },
|
|
position: { x: 300, y: 280 },
|
|
color: '#f59e0b',
|
|
emoji: '💬',
|
|
size: 70,
|
|
},
|
|
{
|
|
id: 'parcours',
|
|
label: { fr: 'Parcours', en: 'Journey' },
|
|
route: { fr: '/parcours', en: '/en/journey' },
|
|
position: { x: 520, y: 220 },
|
|
color: '#8b5cf6',
|
|
emoji: '📍',
|
|
size: 70,
|
|
},
|
|
{
|
|
id: 'contact',
|
|
label: { fr: 'Contact', en: 'Contact' },
|
|
route: { fr: '/contact', en: '/en/contact' },
|
|
position: { x: 650, y: 150 },
|
|
color: '#fa784f',
|
|
emoji: '📧',
|
|
size: 70,
|
|
},
|
|
]
|
|
|
|
export const mapConnections = [
|
|
['projets', 'competences'],
|
|
['competences', 'temoignages'],
|
|
['temoignages', 'parcours'],
|
|
['parcours', 'contact'],
|
|
['projets', 'temoignages'],
|
|
]
|