@windward/games 0.8.1 → 0.10.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 (26) hide show
  1. package/CHANGELOG.md +3 -0
  2. package/components/content/blocks/crosswordPuzzle/CrosswordPuzzle.vue +4 -24
  3. package/components/content/blocks/dragDrop/BucketGame.vue +139 -60
  4. package/components/content/blocks/flashcards/CardFace.vue +22 -57
  5. package/components/content/blocks/flashcards/Flashcard.vue +19 -16
  6. package/components/content/blocks/flashcards/FlashcardSlides.vue +13 -38
  7. package/components/content/blocks/matchingGame/MatchingGame.vue +3 -3
  8. package/components/content/blocks/multipleChoice/MultipleChoice.vue +18 -118
  9. package/components/content/blocks/sevenStrikes/SevenStikes.vue +158 -165
  10. package/components/content/blocks/slideshow/SlideShow.vue +49 -99
  11. package/components/content/blocks/wordJumble/WordJumble.vue +122 -129
  12. package/components/settings/BucketGameSettingsManager.vue +9 -0
  13. package/components/settings/FlashCardSlidesManager.vue +26 -91
  14. package/i18n/en-US/components/content/blocks/bucket_game.ts +1 -0
  15. package/i18n/en-US/components/content/blocks/multiple_choice.ts +0 -1
  16. package/i18n/en-US/shared/content_blocks.ts +1 -0
  17. package/i18n/es-ES/components/content/blocks/bucket_game.ts +1 -0
  18. package/i18n/es-ES/components/content/blocks/multiple_choice.ts +0 -1
  19. package/i18n/es-ES/shared/content_blocks.ts +1 -0
  20. package/i18n/sv-SE/components/content/blocks/bucket_game.ts +1 -0
  21. package/i18n/sv-SE/components/content/blocks/multiple_choice.ts +0 -1
  22. package/i18n/sv-SE/shared/content_blocks.ts +1 -0
  23. package/package.json +1 -1
  24. package/test/__mocks__/contentBlockMock.js +94 -0
  25. package/test/mocks.js +1 -0
  26. package/test/settings/BucketGameManager.spec.js +3 -3
@@ -10,13 +10,13 @@
10
10
  )
11
11
  }}
12
12
  </h2>
13
- <p>{{ block.metadata.config.instructions }}</p>
13
+ <p class="pb-0">{{ block.metadata.config.instructions }}</p>
14
14
  </v-col>
15
15
  <v-col class="pa-0">
16
16
  <template>
17
17
  <v-carousel
18
18
  v-model="block.metadata.config.currentWord"
19
- :hide-delimiters="hideDeliminators"
19
+ hide-delimiters
20
20
  @change="onSlideChanged($event)"
21
21
  >
22
22
  <template #prev="{ on, attrs }">
@@ -49,146 +49,170 @@
49
49
  v-for="(word, index) in block.metadata.config.words"
50
50
  :key="index"
51
51
  >
52
- <v-row class="d-flex justify-center ma-2">
53
- <p class="pa-3 mb-0 p-clue-jumble">
54
- {{ word.hint }}
55
- </p>
56
- </v-row>
57
- <v-container
58
- v-if="showFeedback"
59
- fluid
60
- :key="'feedback'"
61
- :class="feedbackStatus"
52
+ <v-sheet
53
+ height="90%"
54
+ class="fill-height d-flex flex-column"
62
55
  >
