168 lines
5.5 KiB
Markdown
168 lines
5.5 KiB
Markdown
## Objectif
|
||
Développer une **application web d’aide à la création de mots fléchés** (et non de mots croisés). Le présent document décrit de manière **non ambiguë** le comportement attendu afin de permettre à un LLM (ex. ChatGPT) de **coder l’application fidèlement**.
|
||
|
||
---
|
||
|
||
## 1. Démarrage et création de grille
|
||
|
||
- L’application propose un écran initial où l’utilisateur choisit :
|
||
- la **largeur** (nombre de colonnes)
|
||
- la **hauteur** (nombre de lignes)
|
||
- Un bouton **« Commencer »** crée une **nouvelle page / vue** contenant une grille vide conforme aux dimensions choisies.
|
||
|
||
---
|
||
|
||
## 2. Grille : règles générales
|
||
|
||
- La grille est constituée de **cases parfaitement carrées**, jointives (sans espace).
|
||
- Chaque case est de l’un des deux types suivants :
|
||
- **Case lettre**
|
||
- **Case définition**
|
||
- Les **cases définition** ont un **fond légèrement plus foncé** que les cases lettre.
|
||
|
||
---
|
||
|
||
## 3. Règles initiales des cases définition
|
||
|
||
À la création de la grille :
|
||
|
||
- Toutes les cases situées :
|
||
- sur la **première ligne**,
|
||
- ou sur la **première colonne**,
|
||
- **et dont l’indice (ligne ou colonne) est impair**
|
||
sont automatiquement des **cases définition**.
|
||
- Les indices commencent à **1** (et non 0).
|
||
|
||
---
|
||
|
||
## 4. Saisie et édition des mots
|
||
|
||
### 4.1 Sélection et orientation
|
||
|
||
- L’utilisateur clique sur une **case lettre** pour commencer la saisie.
|
||
- Une **orientation active** est toujours définie :
|
||
- **horizontale** ou **verticale**.
|
||
- L’orientation active est visuellement indiquée par la **mise en surbrillance** de la ligne ou colonne concernée.
|
||
|
||
### 4.2 Changement d’orientation
|
||
|
||
- L’orientation bascule (horizontal ⇄ vertical) si :
|
||
- l’utilisateur **clique à nouveau sur la case active**, ou
|
||
- l’utilisateur appuie sur la touche **TAB**.
|
||
|
||
### 4.3 Saisie du texte
|
||
|
||
- Chaque lettre tapée :
|
||
- est placée dans la case courante,
|
||
- puis le curseur avance d’une case selon l’orientation active.
|
||
- Touche **Backspace** :
|
||
- supprime la lettre courante,
|
||
- puis recule le curseur d’une case.
|
||
|
||
### 4.4 Déplacements clavier
|
||
|
||
- Les **flèches directionnelles** permettent de déplacer le curseur librement dans la grille sans modifier le contenu.
|
||
|
||
---
|
||
|
||
## 5. Création automatique de cases définition
|
||
|
||
- Lorsqu’un utilisateur commence à saisir un mot :
|
||
- si la **case immédiatement précédente** (selon l’orientation) est vide,
|
||
- alors cette case devient automatiquement une **case définition**.
|
||
|
||
---
|
||
|
||
## 6. Gestion des cases définition
|
||
|
||
### 6.1 Contenu
|
||
|
||
- Une case définition peut contenir :
|
||
- **une définition horizontale**,
|
||
- **une définition verticale**,
|
||
- ou les deux simultanément.
|
||
|
||
### 6.2 Découpage visuel
|
||
|
||
- Si une case définition est associée à **deux mots** (horizontal + vertical) :
|
||
- elle est **visuellement divisée en deux moitiés**.
|
||
- les interactions (clic, sélection de définition) s’appliquent uniquement à la moitié cliquée.
|
||
|
||
### 6.3 Flèches directionnelles
|
||
|
||
- Chaque définition affichée doit être accompagnée d’une **petite flèche noire** :
|
||
- pointant vers la **première lettre du mot correspondant**,
|
||
- pouvant être **droite ou courbée** selon la direction du mot.
|
||
|
||
---
|
||
|
||
## 7. Ajout et suppression de lignes / colonnes
|
||
|
||
### 7.1 Ajout
|
||
|
||
- Des icônes **« + »** permettent :
|
||
- d’ajouter une **colonne** (icônes à droite de la grille),
|
||
- d’ajouter une **ligne** (icônes en bas de la grille).
|
||
- Lors de l’ajout, les **règles des cases définition impaires** (voir section 3) doivent être **strictement respectées**.
|
||
|
||
### 7.2 Suppression
|
||
|
||
- Des icônes **« − »** permettent :
|
||
- de supprimer une colonne,
|
||
- de supprimer une ligne.
|
||
- La suppression entraîne la mise à jour correcte des indices et des types de cases.
|
||
|
||
---
|
||
|
||
## 8. Dictionnaires de définitions
|
||
|
||
### 8.1 Format
|
||
|
||
- Les dictionnaires sont des fichiers texte contenant des lignes au format :
|
||
|
||
```
|
||
mot: définition
|
||
```
|
||
|
||
- Un même mot peut apparaître plusieurs fois avec des définitions différentes.
|
||
|
||
### 8.2 Chargement
|
||
|
||
- L’utilisateur fournit une **URL** pointant vers un fichier texte valide (ex. Pastebin raw).
|
||
- Le fichier peut être **très volumineux (jusqu’à plusieurs gigaoctets)** :
|
||
- l’implémentation doit donc être **économe en mémoire** et adaptée au streaming ou au traitement progressif.
|
||
|
||
### 8.3 Règles lexicales
|
||
|
||
- Les **mots sont comparés sans accents**.
|
||
- Les mots sont traités en **MAJUSCULES**.
|
||
- Les **définitions conservent leurs accents et leur casse d’origine**.
|
||
- Les mots contenant des **tirets** :
|
||
- sont affichés avec des **bordures en pointillés** entre les cases correspondant aux tirets.
|
||
|
||
---
|
||
|
||
## 9. Sélection des définitions
|
||
|
||
- Lorsqu’un utilisateur clique sur une **case définition** (ou une moitié de case) :
|
||
- l’application affiche la **liste des définitions compatibles** avec le mot associé.
|
||
- L’utilisateur peut sélectionner une définition :
|
||
- celle-ci est alors affichée dans la case définition correspondante.
|
||
|
||
---
|
||
|
||
## 10. Changement manuel du type de case
|
||
|
||
- Un **double-clic** sur une case bascule son type :
|
||
- **case lettre ⇄ case définition**.
|
||
- Ce changement met à jour le comportement et l’affichage de la case immédiatement.
|
||
|
||
---
|
||
|
||
## 11. Contraintes générales
|
||
|
||
- L’application est **entièrement web** (HTML/CSS/JS ou équivalent).
|
||
- Le comportement doit être **déterministe**, reproductible et sans ambiguïté.
|
||
- Toute interaction décrite ci-dessus doit être implémentée exactement telle que spécifiée.
|
||
|