@robotical/martyblocksjr 1.3.47 → 1.3.51

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.
@@ -18,6 +18,7 @@ body {
18
18
  width: 100%;
19
19
  height: 100%;
20
20
  overflow: hidden;
21
+ touch-action: none;
21
22
  }
22
23
 
23
24
  /* Set default, padding, margin and font-size on block elements */
@@ -1,146 +1,404 @@
1
1
  <!DOCTYPE html>
2
2
  <html>
3
- <head>
4
- <meta charset="utf-8">
5
- <script>
6
- window.scratchJrPage = 'inappInterfaceGuide';
7
- </script>
8
- <script type="text/javascript" src="../app.bundle.js"></script>
9
- </head>
10
- <body>
11
- <div id="content">
12
- <div id="content-buffer">
13
- </div>
14
- <div id="ipad-project-view-wrapper">
15
- <div class="learn-tab learn-tab-selected learn-interface">
16
- <!-- 1. Save -->
17
- <div class="interface-button interface-button-selected" id="interface-button-save">
18
- <div class="interface-button-text">1</div>
19
- </div>
20
- <div class="interface-vertical-line" id="interface-vertical-line-save"></div>
21
- <div class="interface-dot" id="interface-dot-save"></div>
22
- <!-- 2. Marty Connect -->
23
- <div class="interface-button" id="interface-button-marty-connect">
24
- <div class="interface-button-text">2</div>
25
- </div>
26
- <div class="interface-vertical-line" id="interface-vertical-line-marty-connect"></div>
27
- <div class="interface-dot" id="interface-dot-marty-connect"></div>
28
- <!-- 3. Stage -->
29
- <div class="interface-button" id="interface-button-stage">
30
- <div class="interface-button-text">3</div>
31
- </div>
32
- <div class="interface-vertical-line" id="interface-vertical-line-stage-1"></div>
33
- <div class="interface-horizontal-line" id="interface-horizontal-line-stage-1"></div>
34
- <div class="interface-vertical-line" id="interface-vertical-line-stage-2"></div>
35
- <div class="interface-horizontal-line" id="interface-horizontal-line-stage-2"></div>
36
- <div class="interface-horizontal-line" id="interface-horizontal-line-stage-3"></div>
37
- <!-- 4. Presentation Mode -->
38
- <div class="interface-button" id="interface-button-presentation-mode">
39
- <div class="interface-button-text">4</div>
40
- </div>
41
- <div class="interface-vertical-line" id="interface-vertical-line-presentation-mode"></div>
42
- <div class="interface-dot" id="interface-dot-presentation-mode"></div>
43
- <!-- 5. Grid -->
44
- <div class="interface-button" id="interface-button-grid">
45
- <div class="interface-button-text">5</div>
46
- </div>
47
- <div class="interface-vertical-line" id="interface-vertical-line-grid"></div>
48
- <div class="interface-dot" id="interface-dot-grid"></div>
49
- <!-- 6. Change Background -->
50
- <div class="interface-button" id="interface-button-change-background">
51
- <div class="interface-button-text">7</div>
52
- </div>
53
- <div class="interface-vertical-line" id="interface-vertical-line-change-background"></div>
54
- <div class="interface-dot" id="interface-dot-change-background"></div>
55
- <!-- 7. Add Text -->
56
- <div class="interface-button" id="interface-button-add-text">
57
- <div class="interface-button-text">6</div>
58
- </div>
59
- <div class="interface-vertical-line" id="interface-vertical-line-add-text"></div>
60
- <div class="interface-dot" id="interface-dot-add-text"></div>
61
- <!-- 8. Reset Characters -->
62
- <div class="interface-button" id="interface-button-reset-characters">
63
- <div class="interface-button-text">8</div>
64
- </div>
65
- <div class="interface-vertical-line" id="interface-vertical-line-reset-characters"></div>
66
- <div class="interface-dot" id="interface-dot-reset-characters"></div>
67
- <!-- 9. Green Flag -->
68
- <div class="interface-button" id="interface-button-green-flag">
69
- <div class="interface-button-text">9</div>
70
- </div>
71
- <div class="interface-vertical-line" id="interface-vertical-line-green-flag"></div>
72
- <div class="interface-dot" id="interface-dot-green-flag"></div>
73
- <!-- 10. Pages -->
74
- <div class="interface-button" id="interface-button-pages">
75
- <div class="interface-button-text">10</div>
76
- </div>
77
- <div class="interface-vertical-line" id="interface-vertical-line-pages"></div>
78
- <div class="interface-dot" id="interface-dot-pages"></div>
79
- <!-- 11. Project Information -->
80
- <div class="interface-button" id="interface-button-project-information">
81
- <div class="interface-button-text">11</div>
82
- </div>
83
- <div class="interface-vertical-line" id="interface-vertical-line-project-information"></div>
84
- <div class="interface-dot" id="interface-dot-project-information"></div>
85
- <!-- 16. Characters -->
86
- <!-- <div class="interface-button" id="interface-button-characters">
87
- <div class="interface-button-text">16</div>
88
- </div>
89
- <div class="interface-vertical-line" id="interface-vertical-line-characters-1"></div>
90
- <div class="interface-vertical-line" id="interface-vertical-line-characters-3"></div>
91
- <div class="interface-horizontal-line" id="interface-horizontal-line-characters"></div>
92
- <div class="interface-vertical-line" id="interface-vertical-line-characters-2"></div> -->
93
- <!-- 16. Block Categories -->
94
- <div class="interface-button" id="interface-button-block-categories">
95
- <div class="interface-button-text">16</div>
96
- </div>
97
- <div class="interface-vertical-line" id="interface-vertical-line-block-categories-1"></div>
98
- <div class="interface-horizontal-line" id="interface-horizontal-line-block-categories"></div>
99
- <div class="interface-vertical-line" id="interface-vertical-line-block-categories-2"></div>
100
- <div class="interface-vertical-line" id="interface-vertical-line-block-categories-3"></div>
101
- <!-- 15. Blocks Palette -->
102
- <div class="interface-button" id="interface-button-block-palette">
103
- <div class="interface-button-text">15</div>
104
- </div>
105
- <div class="interface-horizontal-line" id="interface-horizontal-line-blocks-palette"></div>
106
- <div class="interface-vertical-line" id="interface-vertical-line-blocks-palette-1"></div>
107
- <div class="interface-vertical-line" id="interface-vertical-line-blocks-palette-2"></div>
108
- <div class="interface-vertical-line" id="interface-vertical-line-blocks-palette-3"></div>
109
- <!-- 14. Programming Area -->
110
- <div class="interface-button" id="interface-button-programming-area">
111
- <div class="interface-button-text">14</div>
112
- </div>
113
- <div class="interface-vertical-line" id="interface-vertical-line-programming-area"></div>
114
- <div class="interface-dot" id="interface-dot-programming-area"></div>
115
- <!-- 13. Programming Script -->
116
- <div class="interface-button" id="interface-button-programming-script">
117
- <div class="interface-button-text">13</div>
118
- </div>
119
- <div class="interface-vertical-line" id="interface-vertical-line-programming-script-1"></div>
120
- <div class="interface-horizontal-line" id="interface-horizontal-line-programming-script"></div>
121
- <div class="interface-vertical-line" id="interface-vertical-line-programming-script-2"></div>
122
- <div class="interface-vertical-line" id="interface-vertical-line-programming-script-3"></div>
123
- <!-- 12. Undo Redo -->
124
- <div class="interface-button" id="interface-button-undo-redo">
125
- <div class="interface-button-text">12</div>
126
- </div>
127
- <div class="interface-vertical-line" id="interface-vertical-line-undo-redo-1"></div>
128
- <div class="interface-horizontal-line" id="interface-horizontal-line-undo-redo"></div>
129
- <div class="interface-vertical-line" id="interface-vertical-line-undo-redo-2"></div>
130
- <div class="interface-vertical-line" id="interface-vertical-line-undo-redo-3"></div>
131
- <img class="ipad-project-view" src="images/interface_Marty.png" />
132
- <div id="right-column">
133
- <div id="interface-key">
134
- <div id="interface-key-header">
135
- </div>
136
- <div id="interface-key-description">
137
- </div>
3
+ <head>
4
+ <meta charset="utf-8" />
5
+ <script>
6
+ let currentContent = "Lobby"; // Lobby or Editor
7
+ window.scratchJrPage = "inappInterfaceGuide";
8
+ function changeCurrentContent() {
9
+ if (currentContent === "Lobby") {
10
+ currentContent = "Editor";
11
+ document.getElementById("lobby-content").style.display =
12
+ "none";
13
+ document.getElementById("editor-content").style.display =
14
+ "block";
15
+ } else {
16
+ currentContent = "Lobby";
17
+ document.getElementById("lobby-content").style.display =
18
+ "block";
19
+ document.getElementById("editor-content").style.display =
20
+ "none";
21
+ }
22
+ document.getElementById("interface-title").innerHTML =
23
+ currentContent;
24
+ }
25
+ </script>
26
+ <script type="text/javascript" src="../app.bundle.js"></script>
27
+ </head>
28
+ <body>
29
+ <div id="content">
30
+ <div id="content-buffer">
31
+ <div id="interface-title-container">
32
+ <div
33
+ id="interface-title-left-arrow"
34
+ onclick="changeCurrentContent()"
35
+ >
36
+ &#8592;
37
+ </div>
38
+ <h1 id="interface-title">Lobby</h1>
39
+ <div
40
+ id="interface-title-right-arrow"
41
+ onclick="changeCurrentContent()"
42
+ >
43
+ &#8594;
44
+ </div>
45
+ </div>
138
46
  </div>
