@windward/games 0.2.1 → 0.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (30) hide show
  1. package/components/content/DatableEditor.vue +1 -1
  2. package/components/content/blocks/crosswordPuzzle/CrosswordPuzzle.vue +1 -0
  3. package/components/content/blocks/dragDrop/BucketGame.vue +2 -2
  4. package/components/content/blocks/dragDrop/SortingGame.vue +38 -36
  5. package/components/content/blocks/flashcards/FlashcardSlides.vue +5 -12
  6. package/components/content/blocks/matchingGame/MatchingGame.vue +8 -13
  7. package/components/content/blocks/multipleChoice/MultipleChoice.vue +34 -10
  8. package/components/content/blocks/multipleChoice/QuestionDialog.vue +25 -21
  9. package/components/content/blocks/quizshowGame/AnswerPanel.vue +2 -3
  10. package/components/content/blocks/quizshowGame/Gridview.vue +3 -2
  11. package/components/content/blocks/sevenStrikes/SevenStikes.vue +31 -3
  12. package/components/content/blocks/slideshow/SlideShow.vue +5 -12
  13. package/components/content/blocks/wordJumble/WordJumble.vue +25 -1
  14. package/components/settings/BucketGameSettingsManager.vue +20 -4
  15. package/components/settings/CrosswordPuzzleSettingsManager.vue +19 -10
  16. package/components/settings/FlashCardSlidesManager.vue +121 -83
  17. package/components/settings/MatchingGameManager.vue +77 -43
  18. package/components/settings/MultipleChoiceSettingsManager.vue +33 -78
  19. package/components/settings/QuizShowSettingsManager.vue +26 -13
  20. package/components/settings/SevenStrikesSettingsManager.vue +16 -5
  21. package/components/settings/SlideShowManager.vue +15 -4
  22. package/components/settings/SortingGameSettingsManager.vue +18 -8
  23. package/components/settings/WordJumbleSettingsManager.vue +21 -10
  24. package/jest.config.js +0 -1
  25. package/package.json +2 -2
  26. package/plugin.js +6 -6
  27. package/test/__mocks__/componentsMock.js +3 -1
  28. package/test/__mocks__/modelMock.js +13 -84
  29. package/test/blocks/multipleChoice/MultipleChoice.spec.js +1 -1
  30. package/test/settings/WordJumbleManager.spec.js +3 -0
package/components/settings/MatchingGameManager.vue CHANGED
@@ -3,6 +3,7 @@
3
3
  <v-form ref="form" v-model="valid" v-if="!loading">
4
4
  <v-container class="pa-0">
5
5
  <v-text-field
6
+ ref="title"
6
7
  v-model="block.metadata.config.title"
7
8
  outlined
8
9
  :counter="50"
@@ -12,7 +13,7 @@
12
13
  'windward.games.components.settings.matching_game.form.title'
13
14
  )
14
15
  "
15
- ref="title"
16
+ :disabled="render"
16
17
  ></v-text-field>
17
18
  <v-textarea
18
19
  v-model="block.metadata.config.instructions"
@@ -24,6 +25,7 @@
24
25
  'windward.games.components.settings.matching_game.form.instructions'
25
26
  )
26
27
  "
28
+ :disabled="render"
27
29
  ></v-textarea>
28
30
  </v-container>
29
31
  <v-divider class="my-4 primary"></v-divider>
@@ -37,6 +39,7 @@
37
39
  </p>
38
40
  <SortableExpansionPanel
39
41
  v-model="block.metadata.config.answerObjects"
42
+ :disabled="render"
40
43
  @change="onDragged"
41
44
  @click:close="onConfirmDeleteAnswer($event)"
42
45
  >
@@ -68,6 +71,7 @@
68
71
  "
69
72
  outlined
70
73
  :autofocus="true"
74
+ :disabled="render"
71
75
  ></v-text-field>
72
76
  </v-flex>
73
77
  <v-flex xs12>
