@windward/games 0.0.6 → 0.0.8

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 (18) 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/flashcards/Flashcard.vue +5 -2
  4. package/components/content/blocks/multipleChoice/QuestionDialog.vue +1 -0
  5. package/components/content/blocks/sevenStrikes/SevenStikes.vue +3 -3
  6. package/components/content/blocks/wordJumble/WordJumble.vue +11 -5
  7. package/components/settings/BucketGameSettingsManager.vue +306 -369
  8. package/components/settings/FlashCardSlidesManager.vue +66 -25
  9. package/components/settings/MultipleChoiceSettingsManager.vue +1 -0
  10. package/components/settings/SevenStrikesSettingsManager.vue +10 -3
  11. package/components/settings/SortingGameSettingsManager.vue +181 -152
  12. package/components/settings/WordJumbleSettingsManager.vue +145 -137
  13. package/i18n/en-US/components/content/blocks/word_jumble.ts +1 -1
  14. package/i18n/en-US/components/settings/bucket_game.ts +5 -2
  15. package/i18n/en-US/components/settings/flashcard.ts +3 -1
  16. package/i18n/en-US/components/settings/sorting_game.ts +2 -0
  17. package/i18n/en-US/components/settings/word_jumble.ts +1 -1
  18. package/package.json +1 -1
package/components/settings/FlashCardSlidesManager.vue CHANGED
@@ -36,7 +36,7 @@
36
36
  v-for="(item, index) in block.metadata.config
37
37
  .cards"
38
38
  :key="'card_' + index"
39
- class="pa-2 flex-fill"
39
+ class="pa-2 flex-fill cursorGrab"
40
40
  elevation="0"
41
41
  outlined
42
42
  tile
@@ -140,7 +140,11 @@
140
140
  index
141
141
  ].title
142
142
  "
143
- label="Title"
143
+ :label="
144
+ $t(
145
+ 'plugin.games.components.settings.flashcard.form.label'
146
+ )
147
+ "
144
148
  ></v-text-field>
145
149
  <br />
146
150
  <v-textarea
@@ -156,7 +160,11 @@
156
160
  index
157
161
  ].front.header
158
162
  "
159
- label="Header"
163
+ :label="
164
+ $t(
165
+ 'plugin.games.components.settings.flashcard.form.header'
166
+ )
167
+ "
160
168
  />
161
169
  <v-textarea
162
170
  v-if="
@@ -172,41 +180,71 @@
172
180
  ].back.header
173
181
  "
174
182
  :counter="255"
175
- label="Header"
183
+ :label="
184
+ $t(
185
+ 'plugin.games.components.settings.flashcard.form.header'
186
+ )
187
+ "
176
188
  required
177
189
  />
178
- <textEditor
190
+ <v-card
191
+ outlined
179
192
  v-show="
180
193
  block.metadata.config.cards[
181
194
  index
182
195
  ].side
183
196
  "
197
+ >
198
+ <v-card-text>
199
+ {{
200
+ $t(
201
+ 'plugin.games.components.settings.flashcard.form.card_content'
202
+ )
203
+ }}
204
+ </v-card-text>
205
+ <textEditor
206
+ outlined
207
+ auto-grow
208
+ v-model="
209
+ block.metadata.config.cards[
210
+ index
211
+ ].front.text
212
+ "
213
+ :label="
214
+ $t(
215
+ 'plugin.games.components.settings.flashcard.form.text'
216
+ )
217
+ "
218
+ required
219
+ />
220
+ </v-card>
221
+ <v-card
184
222
  outlined
185
- auto-grow
186
- v-model="
187
- block.metadata.config.cards[
188
- index
189
- ].front.text
190
- "
191
- label="Text"
192
- required
193
- />
194
- <textEditor
195
223
  v-show="
196
224
  !block.metadata.config.cards[
197
225
  index
198
226
  ].side
199
227
  "
200
- outlined
201
- auto-grow
202
- v-model="
203
- block.metadata.config.cards[
204
- index
205
- ].back.text
206
- "
207
- label="Text"
208
- required
209
- />
228
+ >
229
+ <v-card-text>
230
+ {{
231
+ $t(
232
+ 'plugin.games.components.settings.flashcard.form.card_content'
233
+ )
234
+ }}
235
+ </v-card-text>
236
+ <textEditor
237
+ outlined
238
+ auto-grow
239
+ v-model="
240
+ block.metadata.config.cards[
241
+ index
242
+ ].back.text
243
+ "
244
+ label="Text"
245
+ required
246
+ />
247
+ </v-card>
210
248
  <br />
211
249
  <ContentBlockAsset
212
250
  v-show="
