-
Notifications
You must be signed in to change notification settings - Fork 3
/
index.html
740 lines (713 loc) · 47.8 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
<!DOCTYPE html>
<html lang="en">
<head>
<title>A long time ago 👽 in a galaxy far, far away...</title>
<!--
_________ __ __ ____ __.
/ _____/ ____ _____/ |__/ |_ | |/ _|___________ __ __ ______ ____
\_____ \_/ ___\/ _ \ __\ __\ | < \_ __ \__ \ | | \/ ___// __ \
/ \ \__( <_> ) | | | | | \ | | \// __ \| | /\___ \\ ___/
/_______ /\___ >____/|__| |__| |____|__ \|__| (____ /____//____ >\___ >
\/ \/ \/ \/ \/ \/
www.TheScottKrause.com
-->
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=2, minimum-scale=1, width=device-width, height=device-height"/>
<meta name="description" content="This is a coding exercise designed to demonstrate proficiency in the Vue.js SPA reactive framework (and D3.js). The technologies include advanced CSS, semantic markup, browser native APIs, accessible content, async REST API, and an overall mastery of browser capabilities.">
<link rel="stylesheet" type="text/css" href="./content/css/vue_voyagers.css"/>
<meta property="og:title" content="Scott C. Krause Front-end Engineer | Product Designer | Interactive Storyteller | Node.js TypeScript WASM React Vue.js Golang">
<meta property="og:site_name" content="Scott C. Krause TypeScript | Vue.js WASM">
<meta property="og:url" content="http://thescottkrause.com/">
<meta property="og:description" content="I craft high-fidelity prototypes and then build responsive, accessible, and aesthetically delightful interfaces. I produce and advocate for optimized, asynchronous, reactive, functional, testable, and future-proof TypeScript, JavaScript and Go.">
<meta property="og:type" content="website">
<meta property="og:image" content="http://thescottkrause.com/ux/typescript/engineer/wasm/javascript_typescript_developer.jpg">
<style type="text/css">
.l-snackbar .snackbar__cont{border-radius:4px;background:linear-gradient(45deg,#763f44 0%,#733d41 100%);box-shadow:inset #665f50 0 0 6px 2px;border:solid 1px #d3cdb4;left:38%;min-width:188px;padding:0;position:fixed;transition:bottom .6s ease-in-out;user-select:none;z-index:6408}.l-snackbar .snackbar__cont--hide{bottom:-112px;transition:bottom .6s ease-in-out}.l-snackbar .snackbar__cont--show{bottom:4px;transition:bottom .6s ease-in-out}.l-snackbar .snackbar__progbar{background-color:#edba08;height:2px;padding:0;margin:0;position:relative;top:2px}.l-snackbar .snackbar__cont--hide .snackbar__progbar{width:0%;transition:all .1s ease-in-out}.l-snackbar .snackbar__cont--show .snackbar__progbar{width:101%;transition:all 6s ease-in-out}.l-snackbar .snackbar__msg{color:#fff;font-family:sans-serif;font-size:16px;margin:20px;text-align:center;white-space:nowrap}
.l-reveal .reveal__box
{position: absolute;z-index: 1005;top: 0;right: 0;left: 0;
display: block!important;width: 100%;margin: 0 auto;padding: 8px;border: solid 1px #666;border-radius: 6px;background-color: #fff;box-shadow: 0 0 10px rgba(0,0,0,.4);
}.l-reveal .reveal__scrim
{position: fixed;z-index: 8;top: 0;right: 0;bottom: 0;left: 0;display: block!important;min-height: 100%;cursor: pointer;
background: linear-gradient(rgba(228,198,126,.32),rgba(188,130,19,.68));background-position: 50% 0;background-size: cover;
}.l-reveal .reveal-modal{display: none;}
.l-reveal .small{width: 40%;}.l-reveal .medium{width: 60%;}.l-reveal .large{width: 76%;}
.l-reveal .resp_x, .resp_x:hover
{font-family: monospace;font-size: 28px;font-weight: 800;
position: absolute;top: 2px;right: 10px;cursor: pointer;color: #444!important;}
.l-reveal .resp_x:hover{color: #444!important;}
.l-reveal .eml-msg__x{position: absolute;top: -42px;right: -18px;}
@media only screen and (max-width:48em){
.l-reveal .small{width: 85%;}.l-reveal .medium{width: 85%;}.l-reveal .large{width: 85%;}
}
</style>
</head>
<body>
<header class="viv-cont">
<section class="alpha-grd"></section>
</header>
<main id="js-main" role="main">
<section>
<article>
<header><h2>Voyagers</h2>
<div>
<select class="select-css" v-on:change="VoySelect()" v-model="VoySelectValue"
:class="{ 'h-ds__none': ( RESTCount != 4 ) }">
<option value="Add">Add Voyager</option>
<option v-for="(oPerson, index) in aPeople" :value="index"> {{ oPerson.name + " (" + oPerson.rank + ")" }} </option>
</select>
</div>
</header>
<aside class="h-tx__ctr"><div>Name</div><div>Planet</div><div>Species</div><div>Gender</div><div>Rank</div><div>Actions</div></aside>
<div class="voy--cont">
<section class="voy--grd" role="row"
v-for="(oPerson, index) in aPeopleSel">
<div> {{ oPerson.name }} </div>
<div> {{ oPerson.homeworld }} </div>
<div> {{ oPerson.species }} </div>
<div> {{ oPerson.gender }} </div>
<div> {{ oPerson.rank }} </div>
<div class="voy--actions">
<a v-on:click.prevent="VoyInfo( oPerson )">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm1-8h-2V7h2v2z"/></svg>
</a>
<a v-on:click.prevent="VoyRemove( oPerson, index )">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v10zM18 4h-2.5l-.71-.71c-.18-.18-.44-.29-.7-.29H9.91c-.26 0-.52.11-.7.29L8.5 4H6c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1z"/></svg>
</a>
</div>
</section>
</div>
<div class="visual__data--species">
</div>
</article>
</section>
<section>
<article>
<header><h2>Crew Ships</h2>
<a class="js-truth-bang truth-bang cptn-intract__vect">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 612 612"><path d="M45.786 171.764h42.865a8.994 8.994 0 0 0 0-17.988H61.465a287.68 287.68 0 0 1 11.308-16.797h140.894a8.994 8.994 0 0 0 0-17.988H68.236a8.994 8.994 0 0 0-7.195 3.598c-8.578 11.441-16.363 23.504-23.138 35.856a8.997 8.997 0 0 0 .144 8.907 8.996 8.996 0 0 0 7.739 4.412zM17.557 244.009h129.962a8.994 8.994 0 0 0 0-17.988H29.25a278.7 278.7 0 0 1 5.426-16.797h53.977a8.994 8.994 0 0 0 0-17.988H28.422a8.994 8.994 0 0 0-8.396 5.77 293.742 293.742 0 0 0-11.207 35.885 8.986 8.986 0 0 0 1.668 7.681 8.988 8.988 0 0 0 7.07 3.437zM170.935 411.612a8.994 8.994 0 0 0-8.994-8.994H34.606a277.724 277.724 0 0 1-5.392-16.797h245.107a8.994 8.994 0 0 0 0-17.988H17.53a8.992 8.992 0 0 0-8.74 11.115 296.258 296.258 0 0 0 11.148 35.876 8.994 8.994 0 0 0 8.401 5.781h133.6a8.993 8.993 0 0 0 8.996-8.993zM277.961 483.857a8.994 8.994 0 0 0-8.994-8.994H72.652a289.298 289.298 0 0 1-11.29-16.797h27.293a8.994 8.994 0 0 0 0-17.988H45.678a8.992 8.992 0 0 0-7.884 13.319c6.746 12.302 14.519 24.361 23.102 35.845a8.997 8.997 0 0 0 7.204 3.609h200.866a8.995 8.995 0 0 0 8.995-8.994z"/><path d="M306.001.001c-78.707 0-153.495 29.832-210.589 83.998a8.996 8.996 0 0 0 6.191 15.52h80.702a8.994 8.994 0 0 0 0-17.988h-56.772c51.05-41.129 114.289-63.541 180.469-63.541 155.8 0 283.088 124.356 287.855 279.02H18.146a287.53 287.53 0 0 1 .888-15.542h262.421a8.994 8.994 0 0 0 0-17.988H10.894a9 9 0 0 0-8.938 7.973A306.075 306.075 0 0 0 0 306c0 11.414.65 22.976 1.929 34.372a8.993 8.993 0 0 0 8.938 7.989h195.515a8.994 8.994 0 0 0 0-17.988H19.021a292.963 292.963 0 0 1-.875-15.374h575.71c-.16 5.16-.459 10.285-.888 15.374H482.133a8.994 8.994 0 0 0 0 17.988h108.753a284.79 284.79 0 0 1-3.582 19.471h-50.321a8.994 8.994 0 0 0 0 17.988h45.763a286.206 286.206 0 0 1-21.917 54.256H416.575a8.994 8.994 0 0 0 0 17.988h133.906c-50.912 81.56-141.459 135.946-244.484 135.946-66.3 0-129.609-22.463-180.669-63.702h49.163a8.994 8.994 0 0 0 0-17.988h-73.05a8.995 8.995 0 0 0-6.198 15.513C152.33 582.109 227.177 612 306.001 612 474.728 611.999 612 474.727 612 306S474.728.001 306.001.001z"/><path d="M473.948 280.009a57.93 57.93 0 0 0 18.881-3.139c37.252-12.808 54.36-61.622 38.134-108.816-13.258-38.561-45.379-65.495-78.107-65.495a57.93 57.93 0 0 0-18.879 3.137c-37.252 12.808-54.36 61.623-38.134 108.816 13.26 38.563 45.379 65.497 78.105 65.497zm-34.12-157.3a39.943 39.943 0 0 1 13.031-2.159c25.171 0 50.294 21.939 61.099 53.354 12.999 37.812.897 76.373-26.974 85.957a39.948 39.948 0 0 1-13.033 2.161c-25.168 0-50.292-21.942-61.096-53.357-13.002-37.814-.901-76.375 26.973-85.956zm38.294 63.515c3.653 10.625.014 21.507-8.127 24.306-8.141 2.799-17.702-3.546-21.354-14.171-3.653-10.625-.014-21.507 8.127-24.306 8.141-2.798 17.701 3.546 21.354 14.171z"/></svg>
</a>
<a href="https://github.com/neodigm/vue_voyagers" class="js-truth-bang truth-bang cptn-intract__vect">
<svg height="60px" version="1.1" viewBox="0 12 70 70" width="60px" xmlns="http://www.w3.org/2000/svg" xmlns:sketch="http://www.bohemiancoding.com/sketch/ns" xmlns:xlink="http://www.w3.org/1999/xlink"><title/><desc/><defs/><g fill="none" fill-rule="evenodd" id="black" stroke="none" stroke-width="1"><g id="slice" transform="translate(-900.000000, -500.000000)"/><g fill="#000000" id="github" transform="translate(11.000000, 11.000000)"><path d="M14.4252739,36.5168887 C14.4252739,36.0671729 14.4094072,34.8772272 14.4003405,33.2968305 C9.2651779,34.440294 8.18170506,30.7588994 8.18170506,30.7588994 C7.34190028,28.5719093 6.13149339,27.9897191 6.13149339,27.9897191 C4.45528384,26.8148801 6.25842744,26.8392833 6.25842744,26.8392833 C8.111438,26.9729198 9.08611021,28.7903759 9.08611021,28.7903759 C10.7328529,31.6827342 13.4064015,30.8483777 14.4592741,30.3638002 C14.6270084,29.1401549 15.1041445,28.3057984 15.6311475,27.8328415 C11.5318575,27.3552363 7.22176626,25.7306815 7.22176626,18.4771257 C7.22176626,16.4109894 7.94143703,14.7213595 9.12237709,13.3977773 C8.93310934,12.9190101 8.29843906,10.9946447 9.30371145,8.38815229 C9.30371145,8.38815229 10.8541203,7.8791716 14.3799404,10.3287864 C15.8521487,9.90928408 17.4320244,9.69778982 19.0028333,9.69081748 C20.5702423,9.69778982 22.1489846,9.90928408 23.624593,10.3287864 C27.1481464,7.8791716 28.6962885,8.38815229 28.6962885,8.38815229 C29.7038276,10.9934827 29.0702907,12.917848 28.8798896,13.3977773 C30.0630963,14.7213595 30.7771004,16.4109894 30.7771004,18.4771257 C30.7771004,25.7492744 26.4602091,27.349426 22.3473191,27.8177347 C23.0114562,28.4022491 23.6007929,29.5573331 23.6007929,31.3236588 C23.6007929,33.8546176 23.5769927,35.8963506 23.5769927,36.5168887 C23.5769927,37.0235453 23.9101946,37.6115458 24.8474666,37.4267788 C32.176775,34.9190612 37.4615385,27.8281932 37.4615385,19.4683597 C37.4615385,9.01333862 29.1949581,0.538461538 18.9994333,0.538461538 C8.80504195,0.538461538 0.538461538,9.01333862 0.538461538,19.4683597 C0.539594878,27.8305174 5.82889166,34.9260335 13.1650001,37.4291029 C14.0875387,37.6022493 14.4252739,37.017735 14.4252739,36.5168887 Z"/></g></g></svg>
</a>
</header>
<form novalidate="novalidate" role="form">
<input maxlength="32" type="text" placeholder="* Ship Name"
v-model="Shp_name">
<select class="select-css" v-model="ShpSelectValue">
<option value="Add">Select Model</option>
<option v-for="(oStarship, index) in aStarships" :value="index"> {{ oStarship.model }} </option>
</select>
<a :class="{'cta_invalid' : ( !ShpMicrocopy[0] ) }"
v-on:click.prevent="ShpCTA()"> {{ ShpMicrocopy[1] }} </a>
</form>
<aside class="h-tx__ctr"><div>Ship Name</div><div>Crew Count</div><div>Model</div><div>Actions</div></aside>
<div class="shp--cont shp__cont--bg">
<section class="shp--grd" role="row"
v-for="(oShp, index) in aShps">
<div> {{ oShp.name }} </div>
<div> {{ oShp.voyagers.length }} </div>
<div> {{ oShp.model.name }} </div>
<div class="shp--actions">
<a v-on:click.prevent="ShpEdit( oShp, index )">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M3 17.46v3.04c0 .28.22.5.5.5h3.04c.13 0 .26-.05.35-.15L17.81 9.94l-3.75-3.75L3.15 17.1c-.1.1-.15.22-.15.36zM20.71 7.04a.996.996 0 0 0 0-1.41l-2.34-2.34a.996.996 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"/></svg>
</a>
<a v-on:click.prevent="ShpInfo( oShp )">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm1-8h-2V7h2v2z"/></svg>
</a>
<a v-on:click.prevent="ShpRemove( oShp, index )">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v10zM18 4h-2.5l-.71-.71c-.18-.18-.44-.29-.7-.29H9.91c-.26 0-.52.11-.7.29L8.5 4H6c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1z"/></svg>
</a>
</div>
</section>
</div>
</article>
<article>
<header><h2>Created Voyages</h2>
<a class="js-darth truth-bang cptn-intract__vect">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 213.652 213.652"><path d="M106.826 213.652c-.378 0-.757-.007-1.142-.021-3.864-.143-17.262-.781-27.405-3.01-12.45-2.736-19.411-4.522-25.294-7.268-4.635-2.164-6.084-5.398-6.531-7.397-4.644-1.036-19.254-4.993-30.908-15.75-4.998-4.614-7.912-9.053-9.585-12.889a2.444 2.444 0 0 1-.064-.148c-2.993-6.964-1.898-11.904-1.824-12.22.027-.113.064-.224.11-.332l35.816-82.71c-.314-3.679-1.308-24.146 12.828-44.862C66.125 7.557 89.653 5.387 96.792 5.189V2a2 2 0 0 1 2-2h16.067a2 2 0 0 1 2 2v3.189c7.138.197 30.666 2.366 43.967 21.856 14.135 20.715 13.141 41.183 12.827 44.862l35.815 82.71c.047.107.084.218.11.332.075.314 1.161 5.215-1.788 12.135-.039.12-.089.236-.15.347-1.681 3.81-4.587 8.207-9.535 12.774-11.654 10.757-26.264 14.714-30.907 15.75-.446 1.999-1.896 5.233-6.531 7.397-5.885 2.746-12.845 4.531-25.294 7.268-10.143 2.229-23.542 2.867-27.406 3.01-.384.016-.762.022-1.141.022zM50.24 194.007c.018.127.023.259.016.392-.001.098-.012 3.261 4.42 5.33 5.543 2.587 12.304 4.314 24.461 6.985 9.816 2.158 22.915 2.78 26.695 2.92.669.024 1.318.024 1.984 0 3.782-.14 16.88-.763 26.696-2.92 12.157-2.671 18.918-4.398 24.462-6.985 4.433-2.068 4.421-5.231 4.419-5.365a1.97 1.97 0 0 1 .021-.336c-.454-2.182-2.198-9.937-6.045-20.479-3.266-8.948-8.076-16.328-10.485-19.723a7.348 7.348 0 0 1-3.692 1.794c-1.223 1.865-7.064 10.257-16.845 16.189-10.561 6.406-18.49 9.04-18.896 9.173a1.99 1.99 0 0 1-1.256-.001c-.456-.149-8.367-2.788-18.893-9.172-9.779-5.932-15.622-14.324-16.843-16.189a7.358 7.358 0 0 1-3.694-1.794c-2.409 3.395-7.22 10.774-10.484 19.723-3.834 10.508-5.58 18.247-6.041 20.458zM9.938 166.435c1.518 3.197 4.072 6.91 8.321 10.832 10.307 9.514 23.415 13.414 28.348 14.611.533-2.374 1.599-6.693 3.415-12.385.368-1.261 2.38-8.93 2.373-25.768-.008-18.56-5.359-38.844-5.471-39.262l-.012-.048v-.003a1.994 1.994 0 0 1 .148-1.351l.001-.003a1.992 1.992 0 0 1 1.204-1.027l.004-.001.1-.028h.003c.044-.011.089-.021.133-.028l46.149-8.698a2 2 0 0 1 1.928 3.22l-25.235 31.343a1.999 1.999 0 0 1-1.489.745 2.014 2.014 0 0 1-1.537-.641L52.525 120.86c1.646 7.784 3.863 20.549 3.869 32.866.001 3.8-.096 7.148-.255 10.078 3.4-6.833 6.993-11.852 8.395-13.711a7.342 7.342 0 0 1-.208-1.74c0-4.066 3.308-7.375 7.375-7.375 2.079 0 3.959.864 5.301 2.252l22.623-39.486c1.646-2.872 4.243-4.519 7.128-4.519s5.482 1.647 7.128 4.519l2.974 5.19c.025.04.049.081.07.123l19.635 34.269a7.356 7.356 0 0 1 5.392-2.348c4.066 0 7.375 3.309 7.375 7.375 0 .6-.072 1.183-.208 1.741 1.476 1.957 5.374 7.408 8.921 14.787a182.015 182.015 0 0 1-.316-11.155c.005-12.667 2.35-25.808 4.007-33.518l-16.398 17.735a2.058 2.058 0 0 1-1.537.641 1.999 1.999 0 0 1-1.489-.745l-25.235-31.343a2 2 0 0 1 1.928-3.22l46.048 8.678a2 2 0 0 1 2.148 2.506c-.055.204-5.463 20.624-5.471 39.267-.009 18.439 2.406 25.883 2.43 25.956.155.463.131.943-.034 1.365 1.521 4.924 2.443 8.677 2.927 10.83 4.938-1.203 18.064-5.117 28.348-14.609 4.244-3.918 6.794-7.634 8.312-10.838L165.47 75.529c-1.017-1.435-10.149-13.701-26.165-15.303-15.357-1.536-20.057 6.244-20.705 7.487-.203 1.475-1.132 4.963-5.379 6.622-2.067.808-3.679.411-4.667-.063a6.067 6.067 0 0 1-1.716-1.25 6.07 6.07 0 0 1-1.732 1.267c-1.417.68-3.032.701-4.667.063-4.293-1.677-5.195-5.222-5.385-6.668-.643-1.231-5.345-9.008-20.699-7.474-16.013 1.598-25.144 13.854-26.168 15.3L9.938 166.435zm64.97-11.446c2.21 2.986 7.214 8.999 14.469 13.399 8.541 5.181 15.406 7.836 17.449 8.575 2.042-.738 8.907-3.394 17.448-8.575 7.255-4.4 12.259-10.413 14.47-13.399a7.395 7.395 0 0 1-4.128-5.869h-55.58a7.39 7.39 0 0 1-4.128 5.869zm-66.971 1.027c-.087.49-.306 2.139.112 4.594L44.58 73.768c.048-.114.107-.224.175-.327.413-.625 10.329-15.326 29.198-17.213 15.332-1.533 21.818 5.32 23.962 8.485 1.441-.316 3.605-.633 5.421-.244 1.465.314 2.642 1.062 3.499 1.799.855-.732 2.025-1.471 3.479-1.782 1.816-.39 3.979-.073 5.421.244 2.145-3.165 8.631-10.021 23.963-8.485 18.868 1.887 28.785 16.589 29.198 17.214.068.104.127.213.175.327l36.52 86.815c.421-2.462.205-4.113.123-4.585l-35.938-82.992a1.996 1.996 0 0 1-.151-1.029c.024-.211 2.294-21.592-12.104-42.693-12.053-17.664-34.092-19.844-40.684-20.094v44.714c4.577-3.25 13.323-8.306 23.086-7.922 13.947.542 25.446 11.496 25.93 11.962a2 2 0 0 1-2.777 2.879c-.107-.104-10.907-10.362-23.308-10.844-12.366-.46-23.479 9.415-23.591 9.514a2 2 0 1 1-3.34-1.485V7.183c0-.1.008-.198.021-.294V4h-12.067v2.885c.015.097.022.196.022.297v50.843a2.001 2.001 0 0 1-3.341 1.485c-.11-.1-11.216-9.992-23.59-9.514-12.401.481-23.201 10.74-23.309 10.844a2 2 0 0 1-2.777-2.879c.483-.466 11.982-11.42 25.93-11.962 9.75-.392 18.508 4.672 23.085 7.921V9.207c-6.59.249-28.63 2.429-40.684 20.094-14.394 21.101-12.125 42.482-12.101 42.696.041.349-.012.704-.151 1.026L7.937 156.016zm134.014-11.042c-1.861 0-3.375 1.514-3.375 3.375s1.514 3.375 3.375 3.375 3.375-1.514 3.375-3.375-1.514-3.375-3.375-3.375zm-70.25 0c-1.861 0-3.375 1.514-3.375 3.375s1.514 3.375 3.375 3.375 3.375-1.514 3.375-3.375-1.514-3.375-3.375-3.375zm53.78.147h7.498l-7.498-13.087v13.087zm-8.327 0h4.327v-20.036-.032l-4.327-7.553v27.621zm-8.328 0h4.328v-34.602l-2.744-4.79c-.442-.772-.983-1.384-1.584-1.811v41.203zm-8.328 0h4.328v-41.302c-.659.428-1.252 1.076-1.73 1.91l-2.614 4.562c.011.085.017.171.017.259v34.571zm-8.327 0h4.328v-27.877l-4.344 7.583c.011.085.017.171.017.259v20.035zm-11.644 0h7.644v-13.342l-7.644 13.342zm43.059-36.913l20.381 25.314 16.909-18.287-37.29-7.027zm-70.809 7.028l16.909 18.287 20.381-25.314-37.29 7.027zm46.638-46.742c.377.741 1.099 1.592 2.476 2.13.791.308 1.224.18 1.482.056.463-.222.844-.695 1.116-1.139-.466-.455-1.159-.984-1.99-1.162-.867-.185-2.062-.068-3.084.115zm9.761 1.052c.274.444.653.906 1.112 1.122.257.12.688.245 1.473-.061 1.355-.53 2.076-1.364 2.458-2.1-1.065-.188-2.243-.287-3.066-.112-.822.177-1.51.697-1.977 1.151zm29.182 31.666c-3.932 0-7.845-.355-11.275-1.309-6.486-1.802-10.436-6.403-11.421-13.306a15.475 15.475 0 0 1-.146-1.768c-.181-6.607 3.656-12.958 9.773-16.181 4.746-2.501 10.194-3.77 16.193-3.77 16.55 0 22.635 13.847 22.988 20.553.304 5.772-2.602 13.038-11.786 14.519-4.136.668-9.247 1.262-14.326 1.262zm3.124-32.333c-5.343 0-10.163 1.113-14.328 3.309-4.78 2.519-7.779 7.438-7.641 12.531.014.464.05.906.107 1.312v.001c.755 5.284 3.625 8.654 8.532 10.017 7.546 2.096 18.208.87 23.895-.047 8.256-1.331 8.538-8.266 8.429-10.359-.186-3.541-3.958-16.764-18.994-16.764zm-66.188 32.333c-5.08 0-10.189-.594-14.327-1.261-9.185-1.481-12.089-8.747-11.785-14.519.353-6.706 6.437-20.553 22.988-20.553 5.998 0 11.446 1.268 16.193 3.77 6.118 3.224 9.954 9.574 9.773 16.18a15.633 15.633 0 0 1-.145 1.769c-.986 6.904-4.936 11.505-11.422 13.307-3.43.951-7.344 1.307-11.275 1.307zM72.17 68.879c-15.037 0-18.807 13.223-18.994 16.763-.11 2.094.172 9.028 8.428 10.359 5.687.918 16.353 2.144 23.895.047 4.907-1.363 7.777-4.733 8.532-10.017.058-.408.094-.85.107-1.313.139-5.094-2.859-10.013-7.639-12.531-4.167-2.195-8.988-3.308-14.329-3.308zm39.754 26.426h-10.197a2 2 0 0 1 0-4h10.197a2 2 0 0 1 0 4zm-1.945-6.047h-6.306a2 2 0 0 1 0-4h6.306a2 2 0 0 1 0 4zm0-6.133h-6.306a2 2 0 0 1 0-4h6.306a2 2 0 0 1 0 4z"/></svg>
</a>
</header>
<form novalidate="novalidate" role="form">
<select class="select-css" v-model="ShpVoySelectShip"
v-on:change="saveShipVoyage()">
<option value="Add">Select Ship</option>
<option v-for="(oShp, index) in aShps" :value="index"> {{ oShp.name }} </option>
</select>
<select class="select-css" v-model="ShpVoySelectDepart"
v-on:change="saveShipVoyage()">
<option value="Add">Departure</option>
<option v-for="(oPlanet, index) in aPlanets" :value="index"> {{ oPlanet.name }} </option>
</select>
<select class="select-css" v-model="ShpVoySelectDest"
v-on:change="saveShipVoyage()">
<option value="Add">Destination</option>
<option v-for="(oPlanet, index) in aPlanets" :value="index"> {{ oPlanet.name }} </option>
</select>
</form>
<aside class="h-tx__ctr"><div>Ship</div><div>Departure</div><div>Destination</div><div>Actions</div></aside>
<div class="shp--cont shp__cont--scape">
<section class="shp--grd" role="row"
v-for="(oShpVoy, index) in aShpVoys">
<div> {{ oShpVoy.ship.name }} </div>
<div> {{ oShpVoy.depart.name }} </div>
<div> {{ oShpVoy.dest.name }} </div>
<div class="shp--actions">
<a v-on:click.prevent="ShpVoyInfo( oShpVoy )">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm0 15c-.55 0-1-.45-1-1v-4c0-.55.45-1 1-1s1 .45 1 1v4c0 .55-.45 1-1 1zm1-8h-2V7h2v2z"/></svg>
</a>
<a v-on:click.prevent="ShpVoyRemove( oShpVoy.ship.name )">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path fill="none" d="M0 0h24v24H0V0z"/><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2H8c-1.1 0-2 .9-2 2v10zM18 4h-2.5l-.71-.71c-.18-.18-.44-.29-.7-.29H9.91c-.26 0-.52.11-.7.29L8.5 4H6c-.55 0-1 .45-1 1s.45 1 1 1h12c.55 0 1-.45 1-1s-.45-1-1-1z"/></svg>
</a>
</div>
</section>
</div>
</article>
</section>
</main>
<a55-rv class="l-reveal"><!-- Component Begin -->
<aside id="id-reveal__scrim" class="close-reveal-modal"></aside>
</a55-rv><!-- Component End -->
<ltdc-snackbar class="l-snackbar" role="alert"><!-- Component Begin -->
<section id="js-snackbar__id" class="snackbar__cont snackbar__cont--hide" aria-live="polite" aria-atomic="true">
<div class="snackbar__progbar"></div>
<p class="snackbar__msg"></p>
</section>
</ltdc-snackbar><!-- Component End -->
<link href="https://fonts.googleapis.com/css?family=Roboto+Condensed:300,400|Roboto+Slab:300,400" rel="stylesheet" type="text/css">
<script src="js/vue.min.js"></script>
<script src="https://platform.twitter.com/widgets.js"></script>
<script defer src="js/snackbar/snackbar.js"></script>
<script defer src="js/reveal/reveal.js"></script>
<script src="js/d3.min.js"></script>
<script>
'use strict';
Vue.config.devtools = true
let oD = document;
var vVoyage = new Vue( {
el: "#js-main",
data: {
aStarships: [],
aPeople: [],
aPeopleSel: [],
aPlanets: [],
aSpecies: [],
aShps: [],
aShpVoys: [],
RESTCount: 0,
VoySelectValue: "Add",
ShpSelectValue: "Add",
Shp_name: "",
Shp_Editing: -1,
ShpVoySelectShip: "Add",
ShpVoySelectDepart: "Add",
ShpVoySelectDest: "Add"
},
computed: {
ShpMicrocopy: function(){ // Passive Validation
let aRet = [true, "Create Ship",""]; // Dyn Button Wording (aka Microcopy)
if( this.Shp_Editing !== -1 ) aRet = [true, "Save Ship",""];
if( this.ShpSelectValue === "Add" )
aRet = [false, "Select Model","Assign a model / class|to the ship."];
if( !this.Shp_name )
aRet = [false, "Name Ship","Assign a unique name|to the new ship."];
if( !this.isShpNameUnique() )
aRet = [false, "Ship Already Exists","That Ship name|already exists."];
if( !this.hasShpCaptain() )
aRet = [false, "Assign Captain","A voyager of the rank captain must|be on the ship's manifest."];
if( this.aPeopleSel.length === 0 )
aRet = [false, "Add Voyagers","Add one or more Voyagers with|at least one being a captain."];
return aRet;
},
aPeopleSel_species: function(){ // Rollup Chart Data
const PROPERTY_CNT = "species";
let oCounter = {}, aCounter = [];
this.aPeopleSel.forEach( function( _e ){
if( !oCounter[ _e[ PROPERTY_CNT ] ] ) oCounter[ _e[ PROPERTY_CNT ] ] = 0;
oCounter[ _e[ PROPERTY_CNT ] ]++;
} );
Object.keys( oCounter ).forEach( function( _k ){
aCounter.push( { "label": _k, "value": oCounter[ _k ] } );
} );
return aCounter;
}
},
watch: {
RESTCount : function(){ // All JSON have been received
const NUM_COMPLETE = 4, NUM_NOT_COMPLETE_ONE = 1, NUM_NOT_COMPLETE_TWO = 2;
if( this.RESTCount === NUM_NOT_COMPLETE_ONE ) snck.q("Loading ...");
if( this.RESTCount === NUM_NOT_COMPLETE_TWO ){
if( this.one2ten() >= 6 ) snck.q("Please Wait ...");
}
if( this.RESTCount === NUM_COMPLETE ) this.RESTPost(); // Init Sort and Gen Rank
},
aPeopleSel: function(){
var that = this;
d3.select(".visual__data--species").selectAll("div").remove(); // Change color by value, rnd if 1
d3.select(".visual__data--species") // d3.js dynamic charting (d3js.org) (http://circos.ca/)
.selectAll("div")
.data( this.aPeopleSel_species )
.enter().append("div")
.style("width", function( d ) { return d.value * 28 + 84 + "px"; })
.attr("class", function(d) {
var colorClass = ( d.value == 1 ) ? that.one2ten() : d.value;
return "visual__data--bg" + colorClass; })
.text(function( d ) { return ( d.label + " | " + d.value ); });
},
aShps: function(){
if( this.aShps.length == 2 ){ a55Rev.autoOpen("js-rev__splash--id"); }
}
},
methods: {
saveShipVoyage: function(){
if( ( this.ShpVoySelectShip !== "Add" ) && ( this.ShpVoySelectDepart !== "Add" ) && ( this.ShpVoySelectDest !== "Add" ) ){
if( this.ShpVoySelectDepart == this.ShpVoySelectDest ){
snck.q("Departure and destination|cannot be the same.")
playAudioFile( 3 );
}else{
let oShpVoy = {
ship: this.aShps[ this.ShpVoySelectShip ],
depart: this.aPlanets[ this.ShpVoySelectDepart ],
dest: this.aPlanets[ this.ShpVoySelectDest ]
};
this.aShpVoys.push( oShpVoy );
this.ShpVoySelectShip = "Add"; // Reset UI
this.ShpVoySelectDepart = "Add";
this.ShpVoySelectDest = "Add";
snck.q( "The ship " + oShpVoy.ship.name + " will travel|from " + oShpVoy.depart.name + " to " + oShpVoy.dest.name + ".");
}
}
},
ShpVoyInfo: function( oShpVoy ){
playAudioFile( 2 );
snck.q( "Departure: " + oShpVoy.depart.name + "|Climate: " + oShpVoy.depart.climate + " Terrain: " + oShpVoy.depart.terrain );
snck.q( "Destination: " + oShpVoy.dest.name + "|Climate: " + oShpVoy.dest.climate + " Terrain: " + oShpVoy.dest.terrain );
},
ShpVoyRemove: function( oShpVoy, indx ){
playAudioFile( 1 );
snck.q( "The voyage to " + oShpVoy.dest.name + " has been|canceled." );
this.aShpVoys.splice( indx, 1 );
},
isShpNameUnique: function(){ // Is ship name unique
if( this.Shp_name === "" ) return true;
let aExists = this.aShps.filter( function( e, indx ){
if( vVoyage.Shp_Editing === indx ) return false;
if( e.name.toLowerCase() === vVoyage.Shp_name.toLowerCase() ) return true;
} );
return ( aExists.length === 0 );
},
ShpCTA: function(){ // CTA clicked / touched
const VAL_STATE = 0, VAL_MSG = 2;
if( this.ShpMicrocopy[ VAL_STATE ] ){ // Test valid state
let oShp = {
id: Date.now(),
name: this.Shp_name,
modelIndx: this.ShpSelectValue,
model: this.aStarships[ this.ShpSelectValue ],
voyagers: this.aPeopleSel
};
if( this.Shp_Editing === -1 ){ // CRED | Upsert
this.aShps.push( oShp );
}else{
this.aShps[ this.Shp_Editing ] = oShp;
}
snck.q( "The ship " + oShp.name + " has been|commissioned." );
playAudioFile( 5 );
this.ShpReset();
this.Shp_Editing = -1;
}else{
snck.q( this.ShpMicrocopy[ VAL_MSG ] );
playAudioFile( 3 );
}
},
ShpReset: function(){ // Reset UI and data
this.aPeopleSel = [];
this.Shp_name = "";
this.ShpSelectValue = "Add";
},
ShpEdit: function( oShp, indx ){
this.ShpReset();
this.aPeopleSel = oShp.voyagers;
this.Shp_name = oShp.name;
this.ShpSelectValue = oShp.modelIndx;
this.Shp_Editing = indx;
playAudioFile( 6 );
},
ShpInfo: function( oShp ){
playAudioFile( 2 );
snck.q( "Cost: " + oShp.model.cost_in_credits + "|Manufacturer: " + oShp.model.manufacturer );
},
ShpRemove: function( oShp, indx ){
playAudioFile( 1 );
snck.q( oShp.name + " has been|decommissioned." );
this.ShpVoyRemove( oShp.name );
this.aShps.splice( indx, 1 ); // TODO Cascade del voyages
},
ShpVoyRemove: function( sShipName ){
this.aShpVoys = this.aShpVoys.filter( function( e ){
return ( e.ship.name.toLowerCase() !== sShipName.toLowerCase() );
} );
},
VoySelect : function(){ // Drop-down Selected
if( this.VoySelectValue !== "Add" ){
if( this.nameExists( this.aPeople[ this.VoySelectValue ].name, this.aPeopleSel ) ){
playAudioFile( 3 );
snck.q( this.aPeople[ this.VoySelectValue ].name + " already exists on|the ship's manifest.");
}else{
this.aPeopleSel.push( this.aPeople[ this.VoySelectValue ] );
this.VoySelectValue = "Add";
playAudioFile( 4 );
}
}
},
VoyInfo : function( oPers ){
playAudioFile( 2 );
snck.q( "Name: " + oPers.name + " Height: " + oPers.height + "|Hair: " + oPers.hair_color + " Eyes: " + oPers.eye_color );
},
VoyRemove : function( oPers, indx ){
playAudioFile( 1 );
snck.q( oPers.name + " has been jettisoned from |the ship's manifest." );
this.aPeopleSel.splice( indx, 1 );
},
nameExists: function( name, arr ){
let bExists = false
arr.forEach( function( item ){
if( item.name === name ) bExists = true;
} );
return bExists;
},
getSpeciesName : function( SpeciesURL = "https://swapi.dev/api/species/4/" ){
let SpeciesName = this.aSpecies.filter( function( e ){
return ( SpeciesURL === e.url );
} )[0];
if( typeof SpeciesName != "undefined") {
SpeciesName = SpeciesName.name;
}else{
SpeciesName = "Human";
}
return SpeciesName;
},
getPlanetName : function( PlanetURL ){
let PlanetName = this.aPlanets.filter( function( e ){
return ( PlanetURL === e.url );
} )[0].name;
return PlanetName;
},
RESTPost : function(){ // Init Sort by Name
let _v = this;
this.aStarships = this.aStarships.sort( ( a, b ) => {
return ( a.model > b.model ) - ( a.model < b.model );
});
this.aPeople = this.aPeople.sort( ( a, b ) => {
return ( a.name > b.name ) - ( a.name < b.name );
});
this.aPlanets = this.aPlanets.sort( ( a, b ) => {
return ( a.name > b.name ) - ( a.name < b.name );
});
this.aPeople.map(function( p ){ // Gen Rank | Denormalize
const aRanks = ["Captain", "Crew","XO", "Space Cadet"];
p.rank = aRanks[ (Math.floor(Math.random() * (4) )) ];
p.homeworld = vVoyage.getPlanetName( p.homeworld );
p.species = vVoyage.getSpeciesName( p.species[0] );
});
// Init some random data
this.aPeople.filter( function( _o ){
if( _v.one2ten() >= 8 ) _v.aPeopleSel.push( _o );
} );
},
fRESTstarships : function( url = "https://swapi.dev/api/starships/" ){
let jResults=[];
fetch( url )
.then(( resp ) => resp.json())
.then(function( rest ) { // API Recursive Pagination
rest.results = JSON.parse( JSON.stringify( rest.results ).replace(/^http:\/\//i, 'https://') );
jResults = jResults.concat( Array.from( rest.results ) );
vVoyage.aStarships = vVoyage.aStarships.concat( jResults );
if( rest.next ){
rest.next = rest.next.replace("http:","https:");
vVoyage.fRESTstarships( rest.next, vVoyage.aStarships );
}else{ vVoyage.RESTCount++; }
});
},
fRESTpeople : function( url = "https://swapi.dev/api/people/" ){
let jResults=[];
fetch( url )
.then(( resp ) => resp.json())
.then(function( rest ) { // API Recursive Pagination
rest.results = JSON.parse( JSON.stringify( rest.results ).replace(/^http:\/\//i, 'https://') );
jResults = jResults.concat( Array.from( rest.results ) );
vVoyage.aPeople = vVoyage.aPeople.concat( jResults );
if( rest.next ){
rest.next = rest.next.replace("http:","https:");
vVoyage.fRESTpeople( rest.next, vVoyage.aPeople );
}else{ vVoyage.RESTCount++; }
});
},
fRESTplanets : function( url = "https://swapi.dev/api/planets/" ){
let jResults=[];
fetch( url )
.then(( resp ) => resp.json())
.then(function( rest ) { // API Recursive Pagination
rest.results = JSON.parse( JSON.stringify( rest.results ).replace(/^http:\/\//i, 'https://') );
jResults = jResults.concat( Array.from( rest.results ) );
vVoyage.aPlanets = vVoyage.aPlanets.concat( jResults );
if( rest.next ){
rest.next = rest.next.replace("http:","https:");
vVoyage.fRESTplanets( rest.next, vVoyage.aPlanets );
}else{ vVoyage.RESTCount++; }
});
},
fRESTSpecies : function( url = "https://swapi.dev/api/species/" ){
let jResults=[];
fetch( url )
.then(( resp ) => resp.json())
.then(function( rest ) { // API Recursive Pagination
rest.results = JSON.parse( JSON.stringify( rest.results ).replace(/^http:\/\//i, 'https://') );
jResults = jResults.concat( Array.from( rest.results ) );
vVoyage.aSpecies = vVoyage.aSpecies.concat( jResults );
if( rest.next ){
rest.next = rest.next.replace("http:","https:");
vVoyage.fRESTSpecies( rest.next, vVoyage.aSpecies );
}else{ vVoyage.RESTCount++; }
});
},
hasShpCaptain: function(){ // Has a Captain on current manifest
const aHasCpt = this.aPeopleSel.filter(function( e ){
if( e.rank === "Captain" ) return true;
});
return ( aHasCpt.length !== 0 );
},
one2ten : function(){ return (Math.floor(Math.random() * (10) + 1)); }
},
mounted: function( e ){
this.fRESTstarships(); // Fetch JSON
this.fRESTpeople();
this.fRESTplanets();
this.fRESTSpecies();
}
});
var CnfState = {"audio": false};
var AudioContext = window.AudioContext || false;
if (AudioContext) {
CnfState.audio = true; // Icanuse
var oAudContx = new AudioContext(); // HTML5 Audio
var oAJAXReq = new XMLHttpRequest(); // Get Sounds
var aAudioBuffer = new Array(18); // Store Sound files
var fetchSoundConfig = {sound_max: 18, sound_current: 1}; // Sound limits
setTimeout( function(){ fetchSound(); }, 4800);
}
function fetchSound() {
// AJAX a single sound binary
oAJAXReq.open("GET", "au/a" + fetchSoundConfig.sound_current + ".mp3", true);
oAJAXReq.responseType = "arraybuffer";
oAJAXReq.send();
oAJAXReq.onload = fetchSoundonload;
}
function fetchSoundonload() {
// The audio file has loaded via XHR
oAudContx.decodeAudioData(oAJAXReq.response, function (decAudBuf) {
aAudioBuffer[ fetchSoundConfig.sound_current ] = decAudBuf;
fetchSoundConfig.sound_current = fetchSoundConfig.sound_current + 1;
if(fetchSoundConfig.sound_current <= fetchSoundConfig.sound_max){
oAJAXReq = new XMLHttpRequest();
oAJAXReq.responseType = "arraybuffer";
fetchSound( fetchSoundConfig.sound_current );
}
});
};
function playAudioFile( nSound ) {
if( CnfState.audio === true ){ // Play MP3 if sound toggle is true
try{
nSound = nSound + 8;
var oSrc = oAudContx.createBufferSource();
var volume = oAudContx.createGain();
oSrc.buffer = aAudioBuffer[nSound];
oSrc.connect(volume);
volume.connect(oAudContx.destination);
oSrc.connect(oAudContx.destination);
oSrc.start(oAudContx.currentTime);
} catch( e ){}
}
};
function playAudioRand( aSound ){ // Either Or | array | max 2
playAudioFile( aSound[Math.random()+.5|0]);
}
oD.getElementsByClassName( "js-truth-bang" )[0].addEventListener("click" ,function(e){
doFullScreen.toggle();
}, true);
oD.getElementsByClassName( "js-darth" )[0].addEventListener("click" ,function(e){
playAudioFile( 8 );
snck.q("Darth Says|Turn on Web Notification!");
}, true);
let doFullScreen = (() =>{
let bFS = false;
return {
toggle : () => {
if( bFS ){
if (oD.exitFullscreen) oD.exitFullscreen();
playAudioFile( 2 );
}else{
var _dE = oD.documentElement;
if (_dE.requestFullscreen) _dE.requestFullscreen();
playAudioFile( 1 );
}
bFS = !bFS;
}
}
})();
let fViv = ( ( _d, _g, sQ ) => {
let eSect = _d.querySelector( sQ );
let aMsg = [], eImg = {}, bRun = true;
const BASE_URL = "https://neodigm.github.io/vivid_vector_alphabet/wasm/";
return {
init: ( sMsg ) => { // your
aMsg = Array.from( sMsg.toUpperCase() ); // telephone
for( let _i = 0; _i <= parseInt( aMsg.length / 2 ); _i++ ){ // been
eImg = _d.createElement( "img" ); // ringin
eImg.src = BASE_URL + "vvspace.svg"; // while you're
eSect.appendChild( eImg ); // dancin
} // in the
setInterval( fViv.tick, 200); // rain
},
tick: () =>{
if( bRun ){
[].slice.call( _d.querySelectorAll( sQ + " img" ) ).filter( ( _e, _i ) => {
let sC = aMsg[ _i ];
switch( sC ){
case " ":
sC = "space";
break;
case ".":
sC = "period";
break;
case ",":
sC = "comma";
break;
}
_e.src = BASE_URL + "vv" + sC.toLowerCase() + ".svg";
});
aMsg.push( aMsg.shift() );
}
},
stopVivid: () =>{
bRun = false;
},
startVivid: () =>{
bRun = true;
}
};
})( oD, window, ".alpha-grd");
oD.querySelector( ".alpha-grd" ).addEventListener("click", ( ev ) => {
fViv.stopVivid();
ev.currentTarget.classList.add("alpha-grd__hide");
playAudioFile( 5 )
//closeFS();
});
fViv.init("It is a dark time for the Rebellion. Although the Death Star has been destroyed, Imperial troops have driven the Rebel forces from their hidden base and pursued them across the galaxy. Evading the dreaded Imperial Starfleet, a group of freedom fighters led by Luke Skywalker has established a new secret base on the remote ice world of Hoth. The evil lord Darth Vader, obsessed with finding young Skywalker, has dispatched thousands of remote probes into the far reaches of space. There is unrest in the Galactic Senate. Several thousand solar systems have declared their intentions to leave the Republic. This separatist movement, under the leadership of the mysterious Count Dooku, has made it difficult for the limited number of Jedi Knights to maintain peace and order in the galaxy. Senator Amidala, the former Queen of Naboo, is returning to the Galactic Senate to vote on the critical issue of creating an ARMY OF THE REPUBLIC to assist the overwhelmed Jedi.");
setTimeout(function(){
fViv.stopVivid();
oD.querySelector( ".alpha-grd" ).classList.add("alpha-grd__hide");
}, 22000);
let rand_brand = "ltd";
function displayMsg( sMsg ){
// System Tray Notification
console.log( sMsg );
if (!("Notification" in window)) {
console.log('Notification API not supported.');
return;
} else if (Notification.permission === "granted") {
// If it's okay let's create a notification
var notification = new Notification( Nowish(), {icon: "https://lumiere-a.akamaihd.net/v1/images/r5-g9-main_bbba3627.jpeg?region=0%2C0%2C1280%2C720&width=768", body: sMsg} );
} else if (Notification.permission !== "denied") {
// Otherwise, we need to ask the user for permission
Notification.requestPermission(function (permission) {
// If the user accepts, let's create a notification
if (permission === "granted") {
var notification = new Notification( Nowish(), {icon: "https://lumiere-a.akamaihd.net/v1/images/resistance-db-major-vonregs-tie-interceptor-main-image_009a51b1.jpeg?region=0%2C0%2C1560%2C878&width=768", body: sMsg} );
}
});
}
}
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
(function(){
var aMessageLSC = ["Vue.js is the progressive framework.", "D3.js is for data driven documents.","It is my JavaScript you seek - Yoda","Luke, I am your father..","I find your lack of faith disturbing - Daddy Darth", "Your eyes can deceive you. Don’t trust them. - Obi-Wan Kenobi"];
var aMessageLTD = ["It's not my fault. – Han Solo.","Your focus determines your reality. - Qui-Gon Jinn","Do. Or do not. There is no try. – Yoda","In my experience there is no such thing as luck. – Obi-Wan Kenobi", "It's a trap! – Admiral Ackbar", "Never tell me the odds. – Han Solo"];
var iTime = 10000;
for (var i=1; i < 41; i++){
setTimeout(function(){
var sMessage = "";
if( getRandomInt( 0, 1 ) == 0 ){
rand_brand = "lsc";
sMessage = aMessageLSC[ getRandomInt( 0 , 5 ) ];
}else {
rand_brand = "ltd";
sMessage = aMessageLTD[ getRandomInt( 0 , 5 ) ];
}
displayMsg( sMessage );
}, ( 10000 * getRandomInt( 2 , 64 ) ));
}
}());
function Nowish(){
// A readable Client-side time/date stamp
var dNow = new Date();
return dNow.toString().substr(0, dNow.toString().length - 33);
}
oD.addEventListener( "contextmenu", function(e) { playAudioFile( 7 ); }); // On right-click
console.log("%c Scott C. Krause ⚡ Product Designer | Interactive Storyteller ", "background: #000; color: #f4dc5e; font-size: 28px");
console.log("%c 😎 Oscillation Overthruster 🪐 ", "background: #000; color: #f4dc5e; font-size: 14px");
</script>
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Person",
"address": {
"@type": "PostalAddress",
"addressLocality": "Lake County",
"addressRegion": "IL",
"postalCode": "60031"
},
"email": "[email protected]",
"image": "https://neodigm.github.io/brand_logo_graphic_design/fantastic/discerning/24.jpg",
"jobTitle": "Product UX Front-end Engineer ⚡ Poet",
"name": "Scott Krause",
"url": "https://www.theScottKrause.com",
"sameAs" : [ "https://github.com/neodigm",
"https://www.theScottKrause.com/",
"https://thescottkrause.com/Arcanus_Scott_C_Krause_2020.pdf",
"https://thescottkrause.com/tags/ux/",
"https://thescottkrause.com/tags/javascript/",
"https://thescottkrause.com/emerging_tech/ecommerce-accessibility-a11y/",
"https://thescottkrause.com/emerging_tech/gameification-threejs-webcrypto-accelerator-blender-gltf/",
"https://arcanus55.medium.com/offline-vs-cloud-password-managers-51b1fbebe301",
"https://arcanus55.medium.com/all-the-cool-cpas-encrypt-their-tax-files-e6172af2a46b",
"https://thescottkrause.com/d3_datavis_skills.html",
"https://gist.github.com/neodigm",
"https://www.npmjs.com/~neodigm",
"https://www.linkedin.com/in/neodigm55/",
"https://trailblazer.me/id/skrause",
"https://codepen.io/neodigm24",
"https://machvive.com/",
"https://www.arcanus55.com/",
"https://repl.it/@neodigm",
"https://twitter.com/neodigm24",
"https://hub.docker.com/u/neodigm",
"https://www.w3.org/users/123844"]
}
</script>
<a55-rv class="l-reveal reveal__init">
<div id="js-rev__splash--id" class="reveal-modal small" data-reveal aria-hidden="true"
style="border-radius: 44px;background-color: #777; text-align: center;border-radius: 48px 12px;">
<a class="close-reveal-modal resp_x eml-msg__x">
<svg fill="#FFF" height="48" viewBox="0 0 22 22" width="48" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M14.59 8L12 10.59 9.41 8 8 9.41 10.59 12 8 14.59 9.41 16 12 13.41 14.59 16 16 14.59 13.41 12 16 9.41 14.59 8zM12 2C6.47 2 2 6.47 2 12s4.47 10 10 10 10-4.47 10-10S17.53 2 12 2zm0 18c-4.41 0-8-3.59-8-8s3.59-8 8-8 8 3.59 8 8-3.59 8-8 8z"/></svg>
</a>
<section style="text-align: center!important;margin: 0 auto;width: 488px;">
<blockquote class="twitter-tweet" data-lang="en"><p lang="en" dir="ltr">
<a href="https://twitter.com/hashtag/StarWars?src=hash&ref_src=twsrc%5Etfw">#StarWars</a>
<a href="https://twitter.com/hashtag/UX?src=hash&ref_src=twsrc%5Etfw">#UX</a> coding challenge. Consume the Star Wars universe with
<a href="https://twitter.com/hashtag/VueJS?src=hash&ref_src=twsrc%5Etfw">#VueJS</a> .<br><br>A coding exercise designed to demonstrate proficiency in the Vue.js framework. The technologies include advanced CSS, semantic markup, browser native APIs, accessible content.<a href="https://t.co/qJbpxRVQge">https://t.co/qJbpxRVQge</a> <a href="https://t.co/Y3kPXlpnpZ">pic.twitter.com/Y3kPXlpnpZ</a></p>— neodigm24 (@neodigm24) <a href="https://twitter.com/neodigm24/status/1125809895872311301?ref_src=twsrc%5Etfw">May 7, 2019</a></blockquote>
</section>
</div>
</a55-rv>
</body>
</html>