@windward/games 0.0.7 → 0.0.9

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 (16) hide show
  1. package/components/content/blocks/dragDrop/BucketGame.vue +18 -6
  2. package/components/content/blocks/dragDrop/SortingGame.vue +127 -55
  3. package/components/content/blocks/quizshowGame/AnswerPanel.vue +73 -83
  4. package/components/content/blocks/quizshowGame/QuizShow.vue +40 -30
  5. package/components/content/blocks/wordJumble/WordJumble.vue +11 -5
  6. package/components/settings/BucketGameSettingsManager.vue +306 -369
  7. package/components/settings/QuizShowSettingsManager.vue +228 -201
  8. package/components/settings/SortingGameSettingsManager.vue +181 -152
  9. package/components/settings/WordJumbleSettingsManager.vue +145 -137
  10. package/i18n/en-US/components/content/blocks/quizshow_game.ts +1 -1
  11. package/i18n/en-US/components/content/blocks/word_jumble.ts +1 -1
  12. package/i18n/en-US/components/settings/bucket_game.ts +5 -2
  13. package/i18n/en-US/components/settings/quizshow_game.ts +8 -2
  14. package/i18n/en-US/components/settings/sorting_game.ts +2 -0
  15. package/i18n/en-US/components/settings/word_jumble.ts +1 -1
  16. package/package.json +1 -1
package/components/settings/QuizShowSettingsManager.vue CHANGED
@@ -22,160 +22,174 @@
22
22
  "
23
23
  ></v-checkbox>
24
24
  <br />
25
- <textEditor v-model="block.metadata.config.instructions" />
26
- <br />
27
-
28
- <v-card elevation="0" outlined>
29
- <v-subheader
30
- >{{
31
- $t(
32
- 'plugin.games.components.settings.quizshow_game.form.max_categories'
33
- )
34
- }}
35
- </v-subheader>
36
- <v-slider
37
- v-model="block.metadata.config.maxCategories"
38
- :tick-labels="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
39
- step="1"
40
- min="1"
41
- max="10"
42
- thumb-label
43
- ticks="always"
44
- tick-size="4"
45
- @change="onChange('categories')"
46
- ></v-slider>
47
- </v-card>
25
+ <v-textarea
26
+ outlined
27
+ auto-grow
28
+ v-model="block.metadata.config.instructions"
29
+ :counter="300"
30
+ maxlength="300"
31
+ :label="
32
+ $t(
33
+ 'plugin.games.components.settings.multiple_choice.instructions'
34
+ )
35
+ "
36
+ ></v-textarea>
48
37
  <br />
49
- <v-card elevation="0" outlined>
50
- <v-subheader
51
- >{{
52
- $t(
53
- 'plugin.games.components.settings.quizshow_game.form.max_rows'
54
- )
55
- }}
56
- </v-subheader>
57
- <v-slider
58
- v-model="block.metadata.config.maxRows"
59
- :tick-labels="[1, 2, 3, 4, 5, 6, 7, 8, 9, 10]"
60
- step="1"
61
- min="1"
62
- max="10"
63
- thumb-label
64
- ticks="always"
65
- tick-size="4"
66
- @change="onChange('rows')"
67
- ></v-slider>
68
- </v-card>
69
38
  <v-expansion-panels outlined tile flat>
39
+ <v-divider class="cardOutline primary"></v-divider>
70
40
  <v-expansion-panel>
71
41
  <v-expansion-panel-header>
72
42
  <template v-slot:default="{ open }">
73
- <v-row no-gutters>
74
- {{
75
- $t(
76
- 'plugin.games.components.settings.quizshow_game.form.categories'
77
- )
78
- }}
43
+ <v-row no-gutters class="text-capitalize">
44
+ <h5>
45
+ {{
46
+ $t(
47
+ 'plugin.games.components.settings.quizshow_game.form.categories'
48
+ )
49
+ }}
50
+ </h5>
79
51
  </v-row>
80
52
  </template>
81
53
  <template v-slot:actions>
82
- <v-icon
83
- :color="
84
- expansionColor(
85
- block.metadata.config.categories,
86
- block.metadata.config.maxCategories
87
- )
88
- "
89
- >
90
- {{
91
- expansionIcon(
92
- block.metadata.config.categories,
93
- block.metadata.config.maxCategories
94
- )
95
- }}
96
- </v-icon>
54
+ <v-icon> mdi-chevron-down </v-icon>
97
55
  </template>
