From 6fc9bad083cd640355d5c31065df71ad189d0bb4 Mon Sep 17 00:00:00 2001
From: Benjamin Auder <benjamin.auder@somewhere>
Date: Thu, 28 Dec 2017 15:05:38 +0100
Subject: [PATCH] improve documentation

---
 README         | 25 -------------------------
 README.md      | 15 ++-------------
 doc/index.css  | 19 ++++++++++++++++++-
 doc/index.html | 30 +++++++++++++++++++-----------
 doc/index.pug  | 28 ++++++++++++++--------------
 5 files changed, 53 insertions(+), 64 deletions(-)
 delete mode 100644 README

diff --git a/README b/README
deleted file mode 100644
index 9b88ac9..0000000
--- a/README
+++ /dev/null
@@ -1,25 +0,0 @@
-## Prérequis
-
-php (assez récent)
-
-## Ajustement du fichier de données
-
-Renommer joueurs.csv.dist en joueurs.csv
-Éditer joueurs.csv (ajout de joueurs, édition, suppression...)
-Format en lignes : prénom,nom[,score,pdt,présent]
-                                     pdt = points de table
-score,pdt,présent : optionnels (défaut 0, 0, 1)
-
-## Lancement de l'aplication
-
-[Linux] Double click sur "westcastle.sh", ou lancement depuis un terminal
-[Windows,MacOS] `php -S localhost:8000` puis naviguer vers index.html
-
-## Utilisation
-
-1) Cliquer sur les joueurs absents dans l'onglet "joueurs"
-2) Aller dans la section "appariements" et cliquer sur le bouton en haut
-3) À la fin d'une ronde, cliquer sur chaque table pour indiquer les points
-   Pour lancer la ronde suivante, revenir en 1)
-
-Le classement est mis à jour dans la rubrique correspondante et dans joueurs.csv
diff --git a/README.md b/README.md
index edeb595..4654ca7 100644
--- a/README.md
+++ b/README.md
@@ -14,19 +14,8 @@ pdt = "points de table" ; session = "mini-points"
 ## Lancement de l'aplication
 
  - [Linux] Double click sur "westcastle.sh", ou lancement depuis un terminal
- - [Windows,MacOS] `php -S localhost:8000` puis naviguer vers index.html
+ - [Windows,MacOS] `php -S localhost:8000` puis aller &agrave; http://localhost:8000 dans un navigateur web
 
 ## Utilisation
 
- 1. Cliquer sur les joueurs absents dans l'onglet "joueurs"
- 2. Aller dans la section "appariements" et cliquer sur le bouton en haut
- 3. Lancer le chrono (section "chronom&egrave;tre", puis click gauche, puis passer en plein &eacute;cran [F11])
- 4. &Agrave; la fin d'une ronde, cliquer sur chaque table pour indiquer les (mini-)points.
-
-Le classement est mis &agrave; jour dans la rubrique correspondante et dans joueurs.csv. Il peut &ecirc;tre r&eacute;initialis&eacute; (bouton en haut).
-
-Apr&egrave;s chaque op&eacute;ration sur les points, en cas d'erreur le bouton "Restaurer" en haut &agrave; droite annule la derni&egrave;re op&eacute;ration.
-
------
-
-Pour plus de d&eacute;tails, naviguer vers localhost:8000/doc
+Naviguer vers http://localhost:8000/doc
diff --git a/doc/index.css b/doc/index.css
index 1bb5968..30b723e 100644
--- a/doc/index.css
+++ b/doc/index.css
@@ -1,9 +1,26 @@
 @import '../vendor/Ubuntu_googlefont.css';
 
+.tldr {
+	color: green;
+	font-weight: bold;
+}
+
+hr {
+	margin-bottom: 15px;
+}
+
+p.small-spacing {
+	margin-bottom: 5px;
+}
+
+ul, ol {
+	margin-top: 5px;
+}
+
 body {
 	font-family: Ubuntu, Verdana, sans-serif;
 	font-size: 1.1rem;
-	width: 1200px;
+	width: 800px;
 	margin: 30px auto;
 	line-height: 1.5rem;
 }
