@windward/games 0.0.9 → 0.1.0

package/components/content/blocks/matchingGame/MatchingGame.vue

@@ -1,10 +1,10 @@
 <template>
-    <div class="background">
+    <div>
         <div>
             <h3
                 :aria-label="
                     $t(
-                        'plugin.games.components.content.blocks.matching_game.match_game_title'
+                        'windward.games.components.content.blocks.matching_game.match_game_title'
                     )
                 "
                 tabindex="0"
@@ -18,7 +18,7 @@
             <p tabindex="0">
                 {{
                     $t(
-                        'plugin.games.components.content.blocks.matching_game.description'
+                        'windward.games.components.content.blocks.matching_game.description'
                     )
                 }}
             </p>
@@ -31,7 +31,7 @@
                         feedback
                             ? feedback
                             : $t(
-                                  'plugin.games.components.content.blocks.bucket_game.form.feedback.feedback_here'
+                                  'windward.games.components.content.blocks.bucket_game.form.feedback.feedback_here'
                               )
                     }}</v-col>
                     <v-col class="d-flex justify-end pl-4">
@@ -40,8 +40,16 @@
                             class="success mr-5"
                             @click="onContinueGame"
                             >{{ $t('shared.forms.continue') }}
-                        </v-btn></v-col
-                    >
+                        </v-btn>
+                        <v-container
+                            v-if="status === 'errorOutline'"
+                            class="d-flex justify-end"
+                            @click="onExitFeedback"
+                            ><v-icon class="icon--error"
+                                >mdi-close-circle</v-icon
+                            >
+                        </v-container>
+                    </v-col>
                 </v-row>
                 <br />
             </v-container>
@@ -49,8 +57,8 @@
                 <v-container>
                     <v-row>
                         <draggable
-                            class="d-flex justify-space-between flex-wrap col-md-12"
                             v-bind="dragOptions"
+                            class="d-flex justify-space-between flex-wrap col-md-12"
                             :list="block.metadata.config.answerObjects"
                             :disabled="!allowDrag"
                             :group="{
@@ -69,7 +77,7 @@
                                 tile
                                 color="primary"
                             >
-                                <v-icon>mdi-gesture-tap-hold</v-icon>
+                                <v-icon>mdi-drag-vertical</v-icon>
                                 <span>
                                     {{ answer.display }}
                                 </span>
@@ -77,8 +85,8 @@
                         </draggable>
                     </v-row>
                     <v-row
-                        class="d-flex flex-wrap flex-row justify-center flex-fill"
                         v-if="render"
+                        class="d-flex flex-wrap flex-row justify-center flex-fill"
                     >
                         <v-row align="center" class="col-md-12">
                             <v-card
@@ -154,17 +162,17 @@
                         </v-row>
                     </v-row>
                     <v-row
-                        class="d-flex flex-wrap flex-row justify-center flex-fill"
                         v-if="
                             !render && block.metadata.config.prompts.length > 0
                         "
+                        class="d-flex flex-wrap flex-row justify-center flex-fill"
                     >
                         <v-row align="center" class="col-md-12">
                             <v-card
                                 v-if="
                                     !block.metadata.config.prompts[
                                         startingIndex
-                                    ]['toggle']
+                                    ][startingIndex].toggle
                                 "
                                 class="pa-2 flex-fill bucket"
                                 min-height="5em"
@@ -174,13 +182,8 @@
                             >
                                 <v-card-text class="text-center">
                                     <draggable
-                                        class="dragArea list-group"
-                                        :key="
-                                            block.metadata.config.prompts[
-                                                startingIndex
-                                            ]['prompt']
-                                        "
                                         v-bind="dragOptions"
+                                        class="dragArea list-group"
                                         disabled
                                         group="people"
                                         tabindex="0"
@@ -192,7 +195,7 @@
                                             {{
                                                 block.metadata.config.prompts[
                                                     startingIndex
-                                                ]['prompt']
+                                                ][startingIndex].prompt
                                             }}
                                         </div>
                                     </draggable>
@@ -204,7 +207,10 @@
                                 v-if="
                                     block.metadata.config.prompts[
                                         startingIndex
-                                    ]['file']
+                                    ][startingIndex].toggle &&
+                                    block.metadata.config.prompts[
+                                        startingIndex
+                                    ][startingIndex].file
                                 "
                                 class="pa-2 flex-fill bucket"
                                 min-height="5em"
@@ -213,13 +219,13 @@
                             >
                                 <v-card-text>
                                     <draggable
+                                        v-bind="dragOptions"
                                         class="dragArea list-group"
                                         :key="
                                             block.metadata.config.prompts[
                                                 startingIndex
                                             ]['prompt']
                                         "
