@windward/games 0.5.0 → 0.6.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 (22) hide show
  1. package/CHANGELOG.md +4 -0
  2. package/bitbucket-pipelines.yml +14 -0
  3. package/components/content/blocks/flashcards/FlashcardSlides.vue +35 -2
  4. package/components/content/blocks/matchingGame/MatchingGame.vue +31 -32
  5. package/components/content/blocks/multipleChoice/MultipleChoice.vue +30 -1
  6. package/components/content/blocks/sevenStrikes/SevenStikes.vue +33 -1
  7. package/components/content/blocks/slideshow/SlideShow.vue +41 -3
  8. package/components/content/blocks/wordJumble/WordJumble.vue +32 -0
  9. package/components/settings/BucketGameSettingsManager.vue +246 -233
  10. package/components/settings/CrosswordPuzzleSettingsManager.vue +139 -109
  11. package/components/settings/FlashCardSlidesManager.vue +319 -332
  12. package/components/settings/MatchingGameManager.vue +326 -321
  13. package/components/settings/MultipleChoiceSettingsManager.vue +83 -67
  14. package/components/settings/QuizShowSettingsManager.vue +215 -203
  15. package/components/settings/SevenStrikesSettingsManager.vue +171 -141
  16. package/components/settings/SlideShowManager.vue +153 -132
  17. package/components/settings/SortingGameSettingsManager.vue +137 -108
  18. package/components/settings/WordJumbleSettingsManager.vue +175 -145
  19. package/i18n/en-US/shared/settings.ts +3 -0
  20. package/i18n/es-ES/shared/settings.ts +3 -0
  21. package/i18n/sv-SE/shared/settings.ts +3 -0
  22. package/package.json +1 -1
package/components/settings/FlashCardSlidesManager.vue CHANGED
@@ -1,363 +1,334 @@
1
1
  <template>
2
2
  <div>
3
- <v-form ref="outer-form" v-model="valid" v-if="!loading">
4
- <v-container class="pa-0">
5
- <v-text-field
6
- ref="title"
7
- v-model="block.metadata.config.title"
8
- outlined
9
- :counter="50"
10
- :label="
11
- $t(
12
- 'windward.games.components.settings.bucket_game.form.title'
13
- )
14
- "
15
- :disabled="render"
16
- ></v-text-field>
17
- <v-textarea
18
- v-model="block.metadata.config.instructions"
19
- outlined
20
- auto-grow
21
- :label="
22
- $t(
23
- 'windward.games.components.settings.bucket_game.form.instructions'
24
- )
25
- "
26
- :disabled="render"
27
- ></v-textarea>
28
- </v-container>
29
- <v-divider class="my-4 primary"></v-divider>
30
- <v-container class="pa-0">
31
- <p>
3
+ <v-container class="pa-0">
4
+ <v-text-field
5
+ ref="title"
6
+ v-model="block.metadata.config.title"
7
+ outlined
8
+ :counter="50"
9
+ :rules="validation.shortInputRules"
10
+ :label="
11
+ $t(
12
+ 'windward.games.components.settings.bucket_game.form.title'
13
+ )
14
+ "
15
+ :disabled="render"
16
+ ></v-text-field>
17
+ <v-textarea
18
+ v-model="block.metadata.config.instructions"
19
+ :rules="validation.instructionRule"
20
+ :counter="255"
21
+ outlined
22
+ auto-grow
23
+ :label="
24
+ $t(
25
+ 'windward.games.components.settings.bucket_game.form.instructions'
26
+ )
27
+ "
28
+ :disabled="render"
29
+ ></v-textarea>
30
+ </v-container>
31
+ <v-divider class="my-4 primary"></v-divider>
32
+ <v-container class="pa-0">
33
+ <p>
34
+ {{
35
+ $t(
36
+ 'windward.games.components.content.blocks.flashcard.items'
37
+ )
38
+ }}
39
+ </p>
40
+ <SortableExpansionPanel
41
+ v-model="block.metadata.config.cards"
42
+ v-bind:currentPanel.sync="block.metadata.config.currentSlide"
43
+ :disabled="render"
44
+ @click:close="onDelete($event)"
45
+ >
46
+ <template #header="{ item, index }">
32
47
  {{
33
- $t(
34
- 'windward.games.components.content.blocks.flashcard.items'
35
- )
48
+ stripHtml(block.metadata.config.cards[index].front.text)
36
49
  }}
