ajouter modes

science-quest/src/components/jeux/kahoot/KahootPartie.vue

@@ -5,17 +5,27 @@ export default {
         return {
 			codePartie: this.$route.params.code ?? -1,
 			//unix timestamp pour indiquer la date limite pour repondre a la question, -1 indiquera la fin de la partie
-			dateFinDeLaQuestion:0,
+			tempsLimite:0,
 			compteARebours:0,
 			compteAReboursId:0, //id donné par le setInterval pour pouvoir l'arreter quand il est a 0
 
-			//note au back : l'API devra renvoyer les scores comme si c'etait une question avec une seule (ou 0) réponse
+			modes:{
+				question:true, //afficher la question
+				score:false, //afficher les scores
+				salleAttente:false, //afficher la salle d'attente (ecran avec pseudos)
+			},
+
+			//variables pour mode question
 			question:"",
-			//0-1 reponse = notification (bouton OK, par ex: afficher les scores, leaderboard etc...), 2-4 réponses = réponses a la question
 			reponses:[],
+			//variables pour la salle d'attente
+			nomJoueurs:[],
+			//variables pour les scores
+			leaderboard:[],
+			score:0,
+			pointsGagne:0,
 
-			//DEBUG/STUB variables temporaire pour remplacer l'API
-			DEBUG_obtenirQuestion:null
+			DEBUG_temps:1000,
 		}
 	},
 	mounted(){
@@ -23,55 +33,83 @@ export default {
 	},
 	methods:{
 		obtenirQuestion(){
-			// DEBUG : alterner entre question et score
-			if(this.DEBUG_obtenirQuestion==this.DEBUG_obtenirQuestionNormale){
-				this.DEBUG_obtenirQuestion=this.DEBUG_obtenirQuestionScore
-			} else {
-				this.DEBUG_obtenirQuestion=this.DEBUG_obtenirQuestionNormale
-			}
+			this.resetModes() //cacher le mode precedent
 			this.DEBUG_obtenirQuestion().then(response=>{
+				//afficher ce mode
+				this.modes.question=true
+
 				this.question=response.question
 				this.reponses=response.reponses
-				this.dateFinDeLaQuestion=response.tempsLimite
-				if(this.dateFinDeLaQuestion!=-1){
+				this.tempsLimite=response.tempsLimite
+				if(this.tempsLimite!=-1){
+					//executer la fonction en boucle jusqu'a ce que la partie se termine
+					window.setTimeout(this.obtenirScores,(this.tempsLimite+100)-Date.now())
+					//demarrer le compte a rebours
+					this.compteAReboursId=window.setInterval(this.calculerCompteARebours,22)
+				}
+			}
+			)
+		},
+		obtenirScores(){
+			this.resetModes() //cacher le mode precedent
+			this.DEBUG_obtenirScore().then(response=>{
+				//afficher ce mode
+				this.modes.score=true
+
+				this.leaderboard=response.leaderboard
+				this.score=response.score
+				this.pointsGagne=response.pointsGagne
+				this.tempsLimite=response.tempsLimite
+				if(this.tempsLimite!=-1){
 					//executer la fonction en boucle jusqu'a ce que la partie se termine
-					window.setTimeout(this.obtenirQuestion,(this.dateFinDeLaQuestion+100)-Date.now())
+					window.setTimeout(this.obtenirQuestion,(this.tempsLimite+100)-Date.now())
 					//demarrer le compte a rebours
 					this.compteAReboursId=window.setInterval(this.calculerCompteARebours,22)
 				}
 			}
 			)
 		},
+		obtenirSalleAttente(){
+			this.resetModes() //cacher le mode precedent
+			//afficher ce mode
+			this.modes.salleAttente=true
+
+		},
 		repondre(reponse){
 			this.question=`Réponse "${reponse}" envoyée`
 			this.reponses=[]
 		},
 		calculerCompteARebours(){
-			if(this.dateFinDeLaQuestion<Date.now()){
+			if(this.tempsLimite<Date.now()){
 				//si il reste plus de temps
 				this.compteARebours=0
 				//arreter le compte a rebours
 				window.clearInterval(this.compteAReboursId)
 				return
 			}
-			this.compteARebours=((this.dateFinDeLaQuestion-Date.now())/1000).toFixed(2)
+			this.compteARebours=((this.tempsLimite-Date.now())/1000).toFixed(2)
+		},
+		
+		resetModes(){
+			Object.keys(this.modes).forEach(nomMode=>this.modes[nomMode]=0)
 		},
 		//simuler l'api
-		async DEBUG_obtenirQuestionNormale(){
+		async DEBUG_obtenirQuestion(){
 			return JSON.parse(`
 				{
 					"question":"Qui a reçu le prix Nobel de chimie en 1911, pour avoir réussi à isoler un gramme de radium ?",
 					"reponses":["Marie Curie","Einstein","Sophie Germain","Ada Lovelace"],
-					"tempsLimite":${Date.now()+10000 /* maintenant + 10 secondes pour repondre*/}
+					"tempsLimite":${Date.now()+this.DEBUG_temps /* maintenant + 10 secondes pour repondre*/}
 				}
 			`)
 		},
-		async DEBUG_obtenirQuestionScore(){
+		async DEBUG_obtenirScore(){
 			return JSON.parse(`
 				{
-					"question":"Score : 1337, *Top 1* Moi : 1337, *Top 2* Titouan : 320",
-					"reponses":[],
-					"tempsLimite":${Date.now()+10000 /* maintenant + 10 secondes le temps de regarder les scores*/}
+					"score":1337,
+					"pointsGagne":100,
+					"leaderboard":{"Moi":1337, "Titouan":320},
+					"tempsLimite":${Date.now()+this.DEBUG_temps /* maintenant + 10 secondes le temps de regarder les scores*/}
 				}
 			`)
 		}
@@ -82,8 +120,21 @@ export default {
 
 
 <template>
+	
 	<p>debug : code partie {{ codePartie }}</p>
+	<div v-show="modes.question">
+	<p>Temps : {{ compteARebours }}s</p>
+	<p>{{ question }}</p>
+	<button v-for="reponse in reponses" @click="repondre(reponse)">{{ reponse }}</button>
+	</div>
+	<div v-show="modes.score">
+	<p>Temps : {{ compteARebours }}s</p>
+	<h2>Votre score : {{ score }} (+{{ pointsGagne }})</h2>
+	<div></div>
+	</div>
+	<div v-show="modes.salleAttente">
 	<p>Temps : {{ compteARebours }}s</p>
 	<p>{{ question }}</p>
 	<button v-for="reponse in reponses" @click="repondre(reponse)">{{ reponse }}</button>
+	</div>
 </template>