Skip to content

tanamanda13/w1p2021-hero-tan-cassagnettes

 
 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

11 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Le site dont vous êtes le héros

URL du site : http://votre-url-ici.com

Groupe

  • Emma Cassagnettes
  • Amanda Tan

Prologue

  • Voici le cahier des charges que doit respecter au minimum le projet.
  • Tout ce qui n'est pas précisé relève de vos choix personnels.

Git

  1. Forkez ce repository et renommez-le selon la nommenclature w1p2021-hero-amsellem-calou, en remplaçant les noms par les vôtres.
  2. Utilisez netlify ou le service de votre choix pour mettre votre projet en ligne.
  3. Remplacez la fausse URL en haut de ce fichier par l'URL de votre projet.
  4. Renseignez les membres de votre groupe en haut du fichier.

Environnement technique

Le projet doit être construit avec le framework VueJS.

Lancer le projet

Se mettre dans un terminal dans le répertoire du projet forké, puis :

  • npm i
  • npm run dev

Plugins conseillés

Structure des données

Le projet doit contenir un fichier data.json contenant l'intégralité des données nécessaires à la génération du jeu.

Données de test

Avant d'écrire votre histoire, commencez par un jeu de données de test constitué ainsi :

phase n° titre action A action B Fin ?
1 Bienvenue ! avancer (-> vers 2)
2 Ou aller ? à gauche (-> vers 3) à droite (-> vers 4)
3 Chemin tranquille avancer (-> vers 5)
4 Chemin dangereux revenir (-> vers 2) avancer (-> vers 6)
5 Arrivée continuer (vers /win) Victoire
6 Piège mortel continuer (vers /lose) Échec
  • À vous de trouver comment représenter ces données sous forme d'un json exploitable par votre JavaScript.
  • Par la suite, vous écrirez une histoire complète constituée d'au moins 30 phases.
  • Les chemins peuvent s'entremêler, et les victoires et les échecs peuvent être multiples.
  • Chaque phase pourra offrir un ou plusieurs choix (sans se limiter à deux).
  • Votre json s'enrichira de nouvelles informations pour chaque phase (texte(s), image(s)...).

Semaine 1 : Routing & transitions

Routes

Le projet doit contenir les pages suivantes :

url description paramètres destination
/ Page d'accueil /character
/character Page de choix du personnage /game/1
/game/:id Pages de l'aventure id : identifiant de la phase /game/:id ou /win ou /lose
/win Page de victoire /
/lose Page d'échec /
  • Commencez par créer des pages constituées d'un simple texte de test. Elles se construiront par la suite.
  • Lorsque l'utilisateur recharge le navigateur, la page courante doit être restaurée correctement. Si je suis sur game/3 et que je rafraîchi, je suis toujours sur game/3.

La page /character

Vide pour l'instant, sa logique sera approfondie au cours des semaines suivantes.

La page /game/:id

  • Chaque phase est un object identifié par un id dans le fichier data.json.
  • Lorsque la page est affichée, elle doit charger la phase de jeu correspondante.
  • Au début, affichez seulement l'object brut. Le contenu des pages sera mis en place plus tard.

Transitions

  • Le passage d'une page à l'autre doit être fluide pour l'utilisateur.
  • Utilisez les transitions et les animations de votre choix pour parvenir à cet effet.
  • Les transitions ne seront pas toutes identiques.

Voici un exemple de trame :

  • Loader (3 secondes fixes pour l'instant, logique à implémenter par la suite)
  • Transition d'ouverture
    • Page d'accueil
  • Transition
    • Page de sélection du personnage
  • Transition du hors-jeu vers le jeu (ex: passage par un écran noir, comme un jeu vidéo - soyez inventifs !)
    • Phase 1
  • Transition de phase
    • Phase 2
  • Transition de phase
    • Phase 3
  • Transition du jeu vers le hors-jeu
    • Page de victoire ou d'échec

Semaine 2 : À venir

Proposez vos idées de fonctionnalités pour la semaine 2 et votez pour celles des autres sur ce sondage collaboratif.

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • CSS 53.2%
  • JavaScript 20.4%
  • Vue 15.0%
  • HTML 11.4%