-                                        v-bind="dragOptions"
                                         disabled
                                         group="people"
                                         tabindex="0"
@@ -228,33 +234,36 @@
                                             :id="
                                                 block.metadata.config.prompts[
                                                     startingIndex
-                                                ]['file']['asset']['public_url']
+                                                ][startingIndex].file.asset
+                                                    .public_url
                                             "
                                         >
                                             <v-img
                                                 v-if="
                                                     block.metadata.config
                                                         .prompts[startingIndex][
-                                                        'file'
-                                                    ]
+                                                        startingIndex
+                                                    ]['file']
                                                 "
                                                 :aria-describedby="
                                                     block.metadata.config
                                                         .prompts[startingIndex][
-                                                        'ariaDescribedBy'
-                                                    ]
+                                                        startingIndex
+                                                    ]['ariaDescribedBy']
                                                 "
                                                 :alt="
                                                     block.metadata.config
                                                         .prompts[startingIndex][
-                                                        'altText'
-                                                    ]
+                                                        startingIndex
+                                                    ]['altText']
                                                 "
                                                 :src="
                                                     block.metadata.config
                                                         .prompts[startingIndex][
-                                                        'file'
-                                                    ]['asset']['public_url']
+                                                        startingIndex
+                                                    ]['file']['asset'][
+                                                        'public_url'
+                                                    ]
                                                 "
                                             ></v-img>
                                         </div>