@@ -486,4 +524,7 @@ export default {
486
524
  .changePointer {
487
525
  cursor: pointer !important;
488
526
  }
527
+ .cursorGrab {
528
+ cursor: grab;
529
+ }
489
530
  </style>
package/components/settings/MultipleChoiceSettingsManager.vue CHANGED
@@ -254,6 +254,7 @@ export default {
254
254
  body: '',
255
255
  hint: '',
256
256
  answer_description: '',
257
+ id: Crypto.id(),
257
258
  })
258
259
  this.editingIndex = this.block.metadata.config.questions.length - 1
259
260
  },
package/components/settings/SevenStrikesSettingsManager.vue CHANGED
@@ -195,9 +195,16 @@ export default {
195
195
  element.splitWord = element.value.split('')
196
196
  element.splitWord.forEach((letter) => {
197
197
  const letterIndex = element.splitWord.indexOf(letter)
198
- element.splitWord[letterIndex] = {
199
- letter: letter,
200
- show: false,
198
+ if (letter !== ' ') {
199
+ element.splitWord[letterIndex] = {
200
+ letter: letter,
201
+ show: false,
202
+ }
203
+ } else {
204
+ element.splitWord[letterIndex] = {
205
+ letter: letter,
206
+ show: true,
207
+ }
201
208
  }
202
209
  })
203
210
  })
package/components/settings/SortingGameSettingsManager.vue CHANGED
@@ -1,144 +1,146 @@
1
1
  <template>
2
2
  <div>
3
- <br />
4
3
  <v-form ref="form" v-model="valid" v-if="!loading">
5
- <v-text-field
6
- v-model="block.metadata.config.title"
7
- :counter="50"
8
- :label="
9
- $t(
10
- 'plugin.games.components.settings.bucket_game.form.title'
11
- )
12
- "
13
- ref="title"
14
- ></v-text-field>
15
- <br />
16
- <v-textarea
17
- outlined
18
- auto-grow
19
- v-model="block.metadata.config.instructions"
20
- :counter="255"
21
- :label="
22
- $t(
23
- 'plugin.games.components.settings.bucket_game.form.instructions'
24
- )
25
- "
26
- ></v-textarea>
27
- <v-expansion-panels flat>
28
- <v-expansion-panel>
29
- <v-expansion-panel-header class="pa-0"
30
- ><h3>
31
- {{
32
- $t(
33
- 'plugin.games.components.settings.sorting_game.sortable_items'
34
- )
35
- }}
36
- </h3></v-expansion-panel-header
4
+ <v-container class="pa-0">
5
+ <v-text-field
6
+ v-model="block.metadata.config.title"
7
+ outlined
8
+ :autofocus="true"
9
+ :counter="50"
10
+ :label="
11
+ $t(
12
+ 'plugin.games.components.settings.bucket_game.form.title'
13
+ )
14
+ "
15
+ ref="title"
16
+ ></v-text-field>
17
+ <v-textarea
18
+ outlined
19
+ auto-grow
20
+ v-model="block.metadata.config.instructions"
21
+ :counter="255"
22
+ :label="
23
+ $t(
24
+ 'plugin.games.components.settings.bucket_game.form.instructions'
25
+ )
26
+ "
27
+ ></v-textarea>
28
+ </v-container>
29
+ <v-divider class="my-4 primary"></v-divider>
30
+ <v-container class="pa-0">
31
+ <p>
32
+ {{
33
+ $t(
34
+ 'plugin.games.components.settings.sorting_game.sortable_items'
35
+ )
36
+ }}
37
+ </p>
38
+ <draggable
39
+ v-model="block.metadata.config.answer"
40
+ group="cards"
41
+ @change="onDragged"
42
+ >
43
+ <v-container
44
+ v-for="(item, index) in block.metadata.config.answer"
45
+ :key="'bucket_' + index"
46
+ class="container-card-outline"
47
+ elevation="0"
48
+ outlined
49
+ tile
37
50
  >
38
- <v-expansion-panel-content class="ma-0">
39
- <v-container class="pa-0">
40
- <draggable
41
- v-model="block.metadata.config.answer"
42
- class="d-flex flex-column mb-6"
43
- group="cards"
44
- @change="onDragged"
51
+ <v-layout row wrap outlined>
52
+ <v-flex xs10 :class="bottomBorder(index)">
53
+ <p
54
+ class="text-truncate mb-0 p-header"
55
+ @click="onOpenEditor(index)"
56
+ v-on:keyup.enter="onOpenEditor(index)"
57
+ @mouseover="onHover"
58
+ @mouseleave="onHoverLeave"
59
+ :class="cursor"
60
+ tabindex="0"
61
+ >
62
+ <v-icon>mdi-drag-vertical</v-icon>
63
+ <span class="span-text-ellipsis">
64
+ {{
65
+ item.value
66
+ ? block.metadata.config.answer[
67
+ index
68
+ ].value
69
+ : $t(
70
+ 'plugin.games.components.settings.bucket_game.form.enter_text'
71
+ )
72
+ }}
73
+ </span>
74
+ </p>
75
+ </v-flex>
76
+ <v-flex
77
+ xs2
78
+ class="btn-header-delete d-flex justify-center"
79
+ :class="bottomBorder(index)"
45
80
  >