@@ -82,6 +86,7 @@
82
86
 
83
87
  <SortableExpansionPanel
84
88
  v-model="block.metadata.config.prompts[index]"
89
+ :disabled="render"
85
90
  @click:close="
86
91
  onConfirmDeletePrompt($event, index)
87
92
  "
@@ -92,7 +97,7 @@
92
97
  index: indexPrompt,
93
98
  }"
94
99
  >
95
- <span v-if="!prompt.toggle">
100
+ <span v-if="prompt.textOrImage === 'text'">
96
101
  {{
97
102
  prompt.prompt
98
103
  ? block.metadata.config.prompts[
@@ -103,13 +108,16 @@
103
108
  )
104
109
  }}
105
110
  </span>
106
- <span v-if="prompt.toggle">{{
107
- prompt.file && prompt.file !== null
108
- ? prompt.file.name
109
- : $t(
110
- 'windward.games.components.content.blocks.matching_game.image'
111
- )
112
- }}</span>
111
+ <span
112
+ v-if="prompt.textOrImage === 'image'"
113
+ >{{
114
+ prompt.file && prompt.file !== null
115
+ ? prompt.file.name
116
+ : $t(
117
+ 'windward.games.components.content.blocks.matching_game.image'
118
+ )
119
+ }}</span
120
+ >
113
121
  </template>
114
122
  <template
115
123
  #body="{ item: prompt, index: indexPrompt }"
@@ -134,40 +142,44 @@
134
142
  cols="6"
135
143
  class="d-flex justify-end pa-0"
136
144
  >
137
- <v-btn
138
- outlined
139
- class="pa-0 mr-2 btn-text-file-toggle"
140
- @click="
141
- block.metadata.config.prompts[
145
+ <v-btn-toggle
146
+ v-model="
147
+ block.metadata
148
+ .config.prompts[
142
149
  index
143
- ][
144
- indexPrompt
145
- ].toggle = false
150
+ ][indexPrompt]
151
+ .textOrImage
146
152
  "
147
- ><v-icon
148
- >mdi-alpha-t</v-icon
149
- ></v-btn
150
- >
151
- <v-btn
152
- outlined
153
- class="pa-0 btn-text-file-toggle"
154
- @click="
155
- block.metadata.config.prompts[
156
- index
157
- ][
158
- indexPrompt
159
- ].toggle = true
160
- "
161
- ><v-icon
162
- >mdi-image-area</v-icon
163
- ></v-btn
153
+ borderless
164
154
  >
155
+ <v-btn
156
+ text
157
+ class="pa-0 mr-2 btn-text-file-toggle"
158
+ value="text"
159
+ :disabled="render"
160
+ ><v-icon
161
+ >mdi-alpha-t</v-icon
162
+ ></v-btn
163
+ >
164
+ <v-btn
165
+ text
166
+ class="pa-0 btn-text-file-toggle"
167
+ value="image"
168
+ :disabled="render"
169
+ ><v-icon
170
+ >mdi-image-area</v-icon
171
+ ></v-btn
172
+ >
173
+ </v-btn-toggle>
165
174
  </v-col>
166
175
  </v-row>
167
176
  </v-container>
168
177
  <v-container class="pa-0">
169
178
  <v-text-field
170
- v-if="!prompt.toggle"
179
+ v-if="
180
+ prompt.textOrImage ===
181
+ 'text'
182
+ "
171
183
  v-model="
172
184
  block.metadata.config
173
185
  .prompts[index][
@@ -176,13 +188,20 @@
176
188
  "
177
189
  outlined
178
190
  :autofocus="true"
191
+ :disabled="render"
179
192
  ></v-text-field>
180
193
  </v-container>
181
194
  <v-container
182
- v-if="prompt.toggle"
195
+ v-if="
196
+ prompt.textOrImage === 'image'
197
+ "
183
198
  class="pa-0"
184
199
  >
185
200
  <v-text-field
201
+ v-if="
202
+ prompt.textOrImage ===
203
+ 'image'
204
+ "
186
205
  v-model="
187
206
  block.metadata.config
188
207
  .prompts[index][
@@ -190,7 +209,6 @@
190
209
  ].altText
191
210
  "
192
211
  class="pt-3 pb-3"
193
- v-if="prompt.toggle"
194
212
  :hide-details="true"
195
213
  dense
196
214
  outlined
@@ -200,9 +218,13 @@
200
218
  'windward.games.components.content.blocks.matching_game.alt_image'
201
219
  )
