-
Notifications
You must be signed in to change notification settings - Fork 377
/
index.html
787 lines (762 loc) · 44.2 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
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
<!DOCTYPE html>
<html>
<head>
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-3KX75YDDR9"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-3KX75YDDR9');
</script>
<meta charset="utf-8">
<title>SUI 8192</title>
<meta name="description" content="SUI 8192 is a completely on-chain and extra challenging version of the popular 2048 game built on the Sui blockchain by Ethos." />
<meta name="keywords" content="Sui, Ethos, Game, Blockchain, Crypto, On-Chain">
<link href="style/main.css" rel="stylesheet" type="text/css">
<link rel="shortcut icon" href="favicon.ico">
<link rel="apple-touch-icon" href="meta/apple-touch-icon.png">
<link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x1096.png" media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone 5+ -->
<link rel="apple-touch-startup-image" href="meta/apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (device-height: 480px) and (-webkit-device-pixel-ratio: 2)"> <!-- iPhone, retina -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=no">
</head>
<body class="desktop signed-in signed-out">
<div id="container" class="container">
<div id="modal-overlay" class="hidden">
<div class="modal">
<div id="close-modal">
<div>✕</div>
</div>
<div id="pause-message" class="message hidden">
<p>Just checking :)</p>
<h1>Are you still here?</h2>
<button id='unpause' style="padding: 12px 24px; margin: 12px 0;">
Yes! I want to keep playing
</button>
</div>
<div id="loading-message" class="message">
<div class="spinner">
<div>
Loading, Please Wait...
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 24 24">
<style>.spinner_jCIR{animation:spinner_B8Vq .9s linear infinite;animation-delay:-.9s}.spinner_upm8{animation-delay:-.8s}.spinner_2eL5{animation-delay:-.7s}.spinner_Rp9l{animation-delay:-.6s}.spinner_dy3W{animation-delay:-.5s}@keyframes spinner_B8Vq{0%,66.66%{animation-timing-function:cubic-bezier(0.36,.61,.3,.98);y:6px;height:12px}33.33%{animation-timing-function:cubic-bezier(0.36,.61,.3,.98);y:1px;height:22px}}</style>
<rect class="spinner_jCIR" x="1" y="6" width="2.8" height="12" fill="black" />
<rect class="spinner_jCIR spinner_upm8" x="5.8" y="6" width="2.8" height="12" fill="black" />
<rect class="spinner_jCIR spinner_2eL5" x="10.6" y="6" width="2.8" height="12" fill="black" >
<rect class="spinner_jCIR spinner_Rp9l" x="15.4" y="6" width="2.8" height="12" fill="black" />
<rect class="spinner_jCIR spinner_dy3W" x="20.2" y="6" width="2.8" height="12" fill="black" />
</svg>
</div>
</div>
<div class="during-contest">
<div class="get-started-message" class="message text-center hidden">
<div class="header">
<div></div>
<div><img src="contest-logo.png" alt="Sui 8192 Logo" style="height: 30px;" /></div>
<div class="close">×</div>
</div>
<div class="start-content">
<h1 style="margin-top: 48px; font-weight: 800;">Sui 8192 Competition</h1>
<p style="font-size: x-large; font-weight: 400; line-height: normal;">
10 winning players every day!
</p>
<button class='sign-in' style="font-size: large; font-weight: 500; padding: 12px 24px;">
Get Started
</button>
<div id="contest-learn-more" style="cursor: pointer; font-size: small; font-weight: 500; text-decoration: underline; margin-top: 30px;">
Learn More
</div>
</div>
</div>
</div>
<!-- <div class="after-contest">
<div class="get-started-message" class="message text-center hidden">
<div class="header">
<div></div>
<div style="font-weight: 500;">SUI 8192</div>
<div class="close">×</div>
</div>
<div class="start-content">
<p style="font-size: large; font-weight: 400; line-height: normal; margin: 24px 0;">
An addictive, <br/>fully on-chain game.
</p>
<p style="font-size: x-large; font-weight: 600; line-height: normal; margin-bottom: 30px;">
High scores saved<br/>forever on-chain!
</p>
<button class='sign-in' style="font-size: large; font-weight: 500; padding: 12px 24px;">
Play Now
</button>
<div style="margin-top: 48px">
<img src="ethos-logo.png" alt="Ethos" style="width: 60px;" />
</div>
</div>
</div>
</div> -->
<div id="create-error-message" class="message text-center hidden">
<p>There was an error minting a new game.</p>
<p id="create-error-error-message"></p>
</div>
<div id="mint-message" class="message hidden">
<div class="subtitle">Mint New Game</div>
<p>To start playing you must first mint a new game as an NFT:</p>
<div id="mint-game"></div>
</div>
<div id="top-tile-message" class="message text-center hidden">
<div class="subtitle">Congrats!</div>
<div class="top-tile-display"></div>
<p>
You uncovered a new tile!
<br/>
Check it out in your wallet!
</p>
<br/>
<a href="https://beta.ethoswallet.xyz/dashboard" target="_blank" class="link-button">Open Wallet Explorer</a>
<br/><br/>
<button class="keep-playing secondary-button">Keep Playing</button>
</div>
<div id="high-score-message" class="message text-center hidden">
<div class="subtitle">Congrats!</div>
<div class="top-tile-display"></div>
<p>
You got a high score!
</p>
<p>
Your game is eligible for the leaderboard!
</p>
<p>
If you submit you can still keep playing.
</p>
<br/>
<button id="modal-submit-to-leaderboard">Submit To Leaderboard</button>
<br/><br/>
<button class="keep-playing secondary-button">Keep Playing</button>
</div>
<div id="climbing-leaderboard-message" class="message text-center hidden">
<div class="subtitle">Congrats!</div>
<div class="top-tile-display"></div>
<p>
You're climbing the leaderboard!
</p>
<p>Take a break and check out your progress (your game is automatically saved):</p>
<br/>
<button id="modal-view-leaderboard">View Leaderboard Position</button>
<br/><br/>
<button class="keep-playing secondary-button">Keep Playing</button>
</div>
</div>
</div>
<div class="header">
<div class="header-title">
<!-- <img src="logo.png" style="width: 30px; height: 30px;" />
<div>SUI <span>8192</span></div> -->
<img src="logo-group.png" alt="Sui8192" style="height: 36px;" />
</div>
<div class="header-buttons wide">
<div class="play-button header-button selected">
Play
</div>
<div class="contest-button header-button center">
Daily Contest
</div>
<div class="leaderboard-button header-button">
Leaderboard
</div>
<div class="network-buttons header-button" style="display: none;">
<div class="mainNet network-button selected">
Mainnet
</div>
<div class="testNet network-button">
Testnet
</div>
</div>
</div>
<div class="header-address">
<div id="sui-address">
<div class="sui-address-main">
<svg class='sui-logo' width="12" height="18" viewBox="0 0 17 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M1.1167 19.8324C1.82957 21.0971 2.86581 22.1494 4.11927 22.8818C5.37273 23.6141 6.79834 24 8.25004 24C9.70175 24 11.1274 23.6141 12.3808 22.8818C13.6343 22.1494 14.6705 21.0971 15.3834 19.8324C16.1149 18.5654 16.5001 17.1282 16.5001 15.6652C16.5001 14.2021 16.1149 12.7649 15.3834 11.4979L9.10948 0.502056C9.02358 0.349707 8.89873 0.22293 8.74771 0.13471C8.59669 0.0464909 8.42494 0 8.25004 0C8.07514 0 7.90339 0.0464909 7.75237 0.13471C7.60136 0.22293 7.4765 0.349707 7.3906 0.502056L1.1167 11.4979C0.385139 12.7649 0 14.2021 0 15.6652C0 17.1282 0.385139 18.5654 1.1167 19.8324ZM6.48268 5.73328L7.82032 3.38878C7.86327 3.3126 7.9257 3.24921 8.00121 3.2051C8.07672 3.16099 8.16259 3.13775 8.25004 3.13775C8.33749 3.13775 8.42337 3.16099 8.49888 3.2051C8.57439 3.24921 8.63681 3.3126 8.67976 3.38878L13.8258 12.408C14.2878 13.2077 14.5742 14.0965 14.666 15.0155C14.7578 15.9344 14.6529 16.8624 14.3582 17.7377C14.2942 17.4393 14.2062 17.1466 14.0949 16.8625C13.3841 15.0473 11.7769 13.6465 9.31696 12.6989C7.62574 12.0498 6.54616 11.0951 6.1075 9.86092C5.54254 8.27086 6.13264 6.5365 6.48268 5.73328ZM4.20172 9.73102L2.67424 12.408C2.10236 13.3983 1.80129 14.5218 1.80129 15.6654C1.80129 16.8091 2.10236 17.9325 2.67424 18.9229C3.13652 19.7418 3.77343 20.449 4.53973 20.9941C5.30604 21.5392 6.18295 21.9089 7.10821 22.077C8.03347 22.245 8.98439 22.2074 9.89345 21.9666C10.8025 21.7259 11.6474 21.2879 12.3682 20.6839C12.7665 19.6656 12.7807 18.5371 12.4082 17.5091C11.8862 16.1976 10.6295 15.1506 8.6731 14.3966C6.46168 13.5477 5.0251 12.2226 4.40368 10.4591C4.31998 10.2212 4.25251 9.97798 4.20172 9.73102Z" fill="#222532"/>
</svg>
<div id='ethos-start' class="signed-out"></div>
<div class="balance-and-address signed-in">
<div id="balance">
---
</div>
<div id="wallet-address">
Address
</div>
</div>
</div>
<div id='faucet' class="signed-in hidden">
<p>
Your wallet looked a little
<br/>
low on funds, so we've topped
<br/>
it off thanks to the Sui Faucet.
</p>
<p>
You can access the Testnet
<br/>
faucet in <a href='https://discord.com/channels/916379725201563759/971488439931392130' target='_blank'>Sui's Discord</a>
</p>
<div class="center">
<button id="close-faucet" class="secondary-button">Close</button>
</div>
</div>
<div id='preapproval' class="signed-in hidden">
<p>
Your wallet does not support
<br/>
pre-approvals.
</p>
<p>
Pre-approvals allow you to
<br/>
safely play without signing
<br/>
every transaction.
</p>
<p>
We recommend installing
<br/>
<a href='https://chrome.google.com/webstore/detail/ethos-wallet/mcbigmjiafegjnnogedioegffbooigli' target='_blank'>Ethos Wallet</a> which supports
<br/>
pre-approvals.
</p>
<div class="center">
<button id="close-preapproval" class="secondary-button">Close</button>
</div>
</div>
<div id='hosted' class="signed-in hidden">
<p>
You are using an email wallet.
</p>
<p>
SUI 8192 is faster using a chrome
<br/>
extension without the email option.
</p>
<p>
We recommend installing
<br/>
<a href='https://chrome.google.com/webstore/detail/ethos-wallet/mcbigmjiafegjnnogedioegffbooigli' target='_blank'>Ethos Wallet</a> which supports
<br/>
pre-approvals.
</p>
<div class="center">
<button id="close-hosted" class="secondary-button">Close</button>
</div>
</div>
<div class="menu signed-in hidden">
<div>
<button id="copy-address">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M15.6657 3.88789C15.3991 2.94272 14.5305 2.25 13.5 2.25H10.5C9.46954 2.25 8.60087 2.94272 8.33426 3.88789M15.6657 3.88789C15.7206 4.0825 15.75 4.28782 15.75 4.5V4.5C15.75 4.91421 15.4142 5.25 15 5.25H9C8.58579 5.25 8.25 4.91421 8.25 4.5V4.5C8.25 4.28782 8.27937 4.0825 8.33426 3.88789M15.6657 3.88789C16.3119 3.93668 16.9545 3.99828 17.5933 4.07241C18.6939 4.20014 19.5 5.149 19.5 6.25699V19.5C19.5 20.7426 18.4926 21.75 17.25 21.75H6.75C5.50736 21.75 4.5 20.7426 4.5 19.5V6.25699C4.5 5.149 5.30608 4.20014 6.40668 4.07241C7.04547 3.99828 7.68808 3.93668 8.33426 3.88789" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Copy Wallet Address
</button>
<a class="link-button" href="https://ethoswallet.xyz/dashboard" target="_blank">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 21C16.1926 21 19.7156 18.1332 20.7157 14.2529M12 21C7.80742 21 4.28442 18.1332 3.2843 14.2529M12 21C14.4853 21 16.5 16.9706 16.5 12C16.5 7.02944 14.4853 3 12 3M12 21C9.51472 21 7.5 16.9706 7.5 12C7.5 7.02944 9.51472 3 12 3M12 3C15.3652 3 18.299 4.84694 19.8431 7.58245M12 3C8.63481 3 5.70099 4.84694 4.15692 7.58245M19.8431 7.58245C17.7397 9.40039 14.9983 10.5 12 10.5C9.00172 10.5 6.26027 9.40039 4.15692 7.58245M19.8431 7.58245C20.5797 8.88743 21 10.3946 21 12C21 12.778 20.9013 13.5329 20.7157 14.2529M20.7157 14.2529C18.1334 15.6847 15.1619 16.5 12 16.5C8.8381 16.5 5.86662 15.6847 3.2843 14.2529M3.2843 14.2529C3.09871 13.5329 3 12.778 3 12C3 10.3946 3.42032 8.88743 4.15692 7.58245" stroke="black" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Wallet Explorer
</a>
<button class="new-game">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12 9V15M15 12H9M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#0F172A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
New Game
</button>
<button id="logout">
<svg width="18" height="18" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M13.5 21V20.25V21ZM7.5 21V21.75V21ZM5.25 18.75H6H5.25ZM5.25 5.25H4.5H5.25ZM7.5 3V2.25V3ZM13.5 3V3.75V3ZM15.75 5.25L15 5.25V5.25H15.75ZM15 9C15 9.41421 15.3358 9.75 15.75 9.75C16.1642 9.75 16.5 9.41421 16.5 9H15ZM16.5 15C16.5 14.5858 16.1642 14.25 15.75 14.25C15.3358 14.25 15 14.5858 15 15H16.5ZM15.75 18.75H16.5H15.75ZM18.2197 14.4697C17.9268 14.7626 17.9268 15.2374 18.2197 15.5303C18.5126 15.8232 18.9874 15.8232 19.2803 15.5303L18.2197 14.4697ZM21.75 12L22.2803 12.5303C22.5732 12.2374 22.5732 11.7626 22.2803 11.4697L21.75 12ZM19.2803 8.46967C18.9874 8.17678 18.5126 8.17678 18.2197 8.46967C17.9268 8.76256 17.9268 9.23744 18.2197 9.53033L19.2803 8.46967ZM9 11.25C8.58579 11.25 8.25 11.5858 8.25 12C8.25 12.4142 8.58579 12.75 9 12.75V11.25ZM13.5 20.25H7.5V21.75H13.5V20.25ZM6 18.75L6 5.25H4.5L4.5 18.75H6ZM7.5 3.75L13.5 3.75V2.25L7.5 2.25V3.75ZM15 5.25V9H16.5V5.25H15ZM15 15V18.75H16.5V15H15ZM6 5.25C6 4.42157 6.67157 3.75 7.5 3.75V2.25C5.84315 2.25 4.5 3.59315 4.5 5.25H6ZM7.5 20.25C6.67157 20.25 6 19.5784 6 18.75H4.5C4.5 20.4069 5.84315 21.75 7.5 21.75V20.25ZM13.5 21.75C15.1569 21.75 16.5 20.4069 16.5 18.75H15C15 19.5784 14.3284 20.25 13.5 20.25V21.75ZM13.5 3.75C14.3284 3.75 15 4.42157 15 5.25L16.5 5.25C16.5 3.59315 15.1569 2.25 13.5 2.25V3.75ZM19.2803 15.5303L22.2803 12.5303L21.2197 11.4697L18.2197 14.4697L19.2803 15.5303ZM22.2803 11.4697L19.2803 8.46967L18.2197 9.53033L21.2197 12.5303L22.2803 11.4697ZM21.75 11.25L9 11.25V12.75L21.75 12.75V11.25Z" fill="#0F172A"/>
</svg>
Log Out
</button>
</div>
</div>
</div>
</div>
</div>
<div class="header-buttons narrow">
<div class="play-button header-button selected">
Play
</div>
<div class="contest-button header-button">
Daily Contest
<div style="background-color: white; border-radius: 25%; padding: 3px">New</div>
</div>
<div class="leaderboard-button header-button">
Leaderboard
</div>
<div class="network-buttons header-button" style="display: none">
<div class="mainNet network-button selected">
Mainnet
</div>
<div class="testNet network-button">
Testnet
</div>
</div>
</div>
<div id="leaderboard" class="hidden">
<div class="vertical-container">
<div class="show-contest" style="text-align: center; width: 100%;">
<div class="contest-banner">
<img src="contest-logo.png" alt="Sui 8192 Contest" style="height: 30px;" />
<h2 style="font-size: xx-large; font-weight: 500;">SUI 8192 Daily Contest</h2>
<p style="font-size: large;">Multiple winners every day!</p>
<p style="font-size: large; padding-bottom: 6px;">Today's contest ends in:</p>
<div class='countdown-values'>
<div>
<div id="countdown-time-days" class="value"></div>
<div>Days</div>
</div>
<div class="colon">
<div>:</div>
<div></div>
</div>
<div>
<div id="countdown-time-hours" class="value"></div>
<div>Hours</div>
</div>
<div class="colon">
<div>:</div>
<div></div>
</div>
<div>
<div id="countdown-time-minutes" class="value"></div>
<div>Minutes</div>
</div>
<div class="colon">
<div>:</div>
<div></div>
</div>
<div>
<div id="countdown-time-seconds" class="value"></div>
<div>Seconds</div>
</div>
</div>
</div>
<p class="contest-text">
Ethos Wallet and the Sui Foundation are hosting a daily SUI 8192 contest.
See below for more details on prizes and rules.
</p>
<h2 class="contest-title" style="font-size: x-large; margin-bottom: 0;">Competition Leaderboard</h2>
</div>
<div class="content">
<div class="instructions hide-contest">
<p>
SUI 8192 is a completely on-chain and extra challenging version of
the popular 2048 game built on
the <a href='https://sui.io' target="_blank">Sui</a> blockchain
by <a href='https://ethoswallet.xyz' target="_blank">Ethos</a>.
</p>
<p class="highlight">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4032 12.6523C17.353 12.1487 18 11.1499 18 10C18 8.85007 17.353 7.85126 16.4032 7.34771C16.7188 6.32002 16.47 5.15625 15.6569 4.34312C14.8437 3.53 13.68 3.28122 12.6523 3.59679C12.1487 2.64698 11.1499 2 10 2C8.85007 2 7.85125 2.64699 7.3477 3.59681C6.32002 3.28126 5.15627 3.53004 4.34315 4.34316C3.53003 5.15628 3.28125 6.32003 3.5968 7.34771C2.64699 7.85126 2 8.85007 2 10C2 11.1499 2.64699 12.1487 3.59681 12.6523C3.28124 13.68 3.53001 14.8437 4.34314 15.6569C5.15627 16.47 6.32003 16.7188 7.34771 16.4032C7.85126 17.353 8.85007 18 10 18C11.1499 18 12.1488 17.353 12.6523 16.4032C13.68 16.7187 14.8437 16.47 15.6569 15.6568C16.47 14.8437 16.7188 13.68 16.4032 12.6523ZM13.8566 8.19113C14.1002 7.85614 14.0261 7.38708 13.6911 7.14345C13.3561 6.89982 12.8871 6.97388 12.6434 7.30887L9.15969 12.099L7.28033 10.2197C6.98744 9.92678 6.51256 9.92678 6.21967 10.2197C5.92678 10.5126 5.92678 10.9874 6.21967 11.2803L8.71967 13.7803C8.87477 13.9354 9.08999 14.0149 9.30867 13.9977C9.52734 13.9805 9.72754 13.8685 9.85655 13.6911L13.8566 8.19113Z" fill="#45B7C8"/>
</svg>
Your achievements are<br class="narrow"> completely verifiable on-chain!
</p>
</div>
<div class="hide-contest text-center">
<h2 style="font-size: x-large; font-weight: 300; margin-bottom: 0;">All-Time Leaderboard</h2>
<p style="font-size: smaller">This leaderboard is on-chain so you must submit your game for it to display here.</p>
</div>
</div>
<div class="split-panel">
<div id="leaderboard-panel" class="panel panel-section hidden">
<div class="leader-title">
<div class="title"><span class="show-contest">Daily Contest</span> Leaderboard</div>
</div>
<div class="show-contest">
<div class="contest-days">
<div id='contest-day-1' class="contest-day selected" data-day="1">Today</div>
<div id='contest-day-2' class='contest-day' data-day="2">Yesterday</div>
<div id='contest-day-3' class='contest-day' data-day="3">2 Days Ago</div>
<div id='contest-day-4' class='contest-day' data-day="4">3 Days Ago</div>
<div id='contest-day-5' class='contest-day' data-day="5">4 Days Ago</div>
</div>
</div>
<div class="paused-contest text-center hidden">
<p>There is no daily competition today.</p>
<p>Please check back tomorrow.</p>
</div>
<div class="has-games-leader text-center hidden">
<p class="after-contest">All prizes will be sent to winning wallets within 3 working days.</p>
</div>
<div class="no-games-leader text-center hidden" style="padding-top: 30px;">
<h2>No Games</h2>
<p class="after-contest">No games were played for this contest...</p>
<p class="during-contest">No games have been played yet!</p>
<p class="during-contest">
<button class="new-game signed-in">Start New Game</button>
</p>
</div>
<div id="loading-leaderboard" class="hidden">
<div class="spinner">
<div>
Loading, Please Wait...
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 24 24">
<style>.spinner_jCIR{animation:spinner_B8Vq .9s linear infinite;animation-delay:-.9s}.spinner_upm8{animation-delay:-.8s}.spinner_2eL5{animation-delay:-.7s}.spinner_Rp9l{animation-delay:-.6s}.spinner_dy3W{animation-delay:-.5s}@keyframes spinner_B8Vq{0%,66.66%{animation-timing-function:cubic-bezier(0.36,.61,.3,.98);y:6px;height:12px}33.33%{animation-timing-function:cubic-bezier(0.36,.61,.3,.98);y:1px;height:22px}}</style>
<rect class="spinner_jCIR" x="1" y="6" width="2.8" height="12"/>
<rect class="spinner_jCIR spinner_upm8" x="5.8" y="6" width="2.8" height="12"/>
<rect class="spinner_jCIR spinner_2eL5" x="10.6" y="6" width="2.8" height="12"/>
<rect class="spinner_jCIR spinner_Rp9l" x="15.4" y="6" width="2.8" height="12"/>
<rect class="spinner_jCIR spinner_dy3W" x="20.2" y="6" width="2.8" height="12"/>
</svg>
</div>
</div>
<div id="leaderboard-list"></div>
<div class="more-leaderboard-area">
<button id="more-leaderboard" class="primary-button">
View More Leaders
</button>
</div>
</div>
<div class="panel">
<div class="panel-section">
<div class="games-title">
<div class="title">Your <span class='show-contest wide'>Contest</span> Games</div>
<div class="has-games">
<button class="new-game signed-in">+ New Game</button>
</div>
</div>
<div class="show-contest">
<div class="during-contest">
<div class="has-games text-center" style="padding: 6px 0; font-size: smaller;">
Only your top scoring game will display on the leaderboard.
</div>
</div>
</div>
<div class="no-games">
<div class="show-contest">
<div class="during-contest">
<div class="contest-game" style="text-align: center; padding: 12px 0 24px 0;">
<p>You haven't started any games for today's contest yet.</p>
<button class="new-game">Play First Game</button>
</div>
</div>
</div>
<div class="hide-contest" style="text-align: center; padding: 24px;">
<button class="new-game">Play First Game</button>
</div>
</div>
<div class="show-contest">
<div class="after-contest" style="text-align: center; padding-top: 12px;">
This daily contest has ended.
<br/>
Congrats to all the winners!
</div>
</div>
<div class="show-contest">
<div class="after-contest" style="text-align: center; padding-top: 12px;">
You can still play, but no additional moves on these games will count as the leaderboard is frozen.
</div>
<div class="after-contest" style="text-align: center; padding-top: 12px;">
Visit <span class='contest-day' data-day="1">today's contest</span> and create a new game to compete!
</div>
</div>
<div id="signed-in" class="signed-in contest-game">
<div class="select-all-games hidden" style="cursor: pointer; text-decoration: underline; padding: 6px 0; color: #2F41E2;">Select All Games</div>
<div id="games-list"></div>
</div>
<div id="loading-games">
<div class="spinner">
<div>
Loading, Please Wait...
</div>
<svg xmlns="http://www.w3.org/2000/svg" width="45" height="45" viewBox="0 0 24 24">
<style>.spinner_jCIR{animation:spinner_B8Vq .9s linear infinite;animation-delay:-.9s}.spinner_upm8{animation-delay:-.8s}.spinner_2eL5{animation-delay:-.7s}.spinner_Rp9l{animation-delay:-.6s}.spinner_dy3W{animation-delay:-.5s}@keyframes spinner_B8Vq{0%,66.66%{animation-timing-function:cubic-bezier(0.36,.61,.3,.98);y:6px;height:12px}33.33%{animation-timing-function:cubic-bezier(0.36,.61,.3,.98);y:1px;height:22px}}</style>
<rect class="spinner_jCIR" x="1" y="6" width="2.8" height="12"/>
<rect class="spinner_jCIR spinner_upm8" x="5.8" y="6" width="2.8" height="12"/>
<rect class="spinner_jCIR spinner_2eL5" x="10.6" y="6" width="2.8" height="12"/>
<rect class="spinner_jCIR spinner_Rp9l" x="15.4" y="6" width="2.8" height="12"/>
<rect class="spinner_jCIR spinner_dy3W" x="20.2" y="6" width="2.8" height="12"/>
</svg>
</div>
</div>
</div>
<div class="panel-section">
<div class="games-title">
Burn Games
</div>
<p>You can burn old games you no longer want to earn the storage rebate from them.</p>
<p class="center">
<button class="select-games primary-button">
Select Games To Burn
</button>
<button class="cancel-select-games secondary-button hidden" style="margin-right: 12px;">
Cancel
</button>
<button id="burn-games" class="primary-button hidden">
Burn Selected Games
</button>
</p>
</div>
<div class="panel-section">
<div class="games-title">
Fix Games
</div>
<p>
There is a bug in Sui 8192 that causes the wrong image to display for the NFT.
If you are experiencing this problem you can fix the NFT here.
</p>
<p class="center ">
<button class="select-games primary-button">
Select Games To Fix
</button>
<button class="cancel-select-games secondary-button hidden" style="margin-right: 12px;">
Cancel
</button>
<button id="fix-games" class="primary-button hidden">
Fix Selected Games
</button>
</p>
</div>
<div class="panel-section show-contest">
<div class="games-title">
Contest Prizes
</div>
<div>
<p>
Every day one contest will run starting and ending at 3:01pm UTC.
</p>
<p>
SUI prizes will be awarded to the 10 highest scoring games on the leaderboard
at the end of each day's contest. To be eligible, games must be started
after the daily contest has begun. The score at the end of the contest
will be recorded even if the game has not ended.
</p>
<p>
The following prizes will be sent to winning wallets within three
working days of the end of each contest.
</p>
<ul class="prizes">
<li><b>1st Place:</b> 60 Sui</li>
<li><b>2nd Place:</b> 30 Sui</li>
<li><b>3rd & 4th Place:</b> 15 Sui</li>
<li><b>5th - 7th Place:</b> 10 Sui</li>
<li><b>8th - 10th Place:</b>5 Sui</li>
</ul>
</div>
</div>
<div class="panel-section show-contest">
<div class="games-title">
Contest Rules
</div>
<div>
<p>The following are the rules of the SUI 8192 daily contest, sponsored by the Sui Foundation:</p>
<ul>
<li>All games must be created after <b>3:01pm UTC</b></li>
<li>Leaderboard will be locked and daily contest will end at <b>3:01pm UTC</b> each day</li>
<li>Valid games will be displayed in your "Your Contest Games" section for each contest</li>
<li>Each individual can only win a prize for one game, their highest scoring game of the daily competition</li>
<li>Detailed rules can be found on the <a href='https://ethoswallet.xyz/blog/post/new-sui-8192-competition' target='_blank'>Ethos Blog</a></li>
<li>Read the <a href='https://ethoswallet.xyz/blog/post/sui8192-daily-competition-faqs' target='_blank'>FAQ</a> for common questions.</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="game" class="">
<div class="content">
<div class="instructions wide">
Use the ←→↑↓ keys to combine same tiles together.<br/>
Achieve a high score and unlock the ultimate tile!
</div>
<div class="instructions narrow" style="padding: 18px 0 6px 0;">
Swipe the board ←→↑↓ to combine same tiles.
</div>
<div id="game-links-area" class='signed-in'>
<div>
<div class="score-box">
<div id="score-diff" class="stationary"></div>
<div class='score-title'>
<svg width="12" height="12" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.34387 13.8984L13.2814 16.3984C13.7892 16.7188 14.4142 16.2422 14.2657 15.6563L13.1251 11.1719C13.0943 11.0476 13.0992 10.9171 13.1393 10.7955C13.1793 10.6738 13.253 10.566 13.3517 10.4844L16.8829 7.53907C17.3439 7.15625 17.1095 6.38282 16.5079 6.34375L11.8986 6.04688C11.7728 6.03956 11.6519 5.99577 11.5506 5.92085C11.4493 5.84593 11.372 5.74312 11.3282 5.625L9.60949 1.29688C9.564 1.1718 9.48111 1.06376 9.3721 0.987407C9.26308 0.911057 9.13321 0.870102 9.00012 0.870102C8.86702 0.870102 8.73715 0.911057 8.62814 0.987407C8.51912 1.06376 8.43624 1.1718 8.39074 1.29688L6.67199 5.625C6.62819 5.74312 6.55092 5.84593 6.44964 5.92085C6.34836 5.99577 6.22745 6.03956 6.10168 6.04688L1.49231 6.34375C0.890744 6.38282 0.656369 7.15625 1.11731 7.53907L4.64856 10.4844C4.74726 10.566 4.82089 10.6738 4.86097 10.7955C4.90106 10.9171 4.90596 11.0476 4.87512 11.1719L3.82043 15.3281C3.64074 16.0313 4.39074 16.6016 4.99231 16.2188L8.65637 13.8984C8.75912 13.8331 8.87836 13.7984 9.00012 13.7984C9.12188 13.7984 9.24112 13.8331 9.34387 13.8984V13.8984Z" stroke="#D1A679" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Score
</div>
<div id="score">
---
</div>
</div>
<div class="score-box">
<div class='score-title'>
<svg width="13" height="12" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4.875 4.375V8.67969C4.875 11.7812 7.35937 14.3516 10.4609 14.375C11.2029 14.3802 11.9386 14.2385 12.6255 13.9581C13.3125 13.6777 13.9372 13.2642 14.4637 12.7413C14.9902 12.2185 15.408 11.5967 15.6931 10.9117C15.9782 10.2266 16.125 9.49198 16.125 8.75V4.375C16.125 4.20924 16.0592 4.05027 15.9419 3.93306C15.8247 3.81585 15.6658 3.75 15.5 3.75H5.5C5.33424 3.75 5.17527 3.81585 5.05806 3.93306C4.94085 4.05027 4.875 4.20924 4.875 4.375Z" stroke="#D1A679" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M8 17.5H13" stroke="#D1A679" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5 14.375V17.5" stroke="#D1A679" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.9844 10H16.75C17.413 10 18.0489 9.73661 18.5178 9.26777C18.9866 8.79893 19.25 8.16304 19.25 7.5V6.25C19.25 6.08424 19.1842 5.92527 19.0669 5.80806C18.9497 5.69085 18.7908 5.625 18.625 5.625H16.125" stroke="#D1A679" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M5.03125 10H4.24219C3.57915 10 2.94326 9.73661 2.47442 9.26777C2.00558 8.79893 1.74219 8.16304 1.74219 7.5V6.25C1.74219 6.08424 1.80804 5.92527 1.92525 5.80806C2.04246 5.69085 2.20143 5.625 2.36719 5.625H4.86719" stroke="#D1A679" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Best
</div>
<div id="best">
---
</div>
</div>
</div>
<p class="hidden">
<button id="submit-game-to-leaderboard" class="secondary-button">
Save To Leaderboard
</button>
</p>
</div>
<div id="error-game-over" class="error hidden">
<div class="subtitle">Game Over</div>
<div class="stats">
<div>
<div class="subsubtitle">Score</div>
<div id='score-result' class="score-result tile-result color1"></div>
</div>
<div>
<div class="subsubtitle">Top Tile</div>
<div id='top-tile' class="tile-result">
<div id='top-tile-value'></div>
<div id='top-tile-name'></div>
</div>
</div>
</div>
<br/>
<div style="text-align: center;">
<button class="secondary-button contest-leaderboard-button during-contest">
View Leaderboard
</button>
<button class="secondary-button leaderboard-button after-contest">
View Leaderboard
</button>
</div>
</div>
<div id="error-unknown" class="error hidden">
<div class="close-error">
<div>✕</div>
</div>
<p>There was an error processing your transaction.</p>
<p id="error-unknown-message"></p>
<p>
Please ensure you are logged into your
<br/>
wallet and have a proper balance.
</p>
<p>
Please contact support@ethoswallet.xyz for help.
</p>
</div>
<div id="error-gas" class="error hidden">
<div class="close-error">
<div>✕</div>
</div>
<p>An unknown error occurred.</p>
<p>
Please check to ensure you have enough gas,<br/>
refresh this page, and try again.
</p>
<p>
Your game is safely stored on-chain.
</p>
</div>
<div id="error-network" class="error hidden">
<div class="close-error">
<div>✕</div>
</div>
<p>You're on the wrong network.</p>
<p>
Please change to the
<span id="network">TestNet</span>
network in your wallet.
</p>
<p>
Then refresh this page.
</p>
</div>
<div id="board" style="touch-action: none;">
<div id="queue"></div>
<div class="row-1 row">
<div class="tile-wrapper"><div class="tile"></div></div>
<div class="tile-wrapper"><div class="tile"></div></div>
<div class="tile-wrapper"><div class="tile"></div></div>
<div class="tile-wrapper"><div class="tile"></div></div>
</div>
<div class="row-2 row">
<div class="tile-wrapper"><div class="tile"></div></div>
<div class="tile-wrapper"><div class="tile"></div></div>
<div class="tile-wrapper"><div class="tile"></div></div>
<div class="tile-wrapper"><div class="tile"></div></div>
</div>
<div class="row-3 row">
<div class="tile-wrapper"><div class="tile"></div></div>
<div class="tile-wrapper"><div class="tile"></div></div>
<div class="tile-wrapper"><div class="tile"></div></div>
<div class="tile-wrapper"><div class="tile"></div></div>
</div>
<div class="row-4 row">
<div class="tile-wrapper"><div class="tile"></div></div>
<div class="tile-wrapper"><div class="tile"></div></div>
<div class="tile-wrapper"><div class="tile"></div></div>
<div class="tile-wrapper"><div class="tile"></div></div>
</div>
</div>
<div id="transactions" class="hidden">
<div class="transactions-header">Transactions</div>
<div id="transactions-list"></div>
</div>
<div class="footer instructions">
<p>
SUI 8192 is a completely on-chain and extra challenging version of
the popular 2048 game built on
the <a href='https://sui.io' target="_blank">Sui</a> blockchain
by <a href='https://ethoswallet.xyz' target="_blank">Ethos</a>.
</p>
<p class="highlight">
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M16.4032 12.6523C17.353 12.1487 18 11.1499 18 10C18 8.85007 17.353 7.85126 16.4032 7.34771C16.7188 6.32002 16.47 5.15625 15.6569 4.34312C14.8437 3.53 13.68 3.28122 12.6523 3.59679C12.1487 2.64698 11.1499 2 10 2C8.85007 2 7.85125 2.64699 7.3477 3.59681C6.32002 3.28126 5.15627 3.53004 4.34315 4.34316C3.53003 5.15628 3.28125 6.32003 3.5968 7.34771C2.64699 7.85126 2 8.85007 2 10C2 11.1499 2.64699 12.1487 3.59681 12.6523C3.28124 13.68 3.53001 14.8437 4.34314 15.6569C5.15627 16.47 6.32003 16.7188 7.34771 16.4032C7.85126 17.353 8.85007 18 10 18C11.1499 18 12.1488 17.353 12.6523 16.4032C13.68 16.7187 14.8437 16.47 15.6569 15.6568C16.47 14.8437 16.7188 13.68 16.4032 12.6523ZM13.8566 8.19113C14.1002 7.85614 14.0261 7.38708 13.6911 7.14345C13.3561 6.89982 12.8871 6.97388 12.6434 7.30887L9.15969 12.099L7.28033 10.2197C6.98744 9.92678 6.51256 9.92678 6.21967 10.2197C5.92678 10.5126 5.92678 10.9874 6.21967 11.2803L8.71967 13.7803C8.87477 13.9354 9.08999 14.0149 9.30867 13.9977C9.52734 13.9805 9.72754 13.8685 9.85655 13.6911L13.8566 8.19113Z" fill="#45B7C8"/>
</svg>
Your achievements are<br class='narrow'/> completely verifiable on-chain!
</p>
</div>
</div>
</div>
<div class="for-developers">
<div>
<div class="subsubtitle text-center">
Open Source
</div>
<p>
SUI 8192 was build by <a href='https://ethoswallet.xyz' target="_blank">Ethos</a> and is open source.
<br />
You can find the code on <a href='https://github.com/EthosWallet/Sui8192' target="_blank">GitHub</a>.
</p>
<br/>
<div class="subsubtitle text-center">
For Developers
</div>
<p>
<a href='https://ethoswallet.xyz' target="_blank">Ethos</a> makes it incredibly easy to build and launch any dApp.
You can support any user (with or without a wallet) in minutes.
We are currently working with customers to beta test our APIs.
</p>
<p>
<a href='https://ethoswallet.xyz/dev' target="_blank">Ethos For Developers</a>
</p>
<br/>
<div class="subsubtitle text-center">
Contest Rules
</div>
<p>
Please find details on Sui 8192 contest rules in our <a href='https://sui8192.ethoswallet.xyz/terms-and-conditions.html' target="_blank">Terms and Conditions</a>
</p>
</div>
</div>
</div>
<script src="build/index.js"></script>
</body>
</html>