@windward/games 0.0.9 → 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

@@ -1,9 +1,16 @@
 <template>
     <div>
         <div>
-            <h1 aria-label="bucket game title" tabindex="0">
+            <h3
+                :aria-label="
+                    $t(
+                        'windward.games.components.content.blocks.bucket_game.aria_title'
+                    )
+                "
+                tabindex="0"
+            >
                 {{ block.metadata.config.title }}
-            </h1>
+            </h3>
 
             <p tabindex="0">
                 {{ block.metadata.config.instructions }}
@@ -11,37 +18,38 @@
             <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">
                         <v-btn
-                            v-if="
-                                status === 'successOutline' ||
-                                status === 'errorOutline'
-                            "
+                            v-if="status === 'successOutline'"
                             class="mr-5"
-                            :color="
-                                status == 'successOutline' ? 'success' : 'error'
-                            "
+                            color="success"
                             @click="continueGame"
                             >{{ $t('shared.forms.continue') }}
-                        </v-btn></v-col
-                    >
+                        </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>
-                <br />
             </v-container>
             <div v-if="render">
                 <v-container>
@@ -54,14 +62,14 @@
                     >
                         <v-row align="center" class="col-md-10">
                             <v-card
+                                v-if="mainAnswer[0]"
                                 class="pa-2 flex-fill"
                                 outlined
                                 tile
-                                v-if="mainAnswer[0]"
                             >
                                 <v-icon>mdi-drag-vertical</v-icon>
 
-                                <span class="text-justify">{{
+                                <span class="text-justify span-bold">{{
                                     mainAnswer[counter].display
                                         ? mainAnswer[counter].display
                                         : ''
@@ -84,15 +92,18 @@
                                 tile
                                 :color="
                                     block.metadata.config.bucket_titles[bindex]
-                                        .color
+                                        ? block.metadata.config.bucket_titles[
+                                              bindex
+                                          ].color
+                                        : ''
                                 "
                             >
                                 <v-card-text class="text-center">
                                     <draggable
+                                        v-model="items[bindex]"
                                         :key="'bucket - ' + bindex"
                                         disabled
                                         group="people"
-                                        v-model="items[bindex]"
                                         @change="change($event, bindex)"
                                         :move="checkMove"
                                         tabindex="0"
@@ -100,7 +111,11 @@
                                         <div class="card_text">
                                             {{
                                                 block.metadata.config
-                                                    .bucket_titles[bindex].title
+                                                    .bucket_titles[bindex]
+                                                    ? block.metadata.config
+                                                          .bucket_titles[bindex]
+                                                          .title
+                                                    : ''
                                             }}
                                         </div>
                                     </draggable></v-card-text
@@ -122,14 +137,14 @@
                 >
                     <v-row align="center" class="col-md-10">
                         <v-card
-                            class="pa-2 flex-fill"
-                            outlined
-                            tile
                             v-if="
                                 block.metadata.config.bucket_answers[
                                     startingIndex
                                 ]
                             "
+                            class="pa-2 flex-fill"
+                            outlined
+                            tile
                         >
                             <v-icon>mdi-drag-vertical</v-icon>
 
@@ -199,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]
                             )
                         "
@@ -207,16 +222,17 @@
                         <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]
                                 )
                             }}
                             <v-progress-linear
+                                v-model="completedPercent"
                                 color="primary"
                                 outlined
-                                v-model="completedPercent"
                                 rounded
                                 height="15"
+                                style="pointer-events: none"
                             ></v-progress-linear>
                             <br />
                             <v-btn color="primary" outlined @click="onReset"
@@ -251,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)) {
@@ -259,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)) {
@@ -275,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'
             )
         }
     },
