Skip to content

paul-schuhm/timeguessr

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

22 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Projet : TimeGuessr

Guide

  1. Analyse :
    1. comprendre le jeu, le spécifier, le déroulement (ex. Diagramme de navigation), commencer à identifier les données (dictionnaire de données, MCD)
  2. Conception :
    1. Navigation sur le système : comment le jeu se déroule sur le site web (quelles URL, quelles données à chaque URL)
  3. Implémentation :
    1. Implémenter un composant routeur (URL associée à du code à executer (controller)) ;
    2. Implémenter une boucle complète de jeu (navigation)

Démos

Accéder a des démos sur des aspects spécifiques (et clefs !) du projet et détails d'implémentation en PHP.

Lancer le projet en local

Dépendances

  • PHP 8+ et le module pdo_mysql;
  • Un serveur MySQL avec un utilisateur ;

Base de données

  1. Créer un fichier .env à la racine du projet et y renseigner vos credentials:
cp .env.dist .env
  1. Exécuter le script database/schema.sql.
  2. Pour ajouter des images à la base :
    1. Créer un dossier images à la racine du projet et y placer des images ;
    2. Pour chaque image, insérer un enregistrement en base de données :
INSERT INTO image (path, latitude, longitude, annee) 
VALUES('chute-berlin.jpg', 52.5, 13.4, 1989);

Le site web

Lancer le site web, avec le serveur intégré de PHP :

php -S localhost:8000 -t public

Se rendre à l'URL http://localhost:8000 avec votre navigateur favori.

Jeu de données test

Fournir un jeu de données test (en base + images) à utiliser pour tester facilement le projet.

Analyse

Données

MCD

  • Image : id, localisation (?), année, description, nom (path)

Dictionnaire des données

Libellé code Type Commentaire/Contrainte
Nom de l'image dont il faut deviner année et localisation path AN Unique. Chaîne de caractères écrite en kebab-case. Comprend l'extension du fichier. Par ex chute-du-mur.png. Formats acceptés : png, jpeg, jpg, webp

Légende :

  • AN : AlphaNumérique ;
  • N : Numérique ;
  • B : Booléen
  • D : Datetime

Aller plus loin

Améliorer le système

  • Mettre en place une gestion d'erreurs ;
  • Intégration CSS propre et agréable ;
  • Ajouter la carte interactive pour proposer l'emplacement géographique (longitude et latitude) ;
  • Refactoriser/restructurer le code. Le code est volontairement laissé en l'état. Essayer de trouver des abstractions utiles (fonctions, namespaces, classes si POO, etc.) pour restructurer le code.

Fait

  • Ne pas donner accès à toutes les images. Pour le moment les images sont dans le répertoire public. Elles sont facilement accessibles par les clients avant de commencer une partie. Elles devraient uniquement être accessibles à chaque round. Pour cela, il faut créer un contrôleur en charge de fournir une image liée à un round sur une URL custom (par ex. fournir GET round/image?step=1) [x]
  • Avancé : Fixer la navigation. Le site casse dès que l'on rafraîchit la ressource /round. Par exemple, si on utilise le bouton Revenir en arrière (Back) du navigateur la session continue d'aller au round suivant, des GET répétées sur même /round fait avancer le jeu et l'image, etc. (GET doit être sûre et idempotente !). Pour cela, utiliser le pattern PRG ; [x]

Références

About

Un clone de timeguessr (projet pedagogique 1ere année développement web)

Topics

Resources

Stars

Watchers

Forks

Contributors

Languages