@windward/games 0.10.0 → 0.11.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 (17) hide show
  1. package/CHANGELOG.md +3 -0
  2. package/components/content/blocks/crosswordPuzzle/CrosswordPuzzle.vue +2 -6
  3. package/components/content/blocks/dragDrop/BucketGame.vue +121 -52
  4. package/components/content/blocks/dragDrop/SortingGame.vue +42 -66
  5. package/components/content/blocks/matchingGame/MatchingGame.vue +73 -117
  6. package/components/content/blocks/slideshow/SlideShow.vue +10 -24
  7. package/components/settings/BucketGameSettingsManager.vue +0 -31
  8. package/components/settings/MatchingGameManager.vue +14 -94
  9. package/components/settings/SlideShowManager.vue +11 -46
  10. package/components/settings/SortingGameSettingsManager.vue +2 -19
  11. package/i18n/en-US/components/content/blocks/sorting_game.ts +2 -0
  12. package/i18n/en-US/components/settings/sorting_game.ts +2 -0
  13. package/i18n/es-ES/components/content/blocks/sorting_game.ts +2 -0
  14. package/i18n/es-ES/components/settings/sorting_game.ts +2 -0
  15. package/i18n/sv-SE/components/content/blocks/sorting_game.ts +2 -0
  16. package/i18n/sv-SE/components/settings/sorting_game.ts +2 -0
  17. package/package.json +1 -1
package/components/content/blocks/matchingGame/MatchingGame.vue CHANGED
@@ -21,29 +21,28 @@
21
21
  {{ block.metadata.config.instructions }}
22
22
  </p>
23
23
  <v-container :class="status">
24
- <v-alert class="d-flex justify-center pa-2">{{
24
+ <v-row class="d-flex justify-center py-3">{{
25
25
  feedback
26
26
  ? feedback
27
27
  : $t(
28
28
  'windward.games.components.content.blocks.bucket_game.form.feedback.feedback_here'
29
29
  )
30
- }}</v-alert>
31
- <v-row class="d-flex justify-center pa-2">
30
+ }}</v-row>
31
+ <v-row class="d-flex justify-center pb-3">
32
32
  <v-btn
33
- v-if="status === 'successOutline'"
34
- class="success mr-5"
33
+ v-if="status === 'container-success-outline'"
34
+ class="success"
35
35
  elevation="0"
36
36
  @click="onContinueGame"
37
37
  >{{ $t('shared.forms.continue') }}
38
38
  </v-btn>
39
- <v-container
40
- v-if="status === 'errorOutline'"
41
- class="d-flex justify-center align-center"
39
+ <v-btn
40
+ v-if="status === 'container-error-outline'"
41
+ class="error"
42
+ elevation="0"
42
43
  @click="onExitFeedback"
43
- ><v-btn class="error" elevation="0">{{
44
- $t('shared.forms.try_again')
45
- }}</v-btn>
46
- </v-container>
44
+ >{{ $t('shared.forms.try_again') }}
45
+ </v-btn>
47
46
  </v-row>
48
47
  </v-container>
49
48
  <v-container class="pl-0 pr-0 mt-2">
@@ -79,17 +78,22 @@
79
78
  </v-card-text>
80
79
  </v-card>
81
80
  </v-row>
82
- <v-row align="center" class="col-md-10">
81
+ <v-row
82
+ align="center"
83
+ class="col-md-10 d-flex justify-center"
84
+ >
83
85
  <v-card
84
86
  v-if="mainPrompt['textOrImage'] === 'image'"
85
- class="pa-2 flex-fill bucket"
87
+ class="pa-2 flex-fill bucket d-flex justify-center"
86
88
  min-height="5em"
89
+ max-height="400"
90
+ max-width="300"
87
91
  outlined
88
92
  tile
89
93
  >
90
94
  <v-card-text>
91
95
  <draggable
92
- v-if="mainPrompt.file"
96
+ v-if="mainPrompt.fileConfig.asset"
93
97
  class="dragArea list-group"
94
98
  :key="mainPrompt['prompt']"
95
99
  v-bind="dragOptions"
@@ -97,28 +101,18 @@
97
101
  group="people"
98
102
  tabindex="0"
99
103
  >
