@windward/games 0.0.10 → 0.1.1

package/components/content/blocks/sevenStrikes/SevenStikes.vue

@@ -6,7 +6,7 @@
                     block.metadata.config.title
                         ? block.metadata.config.title
                         : $t(
-                              'plugin.games.components.content.blocks.seven_strikes.title'
+                              'windward.games.components.content.blocks.seven_strikes.title'
                           )
                 }}
             </h3>
@@ -15,7 +15,7 @@
         <v-col class="pa-0">
             <template>
                 <v-carousel
-                    v-model="carouselIndex"
+                    v-model="block.metadata.config.currentWord"
                     @change="onSlideChanged($event)"
                 >
                     <v-carousel-item
@@ -23,107 +23,139 @@
                         :key="index"
                     >
                         <v-row class="d-flex justify-center ma-2">
-                            <p class="pa-3 mb-0 clueAndJumble">
+                            <p class="pa-3 mb-0 p-clue-jumble">
                                 {{ word.hint }}
                             </p>
                         </v-row>
                         <v-container
                             v-if="showFeedback"
+                            fluid
                             :key="'feedback'"
                             :class="feedbackStatus"
-                            class="mb-8"
                         >
-                            <v-row class="d-flex" align="center">
-                                <v-col cols="4"></v-col>
-                                <v-col cols="4" class="d-flex justify-center">
-                                    <p class="">{{ feedback }}</p>
-                                </v-col>
-                                <v-col cols="4" class="d-flex justify-end">
-                                    <v-icon @click="onHideFeedback">
-                                        mdi-alpha-x-circle-outline</v-icon
-                                    >
+                            <v-row class="pa-4">
+                                <v-col></v-col>
+                                <v-col
+                                    class="d-flex justify-center align-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="
+                                            feedbackStatus === 'successOutline'
+                                        "
+                                        class="mr-5"
+                                        color="success"
+                                        @click="onChangeSlide(index + 1)"
+                                        >{{ $t('shared.forms.continue') }}
+                                    </v-btn>
+                                    <v-container
+                                        v-if="feedbackStatus === 'errorOutline'"
+                                        class="d-flex justify-end"
+                                        @click="onHideFeedback"
+                                        ><v-icon
+                                            class="icon--error"
+                                            color="error"
+                                            >mdi-close-circle</v-icon
+                                        >
+                                    </v-container>
                                 </v-col>
                             </v-row>
                         </v-container>
-                        <v-row class="justify-center">
-                            <div
-                                v-for="(
-                                    strike, strikeIndex
-                                ) in sevenStrikesCounter"
-                                :key="strikeIndex"
+                        <v-container>
+                            <v-row
+                                class="justify-center mt-2"
+                                v-if="word.splitWord"
                             >
                                 <div
-                                    v-if="strike.strike === false"
-                                    :ref="'strike' + strikeIndex"
-                                    class="strikeArea ml-1 mr-1 d-flex justify-center align-center"
-                                    maxlength="1"
-                                ></div>
-                                <div
-                                    class="strike"
-                                    v-if="strike.strike === true"
+                                    v-for="(
+                                        letter, splitIndex
+                                    ) in word.splitWord"
+                                    :key="splitIndex"
                                 >
-                                    X
+                                    <div
+                                        :ref="'input' + splitIndex"
+                                        class="container-text-area ml-1 mr-1"
+                                        maxlength="1"
+                                    >
+                                        <div v-if="letter.show === true">
+                                            {{ letter.letter }}
+                                        </div>
+                                    </div>
                                 </div>
-                            </div>
-                        </v-row>
-                        <v-row
-                            class="justify-center mt-12"
-                            v-if="word.splitWord"
-                        >
-                            <div
-                                v-for="(letter, splitIndex) in word.splitWord"
-                                :key="splitIndex"
-                            >
+                            </v-row>
+                            <v-row class="justify-center mt-8">
                                 <div
-                                    :ref="'input' + splitIndex"
-                                    class="textArea ml-1 mr-1"
-                                    maxlength="1"
+                                    v-for="(
+                                        strike, strikeIndex
+                                    ) in sevenStrikesCounter"
+                                    :key="strikeIndex"
                                 >
-                                    <div v-if="letter.show === true">
-                                        {{ letter.letter }}
+                                    <div
+                                        v-if="strike.strike === false"
+                                        :ref="'strike' + strikeIndex"
+                                        class="container-strike-area d-flex justify-center align-center"
+                                        maxlength="1"
+                                    >
+                                        X
+                                    </div>
+                                    <div
+                                        class="container-strike"
+                                        v-if="strike.strike === true"
+                                    >
+                                        X
                                     </div>
                                 </div>
+                            </v-row>
+                            <div>
+                                <keyboard
+                                    v-if="!showFeedback"
+                                    :key="index"
+                                    :keyboardClass="keyBoardClass + index"
+                                    @onChange="onChange"
+                                    @onKeyPress="onKeyPress"
+                                    :input="input"
+                                />
                             </div>