37
- </p>
38
- <SortableExpansionPanel
39
- v-model="block.metadata.config.cards"
40
- v-bind:currentPanel.sync="
41
- block.metadata.config.currentSlide
42
- "
43
- :disabled="render"
44
- @click:close="onDelete($event)"
45
- >
46
- <template #header="{ item, index }">
47
- {{
48
- stripHtml(
49
- block.metadata.config.cards[index].front.text
50
- )
51
- }}
52
- </template>
53
- <template #body="{ item, index }">
54
- <v-container>
55
- <v-row
56
- class="d-flex justify-space-around"
57
- align="center"
58
- justify="center"
50
+ </template>
51
+ <template #body="{ item, index }">
52
+ <v-container>
53
+ <v-row
54
+ class="d-flex justify-space-around"
55
+ align="center"
56
+ justify="center"
57
+ >
58
+ <v-container
59
+ class="d-flex justify-center align-center"
60
+ >{{
61
+ $t(
62
+ 'windward.games.components.settings.flashcard.form.card'
63
+ ) +
64
+ ' ' +
65
+ (index + 1) +
66
+ ' ' +
67
+ (block.metadata.config.cards[index].side
68
+ ? $t(
69
+ 'windward.games.components.settings.flashcard.form.front'
70
+ )
71
+ : $t(
72
+ 'windward.games.components.settings.flashcard.form.back'
73
+ ))
74
+ }}</v-container
59
75
  >
60
- <v-container
61
- class="d-flex justify-center align-center"
76
+ <v-btn-toggle
77
+ v-model="
78
+ block.metadata.config.cards[index].side
79
+ "
80
+ >
81
+ <v-btn
82
+ :value="true"
83
+ elevation="0"
84
+ :outlined="
85
+ !block.metadata.config.cards[index].side
86
+ "
87
+ :disabled="render"
62
88
  >{{
63
89
  $t(
64
- 'windward.games.components.settings.flashcard.form.card'
65
- ) +
66
- ' ' +
67
- (index + 1) +
68
- ' ' +
69
- (block.metadata.config.cards[index].side
70
- ? $t(
71
- 'windward.games.components.settings.flashcard.form.front'
72
- )
73
- : $t(
74
- 'windward.games.components.settings.flashcard.form.back'
75
- ))
76
- }}</v-container
77
- >
78
- <v-btn-toggle
79
- v-model="
90
+ 'windward.games.components.settings.flashcard.form.front'
91
+ )
92
+ }}</v-btn
93
+ ><v-btn
94
+ :value="false"
95
+ elevation="0"
96
+ :outlined="
80
97
  block.metadata.config.cards[index].side
81
98
  "
99
+ :disabled="render"
82
100
  >
83
- <v-btn
84
- :value="true"
85
- elevation="0"
86
- :outlined="
87
- !block.metadata.config.cards[index]
88
- .side
89
- "
90
- :disabled="render"
91
- >{{
92
- $t(
93
- 'windward.games.components.settings.flashcard.form.front'
94
- )
95
- }}</v-btn
96
- ><v-btn
97
- :value="false"
98
- elevation="0"
99
- :outlined="
100
- block.metadata.config.cards[index]
101
- .side
102
- "
103
- :disabled="render"
104
- >
105
- {{
106
- $t(
107
- 'windward.games.components.settings.flashcard.form.back'
108
- )
109
- }}</v-btn
110
- >
111
- </v-btn-toggle>
112
- </v-row>
113
- <br />
114
- <v-form ref="form">
115
- <br />
101
+ {{
102
+ $t(
103
+ 'windward.games.components.settings.flashcard.form.back'
104
+ )
105
+ }}</v-btn
106
+ >
107
+ </v-btn-toggle>
108
+ </v-row>
109
+ <br />
110
+ <br />
116
111
 
