@windward/games 0.0.10 → 0.1.1

package/components/settings/SevenStrikesSettingsManager.vue

@@ -1,139 +1,126 @@
 <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>
+        <v-form ref="form" v-model="valid" v-if="!loading">
+            <v-container class="pa-0">
+                <v-text-field
+                    v-model="block.metadata.config.title"
+                    outlined
+                    :counter="50"
+                    :autofocus="true"
+                    :label="
+                        $t(
+                            'windward.games.components.settings.bucket_game.form.title'
+                        )
+                    "
+                    ref="title"
+                ></v-text-field>
+                <v-textarea
+                    v-model="block.metadata.config.instructions"
+                    outlined
+                    auto-grow
+                    :label="
+                        $t(
+                            'windward.games.components.settings.bucket_game.form.instructions'
+                        )
+                    "
+                ></v-textarea>
+            </v-container>
+            <v-divider class="my-4 primary"></v-divider>
+            <v-container class="pa-0">
+                <p>
+                    {{
+                        $t(
+                            'windward.games.components.settings.seven_strikes.items'
+                        )
+                    }}
+                </p>
+                <SortableExpansionPanel
+                    v-model="block.metadata.config.words"
+                    v-bind:currentPanel.sync="block.metadata.config.currentWord"
+                    @click:close="onDelete($event)"
+                >
+                    <template #header="{ item, index }">
                         {{
-                            $t(
-                                'plugin.games.components.settings.seven_strikes.items'
-                            )
+                            item.value
+                                ? block.metadata.config.words[index].value
+                                : $t(
+                                      'windward.games.components.settings.bucket_game.form.enter_text'
+                                  )
                         }}
