@windward/games 0.0.7 → 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.
- package/components/content/blocks/dragDrop/BucketGame.vue +18 -6
- package/components/content/blocks/dragDrop/SortingGame.vue +127 -55
- package/components/content/blocks/wordJumble/WordJumble.vue +11 -5
- package/components/settings/BucketGameSettingsManager.vue +306 -369
- package/components/settings/SortingGameSettingsManager.vue +181 -152
- package/components/settings/WordJumbleSettingsManager.vue +145 -137
- package/i18n/en-US/components/content/blocks/word_jumble.ts +1 -1
- package/i18n/en-US/components/settings/bucket_game.ts +5 -2
- package/i18n/en-US/components/settings/sorting_game.ts +2 -0
- package/i18n/en-US/components/settings/word_jumble.ts +1 -1
- package/package.json +1 -1
|
@@ -1,10 +1,12 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<
|
|
3
|
-
<v-
|
|
4
|
-
<v-
|
|
2
|
+
<div>
|
|
3
|
+
<v-form ref="form" v-model="valid" v-if="!loading">
|
|
4
|
+
<v-container class="pa-0">
|
|
5
5
|
<v-text-field
|
|
6
6
|
v-model="block.metadata.config.title"
|
|
7
7
|
:counter="50"
|
|
8
|
+
outlined
|
|
9
|
+
:autofocus="true"
|
|
8
10
|
:label="
|
|
9
11
|
$t(
|
|
10
12
|
'plugin.games.components.settings.word_jumble.title_input'
|
|
@@ -12,7 +14,6 @@
|
|
|
12
14
|
"
|
|
13
15
|
ref="title"
|
|
14
16
|
></v-text-field>
|
|
15
|
-
<br />
|
|
16
17
|
<v-textarea
|
|
17
18
|
outlined
|
|
18
19
|
auto-grow
|
|
@@ -23,118 +24,109 @@
|
|
|
23
24
|
)
|
|
24
25
|
"
|
|
25
26
|
></v-textarea>
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
<v-
|
|
29
|
-
<
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
27
|
+
</v-container>
|
|
28
|
+
<v-divider class="my-4 primary"></v-divider>
|
|
29
|
+
<v-container class="pa-0">
|
|
30
|
+
<p>
|
|
31
|
+
{{
|
|
32
|
+
$t(
|
|
33
|
+
'plugin.games.components.settings.word_jumble.word_jumble'
|
|
34
|
+
)
|
|
35
|
+
}}
|
|
36
|
+
</p>
|
|
37
|
+
<draggable v-model="block.metadata.config.words" group="cards">
|
|
38
|
+
<v-container
|
|
39
|
+
v-for="(word, index) in block.metadata.config.words"
|
|
40
|
+
:key="index"
|
|
41
|
+
class="container-card-outline"
|
|
42
|
+
elevation="0"
|
|
43
|
+
outlined
|
|
44
|
+
tile
|
|
45
|
+
>
|
|
46
|
+
<v-layout row wrap outlined>
|
|
47
|
+
<v-flex xs10 :class="bottomBorder(index)">
|
|
48
|
+
<p
|
|
49
|
+
class="text-truncate mb-0 p-header"
|
|
50
|
+
@click="onOpenEditor(index)"
|
|
51
|
+
v-on:keyup.enter="onOpenEditor(index)"
|
|
52
|
+
@mouseover="onHover"
|
|
53
|
+
@mouseleave="onHoverLeave"
|
|
54
|
+
:class="cursor"
|
|
55
|
+
tabindex="0"
|
|
56
|
+
>
|
|
57
|
+
<v-icon>mdi-drag-vertical</v-icon>
|
|
58
|
+
<span class="span-text-ellipsis">
|
|
59
|
+
{{
|
|
60
|
+
word.value
|
|
61
|
+
? word.value
|
|
62
|
+
: $t(
|
|
63
|
+
'plugin.games.components.settings.word_jumble.click'
|
|
64
|
+
)
|
|
65
|
+
}}
|
|
66
|
+
</span>
|
|
67
|
+
</p>
|
|
68
|
+
</v-flex>
|
|
69
|
+
<v-flex
|
|
70
|
+
xs2
|
|
71
|
+
class="btn-header-delete d-flex justify-center"
|
|
72
|
+
:class="bottomBorder(index)"
|
|
45
73
|
>
|
|
46
|
-
<v-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
class="pa-2 flex-fill cardOutline"
|
|
51
|
-
elevation="0"
|
|
52
|
-
outlined
|
|
53
|
-
tile
|
|
74
|
+
<v-icon
|
|
75
|
+
class="btn-delete-icon"
|
|
76
|
+
@click="onDelete(index)"
|
|
77
|
+
>mdi-delete-outline</v-icon
|
|
54
78
|
>
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
64
|
-
|
|
65
|
-
tabindex="0"
|
|
66
|
-
>
|
|
67
|
-
<v-icon class="pl-2"
|
|
68
|
-
>mdi-gesture-tap-hold</v-icon
|
|
69
|
-
>
|
|
70
|
-
{{
|
|
71
|
-
word.value
|
|
72
|
-
? word.value
|
|
73
|
-
: $t(
|
|
74
|
-
'plugin.games.components.settings.word_jumble.click'
|
|
75
|
-
)
|
|
76
|
-
}}
|
|
77
|
-
</p>
|
|
78
|
-
<v-icon
|
|
79
|
-
class="twenty"
|
|
80
|
-
@click="onDelete(index)"
|
|
81
|
-
>mdi-delete-outline</v-icon
|
|
82
|
-
>
|
|
83
|
-
</v-row>
|
|
79
|
+
</v-flex>
|
|
80
|
+
<v-container v-if="word.expand">
|
|
81
|
+
<v-flex xs12>
|
|
82
|
+
<p class="p-label">
|
|
83
|
+
{{
|
|
84
|
+
$t(
|
|
85
|
+
'plugin.games.components.settings.word_jumble.word_jumble'
|
|
86
|
+
)
|
|
87
|
+
}}
|
|
88
|
+
</p>
|
|
84
89
|
<v-textarea
|
|
85
|
-
v-if="word.expand"
|
|
86
90
|
outlined
|
|
87
91
|
:autofocus="true"
|
|
88
|
-
class="pt-3"
|
|
89
92
|
v-model="
|
|
90
93
|
block.metadata.config.words[index]
|
|
91
94
|
.value
|
|
92
95
|
"
|
|
93
|
-
|
|
96
|
+
></v-textarea>
|
|
97
|
+
</v-flex>
|
|
98
|
+
<v-flex xs12>
|
|
99
|
+
<p class="p-label">
|
|
100
|
+
{{
|
|
94
101
|
$t(
|
|
95
|
-
'plugin.games.components.settings.word_jumble.
|
|
102
|
+
'plugin.games.components.settings.word_jumble.hint'
|
|
96
103
|
)
|
|
97
|
-
|
|
98
|
-
|
|
104
|
+
}}
|
|
105
|
+
</p>
|
|
99
106
|
<v-textarea
|
|
100
|
-
v-if="word.expand"
|
|
101
107
|
outlined
|
|
102
|
-
class="pt-3"
|
|
103
108
|
v-model="
|
|
104
109
|
block.metadata.config.words[index]
|
|
105
110
|
.hint
|
|
106
111
|
"
|
|
107
|
-
:label="
|
|
108
|
-
$t(
|
|
109
|
-
'plugin.games.components.settings.word_jumble.hint'
|
|
110
|
-
)
|
|
111
|
-
"
|
|
112
112
|
></v-textarea>
|
|
113
|
-
</v-
|
|
114
|
-
</
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
)
|
|
131
|
-
}}
|
|
132
|
-
</p>
|
|
133
|
-
</v-container>
|
|
134
|
-
</v-expansion-panel-content>
|
|
135
|
-
</v-expansion-panel>
|
|
136
|
-
</v-expansion-panels>
|
|
137
|
-
<v-row class="mt-3">
|
|
113
|
+
</v-flex>
|
|
114
|
+
</v-container>
|
|
115
|
+
</v-layout>
|
|
116
|
+
</v-container>
|
|
117
|
+
</draggable>
|
|
118
|
+
</v-container>
|
|
119
|
+
<v-container class="pa-0">
|
|
120
|
+
<v-row justify="center" class="my-4">
|
|
121
|
+
<v-btn color="primary" @click="onAddWord">
|
|
122
|
+
<v-icon>mdi-plus</v-icon>
|
|
123
|
+
{{
|
|
124
|
+
$t(
|
|
125
|
+
'plugin.games.components.settings.word_jumble.add'
|
|
126
|
+
)
|
|
127
|
+
}}
|
|
128
|
+
</v-btn>
|
|
129
|
+
</v-row>
|
|
138
130
|
<v-textarea
|
|
139
131
|
v-model="block.metadata.config.feedback_correct"
|
|
140
132
|
outlined
|
|
@@ -147,7 +139,6 @@
|
|
|
147
139
|
"
|
|
148
140
|
ref="title"
|
|
149
141
|
></v-textarea>
|
|
150
|
-
<br />
|
|
151
142
|
<v-textarea
|
|
152
143
|
outlined
|
|
153
144
|
auto-grow
|
|
@@ -158,10 +149,17 @@
|
|
|
158
149
|
)
|
|
159
150
|
"
|
|
160
151
|
></v-textarea>
|
|
161
|
-
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
|
|
152
|
+
</v-container>
|
|
153
|
+
</v-form>
|
|
154
|
+
<div v-if="loading" class="text-center">
|
|
155
|
+
<v-progress-circular
|
|
156
|
+
:size="70"
|
|
157
|
+
:width="7"
|
|
158
|
+
color="primary"
|
|
159
|
+
indeterminate
|
|
160
|
+
></v-progress-circular>
|
|
161
|
+
</div>
|
|
162
|
+
</div>
|
|
165
163
|
</template>
|
|
166
164
|
<script>
|
|
167
165
|
import _ from 'lodash'
|
|
@@ -185,16 +183,22 @@ export default {
|
|
|
185
183
|
this.block.metadata.config = {}
|
|
186
184
|
}
|
|
187
185
|
if (_.isEmpty(this.block.metadata.config.title)) {
|
|
188
|
-
this.block.metadata.config.title =
|
|
186
|
+
this.block.metadata.config.title = this.$t(
|
|
187
|
+
'plugin.games.components.content.blocks.word_jumble.title'
|
|
188
|
+
)
|
|
189
189
|
}
|
|
190
190
|
if (_.isEmpty(this.block.metadata.config.instructions)) {
|
|
191
191
|
this.block.metadata.config.instructions = ''
|
|
192
192
|
}
|
|
193
193
|
if (_.isEmpty(this.block.metadata.config.feedback_correct)) {
|
|
194
|
-
this.block.metadata.config.feedback_correct =
|
|
194
|
+
this.block.metadata.config.feedback_correct = this.$t(
|
|
195
|
+
'plugin.games.components.settings.bucket_game.form.feedback.correct_default'
|
|
196
|
+
)
|
|
195
197
|
}
|
|
196
198
|
if (_.isEmpty(this.block.metadata.config.feedback_incorrect)) {
|
|
197
|
-
this.block.metadata.config.feedback_incorrect =
|
|
199
|
+
this.block.metadata.config.feedback_incorrect = this.$t(
|
|
200
|
+
'plugin.games.components.settings.bucket_game.form.feedback.incorrect_default'
|
|
201
|
+
)
|
|
198
202
|
}
|
|
199
203
|
if (_.isEmpty(this.block.metadata.config.words)) {
|
|
200
204
|
this.block.metadata.config.words = []
|
|
@@ -203,11 +207,20 @@ export default {
|
|
|
203
207
|
},
|
|
204
208
|
data() {
|
|
205
209
|
return {
|
|
210
|
+
valid: true,
|
|
206
211
|
debounce: null,
|
|
207
212
|
cursor: null,
|
|
213
|
+
loading: false,
|
|
208
214
|
}
|
|
209
215
|
},
|
|
210
216
|
methods: {
|
|
217
|
+
bottomBorder(index) {
|
|
218
|
+
if (this.block.metadata.config.words[index].expand === true) {
|
|
219
|
+
return 'container-header-border'
|
|
220
|
+
} else {
|
|
221
|
+
return null
|
|
222
|
+
}
|
|
223
|
+
},
|
|
211
224
|
onAddWord() {
|
|
212
225
|
this.block.metadata.config.words.forEach((element) => {
|
|
213
226
|
element.expand = false
|
|
@@ -239,7 +252,7 @@ export default {
|
|
|
239
252
|
})
|
|
240
253
|
},
|
|
241
254
|
onHover(index) {
|
|
242
|
-
this.cursor = '
|
|
255
|
+
this.cursor = 'change-pointer'
|
|
243
256
|
},
|
|
244
257
|
onHoverLeave() {
|
|
245
258
|
this.cursor = ''
|
|
@@ -251,46 +264,41 @@ export default {
|
|
|
251
264
|
.v-progress-circular {
|
|
252
265
|
margin: 1rem;
|
|
253
266
|
}
|
|
254
|
-
.
|
|
255
|
-
border:
|
|
267
|
+
.container-card-outline {
|
|
268
|
+
border: solid 1px var(--v-primary-base);
|
|
269
|
+
border-radius: 3px !important;
|
|
256
270
|
margin-bottom: 8px;
|
|
257
271
|
}
|
|
258
|
-
.
|
|
259
|
-
|
|
260
|
-
justify-content: center;
|
|
261
|
-
align-items: center;
|
|
262
|
-
font-weight: bold;
|
|
263
|
-
font-size: 16px;
|
|
264
|
-
}
|
|
265
|
-
.itemHeight {
|
|
266
|
-
display: flex;
|
|
267
|
-
align-content: center;
|
|
268
|
-
justify-content: space-between;
|
|
269
|
-
height: 60px;
|
|
272
|
+
.container-header-border {
|
|
273
|
+
border-bottom: 1px solid var(--v-primary-base);
|
|
270
274
|
}
|
|
271
|
-
.
|
|
275
|
+
.change-pointer {
|
|
272
276
|
cursor: pointer !important;
|
|
273
277
|
}
|
|
274
|
-
.
|
|
275
|
-
|
|
276
|
-
height: 100%;
|
|
278
|
+
.p-header {
|
|
279
|
+
height: 45px;
|
|
277
280
|
display: flex;
|
|
278
281
|
align-items: center;
|
|
279
282
|
}
|
|
280
|
-
.
|
|
281
|
-
|
|
282
|
-
height: 90%;
|
|
283
|
-
margin-top: 3px;
|
|
284
|
-
border-left: 2px solid var(--v-primary-base);
|
|
283
|
+
.p-header:hover {
|
|
284
|
+
background-color: rgb(243, 243, 243);
|
|
285
285
|
}
|
|
286
|
-
.
|
|
287
|
-
|
|
288
|
-
|
|
286
|
+
.span-text-ellipsis {
|
|
287
|
+
white-space: nowrap;
|
|
288
|
+
overflow: hidden;
|
|
289
|
+
text-overflow: ellipsis;
|
|
289
290
|
}
|
|
290
|
-
.
|
|
291
|
-
|
|
291
|
+
.btn-header-delete {
|
|
292
|
+
border-left: 1px solid var(--v-primary-base);
|
|
292
293
|
}
|
|
293
|
-
.
|
|
294
|
-
|
|
294
|
+
.btn-header-delete:hover {
|
|
295
|
+
background-color: rgb(243, 243, 243);
|
|
296
|
+
}
|
|
297
|
+
.btn-delete-icon {
|
|
298
|
+
color: var(--v-primary-base);
|
|
299
|
+
}
|
|
300
|
+
.p-label {
|
|
301
|
+
font-size: 16px;
|
|
302
|
+
font-weight: 500;
|
|
295
303
|
}
|
|
296
304
|
</style>
|
|
@@ -4,11 +4,14 @@ export default {
|
|
|
4
4
|
mass_entry: 'Mass data entry',
|
|
5
5
|
title: 'Title',
|
|
6
6
|
instructions: 'Instructions',
|
|
7
|
-
buckets: '
|
|
7
|
+
buckets: 'Bucket Items',
|
|
8
8
|
feedback: {
|
|
9
|
+
feedback: 'Feedback',
|
|
9
10
|
default: 'Default feedback',
|
|
10
11
|
correct: 'feedback when correct',
|
|
11
12
|
incorrect: 'feedback when incorrect',
|
|
13
|
+
correct_default: 'Correct!',
|
|
14
|
+
incorrect_default: 'That is incorrect.',
|
|
12
15
|
},
|
|
13
16
|
image: {
|
|
14
17
|
title: 'Flash Card Image File',
|
|
@@ -30,6 +33,6 @@ export default {
|
|
|
30
33
|
add_bucket: 'Add Bucket',
|
|
31
34
|
click_here: 'Click here to enter text',
|
|
32
35
|
add_answer: 'Add Answer',
|
|
33
|
-
color: 'Bucket Color'
|
|
36
|
+
color: 'Bucket Color',
|
|
34
37
|
},
|
|
35
38
|
}
|