Screenshot Artist

Total minimum : 38 screenshots

Viewports

const viewports = [
  { name: 'mobile', width: 375, height: 667 },
  { name: 'tablet', width: 768, height: 1024 },
  { name: 'desktop', width: 1440, height: 900 },
]

Script Playwright

// tests/e2e/screenshots.spec.ts
import { test } from '@playwright/test'

test.describe('Screenshots', () => {
  for (const theme of ['classic', 'marvel', 'pokemon', 'neon']) {
    for (const viewport of viewports) {
      test(`${theme} - ${viewport.name} - menu`, async ({ page }) => {
        await page.setViewportSize(viewport)
        // Naviguer vers le menu, changer de thème
        await page.screenshot({
          path: `screenshots/${theme}/${viewport.name}/menu.png`,
          fullPage: false,
        })
      })
    }
  }
})

Galerie SCREENSHOTS.md

Génère automatiquement un fichier SCREENSHOTS.md avec :

• Tableau de toutes les captures organisé par thème
• Liens relatifs vers les images
• Descriptions de chaque scène

Vidéo de démo (US-12)

Séquence (60-90 secondes)

1. Intro (5s) : Titre "Chess Fighter" sur fond noir
2. Menu (5s) : Landing page avec animations
3. Thèmes (10s) : Switch entre les 4 thèmes (2.5s chacun)
4. Nouvelle partie (5s) : Setup joueurs, lancement
5. Gameplay (20s) : Séquence de coups prédéfinie menant à des événements :
   • Ouverture classique (e4 e5, Nf3 Nc6)
   • Capture avec particules
   • Développement de pièces
6. Check (5s) : Situation d'échec avec flash + shake
7. Checkmate (8s) : Mat avec overlay + confetti + animation victoire
8. Mobile (7s) : Même jeu sur viewport mobile
9. Outro (5s) : Logo + texte "Built with Next.js 14"

Script Playwright pour la vidéo

// tests/e2e/demo-video.spec.ts
test('demo video capture', async ({ page }) => {
  // Configure viewport 1920x1080
  await page.setViewportSize({ width: 1920, height: 1080 })

  // Start video recording
  const video = page.video()

  // Execute scripted sequence...
})

Post-production FFmpeg

# scripts/generate-demo.ts
# 1. Assembler les clips Playwright
# 2. Ajouter transitions (fade)
# 3. Ajouter titre et outro
# 4. Encoder 1080p 60fps H.264
ffmpeg -i input.webm -vf "fps=60" -c:v libx264 -preset slow -crf 18 demo/chess-fighter-demo.mp4

Fichiers

tests/e2e/
├── screenshots.spec.ts      # Capture des 38+ screenshots
└── demo-video.spec.ts       # Capture vidéo de démo

scripts/
├── generate-gallery.ts      # Génère SCREENSHOTS.md
└── generate-demo.ts         # Post-production FFmpeg

screenshots/                 # Output screenshots (gitignored sauf galerie)
├── classic/
├── marvel/
├── pokemon/
└── neon/

demo/                        # Output vidéo
└── chess-fighter-demo.mp4

Règles

• Reproductible : les scripts doivent donner le même résultat à chaque exécution
• Positions prédéfinies : utiliser des positions de jeu scriptées, pas aléatoires
• Attendre les animations : waitForTimeout après chaque action visuelle
• Haute qualité : screenshots en PNG, vidéo en 1080p 60fps

Règles Git

• YOU MUST committer avec feat(screenshots): description ou feat(demo): description

Ta mission

$ARGUMENTS