100
- <div :id="mainPrompt.file.file_asset_id">
101
- <v-img
102
- :aria-describedby="
103
- getFileAriaDescribedBy(
104
- mainPrompt.file,
105
- mainPrompt[
106
- 'ariaDescribedBy'
107
- ]
108
- )
109
- "
110
- :alt="
111
- getFileAlt(
112
- mainPrompt.file,
113
- mainPrompt['altText']
114
- )
115
- "
116
- :src="
117
- getFilePublicUrl(
118
- mainPrompt.file
119
- )
120
- "
121
- ></v-img>
104
+ <div
105
+ :id="
106
+ mainPrompt.fileConfig.asset
107
+ .file_asset_id
108
+ "
109
+ >
110
+ <ImageAssetViewer
111
+ v-model="mainPrompt['fileConfig']"
112
+ :assets="block.assets"
113
+ max-height="400"
114
+ max-width="300"
115
+ ></ImageAssetViewer>
122
116
  </div>
123
117
  </draggable>
124
118
  </v-card-text>
@@ -172,7 +166,7 @@
172
166
  ].textOrImage === 'image' &&
173
167
  block.metadata.config.prompts[startingIndex][
174
168
  startingIndex
175
- ].file
169
+ ].fileConfig.asset
176
170
  "
177
171
  class="pa-2 flex-fill bucket"
178
172
  min-height="5em"
@@ -196,43 +190,18 @@
196
190
  :id="
197
191
  block.metadata.config.prompts[
198
192
  startingIndex
199
- ][startingIndex].file.file_asset_id
193
+ ][startingIndex].fileConfig.asset
194
+ .file_asset_id
200
195
  "
201
196
  >
202
- <v-img
203
- :aria-describedby="
204
- getFileAriaDescribedBy(
205
- block.metadata.config
206
- .prompts[startingIndex][
207
- startingIndex
208
- ].file,
209
- block.metadata.config
210
- .prompts[startingIndex][
211
- startingIndex
212
- ]['ariaDescribedBy']
213
- )
197
+ <ImageAssetViewer
198
+ v-model="
199
+ block.metadata.config.prompts[
200
+ startingIndex
201
+ ][startingIndex].fileConfig
214
202
  "
215
- :alt="
216
- getFileAlt(
217
- block.metadata.config
218
- .prompts[startingIndex][
219
- startingIndex
220
- ].file,
221
- block.metadata.config
222
- .prompts[startingIndex][
223
- startingIndex
224
- ]['altText']
225
- )
226
- "
227
- :src="
228
- getFilePublicUrl(
229
- block.metadata.config
230
- .prompts[startingIndex][
231
- startingIndex
232
- ].file
233
- )
234
- "
235
- ></v-img>
203
+ :assets.sync="block.assets"
204
+ ></ImageAssetViewer>
236
205
  </div>
237
206
  </draggable>
238
207
  </v-card-text>
@@ -257,8 +226,8 @@
257
226
  .answerObjects"
258
227
  :key="aindex"
259
228
  :class="
260
- 'pa-2 ma-2 answerCard container-outline ' +
261
- answerColor(answer)
229
+ 'pa-2 ma-2 card-answer-option container-outline ' +
230
+ getAnswerStyles(answer)
262
231
  "
263
232
  outlined
264
233
  >
@@ -274,7 +243,6 @@
274
243
  align="end"
275
244
  >
276
245
  <v-row>
277
- <!-- <v-flex xs8></v-flex> -->
278
246
  <v-col cols="12" lg="6" md="7" sm="6"></v-col>
279
247
  <v-col cols="12" lg="6" md="5" sm="6">
280
248
  <v-row
@@ -311,11 +279,8 @@
311
279
  outlined
312
280
  elevation="0"
313
281
  @click="onReset"
314
- >{{
315
- $t(
316
- 'windward.games.components.content.blocks.matching_game.reset'
317
- )
318
- }}
282
+ >
283
+ {{ $t('shared.forms.reset') }}
319
284
  </v-btn>
320
285
  </v-col>
321
286
  </v-row>
@@ -331,10 +296,11 @@
331
296
  import _ from 'lodash'
332
297
  import draggable from 'vuedraggable'
333
298
  import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
299
+ import ImageAssetViewer from '~/components/Content/ImageAssetViewer.vue'
334
300
 