46
- <v-card
47
- v-for="(item, index) in block.metadata
48
- .config.answer"
49
- :key="'bucket_' + index"
50
- class="pa-2 flex-fill cardOutline"
51
- elevation="0"
52
- outlined
53
- tile
81
+ <v-icon
82
+ class="btn-delete-icon"
83
+ @click="onDelete(index)"
84
+ >mdi-delete-outline</v-icon
54
85
  >
55
- <v-row class="itemHeight">
56
- <p
57
- class="text-truncate pa-0 ma-0 seventy"
58
- @click="onOpenEditor(index)"
59
- v-on:keyup.enter="
60
- onOpenEditor(index)
61
- "
62
- @mouseover="onHover"
63
- @mouseleave="onHoverLeave"
64
- :class="cursor"
65
- tabindex="0"
66
- >
67
- <v-icon class="pl-2"
68
- >mdi-gesture-tap-hold</v-icon
69
- >
70
- {{
71
- item.value
72
- ? block.metadata.config
73
- .answer[index].value
74
- : $t(
75
- 'plugin.games.components.settings.bucket_game.form.enter_text'
76
- )
77
- }}
78
- </p>
79
- <v-icon
80
- class="twenty"
81
- @click="onDelete(index)"
82
- >mdi-delete-outline</v-icon
83
- >
84
- </v-row>
86
+ </v-flex>
87
+ <v-container v-if="item.expand">
88
+ <v-flex xs12>
89
+ <p class="p-label">
90
+ {{
91
+ $t(
92
+ 'plugin.games.components.settings.sorting_game.word'
93
+ )
94
+ }}
95
+ </p>
85
96
  <v-textarea
86
- v-if="item.expand"
87
97
  outlined
88
- :autofocus="true"
89
- class="pt-4"
90
98
  v-model="
91
99
  block.metadata.config.answer[index]
92
100
  .value
93
101
  "
102
+ :autofocus="true"
94
103
  ></v-textarea>
95
- </v-card>
96
- </draggable>
97
- <p
98
- @mouseover="onHover"
99
- @mouseleave="onHoverLeave"
100
- @click="onAddElement"
101
- v-on:keyup.enter="onAddElement"
102
- class="fullWidth"
103
- :class="cursor"
104
- tabindex="0"
105
- >
106
- <v-icon class="primary addIcon"
107
- >mdi-plus</v-icon
108
- >
109
- {{
110
- $t(
111
- 'plugin.games.components.content.blocks.sorting_game.add_element'
112
- )
113
- }}
114
- </p>
115
- </v-container>
116
- </v-expansion-panel-content>
117
- </v-expansion-panel>
118
- </v-expansion-panels>
119
- <br />
120
- <v-textarea
121
- outlined
122
- auto-grow
123
- v-model="block.metadata.config.feedback_correct"
124
- :counter="255"
125
- :label="
126
- $t(
127
- 'plugin.games.components.settings.bucket_game.form.feedback.correct'
128
- )
129
- "
130
- ></v-textarea>
131
- <v-textarea
132
- outlined
133
- auto-grow
134
- v-model="block.metadata.config.feedback_incorrect"
135
- :counter="255"
136
- :label="
137
- $t(
138
- 'plugin.games.components.settings.bucket_game.form.feedback.incorrect'
139
- )
140
- "
141
- ></v-textarea>
104
+ </v-flex>
105
+ </v-container>
106
+ </v-layout>
107
+ </v-container>
108
+ </draggable>
109
+ </v-container>
110
+ <v-container class="pa-0">
111
+ <v-row justify="center" class="my-4">
112
+ <v-btn color="primary" @click="onAddElement">
113
+ <v-icon>mdi-plus</v-icon>
114
+ {{
115
+ $t(
116
+ 'plugin.games.components.settings.bucket_game.form.add_answer'
117
+ )
118
+ }}
119
+ </v-btn>
120
+ </v-row>
121
+ <v-textarea
122
+ outlined
123
+ auto-grow
124
+ v-model="block.metadata.config.feedback_correct"
125
+ :counter="255"
126
+ :label="
127
+ $t(
128
+ 'plugin.games.components.settings.bucket_game.form.feedback.correct'
129
+ )
130
+ "
131
+ ></v-textarea>
132
+ <v-textarea
133
+ outlined
134
+ auto-grow
135
+ v-model="block.metadata.config.feedback_incorrect"
136
+ :counter="255"
137
+ :label="
138
+ $t(
139
+ 'plugin.games.components.settings.bucket_game.form.feedback.incorrect'
140
+ )
141
+ "
142
+ ></v-textarea>
143
+ </v-container>
142
144
  </v-form>
