@windward/games 0.2.2 → 0.4.0

package/components/content/CrudTable.vue

@@ -11,7 +11,7 @@
                     <v-toolbar-title> {{ title }}</v-toolbar-title>
                     <v-divider class="mx-4" inset vertical></v-divider>
                     <v-spacer></v-spacer>
-                    <v-btn color="primary" dark class="mb-2" @click="addNew">
+                    <v-btn color="primary" elevation="0" dark class="mb-2" @click="addNew">
                         {{
                             $t(
                                 'windward.games.components.content.crud_table.add_row'
@@ -27,6 +27,7 @@
                         <template #activator="{ on, attrs }">
                             <v-btn
                                 color="primary"
+                                elevation="0"
                                 dark
                                 class="mb-2"
                                 v-bind="attrs"
@@ -71,12 +72,13 @@
                                 <v-spacer></v-spacer>
                                 <v-btn
                                     color="blue darken-1"
+                                    elevation="0"
                                     text
                                     @click="close"
                                 >
                                     {{ $t('shared.forms.cancel') }}
                                 </v-btn>
-                                <v-btn color="blue darken-1" text @click="save">
+                                <v-btn color="blue darken-1" elevation="0" text @click="save">
                                     {{ $t('shared.forms.save') }}
                                 </v-btn>
                             </v-card-actions>
@@ -91,12 +93,14 @@
                                 <v-spacer></v-spacer>
                                 <v-btn
                                     color="blue darken-1"
+                                    elevation="0"
                                     text
                                     @click="closeDelete"
                                     >{{ $t('shared.forms.cancel') }}
                                 </v-btn>
                                 <v-btn
                                     color="blue darken-1"
+                                    elevation="0"
                                     text
                                     @click="deleteItemConfirm"
                                     >{{ $t('shared.forms.confirm') }}
@@ -127,7 +131,7 @@
                         @input="onDropCallback"
                     >
                         <template #item.actions="{ item }">
-                            <v-btn outlined v-if="useModal">
+                            <v-btn outlined elevation="0" v-if="useModal">
                                 <span class="sr-only">
                                     {{ $t('shared.forms.edit') }}</span
                                 >
@@ -139,7 +143,7 @@
                                     mdi-pencil
                                 </v-icon>
                             </v-btn>
-                            <v-btn outlined>
+                            <v-btn outlined elevation="0">
                                 <span class="sr-only">
                                     {{ $t('shared.forms.delete') }}</span
                                 >

package/components/content/DatableEditor.vue

@@ -25,6 +25,7 @@
                         ></v-text-field>-->
                         <v-btn
                             color="primary"
+                            elevation="0"
                             class="col-md-12 white--text"
                             @click="addNew"
                         >

package/components/content/blocks/crosswordPuzzle/CrosswordPuzzle.vue

@@ -1,7 +1,7 @@
 <template>
     <v-container>
         <div>
-            <h3>{{ block.metadata.config.title }}</h3>
+            <h2>{{ block.metadata.config.title }}</h2>
             <p>{{ block.metadata.config.instructions }}</p>
         </div>
         <v-alert v-if="wordMap.length === 0" type="info" class="text-center">
@@ -86,6 +86,7 @@
                     <v-col cols="12" class="d-flex justify-center">
                         <v-btn
                             color="primary"
+                            elevation="0"
                             outlined
                             class="ma-3"
                             @click="onSetUpData"

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

@@ -1,7 +1,7 @@
 <template>
     <div>
         <div>
-            <h3
+            <h2
                 :aria-label="
                     $t(
                         'windward.games.components.content.blocks.bucket_game.aria_title'
@@ -10,7 +10,7 @@
                 tabindex="0"
             >
                 {{ block.metadata.config.title }}
-            </h3>
+            </h2>
 
             <p tabindex="0">
                 {{ block.metadata.config.instructions }}
@@ -37,6 +37,7 @@
                             v-if="status === 'successOutline'"
                             class="mr-5"
                             color="success"
+                            elevation="0"
                             @click="continueGame"
                             >{{ $t('shared.forms.continue') }}
                         </v-btn>
@@ -232,7 +233,7 @@
                                 style="pointer-events: none"
                             ></v-progress-linear>
                             <br />
-                            <v-btn color="primary" outlined @click="onReset"
+                            <v-btn color="primary" outlined elevation="0" @click="onReset"
                                 >{{ $t('shared.forms.reset') }}
                             </v-btn>
                         </v-col>

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

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <h3>{{ block.metadata.config.title }}</h3>
+        <h2>{{ block.metadata.config.title }}</h2>
         <p>
             {{ block.metadata.config.instructions }}
         </p>
@@ -16,12 +16,12 @@
                 }}</v-col>
                 <v-col cols="2">
                     <v-row
-                        v-if="isFail() || isSuccess()"
+                        v-if="onFail() || onSuccess()"
                         class="d-flex justify-end"
                     >
                         <v-container
-                            v-if="isFail()"
-                            @click="continueGame"
+                            v-if="onFail()"
+                            @click="onContinueGame"
                             class="d-flex justify-end"
                             ><v-icon class="icon--error"
                                 >mdi-close-circle</v-icon
@@ -40,7 +40,7 @@
                 v-bind="dragOptions"
                 @change="onDragChange"
             >
-                <v-row v-for="index in input.length" :key="'bucket_' + index">
+                <v-row v-for="index in input.length" :key="'sortable_' + index">
                     <v-col cols="1" md="1" class="d-flex justify-end pa-0">
                         <v-icon v-if="success[index - 1]" class="icon--success"
                             >mdi-check-circle
@@ -53,7 +53,7 @@
                         <v-card
                             :class="
                                 'pa-2 flex-fill container-outline ' +
-                                bucketStateClass(index)
+                                sortableStateClass(index)
                             "
                             outlined
                             tile
@@ -69,11 +69,15 @@
             </draggable>
             <v-container class="mt-3">
                 <v-row
-                    v-if="!isFail() && !isSuccess()"
+                    v-if="!onFail() && !onSuccess()"
                     class="d-flex justify-center"
                 >
                     <v-spacer class="col-lg-1" />
-                    <v-btn color="primary" elevation="0" @click="checkAnswers">
+                    <v-btn
+                        color="primary"
+                        elevation="0"
+                        @click="onCheckAnswers"
+                    >
                         {{
                             $t(
                                 'windward.games.components.content.blocks.sorting_game.check_answers'
@@ -82,17 +86,22 @@
                     </v-btn>
                 </v-row>
                 <v-row
-                    v-if="isFail() || isSuccess()"
+                    v-if="onFail() || onSuccess()"
                     class="d-flex justify-center"
                 >
                     <v-btn
-                        v-if="isFail()"
+                        v-if="onFail()"
                         color="primary"
+                        elevation="0"
                         text
-                        @click="continueGame"
+                        @click="onContinueGame"
                         >{{ $t('shared.forms.try_again') }} </v-btn
                     >&nbsp;&nbsp;
-                    <v-btn color="primary" elevation="0" @click="reset" outlined
+                    <v-btn
+                        color="primary"
+                        elevation="0"
+                        @click="onReset"
+                        outlined
                         >{{ $t('shared.forms.reset') }}
                     </v-btn>
                 </v-row>
@@ -110,7 +119,7 @@
                 <v-row
                     class="justify-center align-center"
                     v-for="index in block.metadata.config.answer.length"
-                    :key="'bucket_' + index"
+                    :key="'sortable_' + index"
                 >
                     <v-col cols="1" v-if="graded">
                         <v-icon v-if="success[index - 1]" color="success"
@@ -124,7 +133,7 @@
                         <v-card
                             :class="
                                 'pa-2 flex-fill container-outline ' +
-                                bucketStateClass(index)
+                                sortableStateClass(index)
                             "
                             elevation="0"
                             outlined
@@ -253,7 +262,7 @@ export default {
                 resolve(true)
             })
         },
-        reset() {
+        onReset() {
             this.disabled = false
             this.graded = false
             this.success = []
@@ -264,7 +273,7 @@ export default {
             this.feedback = this.block.metadata.config.feedback_default
             this.seed = Math.floor(Math.random() * 100)
         },
-        continueGame() {
+        onContinueGame() {
             this.disabled = false
             this.graded = false
             this.success = []
@@ -272,7 +281,7 @@ export default {
             this.feedback = this.block.metadata.config.feedback_default
             this.seed = Math.floor(Math.random() * 100)
         },
-        isSuccess() {
+        onSuccess() {
             let result = false
             let successCounter = 0
             this.success.forEach(function (item) {
@@ -285,7 +294,7 @@ export default {
             }
             return result
         },
-        isFail() {
+        onFail() {
             let result = false
             this.fail.forEach(function (item) {
                 if (item === true) {
@@ -296,15 +305,15 @@ export default {
         },
         feedbackClass() {
             let result = ''
-            if (this.isSuccess()) {
+            if (this.onSuccess()) {
                 result = 'container-feedback-success '
             }
-            if (this.isFail()) {
+            if (this.onFail()) {
                 result = 'container-feedback-error '
             }
             return result
         },
-        checkAnswers() {
+        onCheckAnswers() {
             const self = this
             this.disabled = true
 
@@ -318,22 +327,22 @@ export default {
                 }
             })
 
-            if (this.isSuccess()) {
+            if (this.onSuccess()) {
                 this.feedback = this.block.metadata.config.feedback_correct
                 this.emitCompleted()
             }
-            if (this.isFail()) {
+            if (this.onFail()) {
                 this.feedback = this.block.metadata.config.feedback_incorrect
             }
             this.graded = true
             this.seed = Math.floor(Math.random() * 100)
         },
-        bucketStateClass(index) {
+        sortableStateClass(index) {
             if (this.success[index - 1]) {
-                return 'bucket--success'
+                return 'sortable--success'
             }
             if (this.fail[index - 1]) {
-                return 'bucket--error'
+                return 'sortable--error'
             }
             return ''
         },
@@ -356,11 +365,11 @@ export default {
     border: 4px solid var(--v-error-base);
     color: var(--v-error-base);
 }
-.bucket--error {
+.sortable--error {
     background-color: var(--v-error-base);
     color: white;
 }
-.bucket--success {
+.sortable--success {
     background-color: var(--v-success-base);
     color: white;
 }

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

@@ -7,16 +7,16 @@
             </v-row>
             <br />
             <v-row
+                v-if="imagePublicUrl"
                 no-gutters
                 align="center"
                 justify="center"
-                v-if="settings.img !== ''"
             >
                 <v-img
                     contain
                     :aspect-ratio="16 / 9"
-                    :src="settings.img"
-                    :alt="settings.altText"
+                    :src="imagePublicUrl"
+                    :alt="imageAlt"
                     max-height="210"
                     max-width="600"
                 />
@@ -31,19 +31,22 @@
 </template>
 
 <script>
+import _ from 'lodash'
 import { MathHelper, ContentViewer } from '@windward/core/utils'
+import Uuid from '~/helpers/Uuid'
 
 export default {
     name: 'CardFace',
     components: { ContentViewer },
     props: {
-        settings: { type: Object },
-        side: { type: String },
+        settings: { type: Object, required: true },
+        side: { type: String, required: true },
+        assets: { type: Array, required: true },
     },
     computed: {
         textClass() {
             if (
-                !this.settings.img &&
+                !this.settings.imageAsset &&
                 this.settings.text &&
                 this.settings.text.length < 100 &&
                 this.side === 'front'
@@ -55,7 +58,7 @@ export default {
                 return 'text-center card-content--bold'
             }
             if (
-                !this.settings.img &&
+                !this.settings.imageAsset &&
                 this.settings.text &&
                 (MathHelper.containsMathML(this.settings.text.length) ||
                     MathHelper.containsLatex(this.settings.text.length))
@@ -63,11 +66,47 @@ export default {
                 return 'text-justify centered'
             }
 
-
             return 'px-6  text-justify'
         },
+        imageAsset() {
+            if (!this.settings.imageAsset) {
+                return null
+            }
+
+            let image = _.cloneDeep(this.settings.imageAsset)
+
+            // If the file is linked then resolve it first
+            // Otherwise it's a hard link that we can just return
+            if (image && image.file_asset_id !== null) {
+                image = this.getAssetByFileAssetId(image.file_asset_id)
+            }
+            return image
+        },
+        imagePublicUrl() {
+            return _.get(this.imageAsset, 'asset.public_url', '')
+        },
+        imageAlt() {
+            // Default to user defined alt but fallback to global alt
+            if (this.settings.imageAlt) {
+                return this.settings.imageAlt
+            } else {
+                return _.get(this.imageAsset, 'asset.metadata.props.alt', '')
+            }
+        },
+    },
+    methods: {
+        getAssetByFileAssetId(fileAssetId) {
+            // Not a uuid. Instant fail
+            if (!Uuid.test(fileAssetId)) {
+                return null
+            }
+            const foundAsset = this.assets.find((asset) => {
+                return _.get(asset, 'file_asset_id', null) === fileAssetId
+            })
+
+            return foundAsset || null
+        },
     },
-    methods: {},
 }
 </script>
 

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

@@ -2,7 +2,11 @@
     <v-container style="height: 100%" class="div-container">
         <v-card outlined @click="toggleCard" v-show="value" :class="cardClass">
             <v-card-text>
-                <card-face :settings="frontFace" side="front"></card-face>
+                <CardFace
+                    side="front"
+                    :settings="frontFace"
+                    :assets="assets"
+                ></CardFace>
             </v-card-text>
         </v-card>
         <v-card outlined @click="toggleCard" v-show="!value" :class="cardClass">
@@ -12,7 +16,11 @@
                 }}</v-row>
             </v-card-title>
             <v-card-text>
-                <cardFace :settings="backFace" side="back"></cardFace>
+                <CardFace
+                    side="back"
+                    :settings="backFace"
+                    :assets="assets"
+                ></CardFace>
             </v-card-text>
         </v-card>
     </v-container>
@@ -29,9 +37,10 @@ export default {
         }
     },
     props: {
+        value: { type: Boolean, required: false, default: false },
         options: { type: Object, default: {} },
         slide: { type: Number, required: true, default: 0 },
-        value: { type: Boolean, required: false, default: false },
+        assets: { type: Array, required: true },
     },
 
     computed: {
@@ -41,11 +50,17 @@ export default {
                 result = result + ' flipInY'
             }
 
-            if (this.frontFace.img === '' && this.backFace.img === '') {
+            if (
+                this.frontFace.imageAsset === '' &&
+                this.backFace.imageAsset === ''
+            ) {
                 result = result + ' flashcard--size-md'
             }
 
-            if (this.frontFace.img !== '' || this.backFace.img !== '') {
+            if (
+                this.frontFace.imageAsset !== '' ||
+                this.backFace.imageAsset !== ''
+            ) {
                 result = result + ' flashcard--size-lg'
             }
 
@@ -53,12 +68,9 @@ export default {
         },
         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
+                imageAsset: this.options.front.imageAsset,
+                imageAlt: this.options.front.imageAlt
+                    ? this.options.front.imageAlt
                     : '',
                 text: this.options.front.text,
                 header: this.options.front.header,
@@ -69,12 +81,9 @@ export default {
         },
         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
+                imageAsset: this.options.back.imageAsset,
+                imageAlt: this.options.back.imageAlt
+                    ? this.options.back.imageAlt
                     : '',
                 text: this.options.back.text,
                 header: this.options.back.header,

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

@@ -1,8 +1,8 @@
 <template>
     <div>
-        <h3 v-if="block.metadata.config.title">
+        <h2 v-if="block.metadata.config.title">
             {{ block.metadata.config.title }}
-        </h3>
+        </h2>
 
         <p v-if="block.metadata.config.instructions">
             {{ block.metadata.config.instructions }}
@@ -13,6 +13,7 @@
                 <v-btn
                     variant="elevated"
                     color="primary"
+                    elevation="0"
                     outlined
                     fab
                     small
@@ -25,6 +26,7 @@
                 <v-btn
                     variant="elevated"
                     color="primary"
+                    elevation="0"
                     outlined
                     fab
                     small
@@ -38,12 +40,12 @@
                 :key="index"
             >
                 <v-sheet height="100%" tile>
-                    <flashcard
+                    <Flashcard
+                        v-model="block.metadata.config.cards[index].side"
                         :options="card"
                         :slide="block.metadata.config.currentSlide"
-                        v-model="block.metadata.config.cards[index].side"
-                        @click=""
                         :key="seed + '-' + block.metadata.config.currentSlide"
+                        :assets="block.assets"
                     />
                 </v-sheet>
             </v-carousel-item>
@@ -84,6 +86,9 @@ export default {
             )
             this.block.metadata.config.instructions = ''
         }
+        if (_.isEmpty(this.block.assets)) {
+            this.block.assets = []
+        }
 
         if (_.isEmpty(this.block.metadata.config.cards)) {
             this.block.metadata.config.cards = []