diff --git a/Documentation/README.md b/Documentation/README.md
index 7ae1d449a647daa477a491ddc05925f27dec17d3..745cd4690fcbbb9b64b4a6ffe0fc130c3836aa0e 100644
--- a/Documentation/README.md
+++ b/Documentation/README.md
@@ -1,8 +1,6 @@
-# projet_isc_l431 - documentation
+# Documentation Quizz Game
-Ce repo git contient la documentation pour le projet réalisé dans le cadre du cours d'ateliers logiciels.
-
-Ce repo contient également un fichier de configuration [MkDocs](https://www.mkdocs.org) permettant de facilement visualiser la documentation (en local).
+La documentation est effectué avec [MkDocs](https://www.mkdocs.org) permettant de facilement visualiser la documentation (en local).
## Installation du repo
diff --git a/Documentation/docs/api/get_admin_info.md b/Documentation/docs/api/get_admin_info.md
index f7a7d6e1b3395e542b59ec3148b0d183b987d132..016f60b8ac1bc8378ecc3babe6e3fdce9e4c6549 100644
--- a/Documentation/docs/api/get_admin_info.md
+++ b/Documentation/docs/api/get_admin_info.md
@@ -11,7 +11,7 @@ Permet de récupérer les informations d'un administrateur qui est actuellement
| Méthode d'authentification supporté par ce endpoint | [OAuth 2.0 Bearer Token](https://oauth.net/2/bearer-tokens/) |
| --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `token` <span class="bg-blue-200">REQUIRED</span> | Générer par le serveur lors de l'authentification, protéger par une clé qui est présente du côté du serveur. Ce token est envoyé par le client dans son header (Authorization: Bearer `token`) |
+| `token` <br><span class="bg-blue-200">REQUIRED</span> | Générer par le serveur lors de l'authentification, protéger par une clé qui est présente du côté du serveur. Ce token est envoyé par le client dans son header (Authorization: Bearer `token`) |
@@ -19,7 +19,7 @@ Permet de récupérer les informations d'un administrateur qui est actuellement
| Nom | Type | Description |
| ---------------------------------------------------- | ------ | ------------------------------------------------------------------------------------------ |
-| `username` <span class="bg-blue-200">REQUIRED</span> | string | Nom d'utilisateur qui est vérifié par le serveur, si elle n'existe pas une erreur survient |
+| `username` <br><span class="bg-blue-200">REQUIRED</span> | string | Nom d'utilisateur qui est vérifié par le serveur, si elle n'existe pas une erreur survient |
## Exemple d'utilisation
diff --git a/Documentation/docs/api/get_user_info.md b/Documentation/docs/api/get_user_info.md
index 8447ba100f609911daeed8333eb519e6cf04a37f..ec5def42ef60e25e6fb7250e279a0df75ecd0e99 100644
--- a/Documentation/docs/api/get_user_info.md
+++ b/Documentation/docs/api/get_user_info.md
@@ -11,7 +11,7 @@ Permet de récupérer les informations d'un utilisateur qui est actuellement aut
| Méthode d'authentification supporté par ce endpoint | [OAuth 2.0 Bearer Token](https://oauth.net/2/bearer-tokens/) |
| --------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `token` <span class="bg-blue-200">REQUIRED</span> | Générer par le serveur lors de l'authentification, protéger par une clé qui est présente du côté du serveur. Ce token est envoyé par le client dans son header (Authorization: Bearer `token`) |
+| `token` <br><span class="bg-blue-200">REQUIRED</span> | Générer par le serveur lors de l'authentification, protéger par une clé qui est présente du côté du serveur. Ce token est envoyé par le client dans son header (Authorization: Bearer `token`) |
@@ -19,7 +19,7 @@ Permet de récupérer les informations d'un utilisateur qui est actuellement aut
| Nom | Type | Description |
| ---------------------------------------------------- | ------ | ------------------------------------------------------------------------------------------ |
-| `username` <span class="bg-blue-200">REQUIRED</span> | string | Nom d'utilisateur qui est vérifié par le serveur, si elle n'existe pas une erreur survient |
+| `username` <br><span class="bg-blue-200">REQUIRED</span> | string | Nom d'utilisateur qui est vérifié par le serveur, si elle n'existe pas une erreur survient |
## Exemple d'utilisation
diff --git a/Documentation/docs/api/index.md b/Documentation/docs/api/index.md
deleted file mode 100644
index 89e60e937cffdd5f11ba721fc8fd2243fa057517..0000000000000000000000000000000000000000
--- a/Documentation/docs/api/index.md
+++ /dev/null
@@ -1 +0,0 @@
-# Explication de l'API
\ No newline at end of file
diff --git a/Documentation/docs/api/user_create.md b/Documentation/docs/api/user_create.md
index efee8fbde983c6b5ee7df7e1c024652525800300..51cec0057acd79843afb383262d2e2649e073a62 100644
--- a/Documentation/docs/api/user_create.md
+++ b/Documentation/docs/api/user_create.md
@@ -10,12 +10,12 @@ Permet de créer un compte utilisateur ou administrateur, avec une vérification
| Nom | Type | Description |
| ------------------------------------------------------- | ------ | ------------------------------------------------------------ |
-| `username` <span class="bg-blue-200">REQUIRED</span> | string | Nom d'utilisateur unique pour le compte |
-| `password` <span class="bg-blue-200">REQUIRED</span> | string | Mot de passe du compte |
-| `firstname` <span class="bg-blue-200">REQUIRED</span> | string | Prénom de l'utilisateur |
-| `lastname` <span class="bg-blue-200">REQUIRED</span> | string | Nom de famille de l'utilisateur |
-| `email` <span class="bg-blue-200">REQUIRED</span> | string | Adresse e-mail de l'utilisateur |
-| `accountType` <span class="bg-blue-200">REQUIRED</span> | string | Type de compte (utilisateur(**0**) ou administrateur(**1**)) |
+| `username` <br><span class="bg-blue-200">REQUIRED</span> | string | Nom d'utilisateur unique pour le compte |
+| `password` <br><span class="bg-blue-200">REQUIRED</span> | string | Mot de passe du compte |
+| `firstname` <br><span class="bg-blue-200">REQUIRED</span> | string | Prénom de l'utilisateur |
+| `lastname` <br><span class="bg-blue-200">REQUIRED</span> | string | Nom de famille de l'utilisateur |
+| `email` <br><span class="bg-blue-200">REQUIRED</span> | string | Adresse e-mail de l'utilisateur |
+| `accountType` <br><span class="bg-blue-200">REQUIRED</span> | string | Type de compte (utilisateur(**0**) ou administrateur(**1**)) |
!!! warning "Attention"
diff --git a/Documentation/docs/explication/backend.md b/Documentation/docs/explication/backend.md
new file mode 100644
index 0000000000000000000000000000000000000000..ef87d14925383765f5964ca59f5a5c5f27ae9da1
--- /dev/null
+++ b/Documentation/docs/explication/backend.md
@@ -0,0 +1,56 @@
+# Backend
+
+Le backend de l'application est responsable de la gestion des connexions Socket.IO, de la communication en temps réel entre les joueurs, de la logique du jeu et de l'accès à la base de données. Dans ce rapport, nous allons expliquer les principales fonctionnalités, la logique du code et la configuration de la base de données.
+
+## Structure du code
+Le code du backend est organisé en plusieurs fichiers :
+
+- `ServerIO.ts` : Ce fichier contient la classe ServerIO qui étend la classe IO.Server de `Socket.IO`. Il gère les connexions et les événements liés aux sockets.
+
+- `UserInfo.ts` : Ce fichier définit la classe UserInfo, qui représente les informations d'un joueur.
+
+- `Database.ts` : Ce fichier gère l'accès à la base de données. Il utilise les technologies suivantes :
+
+ - *Sequelize* : un ORM (Object-Relational Mapping) pour interagir avec la base de données relationnelle.
+ - *SQLite* : un système de gestion de base de données relationnelle.
+
+
+## Configuration de la base de données
+
+La base de données est créée à l'aide de MySQL, un système de gestion de base de données relationnelle. Le backend utilise Sequelize comme ORM pour interagir avec la base de données.
+
+La configuration de la base de données est effectuée dans le fichier `Database.ts`. La classe Database contient des méthodes pour se connecter à la base de données, définir les modèles et effectuer des requêtes.
+
+Les modèles Sequelize sont utilisés pour représenter les tables de la base de données. Dans le contexte du jeu de quiz, il existe un modèle Question qui représente les questions du jeu. Ce modèle est utilisé pour effectuer des opérations de lecture (récupérer les questions aléatoirement) à partir de la base de données.
+
+## Classe `ServerIO`
+La classe `ServerIO` est responsable de la gestion des connexions Socket.IO, de la logique du jeu et de la communication entre les joueurs. Voici une description des principales fonctionnalités de cette classe :
+
+## Initialisation du jeu
+Lorsqu'un joueur se connecte, la méthode `initializeGame` est appelée pour initialiser les informations du joueur et vérifier s'il existe déjà dans le dictionnaire des joueurs connectés. Si le joueur est nouveau, il est ajouté au dictionnaire `players`. De plus, les propriétés `playersReady` et `playersScore` sont initialisées pour ce joueur.
+
+## Événements Socket.IO
+La classe ServerIO enregistre les événements Socket.IO sur chaque socket connecté. Voici les principaux événements enregistrés :
+
+- L'événement **"player-ready"** est déclenché lorsque le joueur est prêt à jouer. Le dictionnaire `playersReady` est mis à jour pour ce joueur, et si tous les joueurs sont prêts, l'événement **"game-ready-start"** est émis.
+
+- L'événement **"player-not-ready"** est déclenché lorsque le joueur n'est plus prêt à jouer. Le dictionnaire `playersReady` est mis à jour, et si tous les joueurs ne sont plus prêts, l'événement **"not-ready-player"** est émis.
+
+- L'événement **"on-game"** est déclenché lorsque les trois joueurs sont prêts. Une question est sélectionnée aléatoirement à l'aide de la méthode `getRandomQuestion`, puis l'événement **"question"** est émis pour envoyer la question aux joueurs.
+
+- L'événement **"validate-question"** est déclenché lorsque les joueurs répondent à une question. La réponse sélectionnée est comparée à la réponse correcte de la question en cours. Les scores des joueurs sont mis à jour en fonction de la réponse, et une nouvelle question est envoyée si le nombre de questions n'a pas atteint la limite de 10.
+
+- L'événement **"restart-game"** est déclenché lorsque les joueurs veulent redémarrer le jeu. Si le nombre de joueurs est toujours de trois, les dictionnaires `players`, `playersScore` et `playersReady` sont réinitialisés, et le jeu est initialisé à nouveau pour chaque joueur.
+
+- L'événement **"disconnect"** est déclenché lorsqu'un joueur se déconnecte. Les informations du joueur sont supprimées des dictionnaires `players`, `playersReady` et `playersScore`.
+
+## Communication entre joueurs
+La classe `ServerIO` utilise des événements Socket.IO pour permettre la communication entre les joueurs. Les événements **"players"** et **"players-left"** sont émis pour informer les joueurs connectés et les joueurs restants respectivement. L'événement **"start-game"** est émis lorsque trois joueurs sont connectés pour démarrer le jeu.
+
+## Accès à la base de données
+La classe ServerIO utilise la méthode `getRandomQuestion` pour récupérer une question aléatoire à partir de la base de données. Cette méthode utilise le modèle Question défini dans le fichier Database.ts pour effectuer une requête de sélection aléatoire.
+
+## Conclusion
+Le backend de l'application gère les connexions Socket.IO, la logique du jeu et l'accès à la base de données MySQL. Il utilise la classe ServerIO pour gérer les connexions, enregistrer les événements et gérer l'état du jeu. L'ORM Sequelize facilite l'accès à la base de données et permet d'effectuer des opérations CRUD (Create, Read, Update, Delete) sur les tables.
+
+L'utilisation de Socket.IO permet une communication en temps réel entre les joueurs, ce qui crée une expérience de jeu interactive. La base de données est utilisée pour stocker les questions du jeu, et le backend utilise Sequelize pour interagir avec la base de données de manière efficace.
diff --git a/Documentation/docs/explication/frontend.md b/Documentation/docs/explication/frontend.md
new file mode 100644
index 0000000000000000000000000000000000000000..f683381f23dec5d662393173c3a8b28bce51931e
--- /dev/null
+++ b/Documentation/docs/explication/frontend.md
@@ -0,0 +1,179 @@
+# Frontend
+
+## Introduction
+
+Pour la réalisation du frontend, on a utiliser Angular et *Tailwind CSS*. On a fait ce choix car *Tailwind CSS* permet d'utiliser de classes utilitaires pour styliser les éléments HTML spécifique, ce qui nous permet de construire notre interface en combinant ces classes.
+
+
+## Organisation du code
+### Structure du projet Angular
+
+Le projet a été structuré de manière à pouvoir se retrouver facilement dans le code, en séparant le projets en diverses composants:
+
+
+```markdown
+- app
+ - login
+ - error-login
+ - sign-in
+ - sign-up
+ - login.service.ts
+ - session.service.ts
+ - token-interceptor.service.ts
+ - manage
+ - users:
+ - list-users
+ - create-user
+ - edit-user
+ - questions:
+ - list-questions
+ - create-question
+ - edit-question
+ - component:
+ - alert-add
+ - delete-item
+ - loading
+ - account-details
+ - manage.service.ts
+ - homepage
+ - waiting-players
+ - quizz-play
+ - quizz.service.ts
+- app.component.ts
+- app.component.html
+- app.module.ts
+- app-routing.module.ts
+
+```
+
+
+
+
+### Routes du projet
+
+Voici les différentes routes présentes sur notre application:
+```typescript
+const routes: Routes = [
+ { path: '', redirectTo: 'login', pathMatch: 'full' },
+ {
+ path: 'login',
+ component: LoginComponent,
+ children: [
+ {
+ path: '',
+ redirectTo: '/login/sign-in',
+ pathMatch: 'full'
+ },
+ {
+ path: 'sign-in',
+ component: SignInComponent
+ },
+ {
+ path: 'sign-up',
+ component: SignUpComponent
+ }
+ ]
+ },
+ { path: ':admin/manage',
+ component: ManageComponent,
+ children: [
+ {
+ path: '',
+ redirectTo: 'list-users',
+ pathMatch: 'full'
+ },
+ {
+ path: 'list-users',
+ component: ListUsersComponent
+ },
+ {
+ path: 'list-questions',
+ component: ListQuestionsComponent
+ },
+ {
+ path: 'account-details',
+ component: AccountDetailsComponent
+ }
+ ]
+ },
+ { path: ':username/play',
+ component: HomepageComponent,
+ children: [
+ {
+ path: '',
+ redirectTo: 'waiting-players',
+ pathMatch: 'full'
+ },
+ {
+ path: 'waiting-players',
+ component: WaitingPlayersComponent
+ },
+ {
+ path: 'quizz-play',
+ component: QuizzPlayComponent
+ }
+ ]
+ }
+
+
+];
+```
+
+
+## Implémentation du login
+Dans cette partie, nous avons implémenté le composant de login ainsi que la gestion des erreurs de login et le stockage des informations de session utilisateur côté frontend.
+
+### Création du composant de login
+Le composant de login est implémenté dans le fichier `sign-in.component.html et sign-in.component.ts`. Il contient un formulaire de login avec des champs pour le nom d'utilisateur, le mot de passe et une case à cocher pour se souvenir de l'utilisateur. Lorsque le formulaire est soumis, la méthode `submitForm()` est appelée pour valider les identifiants et effectuer l'authentification. Si l'invité n'a pas de compte, il peut en créer un grâce au composant `sign-up`.
+
+### Validation des identifiants et authentification côté frontend
+La méthode `submitForm()` dans le fichier `sign-in.component.ts` est responsable de la validation des identifiants et de l'authentification côté frontend. Elle envoie une requête HTTP POST au serveur avec les informations de login saisies par l'utilisateur. Si les identifiants sont valides, l'utilisateur est redirigé vers la page appropriée en fonction de son rôle (utilisateur ou administrateur).
+
+### Gestion des erreurs de login
+Le composant `errorlogin` est utilisé pour afficher les messages d'erreur de login. Le composant reçoit les informations d'erreur depuis le service `loginService` et affiche le message correspondant en fonction du type d'erreur. Par exemple, si l'erreur est liée à un mot de passe incorrect, le message "Le mot de passe que vous avez saisi est incorrect, veuillez réessayer" est affiché.
+
+### Stockage des informations de session utilisateur
+Après une authentification réussie, les informations de session utilisateur sont stockées dans le service ``sessionSevice`. Les informations comprennent le nom d'utilisateur, le prénom, le nom et le jeton d'authentification. Ces informations peuvent être utilisées ultérieurement dans d'autres parties de l'application pour personnaliser l'expérience utilisateur.
+
+Ces fonctionnalités permettent aux utilisateurs de se connecter à l'application en fournissant leurs identifiants, de gérer les erreurs de login et de stocker les informations de session pour une utilisation ultérieure.
+
+
+
+
+
+
+
+## Page de gestion par l'administrateur
+L'objectif de la page de gestion par l'administrateur est de permettre à un administrateur du système d'interagir avec les données du système, notamment les questions et les utilisateurs. Cette page offre des fonctionnalités de création, de mise à jour, de suppression et d'affichage des informations.
+
+### Création du composant de gestion
+Dans le développement de la page de gestion, un composant spécifique(`manage`) a été créé pour gérer les opérations liées aux questions et aux utilisateurs. Ce composant permet à l'administrateur d'accéder aux fonctionnalités de manipulation des données et facilite l'interaction avec l'API REST. Ce composant va également integrer deux composants(`list-questions` et `list-users`), qui vont permettre chacun de gérer pour l'un les questions et pour l'autre les utilisateurs.
+
+### Récupération des données côté frontend à partir de l'API REST
+Pour afficher les informations sur la page de gestion, les données sont récupérées depuis l'API REST. L'application frontend envoie des requêtes à l'API pour obtenir les questions et les utilisateurs enregistrés dans le système. Ces données sont ensuite affichées dans une interface d'administration conviviale.
+
+### Affichage des questions et des utilisateurs dans une interface d'administration
+Une fois les données récupérées, elles sont affichées dans une interface d'administration conviviale. Les questions et les utilisateurs sont présentés de manière structurée, facilitant ainsi la lecture et la gestion des informations par l'administrateur. Cela permet à l'administrateur de visualiser rapidement les questions et les utilisateurs enregistrés dans le système.
+
+### Mise à jour et suppression des questions et des utilisateurs
+En plus de l'affichage des questions et des utilisateurs, l'interface d'administration offre également des fonctionnalités de mise à jour et de suppression. L'administrateur peut modifier les détails d'une question ou d'un utilisateur existant, et il peut également supprimer des questions ou des utilisateurs du système. Ces actions sont réalisées en interagissant avec l'API REST, qui se charge de mettre à jour les données côté serveur.
+
+Ces éléments constituent les principales fonctionnalités de la page de gestion par l'administrateur. Ils permettent à l'administrateur d'interagir avec les données du système de manière pratique et efficace, en offrant des fonctionnalités de création, de mise à jour, de suppression et d'affichage des questions et des utilisateurs.
+
+
+## Implémentation des sockets pour le jeu de quiz
+Dans le fichier `quizz-play.component.ts`, nous avons implémenté les fonctionnalités liées aux sockets pour le jeu de quiz.
+
+### Installation et configuration du module Socket.io dans le projet Angular
+Nous avons utilisé le module Socket.io pour la communication en temps réel entre les joueurs et le serveur. Le module a été installé à l'aide de npm et configuré dans le projet Angular.
+
+### Gestion des connexions et des déconnexions des joueurs
+Nous avons géré les connexions et les déconnexions des joueurs à l'aide des événements émis par le serveur. Lorsqu'un joueur se connecte, nous émettons l'événement "**player-ready**" au serveur pour indiquer que le joueur est prêt à jouer. Lorsqu'un joueur se déconnecte, nous émettons l'événement "**player-not-ready**" au serveur pour indiquer que le joueur n'est plus prêt.
+
+### Échange de messages en temps réel entre les joueurs et le serveur
+Nous avons utilisé les sockets pour échanger des messages en temps réel entre les joueurs et le serveur. Par exemple, lorsque le joueur sélectionne une réponse à une question, nous émettons l'événement "**validate-question**" au serveur avec l'index de la réponse sélectionnée. Le serveur traite ensuite la réponse et met à jour les scores des joueurs.
+
+### Actualisation en direct des classements et des scores des joueurs
+Nous avons utilisé les sockets pour actualiser en direct les classements et les scores des joueurs. Lorsqu'un joueur valide sa réponse, le serveur met à jour les scores et envoie les nouvelles données aux joueurs connectés. Dans le fichier `quizz-play.component.html`, nous utilisons des directives \*ngIf et \*ngFor pour afficher en temps réel les classements et les scores des joueurs.
+
+
diff --git a/Documentation/docs/frontend/angular.md b/Documentation/docs/frontend/angular.md
deleted file mode 100644
index 42970c4225297211a6fc50a4d37d9575c093e4e9..0000000000000000000000000000000000000000
--- a/Documentation/docs/frontend/angular.md
+++ /dev/null
@@ -1 +0,0 @@
-# Angular
\ No newline at end of file
diff --git a/Documentation/docs/frontend/babylonjs.md b/Documentation/docs/frontend/babylonjs.md
deleted file mode 100644
index 35df3f0f5985256083085009ee2d5fa1ef67b49d..0000000000000000000000000000000000000000
--- a/Documentation/docs/frontend/babylonjs.md
+++ /dev/null
@@ -1,2 +0,0 @@
-# Babylon JS
-
diff --git a/Documentation/docs/frontend/firebase.md b/Documentation/docs/frontend/firebase.md
deleted file mode 100644
index c5f58944c42d7ee8c76f2d1b437e8da11b563832..0000000000000000000000000000000000000000
--- a/Documentation/docs/frontend/firebase.md
+++ /dev/null
@@ -1,26 +0,0 @@
-# Firebase
-
-
-## Envoi des données à Firebase
-Toutes les méthodes utiles pour envoyer et recevoir des données à Firebase sont dans le fichier *meshprocess/src/app/project.service.ts*. Les méthodes qu'on a dans ce fichier nous est utiles a chaque fois qu'on souhaite actualiser la base de données ou bien envoyer un fichier pour le bon fonctionnement de nos pages ionic.
-Sachant que nos images ou les informations à propos de chaque projet et process doivent être stocké pour un meilleur rendu.
-
-## Représentation de chaque projet
-Notre base de données Firebase est représenté comme suit:
-
-
-On peut voir ici que la structure dans la base de données est la même que dans notre code. À chaque ajout de projet un id unique est créer dans la base données avec les attributs du projet. Dans notre exemple ci-dessus, ce sera le projet qui contiendra tous les process qui ne vont pas être associé à des projets en particulier. Ce "projet"(qui n'est pas vraiment un au final), ne va pas être afficher sur notre page car ce n'est pas un projet en soit.
-
-À chaque ajout de process dans un projet, il y aura également un id unique par process.
-
-## Stockage des données **obj** de notre process
-
-Les données **obj** vont être stockées dans l'attribut *dataObj* de chaque process. On aura tout le contenu du fichier *.obj* qui va être récupérer à partir de notre backend Django.
-
-## Stockage des images
-
-Dans notre application web, on va devoir stocké une image pour chaque projet et chaque process. Grâce à Firebase on peut les stockés et pouvoir les récupérer facilement avec des lien qui seront stockés dans les attributs des projets et process dans la base de données.
-
-
-
-Les images de chaque projet sont stockés dans le dossier *Images*. Et les images de tous les process de chaque projet sont stockés dans les dossier nommé à partir de leur id.
diff --git a/Documentation/docs/frontend/functionning.md b/Documentation/docs/frontend/functionning.md
deleted file mode 100644
index 4a9adfb9e9a760b5bb75d7009f2b740443946843..0000000000000000000000000000000000000000
--- a/Documentation/docs/frontend/functionning.md
+++ /dev/null
@@ -1,53 +0,0 @@
-# Fonctionnement
-
-## Structure du frontend
-
-Lorsqu'on accède à l'application, on va tomber sur la page suivante(/home-project):
-
-
-On aura la possibilité d'ajouter différents projets, les supprimer ou bien modifier les process associé au projet. On aura également le bouton en haut à gauche *PROCESS* qui permettra d'importer des process sans créer un projet. Cet page est modifiable dans les fichiers du projet ionic, dans le répertoire *meshprocess/src/app/home-project*.
-Chaque page ionic est structuré de cette façon:
-
-
-### Modification du comportement de la page
-Comme pour une page html normal, on peut modifier le design de la page dans le **html** et le **scss**. La logique de notre page, se situe dans le fichier typescript qui dans l'exemple ici: *home-project-page.ts*
-
-
-### Structure d'un projet
-Dans ce même dossier ici dans notre page contenant les projets, on a également le fichier *project-model.ts*, qui va contenir ici la classe pour représenter la structure qu'un projet peut avoir:
-
- Cela nous est utile pour pouvoir accéder aux attributs d'un projet plus facilement.
-
-### Structure d'un process
-La structure d'un process est lui également situé dans un fichier en particulier *meshprocess/src/app/dashboard/process-model.ts*:
-
-
-
-
-## Visualisation des process
-
-### Structure de la page
-La page pour visualiser les process de chaque projet est représenter comme ci-dessous:
-
-
-Sur cet page on pourra comme pour les projets ajouter un nouveaux process.
-
-### Ajout d'un process
-
-La particularité est qu'on devra communiquer avec notre backend Django pour pouvoir faire la conversion d'un fichier step à importer. Dans notre cas le fichier step sera converti et le backend nous enverra un *json* contenant le contenu du fichier *obj*. Le contenu de ce *json* va être stocké dans l'attribut *dataObj* de chaque process et permettra de l'afficher dans babylonjs
-
-### Affichage d'un objet 3d
-
-Pour afficher le process on utilise la librairie *babylonjs*. *babylonjs* nous permet directement de générer l'aperçu 3d d'une pièce directement à partir du contenu du fichier *obj*. Et puisque dans notre cas, on a directement les données *obj*. On pourra a chaque fois qu'on voudra afficher une pièce en particulier, le générer rapidement.
-
-### Image de chaque process
-
-À chaque ajout d'un nouveau process, la pièce est directement visualisable sur le côté droit de la page. Grâce à la librairie *babylonjs*, on récupère directement une image de la pièce lors de sa génération, et c'est cette image la qui sera stocké dans notre *Firebase*.
-
-### Rendu de la visualisation d'une pièce
-
-Lors qu'on voudra visualiser une pièce, plusieurs informations seront disponibles pour voir les différentes particularités de la pièce:
-
-
-
-Ici on a utiliser les GUI de babylonjs pour pouvoir visualiser la pièce de manière optimale pour l'utilisateur.
diff --git a/Documentation/docs/frontend/img/dashboard-page.png b/Documentation/docs/frontend/img/dashboard-page.png
deleted file mode 100644
index 40d3d74574eb67959c0fa80d0e412010ab18d8a0..0000000000000000000000000000000000000000
Binary files a/Documentation/docs/frontend/img/dashboard-page.png and /dev/null differ
diff --git a/Documentation/docs/frontend/img/home-project-page.png b/Documentation/docs/frontend/img/home-project-page.png
deleted file mode 100644
index a0f65c4018aae4b2118674a4120e60e3d39dca6c..0000000000000000000000000000000000000000
Binary files a/Documentation/docs/frontend/img/home-project-page.png and /dev/null differ
diff --git a/Documentation/docs/frontend/img/img-storage.png b/Documentation/docs/frontend/img/img-storage.png
deleted file mode 100644
index 5e77d0c35e627bc8c87add157c0b2e8ca069bb72..0000000000000000000000000000000000000000
Binary files a/Documentation/docs/frontend/img/img-storage.png and /dev/null differ
diff --git a/Documentation/docs/frontend/img/page-structure.png b/Documentation/docs/frontend/img/page-structure.png
deleted file mode 100644
index 7a887db4be48d035f298a41c3f084d81034047b8..0000000000000000000000000000000000000000
Binary files a/Documentation/docs/frontend/img/page-structure.png and /dev/null differ
diff --git a/Documentation/docs/frontend/img/process-structure.png b/Documentation/docs/frontend/img/process-structure.png
deleted file mode 100644
index f567f7d77024eafb36e0f274aa4874fe56d1e840..0000000000000000000000000000000000000000
Binary files a/Documentation/docs/frontend/img/process-structure.png and /dev/null differ
diff --git a/Documentation/docs/frontend/img/projet-structure.png b/Documentation/docs/frontend/img/projet-structure.png
deleted file mode 100644
index 8729c9edf5590b8f0209596dfa06c1b32b1f5fc9..0000000000000000000000000000000000000000
Binary files a/Documentation/docs/frontend/img/projet-structure.png and /dev/null differ
diff --git a/Documentation/docs/frontend/img/structure-database.png b/Documentation/docs/frontend/img/structure-database.png
deleted file mode 100644
index 59a971fae33088e0140122553ed3b7cb5d0cc1db..0000000000000000000000000000000000000000
Binary files a/Documentation/docs/frontend/img/structure-database.png and /dev/null differ
diff --git a/Documentation/docs/frontend/img/visu-babylon.png b/Documentation/docs/frontend/img/visu-babylon.png
deleted file mode 100644
index 36e523744630fa78943b34670088668cc32fbde7..0000000000000000000000000000000000000000
Binary files a/Documentation/docs/frontend/img/visu-babylon.png and /dev/null differ
diff --git a/Documentation/docs/frontend/index.md b/Documentation/docs/frontend/index.md
deleted file mode 100644
index 23c5c0a0d9a2fc698ae38d420b0d24b0de09a592..0000000000000000000000000000000000000000
--- a/Documentation/docs/frontend/index.md
+++ /dev/null
@@ -1,12 +0,0 @@
-# Frontend
-
-Cette page contient la documentation concernant la partie frontend du projet.
-
-Le framework [Ionic](https://ionicframework.com/), avec [Angular](https://angular.io/) et
-[Tailwind CSS](https://tailwindcss.com/) est utilisé pour le frontend du projet.
-
-
-## Installation
-
-La marche à suivre pour l'installation et la mise en place du projet est disponible sur le
-[gitlab](https://gitedu.hesge.ch/in-code-we-trust/frontend/-/blob/main/README.md#installation).
diff --git a/Documentation/docs/frontend/ionic.md b/Documentation/docs/frontend/ionic.md
deleted file mode 100644
index 773c40a36d9d631462e8d298bd11afa95ef9a69f..0000000000000000000000000000000000000000
--- a/Documentation/docs/frontend/ionic.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Ionic
-
-## Création d'un nouvel élément ionic
-
-Dans *ionic* on peut créer un nouvel élement facilement(page, service, component, etc...). Il suffit d'exécuter la commande suivante:
-```bash
-ionic generate
-```
-
-Puis il faut juste choisir l'élément à génerer dans le projet ionic et les fichiers nécessaires seront créé automatiquement en conséquence.
diff --git a/Documentation/docs/frontend/tailwindcss.md b/Documentation/docs/frontend/tailwindcss.md
deleted file mode 100644
index acac9ef88333312d0907a1fe0062f773ea8ecf2b..0000000000000000000000000000000000000000
--- a/Documentation/docs/frontend/tailwindcss.md
+++ /dev/null
@@ -1 +0,0 @@
-# Tailwind CSS
\ No newline at end of file
diff --git a/Documentation/docs/index.md b/Documentation/docs/index.md
index 1aa8fb2934ade6eb8190d0c8905795efa8990922..bef34c8c92814d3a0a39df7c8b3dbc976d1f04b4 100644
--- a/Documentation/docs/index.md
+++ b/Documentation/docs/index.md
@@ -3,33 +3,39 @@ hide:
- navigation
---
+# Presentation de l'API
-# Introduction
+## Introduction
-Dans ce projet, on a conçu et implémenter une application de jeu de quiz en utilisant une architecture RESTful et des sockets. L'application permet à différents utilisateurs de se connecter, de jouer et de gérer les questions et les utilisateurs.
+Bienvenue dans la documentation de l'API du jeu de quizz ! Cette API a été spécialement conçue pour gérer la gestion des joueurs, des questions et pour permettre de jouer à un jeu de quizz interactif. Elle a été développée en utilisant TypeScript avec Node.js et Express.
+## Explication de l'API
+
+Cette documentation détaillée vous accompagnera à travers les différentes fonctionnalités de l'API, en expliquant les ressources disponibles et les actions spécifiques accordées à chaque type d'utilisateur. Avant de plonger dans les fonctionnalités, il est essentiel de comprendre les principaux concepts de l'API.
-# Ressources
-
-L'application comprend trois types d'utilisateurs : les invités, les joueurs et les administrateurs. Chaque utilisateur est identifié par un nom d'utilisateur unique et un mot de passe. Les questions du quiz sont également des ressources importantes de l'application, comprenant la question elle-même, les réponses proposées et la catégorie associée.
+
+L'API met à votre disposition trois types d'utilisateurs distincts : les Invités, les Joueurs et les Administrateurs. Chaque type d'utilisateur a des privilèges et des capacités spécifiques qui lui sont attribués. Les utilisateurs ont la possibilité de créer un compte, de se connecter et d'interagir avec les questions du quizz pour des expériences de jeu captivantes.
+## Ressources
+Les ressources clés de cette API sont les Utilisateurs et les Questions. Les Utilisateurs sont caractérisés par un nom d'utilisateur unique, un mot de passe et un type d'utilisateur déterminant leurs permissions. Les Questions comprennent le texte de la question, une liste de réponses proposées, une réponse correcte et une catégorie associée.
-# Actions possibles en fonction du type d'utilisateur
-Les invités peuvent créer un compte, qui sera automatiquement un compte de type joueur. Ils pourront également se connécter à leur compte respectif. Les administrateurs, quant à eux, ont des privilèges plus étendus. Ils peuvent lister, créer, mettre à jour et supprimer des questions et des utilisateurs.
+## Actions possibles
+Selon le type d'utilisateur, différentes actions sont rendues disponibles. Les Invités peuvent créer un compte, qui sera automatiquement configuré en tant que compte de type Joueur. Les Joueurs ont la possibilité de participer au jeu de quizz (voir partie 3). Quant aux Administrateurs, ils bénéficient de privilèges supplémentaires, tels que la gestion des questions en les listant, les créant, les mettant à jour ou les supprimant. Ils peuvent également effectuer des opérations similaires sur les utilisateurs.
+
+Référez-vous à la documentation détaillée pour obtenir des informations précises sur chaque route ainsi que des exemples d'utilisation.
-# Déroulement d'une partie
+## Déroulement d'une partie
La partie commence lorsque trois joueurs sont connectés via socket.io avec un token JWT valide. À chaque partie, une question est tirée au hasard et présentée simultanément aux trois joueurs. Chaque joueur doit choisir parmi les réponses proposées. Une fois qu'un joueur a répondu, le serveur vérifie la réponse et attribue des points en fonction de la réponse donnée.
Après chaque question, le serveur passe à la question suivante jusqu'à ce que dix questions aient été posées. Une fois la partie terminée(10 questions passées), le serveur affiche un classement des joueurs en fonction de leurs points. Le serveur se réinitialise alors et revient à l'étape d'attente des joueurs pour commencer une nouvelle partie.
+## Conclusion
-# Conclusion
-
-Ce projet vous a permis de développer une application de jeu de quiz avec des fonctionnalités de connexion, de jeu et de gestion des questions et des utilisateurs. Vous avez utilisé une architecture RESTful et des sockets pour permettre une expérience de jeu en temps réel. Vous avez également implémenté différents rôles d'utilisateurs avec des privilèges spécifiques. Avec cette application, les joueurs pourront s'affronter dans des parties de quiz passionnantes et les administrateurs pourront gérer les questions et les utilisateurs de manière efficace.
\ No newline at end of file
+Ce projet nous a permis de développer une application de jeu de quiz avec des fonctionnalités de connexion, de jeu et de gestion des questions et des utilisateurs. On a utilisé une architecture RESTful et des sockets pour permettre une expérience de jeu en temps réel. On a également implémenté différents rôles d'utilisateurs avec des privilèges spécifiques. Avec cette application, les joueurs pourront s'affronter dans des parties de quiz passionnantes et les administrateurs pourront gérer les questions et les utilisateurs de manière efficace.
\ No newline at end of file
diff --git a/Documentation/docs/infos/code_internet.md b/Documentation/docs/infos/code_internet.md
new file mode 100644
index 0000000000000000000000000000000000000000..39c4c337b6b51a863787fb59e55393edb91cb189
--- /dev/null
+++ b/Documentation/docs/infos/code_internet.md
@@ -0,0 +1,5 @@
+# Tailwind CSS
+
+Pour avoir des exemples d'interfaces utilisateurs, on s'est aider de ces sites:
+1. [Flowbite](https://flowbite.com/)
+2. [Taiwind CSS](https://tailwindcss.com/)
\ No newline at end of file
diff --git a/Documentation/docs/infos/problemes.md b/Documentation/docs/infos/problemes.md
new file mode 100644
index 0000000000000000000000000000000000000000..e8aa7dc30796da7a55febad82b7edc8575289aba
--- /dev/null
+++ b/Documentation/docs/infos/problemes.md
@@ -0,0 +1,9 @@
+# Problèmes éventuels
+Lors du développement de notre application en temps réel, nous avons identifié les problèmes suivants :
+
+## Reconnexion automatique après le redémarrage du serveur
+Après s'être déconnectés du frontend et s'être désabonnés des événements du serveur, les utilisateurs peuvent se reconnecter automatiquement lorsque le serveur redémarre. Cela est dû au fait que la déconnexion côté frontend ne supprime pas directement la session du serveur, laissant les connexions précédentes actives.
+
+Pour résoudre ce problème, des mécanismes supplémentaires doivent être mis en place du côté du serveur. Cela peut impliquer l'enregistrement des informations de connexion dans une base de données ou tout autre moyen de stockage persistant, afin de gérer les reconnexions après le redémarrage du serveur de manière appropriée.
+
+De plus, l'utilisation de mécanismes avancés de session et d'authentification, tels que les tokens JWT avec des expirations courtes, peut renforcer la sécurité et empêcher les utilisateurs de se reconnecter automatiquement après le redémarrage du serveur.
\ No newline at end of file
diff --git a/Documentation/docs/procedure.md b/Documentation/docs/procedure.md
new file mode 100644
index 0000000000000000000000000000000000000000..0f260f6f53a40b84f1ff1b98ccc4808d7ef35182
--- /dev/null
+++ b/Documentation/docs/procedure.md
@@ -0,0 +1,72 @@
+---
+hide:
+ - navigation
+---
+
+## Prérequis
+Assurez-vous d'avoir les éléments suivants installés sur votre système :
+
+`Node.js` : On peut le télécharger et l'installer à partir du site officiel de Node.js : [https://nodejs.org](https://nodejs.org)
+
+## Procédure d'installation
+
+#### Installation des dépendances
+
+Pour installer les dépendances nécessaires au projet, on exécute la commande suivante(après avoir cloner le repo):
+
+```bash
+npm install
+```
+
+Cette commande est à faire que ce soit pour le frontend ou le backend.
+
+### Frontend
+
+
+#### Installation d'Angular CLI
+Angular CLI (Command Line Interface) est un outil en ligne de commande qui facilite la création et la gestion de projets Angular. Pour l'installer, ouvrez votre terminal ou votre invite de commandes et exécutez la commande suivante :
+
+```bash
+npm install -g @angular/cli
+```
+Cela téléchargera et installera Angular CLI globalement sur votre système.
+
+#### Création d'un nouveau projet Angular
+Une fois que Angular CLI est installé, on peut créer un nouveau projet Angular en exécutant la commande suivante dans votre terminal :
+
+```bash
+ng new nom-du-projet
+```
+
+
+
+
+
+## Procédure d'utilisation
+
+### Accéder au répertoire du projet
+Après la création du projet, on accède au répertoire du projet en utilisant la commande suivante :
+
+```bash
+cd nom-du-projet
+```
+
+### Frontend
+
+#### Exécution du serveur de développement
+Pour lancer le serveur de développement d'Angular, exécutez la commande suivante :
+
+```bash
+ng serve --open
+```
+Cela va compiler le projet et lancer un serveur de développement. On peut maintenant accéder à l'application en ouvrant votre navigateur et en accédant à l'URL suivante : http://localhost:4200
+
+Toute modification qu'on apportera au code sera automatiquement détectée et l'application sera rechargée en conséquence.
+
+### Backend
+
+Pour lancer le backend express, utilisez la commande suivante :
+
+```bash
+npm run start:dev
+```
\ No newline at end of file
diff --git a/Documentation/docs/repartition_travail.md b/Documentation/docs/repartition_travail.md
new file mode 100644
index 0000000000000000000000000000000000000000..a242841f8b6a319f8512288d00970fbc6a35cd5d
--- /dev/null
+++ b/Documentation/docs/repartition_travail.md
@@ -0,0 +1,28 @@
+---
+hide:
+ - navigation
+---
+
+# Répartition de travail
+Notre projet a été réalisé en équipe, avec une répartition claire des tâches entre les membres. Voici la répartition de travail effectuée :
+
+## Steven :
+
+### Mise en place des routes du backend :
+ Chargé de concevoir et d'implémenter les différentes routes de l'API utilisées par notre application. Cela inclut la gestion des requêtes HTTP pour récupérer, créer, mettre à jour et supprimer les données.
+
+### Gestion des sockets avec Express :
+Configuration initiale des sockets avec Express, permettant la communication en temps réel entre le serveur et le client.
+
+## David :
+
+### Mis en place de la base de données:
+Mis en place du système de gestion de base de données relationnelle. Utilisation de Sequelize comme ORM pour interagir avec la base de données.
+
+
+### Gestion du token entre le frontend et le backend :
+ Mis en place du système d'authentification basé sur les tokens entre le frontend et le backend. Cela comprend la génération et la vérification des tokens, ainsi que leur transmission sécurisée entre les deux parties.
+
+### Développement du frontend en Angular :
+Responsabilité de concevoir et de développer l'interface utilisateur de notre application en utilisant le framework Angular. Cela implique la création des composants, des services et des directives nécessaires pour fournir une expérience utilisateur fluide et réactive.
+
diff --git a/Documentation/docs/theory/advanced_algorithms.md b/Documentation/docs/theory/advanced_algorithms.md
deleted file mode 100644
index 3ada0cacafe659533ac190e9813a9b2bdf97259c..0000000000000000000000000000000000000000
--- a/Documentation/docs/theory/advanced_algorithms.md
+++ /dev/null
@@ -1,37 +0,0 @@
-# ISC_L411 - Algorithmes avancés
-
-## Parcours de graphes
-
-### Parcours en profondeur (Depth-First Search ou DFS)
-
-Principe :
-
-- Parcours un sommet non-visité jusqu'à un cul-de-sac
- - Chaque sommet parcouru est noté comme *visité*
-- Si bloqué, retourne en arrière jusqu'au dernier sommet avec un chemin possible
-- Se termine une fois tous les sommets visités
-
-<figure markdown>
- { width="500"}
- <figcaption>L'ordre des noeuds visités avec un parcours en profondeur</figcaption>
-</figure>
-
-### Parcours en largeur (Breadth-First Search ou BFS)
-
-Principe :
-
-- Commence à la racine et note sa profondeur à 0
-- Parcours les voisins et note leur profondeur à 1
-- Pour chaque noeuds de profondeur 1, parcours les voisins et note leur profondeur à 2
-- Se termine une fois tous les sommets parcourus.
-
-
-!!! note
- Indiquer la profondeur des noeuds permet de connaître leur distance par rapport au
- noeud racine. Ceci permet de visualiser la profondeur au sein d'un graphe.
-
-
-<figure markdown>
- { width="500"}
- <figcaption>L'ordre des noeuds visités avec un parcours en largeur</figcaption>
-</figure>
\ No newline at end of file
diff --git a/Documentation/docs/theory/algorithmic_geometry.md b/Documentation/docs/theory/algorithmic_geometry.md
deleted file mode 100644
index e78b0404c436144642ea8e3f6c68ee57e7c03f46..0000000000000000000000000000000000000000
--- a/Documentation/docs/theory/algorithmic_geometry.md
+++ /dev/null
@@ -1,90 +0,0 @@
-# ISC_L412 - Géométrie algorithmique
-
-!!! warning "Attention"
- Les informations se trouvant sur cette page sont incomplètes, peuvent contenir des erreurs et/ou nécessitent une
- meilleure mise en page.
-
-## Les normales
-
-## Vecteurs
-
-## Modèle de données de stockage des maillages
-
-### Tableaux de sommets
-
-Il est possible de représenter des maillages à l'aide d'un tableaux de sommets :
-
-<figure markdown>
- 
- <figcaption>Tableaux de sommets</figcaption>
-</figure>
-
-### Half-Edge
-
-Une autre représentation possible est via la structure de données *Half-Edge*.
-
-Cette structure est composé de 3 éléments principaux :
-
-- **Sommet** (vertex) : représente un point
-- **Face** : une surface fermée dans le maillage
-- **Demi-arête** (half-edge)
- - Correspond à un bord orienté du maillage
- - Est associé à un sommet initial, une face qui la contient et une demi-arête opposée
-
-<figure markdown>
- { width="600" }
- <figcaption>Diagramme d'un mesh</figcaption>
-</figure>
-
-<figure markdown>
- 
- <figcaption>Représentation half-edge</figcaption>
-</figure>
-
-Cette représentation offre une grande libertée de traitements possibles sur des maillages.
-
-## Éclairage Phong
-
-Le modèle d'illumination de Phong permet de calculer de manière crédible la lumière réfléchie par un point étudié.
-
-<figure markdown>
- 
- <figcaption>Visualisation de l'équation Phong</figcaption>
-</figure>
-
-Ce modèle est séparé en 3 composantes :
-
-- lumière **ambiante**
-- lumière **diffuse**
-- lumière **spéculaire**
-
-### Lumière ambiante
-
-Lorsqu’un point n’est pas directement éclairé par une source, il apparaitra complètement noir.
-
-La lumière ambiante est supposée égale en tout point de l'espace
-
-### Lumière diffuse
-
-Représente l'intensité qui repart en tenant compte de l'inclinaison avec laquelle la lumière incidente arrive sur la
-surface, mais en supposant que l'intensité est la même quelle que soit la direction que prend le rayon réfléchi.
-
-Ainsi, les surfaces rugueuse créées des ombres douces.
-
-
-### Lumière spéculaire
-
-La spécularité traduit l’aspect « brillant » de l’objet.
-
-La réflexion spéculaire provient de la réflexion des rayons lumineux sur l’objet.
-
-Ainsi, les surfaces lisses créées des reflets brillants.
-
-
-## Ombrage de Gouraud (interpolation)
-
-## Indicateurs de qualités
-
-## Ressources
-
-- [Half-Edge Data Structures](https://jerryyin.info/geometry-processing-algorithms/half-edge/)
\ No newline at end of file
diff --git a/Documentation/docs/theory/img/Phong_components.png b/Documentation/docs/theory/img/Phong_components.png
deleted file mode 100644
index 57dd7fa94137f7136b4b180979782d91b176041c..0000000000000000000000000000000000000000
Binary files a/Documentation/docs/theory/img/Phong_components.png and /dev/null differ
diff --git a/Documentation/docs/theory/img/bft.png b/Documentation/docs/theory/img/bft.png
deleted file mode 100644
index f2647e579b983593b610823d95ed18b382538977..0000000000000000000000000000000000000000
Binary files a/Documentation/docs/theory/img/bft.png and /dev/null differ
diff --git a/Documentation/docs/theory/img/dihedral.png b/Documentation/docs/theory/img/dihedral.png
deleted file mode 100644
index 5d7b2a70aeac0a5a085b5cb35ba1a2283defffa2..0000000000000000000000000000000000000000
Binary files a/Documentation/docs/theory/img/dihedral.png and /dev/null differ
diff --git a/Documentation/docs/theory/img/dpf.png b/Documentation/docs/theory/img/dpf.png
deleted file mode 100644
index 44635d98a7a2bd8e0e6333b65a71e157a253a113..0000000000000000000000000000000000000000
Binary files a/Documentation/docs/theory/img/dpf.png and /dev/null differ
diff --git a/Documentation/docs/theory/img/half-edge.png b/Documentation/docs/theory/img/half-edge.png
deleted file mode 100644
index 65fa6b146ea309329903693afd4d53e81791105e..0000000000000000000000000000000000000000
Binary files a/Documentation/docs/theory/img/half-edge.png and /dev/null differ
diff --git a/Documentation/docs/theory/img/mesh.png b/Documentation/docs/theory/img/mesh.png
deleted file mode 100644
index d728f3779810639374cb855addc910d7782ca5a4..0000000000000000000000000000000000000000
Binary files a/Documentation/docs/theory/img/mesh.png and /dev/null differ
diff --git a/Documentation/docs/theory/img/records.png b/Documentation/docs/theory/img/records.png
deleted file mode 100644
index d4b6eeacaffaf42cfd40b7e9ae43f617de0a3bc2..0000000000000000000000000000000000000000
Binary files a/Documentation/docs/theory/img/records.png and /dev/null differ
diff --git a/Documentation/docs/theory/indicators-and-others.md b/Documentation/docs/theory/indicators-and-others.md
deleted file mode 100644
index 3c32f145852cb2e6d55ba96739fa4b14f63256e7..0000000000000000000000000000000000000000
--- a/Documentation/docs/theory/indicators-and-others.md
+++ /dev/null
@@ -1,225 +0,0 @@
-# Indicateurs de qualité
-
-!!! warning "Attention"
- Les informations se trouvant sur cette page sont incomplètes, peuvent contenir des erreurs et/ou nécessitent une
- meilleure mise en page.
-
-Quality checks summary :
-
-1. Aspect Ratio should not go beyond 5
-2. Warp angle should not be more than 45°
-3. Jacobian should not be less than 0.5
-4. Tet collapse should be greater than 0.1
-
-## Element Quality
->"The Element Quality is based on the ratio of the volume to the sum of the square of the edge lengths for 2D quad/tri elements, or the square root of the cube of the sum of the square of the edge lengths for 3D elements.
-
->The Element Quality is a composite quality metric that ranges between 0 and 1.
-
->A value of 1 indicates a perfect cube or square while a value of 0 indicates that the element has a zero or negative volume."
-
-[source](https://featips.com/2022/11/21/ansys-mesh-metrics-explained/)
-
-$Element Quality (2D) = C \times \frac{area}{\sum edge \space length^2 }$, namely:
-$Element Quality (2D) = 4\sqrt 3 \times \frac{area}{a^2 + b^2 + c^2 }$, namely:
-
-$Element Quality (2D) = 6.928 \times \frac{area}{a^2 + b^2 + c^2 }$
-
-For 3D elements, the formula is:
-$Element Quality (3D) = C \times \frac{volume}{(\sqrt{\sum edge \space length^2) ^3 }}$
-
-## Dihedral angle between two faces
-
-The dihedral angle between two faces is the value:
-
-$\pi \pm arccos<\vec{n_1}, \vec{n_2}>$
-
-depending on the configuration of the two faces with respect to $\vec{n_i}$, the normals of the faces under interest.
-
-
-
-## Tet collapse
-$Tet Collapse = min \space of(\frac{h}{\sqrt{A} \times 1.24})$
-_1662385923.png)
-(from page 593 of Pascal Jean Frey, Paul L. George - Mesh Generation_ Application to Finite Elements (2000, Hermès Science))
-
-[source from skill lync](https://skill-lync.com/blogs/technical-blogs/cfd-how-to-solve-tet-collapses-in-tetra-unstructured-mesh)
-
-
-## Aire des triangles
-
-!!! quote "Objectif"
- Mesurez l'aire de chaque triangle dans le maillage. Des triangles trop petits ou trop grands peuvent indiquer un
- maillage de mauvaise qualité.
-
-Cet indicateur mesure la taille de chaque triangle du maillage. Les triangles trop petits peuvent causer des problèmes
-de précision, tandis que les triangles trop grands peuvent causer des problèmes de performances. Un maillage de bonne
-qualité aura des triangles de tailles similaires.
-
-## Qualité de l'arête
-
-!!! quote "Objectif"
- Évaluez la longueur des arêtes du maillage. Les arêtes trop courtes ou trop longues peuvent entraîner une mauvaise
- qualité.
-
-There are different indicators that can be used to measure the quality of edges in a mesh.
-
-Here are a few examples:
-
-- Aspect Ratio. See below.
-
-- various measures of angles (minimum or maximum)
-
-- Maximum Angle: Largest angle between adjacent edges of the element is reported.
-
-- Minimum Angle: Smallest angle between adjacent edges of the element is reported.
-
-## Taux de régularité
-
-!!! quote "Objectif"
- Calculez le pourcentage de triangles ayant un rapport d'aspect proche de 1. Un taux élevé de régularité indique un
- maillage de meilleure qualité.
-
-*Aussi appelé rapport d'aspect.*
-
-The aspect ratio is a measure of the quality that is used in mesh generation and measures the ratio of the longest edge to the shortest edge of a simplex. The closer the aspect ratio is to 1, the better the simplex is.
-
-The ratio of the longest edge to the shortest edge of a simplex is another measure of aspect ratio. In fact, it is a common way to define aspect ratio for triangles. The longer the longest edge is relative to the shortest edge, the larger the aspect ratio. This can be expressed mathematically as:
-
-$$AR = \frac{l_{max}}{l_{min}}$$
-
-where $l_{max}$ is the length of the longest edge and $l_{min}$ is the length of the shortest edge. This definition is specific to triangles and is not applicable to other types of simplices like tetrahedra.
-
-The aspect ratio defined in terms of the inscribed radius and the longest edge, as described earlier, is a more general definition that can be applied to simplices of any dimension. It is also related to the ratio of the circumradius to the inradius, which is another measure of shape quality for simplices.
-
-REFERENCE PLEASE???????
-
-The aspect ratio of a given simplex K is defined by $Q_K = \alpha_2 \frac{h_{max}}{\rho_K}$, where K is a simplex, $h_{max}$ is the element diameter, aka its longest edge. $\rho_K$ is the radius of the inscribed circle, and $\alpha_2$ is a normalization factor that depends on the dimension of the simplex. For a triangle, $\alpha_2 = \frac{\sqrt{3}}{6}$.
-
-The aspect ratio is a measure of the quality of the simplex. The closer the aspect ratio is to 1, the better the simplex is.
-
-In two dimensions, a triangle is a simplex
-
-A simplex is always considered a connected and closed set, meaning that all the points in the simplex are connected to each other by straight line segments, and the simplex includes all of its boundary points.
-
-## Angle minimal et maximal
-
-!!! quote "Objectif"
- Évaluez les angles minimaux et maximaux de chaque triangle. Les angles trop aigus ou trop obtus peuvent réduire la
- qualité du maillage.
-
-Maximum and minimum interior angles are evaluated independently for triangles and quadrilaterals.
-
-Cet indicateur mesure l'angle formé par les côtés de chaque triangle du maillage. Les angles trop petits peuvent causer
-des problèmes de précision, tandis que les angles trop grands peuvent causer des problèmes de stabilité numérique. Un
-maillage de bonne qualité aura des angles de triangle qui sont proches de 60 degrés.
-
-## Distribution des sommets
-
-!!! quote "Objectif"
- Analysez la répartition des sommets dans le maillage. Une répartition uniforme des sommets est généralement
- souhaitable pour un maillage de bonne qualité.
-
-### Histogramme de la densité de sommets
-
-On peut diviser le domaine du maillage en petites zones et compter le nombre de sommets dans chaque zone. Ensuite, on
-peut représenter ces données sous forme d'un histogramme de la densité de sommets. Un histogramme uniforme indique une
-répartition uniforme des sommets dans le maillage. Un histogramme non uniforme indique une mauvaise répartition des
-sommets dans le maillage.
-
-### Voronoi diagram
-
-This is a way to partition space into regions based on the proximity to a set of points, such as the vertices in a mesh.
-The Voronoi diagram can be used to analyze the distribution of vertices by calculating the areas of the Voronoi polygons
-associated with each vertex. A well-distributed mesh would have Voronoi polygons with similar areas, while a poorly
-distributed mesh would have large variations in the Voronoi polygon areas.
-
-### Vertex quality index
-
-The formula for calculating the vertex quality index is:
-
-$$
-\frac{1}{N}\sum_{i=1}^{N} \sqrt{(x_i - \bar{x})^2 + (y_i - \bar{y})^2 + (z_i - \bar{z})^2}
-$$
-
-
-where $N$ is the total number of vertices in the mesh, $(x_i, y_i, z_i)$ are the coordinates of the $i$-th vertex, and $(\bar{x}, \bar{y}, \bar{z})$ are the coordinates of the center of gravity of the mesh.
-
-## Ratio de la taille des éléments voisins
-
-!!! quote "Objectif"
- Évaluez le rapport entre la taille des éléments voisins dans le maillage. Des ratios trop élevés ou trop faibles
- peuvent indiquer une mauvaise qualité de maillage.
-
-The ratio of neighboring element sizes is an important measure of the quality of a mesh. It evaluates the ratio between the sizes of neighboring elements, such as triangles or quadrilaterals, in the mesh. A ratio that is too high or too low can indicate poor mesh quality and distortion in the shape of the object.
-
-The ratio of neighboring element sizes can be calculated by computing the ratio of the maximum size to the minimum size for each element. This can be done by dividing the maximum size of the neighboring elements by the minimum size of the neighboring elements.
-
-## Connectivité des sommets
-
-!!! quote "Objectif"
- Analysez la connectivité des sommets dans le maillage. Un nombre élevé de sommets connectés à un seul sommet peut
- indiquer une mauvaise qualité.
-
-The connectivity of the vertices in a mesh refers to the number of edges that connect a vertex to other vertices. This metric measures how well the mesh is connected and can indicate the presence of isolated or poorly connected vertices.
-
-## Cohérence des normales
-
-!!! quote "Objectif"
- Vérifiez que les normales des faces adjacentes sont cohérentes et pointent dans la même direction générale. Les
- inversions de normales peuvent causer des problèmes de rendu et d'ombrage
-
-The coherence of normals refers to the consistency of the direction of the surface normal vectors across adjacent faces in a mesh. In computer graphics, surface normals are used to determine how light interacts with the surface, and inconsistent normals can cause visual artifacts in the rendering.
-
-## Surface's normal vectors
-
-"Cohérence des normales", "angle entre les normales", and "divergence des normales" are all measures of the quality of a mesh's surface. However, they each focus on different aspects of the surface's normal vectors:
-
-### Cohérence des normales
-
-This measure checks that the normal vectors of adjacent faces are consistent and pointing in the same general direction.
-Inconsistencies in normal vectors can cause rendering and shading issues.
-
-### Angle entre les normales
-
-This measure calculates the angle between the normal vectors of adjacent faces. A small angle indicates a smooth surface,
-while a large angle can indicate a discontinuity or sharp edge in the surface.
-
-### Divergence des normales
-
-This measure checks for abrupt changes in the normal vectors across the surface of the mesh. High divergence can
-indicate surface irregularities or singularities.
-
-### Résumé
-
-While "cohérence des normales" and "angle entre les normales" focus on the direction and angle of the normal vectors
-respectively, "divergence des normales" looks for abrupt changes in the normal vectors across the surface of the mesh.
-
-## Normales de sommet pondérées
-
-!!! quote "Objectif"
- Calculez les normales de sommet pondérées en fonction de l'aire des faces adjacentes. Des normales de sommet
- pondérées incohérentes peuvent indiquer des problèmes de qualité du maillage.
-
-Weighted vertex normals are commonly used in computer graphics to produce smooth shading on curved surfaces. Each vertex normal is the average of the surface normals of all adjacent faces, weighted by the area of each face. This weighting ensures that larger faces have a greater influence on the final normal, resulting in a smoother transition between adjacent faces.
-
-The calculation of weighted vertex normals is straightforward, but if the mesh has poor quality (such as non-manifold edges or self-intersections), the resulting normals may be inconsistent and lead to visual artifacts in the rendered image.
-
-To calculate the weighted vertex normal for a vertex V, you can follow these steps:
-
-- Find all adjacent faces to vertex V.
-- Calculate the surface normal for each adjacent face.
-- Weight each surface normal by the area of its corresponding face.
-- Sum the weighted surface normals.
-- Normalize the sum to obtain the final vertex normal.
-- Inconsistent weighted vertex normals can result from problems in the mesh geometry, such as non-manifold edges or self-intersections.
- - These problems can cause faces to have overlapping or contradictory normals, leading to visual artifacts such as shading seams or incorrect lighting. Therefore, ensuring consistent and accurate weighted vertex normals is an important aspect of mesh quality assessment.
-
-## Gradient des normales
-
-!!! quote "Objectif"
- Évaluez le gradient des normales des sommets voisins. Un gradient faible des normales indique un maillage plus lisse.
-
-The "gradient of normals" is a measure of how much the normals of neighboring vertices change in direction and magnitude. This can be computed by taking the difference between the normal vectors of neighboring vertices and computing the magnitude of the resulting vector. A low gradient of normals indicates a smoother mesh, where the normals change gradually from one vertex to another, while a high gradient of normals indicates that the mesh has abrupt changes in surface orientation. This can cause shading and rendering problems.
-
-The gradient of normals is an important quality metric in computer graphics and is used to evaluate the smoothness of a mesh. It is commonly used in applications such as 3D modeling, animation, and virtual reality.
diff --git a/Documentation/docs/theory/optimization.md b/Documentation/docs/theory/optimization.md
deleted file mode 100644
index e63d1d12fdfbe8e62d4d85722888a275dcb645f3..0000000000000000000000000000000000000000
--- a/Documentation/docs/theory/optimization.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Optimisation
-
-## Mesures choisies
-
-Les mesures suivantes ont été choisies pour déterminer la qualité d'un mesh :
-
-- le taux de régularité (aspect ratio)
-- l'asymétrie (skewness), calculée par l'écart d'angle normalisé
-- l'angle minimum/maximum
-
diff --git a/Documentation/docs/theory/other.md b/Documentation/docs/theory/other.md
deleted file mode 100644
index 3cca0f641af850764f46a8fe0775413153923fbc..0000000000000000000000000000000000000000
--- a/Documentation/docs/theory/other.md
+++ /dev/null
@@ -1,100 +0,0 @@
-# Autre mesures de qualité
-
-!!! warning "Attention"
- Les informations se trouvant sur cette page sont incomplètes, peuvent contenir des erreurs et/ou nécessitent une
- meilleure mise en page.
-
-## Skewness
-
-Skewness is the deviation between the optimal cell size to the existing cell size. The range of skewness is between 0
-(ideal) to 1 (worst). Highly skewed cells are not preferred due to the poor accuracy they cause within the interpolated
-regions.
-
-Il existe 2 méthodes pour calculer le niveau de *skewness*.
-
-### Angular Measure
-
-Calculation of Skewness for Triangular/Quadrilateral Elements
-
-The warp angle is a measure of the quality that is used in mesh generation and measures the angle between the normals of two adjacent faces. The closer the warp angle is to 0, the better the mesh is.
-
-For a triangle, the warp angle is defined as the angle between the normals of the two adjacent faces.
-
-Skew of triangular elements is calculated by finding the minimum angle between the vector from each node to the opposing mid-side, and the vector between the two adjacent mid-sides at each node of the element.
-
-The warp angle is a measure of the quality of the mesh. The closer the warp angle is to 0, the better the mesh is.
-
-Skewness= 90-min(Θ1, Θ2….. Θ6)
-
-where Θ1, Θ2….. Θ6 are the angles between the vectors from each node to the opposing mid-side, and the vector between the two adjacent mid-sides at each node of the element.
-
-For Equilateral Triangle, Θ1, Θ2….. Θ6 = 90 degree
-
-Hence, Skewness = 0 degree
-
-### Normalized angle deviation
-
-Calculation of Skewness for Triangular/Quadrilateral Elements
-
-$skewness = max[\frac{\theta_{max} - \theta_e}{180-\theta_e}, \frac{\theta_e - \theta_{min}}{\theta_e}]$
-
-In the normalized angle deviation method, skewness is defined (in general) as "maximum of ratio of Angular deviation from Ideal element.
-
-θmax = Largest Angle in the face or cell
-
-θmin = Smallest Angle in the face or cell
-
-θe = Angle for an equi-angular face or cell
-
-where, θe = 60 ̊ for Equilateral Triangle and 90 ̊ for Square
-
-## Qualité de l'angle dièdre
-
-!!! quote "Objectif"
- Calculez l'angle dièdre entre les faces adjacentes. Les angles dièdres trop petits ou trop grands peuvent indiquer des problèmes de qualité.
-
-The dihedral angle is the angle formed by the intersection of two adjacent faces in a 3D mesh.
-
-
-
-Angle between two half-planes (α, β, pale blue) in a third plane (red) which cuts the line of intersection at right angles.
-
-Cet indicateur mesure l'angle formé entre deux triangles adjacents. Les angles dièdres trop grands ou trop petits
-peuvent causer des problèmes de stabilité numérique et de déformation. Un maillage de bonne qualité aura des angles
-dièdres proches de 180 degrés.
-
-## Angle entre les normales
-
-!!! quote "Objectif"
- Calculez l'angle entre les normales des faces adjacentes. Un angle faible entre les normales adjacentes indique une surface lisse, tandis qu'un angle important indique une discontinuité ou une arête vive.
-
-## Angle entre les normales de sommet et la normale de la face
-
-!!! quote "Objectif"
- Mesurez l'angle entre les normales de sommet et la normale de la face associée. Un angle faible indique que les
- normales de sommet et les normales de face sont bien alignées.
-
-## Écart-type des angles de normales
-
-!!! quote "Objectif"
- Calculez l'écart-type des angles entre les normales des faces adjacentes. Un écart-type faible indique un maillage
- lisse et régulier, tandis qu'un écart-type élevé peut indiquer des problèmes de qualité.
-
-Non-orthogonality is the angle between the vector connecting two adjacent cell centers and the normal of the face shared
-by these cells. The range of non-orthogonality is between 0 (ideal) and 90 (worst). 0 indicates the mesh being
-orthogonal. Two perfect hexes aligned with each other have non-orthogonality equal to 0.
-
-## Length (min)
-
-Minimum element lengths are calculated using one of two methods.
-
-The shortest edge of the element. This method is used for non-tetrahedral 3D elements.
-
-The shortest distance from a corner node to its opposing edge (or face, in the case of tetra elements); referred to as
-"minimal normalized height".
-
-## Warpage
-
-Amount by which an element, or in the case of solid elements, an element face, deviates from being planar. Since three points define a plane, this check only applies to quads. The quad is divided into two trias along its diagonal, and the angle between the trias’ normals is measured.
-
-Warpage of up to five degrees is generally acceptable.
diff --git a/Documentation/docs/theory/quality_threshold.md b/Documentation/docs/theory/quality_threshold.md
deleted file mode 100644
index f4979f8c7366f1822d355627c0fafc23118b1cda..0000000000000000000000000000000000000000
--- a/Documentation/docs/theory/quality_threshold.md
+++ /dev/null
@@ -1,57 +0,0 @@
-### Rappel
-Quality checks summary :
-
-1. Aspect Ratio should not go beyond 5
-2. Warp angle should not be more than 45°
-3. Jacobian should not be less than 0.5
-4. Tet collapse should be greater than 0.1
-
-### Table Summarised ANSYS Style
-
-This table is summarised and based on the ANSYS Mesh Metrics Explained article
-
-| Indicateur | Valeurs sans warning| Valeurs idéales | Valeurs qui peuvent causer des erreurs |
-|------------|---------|-------- | -----------------|
-| Angle maximal (maximum corner angle) | 20° - 165° | 60° | 179.9° |
-| Skewness | 0 - 0.75 | 0 | - |
-| aspect ratio | 1 - 20 | 1 | 1e6 |
-| wraping factor | 0 - 5 | 0 | 7 |
-
-
-
-Parallel deviation and warping factor brick don't apply to our project as we deal with triangles and tetrahedrons only.
-
-### Table Summarised GB 33582 Style
-
-This table is based on the standard GB/T 33582-2017 General principles of structural finite element analysis for mechanical products
-
-| Indicateur | 2D triangles | 3D tetrahedrons |
-|------------|---------|-------- |
-| Angle maximal (maximum corner angle) | 20° - 120° | 20° - 120° |
-| Skewness | <= 60° | <=60° |
-| aspect ratio | 1 - 5 | 1 - 5 |
-| wraping factor | - | - |
-| Tet collapse | - | 0.1 - 1 |
-
-Remarque: Tet collapse is not applicable to 2D triangles. The ideal value of tet collapse is 1. The higher the value the better the quality of the tetrahedron.
-
-
-## Valeurs acceptables in more details
-[Source: ANSYS Mesh Metrics Explained](https://featips.com/2022/11/21/ansys-mesh-metrics-explained/)
-### skewness and cell quality
-| value of skewness | cell quality |
-|-------------------|--------------|
-| 0.0 - 0.25 | excellent |
-| 0.25 - 0.5 | good |
-| 0.5 - 0.75 | fair |
-| 0.75 - 0.9 | poor |
-| 0.9 - <1.0 | very poor |
-| 1.0 | degenerate |
-| >1.0 | invalid |
-
-
-
-### Warping factor
-
-
-This factor measures if the shell is on the same plane or not. If 0 then yes, if not 0 then warped. The bigger the value of warping factor the more warped the shell is. The highest acceptable value is 5. There would be calculation errors if the value is higher than 7.
diff --git a/Documentation/docs/theory/references.md b/Documentation/docs/theory/references.md
deleted file mode 100644
index 48f25b5030e6bf434b8b804811d494a1f5fb2c20..0000000000000000000000000000000000000000
--- a/Documentation/docs/theory/references.md
+++ /dev/null
@@ -1,10 +0,0 @@
-# Ressources
-
-- [What is a mesh?](https://www.simscale.com/docs/simwiki/preprocessing/what-is-a-mesh/)
-- [Mesh quality](https://www.simscale.com/docs/simulation-setup/meshing/mesh-quality/)
-- [Determining mesh quality](https://resources.system-analysis.cadence.com/blog/msa2022-determining-mesh-quality-and-accuracy-parameters)
-- Mesh Generation: Application to Finite Elements, by Pascal Jean Frey, Paul L. George
-- [Aspect Ratio](https://docs.salome-platform.org/8/gui/SMESH/aspect_ratio.html)
-- [Element Quality Check](https://www.youtube.com/embed/_No2IKmMSXM)
-- [Mesh quality parameters](https://www.engmorph.com/mesh-quality-parameters)
-- [ANSYS Mesh Metrics Explained](https://featips.com/2022/11/21/ansys-mesh-metrics-explained/)
diff --git a/Documentation/mkdocs.yml b/Documentation/mkdocs.yml
index 9a58cdb71b05a913cbf0837e1b862581da72e434..f7523fb0d1d10dbaccb495737219466848fa2dda 100644
--- a/Documentation/mkdocs.yml
+++ b/Documentation/mkdocs.yml
@@ -40,6 +40,7 @@ theme:
features:
- navigation.indexes
- navigation.tabs
+ - navigation.tabs.sticky
- navigation.sections
- navigation.top
- navigation.footer
@@ -47,10 +48,8 @@ theme:
- content.code.copy
- content.code.annotate
nav:
- - But: index.md
- - API:
- - Introduction:
- - api/index.md
+ - Présentation de l'API: index.md
+ - API:
- Invités:
- POST /api/v1/guests/users: 'api/user_create.md'
- POST /api/v1/guests/users/:username: 'api/user_connect.md'
@@ -69,51 +68,14 @@ nav:
- PUT /api/v1/admins/:admin/questions/:question_id: api/update_question.md
- DELETE /api/v1/admins/:admin/questions/:question_id: api/delete_question.md
- Explication de l'implémentation:
- - Introduction:
- - frontend/index.md
- - Framework:
- - frontend/ionic.md
- - frontend/angular.md
- - frontend/tailwindcss.md
- - frontend/babylonjs.md
- - Base de données:
- - frontend/firebase.md
- - Application:
- - frontend/functionning.md
- - Répartition du travail:
- - Cours:
- - Algorithmes avancés: theory/advanced_algorithms.md
- - Géométrie algorithmique: theory/algorithmic_geometry.md
- - Optimisation:
- - Indicateurs de qualité: theory/indicators-and-others.md
- - Autre mesures: theory/other.md
- - Optimisation: theory/optimization.md
- - Quality Threshold: theory/quality_threshold.md
- - Références: theory/references.md
+ - Frontend: explication/frontend.md
+ - Backend: explication/backend.md
+ - Répartition du travail: repartition_travail.md
- Informations supplémentaires:
- - Problèmes éventuels:
- - Algorithmes avancés: theory/advanced_algorithms.md
- - Géométrie algorithmique: theory/algorithmic_geometry.md
- - Code provenant d'internet:
- - Indicateurs de qualité: theory/indicators-and-others.md
- - Autre mesures: theory/other.md
- - Optimisation: theory/optimization.md
- - Quality Threshold: theory/quality_threshold.md
- - Références: theory/references.md
- - Implémentation du projet:
- - Algorithmes avancés: theory/advanced_algorithms.md
- - Géométrie algorithmique: theory/algorithmic_geometry.md
- - Procédure d'installation / d'utilisation:
- - Problèmes éventuels:
- - Algorithmes avancés: theory/advanced_algorithms.md
- - Géométrie algorithmique: theory/algorithmic_geometry.md
- - Code provenant d'internet:
- - Indicateurs de qualité: theory/indicators-and-others.md
- - Autre mesures: theory/other.md
- - Optimisation: theory/optimization.md
- - Quality Threshold: theory/quality_threshold.md
- - Références: theory/references.md
-copyright: Copyright © 2023 In Code We Trust
+ - Problèmes éventuels: infos/problemes.md
+ - Code provenant d'internet: infos/code_internet.md
+ - Procédure d'installation / d'utilisation: procedure.md
+copyright: Copyright © 2023 RAJOHNSON JAQUET
markdown_extensions:
- toc:
permalink: true
@@ -151,3 +113,4 @@ extra_javascript:
- https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js
- https://cdn.tailwindcss.com
+