@windward/games 0.0.4 → 0.0.6

package/components/settings/SevenStrikesSettingsManager.vue

@@ -0,0 +1,288 @@
+<template>
+    <div>
+        <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"
+            :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.seven_strikes.items'
+                            )
+                        }}
+                    </h3>
+                </v-expansion-panel-header>
+                <v-expansion-panel-content class="ma-0">
+                    <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.value
+                                        ? block.metadata.config.words[index]
+                                              .value
+                                        : $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.seven_strikes.word'
+                                )
+                            "
+                            class="pt-4"
+                            v-model="block.metadata.config.words[index].value"
+                        ></v-textarea>
+                        <v-textarea
+                            v-if="item.expand"
+                            outlined
+                            class="pt-4"
+                            :label="
+                                $t(
+                                    'plugin.games.components.settings.seven_strikes.hint'
+                                )
+                            "
+                            v-model="block.metadata.config.words[index].hint"
+                        ></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.sorting_game.add_element'
+                            )
+                        }}
+                    </p>
+                </v-expansion-panel-content>
+            </v-expansion-panel>
+        </v-expansion-panels>
+        <v-row class="mt-3">
+            <v-textarea
+                v-model="block.metadata.config.feedback_correct"
+                outlined
+                auto-grow
+                :counter="50"
+                :label="
+                    $t(
+                        'plugin.games.components.settings.word_jumble.feedback_correct'
+                    )
+                "
+                ref="title"
+            ></v-textarea>
+            <br />
+            <v-textarea
+                outlined
+                auto-grow
+                v-model="block.metadata.config.feedback_incorrect"
+                :label="
+                    $t(
+                        'plugin.games.components.settings.word_jumble.feedback_incorrect'
+                    )
+                "
+            ></v-textarea>
+            <br />
+        </v-row>
+    </div>
+</template>
+
+<script>
+import _ from 'lodash'
+import draggable from 'vuedraggable'
+import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
+import CrudTable from '../content/CrudTable.vue'
+
+export default {
+    name: 'SevenStrikesSettingsManager',
+    extends: BaseContentSettings,
+    components: { CrudTable, draggable },
+    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 = this.$t(
+                'plugin.games.components.settings.seven_strikes.instructions'
+            )
+        }
+        if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
+            this.block.metadata.config.feedback_correct = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
+            this.block.metadata.config.feedback_incorrect = ''
+        }
+        if (_.isEmpty(this.block.metadata.config.words)) {
+            this.block.metadata.config.words = []
+            const default_object = {
+                value: '',
+                expand: true,
+                hint: '',
+                splitWord: '',
+            }
+            this.block.metadata.config.words.push(default_object)
+        }
+    },
+    data() {
+        return {
+            cursor: null,
+        }
+    },
+    methods: {
+        onBeforeSave() {
+            this.block.metadata.config.words.forEach((element) => {
+                // check against lowercase keyboard inputs
+                element.value = element.value.toLowerCase()
+                element.splitWord = element.value.split('')
+                element.splitWord.forEach((letter) => {
+                    const letterIndex = element.splitWord.indexOf(letter)
+                    element.splitWord[letterIndex] = {
+                        letter: letter,
+                        show: false,
+                    }
+                })
+            })
+        },
+        onAddElement() {
+            this.block.metadata.config.words.forEach((element) => {
+                element.expand = false
+            })
+            const default_object = {
+                value: '',
+                expand: true,
+                hint: '',
+                splitWord: '',
+            }
+            this.block.metadata.config.words.push(default_object)
+        },
+        onHover(index) {
+            this.cursor = 'changePointer'
+        },
+        onHoverLeave() {
+            this.cursor = ''
+        },
+        onOpenEditor(index) {
+            // open target element
+            this.block.metadata.config.words[index].expand =
+                !this.block.metadata.config.words[index].expand
+            // close all other expanded areas
+            this.block.metadata.config.words.forEach((element) => {
+                let indexOf = this.block.metadata.config.words.indexOf(element)
+                if (index !== indexOf) {
+                    element.expand = false
+                }
+            })
+        },
+        onDelete(index) {
+            this.block.metadata.config.words.splice(index, 1)
+        },
+    },
+}
+</script>
+
+<style lang="scss" scoped>
+.v-progress-circular {
+    margin: 1rem;
+}
+.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;
+}
+.changePointer {
+    cursor: pointer !important;
+}
+.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);
+}
+.addButton {
+    height: 50%;
+    width: 50%;
+}
+.addIcon {
+    margin-right: 5px;
+}
+.v-expansion-panel-content::v-deep .v-expansion-panel-content__wrap {
+    padding: 0 !important;
+}
+</style>

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

