@windward/games 0.0.10 → 0.1.0

package/components/content/CrudTable.vue

@@ -14,7 +14,7 @@
                     <v-btn color="primary" dark class="mb-2" @click="addNew">
                         {{
                             $t(
-                                'plugin.games.components.content.crud_table.add_row'
+                                'windward.games.components.content.crud_table.add_row'
                             )
                         }}
                     </v-btn>
@@ -34,7 +34,7 @@
                             >
                                 {{
                                     $t(
-                                        'plugin.games.components.content.crud_table.new_item'
+                                        'windward.games.components.content.crud_table.new_item'
                                     )
                                 }}
                             </v-btn>

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

@@ -7,7 +7,9 @@
         >
             <h3 class="crossword-clues__list-title">
                 {{
-                    $t(`plugin.games.components.content.blocks.crossword.down`)
+                    $t(
+                        `windward.games.components.content.blocks.crossword.down`
+                    )
                 }}
             </h3>
             <v-list dense>
@@ -33,7 +35,7 @@
             <h3 class="crossword-clues__list-title">
                 {{
                     $t(
-                        `plugin.games.components.content.blocks.crossword.across`
+                        `windward.games.components.content.blocks.crossword.across`
                     )
                 }}
             </h3>

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

@@ -1,14 +1,14 @@
 <template>
     <v-container>
         <div>
-            <h2>{{ block.metadata.config.title }}</h2>
+            <h3>{{ block.metadata.config.title }}</h3>
             <p>{{ block.metadata.config.instructions }}</p>
         </div>
         <v-alert v-if="wordMap.length === 0" type="info" class="text-center">
             <p>
                 {{
                     $t(
-                        'plugin.games.components.content.blocks.crossword.initial_setup'
+                        'windward.games.components.content.blocks.crossword.initial_setup'
                     )
                 }}
             </p>
@@ -21,7 +21,7 @@
             <p>
                 {{
                     $t(
-                        'plugin.games.components.content.blocks.crossword.validation_error'
+                        'windward.games.components.content.blocks.crossword.validation_error'
                     )
                 }}
             </p>
@@ -91,7 +91,7 @@
                         >
                             {{
                                 $t(
-                                    'plugin.games.components.content.blocks.crossword.play_again'
+                                    'windward.games.components.content.blocks.crossword.play_again'
                                 )
                             }}
                         </v-btn>
@@ -126,7 +126,9 @@ export default {
             this.block.metadata.config = {}
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
-            this.block.metadata.config.title = ''
+            this.block.metadata.config.title = this.$t(
+                'windward.games.components.content.blocks.crossword.crossword'
+            )
         }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
             this.block.metadata.config.instructions = ''
