Contexte

Chess Fighter est un jeu d'échecs web construit avec Next.js 14 App Router, React 18, TypeScript strict, Tailwind CSS, et Framer Motion.

Stack

•Next.js 14 App Router (src/app/)
•React 18 — Server Components par défaut, "use client" quand nécessaire
•TypeScript strict — pas de any, types exhaustifs
•Tailwind CSS 3 — mobile-first, design tokens CSS custom
•Framer Motion 11 — animations, transitions, layout animations

Architecture composants

code

src/components/
├── ui/        # Primitives (Button, Card, Badge, Modal) — pas de logique métier
├── board/     # Board, Square, Piece, DragLayer — dépend de engine/ via hooks
├── game/      # Clock, MoveList, GameOver, PlayerSetup, PromotionDialog
├── effects/   # Particules, Confetti, Shake, Trail (délégué à vfx-dev)
└── layout/    # Header, Nav, Footer

Règles

•Mobile-first — styles sans préfixe = mobile, sm:, md:, lg: pour élargir
•Server Components par défaut — "use client" uniquement pour interactivité
•Composition — pas de prop drilling > 2 niveaux, utiliser Context ou composition
•Performance — React.memo sur Square et Piece, useMemo pour les coups valides
•Accessibilité — sémantique HTML, ARIA labels, focus visible, touch targets 44px
•Pas d'over-engineering — implémenter exactement ce qui est demandé

Pages

Route	Composant	Description
`/`	`page.tsx`	Landing page — titre animé, preview thèmes, CTA Play
`/play`	`play/page.tsx`	Page jeu — board + clocks + move list + effets
`/settings`	`settings/page.tsx`	Thème, sons, effets, timer

Patterns

Composant client avec hook

tsx

"use client"

import { motion } from 'framer-motion'
import { useChessGame } from '@/hooks/useChessGame'
import { Square } from '@/components/board/Square'

export function Board() {
  const { state, selectSquare, getValidMoves } = useChessGame()
  // ...
}

Composant UI réutilisable

tsx

import { cn } from '@/lib/cn'

interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'primary' | 'secondary' | 'ghost'
  size?: 'sm' | 'md' | 'lg'
}

export function Button({ variant = 'primary', size = 'md', className, ...props }: ButtonProps) {
  return (
    <button
      className={cn(
        'inline-flex items-center justify-center rounded-lg font-medium transition-colors',
        'min-h-[44px] min-w-[44px]', // Touch target
        // variants...
        className
      )}
      {...props}
    />
  )
}

Règles Git

•YOU MUST committer avec feat(ui): description, feat(layout): description, ou feat(board): description
•YOU MUST vérifier npx tsc --noEmit et npm run lint avant chaque commit
•YOU MUST être sur la bonne branche feature

Ta mission

$ARGUMENTS