117
- <v-text-field
118
- v-if="
119
- !block.metadata.config.cards[index].side
120
- "
112
+ <v-text-field
113
+ v-if="!block.metadata.config.cards[index].side"
114
+ v-model="
115
+ block.metadata.config.cards[index].back.header
116
+ "
117
+ outlined
118
+ auto-grow
119
+ :rules="validation.shortInputRules"
120
+ :counter="50"
121
+ :label="
122
+ $t(
123
+ 'windward.games.components.settings.flashcard.form.header'
124
+ )
125
+ "
126
+ required
127
+ :disabled="render"
128
+ />
129
+ <!-- The front card -->
130
+ <v-card
131
+ elevation="0"
132
+ v-show="block.metadata.config.cards[index].side"
133
+ >
134
+ <v-card-title>
135
+ {{
136
+ $t(
137
+ 'windward.games.components.settings.flashcard.form.card_content'
138
+ )
139
+ }}
140
+ </v-card-title>
141
+ <TextEditor
142
+ v-model="
143
+ block.metadata.config.cards[index].front
144
+ .text
145
+ "
146
+ outlined
147
+ auto-grow
148
+ menubar="edit"
149
+ toolbar="undo redo | italic underline strikethrough removeformat | mathButton"
150
+ :label="
151
+ $t(
152
+ 'windward.games.components.settings.flashcard.form.text'
153
+ )
154
+ "
155
+ required
156
+ :disabled="render"
157
+ ></TextEditor>
158
+
159
+ <ContentBlockAsset
160
+ v-model="
161
+ block.metadata.config.cards[index].front
162
+ .imageAsset
163
+ "
164
+ mimes="image/png,image/jpeg"
165
+ :assets.sync="block.assets"
166
+ :disabled="render"
167
+ >
168
+ <template #title>
169
+ {{
170
+ $t(
171
+ 'windward.games.components.settings.flashcard.form.image.title'
172
+ )
173
+ }}
174
+ </template>
175
+ <template #description>
176
+ {{
177
+ $t(
178
+ 'windward.games.components.settings.flashcard.form.image.configure_blurb'
179
+ )
180
+ }}
181
+ </template>
182
+ </ContentBlockAsset>
183
+
184
+ <v-text-field
185
+ v-model="
186
+ block.metadata.config.cards[index].front
187
+ .imageAlt
188
+ "
189
+ auto-grow
190
+ outlined
191
+ :label="$t('shared.accessibility.alt_text')"
192
+ required
193
+ :placeholder="
194
+ getImageAlt(
195
+ block.metadata.config.cards[index].front
196
+ .imageAsset
197
+ )
198
+ "
199
+ persistent-placeholder
200
+ :disabled="render"
201
+ ></v-text-field>
202
+ </v-card>
203
+
204
+ <!-- The back card -->
205
+ <v-card
206
+ outlined
207
+ v-show="!block.metadata.config.cards[index].side"
208
+ >
209
+ <v-card-text>
210
+ {{
211
+ $t(
212
+ 'windward.games.components.settings.flashcard.form.card_content'
213
+ )
214
+ }}
215
+
216
+ <TextEditor
121
217
  v-model="
122
218
  block.metadata.config.cards[index].back
123
- .header
219
+ .text
124
220
  "
125
221
  outlined
126
222
  auto-grow
127
- :counter="255"
128
- :label="
129
- $t(
130
- 'windward.games.components.settings.flashcard.form.header'
131
- )
132
- "
223
+ menubar="edit"
224
+ toolbar="undo redo | italic underline strikethrough removeformat | mathButton"
225
+ label="Text"
133
226
  required
134
227
  :disabled="render"
135
- />
136
- <!-- The front card -->
137
- <v-card
138
- elevation="0"
139
- v-show="
140
- block.metadata.config.cards[index].side
228
+ ></TextEditor>
229
+
230
+ <ContentBlockAsset
231
+ v-model="
232
+ block.metadata.config.cards[index].back
233
+ .imageAsset
141
234
  "
235
+ mimes="image/png,image/jpeg"
236
+ :assets.sync="block.assets"
237
+ :disabled="render"
142
238
  >
143
- <v-card-title>
239
+ <template #title>
144
240
  {{
145
241
  $t(
146
- 'windward.games.components.settings.flashcard.form.card_content'
242
+ 'windward.games.components.settings.flashcard.form.image.title'
147
243
  )
148
244
  }}