98
56
  </v-expansion-panel-header>
99
57
  <v-expansion-panel-content>
100
- <v-text-field
101
- v-for="index in Number(
102
- block.metadata.config.maxCategories
103
- )"
104
- :key="'cat' + index"
105
- v-model="
106
- block.metadata.config.categories[index - 1]
107
- "
108
- :counter="255"
109
- maxlength="255"
110
- :label="
111
- $t(
112
- 'plugin.games.components.settings.quizshow_game.form.category'
113
- ) +
114
- ' ' +
115
- index
116
- "
117
- outlined
118
- ></v-text-field>
58
+ <v-card elevation="0">
59
+ <v-container class="d-flex justify-center">
60
+ <v-col>
61
+ <v-row
62
+ justify="center"
63
+ align="center"
64
+ v-for="index in Number(
65
+ block.metadata.config.maxCategories
66
+ )"
67
+ >
68
+ <v-text-field
69
+ :key="'cat' + index"
70
+ v-model="
71
+ block.metadata.config
72
+ .categories[index - 1]
73
+ "
74
+ :counter="255"
75
+ append-icon="mdi-delete-outline"
76
+ maxlength="255"
77
+ :label="
78
+ $tc(
79
+ 'plugin.games.components.settings.quizshow_game.form.category',
80
+ 1
81
+ ) +
82
+ ' ' +
83
+ index
84
+ "
85
+ outlined
86
+ @click:append="
87
+ removeCategory(index)
88
+ "
89
+ ></v-text-field>
90
+ </v-row>
91
+ <v-row justify="center" align="center">
92
+ <v-btn
93
+ v-show="
94
+ Number(
95
+ block.metadata.config
96
+ .maxCategories
97
+ ) < 6
98
+ "
99
+ class="text-capitalize clickable"
100
+ @click="addCategory"
101
+ color="primary"
102
+ >
103
+ <v-icon>mdi-plus</v-icon>&nbsp{{
104
+ $t(
105
+ 'plugin.games.components.settings.quizshow_game.form.add_category'
106
+ )
107
+ }}</v-btn
108
+ >
109
+ </v-row>
110
+ </v-col>
111
+ </v-container>
112
+ </v-card>
119
113
  </v-expansion-panel-content>
120
114
  </v-expansion-panel>
121
-
122
- <br />
123
-
115
+ <v-divider class="cardOutline primary"></v-divider>
124
116
  <v-expansion-panel>
125
117
  <v-expansion-panel-header>
126
118
  <template v-slot:default="{ open }">
127
- <v-row no-gutters>
128
- {{
129
- $t(
130
- 'plugin.games.components.settings.quizshow_game.form.points_per_row'
131
- )
132
- }}
119
+ <v-row no-gutters class="text-capitalize">
120
+ <h5>
121
+ {{
122
+ $t(
123
+ 'plugin.games.components.settings.quizshow_game.form.max_rows'
124
+ )
125
+ }}
126
+ </h5>
133
127
  </v-row>
134
128
  </template>
135
129
  <template v-slot:actions>
136
- <v-icon
137
- :color="
138
- expansionColor(
139
- block.metadata.config.points,
140
- block.metadata.config.maxRows
141
- )
142
- "
143
- >
144
- {{
145
- expansionIcon(
146
- block.metadata.config.points,
147
- block.metadata.config.maxRows
148
- )
149
- }}
150
- </v-icon>
130
+ <v-icon> mdi-chevron-down </v-icon>
151
131
  </template>
152
132
  </v-expansion-panel-header>
153
133
  <v-expansion-panel-content>