139
- <div id="video-wrapper">
47
+ <div id="ipad-project-view-wrapper">
48
+ <div
49
+ class="learn-tab learn-tab-selected learn-interface"
50
+ id="lobby-content"
51
+ >
52
+ <!-- 1. New project -->
53
+ <div
54
+ class="interface-button interface-button-selected"
55
+ id="interface-button-lobby-new-project"
56
+ >
57
+ <div class="interface-button-text">1</div>
58
+ </div>
59
+ <div
60
+ class="interface-vertical-line"
61
+ id="interface-vertical-line-lobby-new-project"
62
+ ></div>
63
+ <div
64
+ class="interface-dot"
65
+ id="interface-dot-lobby-new-project"
66
+ ></div>
67
+ <!-- 2. Saved project -->
68
+ <div
69
+ class="interface-button"
70
+ id="interface-button-lobby-saved-project"
71
+ >
72
+ <div class="interface-button-text">2</div>
73
+ </div>
74
+ <div
75
+ class="interface-vertical-line"
76
+ id="interface-vertical-line-lobby-saved-project"
77
+ ></div>
78
+ <div
79
+ class="interface-dot"
80
+ id="interface-dot-lobby-saved-project"
81
+ ></div>
82
+ <!-- 3. Settings -->
83
+ <div
84
+ class="interface-button"
85
+ id="interface-button-lobby-settings"
86
+ >
87
+ <div class="interface-button-text">3</div>
88
+ </div>
89
+ <div
90
+ class="interface-vertical-line"
91
+ id="interface-vertical-line-lobby-settings"
92
+ ></div>
93
+ <div
94
+ class="interface-dot"
95
+ id="interface-dot-lobby-settings"
96
+ ></div>
97
+ <!-- 4. User guides -->
98
+ <div
99
+ class="interface-button"
100
+ id="interface-button-lobby-user-guides"
101
+ >
102
+ <div class="interface-button-text">4</div>
103
+ </div>
104
+ <div
105
+ class="interface-vertical-line"
106
+ id="interface-vertical-line-lobby-user-guides"
107
+ ></div>
108
+ <div
109
+ class="interface-dot"
110
+ id="interface-dot-lobby-user-guides"
111
+ ></div>
112
+ <img
113
+ class="ipad-project-view"
114
+ src="images/lobby_interface.png"
115
+ />
116
+ </div>
117
+ <div
118
+ class="learn-tab learn-tab-selected learn-interface"
119
+ id="editor-content"
120
+ style="display: none"
121
+ >
122
+ <!-- 5. Save -->
123
+ <div
124
+ class="interface-button interface-button-selected"
125
+ id="interface-button-save"
126
+ >
127
+ <div class="interface-button-text">5</div>
128
+ </div>
129
+ <div
130
+ class="interface-vertical-line"
131
+ id="interface-vertical-line-save"
132
+ ></div>
133
+ <div class="interface-dot" id="interface-dot-save"></div>
134
+ <!-- 6. Marty Connect -->
135
+ <div
136
+ class="interface-button"
137
+ id="interface-button-marty-connect"
138
+ >
139
+ <div class="interface-button-text">6</div>
140
+ </div>
141
+ <div
142
+ class="interface-vertical-line"
143
+ id="interface-vertical-line-marty-connect"
144
+ ></div>
145
+ <div
146
+ class="interface-dot"
147
+ id="interface-dot-marty-connect"
148
+ ></div>
149
+ <!-- 7. Stage -->
150
+ <div class="interface-button" id="interface-button-stage">
151
+ <div class="interface-button-text">7</div>
152
+ </div>
153
+ <div
154
+ class="interface-vertical-line"
155
+ id="interface-vertical-line-stage-1"
156
+ ></div>
157
+ <div
158
+ class="interface-horizontal-line"
159
+ id="interface-horizontal-line-stage-1"
160
+ ></div>
161
+ <div
162
+ class="interface-vertical-line"
163
+ id="interface-vertical-line-stage-2"
164
+ ></div>
165
+ <div
166
+ class="interface-horizontal-line"
167
+ id="interface-horizontal-line-stage-2"
168
+ ></div>
169
+ <div
170
+ class="interface-horizontal-line"
171
+ id="interface-horizontal-line-stage-3"
172
+ ></div>
173
+ <!-- 8. Presentation Mode -->
174
+ <div
175
+ class="interface-button"
176
+ id="interface-button-presentation-mode"
177
+ >
178
+ <div class="interface-button-text">8</div>
179
+ </div>
180
+ <div
181
+ class="interface-vertical-line"
182
+ id="interface-vertical-line-presentation-mode"
183
+ ></div>
184
+ <div
185
+ class="interface-dot"
186
+ id="interface-dot-presentation-mode"
187
+ ></div>
188
+ <!-- 9. Grid -->
189
+ <div class="interface-button" id="interface-button-grid">
190
+ <div class="interface-button-text">9</div>
191
+ </div>
192
+ <div
193
+ class="interface-vertical-line"
194
+ id="interface-vertical-line-grid"
195
+ ></div>
196
+ <div class="interface-dot" id="interface-dot-grid"></div>
197
+ <!-- 10. Change Background -->
198
+ <div
199
+ class="interface-button"
200
+ id="interface-button-change-background"
201
+ >
202
+ <div class="interface-button-text">11</div>
203
+ </div>
204
+ <div
205
+ class="interface-vertical-line"
206
+ id="interface-vertical-line-change-background"
207
+ ></div>
208
+ <div
209
+ class="interface-dot"
210
+ id="interface-dot-change-background"
211
+ ></div>
212
+ <!-- 11. Add Text -->
213
+ <div
214
+ class="interface-button"
215
+ id="interface-button-add-text"
216
+ >
217
+ <div class="interface-button-text">10</div>
218
+ </div>
219
+ <div
220
+ class="interface-vertical-line"
221
+ id="interface-vertical-line-add-text"
222
+ ></div>
223
+ <div
224
+ class="interface-dot"
225
+ id="interface-dot-add-text"
226
+ ></div>
227
+ <!-- 12. Reset Characters -->
228
+ <div
229
+ class="interface-button"
230
+ id="interface-button-reset-characters"
231
+ >
232
+ <div class="interface-button-text">12</div>
233
+ </div>
234
+ <div
235
+ class="interface-vertical-line"
236
+ id="interface-vertical-line-reset-characters"
237
+ ></div>
238
+ <div
239
+ class="interface-dot"
240
+ id="interface-dot-reset-characters"
241
+ ></div>
242
+ <!-- 13. Green Flag -->
243
+ <div
244
+ class="interface-button"
245
+ id="interface-button-green-flag"
246
+ >
247
+ <div class="interface-button-text">13</div>
248
+ </div>
249
+ <div
250
+ class="interface-vertical-line"
251
+ id="interface-vertical-line-green-flag"
252
+ ></div>
253
+ <div
254
+ class="interface-dot"
255
+ id="interface-dot-green-flag"
256
+ ></div>
257
+ <!-- 14. Pages -->
258
+ <div class="interface-button" id="interface-button-pages">
259
+ <div class="interface-button-text">14</div>
260
+ </div>
261
+ <div
262
+ class="interface-vertical-line"
263
+ id="interface-vertical-line-pages"
264
+ ></div>
265
+ <div class="interface-dot" id="interface-dot-pages"></div>
266
+ <!-- 15. Project Information -->
267
+ <div
268
+ class="interface-button"
269
+ id="interface-button-project-information"
270
+ >
271
+ <div class="interface-button-text">15</div>
272
+ </div>
273
+ <div
274
+ class="interface-vertical-line"
275
+ id="interface-vertical-line-project-information"
276
+ ></div>
277
+ <div
278
+ class="interface-dot"
279
+ id="interface-dot-project-information"
280
+ ></div>
281
+ <!-- 16. Characters -->
282
+ <!-- 20. Block Categories -->
283
+ <div
284
+ class="interface-button"
285
+ id="interface-button-block-categories"
286
+ >
287
+ <div class="interface-button-text">20</div>
288
+ </div>
289
+ <div
290
+ class="interface-vertical-line"
291
+ id="interface-vertical-line-block-categories-1"
292
+ ></div>
293
+ <div
294
+ class="interface-horizontal-line"
295
+ id="interface-horizontal-line-block-categories"
296
+ ></div>
297
+ <div
298
+ class="interface-vertical-line"
299
+ id="interface-vertical-line-block-categories-2"
300
+ ></div>
301
+ <div
302
+ class="interface-vertical-line"
303
+ id="interface-vertical-line-block-categories-3"
304
+ ></div>
305
+ <!-- 19. Blocks Palette -->
306
+ <div
307
+ class="interface-button"
308
+ id="interface-button-block-palette"
309
+ >
310
+ <div class="interface-button-text">19</div>
311
+ </div>
312
+ <div
313
+ class="interface-horizontal-line"
314
+ id="interface-horizontal-line-blocks-palette"
315
+ ></div>
316
+ <div
317
+ class="interface-vertical-line"
318
+ id="interface-vertical-line-blocks-palette-1"
319
+ ></div>
320
+ <div
321
+ class="interface-vertical-line"
322
+ id="interface-vertical-line-blocks-palette-2"
323
+ ></div>
324
+ <div
325
+ class="interface-vertical-line"
326
+ id="interface-vertical-line-blocks-palette-3"
327
+ ></div>
328
+ <!-- 18. Programming Area -->
329
+ <div
330
+ class="interface-button"
331
+ id="interface-button-programming-area"
332
+ >
333
+ <div class="interface-button-text">18</div>
334
+ </div>
335
+ <div
336
+ class="interface-vertical-line"
337
+ id="interface-vertical-line-programming-area"
338
+ ></div>
339
+ <div
340
+ class="interface-dot"
341
+ id="interface-dot-programming-area"
342
+ ></div>
343
+ <!-- 17. Programming Script -->
344
+ <div
345
+ class="interface-button"
346
+ id="interface-button-programming-script"
347
+ >
348
+ <div class="interface-button-text">17</div>
349
+ </div>
350
+ <div
351
+ class="interface-vertical-line"
352
+ id="interface-vertical-line-programming-script-1"
353
+ ></div>
354
+ <div
355
+ class="interface-horizontal-line"
356
+ id="interface-horizontal-line-programming-script"
357
+ ></div>
358
+ <div
359
+ class="interface-vertical-line"
360
+ id="interface-vertical-line-programming-script-2"
361
+ ></div>
362
+ <div
363
+ class="interface-vertical-line"
364
+ id="interface-vertical-line-programming-script-3"
365
+ ></div>
366
+ <!-- 16. Undo Redo -->
367
+ <div
368
+ class="interface-button"
369
+ id="interface-button-undo-redo"
370
+ >
371
+ <div class="interface-button-text">16</div>
372
+ </div>
373
+ <div
374
+ class="interface-vertical-line"
375
+ id="interface-vertical-line-undo-redo-1"
376
+ ></div>
377
+ <div
378
+ class="interface-horizontal-line"
379
+ id="interface-horizontal-line-undo-redo"
380
+ ></div>
381
+ <div
382
+ class="interface-vertical-line"
383
+ id="interface-vertical-line-undo-redo-2"
384
+ ></div>
385
+ <div
386
+ class="interface-vertical-line"
387
+ id="interface-vertical-line-undo-redo-3"
388
+ ></div>
389
+ <img
390
+ class="ipad-project-view"
391
+ src="images/interface_Marty.png"
392
+ />
393
+ </div>
394
+ </div>
395
+ <div id="right-column">
396
+ <div id="interface-key">
397
+ <div id="interface-key-header"></div>
398
+ <div id="interface-key-description"></div>
399
+ </div>
400
+ <div id="video-wrapper"></div>
140
401
  </div>
141
- </div>
142
402
  </div>
143
- </div>
144
- </div>
145
- </body>
403
+ </body>
146
404
  </html>