@windward/games 0.0.1

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

@@ -0,0 +1,303 @@
+<template>
+    <div>
+        <h2>{{ block.metadata.config.title }}</h2>
+
+        <p>
+            {{ block.metadata.config.instructions }}
+        </p>
+        <v-container :key="'feedback'" :class="feedbackClass()">
+            <br />
+            <v-row
+                class="d-flex justify-space-around"
+                align="center"
+                justify="center"
+                >{{ feedback }}
+            </v-row>
+            <br />
+        </v-container>
+        <br />
+        <div v-if="render">
+            <draggable
+                v-model="input"
+                :disabled="disabled"
+                class="d-flex flex-column mb-6"
+                group="cards"
+                v-bind="dragOptions"
+                @change="onDragChange"
+            >
+                <v-card
+                    v-for="index in input.length"
+                    :key="'bucket_' + index"
+                    :class="'pa-2 flex-fill bucket ' + bucketStateClass(index)"
+                    outlined
+                    tile
+                >
+                    <v-icon>mdi-gesture-tap-hold</v-icon>
+                    <v-icon v-if="success[index - 1]" color="green"
+                        >mdi-check-bold
+                    </v-icon>
+                    <v-icon v-if="fail[index - 1]" color="red"
+                        >mdi-close</v-icon
+                    >
+                    {{ input[index - 1].value }}
+                </v-card>
+            </draggable>
+            <v-container>
+                <v-row
+                    v-if="!isFail() && !isSuccess()"
+                    class="d-flex justify-end"
+                >
+                    <v-spacer class="col-lg-1" />
+                    <v-btn color="secondary" @click="checkAnswers">
+                        {{
+                            $t(
+                                'plugin.games.components.content.blocks.sorting_game.check_answers'
+                            )
+                        }}
+                    </v-btn>
+                </v-row>
+                <v-row
+                    v-if="isFail() || isSuccess()"
+                    class="d-flex justify-end"
+                >
+                    <v-btn
+                        v-if="isFail()"
+                        color="primary"
+                        class=" "
+                        @click="continueGame"
+                        >{{ $t('shared.forms.continue') }} </v-btn
+                    >&nbsp;&nbsp;
+                    <v-btn color="secondary" class="" @click="reset"
+                        >{{ $t('shared.forms.reset') }}
+                    </v-btn>
+                </v-row>
+            </v-container>
+        </div>
+        <div v-if="!render">
+            <draggable
+                v-model="block.metadata.config.answer"
+                :disabled="disabled"
+                class="d-flex flex-column mb-6"
+                group="cards"
+                v-bind="dragOptions"
+                @change="onDragChange"
+            >
+                <v-card
+                    v-for="index in block.metadata.config.answer.length"
+                    :key="'bucket_' + index"
+                    :class="'pa-2 flex-fill bucket ' + bucketStateClass(index)"
+                    elevation="0"
+                    outlined
+                    tile
+                >
+                    <v-icon>mdi-gesture-tap-hold</v-icon>
+                    <v-icon v-if="success[index - 1]" color="green"
+                        >mdi-check-bold
+                    </v-icon>
+                    <v-icon v-if="fail[index - 1]" color="red"
+                        >mdi-close</v-icon
+                    >
+                    {{ block.metadata.config.answer[index - 1].value }}
+                </v-card>
+            </draggable>
+        </div>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import draggable from 'vuedraggable'
+import CrudTable from '../../CrudTable'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+export default {
+    name: 'SortingGame',
+    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.answer)) {
+            this.block.metadata.config.answer = []
+        }
+        this.input = this.shuffle(
+            _.cloneDeep(this.block.metadata.config.answer)
+        )
+    },
+    data() {
+        return {
+            ticker: '123',
+            disabled: false,
+            reload: false,
+            input: [],
+            feedback: 'feedback here',
+            success: [],
+            fail: [],
+            seed: 123,
+            answer: [],
+        }
+    },
+    computed: {
+        dragOptions() {
+            return {
+                animation: 200,
+            }
+        },
+    },
+    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
+        },
+
+        onDragChange(evt) {
+            if (this.success[evt.moved.oldIndex]) {
+                this.success[evt.moved.oldIndex] = false
+            }
+        },
+        async onActionPanelEdit() {
+            this.render = !this.render
+            if (this.render) {
+                this.input = this.shuffle(
+                    _.cloneDeep(this.block.metadata.config.answer)
+                )
+            }
+            return await new Promise((resolve) => {
+                resolve(true)
+            })
+        },
+        reset() {
+            this.disabled = false
+            this.success = []
+            this.fail = []
+            this.input = this.shuffle(
+                _.cloneDeep(this.block.metadata.config.answer)
+            )
+            this.feedback = this.block.metadata.config.feedback_default
+            this.seed = Math.floor(Math.random() * 100)
+        },
+        continueGame() {
+            this.disabled = false
+            this.success = []
+            this.fail = []
+            this.feedback = this.block.metadata.config.feedback_default
+            this.seed = Math.floor(Math.random() * 100)
+        },
+        isSuccess() {
+            let result = false
+            let successCounter = 0
+            this.success.forEach(function (item) {
+                if (item === true) {
+                    successCounter++
+                }
+            })
+            if (successCounter === this.success.length && successCounter > 0) {
+                result = true
+            }
+            return result
+        },
+        isFail() {
+            let result = false
+            let counter = 0
+            this.fail.forEach(function (item) {
+                if (item === true) {
+                    result = true
+                }
+            })
+            return result
+        },
+        feedbackClass() {
+            let result = ''
+            if (this.isSuccess()) {
+                result = 'success '
+            }
+            if (this.isFail()) {
+                result = 'error '
+            }
+            return result
+        },
+        checkAnswers() {
+            const self = this
+            this.disabled = true
+
+            this.input.forEach(function (item, index) {
+                if (self.block.metadata.config.answer[index].id === item.id) {
+                    self.success[index] = true
+                    self.fail[index] = false
+                } else {
+                    self.success[index] = false
+                    self.fail[index] = true
+                }
+            })
+
+            if (this.isSuccess()) {
+                this.feedback = this.block.metadata.config.feedback_correct
+                this.emitCompleted()
+            }
+            if (this.isFail()) {
+                this.feedback = this.block.metadata.config.feedback_incorrect
+            }
+
+            this.seed = Math.floor(Math.random() * 100)
+        },
+        bucketStateClass(index) {
+            if (this.success[index - 1]) {
+                return 'bucket--success'
+            }
+            if (this.fail[index - 1]) {
+                return 'bucket--error'
+            }
+            return ''
+        },
+    },
+}
+</script>
+
+<style scoped>
+.ghost {
+    opacity: 0.5;
+    background: #c8ebfb;
+}
+.bucket {
+    border: solid 2px black;
+    color: black;
+    cursor: pointer;
+    padding: 0.3em;
+    margin: 0.3em;
+    vertical-align: middle;
+    display: inline-block;
+}
+.bucket--default {
+    border: dashed 2px #5cb2f1;
+    background-color: #ffffff;
+}
+.bucket--error {
+    border: dashed 2px #dc3d1a;
+    background-color: #fff1f1;
+}
+.bucket--success {
+    border: dashed 2px #76b778;
+    background-color: #f1fff3;
+}
+</style>