63
- <v-row class="pa-4">
64
- <v-col></v-col>
65
- <v-col
66
- class="d-flex justify-center align-center"
67
- >{{
68
- feedback
69
- ? feedback
70
- : $t(
71
- 'windward.games.components.content.blocks.bucket_game.form.feedback.feedback_here'
72
- )
73
- }}</v-col
74
- >
75
- <v-col class="d-flex justify-end pl-4">
76
- <v-btn
77
- v-if="
78
- feedbackStatus === 'successOutline'
79
- "
80
- class="mr-5"
81
- color="success"
82
- elevation="0"
83
- @click="onChangeSlide(index + 1)"
84
- >{{ $t('shared.forms.continue') }}
85
- </v-btn>
86
- <v-container
87
- v-if="feedbackStatus === 'errorOutline'"
88
- class="d-flex justify-end"
89
- @click="onHideFeedback"
90
- ><v-icon
91
- class="icon--error"
92
- color="error"
93
- >mdi-close-circle</v-icon
94
- >
95
- </v-container>
96
- </v-col>
97
- </v-row>
98
- </v-container>
99
- <v-container>
100
- <v-row
101
- class="justify-center mt-2"
102
- v-if="word.splitWord"
56
+ <div class="d-flex justify-center mt-2">
57
+ <p class="p-clue-jumble pb-0">
58
+ {{ word.hint }}
59
+ </p>
60
+ </div>
61
+ <v-container
62
+ v-if="showFeedback"
63
+ fluid
64
+ :key="'feedback'"
65
+ :class="feedbackStatus"
103
66
  >
104
- <div
105
- v-for="(
106
- letter, splitIndex
107
- ) in word.splitWord"
108
- :key="splitIndex"
109
- >
110
- <div
111
- :ref="'input' + splitIndex"
112
- class="container-text-area ml-1 mr-1"
113
- maxlength="1"
67
+ <v-row class="pa-4">
68
+ <v-col></v-col>
69
+ <v-col
70
+ class="d-flex justify-center align-center"
71
+ >{{
72
+ feedback
73
+ ? feedback
74
+ : $t(
75
+ 'windward.games.components.content.blocks.bucket_game.form.feedback.feedback_here'
76
+ )
77
+ }}</v-col
114
78
  >
115
- <div v-if="letter.show === true">
116
- {{ letter.letter }}
117
- </div>
118
- </div>
119
- </div>
120
- </v-row>
121
- <v-row class="justify-center mt-8">
122
- <div
123
- v-for="(
124
- strike, strikeIndex
125
- ) in sevenStrikesCounter"
126
- :key="strikeIndex"
79
+ <v-col class="d-flex justify-end pl-4">
80
+ <v-btn
81
+ v-if="
82
+ feedbackStatus ===
83
+ 'container-success-outline'
84
+ "
85
+ class="mr-5"
86
+ color="success"
87
+ elevation="0"
88
+ @click="onChangeSlide(index + 1)"
89
+ >{{ $t('shared.forms.continue') }}
90
+ </v-btn>
91
+ <v-container
92
+ v-if="
93
+ feedbackStatus ===
94
+ 'container-error-outline'
95
+ "
96
+ class="d-flex justify-end"
97
+ @click="onHideFeedback"
98
+ ><v-icon
99
+ class="icon--error"
100
+ color="error"
101
+ >mdi-close-circle</v-icon
102
+ >
103
+ </v-container>
104
+ </v-col>
105
+ </v-row>
106
+ </v-container>
107
+ <v-container>
108
+ <v-row
109
+ class="justify-center mt-2"
110
+ v-if="word.splitWord"
127
111
  >
128
112
  <div
129
- v-if="strike.strike === false"
130
- :ref="'strike' + strikeIndex"
131
- class="container-strike-area d-flex justify-center align-center"
132
- maxlength="1"
113
+ v-for="(
114
+ letter, splitIndex
115
+ ) in word.splitWord"
116
+ :key="splitIndex"
133
117
  >
134
- X
118
+ <div
119
+ :ref="'input' + splitIndex"
120
+ class="container-text-area ml-1 mr-1"
121
+ maxlength="1"
122
+ >
123
+ <div v-if="letter.show === true">
124
+ {{ letter.letter }}
125
+ </div>
126
+ </div>
135
127
  </div>
128
+ </v-row>
129
+ <v-row class="justify-center mt-8">
136
130
  <div
