Une carte de voeux virtuelle

## 1. Contexte

Nous avons déjà une **carte de vœux interactive** en HTML/JS/CSS qui :

* Affiche un **ciel étoilé animé** (scintillement, étoiles filantes, nébuleuse).
* Fait apparaître successivement plusieurs **messages de vœux** (dont un en typo Mistrully, mot par mot).
* Permet à l’utilisateur de **dessiner une constellation** en cliquant dans le ciel.
* Associe cette constellation à un **pseudo**.
* Sauvegarde aujourd’hui les constellations uniquement **en local (localStorage)**.
* Propose un mode « **Galaxie Finzzle** » où l’on voit toutes les constellations disponibles dans l’univers local.

Nous voulons passer d’un prototype “local / proof of concept” à une **version production**, partagée, plus propre visuellement.

---

## 2. Objectifs de la mission

1. **Rendre les constellations réellement partagées** :

* Sauvegarde côté serveur (base de données ou service externe).
* Consultation par tous les utilisateurs, depuis un même “univers” partagé.

2. **Rendre la galaxie lisible et non chaotique** :

* Ne pas afficher toutes les constellations superposées en vrac.
* N’afficher au départ que la **liste des pseudos**.
* Au clic sur un pseudo, **zoom** sur la constellation correspondante.

3. **Améliorer le design global** :

* Harmoniser la DA (cohérence couleurs, typographies, animations).
* Rendre l’expérience fluide et élégante, desktop + mobile.

4. Conserver la logique actuelle :

* Messages de vœux en séquences.
* Ciel étoilé animable via `<canvas>`.
* Interaction principale : dessin de constellation + pseudo.

---

## 3. Fonctionnalités à développer / améliorer

### 3.1. Persistance et univers partagé

* Mettre en place un **back-end simple** (API) pour :

* Créer une constellation :

* Entrée : pseudo, tableau de points `{x, y}` (coordonnées canvas normalisées).
* Sortie : id unique, horodatage, éventuellement hash de lien.
* Lister les constellations existantes (avec pagination ou limite raisonnable).
* Récupérer une constellation par `id`.

* Proposer un **schéma de données minimal**, par exemple :

```json
{
"id": "uuid",
"pseudo": "Marik",
"points": [{ "x": 0.52, "y": 0.34 }, ...],
"created_at": "[Téléphone visible pour les membres Pro]T13:45:00Z"
}
```

* Remplacer l’usage actuel de `localStorage` par :

* Un appel API `POST /constellations` à la sauvegarde.
* Un appel API `GET /constellations` au chargement de la galaxie.
* Éventuellement : conserver localStorage en fallback / cache si l’API n’est pas disponible.

### 3.2. Galaxie partagée, accessible à tous

* **Au chargement de la carte**, la galaxie doit pouvoir charger la liste de constellations :

* Dans un panneau type “Univers partagé / Galaxie Finzzle”.
* Affichage sous forme de **liste de pseudos** (un par constellation, ou regroupement si un pseudo a plusieurs constellations).

* Comportement souhaité :

* Au survol ou clic sur un pseudo :

* Le ciel se centre sur la constellation correspondante (zoom, pan).
* On affiche uniquement cette constellation (ou très fortement accentuée), les autres en fond :

* soit masquées totalement,
* soit à peine visibles (alpha très faible) mais sans gêner la lecture.
* Possibilité de revenir à la **vue “neutre”** (ciel sans zoom sur une constellation spécifique, par exemple via un bouton “Réinitialiser la vue”).

* Pour éviter le “bazar visuel” :

* Par défaut : **aucune constellation n’est dessinée** en avant-plan.
* On ne voit que le **ciel + la liste de pseudos**.
* La constellation n’est dessinée que lorsqu’on sélectionne un pseudo.

### 3.3. Amélioration du dessin et du zoom

* Ajouter un système de **coordonnées normalisées** :

