Vue d'ensemble
Cette extension Chrome est un prototype d'engineering navigateur explorant l'intégration en temps réel d'un moteur d'échecs. Elle analyse un échiquier rendu, génère les positions FEN, communique de manière asynchrone avec Stockfish et transforme les sorties du moteur en évaluations compréhensibles.
Mon travail a couvert l'architecture TypeScript, le parsing du DOM, la gestion d'état, la communication WebWorker, la couche d'évaluation visuelle et le pipeline de build. Le portfolio le présente comme projet d'analyse contrôlée et d'apprentissage.Usage Responsable
Le dépôt contient une intégration aux pages en direct et un mode d'exécution automatique créé pour tester l'automatisation navigateur. Ces capacités ne doivent pas être utilisées pendant une partie compétitive ou classée, ni dans un contexte contraire aux règles de fair-play d'une plateforme. La valeur d'engineering démontrée concerne l'architecture navigateur, l'extraction d'état, l'intégration asynchrone du moteur et l'interface d'évaluation explicable.Fonctionnalités Clés
| Fonctionnalité | Description |
|---|
| Analyse de Position | Surveillance de l'échiquier avec extraction FEN pour une analyse contrôlée |
| Évaluation des Coups | Score en centipawn avec affichage de la variation principale |
| Suggestions Visuelles | Recommandations de coups surlignées sur l'échiquier |
| Suivi de l'Avantage | Barre de progression dynamique montrant l'évaluation de la position |
| Mode de Test d'Automatisation | Capacité d'exécution pour des tests isolés d'automatisation navigateur, pas pour le jeu compétitif |
| Interface Déplaçable | Panneau compact et minimisable positionnable n'importe où |
Architecture Technique
L'extension suit une architecture modulaire orientée services :
src/
├── types/ # Définitions de types TypeScript
│ ├── chess.types.ts # FEN, coups, scores
│ ├── engine.types.ts # Communication moteur
│ └── ui.types.ts # Types des composants UI
├── services/ # Services principaux
│ ├── board.service.ts # État de l'échiquier & génération FEN
│ └── engine.service.ts # WebWorker Stockfish
├── components/ # Composants UI
│ ├── panel.component.ts # Panneau de contrôle principal
│ └── highlights.component.ts # Surbrillance des coups
├── core/ # Logique métier
│ ├── analysis.manager.ts # Gestion de l'état d'analyse
│ └── autoplay.manager.ts # Exécution automatique des coups
└── content/ # Point d'entrée
└── assistant.ts # Orchestrateur principal
Patterns de Conception
- Service Pattern - Services encapsulés pour l'interaction avec l'échiquier et le moteur
- Observer Pattern - Mises à jour du moteur basées sur les événements avec modèle d'abonnement
- Singleton Pattern - Services à instance unique pour la cohérence de l'état
- Facade Pattern - La classe ChessAssistant orchestre tous les sous-systèmes
Stack Technique
| Technologie | Utilisation |
|---|
| TypeScript 5.4 | Développement typé avec mode strict |
| Vite 5.2 | Builds rapides avec HMR et bundling optimisé |
| CRXJS | Développement d'extensions Chrome avec Vite |
| Chrome Extension MV3 | Version moderne du manifeste avec service workers |
| Stockfish | Moteur d'échecs pour l'analyse de positions |
| ESLint + Prettier | Qualité et formatage du code |
| GitHub Actions | Pipeline CI/CD |
Fonctionnalités Principales
Génération FEN
Le service d'échiquier extrait les positions des pièces depuis le DOM et génère la notation FEN standard :
Communication avec le Moteur
Communication asynchrone avec Stockfish via WebWorker :
Mises à Jour Événementielles
Mises à jour d'analyse en temps réel via un pattern d'abonnement :
Fonctionnalités de l'Interface
- Design Compact - 260px de largeur, empreinte minimale
- Panneau Déplaçable - Positionnable n'importe où sur l'écran
- Minimisable - Se réduit en un petit bouton "+" à 50% d'opacité
- Sélection de Couleur - Analyse du point de vue des Blancs ou des Noirs
- Historique des Coups - Évaluations colorées (Excellent/Bon/Correct/Faible)
Résumé des Technologies
| Catégorie | Technologies |
|---|
| Langage | TypeScript 5.4, ES2022 |
| Build | Vite 5.2, CRXJS |
| Extension | Chrome Manifest V3 |
| Moteur | Stockfish WASM |
| Qualité | ESLint, Prettier |
| CI/CD | GitHub Actions |