335
301
  export default {
336
302
  name: 'MatchingGame',
337
- components: { draggable },
303
+ components: { draggable, ImageAssetViewer },
338
304
  extends: BaseContentBlock,
339
305
  beforeMount() {
340
306
  if (_.isEmpty(this.block)) {
@@ -405,9 +371,10 @@ export default {
405
371
  status: 'default',
406
372
  allowDrag: true,
407
373
  mainPrompt: {
408
- altText: '',
409
374
  answer: {},
410
- file: null,
375
+ fileConfig: {
376
+ hideBackground: true,
377
+ },
411
378
  prompt: '',
412
379
  textOrImage: 'text',
413
380
  },
@@ -432,14 +399,20 @@ export default {
432
399
  this.setMainPrompt()
433
400
  },
434
401
  methods: {
435
- answerColor(element) {
402
+ getAnswerStyles(element) {
403
+ let classValue = ' '
436
404
  if (
437
405
  !_.isEmpty(this.droppedElement) &&
438
406
  element.display === this.droppedElement.display
439
407
  ) {
440
- return this.status
408
+ classValue += this.status + ' '
409
+ }
410
+ if (this.allowDrag) {
411
+ classValue += 'card-answer-option-grab '
412
+ } else {
413
+ classValue += 'card-answer-option-default '
441
414
  }
442
- return ''
415
+ return classValue
443
416
  },
444
417
  shuffle(array) {
445
418
  let currentIndex = array.length,
@@ -498,7 +471,7 @@ export default {
498
471
  (outerElement) => {
499
472
  const mainElement = outerElement.find((element) => {
500
473
  return (
501
- element.file?.file_asset_id ==
474
+ element.fileConfig.asset?.file_asset_id ==
502
475
  evt.to.firstElementChild.id
503
476
  )
504
477
  })
@@ -514,7 +487,7 @@ export default {
514
487
  this.droppedElement = null
515
488
  } else if (draggedElement.id !== target.answer.id) {
516
489
  this.feedback = this.block.metadata.config.feedback_incorrect
517
- this.status = 'errorOutline'
490
+ this.status = 'container-error-outline'
518
491
  this.allowDrag = false
519
492
  this.droppedElement = draggedElement
520
493
  } else if (draggedElement.id === target.answer.id) {
@@ -522,7 +495,7 @@ export default {
522
495
  ? target.matchExplanation
523
496
  : this.block.metadata.config.feedback_correct
524
497
  this.solvedQuestions.push(target)
525
- this.status = 'successOutline'
498
+ this.status = 'container-success-outline'
526
499
  this.allowDrag = false
527
500
  this.droppedElement = draggedElement
528
501
  if (
@@ -568,28 +541,6 @@ export default {
568
541
  )
569
542
  this.setMainPrompt()
570
543
  },
571
- getFileAlt(file, defaultText = '') {
572
- // If a default / override was defined
573
- if (defaultText) {
574
- return defaultText
575
- }
576
-
577
- file = this.resolveAsset(file)
578
- return _.get(file, 'asset.metadata.props.alt', '')
579
- },
580
- getFileAriaDescribedBy(file, defaultText = '') {
581
- // If a default / override was defined
582
- if (defaultText) {
583
- return defaultText
584
- }
585
-
586
- file = this.resolveAsset(file)
587
- return _.get(file, 'asset.metadata.props.aria_describedby', '')
588
- },
589
- getFilePublicUrl(file) {
590
- file = this.resolveAsset(file)
591
- return _.get(file, 'asset.public_url', '')
592
- },
593
544
  },
594
545
  }
595
546
  </script>
@@ -600,34 +551,39 @@ export default {
600
551
  box-shadow: 0px 2px 3px #0000004a;
601
552
  transition: 0.5s box-shadow;
602
553
  }
603
- .successOutline {
554
+ .container-success-outline {
604
555
  border: 4px solid var(--v-success-base) !important;
605
556
  }
606
- .errorOutline {
557
+ .container-error-outline {
607
558
  border: 4px solid var(--v-error-base) !important;
608
559
  }
609
560
  .card_text {
610
561
  font-size: large;
611
562
  }
612
- .answerCard {
563
+ .card-answer-option {
613
564
  min-width: 23%;
565
+ }
566
+ .card-answer-option-grab {
614
567
  cursor: grab;
615
568
  }
569
+ .card-answer-option-default {
570
+ cursor: default;
571
+ }
616
572
  .icon--error {
617
573
  color: var(--v-error-base);
618
574
  }
619
575
  @media (max-width: 1270px) {
620
- .answerCard {
576
+ .card-answer-option {
621
577
  min-width: 30%;
622
578
  }
623
579
  }
624
580
  @media (max-width: 900px) {
625
- .answerCard {
581
+ .card-answer-option {
626
582
  min-width: 40%;
627
583
  }
628
584
  }
629
585
  @media (max-width: 610px) {
630
- .answerCard {
586
+ .card-answer-option {
631
587
  min-width: 95%;
632
588
  }
633
589
  }
package/components/content/blocks/slideshow/SlideShow.vue CHANGED
@@ -69,22 +69,15 @@
69
69
  {{ slide['description'] }}
70
70
  </p>
71
71
  </div>
72
- <div
73
- style="overflow: auto"
74
- class="pl-15 pr-15 container-image"
75
- >
76
- <v-img
77
- v-if="slide['imageAsset']"
78
- :src="getImageUrl(slide['imageAsset'])"
79
- :alt="
80
- getImageAlt(
81
- slide['imageAsset'],
82
- slide['imageAlt']
83
- )
72
+ <div class="pl-15 pr-15 container-image">
73
+ <ImageAssetViewer
74
+ v-model="
75
+ block.metadata.config.slides[index]
76
+ .fileConfig
84
77
  "
85
- height="100%"
86
- contain
87
- />
78
+ :assets="block.assets"
79
+ max-height="300"
80
+ ></ImageAssetViewer>
88
81
  </div>
89
82
  </v-sheet>
90
83
  <div class="d-flex justify-end">
@@ -108,11 +101,12 @@
108
101
  <script>
109
102
  import _ from 'lodash'
110
103
  import BaseContentBlock from '~/components/Content/Blocks/BaseContentBlock'
111
- import Crypto from '~/helpers/Crypto'
104
+ import ImageAssetViewer from '~/components/Content/ImageAssetViewer.vue'
112
105
 
113
106
  export default {
114
107
  name: 'SlideShow',
115
108
  extends: BaseContentBlock,
109
+ components: { ImageAssetViewer },
116
110
  beforeMount() {
117
111
  if (_.isEmpty(this.block)) {
118
112
  this.block = {}
@@ -154,14 +148,6 @@ export default {
154
148
  file = this.resolveAsset(file)
155
149
  return _.get(file, 'asset.public_url', '')
156
150
  },
157
- getImageAlt(file, defaultText = '') {
158
- // If a default / override was defined
159
- if (defaultText) {
160
- return defaultText
161
- }
162
- file = this.resolveAsset(file)
163
- return _.get(file, 'asset.metadata.props.alt', '')
164
- },
165
151
  },
166
152
  }
167
153
  </script>
package/components/settings/BucketGameSettingsManager.vue CHANGED
@@ -209,31 +209,6 @@
209
209
  }}
210
210
  </v-btn>
211
211
  </v-row>
212
- <v-textarea
213
- v-model="block.metadata.config.feedback_correct"
214
- class="pt-4"
215
- outlined
216
- auto-grow
217
- :counter="255"
218
- :label="
219
- $t(
220
- 'windward.games.components.settings.bucket_game.form.feedback.correct'
221
- )
222
- "
223
- :disabled="render"
224
- ></v-textarea>
225
- <v-textarea
226
- v-model="block.metadata.config.feedback_incorrect"
227
- outlined
228
- auto-grow
229
- :counter="255"
230
- :label="
231
- $t(
232
- 'windward.games.components.settings.bucket_game.form.feedback.incorrect'
233
- )
234
- "
235
- :disabled="render"
236
- ></v-textarea>
237
212
  </v-container>
238
213
  <div v-if="loading" class="text-center">
239
214
  <v-progress-circular
@@ -298,12 +273,6 @@ export default {
298
273
  'windward.games.components.settings.bucket_game.form.default_instructions'
299
274
  )
300
275
  }
301
- if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
302
- this.block.metadata.config.feedback_correct = ''
303
- }
304
- if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
305
- this.block.metadata.config.feedback_incorrect = ''
306
- }
307
276
  if (_.isEmpty(this.block.metadata.config.bucket_titles)) {
308
277
  this.block.metadata.config.bucket_titles = []
309
278
  this.onAddBucket()
package/components/settings/MatchingGameManager.vue CHANGED
@@ -106,11 +106,9 @@
106
106
  }}
107
107
  </span>
108
108
  <span v-if="prompt.textOrImage === 'image'">{{
109
- prompt.file && prompt.file !== null
110
- ? prompt.file.name
111
- : $t(
112
- 'windward.games.components.content.blocks.matching_game.image'
113
- )
109
+ $t(
110
+ 'windward.games.components.content.blocks.matching_game.image'
111
+ )
114
112
  }}</span>
115
113
  </template>
116
114
  <template
@@ -199,88 +197,17 @@
199
197
  v-if="prompt.textOrImage === 'image'"
200
198
  class="pa-0"
201
199
  >
202
- <v-text-field
203
- v-if="
204
- prompt.textOrImage === 'image'
205
- "
206
- v-model="
207
- block.metadata.config.prompts[
208
- index
209
- ][indexPrompt].altText
210
- "
211
- class="pt-3 pb-3"
212
- :hide-details="true"
213
- dense
214
- outlined
215
- :autofocus="true"
216
- :label="
217
- $t(
218
- 'windward.games.components.content.blocks.matching_game.alt_image'
219
- )
220
- "
221
- :placeholder="
222
- getAlt(
223
- block.metadata.config
224
- .prompts[index][
225
- indexPrompt
226
- ].file
227
- )
228
- "
229
- persistent-placeholder
230
- :disabled="render"
231
- ></v-text-field>
232
- <v-text-field
233
- v-if="
234
- prompt.textOrImage === 'image'
235
- "
200
+ <ImageAssetSettings
236
201
  v-model="
237
202
  block.metadata.config.prompts[
238
203
  index
239
- ][indexPrompt].ariaDescribedBy
204
+ ][indexPrompt].fileConfig
240
205
  "
241
- class="pt-3 pb-3"
242
- :hide-details="true"
243
- dense
244
- outlined
245
- :label="
246
- $t(
247
- 'shared.file.attr.screenreader'
248
- )
249
- "
250
- :placeholder="
251
- getAriaDescribedBy(
252
- block.metadata.config
253
- .prompts[index][
254
- indexPrompt
255
- ].file
256
- )
257
- "
258
- persistent-placeholder
259
- :disabled="render"
260
- ></v-text-field>
261
- <ContentBlockAsset
262
- v-if="
263
- prompt.textOrImage === 'image'
264
- "
265
- v-model="
266
- block.metadata.config.prompts[
267
- index
268
- ][indexPrompt].file
269
- "
270
- outlined
271
206
  :assets.sync="block.assets"
272
- class="content-block-asset"
273
- mimes="image/png,image/jpeg"
274
- :disabled="render"
275
- >
276
- <template #title>
277
- {{
278
- $t(
279
- 'windward.games.shared.settings.file_picker.image'
280
- )
281
- }}
282
- </template>
283
- </ContentBlockAsset>
207
+ hide-background
208
+ hide-decorative
209
+ hide-modal
210
+ ></ImageAssetSettings>
284
211
  </v-container>
285
212
  <v-container class="pa-0">
286
213
  <v-text-field
@@ -353,11 +280,12 @@ import BaseContentSettings from '~/components/Content/Settings/BaseContentSettin
353
280
  import _ from 'lodash'
354
281
  import SortableExpansionPanel from '~/components/Core/SortableExpansionPanel.vue'
355
282
  import Uuid from '~/helpers/Uuid'
283
+ import ImageAssetSettings from '~/components/Content/Settings/ImageAssetSettings.vue'
356
284
 
357
285
  export default {
358
286
  name: 'MatchingGameManager',
359
287
  extends: BaseContentSettings,
360
- components: { SortableExpansionPanel },
288
+ components: { SortableExpansionPanel, ImageAssetSettings },
361
289
  beforeMount() {
362
290
  if (_.isEmpty(this.block)) {
363
291
  this.block = {}
@@ -430,9 +358,9 @@ export default {
430
358
  matchExplanation: this.$t(
431
359
  'windward.games.components.settings.matching_game.form.correct_match'
432
360
  ),
433
- file: null,
434
- altText: '',
435
- ariaDescribedBy: '',
361
+ fileConfig: {
362
+ hideBackground: true,
363
+ },
436
364
  answer: this.block.metadata.config.answerObjects[index],
437
365
  }
438
366
  this.block.metadata.config.prompts[index].push(default_prompt)
@@ -552,14 +480,6 @@ export default {
552
480
  // holder array now has new answer positions
553
481
  this.block.metadata.config.prompts = holderArray
554
482
  },
555
- getAriaDescribedBy(file) {
556
- file = this.resolveAsset(file)
557
- return _.get(file, 'asset.metadata.props.aria_describedby', '')
558
- },
559
- getAlt(file) {
560
- file = this.resolveAsset(file)
561
- return _.get(file, 'asset.metadata.props.alt', '')
562
- },
563
483
  },
564
484
  }
565
485
  </script>