diff --git a/doc/index.html b/doc/index.html
index 27bc7de..7e870dc 100644
--- a/doc/index.html
+++ b/doc/index.html
@@ -5,41 +5,49 @@
     <title>Westcastle usage</title>
     <link rel="stylesheet" href="doc/index.css">
   </head>
-  <body><span>L'application est divisée en 4 sections :</span>
+  <body><span class="tldr">TL;DR:</span>
+    <ol>
+      <li>Cliquer sur les joueurs absents dans l'onglet "joueurs"</li>
+      <li>Aller dans la section "appariements" et cliquer sur le bouton en haut</li>
+      <li>Lancer le chrono (section "chronomètre", puis click gauche [puis F11])</li>
+      <li>À la fin d'une ronde, cliquer sur chaque table pour indiquer les (mini-)points.</li>
+    </ol>
+    <p>Le classement est mis à jour dans la rubrique correspondante et dans joueurs.csv.</p>
+    <p>Voir aussi la <a href="https://auder.net/westcastle_demo.webm">vidéo de démonstration</a></p>
+    <hr><span>L'application est divisée en 4 sections :</span>
     <ul>
       <li>Participants : la liste des joueurs présents (et absents)</li>
       <li>Appariements : répartition des joueurs présents par tables</li>
       <li>Chronomètre : un chrono qui démarre à 1h30 et sonne une fois à zéro</li>
       <li>Classement : le tableau des scores (voir aussi joueurs.csv)</li>
     </ul>
-    <h2>Participants</h2><img src="doc/screen_players.png">
+    <h2>Participants</h2>
     <p>
       Un clic sur un joueur présent l'enlève des joueurs actifs (il est absent) ;
       réciproquement, un clic sur un absent le ramène dans la liste des joueurs actifs.
       Les appariements sont déterminés pour les joueurs présents seulement - en revanche le classement indique tout le monde.
       
     </p>
-    <h2>Appariements</h2><img src="doc/screen_pairings_new.png">
+    <h2>Appariements</h2>
     <p>
       Un clic sur le bouton "Nouvelle ronde" réinitialise toutes les tables, en (re-)répartissant les joueurs aléatoirement sur celles-ci.
       Si nécessaire, un quatrième joueur "Toto" est ajouté en fin de table.
-      Si seulement 1, 2, ou 5 ou 6 joueurs sont présents, aucune configuration ne permet de faire jouer tout le monde : il y aura des joueurs exempts.
+      Si seulement 1, 2, ou 5 joueurs sont présents, aucune configuration ne permet de faire jouer tout le monde : il y aura des joueurs exempts.
       
-    </p><img src="doc/screen_pairings_scoring.png">
+    </p>
     <p>
       En fin de ronde, un clic sur une table permet de donner les scores de chaque joueur - en mini-points.
       Un clic sur "Enregistrer" valide les scores : le classement est automatiquement mis à jour dans la rubrique correspondante,
       et la table s'affiche désormais sur fond vert. Un clic sur "Fermer" annule l'opération, aucun changement n'est effectué.
       
-    </p><img src="doc/screen_pairings_restore.png">
-    <p>
-      En cas d'erreur, ne surtout pas scorer une nouvelle table : d'abord restaurer l'état précédent en cliquant sur le bouton "Restaurer"
+    </p>
+    <p>En cas d'erreur, <strong>ne surtout pas scorer une nouvelle table :</strong> d'abord restaurer l'état précédent en cliquant sur le bouton "Restaurer"
       sur l'écran de classement ; alternativement, on peut cliquer sur le lien présent dans l'avertissement lorsqu'on reclique sur la table en question.
       Ensuite, rentrer les scores corrigés.
       
     </p>
-    <h2>Chronomètre</h2><img src="doc/screen_timer.png">
-    <p>
+    <h2>Chronomètre</h2>
+    <p class="small-spacing">
       Ce chronomètre basique est conçu pour s'afficher centré en mode plein écran : il faut donc commencer par appuyer sur F11
       (la touche peut varier suivant le navigateur...). Ensuite :
       