@@ -1,7 +1,22 @@
 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',
+    initial_setup:
+        'Enter at least two words with clues to generate a crossword',
+    validation_error:
+        'The crossword could not be loaded because of the below error.',
+    error: {
+        min_words: 'You must enter at least two words with clues!',
+        words_no_shared_letters:
+            'The following words do not share letters: {0}',
+        word_length_max_limit: 'Cannot use words over 20 characters long.',
+        word_length_min_limit: 'Cannot use words under 2 characters long.',
+        could_not_generate:
+            'Could not generate a {0} by {0} crossword with the supplied words',
+        unknown: 'An unknown error occurred during the crossword creation',
+    },
+
+    play_again: 'Randomize Crossword and Play Again',
+    across: 'Across',
+    down: 'Down',
 }

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 seven_strikes from './seven_strikes'
 import crossword from './crossword'
 
 export default {
@@ -17,5 +18,6 @@ export default {
     slideshow,
     multiple_choice,
     word_jumble,
+    seven_strikes,
     crossword,
 }

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

@@ -1,11 +1,9 @@
 export default {
     game_title: 'Multiple Choice Game',
-    hint: 'View/Reset Hint',
+    hint: 'View Hint',
     fifty: '50:50',
-    print: 'View Print Version',
-    reset: 'Reset Game',
     hint_title: 'Hint',
-    answer_description: 'Answer Description',
+    answer_feedback: 'Answer Feedback',
     total_points: 'Total Points for Course',
     out_of: ' out of ',
 }

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

@@ -0,0 +1,6 @@
+export default {
+    title: 'Seven Strikes',
+    reveal: 'Reveal Answer',
+    again: 'Play Again',
+    next: 'Next',
+}

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

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

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 seven_strikes from './seven_strikes'
 import crossword from './crossword'
 
 export default {
@@ -17,5 +18,6 @@ export default {
     slideshow,
     multiple_choice,
     sorting_game,
+    seven_strikes,
     crossword,
 }

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

@@ -5,7 +5,7 @@ export default {
     questions: 'Questions',
     modal_title: 'Multiple Choice Question',
     question_hint: 'Question Hint',
-    answer_description: 'Answer Description',
+    answer_feedback: 'Answer Feedback',
     question: 'Question',
     answer_options: 'Answer Options',
     answer_option: 'Answer Option',

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

@@ -0,0 +1,8 @@
+export default {
+    title: 'Seven Strikes',
+    instructions:
+        'Read the clue below, and click on the letters to spell out the word the clue refers to. If you choose a letter that isnt in the word, an X will be illuminated. When you choose an incorrect letter 7 times, the game is over.Open a text-only version of this vocabulary game in a new windowSkip this vocabulary game',
+    word: 'Word or Phrase',
+    hint: 'Clue',
+    items: 'Items',
+}

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

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@windward/games",
-    "version": "0.0.4",
+    "version": "0.0.6",
     "description": "Windward UI Plugin Games",
     "main": "plugin.js",
     "scripts": {
@@ -20,6 +20,7 @@
         "eslint": "^8.11.0",
         "lodash": "^4.17.21",
         "prettier": "^2.6.0",
+        "simple-keyboard": "^3.6.28",
         "vue-excel-editor": "^1.5.19",
         "vue-flashcard": "^1.1.6",
         "vuedraggable": "^2.24.3"

package/plugin.js

@@ -3,6 +3,8 @@ import flashcards from './components/content/blocks/flashcards/FlashcardSlides'
 import slideShow from './components/content/blocks/slideshow/SlideShow.vue'
 import WordJumble from './components/content/blocks/wordJumble/WordJumble'
 import WordJumbleSettings from './components/settings/WordJumbleSettingsManager.vue'
+import SevenStrikes from './components/content/blocks/sevenStrikes/SevenStikes.vue'
+import SevenStrikesSettingsManager from './components/settings/SevenStrikesSettingsManager.vue'
 import FlashCardSlidesManager from './components/settings/FlashCardSlidesManager'
 import SlideShowManager from './components/settings/SlideShowManager.vue'
 import MatchingGameManager from './components/settings/MatchingGameManager.vue'
@@ -115,6 +117,16 @@ export default {
                         'plugin.games.shared.content_blocks.grouping.game',
                 },
             },
+            {
+                tag: 'games-seven-strikes-game',
+                template: SevenStrikes,
+                metadata: {
+                    icon: 'mdi-ab-testing',
+                    name: 'plugin.games.shared.content_blocks.title.seven_strikes',
+                    grouping:
+                        'plugin.games.shared.content_blocks.grouping.game',
+                },
+            },
             {
                 tag: 'games-crossword-puzzle-game',
                 template: CrosswordPuzzle,
@@ -199,6 +211,15 @@ export default {
                     name: 'plugin.games.shared.settings.title.wordjumble_manager',
                 },
             },
+            {
+                tag: 'games-seven-strikes-settings',
+                template: SevenStrikesSettingsManager,
+                context: ['block.games-seven-strikes-game'],
+                metadata: {
+                    icon: 'mdi-cog',
+                    name: 'plugin.games.shared.settings.title.seven_strikes_manager',
+                },
+            },
             {
                 tag: 'games-crossword-puzzle-settings',
                 template: CrosswordPuzzleSettingsManager,

package/test/blocks/sevenStrikes/sevenStrikes.spec.js

@@ -0,0 +1,24 @@
+import { shallowMount } from '@vue/test-utils'
+import { defaultMocks } from '@windward/core/test/mocks'
+import SevenStrikes from '@/components/content/blocks/sevenStrikes/SevenStikes'
+
+import Vuetify from 'vuetify'
+import Vue from 'vue'
+Vue.use(Vuetify)
+
+describe('SevenStrikesGame', () => {
+    test('is a Vue instance', () => {
+        const wrapper = shallowMount(SevenStrikes, {
+            propsData: {
+                value: {
+                    id: '00000000-0000-0000-0000-000000000000',
+                    name: 'Test Content Page',
+                    body: '{}',
+                    metadata: { config: {} },
+                },
+            },
+            mocks: defaultMocks,
+        })
+        expect(wrapper.vm).toBeTruthy()
+    })
+})

package/test/settings/SevenStrikesManager.spec.js

@@ -0,0 +1,53 @@
+import { shallowMount } from '@vue/test-utils'
+import { defaultMocks } from '@windward/core/test/mocks'
+import SevenStrikesSettingsManager from '@/components/settings/SevenStrikesSettingsManager'
+
+import Vuetify from 'vuetify'
+import Vue from 'vue'
+Vue.use(Vuetify)
+
+const settings = {}
+const context = 'block'
+
+describe('Seven Strikes slides manager', () => {
+    test('is a Vue instance', () => {
+        const wrapper = shallowMount(SevenStrikesSettingsManager, {
+            propsData: {
+                settings: settings,
+                context: context,
+                data: {},
+            },
+            mocks: defaultMocks,
+        })
+        expect(wrapper.vm).toBeTruthy()
+    })
+
+    test('can add word', () => {
+        const wrapper = shallowMount(SevenStrikesSettingsManager, {
+            propsData: {
+                settings: settings,
+                context: context,
+                data: {},
+            },
+            mocks: defaultMocks,
+        })
+        wrapper.vm.onAddElement()
+        expect(wrapper.vm.block.metadata.config.words).toEqual([
+            { value: '', expand: false, hint: '', splitWord: '' },
+            { value: '', expand: true, hint: '', splitWord: '' },
+        ])
+    })
+
+    test('can delete a word', () => {
+        const wrapper = shallowMount(SevenStrikesSettingsManager, {
+            propsData: {
+                settings: settings,
+                context: context,
+                data: {},
+            },
+            mocks: defaultMocks,
+        })
+        wrapper.vm.onDelete(0)
+        expect(wrapper.vm.block.metadata.config.words).toEqual([])
+    })
+})