149
- </v-card-title>
150
- <TextEditor
151
- v-model="
152
- block.metadata.config.cards[index]
153
- .front.text
154
- "
155
- outlined
156
- auto-grow
157
- menubar="edit"
158
- toolbar="undo redo | italic underline strikethrough removeformat | mathButton"
159
- :label="
245
+ </template>
246
+ <template #description>
247
+ {{
160
248
  $t(
161
- 'windward.games.components.settings.flashcard.form.text'
249
+ 'windward.games.components.settings.flashcard.form.image.configure_blurb'
162
250
  )
163
- "
164
- required
165
- :disabled="render"
166
- ></TextEditor>
167
-
168
- <ContentBlockAsset
169
- v-model="
170
- block.metadata.config.cards[index]
171
- .front.imageAsset
172
- "
173
- mimes="image/png,image/jpeg"
174
- :assets.sync="block.assets"
175
- :disabled="render"
176
- >
177
- <template #title>
178
- {{
179
- $t(
180
- 'windward.games.components.settings.flashcard.form.image.title'
181
- )
182
- }}
183
- </template>
184
- <template #description>
185
- {{
186
- $t(
187
- 'windward.games.components.settings.flashcard.form.image.configure_blurb'
188
- )
189
- }}
190
- </template>
191
- </ContentBlockAsset>
192
-
193
- <v-text-field
194
- v-model="
195
- block.metadata.config.cards[index]
196
- .front.imageAlt
197
- "
198
- auto-grow
199
- outlined
200
- :label="
201
- $t('shared.accessibility.alt_text')
202
- "
203
- required
204
- :placeholder="
205
- getImageAlt(
206
- block.metadata.config.cards[
207
- index
208
- ].front.imageAsset
209
- )
210
- "
211
- persistent-placeholder
212
- :disabled="render"
213
- ></v-text-field>
214
- </v-card>
215
-
216
- <!-- The back card -->
217
- <v-card
251
+ }}
252
+ </template>
253
+ </ContentBlockAsset>
254
+ <v-text-field
255
+ v-model="
256
+ block.metadata.config.cards[index].back
257
+ .imageAlt
258
+ "
259
+ auto-grow
218
260
  outlined
219
- v-show="
261
+ :label="$t('shared.accessibility.alt_text')"
262
+ required
263
+ :placeholder="
264
+ getImageAlt(
265
+ block.metadata.config.cards[index]
266
+ .back.imageAsset
267
+ )
268
+ "
269
+ persistent-placeholder
270
+ :disabled="render"
271
+ ></v-text-field>
272
+ </v-card-text>
273
+ </v-card>
274
+ <v-row
275
+ class="d-flex justify-space-around pt-8"
276
+ align="center"
277
+ justify="center"
278
+ >
279
+ <v-btn-toggle
280
+ v-model="
281
+ block.metadata.config.cards[index].side
282
+ "
283
+ >
284
+ <v-btn
285
+ :value="true"
286
+ elevation="0"
287
+ :outlined="
220
288
  !block.metadata.config.cards[index].side
221
289
  "
290
+ >{{
291
+ $t(
292
+ 'windward.games.components.settings.flashcard.form.front'
293
+ )
294
+ }}</v-btn
295
+ ><v-btn
296
+ :value="false"
297
+ elevation="0"
298
+ :outlined="
299
+ block.metadata.config.cards[index].side
300
+ "
222
301
  >
223
- <v-card-text>
224
- {{
225
- $t(
226
- 'windward.games.components.settings.flashcard.form.card_content'
227
- )
228
- }}
229
-
230
- <TextEditor
231
- v-model="
232
- block.metadata.config.cards[
233
- index
234
- ].back.text
235
- "
236
- outlined
237
- auto-grow
238
- menubar="edit"
239
- toolbar="undo redo | italic underline strikethrough removeformat | mathButton"
240
- label="Text"
241
- required
242
- :disabled="render"
243
- ></TextEditor>
244
-
245
- <ContentBlockAsset
246
- v-model="
247
- block.metadata.config.cards[
248
- index
249
- ].back.imageAsset
250
- "
251
- mimes="image/png,image/jpeg"
252
- :assets.sync="block.assets"
253
- :disabled="render"
254
- >
255
- <template #title>
256
- {{
257
- $t(
258
- 'windward.games.components.settings.flashcard.form.image.title'
259
- )
260
- }}
261
- </template>
262
- <template #description>
263
- {{
264
- $t(
265
- 'windward.games.components.settings.flashcard.form.image.configure_blurb'
266
- )
267
- }}
268
- </template>
269
- </ContentBlockAsset>
270
- <v-text-field
271
- v-model="
272
- block.metadata.config.cards[
273
- index
274
- ].back.imageAlt
275
- "
276
- auto-grow
277
- outlined
278
- :label="
279
- $t(
280
- 'shared.accessibility.alt_text'
281
- )
282
- "
283
- required
284
- :placeholder="
285
- getImageAlt(
286
- block.metadata.config.cards[
287
- index
288
- ].back.imageAsset
289
- )
290
- "
291
- persistent-placeholder
292
- :disabled="render"
293
- ></v-text-field>
294
- </v-card-text>
295
- </v-card>
296
- <v-row
297
- class="d-flex justify-space-around pt-8"
298
- align="center"
299
- justify="center"
302
+ {{
303
+ $t(
304
+ 'windward.games.components.settings.flashcard.form.back'
305
+ )
306
+ }}</v-btn
300
307
  >