-                    </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>
+                    </template>
+                    <template #body="{ item, index }">
+                        <v-container>
+                            <v-flex xs12>
+                                <p class="p-label">
+                                    {{
+                                        $t(
+                                            'windward.games.components.settings.seven_strikes.word'
+                                        )
+                                    }}
+                                </p>
+                                <v-textarea
+                                    v-model="
+                                        block.metadata.config.words[index].value
+                                    "
+                                    outlined
+                                    :autofocus="true"
+                                ></v-textarea>
+                                <p class="p-label">
+                                    {{
+                                        $t(
+                                            'windward.games.components.settings.seven_strikes.hint'
+                                        )
+                                    }}
+                                </p>
+                                <v-textarea
+                                    v-model="
+                                        block.metadata.config.words[index].hint
+                                    "
+                                    outlined
+                                    class="pt-4"
+                                ></v-textarea>
+                            </v-flex>
+                        </v-container>
+                    </template>
+                </SortableExpansionPanel>
+            </v-container>
+            <v-container class="pa-0">
+                <v-row justify="center" class="my-4">
+                    <v-btn color="primary" @click="onAddElement">
+                        <v-icon>mdi-plus</v-icon>
                         {{
                             $t(
-                                'plugin.games.components.content.blocks.sorting_game.add_element'
+                                'windward.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>
+                    </v-btn>
+                </v-row>
+            </v-container>
+            <v-row class="mt-3">
+                <v-textarea
+                    v-model="block.metadata.config.feedback_correct"
+                    outlined
+                    auto-grow
+                    :counter="50"
+                    :label="
+                        $t(
+                            'windward.games.components.settings.word_jumble.feedback_correct'
+                        )
+                    "
+                    ref="title"
+                ></v-textarea>
+                <v-textarea
+                    v-model="block.metadata.config.feedback_incorrect"
+                    outlined
+                    auto-grow
+                    :label="
+                        $t(
+                            'windward.games.components.settings.word_jumble.feedback_incorrect'
+                        )
+                    "
+                ></v-textarea>
+            </v-row>
+        </v-form>
     </div>
 </template>
 
@@ -142,11 +129,12 @@ import _ from 'lodash'
 import draggable from 'vuedraggable'
 import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
 import CrudTable from '../content/CrudTable.vue'
+import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
 
 export default {
     name: 'SevenStrikesSettingsManager',
     extends: BaseContentSettings,
-    components: { CrudTable, draggable },
+    components: { CrudTable, draggable, SortableExpansionPanel },
     beforeMount() {
         if (_.isEmpty(this.block)) {
             this.block = {}
@@ -157,19 +145,28 @@ 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.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(
-                'plugin.games.components.settings.seven_strikes.instructions'
+                'windward.games.components.settings.seven_strikes.instructions'
             )
         }
         if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
-            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 = ''
+        if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
+            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 = []
@@ -184,7 +181,8 @@ export default {
     },
     data() {
         return {
-            cursor: null,
+            valid: true,
+            loading: false,
         }
     },
     methods: {
@@ -220,27 +218,13 @@ export default {
                 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
-                }
-            })
+            this.block.metadata.config.currentWord =
+                this.block.metadata.config.words.length - 1
         },
         onDelete(index) {
             this.block.metadata.config.words.splice(index, 1)
+            this.block.metadata.config.currentWord =
+                this.block.metadata.config.words.length - 1
         },
     },
 }
@@ -250,46 +234,8 @@ export default {
 .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;
+.p-label {
     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;
+    font-weight: 500;
 }
 </style>

package/components/settings/SlideShowManager.vue

@@ -9,7 +9,7 @@
                     maxlength="50"
                     :label="
                         $t(
-                            'plugin.games.components.settings.slideshow.form.title'
+                            'windward.games.components.settings.slideshow.form.title'
                         )
                     "
                 ></v-text-field>
@@ -21,7 +21,7 @@
                     maxlength="255"
                     :label="
                         $t(
-                            'plugin.games.components.settings.slideshow.form.instructions'
+                            'windward.games.components.settings.slideshow.form.instructions'
                         )
                     "
                 ></v-textarea>
@@ -31,12 +31,13 @@
                 <p>
                     {{
                         $t(
-                            'plugin.games.components.settings.slideshow.form.items'
+                            'windward.games.components.settings.slideshow.form.items'
                         )
                     }}
                 </p>
                 <SortableExpansionPanel
                     v-model="block.metadata.config.slides"
+                    v-bind:currentPanel.sync="block.metadata.config.currentSlide"
                     @click:close="onDeleteSlide($event)"
                 >
                     <template #header="{ item, index }">
@@ -44,7 +45,7 @@
                             item.header
                                 ? item.header
                                 : $t(
-                                      'plugin.games.components.content.blocks.slideshow.slides.slide',
+                                      'windward.games.components.content.blocks.slideshow.slides.slide',
                                       [index + 1]
                                   )
                         }}
@@ -56,7 +57,7 @@
                             outlined
                             :label="
                                 $t(
-                                    'plugin.games.components.content.blocks.slideshow.slides.slide_header'
+                                    'windward.games.components.content.blocks.slideshow.slides.slide_header'
                                 )
                             "
                         ></v-text-field>
@@ -67,7 +68,7 @@
                             outlined
                             :label="
                                 $t(
-                                    'plugin.games.components.content.blocks.slideshow.slides.slide_description'
+                                    'windward.games.components.content.blocks.slideshow.slides.slide_description'
                                 )
                             "
                         ></v-text-field>
@@ -78,7 +79,7 @@
                             outlined
                             :label="
                                 $t(
-                                    'plugin.games.components.content.blocks.slideshow.slides.image_alt'
+                                    'windward.games.components.content.blocks.slideshow.slides.image_alt'
                                 )
                             "
                         ></v-text-field>
@@ -95,7 +96,7 @@
                             <v-icon>mdi-plus</v-icon>
                             {{
                                 $t(
-                                    'plugin.games.components.content.blocks.slideshow.add_slide'
+                                    'windward.games.components.content.blocks.slideshow.add_slide'
                                 )
                             }}
                         </v-btn>
