@windward/games 0.0.3 → 0.0.5

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

@@ -0,0 +1,368 @@
+<template>
+    <div>
+        <v-col class="pa-0">
+            <h3>
+                {{
+                    block.metadata.config.title
+                        ? block.metadata.config.title
+                        : $t(
+                              'plugin.games.components.content.blocks.seven_strikes.title'
+                          )
+                }}
+            </h3>
+            <p>{{ block.metadata.config.instructions }}</p>
+        </v-col>
+        <v-col class="pa-0">
+            <template>
+                <v-carousel
+                    v-model="carouselIndex"
+                    @change="onSlideChanged($event)"
+                >
+                    <v-carousel-item
+                        v-for="(word, index) in block.metadata.config.words"
+                        :key="index"
+                    >
+                        <v-row class="d-flex justify-center ma-2">
+                            <p class="pa-3 mb-0 clueAndJumble">
+                                {{ word.hint }}
+                            </p>
+                        </v-row>
+                        <v-container
+                            v-if="showFeedback"
+                            :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-col>
+                            </v-row>
+                        </v-container>
+                        <v-row class="justify-center">
+                            <div
+                                v-for="(
+                                    strike, strikeIndex
+                                ) in sevenStrikesCounter"
+                                :key="strikeIndex"
+                            >
+                                <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"
+                                >
+                                    X
+                                </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"
+                            >
+                                <div
+                                    :ref="'input' + splitIndex"
+                                    class="textArea ml-1 mr-1"
+                                    maxlength="1"
+                                >
+                                    <div v-if="letter.show === true">
+                                        {{ letter.letter }}
+                                    </div>
+                                </div>
+                            </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>
+                    </v-carousel-item>
+                </v-carousel>
+            </template>
+        </v-col>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import draggable from 'vuedraggable'
+import keyboard from './keyboard.vue'
+import CrudTable from '../../CrudTable'
+import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
+
+export default {
+    name: 'SevenStrikesGame',
+    components: { CrudTable, draggable, keyboard },
+    extends: BaseContentBlock,
+    beforeMount() {
+        if (_.isEmpty(this.block)) {
+            this.block = {}
+        }
+        if (_.isEmpty(this.block.metadata)) {
+            this.block.metadata = {}
+        }
+        if (_.isEmpty(this.block.metadata.config)) {
+            this.block.metadata.config = {}
+        }
+        if (_.isEmpty(this.block.metadata.config.words)) {
+            this.block.metadata.config.words = []
+        }
+    },
+    data() {
+        return {
+            feedback: '',
+            feedbackStatus: '',
+            showFeedback: false,
+            input: '',
+            sevenStrikesCounter: [
+                { strike: false },
+                { strike: false },
+                { strike: false },
+                { strike: false },
+                { strike: false },
+                { strike: false },
+                { strike: false },
+            ],
+            keyBoardClass: 'simple-keyboard',
+            onSlide: 0,
+            onStrike: 0,
+            carouselIndex: 0,
+        }
+    },
+    mounted() {},
+    methods: {
+        onChangeSlide(newIndex) {
+            if (newIndex >= this.block.metadata.config.words.length) {
+                newIndex = 0
+            }
+            this.carouselIndex = newIndex
+            this.onSlideChanged(newIndex)
+        },
+        onChange(input) {
+            this.input = input
+        },
+        onKeyPress(letter) {
+            // can't play when editing
+            if (this.render) {
+                // to lowercase
+                letter = letter.toLowerCase()
+                // check if word value contains input letter
+                const doesContain =
+                    this.block.metadata.config.words[
+                        this.onSlide
+                    ].value.includes(letter)
+                if (doesContain) {
+                    // loop over to show letters in case there are multiple of the same
+                    this.block.metadata.config.words[
+                        this.onSlide
+                    ].splitWord.forEach((character) => {
+                        if (character.letter === letter) {
+                            character.show = true
+                        }
+                    })
+                } else {
+                    // checks if the user is already out of strikes
+                    if (this.onStrike <= 6) {
+                        this.sevenStrikesCounter[this.onStrike].strike = true
+                        this.onStrike = this.onStrike + 1
+                    }
+                }
+                const isComplete = this.checkIfComplete()
+                const checkStrikes = this.checkStrikes()
+                if (isComplete) {
+                    this.thatIsCorrect()
+                }
+                if (checkStrikes) {
+                    this.thatIsIncorrect()
+                }
+            }
+        },
+        checkIfComplete() {
+            // checks to see if the user guessed all the letters correctly
+            let finished = true
+            this.block.metadata.config.words[this.onSlide].splitWord.forEach(
+                (element) => {
+                    if (element.show === false) {
+                        finished = false
+                    }
+                }
+            )
+            return finished
+        },
+        checkStrikes() {
+            // checks to see if user has exhausted strikes
+            let outOfStrikes = true
+            this.sevenStrikesCounter.forEach((element) => {
+                if (element.strike === false) {
+                    outOfStrikes = false
+                }
+            })
+            return outOfStrikes
+        },
+        thatIsIncorrect() {
+            this.showFeedback = true
+            // updates class
+            this.feedbackStatus = 'error'
+            // gets custom or standard feedback
+            if (
+                !_.isEmpty(this.block.metadata.config.feedback_incorrect) &&
+                this.block.metadata.config.feedback_incorrect !== ''
+            ) {
+                this.feedback = this.block.metadata.config.feedback_incorrect
+            } else {
+                this.feedback = this.$t(
+                    'plugin.games.components.content.blocks.word_jumble.incorrect'
+                )
+            }
+        },
+        thatIsCorrect() {
+            this.showFeedback = true
+            this.feedbackStatus = 'success'
+            if (
+                !_.isEmpty(this.block.metadata.config.feedback_correct) &&
+                this.block.metadata.config.feedback_correct !== ''
+            ) {
+                this.feedback = this.block.metadata.config.feedback_correct
+            } else {
+                this.feedback = this.$t(
+                    'plugin.games.components.content.blocks.word_jumble.correct'
+                )
+            }
+        },
+        onHideFeedback() {
+            // fired from feedback x
+            this.showFeedback = false
+            this.onSlideChanged(this.onSlide)
+        },
+        onInputChange(input) {
+            // catches target input
+            this.input = input.target.value
+        },
+        onSlideChanged(event) {
+            // this function is called when the slide is changed
+            // manually resetting is necessary due to fact that components do not remount
+            // event hold slide index
+            this.onSlide = event
+            // hides feedback if showing
+            this.showFeedback = false
+            this.feedbackStatus = ''
+            this.onStrike = 0
+            this.feedback = this.$t(
+                'plugin.games.components.content.blocks.word_jumble.feedback'
+            )
+            // resets strikes
+            this.sevenStrikesCounter.forEach((element) => {
+                element.strike = false
+            })
+            if (
+                this.block.metadata.config.words[this.onSlide].splitWord &&
+                this.block.metadata.config.words[this.onSlide].splitWord
+                    .length > 0
+            ) {
+                // rehides the displayed correct letters
+                this.block.metadata.config.words[
+                    this.onSlide
+                ].splitWord.forEach((word) => {
+                    if (word.show) {
+                        word.show = false
+                    }
+                })
+            }
+        },
+        onRevealAnswer() {
+            this.block.metadata.config.words[this.onSlide].splitWord.forEach(
+                (word) => {
+                    word.show = true
+                }
+            )
+        },
+    },
+}
+</script>
+
+<style scoped>
+.outline {
+    border: 2px solid black;
+    border-radius: 10px;
+}
+.clueAndJumble {
+    font-size: 20px;
+}
+.spanBold {
+    font-weight: 900;
+}
+.error {
+    border: dashed 2px #dc3d1a;
+    background-color: #fff1f1;
+}
+.success {
+    border: dashed 2px #76b778;
+    background-color: #f1fff3;
+}
+.textArea {
+    width: 20px;
+    height: 20px;
+    border-bottom: 2px solid black;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+.strikeArea {
+    width: 40px;
+    height: 40px;
+    border: 2px solid black;
+}
+.strike {
+    color: #dc3d1a;
+    font-size: 40px;
+    margin: 10px;
+}
+</style>

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

@@ -0,0 +1,71 @@
+<template>
+    <div :class="keyboardClass"></div>
+</template>
+
+<script>
+import Keyboard from 'simple-keyboard'
+import 'simple-keyboard/build/css/index.css'
+
+export default {
+    name: 'SimpleKeyboard',
+    props: {
+        keyboardClass: {
+            default: 'simple-keyboard',
+            type: String,
+        },
+        input: {
+            type: String,
+        },
+    },
+    data: () => ({
+        keyboard: null,
+    }),
+    mounted() {
+        this.keyboard = new Keyboard(this.keyboardClass, {
+            layout: {
+                default: [
+                    '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,
+        })
+    },
+    methods: {
+        onChange(input) {
+            this.$emit('onChange', input)
+        },
+        onKeyPress(button) {
+            this.$emit('onKeyPress', button)
+
+            /**
+             * If you want to handle the shift and caps lock buttons
+             */
+            if (button === '{shift}' || button === '{lock}') this.handleShift()
+        },
+        handleShift() {
+            let currentLayout = this.keyboard.options.layoutName
+            let shiftToggle = currentLayout === 'default' ? 'shift' : 'default'
+
+            this.keyboard.setOptions({
+                layoutName: shiftToggle,
+            })
+        },
+    },
+    watch: {
+        input(input) {
+            this.keyboard.setInput(input)
+        },
+    },
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped>
+.hg-theme-default {
+    padding: 55px;
+    margin-top: 25px;
+}
+</style>

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

@@ -9,7 +9,6 @@
                     class="textArea ml-1 mr-1"
                     maxlength="1"
                     @input="onInput($event, index)"
-                    v-on:keydown="onSpaceHandler($event)"
                 ></v-text-field>
             </div>
         </v-row>
@@ -43,8 +42,8 @@ export default {
             handler(newValue) {
                 // removes students answer from input if they got it correct
                 this.splitUpWord()
-            }
-        }
+            },
+        },
     },
     data() {
         return {
@@ -71,13 +70,6 @@ export default {
                 }
             }
         },
-        onSpaceHandler(event) {
-            // prevents empty space from being entered
-            if (event.keyCode === 32) {
-                event.preventDefault()
-                return false
-            }
-        },
         onInput(event, index) {
             // handles focusing on next element after student enters a letter
             if (!_.isEmpty(event) && this.$refs['input' + (index + 1)]) {

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

@@ -19,7 +19,7 @@
                         v-for="(word, index) in block.metadata.config.words"
                         :key="index"
                     >
-                        <v-row class="d-flex justify-center outline ma-2">
+                        <v-row class="d-flex justify-center ma-2">
                             <p class="pa-3 mb-0 clueAndJumble">
                                 <span class="spanBold"
                                     >{{
@@ -36,15 +36,22 @@
                                 {{ shuffle(word.value) }}
                             </p>
                         </v-row>
-                        <v-container :key="'feedback'" :class="feedbackStatus">
-                            <br />
-                            <v-row
-                                class="d-flex justify-space-around"
-                                align="center"
-                                justify="center"
-                                >{{ feedback }}
+                        <v-container
+                            v-if="showFeedback"
+                            :key="'feedback'"
+                            :class="feedbackStatus"
+                        >
+                            <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-col>
                             </v-row>
-                            <br />
                         </v-container>
                         <v-row class="justify-center mt-4">
                             <Jumble
@@ -124,6 +131,7 @@ export default {
                 'plugin.games.components.content.blocks.word_jumble.feedback'
             ),
             showAnswer: false,
+            showFeedback: false,
             resetValue: false,
             studentResponse: '',
             feedbackStatus: '',
@@ -166,8 +174,12 @@ export default {
             // reveal prop changed to true to show answer
             this.showAnswer = true
         },
+        onHideFeedback() {
+            this.showFeedback = false
+        },
         onCheckAnswer(word) {
             this.studentResponse = this.studentResponse.toLowerCase()
+            this.showFeedback = true
             const answer = word.value.toLowerCase()
             if (this.studentResponse === answer) {
                 // updates class
@@ -202,7 +214,7 @@ export default {
         },
         onSlideChanged() {
             // this function is called when the slide is changed
-            // reset the game each time this occurs via props due to fact 
+            // reset the game each time this occurs via props due to fact
             // that components do not remount on slides each time the slide is revisited
             // updates class
             this.feedbackStatus = ''