Cours 11.2 PHASE INTERACTIVITÉ

Vendredi 14 novembre

Rappel important! Vue 3, version Option API

Vous codez avec la version Vue 3 et surtout vous rappeler qu'on utilise présentement l'Options API.

Dans le cadre de ce cours, n'oubliez pas de toujours consulter la docmentation avec l'API Options

N'allez surtout pas trouver des codes n'importe où sans vous rappeler de cette information importante.

Retour sur routes

Routes entre les différentes views (pages)

Exercice Routes

• Pour les étudiants de Trace ton chemin

  • Exercice des routes parmi les chapitres
  • Solution: vous pourrez partir de cet exercice pour débuter le routage dans votre projet

• Pour les étudiants de Mémoires interactives
  • Exercice des routes parmi les salles
  • Solution: vous pourrez partir de cet exercice pour débuter le routage dans votre projet

Cours: Pinia

Pinia une bibliothèque (store) de gestion d'état pour les application Vue.js

Pinia: bibliothèque (store)

Procédure pour charger les données initiales des chapitres/mémoires/salles du json dans le store Pinia

Procédure pour charger les données initiales des chapitres du json dans le store

Rappel JavaScript: Les méthodes de l'objet Array en JavaScript

• Notes de cours sur l'objet Array

• Liste complète des méthodes de l'objet Array sur w3School

Exemples:

• length
• push()
• sort()
• slice()
• splice()
• findIndex()
• reduce()
• find()
• shift()
• pop()
• concat()

Travail en classe et DEVOIR: Mise en place de stores Pinia pour votre projet

En plus du travail de cours précédents (cours 10.2 et 11.1), voici ce qui s'ajoute:

Configuration de stores pour le projet App web créative

Pour Mémoires interactives

Structure des stores suggérée:

1. museum

   • State (équivalent de data()):
     • rooms // contient la liste des salles
     • currentRoomId
     • museumName
     • theme
   • Actions (équivalent de methods):
     • addRoom() (optionnel car certains projets ne le permettent pas)
     • updateRoom()
     • deleteRoom()
     • setCurrentRoom()

2. memory

   • State (équivalent de data()):
     • memories // contient la liste des mémoires
     • filters
     • searchQuery
   • Actions (équivalent de methods):
     • addMemory()
     • updateMemory()
     • deleteMemory()
     • searchMemories()
   • Getters (équilavent de computed):
     • filteredMemories
     • memoriesByRoom
     • memoriesByTag

Checklist Mémoires interactives

• Création des 2 stores obligatoires:
  • museum.js (structure de base)
  • memory.js (structure de base)

• Développement des composants clés qui utilisent les stores:

  • RoomCard.vue (carte de salle)
  • MemoryCard.vue (carte de mémoire)
  • MemoryList.vue (grille de mémoires)

Pour Trace ton chemin

Structure des stores suggérée:

1. story (le plus important du projet)

   • State (équivalent de data()):
     • currentChapterId
     • visitedChapters
     • storyData // contient les données des chapitres chargé à partir du json
     • availableChoices
   • Actions (équivalent de methods):
     • loadChapter()
     • makeChoice()
     • goToChapter()
   • Getters (équilavent de computed):
     • currentChapter
     • isChapterUnlocked()

2. player (commencez simple d'abord, juste avec le nom)

   • State (équivalent de data()):
     • playerName
     • karma
     • stats
     • inventory
     • flags
     • `relationships
   • Actions (équivalent de methods):
     • addToInventory()
     • updateStat()
     • setFlag()
     • updateRelationship()
   • Getters (équilavent de computed):
     • hasItem()
     • getRelationship()
     • canAccessEnding()

3. save

   • State (équivalent de data()):
     • saveSlots (array de 3 slots)
   • Actions (équivalent de methods):
     • saveGame()
     • loadGame()
     • deleteSave()
     • getSaveInfo()
   • Getters (équilavent de computed):
     • hasSaves
     • latestSave

4. audio (optionnel)

   • State (équivalent de data()):
     • currentMusic
     • soundEffects
     • volume
     • isMuted
   • Actions (équivalent de methods):
     • playMusic()
     • playSound()
     • toggleMute()
     • setVolume()

Checklist Trace ton chemin

• Création des 2 premier stores:
  • story.js (chapitres, navigation)
  • player.js (état du joueur, commencez réalistement, juste avec son nom)

• Création du fichier JSON avec les chapitres

• Développement des composants clés qui utilisent les stores:
  • ChoiceButton.vue (bouton de choix)
  • ChoicePanel.vue (panel de choix)