@windward/games 0.0.1

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

@@ -0,0 +1,545 @@
+<template>
+    <div class="background">
+        <div>
+            <h1
+                :aria-label="
+                    $t(
+                        'plugin.games.components.content.blocks.matching_game.match_game_title'
+                    )
+                "
+                tabindex="0"
+            >
+                {{ block.metadata.config.title }}
+            </h1>
+
+            <p tabindex="0">
+                {{ block.metadata.config.instructions }}
+            </p>
+            <p tabindex="0">
+                {{
+                    $t(
+                        'plugin.games.components.content.blocks.matching_game.description'
+                    )
+                }}
+            </p>
+
+            <v-container fluid :class="status" class="pa-0">
+                <br />
+                <v-row>
+                    <v-col></v-col>
+                    <v-col class="d-flex justify-center">{{
+                        feedback
+                            ? feedback
+                            : $t(
+                                  'plugin.games.components.content.blocks.bucket_game.form.feedback.feedback_here'
+                              )
+                    }}</v-col>
+                    <v-col class="d-flex justify-end pl-4">
+                        <v-btn
+                            v-if="status === 'successOutline'"
+                            class="success mr-5"
+                            @click="onContinueGame"
+                            >{{ $t('shared.forms.continue') }}
+                        </v-btn></v-col
+                    >
+                </v-row>
+                <br />
+            </v-container>
+            <div>
+                <v-container>
+                    <v-row>
+                        <draggable
+                            class="d-flex justify-space-between flex-wrap col-md-12"
+                            v-bind="dragOptions"
+                            :list="block.metadata.config.answerObjects"
+                            :disabled="!allowDrag"
+                            :group="{
+                                name: 'people',
+                                pull: 'clone',
+                                put: false,
+                            }"
+                            @end="onEnd"
+                        >
+                            <v-card
+                                v-for="(answer, aindex) in block.metadata.config
+                                    .answerObjects"
+                                :key="aindex"
+                                class="pa-2 ma-2 answerCard"
+                                outlined
+                                tile
+                                color="primary"
+                            >
+                                <v-icon>mdi-gesture-tap-hold</v-icon>
+                                <span>
+                                    {{ answer.display }}
+                                </span>
+                            </v-card>
+                        </draggable>
+                    </v-row>
+                    <v-row
+                        class="d-flex flex-wrap flex-row justify-center flex-fill"
+                        v-if="render"
+                    >
+                        <v-row align="center" class="col-md-12">
+                            <v-card
+                                v-if="!mainPrompt['toggle']"
+                                class="flex-fill bucket"
+                                min-height="5em"
+                                outlined
+                                tile
+                                color="secondary"
+                            >
+                                <v-card-text class="text-center">
+                                    <draggable
+                                        class="dragArea list-group"
+                                        :key="mainPrompt['prompt']"
+                                        v-bind="dragOptions"
+                                        disabled
+                                        group="people"
+                                        tabindex="0"
+                                    >
+                                        <div
+                                            class="card_text secondary"
+                                            color="secondary"
+                                        >
+                                            {{ mainPrompt['prompt'] }}
+                                        </div>
+                                    </draggable>
+                                </v-card-text>
+                            </v-card>
+                        </v-row>
+                        <v-row align="center" class="col-md-10">
+                            <v-card
+                                v-if="mainPrompt['toggle']"
+                                class="pa-2 flex-fill bucket"
+                                min-height="5em"
+                                outlined
+                                tile
+                            >
+                                <v-card-text>
+                                    <draggable
+                                        class="dragArea list-group"
+                                        :key="mainPrompt['prompt']"
+                                        v-bind="dragOptions"
+                                        disabled
+                                        group="people"
+                                        tabindex="0"
+                                    >
+                                        <div
+                                            :id="
+                                                mainPrompt['file']['asset'][
+                                                    'public_url'
+                                                ]
+                                            "
+                                        >
+                                            <v-img
+                                                v-if="mainPrompt['file']"
+                                                :aria-describedby="
+                                                    mainPrompt[
+                                                        'ariaDescribedBy'
+                                                    ]
+                                                "
+                                                :alt="mainPrompt['altText']"
+                                                :src="
+                                                    mainPrompt['file']['asset'][
+                                                        'public_url'
+                                                    ]
+                                                "
+                                            ></v-img>
+                                        </div>
+                                    </draggable>
+                                </v-card-text>
+                            </v-card>
+                        </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
+                        "
+                    >
+                        <v-row align="center" class="col-md-12">
+                            <v-card
+                                v-if="
+                                    !block.metadata.config.prompts[
+                                        startingIndex
+                                    ]['toggle']
+                                "
+                                class="pa-2 flex-fill bucket"
+                                min-height="5em"
+                                outlined
+                                tile
+                                color="secondary"
+                            >
+                                <v-card-text class="text-center">
+                                    <draggable
+                                        class="dragArea list-group"
+                                        :key="
+                                            block.metadata.config.prompts[
+                                                startingIndex
+                                            ]['prompt']
+                                        "
+                                        v-bind="dragOptions"
+                                        disabled
+                                        group="people"
+                                        tabindex="0"
+                                    >
+                                        <div
+                                            class="card_text secondary"
+                                            color="secondary"
+                                        >
+                                            {{
+                                                block.metadata.config.prompts[
+                                                    startingIndex
+                                                ]['prompt']
+                                            }}
+                                        </div>
+                                    </draggable>
+                                </v-card-text>
+                            </v-card>
+                        </v-row>
+                        <v-row align="center" class="col-md-10">
+                            <v-card
+                                v-if="
+                                    block.metadata.config.prompts[
+                                        startingIndex
+                                    ]['file']
+                                "
+                                class="pa-2 flex-fill bucket"
+                                min-height="5em"
+                                outlined
+                                tile
+                            >
+                                <v-card-text>
+                                    <draggable
+                                        class="dragArea list-group"
+                                        :key="
+                                            block.metadata.config.prompts[
+                                                startingIndex
+                                            ]['prompt']
+                                        "
+                                        v-bind="dragOptions"
+                                        disabled
+                                        group="people"
+                                        tabindex="0"
+                                    >
+                                        <div
+                                            :id="
+                                                block.metadata.config.prompts[
+                                                    startingIndex
+                                                ]['file']['asset']['public_url']
+                                            "
+                                        >
+                                            <v-img
+                                                v-if="
+                                                    block.metadata.config
+                                                        .prompts[startingIndex][
+                                                        'file'
+                                                    ]
+                                                "
+                                                :aria-describedby="
+                                                    block.metadata.config
+                                                        .prompts[startingIndex][
+                                                        'ariaDescribedBy'
+                                                    ]
+                                                "
+                                                :alt="
+                                                    block.metadata.config
+                                                        .prompts[startingIndex][
+                                                        'altText'
+                                                    ]
+                                                "
+                                                :src="
+                                                    block.metadata.config
+                                                        .prompts[startingIndex][
+                                                        'file'
+                                                    ]['asset']['public_url']
+                                                "
+                                            ></v-img>
+                                        </div>
+                                    </draggable>
+                                </v-card-text>
+                            </v-card>
+                        </v-row>
+                    </v-row>
+                    <v-container
+                        class="d-flex flex-wrap flex-row justify-center flex-fill"
+                        align="end"
+                    >
+                        <v-layout>
+                            <v-flex xs8></v-flex>
+                            <v-flex xs4>
+                                <v-row
+                                    align="end"
+                                    tabindex="0"
+                                    :aria-label="
+                                        $t(
+                                            'plugin.games.components.content.blocks.matching_game.of_complete',
+                                            [
+                                                completedAmount,
+                                                totalAmountQuestions,
+                                            ]
+                                        )
+                                    "
+                                >
+                                    <v-col align="end" tabindex="0">
+                                        {{
+                                            $t(
+                                                'plugin.games.components.content.blocks.matching_game.of_complete_text_area',
+                                                [
+                                                    completedAmount,
+                                                    totalAmountQuestions,
+                                                ]
+                                            )
+                                        }}
+                                        <v-progress-linear
+                                            color="primary"
+                                            outlined
+                                            v-model="completedPercent"
+                                            rounded
+                                            height="15"
+                                        ></v-progress-linear>
+                                        <br />
+                                        <v-btn
+                                            color="primary"
+                                            outlined
+                                            @click="onReset"
+                                            >{{
+                                                $t(
+                                                    'plugin.games.components.content.blocks.matching_game.reset'
+                                                )
+                                            }}
+                                        </v-btn>
+                                    </v-col>
+                                </v-row>
+                            </v-flex>
+                        </v-layout>
+                    </v-container>
+                </v-container>
+            </div>
+        </div>
+        <br />
+    </div>
+</template>
+<script>
+import _ from 'lodash'
+import draggable from 'vuedraggable'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+
+export default {
+    name: 'MatchingGame',
+    components: { draggable },
+    extends: BaseContentBlock,
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        if (_.isEmpty(this.block.metadata)) {
+            this.block.metadata = {}
+        }
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = {}
+        }
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.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 = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
+            this.block.metadata.config.feedback_incorrect = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.prompts)) {
+            this.block.metadata.config.prompts = []
+        }
+        if (_.isEmpty(this.block.metadata.config.answerObjects)) {
+            this.block.metadata.config.answerObjects = []
+        }
+    },
+    computed: {
+        dragOptions() {
+            return {
+                animation: 200,
+            }
+        },
+        completedAmount() {
+            return _.flatten(this.solvedQuestions).length
+        },
+        completedPercent() {
+            if (this.block.metadata.config.prompts.length > 0) {
+                return (
+                    (this.solvedQuestions.length /
+                        this.block.metadata.config.prompts.length) *
+                    100
+                )
+            }
+            return 0
+        },
+        totalAmountQuestions() {
+            return _.flatten(this.block.metadata.config.prompts).length
+        },
+    },
+    data() {
+        return {
+            feedback: this.$t(
+                'plugin.games.components.content.blocks.matching_game.default_feedback'
+            ),
+            toggle: false,
+            gameCompleted: false,
+            shufflePrompts: [],
+            solvedQuestions: [],
+            status: 'default',
+            allowDrag: true,
+            mainPrompt: {},
+            editedPrompt: {},
+            startingIndex: 0,
+        }
+    },
+    watch: {
+        render(newVal) {
+            if (newVal === true) {
+                this.onReset()
+            }
+        },
+    },
+    mounted() {
+        this.setMainPrompt()
+    },
+    methods: {
+        shuffle(array) {
+            let currentIndex = array.length,
+                randomIndex
+            // While there remain elements to shuffle.
+            while (currentIndex !== 0) {
+                // Pick a remaining element.
+                randomIndex = Math.floor(Math.random() * currentIndex)
+                currentIndex--
+                // And swap it with the current element.
+                ;[array[currentIndex], array[randomIndex]] = [
+                    array[randomIndex],
+                    array[currentIndex],
+                ]
+            }
+            return array
+        },
+        setMainPrompt() {
+            if (this.block.metadata.config.prompts.length !== 0) {
+                this.shufflePrompts = _.cloneDeep(
+                    this.block.metadata.config.prompts
+                )
+                this.shufflePrompts = this.shuffle(this.shufflePrompts)
+                this.mainPrompt = this.shufflePrompts.shift()
+            }
+        },
+        onEnd(evt, originalEvent) {
+            if (!this.render) {
+                this.mainPrompt =
+                    this.block.metadata.config.prompts[this.startingIndex]
+            }
+            let draggedElement = ''
+            let target = ''
+            if (this.mainPrompt.toggle === false) {
+                draggedElement =
+                    this.block.metadata.config.answerObjects[evt.oldIndex]
+                target = this.block.metadata.config.prompts.find((element) => {
+                    return (
+                        element.prompt == evt.to.firstChild.textContent.trim()
+                    )
+                })
+            } 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
+                    )
+                })
+            }
+            if (_.isUndefined(target)) {
+            } else if (draggedElement.id !== target.answer.id) {
+                this.feedback = this.block.metadata.config.feedback_incorrect
+                this.status = 'errorOutline'
+            } else if (draggedElement.id === target.answer.id) {
+                this.feedback = this.block.metadata.config.feedback_correct
+                this.solvedQuestions.push(target)
+                this.status = 'successOutline'
+                this.allowDrag = false
+                if (
+                    this.solvedQuestions.length ===
+                    this.block.metadata.config.prompts.length
+                ) {
+                    this.feedback = this.$t(
+                        'plugin.games.components.content.blocks.matching_game.congratulations_feedback'
+                    )
+                    this.gameCompleted = true
+                    this.status = 'default'
+                }
+            }
+        },
+        onContinueGame() {
+            if (!this.render) {
+                this.startingIndex = this.startingIndex + 1
+            }
+            this.status = 'default'
+            this.mainPrompt = this.shufflePrompts.shift()
+            this.allowDrag = true
+            this.feedback = this.$t(
+                'plugin.games.components.content.blocks.matching_game.default_feedback'
+            )
+        },
+        onReset() {
+            this.shufflePrompts = []
+            this.startingIndex = 0
+            this.status = 'default'
+            this.solvedQuestions = []
+            this.gameCompleted = false
+            this.allowDrag = true
+            this.feedback = this.$t(
+                'plugin.games.components.content.blocks.matching_game.default_feedback'
+            )
+            this.setMainPrompt()
+        },
+    },
+}
+</script>
+<style scoped>
+.bucket {
+    line-height: 1.1em;
+    padding: 0.5em;
+    box-shadow: 0px 2px 3px #0000004a;
+    transition: 0.5s box-shadow;
+}
+.successOutline {
+    border: 4px solid var(--v-success-base);
+    color: var(--v-success-base);
+}
+.errorOutline {
+    border: 4px solid var(--v-error-base);
+    color: var(--v-error-base);
+}
+.card_text {
+    font-size: large;
+}
+.answerCard {
+    min-width: 23%;
+}
+@media (max-width: 1270px) {
+    .answerCard {
+        min-width: 30%;
+    }
+}
+@media (max-width: 900px) {
+    .answerCard {
+        min-width: 40%;
+    }
+}
+@media (max-width: 610px) {
+    .answerCard {
+        min-width: 95%;
+    }
+}
+</style>