301
- <v-btn-toggle
302
- v-model="
303
- block.metadata.config.cards[index]
304
- .side
305
- "
306
- >
307
- <v-btn
308
- :value="true"
309
- elevation="0"
310
- :outlined="
311
- !block.metadata.config.cards[
312
- index
313
- ].side
314
- "
315
- >{{
316
- $t(
317
- 'windward.games.components.settings.flashcard.form.front'
318
- )
319
- }}</v-btn
320
- ><v-btn
321
- :value="false"
322
- elevation="0"
323
- :outlined="
324
- block.metadata.config.cards[
325
- index
326
- ].side
327
- "
328
- >
329
- {{
330
- $t(
331
- 'windward.games.components.settings.flashcard.form.back'
332
- )
333
- }}</v-btn
334
- >
335
- </v-btn-toggle>
336
- </v-row>
337
- <br />
338
- </v-form>
339
- </v-container>
340
- </template>
341
- </SortableExpansionPanel>
342
- </v-container>
343
- <v-container class="pa-0">
344
- <v-row justify="center" class="my-4">
345
- <v-btn
346
- color="primary"
347
- elevation="0"
348
- :disabled="render"
349
- @click="onAddCard"
350
- >
351
- <v-icon>mdi-plus</v-icon>
352
- {{
353
- $t(
354
- 'windward.games.components.settings.flashcard.form.add_card'
355
- )
356
- }}
357
- </v-btn>
358
- </v-row>
359
- </v-container>
360
- </v-form>
308
+ </v-btn-toggle>
309
+ </v-row>
310
+ <br />
311
+ </v-container>
312
+ </template>
313
+ </SortableExpansionPanel>
314
+ </v-container>
315
+ <v-container class="pa-0">
316
+ <v-row justify="center" class="my-4">
317
+ <v-btn
318
+ color="primary"
319
+ elevation="0"
320
+ :disabled="render"
321
+ @click="onAddCard"
322
+ >
323
+ <v-icon>mdi-plus</v-icon>
324
+ {{
325
+ $t(
326
+ 'windward.games.components.settings.flashcard.form.add_card'
327
+ )
328
+ }}
329
+ </v-btn>
330
+ </v-row>
331
+ </v-container>
361
332
  <div v-if="loading" class="text-center">
362
333
  <v-progress-circular
363
334
  :size="70"
@@ -397,6 +368,24 @@ export default {
397
368
  return {
398
369
  loading: false,
399
370
  valid: true,
371
+ validation: {
372
+ shortInputRules: [
373
+ (v) =>
374
+ v.length <= 50 ||
375
+ this.$t(
376
+ 'windward.games.shared.settings.errors.input_limitations',
377
+ [50]
378
+ ),
379
+ ],
380
+ instructionRule: [
381
+ (v) =>
382
+ v.length <= 255 ||
383
+ this.$t(
384
+ 'windward.games.shared.settings.errors.input_limitations',
385
+ [255]
386
+ ),
387
+ ],
388
+ },
400
389
  }
401
390
  },
402
391
  beforeMount() {
@@ -433,9 +422,7 @@ export default {
433
422
  },
434
423
  back: {
435
424
  imageAsset: null,
436
- header: this.$t(
437
- 'windward.games.components.settings.flashcard.form.header'
438
- ),
425
+ header: '',
439
426
  text: '',
440
427
  imageAlt: '',
441
428
  },