* Stocker les points en [0,1] (en x et y) plutôt qu’en pixels bruts.
* Permettre un rendu correct quelle que soit la taille d’écran (responsive).

* Ajouter un système de **caméra / zoom** :

* Calculer le **bounding box** de la constellation sélectionnée.
* Adapter l’échelle et la translation du canvas pour centrer et zoomer sur cette zone.
* Animer le zoom (transition douce) plutôt que téléporter la vue.

### 3.4. Amélioration du design global

* Revoir / optimiser :

* Palette couleurs : fond ciel, étoiles, nébuleuse, doré institutionnel.
* Typographies (Euclid / Mistrully), tailles, interlignes, lisibilité sur petits écrans.
* Transitions des messages (fade, timing, cohérence).
* Apparition du logo Finzzle + liseret : fluidité de l’animation, alignements.
* Style des panneaux UI (pseudo, boutons, Galaxie Finzzle) pour qu’ils soient plus discrets mais lisibles.

* Rendre le tout **parfaitement responsive** :

* Desktop large, laptop, tablette, mobile portrait.
* Ajuster tailles de police, marges, densité d’étoiles si besoin.

* Respecter les contraintes :

* Couleurs de texte : noir, doré, blanc (pas de rouge/vert/bleu pur pour la typo).
* Respecter l’univers Finzzle (logo fourni, ton institutionnel sobre, pas de kitsch).

---

## 4. Spécifications techniques souhaitées

### 4.1. Front-end

* Stack actuelle : **HTML + CSS + JavaScript vanilla + `<canvas>`**.
* Le freelance doit :

* Partir du fichier existant (et non repartir de zéro).
* Structurer le JS proprement (modulariser un minimum, clarifier les fonctions).
* Laisser un code **documenté** (commentaires clairs sur les parties clés : phases d’animation, dessin du ciel, gestion des constellations, appels API).

### 4.2. Back-end

* Proposer une solution simple, du type :

* Node.js + Express + base de données (SQLite/PostgreSQL)
ou
* Serverless (Netlify Functions / Vercel) + stockage (fauna, supabase, autre).
* Exposer une API REST minimaliste :

* `POST /constellations`
* `GET /constellations` (paramètres : limite, pagination éventuelle)
* `GET /constellations/:id`
* Gérer un minimum de robustesse :

* Validation des données.
* Limitation / protection basique contre le spam trivial (tant que l’usage est raisonnable).

### 4.3. Intégration

* La carte doit rester :

* **Utilisable comme page HTML autonome.**
* Éventuellement **embarquable dans WordPress via `<iframe>`** (le freelance devra faire attention aux chemins relatifs, aux fonts, etc.).

---

## 5. Livrables attendus

1. **Code source propre** :

* Fichier HTML mis à jour.
* Fichier(s) JS et CSS extraits si besoin.
* Script back-end (API) + instructions de déploiement.

2. **Documentation courte** (obligatoire) :

* Comment installer / lancer le back-end en local.
* Comment déployer (Netlify, Vercel, ou autre solution retenue).
* Comment configurer l’URL de l’API côté front.

3. **Micro guide d’usage** :

* Scénario utilisateur : dessin, pseudo, sauvegarde, consultation, clic sur pseudo, zoom.
* Explication du mode “Galaxie Finzzle”.

---

## 6. Critères de réussite

* La carte fonctionne de façon identique à la version actuelle pour :

* Les messages.
* Le dessin de constellation.
* Les constellations :

* Sont **sauvées** sur un serveur.
* Sont **consultables par tous** depuis la même URL.
* Sont **identifiables par pseudo** dans une liste claire.
* N’encombrent pas visuellement le ciel (aucune constellation n’apparaît par défaut, seulement après sélection).
* Le design global est :

* Plus équilibré, plus “premium”, cohérent avec un univers institutionnel moderne.
* Lisible sur desktop et mobile.

---