-                        </v-row>
-                        <div>
-                            <keyboard
-                                v-if="!showFeedback"
-                                :key="index"
-                                :keyboardClass="keyBoardClass + index"
-                                @onChange="onChange"
-                                @onKeyPress="onKeyPress"
-                                :input="input"
-                            />
-                        </div>
-                        <v-row class="justify-center mt-12" v-if="showFeedback">
-                            <v-btn
-                                color="primary ml-4"
-                                @click="onRevealAnswer"
-                                >{{
-                                    $t(
-                                        'plugin.games.components.content.blocks.seven_strikes.reveal'
-                                    )
-                                }}</v-btn
-                            >
-                            <v-btn
-                                color="primary ml-4"
-                                @click="onSlideChanged(index)"
-                                >{{
-                                    $t(
-                                        'plugin.games.components.content.blocks.seven_strikes.again'
-                                    )
-                                }}</v-btn
-                            >
-                            <v-btn
-                                @click="onChangeSlide(index + 1)"
-                                color="primary ml-4"
-                                >{{
-                                    $t(
-                                        'plugin.games.components.content.blocks.seven_strikes.next'
-                                    )
-                                }}</v-btn
+                            <v-row
+                                class="justify-center mt-12"
+                                v-if="showFeedback"
                             >
-                        </v-row>
+                                <v-btn
+                                    color="primary ml-4"
+                                    @click="onRevealAnswer"
+                                    >{{
+                                        $t(
+                                            'windward.games.components.content.blocks.seven_strikes.reveal'
+                                        )
+                                    }}</v-btn
+                                >
+                                <v-btn
+                                    color="primary ml-4"
+                                    @click="onSlideChanged(index)"
+                                    >{{
+                                        $t(
+                                            'windward.games.components.content.blocks.seven_strikes.again'
+                                        )
+                                    }}</v-btn
+                                >
+                                <v-btn
+                                    @click="onChangeSlide(index + 1)"
+                                    color="primary ml-4"
+                                    >{{
+                                        $t(
+                                            'windward.games.components.content.blocks.seven_strikes.next'
+                                        )
+                                    }}</v-btn
+                                >
+                            </v-row>
+                        </v-container>
                     </v-carousel-item>
                 </v-carousel>
             </template>
@@ -152,6 +184,29 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
         }
+        if (_.isEmpty(this.block.metadata.config.currentWord)) {
+            this.block.metadata.config.currentWord = 0
+        }
+        if (_.isEmpty(this.block.metadata.config.title)) {
+            this.block.metadata.config.title = this.$t(
+                'windward.games.components.settings.seven_strikes.title'
+            )
+        }
+        if (_.isEmpty(this.block.metadata.config.instructions)) {
+            this.block.metadata.config.instructions = this.$t(
+                'windward.games.components.settings.seven_strikes.instructions'
+            )
+        }
+        if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
+            this.block.metadata.config.feedback_correct = this.$t(
+                'windward.games.components.settings.bucket_game.form.feedback.correct_default'
+            )
+        }
+        if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
+            this.block.metadata.config.feedback_incorrect = this.$t(
+                'windward.games.components.settings.bucket_game.form.feedback.incorrect_default'
+            )
+        }
         if (_.isEmpty(this.block.metadata.config.words)) {
             this.block.metadata.config.words = []
         }
@@ -174,16 +229,22 @@ export default {
             keyBoardClass: 'simple-keyboard',
             onSlide: 0,
             onStrike: 0,
-            carouselIndex: 0,
         }
     },