137
- class="container-strike"
138
- v-if="strike.strike === true"
131
+ v-for="(
132
+ strike, strikeIndex
133
+ ) in sevenStrikesCounter"
134
+ :key="strikeIndex"
139
135
  >
140
- X
136
+ <div
137
+ v-if="strike.strike === false"
138
+ :ref="'strike' + strikeIndex"
139
+ class="container-strike-area d-flex justify-center align-center"
140
+ maxlength="1"
141
+ >
142
+ X
143
+ </div>
144
+ <div
145
+ class="container-strike"
146
+ v-if="strike.strike === true"
147
+ >
148
+ X
149
+ </div>
141
150
  </div>
151
+ </v-row>
152
+ <div>
153
+ <keyboard
154
+ v-if="!showFeedback"
155
+ :key="index"
156
+ :keyboardClass="
157
+ keyBoardClass + '-' + index
158
+ "
159
+ @onChange="onChange"
160
+ @onKeyPress="onKeyPress"
161
+ :input="input"
162
+ />
142
163
  </div>
143
- </v-row>
144
- <div>
145
- <keyboard
146
- v-if="!showFeedback"
147
- :key="index"
148
- :keyboardClass="keyBoardClass + '-' + index"
149
- @onChange="onChange"
150
- @onKeyPress="onKeyPress"
151
- :input="input"
152
- />
153
- </div>
154
- <v-row
155
- class="justify-center mt-12"
156
- v-if="showFeedback"
157
- >
158
- <v-btn
159
- color="primary"
160
- class="ml-4"
161
- outlined
162
- elevation="0"
163
- @click="onRevealAnswer"
164
- >{{
165
- $t(
166
- 'windward.games.components.content.blocks.seven_strikes.reveal'
167
- )
168
- }}</v-btn
169
- >
170
- <v-btn
171
- color="primary"
172
- class="ml-4"
173
- outlined
174
- elevation="0"
175
- @click="onSlideChanged(index)"
176
- >{{
177
- $t(
178
- 'windward.games.components.content.blocks.seven_strikes.again'
179
- )
180
- }}</v-btn
181
- >
182
- <v-btn
183
- @click="onChangeSlide(index + 1)"
184
- color="primary ml-4"
185
- elevation="0"
186
- >{{
187
- $t(
188
- 'windward.games.components.content.blocks.seven_strikes.next'
189
- )
190
- }}</v-btn
164
+ <v-row
165
+ class="justify-center mt-12"
166
+ v-if="showFeedback"
191
167
  >
168
+ <v-btn
169
+ color="primary"
170
+ class="ml-4"
171
+ outlined
172
+ elevation="0"
173
+ @click="onRevealAnswer"
174
+ >{{
175
+ $t(
176
+ 'windward.games.components.content.blocks.seven_strikes.reveal'
177
+ )
178
+ }}</v-btn
179
+ >
180
+ <v-btn
181
+ color="primary"
182
+ class="ml-4"
183
+ outlined
184
+ elevation="0"
185
+ @click="onSlideChanged(index)"
186
+ >{{
187
+ $t(
188
+ 'windward.games.components.content.blocks.seven_strikes.again'
189
+ )
190
+ }}</v-btn
191
+ >
192
+ <v-btn
193
+ @click="onChangeSlide(index + 1)"
194
+ color="primary ml-4"
195
+ elevation="0"
196
+ >{{
197
+ $t(
198
+ 'windward.games.components.content.blocks.seven_strikes.next'
199
+ )
200
+ }}</v-btn
201
+ >
202
+ </v-row>
203
+ </v-container>
204
+ </v-sheet>
205
+ <v-container>
206
+ <v-row class="d-flex justify-end align-end">
207
+ {{
208
+ $t(
209
+ 'windward.games.shared.content_blocks.out_of',
210
+ [
211
+ index + 1,
212
+ block.metadata.config.words.length,
213
+ ]
214
+ )
215
+ }}
192
216
  </v-row>
193
217
  </v-container>
194
218
  </v-carousel-item>
