Merge branch 'NouveauTP1'

web/docs/01-cours/05-rencontre5.md

@@ -2,4 +2,10 @@
 
 ## Présentation du TP1, GitHub par feature et stubs
 
-🚧 À venir
+### TP
+
+[Page du TP1](/tps/tp1)
+
+### Liens
+
+[🔗Cours5.pptx](https://cegepedouardmontpetit.sharepoint.com/:p:/s/CMT420InformatiqueComitesCours-5W5/EbLvWcA-wGFGkczyWIp7t_0BfPgRkTGc9mq1Tq89zIm1Kw?e=Qk1Am4)

web/docs/04-tps/01-tp1.md

@@ -1,3 +1,138 @@
 # TP1 (Super Cartes Infinies)
 
-🚧 À venir!
+## L'application
+
+### Objectifs : 
+- Analyser un problème et le découper en Epics, User Stories et Tasks à l'aide d'Azure DevOps Boards.
+- Créer un diagramme de classes de la solution.
+- Complèter un application web à l’aide d’Angular, Web API et MVC pour faire un jeu de carte de style HearthStone.
+- Le site Angular sera utilisé par des membres inscrits en utilisant des cookies pour l'authentification. 
+- L’administrateur pourra configurer le contenu de l’application à l’aide de MVC.
+- Il n'est pas nécessaire d'écrire des tests pour le premier TP, mais nous allons en écrire pour les 2 prochains.
+
+### Les règles :
+- Deux joueurs s’affrontent avec leurs cartes.
+- Chaque joueur pige un nombre de cartes configurable dès le départ.
+- Chaque joueur pige une carte au début de son tour.
+- Chaque joueur reçoit une quantité configurable de mana au début de son tour.
+- Chaque carte a une certaine quantité de points d’attaque, une certaine quantité de points de défense et un coût en mana.
+- Les joueurs ne pourront **pas encore** jouer de carte avant le TP2. Nous allons voir les règles du jeu plus en détails à ce moment.
+- Un joueur peut terminer son tour. Le tour de l’autre joueur commence alors et il reçoit sa carte et son mana.
+- Un joueur peut abandonner la partie et il perd alors automatiquement (l’autre joueur a une victoire).
+
+### Clarification :
+Le mot « carte » est utilisé très fréquemment, mais il faut comprendre que l’on ne parle pas toujours du même modèle de donnée. En effet, lorsqu’on configure le jeu, le mot carte fait référence au « modèle » de la carte. Mais si on mentionne qu’un joueur possède des cartes, on a besoin d’un modèle qui permet d’associer une carte à un joueur. Le premier livrable du projet est un diagramme de classe qui va permettre de clarifier tout ça.
+
+### Contraintes
+- Le travail doit être effectué en équipes de 3 ou 4.
+- Vous devrez utiliser Git/GitHub.
+- Vous devrez utiliser DevOps pour la gestion des tâches.
+- Vous devrez compléter une application cliente en Angular.
+- Vous devrez compléter une application serveur en ASP.NET Web API.
+- Vous devrez ajouter une section **(Area)** d’administrateur sur votre serveur en MVC.
+
+## Livraisons du TP
+
+### Matériel de départ
+
+Le diagramme de classe à compléter:
+- 🔗[Diagramme de classes Visio](https://cegepedouardmontpetit.sharepoint.com/:u:/s/CMT420InformatiqueComitesCours-5W5/EfL4bakKNiBEqEwCHT8pGuEBpkKEqGalcVDq-66vYUc9uA?e=GjCSED)
+
+:::info
+C'est possible de créer un nouveau repository GitHub directement dans Gitkraken.
+:::
+
+Pour le client et le serveur:
+    - **1** membre de l'équipe doit faire un nouveau repository **PRIVATE** pour **CHAQUE** partie. **1 client et 1 serveur**.  Voici les fichiers de départ:
+        - 🔗[Client de départ](https://cegepedouardmontpetit.sharepoint.com/:u:/s/CMT420InformatiqueComitesCours-5W5/ETtvfI4zBsNPtNLX_jdy7IUBXsQn8XqeUYs3hWYxIdz1VQ?e=4HMtWp)
+        - 🔗[Serveur de départ](https://cegepedouardmontpetit.sharepoint.com/:u:/s/CMT420InformatiqueComitesCours-5W5/EXJ9kOO1dEZLukA_AyQkvXgBko0rYJsadEaVWTbDiepdZw?e=lNMdIA)
+    - Ajouter ensuite le contenu du zip à **CHACUN DES projets** et faire un commit/push.
+    - Partager les 2 nouveaux repositories aux autres membres de l'équipe.
+    - Partager les également avec l'enseignant. Utilisateur: **mbriau**.
+
+### Les étapes
+Il y a 3 étapes de livraison du premier TP :
+- Diagramme de classe et DevOps (évaluation de groupe)
+- Fonctionnalités (évaluation individuelle)
+- Intégration des fonctionnalités, DevOps et Git (évaluation de groupe)
+
+
+## Le détail des tâches individuelles
+### Section d’administration (MVC)
+- L’administrateur peut créer, modifier, voir et supprimer les cartes modèles.
+- Cartes de départs:
+    - Mettre en place le modèle de données des cartes de départ.
+    - L’administrateur peut modifier les cartes de départ des nouveaux joueurs. Faire un tri par le nom de la carte dans l’Index.
+    - Ajouter un seed des cartes de départ. Il doit contenir 3 cartes différentes avec une seul copie et 3 autres cartes avec deux copies chaque.
+    - Il existe un **STUB** de StartingCardsService pour les cartes de départ. Il faut retourner les cartes configurer à l'aide des cartes de départ.
+- Configuration:
+    - Ajouter une page de configuration pour l’administrateur. Permettre de d’avoir une configuration pour le nombre de cartes de départ et la quantité de Mana reçu au début du tour.
+    - Ajouter un seed pour la configuration avec 4 cartes de départ et 3 manas par tour.
+    - Note : Ce n’est pas un problème que la configuration soit une table avec une seule entrée. Dans une version plus avancée du projet, on pourrait imaginer qu’il y ait plusieurs modes de jeu différents avec des configurations différentes, pour l’instant on va toujours utiliser la seule configuration existante. Vous pouvez faire simplement utiliser First() sur le DbSet.
+    - Il existe un **STUB** du ConfigurationService qui retourne le nombre de cartes reçu au début de la partie et le nombre de mana reçu par tour. Il faut retourner les valeurs de la configuration.
+
+
+### Enregistrement et connexion
+
+.NET:
+- Ajout du modèle de données **OwnedCard**.
+- Ajouter un contrôleur d'API pour gérer l'enregistrement, la connexion et la déconnexion.
+- Lors de l'enregistrement, il faut appeler la méthode CreatePlayer de PlayersService.
+- Il faut terminer l'implémentation de la méthode CreatePlayer de PlayersService.
+- Il existe un **STUB** du CarsService qui retourne les cartes d'un joueur avec GetPlayersCards. Il faut retourner les cartes du joueurs (OwnedCards).
+
+Angular:
+- Register:
+    - ReactiveForms valide que le courriel a le bon format, le mot de passe de confirmation est identique et que les champs sont tous requis.
+    - Affichage des messages d’erreurs si le format du mot de passe n’est pas valide ou si l’utilisateur existe déjà.
+    - Faites la validation de la longueur du mot de passe en utilisant Reactive Forms. Vous pouvez également valider les autres critères comme l’utilisation de caractères spéciaux, mais c’est optionnel.
+- Login Reactive forms:
+    - Validation du format du courriel et des deux champs requis.
+    - Affichage des messages d’erreurs provenant du serveur.
+- Implémenter la déconnection
+- Rester connecté en utilisant le **localStorage** et afficher le courriel de l’utilisateur tant que l'utilisateur ne se déconnecte pas. Vous pouvez assumer que le cookie est présent quand l'utilisateur est connecté.
+
+### Angular
+
+- Afficher les cartes existantes avec Angular (Page Magasin) [Pas encore possible d’acheter ou de vendre des cartes]
+- Afficher les cartes du joueur avec Angular (Page Mes Cartes).
+- Afficher un dialogue qui montre que l’on recherche un adversaire. Après 30 secondes, lancer le match de test comme avant.
+- Ajouter la logique pour GainManaEvent dans processEvent de MatchService.
+- Ajouter un dialogue de défaite et de victoire lorsqu’on a une fin de partie. Il existe déjà:
+    - Une class css .end pour vous aider.
+    - Les méthodes **endMatch** et **isVictory**.
+
+### Hub
+
+- Ajouter les events DrawCardEvent et GainManaEvent dans PlayerStartTurnEvent.
+- Ajouter la logique de Connection/EndTurn/Surrender.
+- Utiliser Authorize dans le Hub pour s'assurer que l'utilisateur est bien connecté.
+- Utiliser le hub dans le service angular MatchService. L’affichage du Mana ne devrait pas encore fonctionner, mais tout devrait s’arranger une fois que l’on va faire l’intégration.
+
+## Intégration (à faire seulement une fois que les fonctionnalités sont terminés pour l’évaluation de groupe)
+- Ramenez les différentes branches vers la branche Dev.
+- Assurez-vous de vous connecter à un vrai match avec le Hub.
+- Assurez-vous d’utiliser la bonne implémentation de ConfigurationService.
+- Assurez-vous d’utiliser la bonne implémentation de MatchService côté Angular.
+- Assurez-vous d’utiliser la bonne implémentation de StartingCardsService.
+- Assurez-vous d’utiliser la bonne implémentation pour le WebAPI pour obtenir les cartes du joueur.
+- Dans MatchPlayerData, utiliser les cartes du joueur.
+- Utiliser un guard pour limiter l'accès à la page Mes Cartes et Match à un utilisateur connecté.
+
+## Grille de correction
+- 12% de la note pour l’évaluation individuelle (voir le document sur la correction individuelle)
+- 8% de la note pour l’évaluation de groupe
+    -	2% pour le diagramme de classe
+    -	3% pour l'utilisation d'Azure DevOps Boards
+    -	3% pour l'intégration des fonctionnalités du projet
+
+## Référence pour la remise finale en équipe
+
+Une référence pour voir un client et un serveur fonctionnels.
+
+- 🔗[Client](https://wonderful-tree-0ccc8c610.4.azurestaticapps.net/)
+- 🔗[Serveur](https://supercartesinfinies.azurewebsites.net/)
+
+:::danger
+C'est possible que les exemples ne fonctionnent pas bien selon vos options de cookies. Nous allons les regarder en classe.
+:::