@@ -249,7 +251,7 @@ export default {
 
             if (_.isEmpty(this.wordMap)) {
                 this.error = this.$t(
-                    'plugin.games.components.content.blocks.crossword.error.min_words'
+                    'windward.games.components.content.blocks.crossword.error.min_words'
                 )
             } else {
                 // checks if there are any words that don't share letters with any others
@@ -257,22 +259,22 @@ export default {
 
                 if (this.wordMap.length < 2) {
                     this.error = this.$t(
-                        'plugin.games.components.content.blocks.crossword.error.min_words'
+                        'windward.games.components.content.blocks.crossword.error.min_words'
                     )
                 } else if (letterCheck.length > 0) {
                     // if a word doesn't share letters load with dummy data and alert the user
                     let words = letterCheck.toString()
                     this.error = this.$t(
-                        'plugin.games.components.content.blocks.crossword.error.words_no_shared_letters',
+                        'windward.games.components.content.blocks.crossword.error.words_no_shared_letters',
                         [words]
                     )
                 } else if (!this.validateWordMaxLength(this.wordMap)) {
                     this.error = this.$t(
-                        'plugin.games.components.content.blocks.crossword.error.word_length_max_limit'
+                        'windward.games.components.content.blocks.crossword.error.word_length_max_limit'
                     )
                 } else if (!this.validateWordMinLength(this.wordMap)) {
                     this.error = this.$t(
-                        'plugin.games.components.content.blocks.crossword.error.word_length_min_limit'
+                        'windward.games.components.content.blocks.crossword.error.word_length_min_limit'
                     )
                 }
             }
@@ -435,14 +437,14 @@ export default {
 
             if (grid.length > MATRIX_LENGTH) {
                 this.error = this.$t(
-                    'plugin.games.components.content.blocks.crossword.error.could_not_generate'
+                    'windward.games.components.content.blocks.crossword.error.could_not_generate'
                 )
                 return false
             }
 
             if (_.isEmpty(grid)) {
                 this.error = this.$t(
-                    'plugin.games.components.content.blocks.crossword.error.unknown'
+                    'windward.games.components.content.blocks.crossword.error.unknown'
                 )
 
                 return false

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

@@ -4,7 +4,7 @@
             <h3
                 :aria-label="
                     $t(
-                        'plugin.games.components.content.blocks.bucket_game.aria_title'
+                        'windward.games.components.content.blocks.bucket_game.aria_title'
                     )
                 "
                 tabindex="0"
@@ -18,19 +18,18 @@
             <h4 v-if="!render" class="d-flex justify-center align-center">
                 {{
                     $t(
-                        'plugin.games.components.content.blocks.bucket_game.cannot'
+                        'windward.games.components.content.blocks.bucket_game.cannot'
                     )
                 }}
             </h4>
-            <v-container fluid :class="status" class="pa-0">
-                <br />
-                <v-row>
+            <v-container fluid :class="status">
+                <v-row class="pa-4">
                     <v-col></v-col>
-                    <v-col class="d-flex justify-center">{{
+                    <v-col class="d-flex justify-center align-center">{{
                         feedback
                             ? feedback
                             : $t(
-                                  'plugin.games.components.content.blocks.bucket_game.form.feedback.feedback_here'
+                                  'windward.games.components.content.blocks.bucket_game.form.feedback.feedback_here'
                               )
                     }}</v-col>
                     <v-col class="d-flex justify-end pl-4">
@@ -51,7 +50,6 @@
                         </v-container>
                     </v-col>
                 </v-row>
-                <br />
             </v-container>
             <div v-if="render">
                 <v-container>
@@ -216,7 +214,7 @@
                         tabindex="0"
                         :aria-label="
                             $t(
-                                'plugin.games.components.content.blocks.matching_game.of_complete',
+                                'windward.games.components.content.blocks.matching_game.of_complete',
                                 [completedAmount, totalAmountQuestions]
                             )
                         "
@@ -224,7 +222,7 @@
                         <v-col align="end" tabindex="0">
                             {{
                                 $t(
-                                    'plugin.games.components.content.blocks.matching_game.of_complete_text_area',
+                                    'windward.games.components.content.blocks.matching_game.of_complete_text_area',
                                     [completedAmount, totalAmountQuestions]
                                 )
                             }}
@@ -234,6 +232,7 @@
                                 outlined
                                 rounded
                                 height="15"
+                                style="pointer-events: none"
                             ></v-progress-linear>
                             <br />
                             <v-btn color="primary" outlined @click="onReset"
@@ -268,7 +267,7 @@ export default {
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = this.$t(
-                'plugin.games.components.content.blocks.bucket_game.game_title'
+                'windward.games.components.content.blocks.bucket_game.game_title'
             )
         }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
@@ -276,12 +275,12 @@ export default {
         }
         if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
             this.block.metadata.config.feedback_correct = this.$t(
-                'plugin.games.components.settings.bucket_game.form.feedback.correct_default'
+                'windward.games.components.settings.bucket_game.form.feedback.correct_default'
             )
         }
         if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
             this.block.metadata.config.feedback_incorrect = this.$t(
-                'plugin.games.components.settings.bucket_game.form.feedback.incorrect_default'
+                'windward.games.components.settings.bucket_game.form.feedback.incorrect_default'
             )
         }
         if (_.isEmpty(this.block.metadata.config.bucket_titles)) {
@@ -292,7 +291,7 @@ export default {
         }
         if (_.isEmpty(this.block.body)) {
             this.block.body = this.$t(
-                'plugin.games.components.content.blocks.bucket_game.game_title'
+                'windward.games.components.content.blocks.bucket_game.game_title'
             )
         }
     },
@@ -431,7 +430,7 @@ export default {
                 this.status = 'successOutline'
             } else if (this.mainAnswer.length === 0) {
                 this.feedback = this.$t(
-                    'plugin.games.components.content.blocks.matching_game.congratulations_feedback'
+                    'windward.games.components.content.blocks.matching_game.congratulations_feedback'
                 )
             } else {
                 let items = this.items[bucket_index]

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

@@ -83,7 +83,7 @@
                     <v-btn color="primary" elevation="0" @click="checkAnswers">
                         {{
                             $t(
-                                'plugin.games.components.content.blocks.sorting_game.check_answers'
+                                'windward.games.components.content.blocks.sorting_game.check_answers'
                             )
                         }}
                     </v-btn>
@@ -168,17 +168,17 @@ export default {
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = this.$t(
-                'plugin.games.components.settings.sorting_game.sortable_game'
+                'windward.games.components.settings.sorting_game.sortable_game'
             )
         }
         if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
             this.block.metadata.config.feedback_correct = this.$t(
-                'plugin.games.components.settings.bucket_game.form.feedback.correct_default'
+                'windward.games.components.settings.bucket_game.form.feedback.correct_default'
             )
         }
         if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
             this.block.metadata.config.feedback_incorrect = this.$t(
-                'plugin.games.components.settings.bucket_game.form.feedback.incorrect_default'
+                'windward.games.components.settings.bucket_game.form.feedback.incorrect_default'
             )
         }
         if (_.isEmpty(this.block.metadata.config.answer)) {

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

@@ -1,37 +1,33 @@
 <template>
-    <div
-        v-bind:style="{
-            color: textColor,
-        }"
-    >
-        <v-row class="card-header" align="center" justify="center">
-            <content-viewer v-model="settings.header" />
-        </v-row>
+    <v-container>
         <br />
         <div class="card-content">
+            <v-row align="center" justify="center">
+                <content-viewer :class="textClass" v-model="settings.text" />
+            </v-row>
+            <br />
             <v-row
-                :class="settings.img ? '' : ' text-justify  '"
+                no-gutters
                 align="center"
                 justify="center"
+                v-if="settings.img !== ''"
             >
-                <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-height="210"
                     max-width="600"
                 />
             </v-row>
+            <br />
         </div>
-
-        <v-row class="card-footer" align="center" justify="center">{{
-            settings.footer
-        }}</v-row>
-    </div>
+        <v-row class="card-footer pt-4" align="center" justify="center">
+            {{ settings.footer }}&nbsp;
+            <v-icon color="primary">mdi-orbit-variant</v-icon>
+        </v-row>
+    </v-container>
 </template>
 
 <script>
@@ -42,16 +38,21 @@ export default {
     components: { ContentViewer },
     props: {
         settings: { type: Object },
-        textColor: { type: String },
+        side: { type: String },
     },
     computed: {
         textClass() {
             if (
                 !this.settings.img &&
                 this.settings.text &&
-                this.settings.text.length < 300
+                this.settings.text.length < 100 &&
+                this.side === 'front'
             ) {
-                return 'centered'
+                return 'text-justify centered card-content--bold'
+            }
+
+            if (this.side === 'front') {
+                return 'text-center card-content--bold'
             }
             if (
                 !this.settings.img &&
@@ -59,38 +60,35 @@ export default {
                 (MathHelper.containsMathML(this.settings.text.length) ||
                     MathHelper.containsLatex(this.settings.text.length))
             ) {
-                return 'centered'
+                return 'text-justify 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 ''
+            return 'px-6  text-justify'
         },
     },
     methods: {},
 }
 </script>
 
-<style scoped>
+<style lang="scss" scoped>
 .card-header {
-    font-weight: bold;
 }
 .card-content {
+    color: var(--v-primary-base);
+    font-size: 1rem;
+}
+.card-content--bold {
     font-weight: bold;
-    margin: 5px;
+    font-size: 1.5rem;
+}
+
+p.card-content {
+    font-size: 1.5rem !important;
 }
 .card-footer {
     font-weight: bold;
+    color: var(--v-primary-base);
 }
 .centered {
     margin: 0;
@@ -102,11 +100,12 @@ export default {
 .card-footer {
     margin: 0;
     position: absolute;
-    top: 95%;
+    top: 90%;
     left: 50%;
     transform: translate(-50%, -50%);
+    color: var(--v-primary-base);
 }
 .paragraph {
-    margin: 2%;
+    margin: 5%;
 }
 </style>

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

@@ -1,33 +1,31 @@
 <template>
-    <v-container>
-        <v-card
-            @click="toggleCard"
-            v-show="value"
-            :class="cardClass"
-            max-height="900"
-            min-height="460"
-        >
-            <card-face :settings="frontFace"></card-face>
+    <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>
+            </v-card-text>
         </v-card>
-        <v-card
-            @click="toggleCard"
-            v-show="!value"
-            :class="cardClass"
-            max-height="900"
-            min-height="460"
-        >
-            <card-face :settings="backFace"></card-face>
+        <v-card outlined @click="toggleCard" v-show="!value" :class="cardClass">
+            <v-card-title class="card-title">
+                <v-row align="center" justify="center">{{
+                    backFace.header
+                }}</v-row>
+            </v-card-title>
+            <v-card-text>
+                <cardFace :settings="backFace" side="back"></cardFace>
+            </v-card-text>
         </v-card>
     </v-container>
 </template>
 <script>
 import CardFace from './CardFace'
+import _ from 'lodash'
 export default {
     components: { CardFace },
     data() {
         return {
             settings: {},
-            cardClass: 'animated flashcard',
+            flip: false,
         }
     },
     props: {
@@ -37,6 +35,22 @@ export default {
     },
 
     computed: {
+        cardClass() {
+            let result = 'animated flashcard'
+            if (this.flip) {
+                result = result + ' flipInY'
+            }
+
+            if (this.frontFace.img === '' && this.backFace.img === '') {
+                result = result + ' flashcard--size-md'
+            }
+
+            if (this.frontFace.img !== '' || this.backFace.img !== '') {
+                result = result + ' flashcard--size-lg'
+            }
+
+            return result
+        },
         frontFace() {
             return {
                 img:
@@ -49,7 +63,7 @@ export default {
                 text: this.options.front.text,
                 header: this.options.front.header,
                 footer: this.$t(
-                    'plugin.games.components.content.blocks.flashcard.click_to_show_back'
+                    'windward.games.components.content.blocks.flashcard.flip_card'
                 ),
             }
         },
@@ -65,7 +79,7 @@ export default {
                 text: this.options.back.text,
                 header: this.options.back.header,
                 footer: this.$t(
-                    'plugin.games.components.content.blocks.flashcard.click_to_show_front'
+                    'windward.games.components.content.blocks.flashcard.flip_card'
                 ),
             }
         },
@@ -73,29 +87,96 @@ export default {
     methods: {
         toggleCard() {
             //only flip card when user click
-            this.cardClass = 'animated flipInY flashcard'
+            this.flip = true
+            //this.cardClass = 'animated flipInY flashcard flashcard--size-md'
             this.$emit('input', !this.value)
         },
     },
 }
 </script>
-<style scoped>
+<style lang="scss" scoped>
 .center {
     text-align: center;
 }
 
+.card-title {
+    background-color: var(--v-primary-base);
+    color: var(--v-background-base);
+}
 .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);
+    border: 1px solid;
+    border-radius: 8px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);
     text-align: center;
 }
+.div-container {
+    container-type: inline-size;
+}
+@container (width >1168px) {
+    .flashcard--size-md {
+        min-height: 60%;
+        width: 90%;
+        top: 20%;
+        left: 5%;
+    }
+
+    .flashcard--size-lg {
+        min-height: 90%;
+        width: 90%;
+        top: 5%;
+        left: 5%;
+    }
+}
+@container (width < 1168px) {
+    .flashcard--size-md {
+        min-height: 60%;
+        width: 88%;
+        top: 20%;
+        left: 6%;
+    }
+
+    .flashcard--size-lg {
+        min-height: 90%;
+        width: 88%;
+        top: 5%;
+        left: 6%;
+    }
+}
+@container (width < 850px) {
+    .flashcard--size-md {
+        min-height: 60%;
+        width: 84%;
+        top: 20%;
+        left: 8%;
+    }
+
+    .flashcard--size-lg {
+        min-height: 90%;
+        width: 84%;
+        top: 5%;
+        left: 8%;
+    }
+}
+@container (width < 650px) {
+    .flashcard--size-md {
+        min-height: 90%;
+        width: 76%;
+        top: 5%;
+        left: 12%;
+    }
+
+    .flashcard--size-lg {
+        min-height: 90%;
+        width: 76%;
+        top: 5%;
+        left: 12%;
+    }
+}
 
 .flashcard:hover {
-    box-shadow: 0 0px 25px rgba(0, 0, 0, 0.8);
+    box-shadow: 0 0px 12px rgba(0, 0, 0, 0.8);
+    background-color: var(--v-background-darken1);
 }
 
 .animated {

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

@@ -10,7 +10,6 @@
         <br />
         <v-carousel
             v-model="block.metadata.config.currentSlide"
-            show-arrows-on-hover
             hide-delimiters
         >
             <template #prev="{ on, attrs }">
@@ -88,7 +87,7 @@ export default {
             this.block.metadata.config = {}
             this.block.metadata.config.currentSlide = 0
             this.block.metadata.config.title = this.$t(
-                'plugin.games.components.content.blocks.flashcard.title'
+                'windward.games.components.content.blocks.flashcard.title'
             )
             this.block.metadata.config.instructions = ''
         }