202
220
  "
221
+ :disabled="render"
203
222
  ></v-text-field>
204
223
  <v-text-field
205
- v-if="prompt.toggle"
224
+ v-if="
225
+ prompt.textOrImage ===
226
+ 'image'
227
+ "
206
228
  v-model="
207
229
  block.metadata.config
208
230
  .prompts[index][
@@ -218,9 +240,13 @@
218
240
  'windward.games.components.content.blocks.matching_game.aria_described'
219
241
  )
220
242
  "
243
+ :disabled="render"
221
244
  ></v-text-field>
222
245
  <ContentBlockAsset
223
- v-if="prompt.toggle"
246
+ v-if="
247
+ prompt.textOrImage ===
248
+ 'image'
249
+ "
224
250
  v-model="
225
251
  block.metadata.config
226
252
  .prompts[index][
@@ -229,6 +255,7 @@
229
255
  "
230
256
  class="content-block-asset"
231
257
  mimes="image/png,image/jpeg"
258
+ :disabled="render"
232
259
  ></ContentBlockAsset>
233
260
  </v-container>
234
261
  </v-container>
@@ -237,6 +264,7 @@
237
264
  <v-row justify="center" class="my-4">
238
265
  <v-btn
239
266
  color="primary"
267
+ :disabled="render"
240
268
  @click="onAddPrompt(index)"
241
269
  >
242
270
  <v-icon>mdi-plus</v-icon>
@@ -253,7 +281,11 @@
253
281
  </v-container>
254
282
  <v-container class="pa-0">
255
283
  <v-row justify="center" class="my-4">
256
- <v-btn color="primary" @click="onAddAnswer">
284
+ <v-btn
285
+ color="primary"
286
+ :disabled="render"
287
+ @click="onAddAnswer"
288
+ >
257
289
  <v-icon>mdi-plus</v-icon>
258
290
  {{
259
291
  $t(
@@ -273,6 +305,7 @@
273
305
  'windward.games.components.settings.matching_game.form.feedback.correct'
274
306
  )
275
307
  "
308
+ :disabled="render"
276
309
  ></v-textarea>
277
310
  <v-textarea
278
311
  v-model="block.metadata.config.feedback_incorrect"
@@ -284,6 +317,7 @@
284
317
  'windward.games.components.settings.matching_game.form.feedback.incorrect'
285
318
  )
286
319
  "
320
+ :disabled="render"
287
321
  ></v-textarea>
288
322
  </v-container>
289
323
  </v-form>
@@ -299,9 +333,9 @@
299
333
  </template>
300
334
 
301
335
  <script>
302
- import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
336
+ import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
303
337
  import _ from 'lodash'
304
- import SortableExpansionPanel from '~/components/SortableExpansionPanel.vue'
338
+ import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
305
339
 
306
340
  export default {
307
341
  name: 'MatchingGameManager',
@@ -368,7 +402,7 @@ export default {
368
402
  }
369
403
  let default_prompt = {
370
404
  id: index,
371
- toggle: false,
405
+ textOrImage: 'text',
372
406
  prompt: '',
373
407
  file: null,
374
408
  altText: '',
package/components/settings/MultipleChoiceSettingsManager.vue CHANGED
@@ -13,6 +13,7 @@
13
13
  'windward.games.components.settings.multiple_choice.title_placeholder'
14
14
  )
15
15
  "
16
+ :disabled="render"
16
17
  ></v-text-field>
17
18
  <v-textarea
18
19
  v-model="block.metadata.config.instructions"
@@ -25,6 +26,7 @@
25
26
  'windward.games.components.settings.multiple_choice.instructions'
26
27
  )
27
28
  "
29
+ :disabled="render"
28
30
  ></v-textarea>
29
31
  </v-container>
30
32
  <v-divider class="my-4 primary"></v-divider>
@@ -36,57 +38,29 @@
36
38
  )
37
39
  }}