@@ -275,7 +284,7 @@
                                     tabindex="0"
                                     :aria-label="
                                         $t(
-                                            'plugin.games.components.content.blocks.matching_game.of_complete',
+                                            'windward.games.components.content.blocks.matching_game.of_complete',
                                             [
                                                 completedAmount,
                                                 totalAmountQuestions,
@@ -286,7 +295,7 @@
                                     <v-col align="end" tabindex="0">
                                         {{
                                             $t(
-                                                'plugin.games.components.content.blocks.matching_game.of_complete_text_area',
+                                                'windward.games.components.content.blocks.matching_game.of_complete_text_area',
                                                 [
                                                     completedAmount,
                                                     totalAmountQuestions,
@@ -294,11 +303,12 @@
                                             )
                                         }}
                                         <v-progress-linear
+                                            v-model="completedPercent"
                                             color="primary"
                                             outlined
-                                            v-model="completedPercent"
                                             rounded
                                             height="15"
+                                            style="pointer-events: none"
                                         ></v-progress-linear>
                                         <br />
                                         <v-btn
@@ -307,7 +317,7 @@
                                             @click="onReset"
                                             >{{
                                                 $t(
-                                                    'plugin.games.components.content.blocks.matching_game.reset'
+                                                    'windward.games.components.content.blocks.matching_game.reset'
                                                 )
                                             }}
                                         </v-btn>
@@ -342,16 +352,22 @@ export default {
             this.block.metadata.config = {}
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.title = ''
+            this.block.metadata.config.title = this.$t(
+                'windward.games.components.settings.matching_game.form.title'
+            )
         }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''
         }
         if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
-            this.block.metadata.config.feedback_correct = ''
+            this.block.metadata.config.feedback_correct = this.$t(
+                'windward.games.components.settings.bucket_game.form.feedback.correct_default'
+            )
         }
         if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
-            this.block.metadata.config.feedback_incorrect = ''
+            this.block.metadata.config.feedback_incorrect = this.$t(
+                'windward.games.components.settings.bucket_game.form.feedback.incorrect_default'
+            )
         }
         if (_.isEmpty(this.block.metadata.config.prompts)) {
             this.block.metadata.config.prompts = []
@@ -370,10 +386,10 @@ export default {
             return _.flatten(this.solvedQuestions).length
         },
         completedPercent() {
-            if (this.block.metadata.config.prompts.length > 0) {
+            if (this.flattenedPrompts.length > 0) {
                 return (
                     (this.solvedQuestions.length /
-                        this.block.metadata.config.prompts.length) *
+                        this.flattenedPrompts.length) *
                     100
                 )
             }
@@ -386,9 +402,8 @@ export default {
     data() {
         return {
             feedback: this.$t(
-                'plugin.games.components.content.blocks.matching_game.default_feedback'
+                'windward.games.components.content.blocks.matching_game.default_feedback'
             ),
-            toggle: false,
             gameCompleted: false,
             shufflePrompts: [],
             solvedQuestions: [],
@@ -404,9 +419,10 @@ export default {
                     name: '',
                 },
                 prompt: '',
+                toggle: false,
             },
-            editedPrompt: {},
             startingIndex: 0,
+            flattenedPrompts: '',
         }
     },
     watch: {
@@ -415,8 +431,13 @@ export default {
                 this.onReset()
             }
         },
+        value(newValue) {
+            this.flattenedPrompts = _.flatten(newValue.metadata.config.prompts)
+        },
     },
     mounted() {
+        // flatten nested prompts
+        this.flattenedPrompts = _.flatten(this.block.metadata.config.prompts)
         this.setMainPrompt()
     },
     methods: {
@@ -437,10 +458,9 @@ export default {
             return array
         },
         setMainPrompt() {
-            if (this.block.metadata.config.prompts.length !== 0) {
-                this.shufflePrompts = _.cloneDeep(
-                    this.block.metadata.config.prompts
-                )
+            const holder = this.block.metadata.config.prompts.flat(1)
+            if (holder !== 0 && !_.isEmpty(holder)) {
+                this.shufflePrompts = _.cloneDeep(holder)
                 this.shufflePrompts = this.shuffle(this.shufflePrompts)
                 this.mainPrompt = this.shufflePrompts.shift()
             }
@@ -452,25 +472,40 @@ export default {
             }
             let draggedElement = ''
             let target = ''
-            if (this.mainPrompt.toggle === false) {
+            if (
+                this.mainPrompt.toggle === false ||
+                !_.isBoolean(this.mainPrompt.toggle)
+            ) {
                 draggedElement =
                     this.block.metadata.config.answerObjects[evt.oldIndex]
-                target = this.block.metadata.config.prompts.find((element) => {
-                    return (
-                        element.prompt == evt.to.firstChild.textContent.trim()
-                    )
+                this.block.metadata.config.prompts.forEach((outerElement) => {
+                    const getMain = outerElement.find((element) => {
+                        return (
+                            element.prompt ==
+                            evt.to.firstChild.textContent.trim()
+                        )
+                    })
+                    if (getMain) {
+                        target = getMain
+                    }
                 })
             } else {
                 draggedElement =
                     this.block.metadata.config.answerObjects[evt.oldIndex]
-                target = this.block.metadata.config.prompts.find((element) => {
-                    return (
-                        element.file?.asset.public_url ==
-                        evt.to.firstElementChild.id
-                    )
+                this.block.metadata.config.prompts.forEach((outerElement) => {
+                    const mainElement = outerElement.find((element) => {
+                        return (
+                            element.file?.asset.public_url ==
+                            evt.to.firstElementChild.id
+                        )
+                    })
+                    if (mainElement) {
+                        target = mainElement
+                    }
                 })
             }
-            if (_.isUndefined(target)) {
+            if (_.isUndefined(target) || _.isEmpty(target)) {
+                console.log('dragged to nowhere')
             } else if (draggedElement.id !== target.answer.id) {
                 this.feedback = this.block.metadata.config.feedback_incorrect
                 this.status = 'errorOutline'
@@ -480,17 +515,23 @@ export default {
                 this.status = 'successOutline'
                 this.allowDrag = false
                 if (
-                    this.solvedQuestions.length ===
-                    this.block.metadata.config.prompts.length
+                    this.solvedQuestions.length === this.flattenedPrompts.length
                 ) {
                     this.feedback = this.$t(
-                        'plugin.games.components.content.blocks.matching_game.congratulations_feedback'
+                        'windward.games.components.content.blocks.matching_game.congratulations_feedback'
                     )
                     this.gameCompleted = true
                     this.status = 'default'
                 }
             }
         },
+        onExitFeedback() {
+            this.status = 'default'
+            this.allowDrag = true
+            this.feedback = this.$t(
+                'windward.games.components.content.blocks.matching_game.default_feedback'
+            )
+        },
         onContinueGame() {
             if (!this.render) {
                 this.startingIndex = this.startingIndex + 1
@@ -499,7 +540,7 @@ export default {
             this.mainPrompt = this.shufflePrompts.shift()
             this.allowDrag = true
             this.feedback = this.$t(
-                'plugin.games.components.content.blocks.matching_game.default_feedback'
+                'windward.games.components.content.blocks.matching_game.default_feedback'
             )
         },
         onReset() {
@@ -510,7 +551,7 @@ export default {
             this.gameCompleted = false
             this.allowDrag = true
             this.feedback = this.$t(
-                'plugin.games.components.content.blocks.matching_game.default_feedback'
+                'windward.games.components.content.blocks.matching_game.default_feedback'
             )
             this.setMainPrompt()
         },
@@ -538,6 +579,9 @@ export default {
 .answerCard {
     min-width: 23%;
 }
+.icon--error {
+    color: var(--v-error-base);
+}
 @media (max-width: 1270px) {
     .answerCard {
         min-width: 30%;