+    watch: {
+        render(newValue) {
+            if (newValue) {
+                this.block.metadata.config.currentWord = 0
+            }
+        },
+    },
     mounted() {},
     methods: {
         onChangeSlide(newIndex) {
             if (newIndex >= this.block.metadata.config.words.length) {
                 newIndex = 0
             }
-            this.carouselIndex = newIndex
+            this.block.metadata.config.currentWord = newIndex
             this.onSlideChanged(newIndex)
         },
         onChange(input) {
@@ -250,7 +311,7 @@ export default {
         thatIsIncorrect() {
             this.showFeedback = true
             // updates class
-            this.feedbackStatus = 'error'
+            this.feedbackStatus = 'errorOutline'
             // gets custom or standard feedback
             if (
                 !_.isEmpty(this.block.metadata.config.feedback_incorrect) &&
@@ -259,13 +320,13 @@ export default {
                 this.feedback = this.block.metadata.config.feedback_incorrect
             } else {
                 this.feedback = this.$t(
-                    'plugin.games.components.content.blocks.word_jumble.incorrect'
+                    'windward.games.components.content.blocks.word_jumble.incorrect'
                 )
             }
         },
         thatIsCorrect() {
             this.showFeedback = true
-            this.feedbackStatus = 'success'
+            this.feedbackStatus = 'successOutline'
             if (
                 !_.isEmpty(this.block.metadata.config.feedback_correct) &&
                 this.block.metadata.config.feedback_correct !== ''
@@ -273,7 +334,7 @@ export default {
                 this.feedback = this.block.metadata.config.feedback_correct
             } else {
                 this.feedback = this.$t(
-                    'plugin.games.components.content.blocks.word_jumble.correct'
+                    'windward.games.components.content.blocks.word_jumble.correct'
                 )
             }
         },
@@ -296,7 +357,7 @@ export default {
             this.feedbackStatus = ''
             this.onStrike = 0
             this.feedback = this.$t(
-                'plugin.games.components.content.blocks.word_jumble.feedback'
+                'windward.games.components.content.blocks.word_jumble.feedback'
             )
             // resets strikes
             this.sevenStrikesCounter.forEach((element) => {
@@ -329,39 +390,32 @@ export default {
 </script>
 
 <style scoped>
-.outline {
-    border: 2px solid black;
-    border-radius: 10px;
-}
-.clueAndJumble {
+.p-clue-jumble {
     font-size: 20px;
 }
-.spanBold {
-    font-weight: 900;
-}
-.error {
-    border: dashed 2px #dc3d1a;
-    background-color: #fff1f1;
+.errorOutline {
+    border: 4px solid var(--v-error-base);
+    color: var(--v-error-base);
 }
-.success {
-    border: dashed 2px #76b778;
-    background-color: #f1fff3;
+.successOutline {
+    border: 4px solid var(--v-success-base);
+    color: var(--v-success-base);
 }
-.textArea {
+.container-text-area {
     width: 20px;
     height: 20px;
-    border-bottom: 2px solid black;
+    border-bottom: 2px solid var(--v-primary-base);
     display: flex;
     justify-content: center;
     align-items: center;
 }
-.strikeArea {
-    width: 40px;
-    height: 40px;
-    border: 2px solid black;
+.container-strike-area {
+    color: gray;
+    font-size: 40px;
+    margin: 10px;
 }
-.strike {
-    color: #dc3d1a;
+.container-strike {
+    color: var(--v-error-base);
     font-size: 40px;
     margin: 10px;
 }

package/components/content/blocks/sevenStrikes/keyboard.vue

@@ -29,6 +29,13 @@ export default {
                     'z x c v b n m',
                 ],
             },
+            buttonTheme: [
+                {
+                    class: 'primary',
+                    buttons:
+                        'q w e r t y u i o p a s d f g h j k l z x c v b n m',
+                },
+            ],
             onChange: this.onChange,
             onKeyPress: this.onKeyPress,
         })
@@ -65,7 +72,7 @@ export default {
 <!-- Add "scoped" attribute to limit CSS to this component only -->
 <style scoped>
 .hg-theme-default {
-    padding: 55px;
-    margin-top: 25px;
+    padding: 25px 55px;
+    background-color: transparent !important;
 }
 </style>

package/components/content/blocks/slideshow/SlideShow.vue

@@ -4,7 +4,7 @@
             <h3
                 :aria-label="
                     $t(
-                        'plugin.games.components.content.blocks.slideshow.slideshow_title'
+                        'windward.games.components.content.blocks.slideshow.slideshow_title'
                     )
                 "
                 tabindex="0"
@@ -18,14 +18,14 @@
             <p tabindex="0">
                 {{
                     $t(
-                        'plugin.games.components.content.blocks.slideshow.basic_instructions'
+                        'windward.games.components.content.blocks.slideshow.basic_instructions'
                     )
                 }}
             </p>
         </div>
         <div>
             <template v-if="block.metadata.config.slides.length !== 0">
-                <v-carousel v-model="model">
+                <v-carousel v-model="block.metadata.config.currentSlide">
                     <template #prev="{ on, attrs }">
                         <v-btn
                             variant="elevated"
@@ -104,7 +104,7 @@ export default {
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = this.$t(
-                'plugin.games.components.settings.slideshow.form.slideshow_title'
+                'windward.games.components.settings.slideshow.form.slideshow_title'
             )
         }
 
@@ -120,7 +120,11 @@ export default {
         return {
             next: {},
             prev: {},
-            model: null,
+        }
+    },
+    watch: {
+        render(newValue) {
+            this.block.metadata.config.currentSlide = 0
         }
     },
     methods: {},

package/components/content/blocks/wordJumble/Jumble.vue

@@ -76,8 +76,6 @@ export default {
             // handles focusing on next element after student enters a letter
             if (!_.isEmpty(event) && this.$refs['input' + (index + 1)]) {
                 this.$refs['input' + (index + 1)][0].focus()
-            } else if (index !== 0 && _.isEmpty(event)) {
-                this.$refs['input' + (index - 1)][0].focus()
             }
             this.$emit('input', this.letterArray)
         },