@windward/games 0.8.1 → 0.10.0

package/CHANGELOG.md

@@ -1,5 +1,8 @@
 # Changelog
 
+### Release [0.10.0] created - 2025-01-03
+
+
 ## Release [0.7.0] - 2024-08-29
 
 * Version bump to 0.7.0

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

@@ -501,6 +501,7 @@ export default {
 .crossword-board-container {
     position: relative;
     padding-top: 5px;
+    margin-top: 1rem;
     overflow: auto;
 }
 
@@ -595,8 +596,9 @@ export default {
 
 .crossword-clues {
     background: var(--v-content-background-base);
-    position: sticky;
-    bottom: 100px;
+    max-height: 30vh;
+    overflow-y: scroll;
+    bottom: 50px;
     border-radius: 5px;
 }
 .crossword-board__item--number {
@@ -613,63 +615,42 @@ export default {
         width: 500px;
         height: 500px;
     }
-    .crossword-board-container {
-        box-sizing: content-box !important;
-    }
 }
 @media (max-width: 1480px) {
     .crossword-col-4 {
         width: 400px;
         height: 400px;
     }
-    .crossword-board-container {
-        box-sizing: content-box !important;
-    }
 }
 @media (max-width: 1360px) {
     .crossword-col-4 {
         width: 350px;
         height: 350px;
     }
-    .crossword-board-container {
-        box-sizing: content-box !important;
-    }
 }
 @media (max-width: 1300px) {
     .crossword-col-4 {
         width: 300px;
         height: 300px;
     }
-    .crossword-board-container {
-        box-sizing: content-box !important;
-    }
 }
 @media (max-width: 1263px) {
     .crossword-col-4 {
         width: 550px;
         height: 550px;
     }
-    .crossword-board-container {
-        box-sizing: content-box !important;
-    }
 }
 @media (max-width: 823px) {
     .crossword-col-4 {
         width: 400px;
         height: 400px;
     }
-    .crossword-board-container {
-        box-sizing: content-box !important;
-    }
 }
 @media (max-width: 631px) {
     .crossword-col-4 {
         width: 300px;
         height: 300px;
     }
-    .crossword-board-container {
-        box-sizing: content-box !important;
-    }
 }
 @media (max-width: 565px) {
     .crossword-col-4 {
@@ -677,7 +658,6 @@ export default {
         height: 300px;
     }
     .crossword-board-container {
-        box-sizing: content-box !important;
         padding-top: 12px;
         padding-left: 12px;
     }

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

@@ -27,36 +27,39 @@
                     )
                 }}
             </h4>
-            <v-container fluid :class="status">
-                <v-row class="pa-4">
-                    <v-col></v-col>
-                    <v-col class="d-flex justify-center align-center">{{
+            <v-alert fluid :class="status">
+                <v-row class="pa-4 d-flex justify-center">
+                    {{
                         feedback
                             ? feedback
                             : $t(
                                   'windward.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="mr-5"
-                            color="success"
-                            elevation="0"
-                            @click="continueGame"
-                            >{{ $t('shared.forms.continue') }}
-                        </v-btn>
-                        <v-container
-                            v-if="status === 'errorOutline'"
-                            class="d-flex justify-end"
-                            @click="continueGame"
-                            ><v-icon class="icon--error" color="error"
-                                >mdi-close-circle</v-icon
-                            >
-                        </v-container>
-                    </v-col>
+                    }}
                 </v-row>
-            </v-container>
+                <v-row class="d-flex justify-center mt-0 mb-1">
+                    <v-btn
+                        v-if="
+                            status === 'container-success-outline' &&
+                            mainAnswer.length !== 0
+                        "
+                        color="success"
+                        elevation="0"
+                        @click="continueGame"
+                        >{{ $t('shared.forms.continue') }}
+                    </v-btn>
+                    <v-btn
+                        v-if="status === 'container-error-outline'"
+                        color="error"
+                        @click="continueGame"
+                        >{{
+                            $t(
+                                'windward.games.components.content.blocks.bucket_game.try_again'
+                            )
+                        }}
+                    </v-btn>
+                </v-row>
+            </v-alert>
             <div v-if="render">
                 <v-container>
                     <draggable
@@ -83,15 +86,12 @@
                     </draggable>
                     <br />
 
-                    <v-row
-                        class="d-flex flex-wrap flex-row justify-center flex-fill"
-                    >
-                        <v-row align="center" class="col-md-10">
+                    <v-row class="d-flex justify-center mb-2">
+                        <v-row class="justify-center">
                             <v-card
                                 v-for="(bucket, bindex) in items"
                                 :key="'b-v-card-' + bindex"
-                                class="pa-2 flex-fill bucket"
-                                min-height="5em"
+                                class="card-bucket"
                                 outlined
                                 tile
                                 :color="
@@ -103,7 +103,7 @@
                                 "
                             >
                                 <v-card-text
-                                    class="d-flex justify-center text-center"
+                                    class="d-flex justify-center text-center pl-0 pr-0"
                                 >
                                     <draggable
                                         v-model="items[bindex]"
@@ -113,14 +113,30 @@
                                         @change="change($event, bindex)"
                                         :move="checkMove"
                                         tabindex="0"
+                                        class="draggable-bucket"
                                     >
                                         <TextViewer
                                             v-model="
                                                 block.metadata.config
                                                     .bucket_titles[bindex].title
                                             "
-                                            class="d-flex align-center"
+                                            class="d-flex align-center justify-center container-buckets"
                                         ></TextViewer>
+                                        <v-container
+                                            v-for="(
+                                                nested_answer, nested_index
+                                            ) in block.metadata.config
+                                                .bucket_titles[bindex]
+                                                .nested_answers"
+                                            :key="nested_index"
+                                            class="d-flex justify-center align-center pa-0"
+                                        >
+                                            <TextViewer
+                                                class="container-nested-answers mb-1"
+                                                v-model="nested_answer.display"
+                                                remove-root-element
+                                            ></TextViewer>
+                                        </v-container>
                                     </draggable>
                                 </v-card-text>
                             </v-card>
@@ -166,12 +182,15 @@
                 <v-row
                     class="d-flex flex-wrap flex-row justify-center flex-fill"
                 >
-                    <v-row align="center" class="col-md-10">
+                    <v-row
+                        align="center"
+                        class="col-md-10 justify-space-around"
+                    >
                         <v-card
                             v-for="(bucket, bindex) in block.metadata.config
                                 .bucket_titles"
                             :key="'b-v-card-' + bindex"
-                            class="pa-2 flex-fill bucket"
+                            class="pa-2 card-bucket"
                             min-height="5em"
                             outlined
                             tile
@@ -198,7 +217,7 @@
                                             ].title
                                         "
                                         class="d-flex align-center"
-                                    ></TextViewer> </draggable
+                                    ></TextViewer></draggable
                             ></v-card-text>
                         </v-card>
                     </v-row>
@@ -295,6 +314,17 @@ export default {
         if (_.isEmpty(this.block.metadata.config.bucket_titles)) {
             this.block.metadata.config.bucket_titles = []
         }
+        if (
+            this.block.metadata.config.bucket_titles &&
+            this.block.metadata.config.bucket_titles[0] &&
+            _.isEmpty(
+                this.block.metadata.config.bucket_titles[0].nested_answers
+            )
+        ) {
+            this.block.metadata.config.bucket_titles.forEach((bucket) => {
+                bucket.nested_answers = []
+            })
+        }
         if (_.isEmpty(this.block.metadata.config.bucket_answers)) {
             this.block.metadata.config.bucket_answers = []
         }
@@ -331,6 +361,7 @@ export default {
         },
         completedPercent() {
             if (
+                this.block.metadata.config.bucket_answers &&
                 this.block.metadata.config.bucket_answers.length > 0 &&
                 this.items.length > 0
             ) {
@@ -347,10 +378,16 @@ export default {
         },
     },
     mounted() {
-        if (this.block.metadata.config.bucket_answers.length > 0) {
+        if (
+            this.block.metadata.config.bucket_answers &&
+            this.block.metadata.config.bucket_answers.length > 0
+        ) {
             this.setMainAnswer()
         }
-        if (this.block.metadata.config.bucket_titles.length > 0) {
+        if (
+            this.block.metadata.config.bucket_titles &&
+            this.block.metadata.config.bucket_titles.length > 0
+        ) {
             this.setUpGame()
         }
         this.status = 'default'
@@ -460,43 +497,43 @@ export default {
                     bucket_index
                 )
             ) {
-                this.feedback = evt.added.element.feedback
-                    ? evt.added.element.feedback
-                    : this.block.metadata.config.feedback_correct
+                // set correct feedback
+                if (evt.added.element.feedback) {
+                    this.feedback = evt.added.element.feedback
+                } else {
+                    this.feedback = this.block.metadata.config.feedback_correct
+                        ? this.block.metadata.config.feedback_correct
+                        : this.$t(
+                              'windward.games.components.settings.bucket_game.form.feedback.correct_default'
+                          )
+                }
                 // determines if answer is correct and then sees if that was the last answer
                 // needs to be nested in here because this.mainAnswer is bound to :list on draggable
                 // list changes the array so when it is using the last object in the array it looks like the array is empty
                 if (this.mainAnswer.length === 0) {
-                    this.feedback = this.$t(
-                        'windward.games.components.content.blocks.matching_game.congratulations_feedback'
-                    )
+                    this.status = 'container-success-outline'
+                    this.block.metadata.config.bucket_titles[
+                        bucket_index
+                    ].nested_answers.push(evt.added.element)
                 } else {
-                    this.status = 'successOutline'
-                    // set correct feedback
-                    if (evt.added.element.feedback) {
-                        this.feedback = evt.added.element.feedback
-                    } else {
-                        this.feedback = this.block.metadata.config
-                            .feedback_correct
-                            ? this.block.metadata.config.feedback_correct
-                            : this.$t(
-                                  'windward.games.components.settings.bucket_game.form.feedback.correct_default'
-                              )
-                    }
+                    this.status = 'container-success-outline'
+                    this.block.metadata.config.bucket_titles[
+                        bucket_index
+                    ].nested_answers.push(evt.added.element)
                 }
             } else {
                 let items = this.items[bucket_index]
                 const indexOfAddedElement = items.indexOf(evt.added.element)
                 this.items[bucket_index].splice(indexOfAddedElement, 1)
                 // puts item back into mutable array for draggable component
-                this.mainAnswer.push(evt.added.element)
+                this.mainAnswer.unshift(evt.added.element)
                 // set incorrect feedback
                 this.feedback = this.block.metadata.config.feedback_incorrect
                     ? this.block.metadata.config.feedback_incorrect
                     : this.$t(
                           'windward.games.components.settings.bucket_game.form.feedback.incorrect_default'
                       )
-                this.status = 'errorOutline'
+                this.status = 'container-error-outline'
             }
         },
         continueGame() {
@@ -509,6 +546,9 @@ export default {
             for (const index in this.block.metadata.config.bucket_answers) {
                 this.items[index] = []
             }
+            this.block.metadata.config.bucket_titles.forEach((element) => {
+                element.nested_answers = []
+            })
             this.status = 'default'
             this.feedback = ''
             this.allow_drag = true
@@ -518,26 +558,65 @@ export default {
 }
 </script>
 <style scoped>
-.successOutline {
+.container-success-outline {
     border: 4px solid var(--v-success-base);
     color: var(--v-success-base);
 }
-.errorOutline {
+.container-error-outline {
     border: 4px solid var(--v-error-base);
     color: var(--v-error-base);
 }
 .span-bold {
     font-weight: bold;
 }
-.bucket {
+.card-bucket {
     line-height: 1.1em;
     padding: 0.5em;
     box-shadow: 0px 2px 3px #0000004a;
     transition: 0.5s box-shadow;
     margin: 1%;
+    max-width: 12vw;
+    min-width: 12vw;
+    color: black !important;
 }
 .card_text {
     font-size: large;
     color: black;
 }
+.container-nested-answers {
+    max-width: 10vw;
+    min-width: 10vw;
+    padding-left: 4px;
+    padding-right: 4px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    background-color: white;
+    color: black;
+    box-shadow: 0px 2px 3px #0000004a;
+    border-radius: 2px;
+    line-height: 50px !important;
+}
+.container-buckets {
+    color: black;
+}
+.draggable-bucket {
+    width: 100%;
+}
+@media (max-width: 600px) {
+    .card-bucket {
+        width: 40vh;
+        max-width: 40vh;
+    }
+    .container-nested-answers {
+        display: block !important;
+        width: 100%;
+        max-width: 100%;
+        min-width: 100%;
+        overflow-x: hidden !important;
+    }
+}
+.container-outline {
+    cursor: grab;
+}
 </style>

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

@@ -1,25 +1,22 @@
 <template>
     <v-container>
         <br />
-        <div class="card-content">
+        <div
+            class="card-content d-flex flex-column align-center justify-center"
+        >
             <v-row>
                 <content-viewer :class="textClass" v-model="settings.text" />
             </v-row>
             <br />
-            <v-row
-                v-if="imagePublicUrl"
-                no-gutters
-                align="center"
-                justify="center"
-            >
-                <v-img
-                    contain
-                    :aspect-ratio="16 / 9"
-                    :src="imagePublicUrl"
-                    :alt="imageAlt"
-                    max-height="210"
-                    max-width="600"
-                />
+            <v-row v-if="settings.fileConfig" no-gutters>
+                <v-col>
+                    <ImageAssetViewer
+                        v-model="settings.fileConfig"
+                        :assets="assets"
+                        max-height="210"
+                        max-width="250"
+                    ></ImageAssetViewer>
+                </v-col>
             </v-row>
             <br />
         </div>
@@ -34,10 +31,11 @@
 import _ from 'lodash'
 import { MathHelper, ContentViewer } from '@windward/core/utils'
 import Uuid from '~/helpers/Uuid'
+import ImageAssetViewer from '~/components/Content/ImageAssetViewer.vue'
 
 export default {
     name: 'CardFace',
-    components: { ContentViewer },
+    components: { ContentViewer, ImageAssetViewer },
     props: {
         settings: { type: Object, required: true },
         side: { type: String, required: true },
@@ -46,7 +44,7 @@ export default {
     computed: {
         textClass() {
             if (
-                !this.settings.imageAsset &&
+                !this.settings.fileConfig &&
                 this.settings.text &&
                 this.settings.text.length < 100 &&
                 this.side === 'front'
@@ -58,7 +56,7 @@ export default {
                 return 'text-center card-content--bold'
             }
             if (
-                !this.settings.imageAsset &&
+                !this.settings.fileConfig &&
                 this.settings.text &&
                 (MathHelper.containsMathML(this.settings.text.length) ||
                     MathHelper.containsLatex(this.settings.text.length))
@@ -68,51 +66,18 @@ export default {
 
             return 'px-6  text-left'
         },
-        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
-        },
+    beforeMount() {
+        // so background isn't set to white by the imageassetviewer
+        if (_.isEmpty(this.settings.fileConfig)) {
+            this.settings.fileConfig = {}
+            this.settings.fileConfig.hideBackground = true
+        }
     },
 }
 </script>
 
 <style lang="scss" scoped>
-.card-header {
-}
 .card-content {
     color: var(--v-primary-base);
     font-size: 1rem;

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

@@ -1,6 +1,11 @@
 <template>
     <v-container style="height: 100%" class="div-container">
-        <v-card outlined @click="toggleCard" v-show="value" :class="cardClass">
+        <v-card
+            outlined
+            @click="toggleCard"
+            v-show="side"
+            :class="cardClass"
+        >
             <v-card-text>
                 <CardFace
                     side="front"
@@ -9,7 +14,7 @@
                 ></CardFace>
             </v-card-text>
         </v-card>
-        <v-card outlined @click="toggleCard" v-show="!value" :class="cardClass">
+        <v-card outlined @click="toggleCard" v-show="!side" :class="cardClass">
             <v-card-title class="card-title">
                 <v-row align="center" justify="center">{{
                     backFace.header
@@ -34,10 +39,10 @@ export default {
         return {
             settings: {},
             flip: false,
+            side: true,
         }
     },
     props: {
-        value: { type: Boolean, required: false, default: false },
         options: { type: Object, default: {} },
         slide: { type: Number, required: true, default: 0 },
         assets: { type: Array, required: true },
@@ -51,15 +56,15 @@ export default {
             }
 
             if (
-                this.frontFace.imageAsset === '' &&
-                this.backFace.imageAsset === ''
+                this.frontFace.fileConfig === '' &&
+                this.backFace.fileConfig === ''
             ) {
                 result = result + ' flashcard--size-md'
             }
 
             if (
-                this.frontFace.imageAsset !== '' ||
-                this.backFace.imageAsset !== ''
+                this.frontFace.fileConfig !== '' ||
+                this.backFace.fileConfig !== ''
             ) {
                 result = result + ' flashcard--size-lg'
             }
@@ -68,10 +73,7 @@ export default {
         },
         frontFace() {
             return {
-                imageAsset: this.options.front.imageAsset,
-                imageAlt: this.options.front.imageAlt
-                    ? this.options.front.imageAlt
-                    : '',
+                fileConfig: this.options.front.fileConfig,
                 text: this.options.front.text,
                 header: this.options.front.header,
                 footer: this.$t(
@@ -81,10 +83,7 @@ export default {
         },
         backFace() {
             return {
-                imageAsset: this.options.back.imageAsset,
-                imageAlt: this.options.back.imageAlt
-                    ? this.options.back.imageAlt
-                    : '',
+                fileConfig: this.options.back.fileConfig,
                 text: this.options.back.text,
                 header: this.options.back.header,
                 footer: this.$t(
@@ -93,12 +92,16 @@ export default {
             }
         },
     },
+    mounted() {
+        this.side = true
+    },
     methods: {
         toggleCard() {
             //only flip card when user click
             this.flip = true
             //this.cardClass = 'animated flipInY flashcard flashcard--size-md'
-            this.$emit('input', !this.value)
+            this.$emit('input', !this.side)
+            this.side = !this.side
         },
     },
 }