@@ -263,37 +287,6 @@ export default {
263
287
  onStrike: 0,
264
288
  }
265
289
  },
266
- computed: {
267
- hideDeliminators() {
268
- const condition1 =
269
- window.innerWidth <= 1483 ||
270
- this.block.metadata.config.words.length >= 13
271
- const condition2 =
272
- this.block.metadata.config.words.length >= 12 &&
273
- window.innerWidth <= 1692
274
- const condition3 =
275
- this.block.metadata.config.words.length >= 11 &&
276
- window.innerWidth <= 1634
277
- const condition4 =
278
- this.block.metadata.config.words.length >= 10 &&
279
- window.innerWidth <= 1571
280
- const condition5 =
281
- this.block.metadata.config.words.length >= 9 &&
282
- window.innerWidth <= 1518
283
-
284
- if (
285
- condition1 ||
286
- condition2 ||
287
- condition3 ||
288
- condition4 ||
289
- condition5
290
- ) {
291
- return true
292
- } else {
293
- return false
294
- }
295
- },
296
- },
297
290
  watch: {
298
291
  render(newValue) {
299
292
  if (newValue) {
@@ -373,7 +366,7 @@ export default {
373
366
  thatIsIncorrect() {
374
367
  this.showFeedback = true
375
368
  // updates class
376
- this.feedbackStatus = 'errorOutline'
369
+ this.feedbackStatus = 'container-error-outline'
377
370
  // gets custom or standard feedback
378
371
  if (
379
372
  !_.isEmpty(this.block.metadata.config.feedback_incorrect) &&
@@ -388,7 +381,7 @@ export default {
388
381
  },
389
382
  thatIsCorrect() {
390
383
  this.showFeedback = true
391
- this.feedbackStatus = 'successOutline'
384
+ this.feedbackStatus = 'container-success-outline'
392
385
  if (
393
386
  !_.isEmpty(this.block.metadata.config.feedback_correct) &&
394
387
  this.block.metadata.config.feedback_correct !== ''
@@ -455,11 +448,11 @@ export default {
455
448
  .p-clue-jumble {
456
449
  font-size: 20px;
457
450
  }
458
- .errorOutline {
451
+ .container-error-outline {
459
452
  border: 4px solid var(--v-error-base);
460
453
  color: var(--v-error-base);
461
454
  }
462
- .successOutline {
455
+ .container-success-outline {
463
456
  border: 4px solid var(--v-success-base);
464
457
  color: var(--v-success-base);
465
458
  }
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div>
3
- <div class="header-description pa-0">
3
+ <div>
4
4
  <h2
5
5
  v-if="block.metadata.config.title"
6
6
  :aria-label="
@@ -25,7 +25,7 @@
25
25
  <template v-if="block.metadata.config.slides.length !== 0">
26
26
  <v-carousel
27
27
  v-model="block.metadata.config.currentSlide"
28
- :hide-delimiters="hideDeliminators"
28
+ hide-delimiters
29
29
  >
30
30
  <template #prev="{ on, attrs }">
31
31
  <v-btn
@@ -53,41 +53,52 @@
53
53
  ><v-icon>mdi-chevron-right</v-icon></v-btn
54
54
  >
55
55
  </template>
56
- <v-container
57
- class="pa-0 ma-0"
56
+ <v-carousel-item
58
57
  v-for="(slide, index) in block.metadata.config.slides"
59
58
  :key="index"
60
59
  >
61
- <v-carousel-item>
62
- <v-sheet
63
- height="85%"
64
- class="fill-height d-flex flex-column"
60
+ <v-sheet
61
+ height="90%"
62
+ class="fill-height d-flex flex-column"
63
+ >
64
+ <div class="container-header">
65
+ <h4>
66
+ {{ slide['header'] }}
67
+ </h4>
68
+ <p class="mb-0">
69
+ {{ slide['description'] }}
70
+ </p>
71
+ </div>
72
+ <div
73
+ style="overflow: auto"
74
+ class="pl-15 pr-15 container-image"
65
75
  >
66
- <div class="pa-0 ma-0">
67
- <h4 class="header-description">
68
- {{ slide['header'] }}
69
- </h4>
70
- <p class="header-description">
71
- {{ slide['description'] }}
72
- </p>
73
- </div>
74
- <div style="overflow: auto" class="pl-15 pr-15">
75
- <v-img
76
- v-if="slide['imageAsset']"
77
- :src="getImageUrl(slide['imageAsset'])"
78
- :alt="
79
- getImageAlt(
80
- slide['imageAsset'],
81
- slide['imageAlt']
82
- )
83
- "
84
- height="100%"
85
- contain
86
- />
87
- </div>
88
- </v-sheet>
89
- </v-carousel-item>
90
- </v-container>
76
+ <v-img
77
+ v-if="slide['imageAsset']"
78
+ :src="getImageUrl(slide['imageAsset'])"
79
+ :alt="
80
+ getImageAlt(
81
+ slide['imageAsset'],
82
+ slide['imageAlt']
83
+ )
84
+ "
85
+ height="100%"
86
+ contain
87
+ />
88
+ </div>
89
+ </v-sheet>
90
+ <div class="d-flex justify-end">
91
+ {{
92
+ $t(
93
+ 'windward.games.shared.content_blocks.out_of',
94
+ [
95
+ index + 1,
96
+ block.metadata.config.slides.length,
97
+ ]
98
+ )
99
+ }}
100
+ </div>
101
+ </v-carousel-item>
91
102
  </v-carousel>
92
103
  </template>
93
104
  </div>
@@ -132,37 +143,7 @@ export default {
132
143
  prev: {},
133
144
  }
134
145
  },
135
- computed: {
136
- hideDeliminators() {
137
- const condition1 =
138
- window.innerWidth <= 1483 ||
139
- this.block.metadata.config.slides.length >= 13
140
- const condition2 =
141
- this.block.metadata.config.slides.length >= 12 &&
142
- window.innerWidth <= 1692
143
- const condition3 =
144
- this.block.metadata.config.slides.length >= 11 &&
145
- window.innerWidth <= 1634
146
- const condition4 =
147
- this.block.metadata.config.slides.length >= 10 &&
148
- window.innerWidth <= 1571
149
- const condition5 =
150
- this.block.metadata.config.slides.length >= 9 &&
151
- window.innerWidth <= 1518
152
-
153
- if (
154
- condition1 ||
155
- condition2 ||
156
- condition3 ||
157
- condition4 ||
158
- condition5
159
- ) {
160
- return true
161
- } else {
162
- return false
163
- }
164
- },
165
- },
146
+ computed: {},
166
147
  watch: {
167
148
  render(newValue) {
168
149
  this.block.metadata.config.currentSlide = 0
@@ -185,42 +166,11 @@ export default {
185
166
  }
186
167
  </script>
187
168
  <style scoped>
188
- .img-sizing {
189
- height: 100% !important;
190
- width: 100% !important;
191
- object-fit: contain;
192
- max-width: 87%;
193
- }
194
- .sheet-height {
169
+ .container-image {
195
170
  height: 100%;
196
- position: relative;
197
- }
198
- .fullHeight {
199
- height: 75% !important;
200
- }
201
- .seventy {
202
- height: 70% !important;
203
- }
204
- .sixty {
205
- height: 60% !important;
206
- }
207
- .fifty {
208
- height: 50% !important;
209
- }
210
- .forty {
211
- height: 40% !important;
212
- }
213
- .thirty {
214
- height: 30% !important;
215
- }
216
- .twenty {
217
- height: 20% !important;
218
- }
219
- .ten {
220
- height: 10% !important;
221
171
  }
222
- .header-description {
223
- padding-left: 75px;
224
- padding-right: 75px;
172
+ .container-header {
173
+ padding-left: 60px;
174
+ padding-right: 60px;
225
175
  }
226
176
  </style>