154
- <v-text-field
155
- v-for="index in Number(
156
- block.metadata.config.maxRows
157
- )"
158
- :key="'row' + index"
159
- v-model="block.metadata.config.points[index - 1]"
160
- type="number"
161
- min="1"
162
- max="9999"
163
- @input="onPointsChange(index - 1)"
164
- :rules="validation.pointsRules"
165
- :label="
166
- $t(
167
- 'plugin.games.components.settings.quizshow_game.form.row'
168
- ) +
169
- ' ' +
170
- index
171
- "
172
- outlined
173
- ></v-text-field>
134
+ <v-card elevation="0">
135
+ <v-container class="d-flex justify-center">
136
+ <v-col>
137
+ <v-row
138
+ justify="center"
139
+ align="center"
140
+ v-for="index in Number(
141
+ block.metadata.config.maxRows
142
+ )"
143
+ >
144
+ <v-text-field
145
+ :key="'row' + index"
146
+ append-icon="mdi-delete-outline"
147
+ v-model="
148
+ block.metadata.config.points[
149
+ index - 1
150
+ ]
151
+ "
152
+ type="number"
153
+ min="1"
154
+ max="9999"
155
+ @input="onPointsChange(index - 1)"
156
+ :label="
157
+ $t(
158
+ 'plugin.games.components.settings.quizshow_game.form.row'
159
+ ) +
160
+ ' ' +
161
+ index
162
+ "
163
+ outlined
164
+ @click:append="removeRow(index)"
165
+ ></v-text-field>
166
+ </v-row>
167
+ <v-row justify="center" align="center">
168
+ <v-btn
169
+ v-show="
170
+ Number(
171
+ block.metadata.config
172
+ .maxRows
173
+ ) < 6
174
+ "
175
+ class="text-capitalize clickable"
176
+ @click="addRow"
177
+ color="primary"
178
+ >
179
+ <v-icon>mdi-plus</v-icon>&nbsp{{
180
+ $t(
181
+ 'plugin.games.components.settings.quizshow_game.form.add_row'
182
+ )
183
+ }}</v-btn
184
+ >
185
+ </v-row>
186
+ </v-col>
187
+ </v-container>
188
+ </v-card>
174
189
  </v-expansion-panel-content>
175
190
  </v-expansion-panel>
191
+ <v-divider class="cardOutline primary"></v-divider>
176
192
  </v-expansion-panels>
177
-
178
- <br />
179
193
  </v-form>
180
194
  <div v-if="loading" class="text-center">
181
195
  <v-progress-circular
@@ -248,13 +262,39 @@ export default {
248
262
  ],
249
263
  },
250
264
  loading: false,
265
+ cursor: 'changePointer',
251
266
  quizShowSettings: {
252
- title: '',
267
+ title: this.$t(
268
+ 'plugin.games.components.settings.quizshow_game.title'
269
+ ),
253
270
  responsive: true,
254
- instructions: '',
271
+ instructions: this.$t(
272
+ 'plugin.games.components.settings.quizshow_game.form.default_instructions'
273
+ ),
255
274
  maxCategories: 4,
256
275
  maxRows: 4,
257
- categories: [' ', ' ', ' ', ' '],
276
+ categories: [
277
+ this.$tc(
278
+ 'plugin.games.components.settings.quizshow_game.form.category',
279
+ 1,
280
+ { index: 1 }
281
+ ),
282
+ this.$tc(
283
+ 'plugin.games.components.settings.quizshow_game.form.category',
284
+ 1,
285
+ { index: 2 }
286
+ ),
287
+ this.$tc(
288
+ 'plugin.games.components.settings.quizshow_game.form.category',
289
+ 1,
290
+ { index: 3 }
291
+ ),
292
+ this.$tc(
293
+ 'plugin.games.components.settings.quizshow_game.form.category',
294
+ 1,
295
+ { index: 4 }
296
+ ),
297
+ ],
258
298
  points: ['100', '200', '300', '400'],
259
299
  },
260
300
  }
@@ -266,37 +306,9 @@ export default {
266
306
  }
267
307
  },
