From 0861db66ca50aab75510c9f4db5fcfee39bacaca Mon Sep 17 00:00:00 2001
From: Guy Davidson <guydav@gmail.com>
Date: Wed, 8 Nov 2023 18:07:03 -0500
Subject: [PATCH] Added the logic to cycle through games

---
 package.json                                  |  1 +
 .../molecules/SingleGameExtendedJudgment.vue  | 25 ++++++++++++++----
 src/components/pages/Task1Page.vue            | 26 ++++++++++++++++---
 3 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/package.json b/package.json
index 888f047..7ea1b68 100644
--- a/package.json
+++ b/package.json
@@ -22,6 +22,7 @@
     "css-watch": "npm run css-build -- --watch"
   },
   "dependencies": {
+    "@formkit/core": "^1.0.0-beta.9",
     "@formkit/themes": "^1.0.0-beta.9",
     "@formkit/vue": "^1.0.0-beta.9",
     "@fortawesome/fontawesome-svg-core": "^6.1.1",
diff --git a/src/components/molecules/SingleGameExtendedJudgment.vue b/src/components/molecules/SingleGameExtendedJudgment.vue
index 7810f1e..5b90b2e 100644
--- a/src/components/molecules/SingleGameExtendedJudgment.vue
+++ b/src/components/molecules/SingleGameExtendedJudgment.vue
@@ -3,10 +3,9 @@ import { useRouter, useRoute, stringifyQuery } from 'vue-router'
 import useTimelineStepper from '@/composables/timelinestepper'
 import useSmileStore from '@/stores/smiledata' // get access to the global store
 import GameTextDisplay from '@/components/atoms/GameTextDisplay.vue';
-import LikertRadioInput from '@/components/atoms/LikertRadioInput.vue';
 
-import bulmaSlider from 'bulma-slider/dist/js/bulma-slider';
-import { ref, reactive, computed } from 'vue';
+import { ref, reactive, computed, watch } from 'vue';
+import { reset } from '@formkit/core';
 
 // const router = useRouter()
 // const route = useRoute()
@@ -75,6 +74,7 @@ const answers = reactive(Object.fromEntries(JUDGEMENT_QUESTIONS.map((question) =
 answers['reasoning-low'] = '';
 answers['reasoning-high'] = '';
 
+
 const complete = computed(() => Object.keys(answers).every((key) => answers[key] !== '' && answers[key] !== 0));
 
 defineExpose({
@@ -88,6 +88,19 @@ const props = defineProps({
     game: String
 })
 
+// When the game changes, reset the answers
+watch(() => props.game, (prevGame, nextGame) => {
+    if (prevGame !== nextGame) {
+        // console.log('game changed, resetting answers');
+        // console.log(answers);
+        // console.log(answers.value);
+        // Object.keys(answers).forEach((key) => {
+        //     answers[key] = '';
+        // });
+        reset('single-game-extended-judgement-form');
+    }
+});
+
 function range(start, end) {
     const length = end - start;
     return Array.from({ length }, (_, i) => start + i);
@@ -99,7 +112,8 @@ function specifyOptions(spec) {
             if (i === 0) {
                 return {label: '', value: '', attrs: {disabled: true}};
             }
-            return {label: `(${i})`, value: i};
+            // return {label: `(${i})`, value: i};
+            return {label: i, value: i};
         });
     }
 
@@ -112,7 +126,8 @@ function specifyOptions(spec) {
                 return {label: '', value: '', attrs: {disabled: true}};
             }
 
-            const label = i in spec ? `(${i}) ${spec[i]}` : `(${i})`;
+            // const label = i in spec ? `(${i}) ${spec[i]}` : `(${i})`;
+            const label = i in spec ? `${i} - ${spec[i]}` : i;
             return {label, value: i};; 
         });
     }
diff --git a/src/components/pages/Task1Page.vue b/src/components/pages/Task1Page.vue
index b1c9505..b5b16b5 100644
--- a/src/components/pages/Task1Page.vue
+++ b/src/components/pages/Task1Page.vue
@@ -18,17 +18,34 @@ if (route.meta.progress) smilestore.global.progress = route.meta.progress
 
 smilestore.loadGamesData();
 const gamesData = smilestore.getGamesData;
-const gameData = gamesData.games[0];
 
+function sampleGames() {
+    const { games } = gamesData;
+    // TODO: sample games, using a random seed, balanced by conditions
+    // TODO: # of real/model created, MAP-Elites bins, etc.?
+    return games;
+    
+}
+
+const participantGames = sampleGames();
+const gameIndex = ref(0);
 
 
 function finish(goto) { 
+    console.log(`finish called with game index ${gameIndex.value}`);
     // smilestore.saveData()
     smilestore.recordSingleGameResults({
-        id: gameData.id,
+        id: participantGames[gameIndex.value].id,
+        // TODO: Any other information we need to add here?
         ...judgementRef.value.answers,
     });
-    if(goto) router.push(goto)
+
+    if (gameIndex.value < participantGames.length - 1) {
+        gameIndex.value += 1;
+    } else {
+        smilestore.saveData();
+        if (goto) router.push(goto);
+    }
 }
 
 watchEffect(() => {
@@ -43,9 +60,10 @@ watchEffect(() => {
 
 <template>
     <div class="page">
+        <!-- TODO: change title to something more helpful (e.g. game X/N?) -->
         <h1 class="title is-3">Task 1</h1>
         
-        <SingleGameExtendedJudgment :game="gameData.text" ref="judgementRef"></SingleGameExtendedJudgment>
+        <SingleGameExtendedJudgment :game="participantGames[gameIndex].text" ref="judgementRef"></SingleGameExtendedJudgment>
 
         <button class="button is-success is-light" id='finish' :disabled="isDisabled" @click="finish(next())">next &nbsp;<FAIcon icon="fa-solid fa-arrow-right" /></button>
     </div>