README.md 7.62 KB
Newer Older
Gerson Sunyé's avatar
Gerson Sunyé committed
1
# Online Chess
2

Quentin's avatar
Quentin committed
3
4
Ce projet consiste à déployer une application web de jeu d'échecs jouable en multijoueur.

Gerson Sunyé's avatar
Gerson Sunyé committed
5
## Objectifs
6

Gerson Sunyé's avatar
Gerson Sunyé committed
7
8
La fin du semestre approche, il est temps de montrer tout ce que vous avez appris et de proposer au monde entier votre première application web (webapp) !
L'objectif de ce mini-projet est d'intégrer et adapter tout le travail réalisé lors des TP et TD précédents, afin de réaliser une application de jeu d'échecs jouable (et observable) en multijoueur réseau.
Quentin's avatar
Quentin committed
9

Gerson Sunyé's avatar
Gerson Sunyé committed
10
## Préparation
11

Gerson Sunyé's avatar
Gerson Sunyé committed
12
1. Créez une fourche (Fork) du project sur votre compte GitLab: [Cliquez ici pour créer le Fork](https://gitlab.univ-nantes.fr/naomod/software-development-course/onlineChess/forks/new) (Éventuellement, Gitlab vous demandera de vous connecter).
13

Gerson Sunyé's avatar
Gerson Sunyé committed
14
2. Créez et configurez une copie locale du projet. Ouvrez le **Terminal** et exécutez les commandes suivantes:
Quentin's avatar
Quentin committed
15

Gerson Sunyé's avatar
Gerson Sunyé committed
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
```bash
git clone https://gitlab.univ-nantes.fr/${USER}/onlineChess.git
cd onlineChess
npm install
```

3. Regardez la structure du projet. Le projet est organisé en différents dossiers:

```txt
    |-- onlineChess
      |-- client
         |-- index.html
         |-- script.js
         |-- style.css
      |-- src
         |-- chessboard.ts
         |-- main.ts
         |-- move-validation.ts
         |-- movements.ts
         |-- piece.ts
         |-- position.ts
      |-- spec
         |-- move-validation-spec.ts
         |-- movements-spec.ts
         |-- support
            |-- jasmine.json
      |-- node_modules
      |-- package.json
      |-- tsconfig.json
```

- `client` contient le code Javascript qui sera exécuté sur le browser. Vous ne devez pas modifier le contenu de ce dossier.
  - `index.html` : page principale de l'application
  - `style.css` : mise en forme de l'application
  - `script.js` : algorithme(s) JavaScript côté client (affichage de l'échiquier)
- `src` contient le code source du serveur.
  - `main.ts` : programme principal de création et gestion du serveur web
- `spec` contient les tests unitaires du serveur.
- `node_modules` contient les modules Node.js utilisés dans le projet. Vous ne devez pas modifier le contenu de ce dossier.
Erwan Bousse's avatar
Erwan Bousse committed
55
56
- `package.json` est le fichier de configuration de **npm**. Vous n'avez pas besoin de le modifier.
- `tsconfig.json` est le fichier de configuration de **TypeScript**. Vous n'avez pas besoin de le modifier.
Gerson Sunyé's avatar
Gerson Sunyé committed
57
58
59
60
61

## Test et lancement

- Le projet utilise l'outil de construction et de gestion de modules **npm**.
- Pour lancer tous les tests unitaires du projet avec Jasmine, exécutez: `npm test`.
Erwan Bousse's avatar
Erwan Bousse committed
62
- Pour lancer le serveur en mode développement, exécutez: `npm run dev`.
Gerson Sunyé's avatar
Gerson Sunyé committed
63
64
- Pour accéder à l'application, ouvrez l'URL suivante: [http://localhost:8080](http://localhost:8080).
- Pour accéder au contenu JSON de l'échiquier en cours, utilisez l'URL suivante:  [http://localhost:8080/status.js](http://localhost:8080/status.js).
Quentin's avatar
Quentin committed
65
66

## Manuel d'utilisation
67

Gerson Sunyé's avatar
Gerson Sunyé committed
68
69
70
71
72
73
74
75
76
77
78
79
80
Pour déplacer les pièces sur l'échiquier, indiquez dans le formulaire en bas de page la pièce à déplacer et sa destination.
Utilisez la notation par coordonnées, qui inclut la place à partir de laquelle la pièce se déplace, ainsi que sa destination.
Par exemple:

| Coup | Coordonnées | Description |
| --- | --- | --- |
| 1. | E2-E4 E7-E5 | Pion blanc en E2 se déplace à E4. Pion noir en E7 se déplace à E5.
| 2. | G1-F3 B8-C6 | Cheval blanc en G1 se déplace à F3. Cheval noir en B8 se déplace à C6.

## Fonctionnement de l'application

Le programme principal du serveur (`main.ts`) est chargé de démarrer un mini-serveur web capable de recevoir les différentes requêtes provenant des navigateurs connectés à l'application :

Erwan Bousse's avatar
Erwan Bousse committed
81
82
83
84
- GET "`/`" : distribue le fichier `views/index.ejs`;
- GET "`/status.js`" : génère et distribue l'échiquier en cours au format JSON.
- POST "`/`" : reçoit et traite un coup à jouer;

Gerson Sunyé's avatar
Gerson Sunyé committed
85
86
87
88
89
90
91

Ces trois traitements correspondent aux différents appels à `app.get()` et `app.post()` du programme principal.
  
## Chronologie d'une partie

1. Lorsqu'un utilisateur se connecte à l'application (adresse **"/"**), le serveur distribue alors la page html principale composée d'un échiquier vierge et d'une zone de saisie permettant à l'utilisateur de remplir le coup à jouer.

Erwan Bousse's avatar
Typo    
Erwan Bousse committed
92
2. Le navigateur internet récupère immédiatement les informations de la partie en cours présentes à l'adresse `/status.js` et remplit l'échiquier à l'aide d'un script situé dans le fichier `script.js`. Ces deux scripts se trouvent dans le dossier `client`.
Gerson Sunyé's avatar
Gerson Sunyé committed
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121

3. Un clic sur le bouton "Envoyer" effectue une requête de type **POST** au à l'adresse **"/"** du serveur, contenant les informations du champs de texte associé. 
Le serveur traite alors la requête afin de jouer le coup demandé.

4. La page internet du joueur est alors rechargée automatiquement, affichant ainsi le nouvel état de la partie.

5. etc...

## Travail à réaliser

### Validation des mouvements

La version actuelle permet le déplacement libre des pièces, sans respecter les règles des échecs. 
Pour l'instant, seuls les déplacements des pions sont validés.
Vous devez mettre en oeuvre la validations des déplacements des autres pièces: le Roi, la Dame, le Cavalier, le Fou et la Tour. 

Le traitement des déplacements se fait de la façon suivante:

1. Lorsqu'une requête **POST** arrive, le serveur extrait la valeur du champ envoyé et appelle la fonction `processMove()` du module `movements`.

2. La fonction `processMove()` appelle une autre fonction, `parseMoveString()`, qui transforme une chaîne de caractères en un déplacement (`interface Move`) entre 2 positions (`interface Position`).

3. La fonction `processMove()` appelle ensuite la fonction `isMovePossible()`, qui fait appel à différentes fonctions de validation spécifiques aux pièces de l'échiquier (une par type de pièce). Le module `move-validation` contient toutes les fonctions de validation de déplacements.

4. Par exemple, lorsqu'il s'agit d'un Pion blanc, la fonction `isMovePossible()` appelle la fonction `whitePawnMove()`, qui retourne `true` si le déplacement est possible ou `false` s'il ce n'est pas le cas.

5. Si le mouvement est possible, c'est à dire la fonction `isMovePossible()` retourne `true`, la fonction  `processMove()` appelle la fonction `performMove(), qui effectue le déplacement.


Erwan Bousse's avatar
Typo    
Erwan Bousse committed
122
Vous devez donc parcourir le module `move-validation` et coder les fonctions de validation contenant le commentaire "`// TODO:`". 
Gerson Sunyé's avatar
Gerson Sunyé committed
123
124
125
126
127
128
129
130
131
132

### Tests unitaires

Pour vérifier que les fonctions du module `move-validation` fonctionnent correctement, vous devez écrire des tests unitaires, qui vont vérifier que les fonctions acceptent les mouvements valides et n'acceptent pas les mouvements invalides.

Par exemple, pour tester 

- valider les mouvements. 
- tester

Erwan Bousse's avatar
Typo    
Erwan Bousse committed
133
134
135
136
137
#### Pion

- Test1: XXX
- Test2: XXX

Gerson Sunyé's avatar
Gerson Sunyé committed
138
### Rendu
139

Gerson Sunyé's avatar
Gerson Sunyé committed
140
141
  L'ensemble de votre projet doit être archivé au format zip et déposé sur Madoc au format
\begin{center}\verb+NOM1_NOM2_NOM3_NOM4.zip+\end{center} \textbf{avant la date indiquée sur la zone de dépôt}. Chaque fichier supplémentaire ajouté dans le projet doit contenir en entête un \textbf{commentaire} comportant une description du fichier et l'ensemble de vos noms et prénoms. Inspirez-vous des sources fournies dans le projet. Vous pouvez également modifier le fichier \texttt{README} pour y décrire l'organisation de vos modules, les fonctionnalités et les changements apportés dans le projet ainsi que les limites rencontrées.
Quentin's avatar
Quentin committed
142

Gerson Sunyé's avatar
Gerson Sunyé committed
143
### Derniers conseils
Quentin's avatar
Quentin committed
144

Gerson Sunyé's avatar
Gerson Sunyé committed
145
146
147
- Rappelez-vous que «Une fonction sans test unitaire ne fonctionne pas»! 
- Écrivez les tests unitaires avant ou en même temps que les fonctions. Ne les laissez pas pour la fin, les test unitaires sont très utiles pendant le développement et vous feront gagner du temps.
- 
148

Quentin's avatar
Quentin committed
149

150