38
40
  </p>
39
- <draggable
40
- :list="block.metadata.config.questions"
41
- group="people"
41
+ <SortableExpansionPanel
42
+ v-model="block.metadata.config.questions"
43
+ :current-panel.sync="editingIndex"
44
+ :disabled="render"
45
+ @click="onOpenModal"
46
+ @click:close="onDelete($event)"
42
47
  >
43
- <v-container
44
- v-for="(question, index) in block.metadata.config
45
- .questions"
46
- :key="index"
47
- class="container-card-outline"
48
- elevation="0"
49
- outlined
50
- tile
51
- >
52
- <v-layout row wrap outlined>
53
- <v-flex xs10>
54
- <p
55
- class="text-truncate mb-0 p-header"
56
- :class="cursor"
57
- @click="onOpenModal($event, index)"
58
- @mouseover="onHover"
59
- @mouseleave="onHoverLeave"
60
- >
61
- <v-icon class="pl-2"
62
- >mdi-drag-vertical</v-icon
63
- >
64
- <span class="span-text-ellipsis">
65
- {{
66
- question.body
67
- ? question.body
68
- : $t(
69
- 'windward.games.components.settings.bucket_game.form.enter_text'
70
- )
71
- }}
72
- </span>
73
- </p>
74
- </v-flex>
75
- <v-flex
76
- xs2
77
- class="btn-header-delete d-flex justify-center"
78
- >
79
- <v-icon
80
- class="btn-delete-icon"
81
- @click="onDelete(index)"
82
- >mdi-delete-outline</v-icon
83
- >
84
- </v-flex>
85
- </v-layout>
86
- </v-container>
87
- </draggable>
48
+ <template #header="{ item }">
49
+ {{
50
+ item.body
51
+ ? item.body
52
+ : $t(
53
+ 'windward.games.components.settings.bucket_game.form.enter_text'
54
+ )
55
+ }}
56
+ </template>
57
+ </SortableExpansionPanel>
88
58
  <v-row justify="center" class="my-4">
89
- <v-btn color="primary" @click="onOpenModal">
59
+ <v-btn
60
+ color="primary"
61
+ :disabled="render"
62
+ @click="onOpenModal"
63
+ >
90
64
  <v-icon>mdi-plus</v-icon>
