Le site dont vous êtes le héros

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

Groupe

• Prénom & Nom
• Prénom & Nom

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

• Vue.js devtools pour Chrome, inspecteur vue
• Vue.js devtools pour Firefox, inspecteur vue
• Plugin vue pour VSCode, coloration syntaxique
• Plugin eslint pour VSCode, validation de code

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.