@windward/games 0.0.2 → 0.0.4

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

@@ -1,7 +1,7 @@
 <template>
     <v-container>
         <v-col class="pa-0">
-            <h2>
+            <h3>
                 {{
                     block.metadata.config.title
                         ? block.metadata.config.title
@@ -9,7 +9,7 @@
                               'plugin.games.components.content.blocks.word_jumble.title'
                           )
                 }}
-            </h2>
+            </h3>
             <p>{{ block.metadata.config.instructions }}</p>
         </v-col>
         <v-col class="pa-0">
@@ -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 = ''

package/components/settings/CrosswordPuzzleSettingsManager.vue

@@ -0,0 +1,274 @@
+<template>
+    <div>
+        <v-form ref="form" v-model="valid" v-if="!loading">
+            <v-text-field
+                v-model="block.metadata.config.title"
+                :counter="50"
+                :label="
+                    $t(
+                        'plugin.games.components.settings.bucket_game.form.title'
+                    )
+                "
+                ref="title"
+            ></v-text-field>
+            <br />
+            <v-textarea
+                outlined
+                auto-grow
+                v-model="block.metadata.config.instructions"
+                :counter="255"
+                :label="
+                    $t(
+                        'plugin.games.components.settings.bucket_game.form.instructions'
+                    )
+                "
+            ></v-textarea>
+            <v-expansion-panels flat>
+                <v-expansion-panel>
+                    <v-expansion-panel-header class="pa-0"
+                        ><h3>
+                            {{
+                                $t(
+                                    'plugin.games.components.settings.crossword.crossword_items'
+                                )
+                            }}
+                        </h3></v-expansion-panel-header
+                    >
+                    <v-expansion-panel-content class="ma-0">
+                        <v-container class="pa-0">
+                            <p>
+                                {{
+                                    $t(
+                                        'plugin.games.components.settings.crossword.min_length'
+                                    )
+                                }}
+                            </p>
+                            <v-card
+                                v-for="(item, index) in block.metadata.config
+                                    .words"
+                                :key="'bucket_' + index"
+                                class="pa-2 flex-fill cardOutline"
+                                elevation="0"
+                                outlined
+                                tile
+                            >
+                                <v-row class="itemHeight">
+                                    <p
+                                        class="text-truncate pa-0 ma-0 seventy"
+                                        @click="onOpenEditor(index)"
+                                        v-on:keyup.enter="onOpenEditor(index)"
+                                        @mouseover="onHover"
+                                        @mouseleave="onHoverLeave"
+                                        :class="cursor"
+                                        tabindex="0"
+                                    >
+                                        <v-icon class="pl-2"
+                                            >mdi-gesture-tap-hold</v-icon
+                                        >
+                                        {{
+                                            item.word
+                                                ? item.word
+                                                : $t(
+                                                      'plugin.games.components.settings.bucket_game.form.enter_text'
+                                                  )
+                                        }}
+                                    </p>
+                                    <v-icon
+                                        class="twenty"
+                                        @click="onDelete(index)"
+                                        >mdi-delete-outline</v-icon
+                                    >
+                                </v-row>
+                                <v-textarea
+                                    v-if="item.expand"
+                                    outlined
+                                    :autofocus="true"
+                                    :label="
+                                        $t(
+                                            'plugin.games.components.settings.crossword.word'
+                                        )
+                                    "
+                                    class="pt-4"
+                                    v-model="
+                                        block.metadata.config.words[index].word
+                                    "
+                                ></v-textarea>
+                                <v-textarea
+                                    v-if="item.expand"
+                                    outlined
+                                    :label="
+                                        $t(
+                                            'plugin.games.components.settings.crossword.description'
+                                        )
+                                    "
+                                    class="pt-4"
+                                    v-model="
+                                        block.metadata.config.words[index]
+                                            .description
+                                    "
+                                ></v-textarea>
+                            </v-card>
+                            <p
+                                @mouseover="onHover"
+                                @mouseleave="onHoverLeave"
+                                @click="onAddElement"
+                                v-on:keyup.enter="onAddElement"
+                                class="fullWidth"
+                                :class="cursor"
+                                tabindex="0"
+                            >
+                                <v-icon class="primary addIcon"
+                                    >mdi-plus</v-icon
+                                >
+                                {{
+                                    $t(
+                                        'plugin.games.components.content.blocks.crossword.add_element'
+                                    )
+                                }}
+                            </p>
+                        </v-container>
+                    </v-expansion-panel-content>
+                </v-expansion-panel>
+            </v-expansion-panels>
+        </v-form>
+        <div v-if="loading" class="text-center">
+            <v-progress-circular
+                :size="70"
+                :width="7"
+                color="primary"
+                indeterminate
+            ></v-progress-circular>
+        </div>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+export default {
+    name: 'CrosswordPuzzleSettingsManager',
+    extends: BaseContentSettings,
+    components: {},
+    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.title)) {
+            this.block.metadata.config.title = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.instructions)) {
+            this.block.metadata.config.instructions = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.words)) {
+            this.block.metadata.config.words = []
+            let counter = 0
+            while (counter < 2) {
+                const default_object = {
+                    id: counter,
+                    word: '',
+                    description: '',
+                    expand: false,
+                }
+                counter = counter + 1
+                !this.block.metadata.config.words.push(default_object)
+            }
+        }
+    },
+    data() {
+        return {
+            valid: true,
+            loading: false,
+            cursor: null,
+        }
+    },
+    methods: {
+        onAddElement() {
+            this.block.metadata.config.words.forEach((element) => {
+                element.expand = false
+            })
+            const default_object = {
+                id: this.block.metadata.config.words.length,
+                word: '',
+                description: '',
+                expand: true,
+            }
+            this.block.metadata.config.words.push(default_object)
+        },
+        onDelete(index) {
+            this.block.metadata.config.words.splice(index, 1)
+            let counter = 0
+            this.block.metadata.config.words.forEach((element) => {
+                element.id = counter
+                counter = counter + 1
+            })
+            if (this.block.metadata.config.words.length < 2) {
+                this.onAddElement()
+            }
+        },
+        onOpenEditor(index) {
+            this.block.metadata.config.words[index].expand =
+                !this.block.metadata.config.words[index].expand
+            this.block.metadata.config.words.forEach((element) => {
+                if (index !== element.id) {
+                    element.expand = false
+                }
+            })
+        },
+        onHover(index) {
+            this.cursor = 'changePointer'
+        },
+        onHoverLeave() {
+            this.cursor = ''
+        },
+    },
+}
+</script>
+<style lang="scss" scoped>
+.v-progress-circular {
+    margin: 1rem;
+}
+.changePointer {
+    cursor: pointer !important;
+}
+.cardOutline {
+    border: 2px solid var(--v-primary-base);
+    margin-bottom: 8px;
+}
+.fullWidth {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-weight: bold;
+    font-size: 16px;
+}
+.itemHeight {
+    display: flex;
+    align-content: center;
+    justify-content: space-between;
+    height: 60px;
+}
+.seventy {
+    width: 70%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+}
+.twenty {
+    width: 20%;
+    height: 90%;
+    margin-top: 3px;
+    border-left: 2px solid var(--v-primary-base);
+}
+.addIcon {
+    margin-right: 5px;
+}
+.v-expansion-panel-content::v-deep .v-expansion-panel-content__wrap {
+    padding: 0 !important;
+}
+</style>

