@windward/games 0.0.3 → 0.0.5

package/components/settings/CrosswordPuzzleSettingsManager.vue

@@ -0,0 +1,271 @@
+<template>
+    <div>
+        <v-form ref="form" v-model="valid">
+            <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
+                                    :counter="20"
+                                    maxlength="20"
+                                    :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
+                                    :counter="155"
+                                    maxlength="155"
+                                    :label="
+                                        $t(
+                                            'plugin.games.components.settings.crossword.clue'
+                                        )
+                                    "
+                                    class="pt-4"
+                                    v-model="
+                                        block.metadata.config.words[index].clue
+                                    "
+                                ></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>
+</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
+            // ensures that there will always be at least two crossword elements to edit
+            while (counter < 2) {
+                const default_object = {
+                    id: counter,
+                    word: '',
+                    clue: '',
+                    expand: false,
+                }
+                counter = counter + 1
+                !this.block.metadata.config.words.push(default_object)
+            }
+        }
+    },
+    data() {
+        return {
+            valid: true,
+            cursor: null,
+        }
+    },
+    methods: {
+        onAddElement() {
+            // closes all elements that were expanded
+            this.block.metadata.config.words.forEach((element) => {
+                element.expand = false
+            })
+            // pushes in new crossword object and expands element
+            const default_object = {
+                id: this.block.metadata.config.words.length,
+                word: '',
+                clue: '',
+                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/MultipleChoiceSettingsManager.vue

@@ -28,13 +28,13 @@
                     <v-expansion-panels flat>
                         <v-expansion-panel>
                             <v-expansion-panel-header class="pa-0">
-                                <h3>
+                                <h5>
                                     {{
                                         $t(
                                             'plugin.games.components.settings.multiple_choice.questions'
                                         )
                                     }}
-                                </h3></v-expansion-panel-header
+                                </h5></v-expansion-panel-header
                             >
                             <v-expansion-panel-content class="ma-0">
                                 <v-container class="pa-0">
@@ -96,7 +96,7 @@
                                             @mouseover="onHover"
                                             @mouseleave="onHoverLeave"
                                             @click="onOpenModal"
-                                            v-on:keyup.enter="onOpenModal"
+                                            v-on:keydown.enter="onOpenModal"
                                             class="fullWidth"
                                             :class="cursor"
                                             tabindex="0"
@@ -149,6 +149,7 @@ import draggable from 'vuedraggable'
 import _ from 'lodash'
 import Dialog from '~/components/Dialog.vue'
 import QuestionDialog from '../content/blocks/multipleChoice/QuestionDialog.vue'
+import Crypto from '~/helpers/Crypto'
 
 export default {
     name: 'MultipleChoiceSettingsManager',
@@ -195,24 +196,32 @@ export default {
                 // when left the saveAndNew button it was causing errors
                 this.isNotEditing = false
             } else {
+                let firstAnswerId = Crypto.id()
                 this.block.metadata.config.questions.push({
+                    // crypto.id for all ids and then use filters
                     answer_options: [
                         {
-                            id: 1,
+                            id: firstAnswerId,
                             value: '',
                             correctAnswer: true,
                             disabled: false,
+                            chosen: false,
+                            focus: false,
                         },
                         {
-                            id: 2,
+                            id: Crypto.id(),
                             value: '',
                             correctAnswer: false,
                             disabled: false,
+                            chosen: false,
+                            focus: false,
                         },
                     ],
+                    correctAnswer: firstAnswerId,
                     body: '',
                     hint: '',
                     answer_description: '',
+                    id: Crypto.id(),
                 })
                 this.editingIndex =
                     this.block.metadata.config.questions.length - 1
@@ -222,21 +231,26 @@ export default {
             this.dialog = true
         },
         saveAndNewCalled() {
+            let firstAnswerId = Crypto.id()
             this.block.metadata.config.questions.push({
                 answer_options: [
                     {
-                        id: 1,
+                        id: firstAnswerId,
                         value: '',
                         correctAnswer: true,
                         disabled: false,
+                        chosen: false,
                     },
                     {
-                        id: 2,
+                        id: Crypto.id(),
                         value: '',
                         correctAnswer: false,
                         disabled: false,
+                        chosen: false,
                     },
                 ],
+                // needed to add this bc radio group needs the id of the answer in answerobjects array to set correct value
+                correctAnswer: firstAnswerId,
                 body: '',
                 hint: '',
                 answer_description: '',

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/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,22 @@
+export default {
+    crossword: 'Crossword Game',
+    add_element: 'Add Element',
+    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',
+}