Skip to content

KhaeraB/frontend-test-khaera

 
 

Repository files navigation

Memory

Typescript React Redux Toolkit Sass Vite.js Jest Istanbul

Jeu de memory réalisé avec TypeScript, React et Redux Toolkit. Les cartes sont mélangées aléatoirement à chaque nouvelle partie et le joueur doit retourner les paires de cartes identiques pour gagner. Le temps est compté et le score est calculé en fonction du nombre de paires trouvées.

Installation

  1. Cloner le repository : git clone https://github.com/KhaeraB/frontend-test-khaera.git
  2. Se déplacer dans le dossier : cd frontend-test-khaera
  3. Installer les dépendances : npm install

Lancement

  1. Lancer la commande npm run dev
  2. Accéder au jeu sur http://127.0.0.1:5173/

Tests

Les tests unitaires sont écrits avec Jest et les tests d'intégration avec Testcafé. Pour lancer les tests, exécuter la commande npm test.

Couverture de code

La couverture de code est vérifiée avec Istanbul. Pour accéder au rapport de couverture, exécuter la commande npm run coverage. Le rapport est accessible dans le dossier coverage/lcov-report/index.html. et au lien http://127.0.0.1:5173/coverage

Le but est de créer le jeu Memory

gif demo

Fonctionnalités

  • Au commencement du jeu, des cartes sont disposées face cachée à l'écran
  • Le joueur doit cliquer sur deux cartes. Si celles-ci sont identiques, la paire est validée. Sinon, les cartes sont retournées face cachée, et le joueur doit sélectionner une nouvelle paire de cartes
  • Un compteur de temps, avec une barre de progression, s’affiche en dessous du plateau
  • Le joueur gagne s'il arrive à découvrir toutes les paires avant la fin du temps imparti

Résultat attendu

  • Créer le jeu en react / redux avec typescript
  • La répartition des cartes doit être aléatoire à chaque jeu
  • Précisions CSS : SASS ou autre préprocesseur encouragé
  • Cartes à jouer, vous pouvez utilisez les images que vous souhaiter
  • Charte graphique: Pas de charte graphique imposée. Quoi qu’il en soit, le code CSS doit être compréhensible et abordable

Important: Réaliser le test en gardant en tete que le projet est un projet d'entreprise.

Releases

No releases published

Packages

No packages published

Languages

  • HTML 78.1%
  • TypeScript 11.9%
  • JavaScript 4.5%
  • SCSS 2.8%
  • CSS 2.7%