@windward/games 0.3.0 → 0.5.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>
+    <v-container class="pa-0">
         <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>
@@ -216,7 +217,7 @@
                             )
                         "
                     >
-                        <v-col align="end" tabindex="0">
+                        <v-col align="end" tabindex="0" class="pa-0">
                             {{
                                 $t(
                                     'windward.games.components.content.blocks.matching_game.of_complete_text_area',
@@ -232,7 +233,11 @@
                                 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>
@@ -92,6 +92,7 @@
                     <v-btn
                         v-if="onFail()"
                         color="primary"
+                        elevation="0"
                         text
                         @click="onContinueGame"
                         >{{ $t('shared.forms.try_again') }} </v-btn

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 = []