package/components/settings/WordJumbleSettingsManager.vue

@@ -209,11 +209,14 @@ export default {
     },
     methods: {
         onAddWord() {
+            this.block.metadata.config.words.forEach((element) => {
+                element.expand = false
+            })
             let defaultWord = {
                 id: this.block.metadata.config.words.length + 1,
                 value: '',
                 hint: '',
-                expand: false,
+                expand: true,
             }
             this.block.metadata.config.words.push(defaultWord)
         },

package/i18n/en-US/components/content/blocks/crossword.ts

@@ -0,0 +1,7 @@
+export default {
+    crossword: 'Crossword Game',
+    add_element: 'Add Element',
+    placeholder:
+        'THIS IS EXAMPLE DATA! MUST ENTER MORE THAN TWO WORDS & DESCRIPTIONS TO SEE EDITED TEXT',
+    play_again: 'Play Again',
+}

package/i18n/en-US/components/content/blocks/index.ts

@@ -6,6 +6,7 @@ import quizshow_game from './quizshow_game'
 import slideshow from './slideshow'
 import multiple_choice from './multiple_choice'
 import word_jumble from './word_jumble'
+import crossword from './crossword'
 
 export default {
     bucket_game,
@@ -16,4 +17,5 @@ export default {
     slideshow,
     multiple_choice,
     word_jumble,
+    crossword,
 }

package/i18n/en-US/components/settings/crossword.ts

@@ -0,0 +1,6 @@
+export default {
+    crossword_items: 'Crossword Items',
+    word: 'Word',
+    description: 'Description',
+    min_length: 'Cannot have less than two words',
+}

package/i18n/en-US/components/settings/index.ts

@@ -6,6 +6,7 @@ import slideshow from './slideshow'
 import multiple_choice from './multiple_choice'
 import sorting_game from './sorting_game'
 import word_jumble from './word_jumble'
+import crossword from './crossword'
 
 export default {
     bucket_game,
@@ -16,4 +17,5 @@ export default {
     slideshow,
     multiple_choice,
     sorting_game,
+    crossword,
 }

package/i18n/en-US/components/settings/word_jumble.ts

@@ -4,7 +4,7 @@ export default {
     instructions: 'Instructions',
     click: 'Click to enter text',
     label: 'Word for jumbling',
-    hint: 'Hint for word',
+    hint: 'Clue for word',
     add: 'Add Word',
     feedback_correct: 'Feedback when correct',
     feedback_incorrect: 'Feedback when incorrect',

package/i18n/en-US/shared/content_blocks.ts

@@ -8,6 +8,7 @@ export default {
         slideshow: 'Slideshow',
         multiple_choice: 'Multiple Choice',
         word_jumble: 'Word Jumble',
+        crossword_puzzle: 'Crossword',
     },
     grouping: {
         game: 'Activities',

package/i18n/en-US/shared/settings.ts

@@ -8,5 +8,6 @@ export default {
         quizshow_manager: 'Quizshow Manager',
         multiple_choice_manager: 'Multiple Choice Manager',
         wordjumble_manager: 'Word Jumble Manager',
+        crossword_puzzle_manager: 'Crossword Puzzle Manager',
     },
 }

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@windward/games",
-    "version": "0.0.2",
+    "version": "0.0.4",
     "description": "Windward UI Plugin Games",
     "main": "plugin.js",
     "scripts": {

package/plugin.js

@@ -15,6 +15,8 @@ import quizShow from './components/content/blocks/quizshowGame/QuizShow'
 import QuizShowSettingsManager from './components/settings/QuizShowSettingsManager'
 import MultipleChoice from './components/content/blocks/multipleChoice/MultipleChoice.vue'
 import MultipleChoiceSettingsManager from './components/settings/MultipleChoiceSettingsManager'
+import CrosswordPuzzle from './components/content/blocks/crosswordPuzzle/CrosswordPuzzle.vue'
+import CrosswordPuzzleSettingsManager from './components/settings/CrosswordPuzzleSettingsManager.vue'
 
 export default {
     name: 'Windward Games Plugin',
@@ -107,12 +109,22 @@ export default {
                 tag: 'games-wordjumble-game',
                 template: WordJumble,
                 metadata: {
-                    icon: 'mdi-alpha-w-box-outline',
+                    icon: 'mdi-ab-testing',
                     name: 'plugin.games.shared.content_blocks.title.word_jumble',
                     grouping:
                         'plugin.games.shared.content_blocks.grouping.game',
                 },
             },
+            {
+                tag: 'games-crossword-puzzle-game',
+                template: CrosswordPuzzle,
+                metadata: {
+                    icon: 'mdi-alpha-c-box-outline',
+                    name: 'plugin.games.shared.content_blocks.title.crossword_puzzle',
+                    grouping:
+                        'plugin.games.shared.content_blocks.grouping.game',
+                },
+            },
         ],
         settings: [
             {
@@ -187,6 +199,15 @@ export default {
                     name: 'plugin.games.shared.settings.title.wordjumble_manager',
                 },
             },
+            {
+                tag: 'games-crossword-puzzle-settings',
+                template: CrosswordPuzzleSettingsManager,
+                context: ['block.games-crossword-puzzle-game'],
+                metadata: {
+                    icon: 'mdi-cog',
+                    name: 'plugin.games.shared.settings.title.crossword_puzzle_manager',
+                },
+            },
         ],
     },
 }

package/test/blocks/crossword/CrosswordPuzzle.spec.js

@@ -0,0 +1,49 @@
+import { shallowMount } from '@vue/test-utils'
+import { defaultMocks } from '@windward/core/test/mocks'
+import CrosswordPuzzle from '@/components/content/blocks/crosswordPuzzle/CrosswordPuzzle'
+
+import Vuetify from 'vuetify'
+import Vue from 'vue'
+Vue.use(Vuetify)
+
+//override default mock
+jest.mock(
+    'lodash',
+    () => {
+        return {
+            cloneDeep: () => {
+                return []
+            },
+            isEmpty: () => {
+                return jest.fn()
+            },
+            flatten: () => {
+                return jest.fn()
+            },
+            get: () => {
+                return jest.fn()
+            },
+        }
+    },
+    { virtual: true }
+)
+describe('CrosswordPuzzle', () => {
+    test('is a Vue instance', () => {
+        const wrapper = shallowMount(CrosswordPuzzle, {
+            propsData: {
+                value: {
+                    id: '00000000-0000-0000-0000-000000000000',
+                    name: 'Test Content Page',
+                    body: '[]',
+                    metadata: {
+                        config: {
+                            words: [],
+                        },
+                    },
+                },
+            },
+            mocks: defaultMocks,
+        })
+        expect(wrapper.vm).toBeTruthy()
+    })
+})

package/test/settings/BucketGameManager.spec.js

@@ -9,7 +9,7 @@ Vue.use(Vuetify)
 const settings = {}
 const context = 'block'
 
-describe('Matching game manager', () => {
+describe('Bucket game manager', () => {
     test('is a Vue instance', () => {
         const wrapper = shallowMount(BucketGameSettingsManager, {
             propsData: {

package/test/settings/CrosswordPuzzleManager.spec.js

@@ -0,0 +1,103 @@
+import { shallowMount } from '@vue/test-utils'
+import { defaultMocks } from '@windward/core/test/mocks'
+import CrosswordPuzzleSettingsManager from '@/components/settings/CrosswordPuzzleSettingsManager'
+
+import Vuetify from 'vuetify'
+import Vue from 'vue'
+Vue.use(Vuetify)
+
+const settings = {}
+const context = 'block'
+
+describe('Crossword game manager', () => {
+    test('is a Vue instance', () => {
+        const wrapper = shallowMount(CrosswordPuzzleSettingsManager, {
+            propsData: {
+                block: {
+                    id: '00000000-0000-0000-0000-000000000000',
+                    name: 'Test Content Page',
+                    body: '{}',
+                    metadata: { config: {} },
+                },
+                settings: settings,
+                context: context,
+                data: {},
+                metadata: { config: {} },
+            },
+            mocks: defaultMocks,
+        })
+        expect(wrapper.vm).toBeTruthy()
+    })
+
+    test('can add new word', () => {
+        const wrapper = shallowMount(CrosswordPuzzleSettingsManager, {
+            propsData: {
+                block: {
+                    id: '00000000-0000-0000-0000-000000000000',
+                    name: 'Test Content Page',
+                    body: '{}',
+                    metadata: { config: {} },
+                },
+                settings: settings,
+                context: context,
+                data: {},
+                metadata: { config: {} },
+            },
+            mocks: defaultMocks,
+        })
+        wrapper.vm.onAddElement()
+        expect(wrapper.vm.block.metadata.config.words).toEqual([
+            {
+                id: 0,
+                word: '',
+                description: '',
+                expand: false,
+            },
+            {
+                id: 1,
+                word: '',
+                description: '',
+                expand: false,
+            },
+            {
+                id: 2,
+                word: '',
+                description: '',
+                expand: true,
+            },
+        ])
+    })
+
+    test('can delete word', () => {
+        const wrapper = shallowMount(CrosswordPuzzleSettingsManager, {
+            propsData: {
+                block: {
+                    id: '00000000-0000-0000-0000-000000000000',
+                    name: 'Test Content Page',
+                    body: '{}',
+                    metadata: { config: {} },
+                },
+                settings: settings,
+                context: context,
+                data: {},
+                metadata: { config: {} },
+            },
+            mocks: defaultMocks,
+        })
+        wrapper.vm.onDelete(1)
+        expect(wrapper.vm.block.metadata.config.words).toEqual([
+            {
+                id: 0,
+                word: '',
+                description: '',
+                expand: false,
+            },
+            {
+                id: 1,
+                word: '',
+                description: '',
+                expand: true,
+            },
+        ])
+    })
+})