@@ -53,7 +61,7 @@
       Note : le chronomètre reste actif même si l'on change de vue - penser à le mettre en pause ou le réinitialiser.
       
     </p>
-    <h2>Classement</h2><img src="doc/screen_ranking.png">
+    <h2>Classement</h2>
     <p>
       Les scores sont ordonnés par points de table décroissants d'abord, puis en cas d'ex-aequos par mini-points décroissants.
       
diff --git a/doc/index.pug b/doc/index.pug
index 9d7d348..99aaef2 100644
--- a/doc/index.pug
+++ b/doc/index.pug
@@ -8,6 +8,18 @@ html
 
 	body
 
+		span.tldr TL;DR:
+		ol
+			li Cliquer sur les joueurs absents dans l'onglet "joueurs"
+			li Aller dans la section "appariements" et cliquer sur le bouton en haut
+			li Lancer le chrono (section "chronomètre", puis click gauche [puis F11])
+			li À la fin d'une ronde, cliquer sur chaque table pour indiquer les (mini-)points.
+		p Le classement est mis à jour dans la rubrique correspondante et dans joueurs.csv.
+
+		p Voir aussi la #[a(href="https://auder.net/westcastle_demo.webm") vidéo de démonstration]
+
+		hr
+
 		span L'application est divisée en 4 sections :
 		ul
 			li Participants : la liste des joueurs présents (et absents)
@@ -17,8 +29,6 @@ html
 
 		h2 Participants
 
-		img(src="doc/screen_players.png")
-
 		p.
 			Un clic sur un joueur présent l'enlève des joueurs actifs (il est absent) ;
 			réciproquement, un clic sur un absent le ramène dans la liste des joueurs actifs.
@@ -26,32 +36,24 @@ html
 
 		h2 Appariements
 
-		img(src="doc/screen_pairings_new.png")
-
 		p.
 			Un clic sur le bouton "Nouvelle ronde" réinitialise toutes les tables, en (re-)répartissant les joueurs aléatoirement sur celles-ci.
 			Si nécessaire, un quatrième joueur "Toto" est ajouté en fin de table.
 			Si seulement 1, 2, ou 5 joueurs sont présents, aucune configuration ne permet de faire jouer tout le monde : il y aura des joueurs exempts.
 
-		img(src="doc/screen_pairings_scoring.png")
-
 		p.
 			En fin de ronde, un clic sur une table permet de donner les scores de chaque joueur - en mini-points.
 			Un clic sur "Enregistrer" valide les scores : le classement est automatiquement mis à jour dans la rubrique correspondante,
 			et la table s'affiche désormais sur fond vert. Un clic sur "Fermer" annule l'opération, aucun changement n'est effectué.
 
-		img(src="doc/screen_pairings_restore.png")
-
 		p.
-			En cas d'erreur, ne surtout pas scorer une nouvelle table : d'abord restaurer l'état précédent en cliquant sur le bouton "Restaurer"
+			En cas d'erreur, #[strong ne surtout pas scorer une nouvelle table :] d'abord restaurer l'état précédent en cliquant sur le bouton "Restaurer"
 			sur l'écran de classement ; alternativement, on peut cliquer sur le lien présent dans l'avertissement lorsqu'on reclique sur la table en question.
 			Ensuite, rentrer les scores corrigés.
 
 		h2 Chronomètre
 
-		img(src="doc/screen_timer.png")
-
-		p.
+		p.small-spacing.
 			Ce chronomètre basique est conçu pour s'afficher centré en mode plein écran : il faut donc commencer par appuyer sur F11
 			(la touche peut varier suivant le navigateur...). Ensuite :
 
@@ -65,8 +67,6 @@ html
 
 		h2 Classement
 
-		img(src="doc/screen_ranking.png")
-
 		p.
 			Les scores sont ordonnés par points de table décroissants d'abord, puis en cas d'ex-aequos par mini-points décroissants.
 
-- 
2.44.0