kayjaydee
4e7c84912a
- 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.
113 lines
4.9 KiB
Markdown
113 lines
4.9 KiB
Markdown
# 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
|