143
145
  <div v-if="loading" class="text-center">
144
146
  <v-progress-circular
@@ -170,12 +172,27 @@ export default {
170
172
  if (_.isEmpty(this.block.metadata.config)) {
171
173
  this.block.metadata.config = {}
172
174
  }
175
+ if (_.isEmpty(this.block.metadata.config.title)) {
176
+ this.block.metadata.config.title = this.$t(
177
+ 'plugin.games.components.settings.sorting_game.sortable_game'
178
+ )
179
+ }
180
+ if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
181
+ this.block.metadata.config.feedback_correct = this.$t(
182
+ 'plugin.games.components.settings.bucket_game.form.feedback.correct_default'
183
+ )
184
+ }
185
+ if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
186
+ this.block.metadata.config.feedback_incorrect = this.$t(
187
+ 'plugin.games.components.settings.bucket_game.form.feedback.incorrect_default'
188
+ )
189
+ }
173
190
  if (_.isEmpty(this.block.metadata.config.answer)) {
174
191
  this.block.metadata.config.answer = []
175
192
  const default_object = {
176
193
  id: this.block.metadata.config.answer.length + 1,
177
194
  value: '',
178
- expand: false,
195
+ expand: true,
179
196
  }
180
197
  this.block.metadata.config.answer.push(default_object)
181
198
  }
@@ -197,6 +214,13 @@ export default {
197
214
  }
198
215
  },
199
216
  methods: {
217
+ bottomBorder(index) {
218
+ if (this.block.metadata.config.answer[index].expand === true) {
219
+ return 'container-header-border'
220
+ } else {
221
+ return null
222
+ }
223
+ },
200
224
  onAddElement() {
201
225
  this.block.metadata.config.answer.forEach((element) => {
202
226
  element.expand = false
@@ -226,7 +250,7 @@ export default {
226
250
  })
227
251
  },
228
252
  onHover(index) {
229
- this.cursor = 'changePointer'
253
+ this.cursor = 'change-pointer'
230
254
  },
231
255
  onHoverLeave() {
232
256
  this.cursor = ''
@@ -246,10 +270,14 @@ export default {
246
270
  .v-progress-circular {
247
271
  margin: 1rem;
248
272
  }
249
- .cardOutline {
250
- border: 2px solid var(--v-primary-base);
273
+ .container-card-outline {
274
+ border: solid 1px var(--v-primary-base);
275
+ border-radius: 3px !important;
251
276
  margin-bottom: 8px;
252
277
  }
278
+ .container-header-border {
279
+ border-bottom: 1px solid var(--v-primary-base);
280
+ }
253
281
  .fullWidth {
254
282
  display: flex;
255
283
  justify-content: center;
@@ -257,35 +285,36 @@ export default {
257
285
  font-weight: bold;
258
286
  font-size: 16px;
259
287
  }
260
- .itemHeight {
261
- display: flex;
262
- align-content: center;
263
- justify-content: space-between;
264
- height: 60px;
265
- }
266
- .changePointer {
288
+ .change-pointer {
267
289
  cursor: pointer !important;
268
290
  }
269
- .seventy {
270
- width: 70%;
271
- height: 100%;
291
+ .p-header {
292
+ height: 45px;
272
293
  display: flex;
273
294
  align-items: center;
274
295
  }
275
- .twenty {
276
- width: 20%;
277
- height: 90%;
278
- margin-top: 3px;
279
- border-left: 2px solid var(--v-primary-base);
296
+ .p-header:hover {
297
+ background-color: rgb(243, 243, 243);
280
298
  }
281
- .addButton {
282
- height: 50%;
283
- width: 50%;
299
+ .span-text-ellipsis {
300
+ white-space: nowrap;
301
+ overflow: hidden;
302
+ text-overflow: ellipsis;
303
+ }
304
+ .btn-header-delete {
305
+ border-left: 1px solid var(--v-primary-base);
306
+ }
307
+ .btn-header-delete:hover {
308
+ background-color: rgb(243, 243, 243);
309
+ }
310
+ .btn-delete-icon {
311
+ color: var(--v-primary-base);
284
312
  }
285
313
  .addIcon {
286
314
  margin-right: 5px;
287
315
  }
288
- .v-expansion-panel-content::v-deep .v-expansion-panel-content__wrap {
289
- padding: 0 !important;
316
+ .p-label {
317
+ font-size: 16px;
318
+ font-weight: 500;
290
319
  }
291
320
  </style>