@hkdigital/lib-core 0.4.98 → 0.5.1
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.
|
@@ -40,7 +40,6 @@
|
|
|
40
40
|
* marginTop?: number,
|
|
41
41
|
* marginBottom?: number,
|
|
42
42
|
* center?: boolean,
|
|
43
|
-
* preserveOnOrientationChange?: boolean,
|
|
44
43
|
* snippetLandscape?:GameBoxSnippet,
|
|
45
44
|
* snippetPortrait?: GameBoxSnippet,
|
|
46
45
|
* snippetRequireFullscreen?: GameBoxSnippet,
|
|
@@ -67,8 +66,6 @@
|
|
|
67
66
|
|
|
68
67
|
center,
|
|
69
68
|
|
|
70
|
-
preserveOnOrientationChange = true,
|
|
71
|
-
|
|
72
69
|
// > Snippets
|
|
73
70
|
snippetLandscape,
|
|
74
71
|
snippetPortrait,
|
|
@@ -82,16 +79,38 @@
|
|
|
82
79
|
|
|
83
80
|
let debouncedWindowWidth = $state();
|
|
84
81
|
let debouncedWindowHeight = $state();
|
|
82
|
+
|
|
85
83
|
let debounceTimer;
|
|
86
84
|
|
|
87
|
-
let
|
|
88
|
-
let
|
|
85
|
+
let gameWidthOnPortrait = $state();
|
|
86
|
+
let gameHeightOnPortrait = $state();
|
|
87
|
+
|
|
88
|
+
let gameWidthOnLandscape = $state();
|
|
89
|
+
let gameHeightOnLandscape = $state();
|
|
89
90
|
|
|
90
91
|
let iosWindowWidth = $state();
|
|
91
92
|
let iosWindowHeight = $state();
|
|
92
93
|
|
|
93
94
|
let isLandscape = $state();
|
|
94
95
|
|
|
96
|
+
let gameWidth = $derived.by( () => {
|
|
97
|
+
if( isLandscape ) {
|
|
98
|
+
return gameWidthOnLandscape;
|
|
99
|
+
}
|
|
100
|
+
else {
|
|
101
|
+
return gameWidthOnPortrait;
|
|
102
|
+
}
|
|
103
|
+
} );
|
|
104
|
+
|
|
105
|
+
let gameHeight = $derived.by( () => {
|
|
106
|
+
if( isLandscape ) {
|
|
107
|
+
return gameHeightOnLandscape;
|
|
108
|
+
}
|
|
109
|
+
else {
|
|
110
|
+
return gameHeightOnPortrait;
|
|
111
|
+
}
|
|
112
|
+
} );
|
|
113
|
+
|
|
95
114
|
const isAppleMobile = /iPhone|iPod/.test(navigator.userAgent);
|
|
96
115
|
|
|
97
116
|
// Debounce window dimensions on iOS to skip intermediate resize events
|
|
@@ -123,7 +142,12 @@
|
|
|
123
142
|
|
|
124
143
|
// Update iOS dimensions when debounced window size changes
|
|
125
144
|
$effect(() => {
|
|
126
|
-
if (
|
|
145
|
+
if (
|
|
146
|
+
isPwa &&
|
|
147
|
+
isAppleMobile &&
|
|
148
|
+
debouncedWindowWidth &&
|
|
149
|
+
debouncedWindowHeight
|
|
150
|
+
) {
|
|
127
151
|
updateIosWidthHeight();
|
|
128
152
|
}
|
|
129
153
|
});
|
|
@@ -173,28 +197,38 @@
|
|
|
173
197
|
// marginBottom
|
|
174
198
|
// });
|
|
175
199
|
|
|
176
|
-
let gameAspect;
|
|
177
|
-
|
|
178
200
|
if (availWidth > availHeight) {
|
|
179
|
-
|
|
201
|
+
gameWidthOnLandscape = getGameWidthOnLandscape({
|
|
180
202
|
windowWidth: availWidth,
|
|
181
203
|
windowHeight: availHeight,
|
|
182
204
|
aspectOnLandscape
|
|
183
205
|
});
|
|
184
|
-
|
|
206
|
+
|
|
207
|
+
if( aspectOnLandscape )
|
|
208
|
+
{
|
|
209
|
+
gameHeightOnLandscape = gameWidthOnLandscape / aspectOnLandscape;
|
|
210
|
+
}
|
|
211
|
+
else {
|
|
212
|
+
gameHeightOnLandscape = availHeight;
|
|
213
|
+
}
|
|
214
|
+
|
|
215
|
+
isLandscape = true;
|
|
185
216
|
} else {
|
|
186
|
-
|
|
217
|
+
gameWidthOnPortrait = getGameWidthOnPortrait({
|
|
187
218
|
windowWidth: availWidth,
|
|
188
219
|
windowHeight: availHeight,
|
|
189
220
|
aspectOnPortrait
|
|
190
221
|
});
|
|
191
|
-
gameAspect = aspectOnPortrait;
|
|
192
|
-
}
|
|
193
222
|
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
|
|
223
|
+
if( aspectOnPortrait )
|
|
224
|
+
{
|
|
225
|
+
gameHeightOnPortrait = gameWidthOnPortrait / aspectOnPortrait;
|
|
226
|
+
}
|
|
227
|
+
else {
|
|
228
|
+
gameHeightOnPortrait = availHeight;
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
isLandscape = false;
|
|
198
232
|
}
|
|
199
233
|
});
|
|
200
234
|
|
|
@@ -204,8 +238,8 @@
|
|
|
204
238
|
|
|
205
239
|
let os = $state();
|
|
206
240
|
|
|
207
|
-
let isIos = $derived(
|
|
208
|
-
let isAndroid = $derived(
|
|
241
|
+
let isIos = $derived(os === 'iOS');
|
|
242
|
+
let isAndroid = $derived(os === 'Android');
|
|
209
243
|
|
|
210
244
|
let isMobile = $state(false);
|
|
211
245
|
|
|
@@ -272,8 +306,7 @@
|
|
|
272
306
|
return 'iOS';
|
|
273
307
|
} else if (/Android/.test(navigator.userAgent)) {
|
|
274
308
|
return 'Android';
|
|
275
|
-
}
|
|
276
|
-
else {
|
|
309
|
+
} else {
|
|
277
310
|
return 'unknown';
|
|
278
311
|
}
|
|
279
312
|
}
|
|
@@ -395,48 +428,17 @@
|
|
|
395
428
|
{style}
|
|
396
429
|
>
|
|
397
430
|
{#if show}
|
|
398
|
-
|
|
399
|
-
|
|
400
|
-
|
|
401
|
-
|
|
402
|
-
|
|
403
|
-
|
|
404
|
-
|
|
405
|
-
|
|
406
|
-
|
|
407
|
-
|
|
408
|
-
|
|
409
|
-
isIos,
|
|
410
|
-
isAndroid,
|
|
411
|
-
os,
|
|
412
|
-
isFullscreen,
|
|
413
|
-
isDevMode,
|
|
414
|
-
requestDevmode,
|
|
415
|
-
requestFullscreen,
|
|
416
|
-
gameWidth,
|
|
417
|
-
gameHeight
|
|
418
|
-
})}
|
|
419
|
-
</div>
|
|
420
|
-
<!-- Portrait content -->
|
|
421
|
-
<div class:hidden={isLandscape}>
|
|
422
|
-
{@render snippetPortrait({
|
|
423
|
-
isLandscape,
|
|
424
|
-
isPortrait: !isLandscape,
|
|
425
|
-
isMobile,
|
|
426
|
-
isIos,
|
|
427
|
-
isAndroid,
|
|
428
|
-
os,
|
|
429
|
-
isFullscreen,
|
|
430
|
-
isDevMode,
|
|
431
|
-
requestDevmode,
|
|
432
|
-
requestFullscreen,
|
|
433
|
-
gameWidth,
|
|
434
|
-
gameHeight
|
|
435
|
-
})}
|
|
436
|
-
</div>
|
|
437
|
-
{:else if supportsFullscreen && !isDevMode}
|
|
438
|
-
<!-- Require fullscreen -->
|
|
439
|
-
{@render snippetRequireFullscreen({
|
|
431
|
+
<!-- Render both orientations, toggle visibility to preserve state -->
|
|
432
|
+
{#if snippetRequireFullscreen}
|
|
433
|
+
<!-- Require fullscreen -->
|
|
434
|
+
{#if isFullscreen && !isDevMode}
|
|
435
|
+
<!-- Landscape content -->
|
|
436
|
+
<div
|
|
437
|
+
class:hidden={!isLandscape}
|
|
438
|
+
style:width="{gameWidthOnLandscape}px"
|
|
439
|
+
style:height="{gameHeightOnLandscape}px"
|
|
440
|
+
>
|
|
441
|
+
{@render snippetLandscape({
|
|
440
442
|
isLandscape,
|
|
441
443
|
isPortrait: !isLandscape,
|
|
442
444
|
isMobile,
|
|
@@ -450,9 +452,14 @@
|
|
|
450
452
|
gameWidth,
|
|
451
453
|
gameHeight
|
|
452
454
|
})}
|
|
453
|
-
|
|
454
|
-
|
|
455
|
-
|
|
455
|
+
</div>
|
|
456
|
+
<!-- Portrait content -->
|
|
457
|
+
<div
|
|
458
|
+
class:hidden={isLandscape}
|
|
459
|
+
style:width="{gameWidthOnPortrait}px"
|
|
460
|
+
style:height="{gameHeightOnPortrait}px"
|
|
461
|
+
>
|
|
462
|
+
{@render snippetPortrait({
|
|
456
463
|
isLandscape,
|
|
457
464
|
isPortrait: !isLandscape,
|
|
458
465
|
isMobile,
|
|
@@ -466,50 +473,16 @@
|
|
|
466
473
|
gameWidth,
|
|
467
474
|
gameHeight
|
|
468
475
|
})}
|
|
469
|
-
|
|
470
|
-
|
|
471
|
-
|
|
472
|
-
|
|
473
|
-
|
|
474
|
-
isPortrait: !isLandscape,
|
|
475
|
-
isMobile,
|
|
476
|
-
isIos,
|
|
477
|
-
isAndroid,
|
|
478
|
-
os,
|
|
479
|
-
isFullscreen,
|
|
480
|
-
isDevMode,
|
|
481
|
-
requestDevmode,
|
|
482
|
-
requestFullscreen,
|
|
483
|
-
gameWidth,
|
|
484
|
-
gameHeight
|
|
485
|
-
})}
|
|
486
|
-
</div>
|
|
487
|
-
<!-- Portrait content -->
|
|
488
|
-
<div class:hidden={isLandscape}>
|
|
489
|
-
{@render snippetPortrait({
|
|
490
|
-
isLandscape,
|
|
491
|
-
isPortrait: !isLandscape,
|
|
492
|
-
isMobile,
|
|
493
|
-
isIos,
|
|
494
|
-
isAndroid,
|
|
495
|
-
os,
|
|
496
|
-
isFullscreen,
|
|
497
|
-
isDevMode,
|
|
498
|
-
requestDevmode,
|
|
499
|
-
requestFullscreen,
|
|
500
|
-
gameWidth,
|
|
501
|
-
gameHeight
|
|
502
|
-
})}
|
|
503
|
-
</div>
|
|
504
|
-
{/if}
|
|
505
|
-
{:else}
|
|
506
|
-
<!-- Do not require fullscreen -->
|
|
507
|
-
<!-- Landscape content -->
|
|
508
|
-
<div class:hidden={!isLandscape}>
|
|
509
|
-
{@render snippetLandscape({
|
|
476
|
+
</div>
|
|
477
|
+
{:else if supportsFullscreen && !isDevMode}
|
|
478
|
+
<!-- Require fullscreen -->
|
|
479
|
+
<div style:width="{gameWidth}px" style:height="{gameHeight}px">
|
|
480
|
+
{@render snippetRequireFullscreen({
|
|
510
481
|
isLandscape,
|
|
511
482
|
isPortrait: !isLandscape,
|
|
512
483
|
isMobile,
|
|
484
|
+
isIos,
|
|
485
|
+
isAndroid,
|
|
513
486
|
os,
|
|
514
487
|
isFullscreen,
|
|
515
488
|
isDevMode,
|
|
@@ -519,12 +492,15 @@
|
|
|
519
492
|
gameHeight
|
|
520
493
|
})}
|
|
521
494
|
</div>
|
|
522
|
-
|
|
523
|
-
|
|
524
|
-
|
|
495
|
+
{:else if isMobile && snippetInstallOnHomeScreen && !isDevMode}
|
|
496
|
+
<!-- Require install on home screen on mobile -->
|
|
497
|
+
<div style:width="{gameWidth}px" style:height="{gameHeight}px">
|
|
498
|
+
{@render snippetInstallOnHomeScreen({
|
|
525
499
|
isLandscape,
|
|
526
500
|
isPortrait: !isLandscape,
|
|
527
501
|
isMobile,
|
|
502
|
+
isIos,
|
|
503
|
+
isAndroid,
|
|
528
504
|
os,
|
|
529
505
|
isFullscreen,
|
|
530
506
|
isDevMode,
|
|
@@ -534,79 +510,19 @@
|
|
|
534
510
|
gameHeight
|
|
535
511
|
})}
|
|
536
512
|
</div>
|
|
537
|
-
{
|
|
538
|
-
|
|
539
|
-
|
|
540
|
-
|
|
541
|
-
|
|
542
|
-
|
|
543
|
-
|
|
544
|
-
{#if isFullscreen && !isDevMode}
|
|
545
|
-
{@render snippetLandscape({
|
|
546
|
-
isLandscape,
|
|
547
|
-
isPortrait: !isLandscape,
|
|
548
|
-
isMobile,
|
|
549
|
-
isIos,
|
|
550
|
-
isAndroid,
|
|
551
|
-
os,
|
|
552
|
-
isFullscreen,
|
|
553
|
-
isDevMode,
|
|
554
|
-
requestDevmode,
|
|
555
|
-
requestFullscreen,
|
|
556
|
-
gameWidth,
|
|
557
|
-
gameHeight
|
|
558
|
-
})}
|
|
559
|
-
{:else if supportsFullscreen && !isDevMode}
|
|
560
|
-
<!-- Require fullscreen (on landscape) -->
|
|
561
|
-
{@render snippetRequireFullscreen({
|
|
562
|
-
isLandscape,
|
|
563
|
-
isPortrait: !isLandscape,
|
|
564
|
-
isMobile,
|
|
565
|
-
os,
|
|
566
|
-
isFullscreen,
|
|
567
|
-
isDevMode,
|
|
568
|
-
requestDevmode,
|
|
569
|
-
requestFullscreen,
|
|
570
|
-
gameWidth,
|
|
571
|
-
gameHeight
|
|
572
|
-
})}
|
|
573
|
-
{:else if isMobile && snippetInstallOnHomeScreen && !isDevMode}
|
|
574
|
-
<!-- Require install on home screen on mobile -->
|
|
575
|
-
{@render snippetInstallOnHomeScreen({
|
|
576
|
-
isLandscape,
|
|
577
|
-
isPortrait: !isLandscape,
|
|
578
|
-
isMobile,
|
|
579
|
-
os,
|
|
580
|
-
isFullscreen,
|
|
581
|
-
isDevMode,
|
|
582
|
-
requestDevmode,
|
|
583
|
-
requestFullscreen,
|
|
584
|
-
gameWidth,
|
|
585
|
-
gameHeight
|
|
586
|
-
})}
|
|
587
|
-
{:else}
|
|
588
|
-
{@render snippetLandscape({
|
|
589
|
-
isLandscape,
|
|
590
|
-
isPortrait: !isLandscape,
|
|
591
|
-
isMobile,
|
|
592
|
-
isIos,
|
|
593
|
-
isAndroid,
|
|
594
|
-
os,
|
|
595
|
-
isFullscreen,
|
|
596
|
-
isDevMode,
|
|
597
|
-
requestDevmode,
|
|
598
|
-
requestFullscreen,
|
|
599
|
-
gameWidth,
|
|
600
|
-
gameHeight
|
|
601
|
-
})}
|
|
602
|
-
{/if}
|
|
603
|
-
{:else}
|
|
604
|
-
<!-- Do not require fullscreen -->
|
|
605
|
-
<!-- *we do not try install home app -->
|
|
513
|
+
{:else}
|
|
514
|
+
<!-- Landscape content -->
|
|
515
|
+
<div
|
|
516
|
+
class:hidden={!isLandscape}
|
|
517
|
+
style:width="{gameWidthOnLandscape}px"
|
|
518
|
+
style:height="{gameHeightOnLandscape}px"
|
|
519
|
+
>
|
|
606
520
|
{@render snippetLandscape({
|
|
607
521
|
isLandscape,
|
|
608
522
|
isPortrait: !isLandscape,
|
|
609
523
|
isMobile,
|
|
524
|
+
isIos,
|
|
525
|
+
isAndroid,
|
|
610
526
|
os,
|
|
611
527
|
isFullscreen,
|
|
612
528
|
isDevMode,
|
|
@@ -615,77 +531,19 @@
|
|
|
615
531
|
gameWidth,
|
|
616
532
|
gameHeight
|
|
617
533
|
})}
|
|
618
|
-
|
|
619
|
-
|
|
620
|
-
|
|
621
|
-
|
|
622
|
-
|
|
623
|
-
{
|
|
624
|
-
|
|
625
|
-
isLandscape,
|
|
626
|
-
isPortrait: !isLandscape,
|
|
627
|
-
isMobile,
|
|
628
|
-
isIos,
|
|
629
|
-
isAndroid,
|
|
630
|
-
os,
|
|
631
|
-
isFullscreen,
|
|
632
|
-
isDevMode,
|
|
633
|
-
requestDevmode,
|
|
634
|
-
requestFullscreen,
|
|
635
|
-
gameWidth,
|
|
636
|
-
gameHeight
|
|
637
|
-
})}
|
|
638
|
-
{:else if supportsFullscreen && !isDevMode}
|
|
639
|
-
<!-- Require fullscreen (on landscape) -->
|
|
640
|
-
{@render snippetRequireFullscreen({
|
|
641
|
-
isLandscape,
|
|
642
|
-
isPortrait: !isLandscape,
|
|
643
|
-
isMobile,
|
|
644
|
-
os,
|
|
645
|
-
isFullscreen,
|
|
646
|
-
isDevMode,
|
|
647
|
-
requestDevmode,
|
|
648
|
-
requestFullscreen,
|
|
649
|
-
gameWidth,
|
|
650
|
-
gameHeight
|
|
651
|
-
})}
|
|
652
|
-
{:else if isMobile && snippetInstallOnHomeScreen && !isDevMode}
|
|
653
|
-
<!-- Require install on home screen on mobile -->
|
|
654
|
-
{@render snippetInstallOnHomeScreen({
|
|
655
|
-
isLandscape,
|
|
656
|
-
isPortrait: !isLandscape,
|
|
657
|
-
isMobile,
|
|
658
|
-
os,
|
|
659
|
-
isFullscreen,
|
|
660
|
-
isDevMode,
|
|
661
|
-
requestDevmode,
|
|
662
|
-
requestFullscreen,
|
|
663
|
-
gameWidth,
|
|
664
|
-
gameHeight
|
|
665
|
-
})}
|
|
666
|
-
{:else}
|
|
667
|
-
{@render snippetPortrait({
|
|
668
|
-
isLandscape,
|
|
669
|
-
isPortrait: !isLandscape,
|
|
670
|
-
isMobile,
|
|
671
|
-
isIos,
|
|
672
|
-
isAndroid,
|
|
673
|
-
os,
|
|
674
|
-
isFullscreen,
|
|
675
|
-
isDevMode,
|
|
676
|
-
requestDevmode,
|
|
677
|
-
requestFullscreen,
|
|
678
|
-
gameWidth,
|
|
679
|
-
gameHeight
|
|
680
|
-
})}
|
|
681
|
-
{/if}
|
|
682
|
-
{:else}
|
|
683
|
-
<!-- Do not require fullscreen -->
|
|
684
|
-
<!-- *we do not try install home app -->
|
|
534
|
+
</div>
|
|
535
|
+
<!-- Portrait content -->
|
|
536
|
+
<div
|
|
537
|
+
class:hidden={isLandscape}
|
|
538
|
+
style:width="{gameWidthOnPortrait}px"
|
|
539
|
+
style:height="{gameHeightOnPortrait}px"
|
|
540
|
+
>
|
|
685
541
|
{@render snippetPortrait({
|
|
686
542
|
isLandscape,
|
|
687
543
|
isPortrait: !isLandscape,
|
|
688
544
|
isMobile,
|
|
545
|
+
isIos,
|
|
546
|
+
isAndroid,
|
|
689
547
|
os,
|
|
690
548
|
isFullscreen,
|
|
691
549
|
isDevMode,
|
|
@@ -694,8 +552,48 @@
|
|
|
694
552
|
gameWidth,
|
|
695
553
|
gameHeight
|
|
696
554
|
})}
|
|
697
|
-
|
|
555
|
+
</div>
|
|
698
556
|
{/if}
|
|
557
|
+
{:else}
|
|
558
|
+
<!-- Do not require fullscreen -->
|
|
559
|
+
<!-- Landscape content -->
|
|
560
|
+
<div
|
|
561
|
+
class:hidden={!isLandscape}
|
|
562
|
+
style:width="{gameWidthOnLandscape}px"
|
|
563
|
+
style:height="{gameHeightOnLandscape}px"
|
|
564
|
+
>
|
|
565
|
+
{@render snippetLandscape({
|
|
566
|
+
isLandscape,
|
|
567
|
+
isPortrait: !isLandscape,
|
|
568
|
+
isMobile,
|
|
569
|
+
os,
|
|
570
|
+
isFullscreen,
|
|
571
|
+
isDevMode,
|
|
572
|
+
requestDevmode,
|
|
573
|
+
requestFullscreen,
|
|
574
|
+
gameWidth,
|
|
575
|
+
gameHeight
|
|
576
|
+
})}
|
|
577
|
+
</div>
|
|
578
|
+
<!-- Portrait content -->
|
|
579
|
+
<div
|
|
580
|
+
class:hidden={isLandscape}
|
|
581
|
+
style:width="{gameWidthOnPortrait}px"
|
|
582
|
+
style:height="{gameHeightOnPortrait}px"
|
|
583
|
+
>
|
|
584
|
+
{@render snippetPortrait({
|
|
585
|
+
isLandscape,
|
|
586
|
+
isPortrait: !isLandscape,
|
|
587
|
+
isMobile,
|
|
588
|
+
os,
|
|
589
|
+
isFullscreen,
|
|
590
|
+
isDevMode,
|
|
591
|
+
requestDevmode,
|
|
592
|
+
requestFullscreen,
|
|
593
|
+
gameWidth,
|
|
594
|
+
gameHeight
|
|
595
|
+
})}
|
|
596
|
+
</div>
|
|
699
597
|
{/if}
|
|
700
598
|
{/if}
|
|
701
599
|
</div>
|
|
@@ -14,7 +14,6 @@ type GameBox = {
|
|
|
14
14
|
marginTop?: number | undefined;
|
|
15
15
|
marginBottom?: number | undefined;
|
|
16
16
|
center?: boolean | undefined;
|
|
17
|
-
preserveOnOrientationChange?: boolean | undefined;
|
|
18
17
|
snippetLandscape?: Snippet<[SnippetParams]> | undefined;
|
|
19
18
|
snippetPortrait?: Snippet<[SnippetParams]> | undefined;
|
|
20
19
|
snippetRequireFullscreen?: Snippet<[SnippetParams]> | undefined;
|
|
@@ -34,7 +33,6 @@ declare const GameBox: import("svelte").Component<{
|
|
|
34
33
|
marginTop?: number;
|
|
35
34
|
marginBottom?: number;
|
|
36
35
|
center?: boolean;
|
|
37
|
-
preserveOnOrientationChange?: boolean;
|
|
38
36
|
snippetLandscape?: import("svelte").Snippet<[{
|
|
39
37
|
isLandscape: boolean;
|
|
40
38
|
isPortrait: boolean;
|