docs(10): plan Phase 10 — 5 demo plugins Hytale

- 10-CONTEXT: specs des 5 plugins (GravityFlip, MagneticHand, TimeRewind, BlackHoleGrenade, Paintball) avec core mechanics, wow factor, complexité - 10-01-PLAN: brainstorm done (concepts locked) - 10-02-PLAN: 5 waves de code (1 plugin par wave, complexité ascendante) Java + Gradle Kotlin DSL + JDK 17 + MIT license, repos kayjaydee/hytale-* - 10-03-PLAN: composant HytaleDemoGrid.vue + intégration /hytale + i18n hytale.demos.* + data source app/data/hytaleDemos.ts - IDEAS-BACKLOG.md (root): 30 concepts supplémentaires pour v1.3+ classés par mouvement/combat/monde/social/économie Effort estimé Phase 10: ~10 jours code + 1-2 jours frontend intégration.
2026-04-22 22:49:59 +02:00
parent 29f4a47ace
commit 4e7c84912a
5 changed files with 545 additions and 0 deletions
@@ -0,0 +1,112 @@
+# Plan 10-03 — HytaleDemoGrid Component + /hytale Integration
+
+## Goal
+
+Afficher sur `/hytale` une section "Live Demos" présentant les 5 plugins de Phase 10 (ou ceux déjà shippés), avec screenshot/gif + description + lien GitHub + tag techno.
+
+## Depends on
+
+- Plan 10-02 Wave 1 minimum (au moins 1 plugin publié) pour avoir du contenu réel
+- Peut être développé en parallèle avec placeholder data au début
+
+## Success Criteria
+
+1. Composant `HytaleDemoGrid.vue` créé dans `app/components/`, auto-importé
+2. Section "Live Demos" visible sur `/hytale` (FR + EN), SSR rendu
+3. Chaque card affiche : image/gif, titre, description 1 phrase, tag techno, lien GitHub (externe `rel="noopener"`), wow factor indicator optionnel
+4. Data source centralisée : `app/data/hytaleDemos.ts` typé avec `HytaleDemo` interface
+5. i18n `hytale.demos.*` ajouté dans `fr.json` + `en.json` (title, subtitle, empty state)
+6. Responsive : grille 1 col mobile, 2 cols tablet, 3 cols desktop
+7. Typecheck vert : `pnpm typecheck` exit 0
+
+## Tasks
+
+### Wave 1 — Data Layer
+- [ ] Créer `shared/types/hytaleDemo.ts` :
+  ```ts
+  export interface HytaleDemo {
+    id: string
+    titleKey: string   // i18n key
+    descKey: string    // i18n key
+    image: string      // /public/demos/<id>.gif ou .webp
+    github: string     // URL repo
+    tech: 'Java' | 'Kotlin'
+    wowFactor?: 1 | 2 | 3 | 4 | 5
+  }
+  ```
+- [ ] Créer `app/data/hytaleDemos.ts` avec les 5 entries (ou les shippés au moment du code)
+- [ ] Placer placeholders dans `public/demos/` : `.webp` 400×225 avec texte "Demo coming soon" si gif pas prêt
+
+### Wave 2 — Component
+- [ ] Créer `app/components/HytaleDemoGrid.vue` :
+  - Props : `demos: HytaleDemo[]` (default = import depuis data)
+  - Template : `<UCard>` Nuxt UI v3 par démo
+  - Image `<NuxtImg>` avec `loading="lazy"`, fallback si manquante
+  - Description via `<I18nT :keypath>` pour interpolations
+  - Badge `<UBadge>` pour `tech` (couleur selon Java/Kotlin)
+  - Lien `<NuxtLink external target="_blank" rel="noopener noreferrer">` vers GitHub
+- [ ] Variant `featured` avec card plus grande pour 1 démo vedette (optionnel)
+- [ ] Empty state : si `demos` vide → message "Demos coming soon" traduit
+
+### Wave 3 — Integration
+- [ ] Ajouter section sur `app/pages/hytale.vue` après pricing/témoignages :
+  ```vue
+  <section class="py-16">
+    <h2>{{ t('hytale.demos.title') }}</h2>
+    <p>{{ t('hytale.demos.subtitle') }}</p>
+    <HytaleDemoGrid />
+  </section>
+  ```
+- [ ] Ajouter ancre `#demos` pour deep-linking
+- [ ] Vérifier responsive sur mobile/tablet/desktop (Chrome DevTools)
+
+### Wave 4 — i18n
+- [ ] Ajouter dans `i18n/locales/fr.json` :
+  ```json
+  "hytale": {
+    "demos": {
+      "title": "Live Demos",
+      "subtitle": "Plugins open-source que j'ai développés pour Hytale. Code et documentation complète sur GitHub.",
+      "viewCode": "Voir le code",
+      "emptyState": "Démos à venir"
+    }
+  }
+  ```
+- [ ] Équivalent EN dans `en.json`
+- [ ] Clés i18n par démo : `hytale.demos.gravityFlip.title`, `.description` etc. (5 démos × 2 clés × 2 langues = 20 clés)
+
+### Wave 5 — Polish
+- [ ] SEO : ajouter démos au JSON-LD de `/hytale` (liste `CreativeWork` ou `SoftwareSourceCode`) pour Google
+- [ ] Animation hover card : scale 1.02 + shadow (Tailwind transition)
+- [ ] Preload première image (`<link rel="preload">` pour la démo featured)
+- [ ] Test dark/light : vérifier contraste images et text overlay
+
+## Technical Decisions
+
+- **Data source** : TypeScript fichier statique (pas JSON) pour avoir typing + auto-import
+- **Images** : WebP prioritaire, fallback .gif si animation critique (GravityFlip, BlackHole = gif ; Paintball screenshot screenshot)
+- **Pas de CMS/frontmatter** : les démos sont stables et peu nombreuses, data-as-code suffit
+- **Couleurs tech badge** : Java = orange, Kotlin = purple (conventions ecosystem)
+- **Fallback gracieux** : si image manque, show text card "Demo image coming soon"
+
+## Deferred / Out of Scope
+
+- Satori og:image dynamique par démo (hors Phase 10)
+- Player vidéo embedded YouTube (MP4 trop lourd, gif suffit pour MVP)
+- Stats téléchargement GitHub en live (overkill, scrap manuel)
+- Internationalisation des repos GitHub README (EN only, aligné target server owners)
+
+## Commit Atomic Points
+
+- Wave 1 : `feat(hytale): add HytaleDemo type + data source`
+- Wave 2 : `feat(components): add HytaleDemoGrid component`
+- Wave 3 : `feat(hytale): integrate demos section on /hytale`
+- Wave 4 : `feat(i18n): add hytale.demos.* keys FR+EN`
+- Wave 5 : `polish(hytale): demos section hover + JSON-LD + dark mode check`
+
+## Success Validation
+
+- [ ] Curl `https://killiandalcin.fr/hytale` → HTML contient markup `HytaleDemoGrid`
+- [ ] Curl `https://killiandalcin.fr/en/hytale` → HTML contient traductions EN
+- [ ] Check lighthouse sur `/hytale` : score perf pas dégradé (images optimisées)
+- [ ] DMs Discord : copier l'URL `https://killiandalcin.fr/hytale#demos` et confirmer que le rendu est pro