package/components/content/blocks/flashcards/CardFace.vue

@@ -0,0 +1,112 @@
+<template>
+    <div
+        v-bind:style="{
+            color: textColor,
+        }"
+    >
+        <v-row class="card-header" align="center" justify="center">
+            <content-viewer v-model="settings.header" />
+        </v-row>
+        <br />
+        <div class="card-content">
+            <v-row
+                :class="settings.img ? '' : ' text-justify  '"
+                align="center"
+                justify="center"
+            >
+                <content-viewer :class="textClass" v-model="settings.text" />
+            </v-row>
+            <v-row align="center" justify="center" v-if="settings.img !== ''">
+                <v-img
+                    contain
+                    :aspect-ratio="16 / 9"
+                    :src="settings.img"
+                    :alt="settings.altText"
+                    max-height="250"
+                    max-width="600"
+                />
+            </v-row>
+        </div>
+
+        <v-row class="card-footer" align="center" justify="center">{{
+            settings.footer
+        }}</v-row>
+    </div>
+</template>
+
+<script>
+import { MathHelper, ContentViewer } from '@windward/core/utils'
+
+export default {
+    name: 'CardFace',
+    components: { ContentViewer },
+    props: {
+        settings: { type: Object },
+        textColor: { type: String },
+    },
+    computed: {
+        textClass() {
+            if (
+                !this.settings.img &&
+                this.settings.text &&
+                this.settings.text.length < 300
+            ) {
+                return 'centered'
+            }
+            if (
+                !this.settings.img &&
+                this.settings.text &&
+                (MathHelper.containsMathML(this.settings.text.length) ||
+                    MathHelper.containsLatex(this.settings.text.length))
+            ) {
+                return 'centered'
+            }
+
+            if (
+                !this.settings.img &&
+                this.settings.text &&
+                this.settings.text.length > 100 &&
+                !(
+                    MathHelper.containsMathML(this.settings.text.length) ||
+                    MathHelper.containsLatex(this.settings.text.length)
+                )
+            ) {
+                return 'paragraph'
+            }
+
+            return ''
+        },
+    },
+    methods: {},
+}
+</script>
+
+<style scoped>
+.card-header {
+    font-weight: bold;
+}
+.card-content {
+    font-weight: bold;
+    margin: 5px;
+}
+.card-footer {
+    font-weight: bold;
+}
+.centered {
+    margin: 0;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+.card-footer {
+    margin: 0;
+    position: absolute;
+    top: 95%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+.paragraph {
+    margin: 2%;
+}
+</style>

package/components/content/blocks/flashcards/Flashcard.vue

@@ -0,0 +1,150 @@
+<template>
+    <v-container>
+        <v-card
+            @click="toggleCard"
+            v-show="value"
+            class="animated flipInY flashcard"
+            max-height="900"
+            min-height="460"
+        >
+            <card-face :settings="frontFace"></card-face>
+        </v-card>
+        <v-card
+            @click="toggleCard"
+            v-show="!value"
+            class="animated flipInY flashcard"
+            max-height="900"
+            min-height="460"
+        >
+            <card-face :settings="backFace"></card-face>
+        </v-card>
+    </v-container>
+</template>
+<script>
+import CardFace from './CardFace'
+export default {
+    components: { CardFace },
+    data() {
+        return {
+            settings: {},
+        }
+    },
+    props: {
+        options: { type: Object, default: {} },
+        slide: { type: Number, required: true, default: 0 },
+        value: { type: Boolean, required: false, default: false },
+    },
+
+    computed: {
+        frontFace() {
+            return {
+                img:
+                    this.options.front.img && this.options.front.img.asset
+                        ? this.options.front.img.asset.public_url
+                        : '',
+                altText: this.options.front.imgAltText
+                    ? this.options.front.imgAltText
+                    : '',
+                text: this.options.front.text,
+                header: this.options.front.header,
+                footer: this.$t(
+                    'plugin.games.components.content.blocks.flashcard.click_to_show_back'
+                ),
+            }
+        },
+        backFace() {
+            return {
+                img:
+                    this.options.back.img && this.options.back.img.asset
+                        ? this.options.back.img.asset.public_url
+                        : '',
+                altText: this.options.back.imgAltText
+                    ? this.options.back.imgAltText
+                    : '',
+                text: this.options.back.text,
+                header: this.options.back.header,
+                footer: this.$t(
+                    'plugin.games.components.content.blocks.flashcard.click_to_show_front'
+                ),
+            }
+        },
+    },
+    methods: {
+        toggleCard() {
+            this.$emit('input', !this.value)
+        },
+    },
+}
+</script>
+<style scoped>
+.center {
+    text-align: center;
+}
+
+.flashcard {
+    cursor: pointer;
+    border-radius: 10px;
+    max-height: 100vh;
+    margin: 0.5em;
+    padding: 25px;
+    box-shadow: 0 0px 10px rgba(0, 0, 0, 0.4);
+    text-align: center;
+}
+
+.flashcard:hover {
+    box-shadow: 0 0px 25px rgba(0, 0, 0, 0.8);
+}
+
+.animated {
+    animation-duration: 0.5s;
+    animation-fill-mode: both;
+}
+
+@keyframes flipInX {
+    from {
+        transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
+        animation-timing-function: ease-in;
+        opacity: 0;
+    }
+    40% {
+        transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
+        animation-timing-function: ease-in;
+    }
+    60% {
+        transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
+        opacity: 1;
+    }
+    80% {
+        transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
+    }
+    to {
+        transform: perspective(400px);
+    }
+}
+
+@keyframes flipInY {
+    from {
+        transform: perspective(400px) rotateY(180deg);
+        animation-timing-function: ease-in;
+        opacity: 0;
+    }
+    50% {
+        transform: perspective(400px) rotateY(290deg);
+        opacity: 0.25;
+    }
+
+    to {
+        transform: perspective(400px) rotateY(360deg);
+        opacity: 1;
+    }
+}
+
+.flipInX {
+    backface-visibility: visible !important;
+    animation-name: flipInX;
+}
+.flipInY {
+    backface-visibility: visible !important;
+    animation-name: flipInY;
+}
+</style>

package/components/content/blocks/flashcards/FlashcardSlides.vue

@@ -0,0 +1,121 @@
+<template>
+    <div>
+        <h2 v-if="block.metadata.config.title">
+            {{ block.metadata.config.title }}
+        </h2>
+
+        <p v-if="block.metadata.config.instructions">
+            {{ block.metadata.config.instructions }}
+        </p>
+        <br />
+        <v-carousel
+            v-model="block.metadata.config.currentSlide"
+            show-arrows-on-hover
+            hide-delimiters
+        >
+            <template #prev="{ on, attrs }">
+                <v-btn
+                    variant="elevated"
+                    color="primary"
+                    fab
+                    class="nav-buttons"
+                    v-bind="attrs"
+                    v-on="on"
+                    ><v-icon>mdi-chevron-left</v-icon></v-btn
+                >
+            </template>
+            <template #next="{ on, attrs }">
+                <v-btn
+                    variant="elevated"
+                    color="primary"
+                    fab
+                    class="nav-buttons"
+                    v-bind="attrs"
+                    v-on="on"
+                    ><v-icon>mdi-chevron-right</v-icon></v-btn
+                >
+            </template>
+            <v-carousel-item
+                v-for="(card, index) in block.metadata.config.cards"
+                :key="index"
+            >
+                <v-sheet height="100%" tile>
+                    <flashcard
+                        :options="card"
+                        :slide="block.metadata.config.currentSlide"
+                        v-model="block.metadata.config.cards[index].side"
+                        @click=""
+                        :key="seed + '-' + block.metadata.config.currentSlide"
+                    />
+                </v-sheet>
+            </v-carousel-item>
+        </v-carousel>
+
+        <v-row justify="center" align="center">
+            <div class="pa-3 text-center">
+                {{ slide }}/{{ block.metadata.config.cards.length }}
+            </div></v-row
+        >
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import Flashcard from './Flashcard'
+import draggable from 'vuedraggable'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+import Crypto from '~/helpers/Crypto'
+export default {
+    name: 'Flashcards',
+    components: { Flashcard, draggable },
+    extends: BaseContentBlock,
+    data() {
+        return {
+            slideNumber: 0,
+            toggle: true,
+            seed: Crypto.id(),
+            cards: [],
+        }
+    },
+    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 = {}
+            this.block.metadata.config.currentSlide = 0
+            this.block.metadata.config.title = ''
+            this.block.metadata.config.instructions = ''
+        }
+
+        if (_.isEmpty(this.block.metadata.config.cards)) {
+            this.block.metadata.config.cards = []
+        }
+    },
+    computed: {
+        slide() {
+            if (this.block.metadata.config.cards.length > 0) {
+                return this.block.metadata.config.currentSlide + 1
+            }
+            return 0
+        },
+    },
+    methods: {
+        onActionPanelEdit() {
+            this.render = !this.render
+        },
+    },
+}
+</script>
+
+<style scoped>
+.bordered {
+    outline: #4caf50 solid 5px;
+}
+.control {
+    margin: 5px;
+}
+</style>