@windward/games 0.0.1

package/components/content/blocks/dragDrop/BucketGame.vue

@@ -0,0 +1,520 @@
+<template>
+    <div>
+        <div>
+            <h1 class="title" aria-label="bucket game title" tabindex="0">
+                {{ block.metadata.config.title }}
+            </h1>
+
+            <p tabindex="0">
+                {{ block.metadata.config.instructions }}
+            </p>
+            <h3 v-if="!render" class="d-flex justify-center align-center">
+                {{
+                    $t(
+                        'plugin.games.components.content.blocks.bucket_game.cannot'
+                    )
+                }}
+            </h3>
+            <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' ||
+                                status === 'errorOutline'
+                            "
+                            class="mr-5"
+                            :color="
+                                status == 'successOutline' ? 'success' : 'error'
+                            "
+                            @click="continueGame"
+                            >{{ $t('shared.forms.continue') }}
+                        </v-btn></v-col
+                    >
+                </v-row>
+                <br />
+            </v-container>
+            <div v-if="render">
+                <v-container>
+                    <draggable
+                        class="d-flex flex-wrap flex-row justify-center flex-fill"
+                        :list="mainAnswer"
+                        :disabled="!allow_drag"
+                        group="people"
+                        :move="onMoveCallback"
+                    >
+                        <v-row align="center" class="col-md-10">
+                            <v-card
+                                class="pa-2 flex-fill"
+                                outlined
+                                tile
+                                v-if="mainAnswer[0]"
+                            >
+                                <v-icon>mdi-drag-vertical</v-icon>
+
+                                <span class="text-justify">{{
+                                    mainAnswer[counter].display
+                                }}</span>
+                            </v-card>
+                        </v-row>
+                    </draggable>
+                    <br />
+
+                    <v-row
+                        class="d-flex flex-wrap flex-row justify-center flex-fill"
+                    >
+                        <v-row align="center" class="col-md-10">
+                            <v-card
+                                v-for="(bucket, bindex) in items"
+                                :key="'b-v-card-' + bindex"
+                                class="pa-2 flex-fill bucket"
+                                min-height="5em"
+                                outlined
+                                tile
+                                :color="
+                                    block.metadata.config.bucket_titles[bindex]
+                                        .color
+                                "
+                            >
+                                <v-card-text class="text-center">
+                                    <draggable
+                                        :key="'bucket - ' + bindex"
+                                        disabled
+                                        group="people"
+                                        v-model="items[bindex]"
+                                        @change="change($event, bindex)"
+                                        :move="checkMove"
+                                        tabindex="0"
+                                    >
+                                        <div class="card_text">
+                                            {{
+                                                block.metadata.config
+                                                    .bucket_titles[bindex].title
+                                            }}
+                                        </div>
+                                    </draggable></v-card-text
+                                >
+                            </v-card>
+                        </v-row>
+                    </v-row>
+                </v-container>
+            </div>
+        </div>
+        <div v-if="!render">
+            <v-container>
+                <draggable
+                    class="d-flex flex-wrap flex-row justify-center flex-fill"
+                    :list="block.metadata.config.bucket_answers[startingIndex]"
+                    disabled="true"
+                    group="people"
+                    :move="onMoveCallback"
+                >
+                    <v-row align="center" class="col-md-10">
+                        <v-card
+                            class="pa-2 flex-fill"
+                            outlined
+                            tile
+                            v-if="
+                                block.metadata.config.bucket_answers[
+                                    startingIndex
+                                ]
+                            "
+                        >
+                            <v-icon>mdi-drag-vertical</v-icon>
+
+                            <span class="text-justify">{{
+                                block.metadata.config.bucket_answers[
+                                    startingIndex
+                                ][startingIndex].display
+                            }}</span>
+                        </v-card>
+                    </v-row>
+                </draggable>
+                <br />
+
+                <v-row
+                    class="d-flex flex-wrap flex-row justify-center flex-fill"
+                >
+                    <v-row align="center" class="col-md-10">
+                        <v-card
+                            v-for="(bucket, bindex) in block.metadata.config
+                                .bucket_titles"
+                            :key="'b-v-card-' + bindex"
+                            class="pa-2 flex-fill bucket"
+                            min-height="5em"
+                            outlined
+                            tile
+                            :color="
+                                block.metadata.config.bucket_titles[bindex]
+                                    .color
+                            "
+                        >
+                            <v-card-text class="text-center">
+                                <draggable
+                                    :key="'bucket - ' + bindex"
+                                    disabled
+                                    group="people"
+                                    v-model="items[bindex]"
+                                    @change="change($event, bindex)"
+                                    tabindex="0"
+                                >
+                                    <div class="card_text">
+                                        {{
+                                            block.metadata.config.bucket_titles[
+                                                bindex
+                                            ].title
+                                        }}
+                                    </div>
+                                </draggable></v-card-text
+                            >
+                        </v-card>
+                    </v-row>
+                </v-row>
+            </v-container>
+        </div>
+        <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('shared.forms.reset') }}
+                            </v-btn>
+                        </v-col>
+                    </v-row>
+                </v-flex>
+            </v-layout>
+        </v-container>
+    </div>
+</template>
+<script>
+import draggable from 'vuedraggable'
+import _ from 'lodash'
+import CrudTable from '../../CrudTable'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+
+export default {
+    name: 'BucketGame',
+    components: { CrudTable, 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.bucket_titles)) {
+            this.block.metadata.config.bucket_titles = []
+        }
+        if (_.isEmpty(this.block.metadata.config.bucket_answers)) {
+            this.block.metadata.config.bucket_answers = []
+        }
+        if (_.isEmpty(this.block.body)) {
+            this.block.body = this.$t(
+                'plugin.games.components.content.blocks.bucket_game.game_title'
+            )
+        }
+    },
+    data() {
+        return {
+            saveState: false,
+            instructions: '',
+            feedback: '',
+            counter: 0,
+            headers: [
+                {
+                    text: 'Bucket display text',
+                    align: 'start',
+                    sortable: false,
+                    value: 'display',
+                    draggable: true,
+                },
+                { text: 'bucket value', value: 'value', sortable: false },
+                { text: 'feedback', value: 'feedback', sortable: false },
+            ],
+            default_item: {
+                id: 0,
+                value: '',
+                display_value: '',
+                feedback: '',
+            },
+            bucket_titles: [],
+            bucket_colors: [],
+            items: [],
+            dialogDelete: false,
+            bucketDeleteIndex: 0,
+            status: 'default',
+            allow_drag: true,
+            mainAnswer: [],
+            startingIndex: 0,
+        }
+    },
+    computed: {
+        completedAmount() {
+            if (this.items) {
+                return _.flatten(this.items).length
+            }
+        },
+        totalAmountQuestions() {
+            if (this.block.metadata.config.bucket_answers) {
+                return _.flatten(this.block.metadata.config.bucket_answers)
+                    .length
+            }
+        },
+        completedPercent() {
+            if (
+                this.block.metadata.config.bucket_answers.length > 0 &&
+                this.items.length > 0
+            ) {
+                return (this.completedAmount / this.totalAmountQuestions) * 100
+            }
+            return 0
+        },
+    },
+    watch: {
+        render(newValue) {
+            if (newValue) {
+                this.setUpGame()
+            }
+        },
+    },
+    mounted() {
+        if (this.block.metadata.config.bucket_answers.length > 0) {
+            this.setMainAnswer()
+        }
+        if (this.block.metadata.config.bucket_titles.length > 0) {
+            this.setUpGame()
+        }
+        this.status = 'default'
+    },
+    methods: {
+        checkMove() {
+            return false
+        },
+        setUpGame() {
+            this.block.metadata.config.bucket_titles.forEach((element) => {
+                let index =
+                    this.block.metadata.config.bucket_titles.indexOf(element)
+                this.items[index] = []
+            })
+            this.mainAnswer = this.setMainAnswer()
+        },
+        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
+        },
+        setMainAnswer() {
+            let result = []
+            let temp = {}
+            for (const index in this.block.metadata.config.bucket_answers) {
+                result[index] = []
+                for (const itemIndex in this.block.metadata.config
+                    .bucket_answers[index]) {
+                    temp =
+                        this.block.metadata.config.bucket_answers[index][
+                            itemIndex
+                        ]
+                    temp.bucket_index = index
+                    result[index].push(temp)
+                }
+            }
+            return this.shuffle(_.flatten(result))
+        },
+        closeDelete() {
+            this.dialogDelete = false
+        },
+        next() {
+            console.log(
+                'index' + this.index,
+                'bucket length' +
+                    this.block.metadata.config.bucket_answers.length
+            )
+
+            if (
+                this.index <
+                this.block.metadata.config.bucket_answers.length - 1
+            ) {
+                this.index = this.index + 1
+            } else {
+                this.index = 0
+            }
+        },
+        onCloneCallback(item) {
+            // Create a fresh copy of item
+            const cloneMe = JSON.parse(JSON.stringify(item))
+            console.log('cloned')
+
+            return cloneMe
+        },
+        onMoveCallback(evt, originalEvent) {
+            const item = evt.draggedContext.element
+            const itemIdx = evt.draggedContext.futureIndex
+            this.items[item.bucket_index].indexOf(item)
+
+            if (
+                this.items[item.bucket_index].indexOf(item) === -1 &&
+                this.block.metadata.config.bucket_answers[
+                    item.bucket_index
+                ].indexOf(item) !== -1
+            ) {
+                return true
+            }
+
+            return false
+        },
+        onDropCallback(evt, originalEvent) {
+            console.log('dropped', evt)
+        },
+        change(evt, bucket_index) {
+            this.allow_drag = false
+            if (
+                this.items[bucket_index].indexOf(evt.added.element) !== -1 &&
+                !_.isEmpty(
+                    this.block.metadata.config.bucket_answers[bucket_index]
+                ) &&
+                this.block.metadata.config.bucket_answers[bucket_index].indexOf(
+                    evt.added.element
+                ) !== -1 &&
+                this.mainAnswer.length > 0
+            ) {
+                this.feedback = evt.added.element.feedback
+                    ? evt.added.element.feedback
+                    : this.block.metadata.config.feedback_correct
+                this.status = 'successOutline'
+            } else if (this.mainAnswer.length === 0) {
+                this.feedback = this.$t(
+                    'plugin.games.components.content.blocks.matching_game.congratulations_feedback'
+                )
+            } else {
+                let items = this.items[bucket_index]
+                const indexOfAddedElement = items.indexOf(evt.added.element)
+                this.items[bucket_index].splice(indexOfAddedElement, 1)
+                this.mainAnswer.push(evt.added.element)
+                this.feedback = this.block.metadata.config.feedback_incorrect
+                this.status = 'errorOutline'
+            }
+        },
+        continueGame() {
+            this.status = 'default'
+            this.allow_drag = true
+            this.feedback = ''
+        },
+        onReset() {
+            this.items = []
+            for (const index in this.block.metadata.config.bucket_answers) {
+                this.items[index] = []
+            }
+            this.status = 'default'
+            this.feedback = ''
+            this.allow_drag = true
+            this.mainAnswer = this.setMainAnswer()
+        },
+    },
+}
+</script>
+<style scoped>
+.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);
+}
+.white-bg {
+    background-color: #ffffff;
+}
+.feedback--error {
+    background-color: #ff8383;
+    color: black;
+}
+.feedback--success {
+    background-color: #8cfa54;
+    color: black;
+}
+.body {
+    background-color: #d8ebfe;
+    color: black;
+}
+.title {
+    color: #04709f;
+}
+.bucket {
+    line-height: 1.1em;
+    padding: 0.5em;
+    box-shadow: 0px 2px 3px #0000004a;
+    transition: 0.5s box-shadow;
+    margin: 1%;
+}
+.card_text {
+    font-size: large;
+    color: black;
+}
+</style>