268
308
  methods: {
269
- expansionIcon(element, elementMax) {
270
- let icon = ''
271
- switch (element.length) {
272
- case 0:
273
- icon = 'mdi-alert-circle'
274
- break
275
-
276
- default:
277
- icon = 'mdi-chevron-down'
278
- }
279
-
280
- return icon
281
- },
282
- expansionColor(element, elementMax) {
283
- let color = ''
284
- switch (element.length) {
285
- case 0:
286
- color = 'error'
287
- break
288
- case elementMax:
289
- color = 'success'
290
- break
291
- default:
292
- color = ''
293
- }
294
-
295
- return color
296
- },
297
309
  changeMaxCategories() {
298
- if (this.block.metadata.config.maxCategories > 10) {
299
- this.block.metadata.config.maxCategories = 10
310
+ if (this.block.metadata.config.maxCategories > 6) {
311
+ this.block.metadata.config.maxCategories = 6
300
312
  } else if (
301
313
  !_.isNumber(this.block.metadata.config.maxCategories) ||
302
314
  this.block.metadata.config.maxCategories < 1
@@ -323,8 +335,8 @@ export default {
323
335
  )
324
336
  },
325
337
  changeMaxRows() {
326
- if (this.block.metadata.config.maxRows > 10) {
327
- this.block.metadata.config.maxRows = 10
338
+ if (this.block.metadata.config.maxRows > 6) {
339
+ this.block.metadata.config.maxRows = 6
328
340
  } else if (
329
341
  !_.isNumber(this.block.metadata.config.maxRows) ||
330
342
  this.block.metadata.config.maxRows < 1
@@ -363,46 +375,61 @@ export default {
363
375
  this.block.metadata.config.points[index] = 1
364
376
  }
365
377
  },
366
- onChange(input) {
367
- this.$toast.info(
378
+ addCategory() {
379
+ this.block.metadata.config.categories[
380
+ this.block.metadata.config.maxCategories
381
+ ] =
368
382
  this.$t(
369
- 'plugin.games.components.settings.quizshow_game.form.confirm_change_text'
370
- ),
371
- {
372
- icon: 'mdi-help',
373
- duration: null,
374
- action: [
375
- {
376
- text: this.$t('shared.forms.cancel'),
377
- onClick: (e, toastObject) => {
378
- toastObject.goAway(0)
379
- if (input === 'categories') {
380
- this.block.metadata.config.maxCategories =
381
- this.quizShowSettings.maxCategories
382
- } else if (input === 'rows') {
383
- this.block.metadata.config.maxRows =
384
- this.quizShowSettings.maxRows
385
- }
386
- },
387
- },
388
- {
389
- text: this.$t('shared.forms.confirm'),
390
- // router navigation
391
- onClick: (e, toastObject) => {
392
- if (input === 'categories') {
393
- this.changeMaxCategories()
394
- } else if (input === 'rows') {
395
- this.changeMaxRows()
396
- }
397
- toastObject.goAway(0)
398
- },
399
- },
400
- ],
401
- }
402
- )
383
+ 'plugin.games.components.settings.quizshow_game.form.new'
384
+ ) +
385
+ ' ' +
386
+ this.$tc(
387
+ 'plugin.games.components.settings.quizshow_game.form.category',
388
+ 1
389
+ )
390
+ this.block.metadata.config.maxCategories++
391
+ this.changeMaxCategories()
392
+ },
393
+ removeCategory(index) {
394
+ this.block.metadata.config.categories.splice(index - 1, 1)
395
+ this.block.metadata.config.maxCategories--
396
+ },
397
+ addRow() {
398
+ this.block.metadata.config.points[
399
+ this.block.metadata.config.maxRows
400
+ ] = 100
401
+ this.block.metadata.config.maxRows++
402
+ this.changeMaxRows()
403
+ },
404
+ removeRow(index) {
405
+ //
406
+ // this.block.metadata.config.points.splice(index, 1)
407
+ this.block.metadata.config.points.splice(index - 1, 1)
408
+ this.block.metadata.config.maxRows--
409
+ //this.changeMaxCategories()
410
+ },
411
+ onChange(input) {
412
+ if (input === 'categories') {
413
+ this.changeMaxCategories()
414
+ } else if (input === 'rows') {
415
+ this.changeMaxRows()
416
+ }
403
417
  },
404
418
  },
405
419
  }
406
420
  </script>
407
421
 
408
- <style scoped></style>
422
+ <style lang="scss" scoped>
423
+ .cardOutline {
424
+ border: 0.01rem solid;
425
+ }
426
+ .itemHeight {
427
+ display: flex;
428
+ align-content: center;
429
+ justify-content: space-between;
430
+ height: 60px;
431
+ }
432
+ .clickable {
433
+ cursor: pointer !important;
434
+ }
435
+ </style>