@@ -285,28 +301,7 @@ export default {
             instructions: '',
             feedback: '',
             counter: 0,
-            headers: [
-                {
-                    text: 'Bucket display text',
-                    align: 'start',
-                    sortable: false,
-                    value: 'display',
-                    draggable: true,
-                },
-                { text: 'bucket value', value: 'value', sortable: false },
-                { text: 'feedback', value: 'feedback', sortable: false },
-            ],
-            default_item: {
-                id: 0,
-                value: '',
-                display_value: '',
-                feedback: '',
-            },
-            bucket_titles: [],
-            bucket_colors: [],
             items: [],
-            dialogDelete: false,
-            bucketDeleteIndex: 0,
             status: 'default',
             allow_drag: true,
             mainAnswer: [],
@@ -356,6 +351,8 @@ export default {
             return false
         },
         setUpGame() {
+            // reset so we don't carry over any empty arrays
+            this.items = []
             this.block.metadata.config.bucket_titles.forEach((element) => {
                 let index =
                     this.block.metadata.config.bucket_titles.indexOf(element)
@@ -399,32 +396,6 @@ export default {
             }
             return this.shuffle(_.flatten(result))
         },
-        closeDelete() {
-            this.dialogDelete = false
-        },
-        next() {
-            console.log(
-                'index' + this.index,
-                'bucket length' +
-                    this.block.metadata.config.bucket_answers.length
-            )
-
-            if (
-                this.index <
-                this.block.metadata.config.bucket_answers.length - 1
-            ) {
-                this.index = this.index + 1
-            } else {
-                this.index = 0
-            }
-        },
-        onCloneCallback(item) {
-            // Create a fresh copy of item
-            const cloneMe = JSON.parse(JSON.stringify(item))
-            console.log('cloned')
-
-            return cloneMe
-        },
         onMoveCallback(evt, originalEvent) {
             const item = evt.draggedContext.element
             const itemIdx = evt.draggedContext.futureIndex
@@ -441,9 +412,6 @@ export default {
 
             return false
         },
-        onDropCallback(evt, originalEvent) {
-            console.log('dropped', evt)
-        },
         change(evt, bucket_index) {
             this.allow_drag = false
             if (
@@ -462,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]
@@ -500,23 +468,8 @@ export default {
     border: 4px solid var(--v-error-base);
     color: var(--v-error-base);
 }
-.white-bg {
-    background-color: #ffffff;
-}
-.feedback--error {
-    background-color: #ff8383;
-    color: black;
-}
-.feedback--success {
-    background-color: #8cfa54;
-    color: black;
-}
-.body {
-    background-color: #d8ebfe;
-    color: black;
-}
-.title {
-    color: #04709f;
+.span-bold {
+    font-weight: bold;
 }
 .bucket {
     line-height: 1.1em;

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

@@ -1,7 +1,6 @@
 <template>
     <div>
         <h3>{{ block.metadata.config.title }}</h3>
-
         <p>
             {{ block.metadata.config.instructions }}
         </p>
@@ -10,36 +9,54 @@
                 class="d-flex justify-space-around pa-4"
                 align="center"
                 justify="center"
-                >{{ feedback }}
+            >
+                <v-col cols="2"></v-col>
+                <v-col cols="8" class="d-flex justify-center">{{
+                    feedback
+                }}</v-col>
+                <v-col cols="2">
+                    <v-row
+                        v-if="isFail() || isSuccess()"
+                        class="d-flex justify-end"
+                    >
+                        <v-btn
+                            v-if="isSuccess()"
+                            class="success"
+                            elevation="0"
+                            @click="reset"
+                            >{{ $t('shared.forms.continue') }}
+                        </v-btn>
+                        <v-container
+                            v-if="isFail()"
+                            @click="continueGame"
+                            class="d-flex justify-end"
+                            ><v-icon class="icon--error"
+                                >mdi-close-circle</v-icon
+                            >
+                        </v-container>
+                    </v-row>
+                </v-col>
             </v-row>
         </v-container>
-        <v-container v-if="render">
+        <v-container v-if="render" class="mt-2">
             <draggable
                 v-model="input"
                 :disabled="disabled"
-                class="d-flex flex-column mb-6"
+                class="d-flex flex-column"
                 group="cards"
                 v-bind="dragOptions"
                 @change="onDragChange"
             >
-                <v-row
-                    class="justify-center align-center"
-                    v-for="index in input.length"
-                    :key="'bucket_' + index"
-                >
-                    <v-col
-                        cols="1"
-                        v-if="graded"
-                        class="d-flex justify-end pa-0"
-                    >
+                <v-row v-for="index in input.length" :key="'bucket_' + 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
+                            >mdi-check-circle
                         </v-icon>
                         <v-icon v-if="fail[index - 1]" class="icon--error ma-0"
-                            >mdi-close</v-icon
+                            >mdi-close-circle</v-icon
                         >
                     </v-col>
-                    <v-col cols="11">
+                    <v-col cols="10">
                         <v-card
                             :class="
                                 'pa-2 flex-fill bucket ' +
@@ -54,35 +71,35 @@
                             {{ input[index - 1].value }}
                         </v-card>
                     </v-col>
+                    <v-col cols="1"></v-col>
                 </v-row>
             </draggable>
-            <v-container>
+            <v-container class="mt-3">
                 <v-row
                     v-if="!isFail() && !isSuccess()"
-                    class="d-flex justify-end"
+                    class="d-flex justify-center"
                 >
                     <v-spacer class="col-lg-1" />
-                    <v-btn color="primary" @click="checkAnswers">
+                    <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>
                 </v-row>
                 <v-row
                     v-if="isFail() || isSuccess()"
-                    class="d-flex justify-end"
+                    class="d-flex justify-center"
                 >
                     <v-btn
                         v-if="isFail()"
                         color="primary"
                         outlined
-                        class=" "
                         @click="continueGame"
                         >{{ $t('shared.forms.continue') }} </v-btn
                     >&nbsp;&nbsp;
-                    <v-btn color="primary" class="" @click="reset"
+                    <v-btn color="primary" elevation="0" @click="reset"
                         >{{ $t('shared.forms.reset') }}
                     </v-btn>
                 </v-row>
@@ -151,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)) {
@@ -350,6 +367,7 @@ export default {
     border: solid 1px black;
     border-radius: 4px !important;
     cursor: pointer;
+    font-weight: bold;
 }
 .bucket--error {
     background-color: var(--v-error-base);
@@ -363,13 +381,9 @@ export default {
     color: white;
 }
 .icon--error {
-    background-color: var(--v-error-base);
-    color: white;
-    border-radius: 25px;
+    color: var(--v-error-base);
 }
 .icon--success {
-    background-color: var(--v-success-base);
-    color: white;
-    border-radius: 25px;
+    color: var(--v-success-base);
 }
 </style>