@@ -139,9 +140,12 @@ export default {
         if (_.isEmpty(this.block.metadata.config)) {
             this.block.metadata.config = {}
         }
+        if (_.isEmpty(this.block.metadata.config.currentSlide)) {
+            this.block.metadata.config.currentSlide = 0
+        }
         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'
             )
         }
         if (_.isEmpty(this.block.metadata.config.instructions)) {
@@ -174,6 +178,8 @@ export default {
                 image_alt: '',
             }
             this.block.metadata.config.slides.push(defaultSlide)
+            this.block.metadata.config.currentSlide =
+                this.block.metadata.config.slides.length - 1
         },
         onDeleteSlide(index) {
             this.$toast.info(this.$t('shared.forms.confirm_delete_text'), {
@@ -196,6 +202,8 @@ export default {
                     },
                 ],
             })
+            this.block.metadata.config.currentSlide =
+                this.block.metadata.config.slides.length - 1
         },
     },
 }

package/components/settings/SortingGameSettingsManager.vue

@@ -9,7 +9,7 @@
                     :counter="50"
                     :label="
                         $t(
-                            'plugin.games.components.settings.bucket_game.form.title'
+                            'windward.games.components.settings.bucket_game.form.title'
                         )
                     "
                     ref="title"
@@ -21,7 +21,7 @@
                     :counter="255"
                     :label="
                         $t(
-                            'plugin.games.components.settings.bucket_game.form.instructions'
+                            'windward.games.components.settings.bucket_game.form.instructions'
                         )
                     "
                 ></v-textarea>
@@ -31,7 +31,7 @@
                 <p>
                     {{
                         $t(
-                            'plugin.games.components.settings.sorting_game.sortable_items'
+                            'windward.games.components.settings.sorting_game.sortable_items'
                         )
                     }}
                 </p>
@@ -44,7 +44,7 @@
                             item.value
                                 ? block.metadata.config.answer[index].value
                                 : $t(
-                                      'plugin.games.components.settings.bucket_game.form.enter_text'
+                                      'windward.games.components.settings.bucket_game.form.enter_text'
                                   )
                         }}
                     </template>
@@ -53,7 +53,7 @@
                             <p class="p-label">
                                 {{
                                     $t(
-                                        'plugin.games.components.settings.sorting_game.word'
+                                        'windward.games.components.settings.sorting_game.word'
                                     )
                                 }}
                             </p>
@@ -74,7 +74,7 @@
                         <v-icon>mdi-plus</v-icon>
                         {{
                             $t(
-                                'plugin.games.components.settings.bucket_game.form.add_answer'
+                                'windward.games.components.settings.bucket_game.form.add_answer'
                             )
                         }}
                     </v-btn>
@@ -86,7 +86,7 @@
                     :counter="255"
                     :label="
                         $t(
-                            'plugin.games.components.settings.bucket_game.form.feedback.correct'
+                            'windward.games.components.settings.bucket_game.form.feedback.correct'
                         )
                     "
                 ></v-textarea>
@@ -97,7 +97,7 @@
                     :counter="255"
                     :label="
                         $t(
-                            'plugin.games.components.settings.bucket_game.form.feedback.incorrect'
+                            'windward.games.components.settings.bucket_game.form.feedback.incorrect'
                         )
                     "
                 ></v-textarea>
@@ -134,17 +134,17 @@ export default {
         }
         if (_.isEmpty(this.block.metadata.config.title)) {
             this.block.metadata.config.title = this.$t(
-                'plugin.games.components.settings.sorting_game.sortable_game'
+                'windward.games.components.settings.sorting_game.sortable_game'
             )
         }
         if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
             this.block.metadata.config.feedback_correct = this.$t(
-                'plugin.games.components.settings.bucket_game.form.feedback.correct_default'
+                'windward.games.components.settings.bucket_game.form.feedback.correct_default'
             )
         }
         if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
             this.block.metadata.config.feedback_incorrect = this.$t(
-                'plugin.games.components.settings.bucket_game.form.feedback.incorrect_default'
+                'windward.games.components.settings.bucket_game.form.feedback.incorrect_default'
             )
         }
         if (_.isEmpty(this.block.metadata.config.answer)) {