91
65
  {{
92
66
  $t(
@@ -102,6 +76,7 @@
102
76
  :trigger="false"
103
77
  action-save
104
78
  :action-save-new="isNotEditing"
79
+ :disabled="render"
105
80
  @click:outside="close"
106
81
  @click:close="close"
107
82
  @keydown.esc="close"
@@ -116,6 +91,7 @@
116
91
  v-bind="attrs"
117
92
  v-on="on"
118
93
  v-model="block.metadata.config.questions[editingIndex]"
94
+ :disabled="render"
119
95
  @saveAndNew="saveAndNewCalled"
120
96
  ></QuestionDialog>
121
97
  </template>
@@ -133,17 +109,17 @@
133
109
  </div>
134
110
  </template>
135
111
  <script>
136
- import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
137
- import draggable from 'vuedraggable'
138
112
  import _ from 'lodash'
139
- import DialogBox from '~/components/DialogBox.vue'
113
+ import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
114
+ import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
115
+ import DialogBox from '~/components/Core/DialogBox.vue'
140
116
  import QuestionDialog from '../content/blocks/multipleChoice/QuestionDialog.vue'
141
117
  import Crypto from '~/helpers/Crypto'
142
118
 
143
119
  export default {
144
120
  name: 'MultipleChoiceSettingsManager',
145
121
  extends: BaseContentSettings,
146
- components: { draggable, QuestionDialog, DialogBox },
122
+ components: { SortableExpansionPanel, QuestionDialog, DialogBox },
147
123
  beforeMount() {
148
124
  if (_.isEmpty(this.block)) {
149
125
  this.block = {}
@@ -181,7 +157,7 @@ export default {
181
157
  this.emittedQuestion = {}
182
158
  },
183
159
  methods: {
184
- onOpenModal(event, questionIndex = null) {
160
+ onOpenModal(e, questionIndex = null) {
185
161
  //checks if modal is opening to edit or create new
186
162
  if (questionIndex !== null) {
187
163
  this.editingIndex = questionIndex
@@ -252,7 +228,7 @@ export default {
252
228
  this.editingIndex = this.block.metadata.config.questions.length - 1
253
229
  },
254
230
  onHover(index) {
255
- this.cursor = 'changePointer'
231
+ this.cursor = 'container-pointer'
256
232
  },
257
233
  onHoverLeave() {
258
234
  this.cursor = ''
@@ -262,34 +238,13 @@ export default {
262
238
  },
263
239
  close() {
264
240
  this.dialog = false
241
+ this.editingIndex = null
265
242
  },
266
243
  },
267
244
  }
268
245
  </script>
269
246
  <style lang="scss" scoped>
270
- .container-card-outline {
271
- border: solid 1px var(--v-primary-base);
272
- border-radius: 3px !important;
273
- margin-bottom: 8px;
274
- }
275
- .p-header {
276
- height: 45px;
277
- display: flex;
278
- align-items: center;
279
- }
280
- .p-header:hover {
281
- background-color: rgb(243, 243, 243);
282
- }
283
- .btn-delete-icon {
284
- color: var(--v-primary-base);
285
- }
286
- .btn-header-delete {
287
- border-left: 1px solid var(--v-primary-base);
288
- }
289
- .btn-header-delete:hover {
290
- background-color: rgb(243, 243, 243);
291
- }
292
- .changePointer {
247
+ .container-pointer {
293
248
  cursor: pointer !important;
294
249
  }
295
250
  </style>
package/components/settings/QuizShowSettingsManager.vue CHANGED
@@ -11,6 +11,7 @@
11
11
  'windward.games.components.settings.quizshow_game.form.title'
12
12
  )
13
13
  "
14
+ :disabled="render"
14
15
  ></v-text-field>
15
16
  <br />
16
17
  <v-checkbox
@@ -20,6 +21,7 @@
20
21
  'windward.games.components.settings.quizshow_game.form.responsive'
21
22
  )
22
23
  "
24
+ :disabled="render"
23
25
  ></v-checkbox>
24
26
  <br />
25
27
  <v-textarea
@@ -33,13 +35,14 @@
33
35
  'windward.games.components.settings.multiple_choice.instructions'
34
36
  )
35
37
  "
38
+ :disabled="render"
36
39
  ></v-textarea>
37
40
  <br />
38
41
  <v-expansion-panels outlined tile flat>
39
42
  <v-divider class="cardOutline primary"></v-divider>
40
43
  <v-expansion-panel>
41
44
  <v-expansion-panel-header>
42
- <template v-slot:default="{ open }">
45
+ <template #default="{ open }">
43
46
  <v-row no-gutters class="text-capitalize">
44
47
  <h5>
45
48
  {{
@@ -50,7 +53,7 @@
50
53
  </h5>
51
54
  </v-row>
52
55
  </template>
53
- <template v-slot:actions>
56
+ <template #actions>
54
57
  <v-icon> mdi-chevron-down </v-icon>
55
58
  </template>
56
59
  </v-expansion-panel-header>
@@ -72,7 +75,6 @@
72
75
  .categories[index - 1]
73
76
  "
74
77
  :counter="255"
75
- append-icon="mdi-delete-outline"
76
78
  maxlength="255"
77
79
  :label="
78
80
  $tc(
@@ -83,10 +85,17 @@
83
85
  index
84
86
  "
85
87
  outlined
88
+ :disabled="render"
86
89
  @click:append="
87
90
  removeCategory(index)
88
91
  "
89
- ></v-text-field>
92
+ >
93
+ <template #append>
94
+ <v-icon color="error"
95
+ >mdi-delete-outline</v-icon
96
+ >
97
+ </template>
98
+ </v-text-field>
90
99
  </v-row>
91
100
  <v-row justify="center" align="center">
92
101
  <v-btn
@@ -96,11 +105,12 @@
96
105
  .maxCategories
97
106
  ) < 6
98
107
  "
108
+ color="primary"
99
109
  class="text-capitalize clickable"
110
+ :disabled="render"
100
111
  @click="addCategory"
101
- color="primary"
102
112
  >
103
- <v-icon>mdi-plus</v-icon>&nbsp{{
113
+ <v-icon>mdi-plus</v-icon>&nbsp;{{
104
114
  $t(
105
115
  'windward.games.components.settings.quizshow_game.form.add_category'
106
116
  )
@@ -115,7 +125,7 @@
115
125
  <v-divider class="cardOutline primary"></v-divider>
116
126
  <v-expansion-panel>
117
127
  <v-expansion-panel-header>
118
- <template v-slot:default="{ open }">
128
+ <template #default="{ open }">
119
129
  <v-row no-gutters class="text-capitalize">
120
130
  <h5>
121
131
  {{
@@ -126,7 +136,7 @@
126
136
  </h5>
127
137
  </v-row>
128
138
  </template>
129
- <template v-slot:actions>
139
+ <template #actions>
130
140
  <v-icon> mdi-chevron-down </v-icon>
131
141
  </template>
132
142
  </v-expansion-panel-header>
@@ -140,19 +150,19 @@
140
150
  v-for="index in Number(
141
151
  block.metadata.config.maxRows
142
152
  )"
153
+ :key="'maxrows-row-' + index"
143
154
  >
144
155
  <v-text-field
145
156
  :key="'row' + index"
146
- append-icon="mdi-delete-outline"
147
157
  v-model="
148
158
  block.metadata.config.points[
149
159
  index - 1
150
160
  ]
151
161
  "
162
+ append-icon="mdi-delete-outline"
152
163
  type="number"
153
164
  min="1"
154
165
  max="9999"
155
- @input="onPointsChange(index - 1)"
156
166
  :label="
157
167
  $t(
158
168
  'windward.games.components.settings.quizshow_game.form.row'
@@ -161,6 +171,8 @@
161
171
  index
162
172
  "
163
173
  outlined
174
+ :disabled="render"
175
+ @input="onPointsChange(index - 1)"
164
176
  @click:append="removeRow(index)"
165
177
  ></v-text-field>
166
178
  </v-row>
@@ -173,10 +185,11 @@
173
185
  ) < 6
174
186
  "
175
187
  class="text-capitalize clickable"
176
- @click="addRow"
177
188
  color="primary"
189
+ :disabled="render"
190
+ @click="addRow"
178
191
  >
179
- <v-icon>mdi-plus</v-icon>&nbsp{{
192
+ <v-icon>mdi-plus</v-icon>&nbsp;{{
180
193
  $t(
181
194
  'windward.games.components.settings.quizshow_game.form.add_row'
182
195
  )
@@ -204,7 +217,7 @@
204
217
 
205
218
  <script>
206
219
  import TextEditor from '~/components/Text/TextEditor.vue'
207
- import BaseContentSettings from '~/components/Content/Tool/BaseContentSettings.js'
220
+ import BaseContentSettings from '~/components/Content/Settings/BaseContentSettings.js'
208
221
  export default {
209
222
  name: 'QuizShowSettingsManager',
210
223
  extends: BaseContentSettings,