forked from codeyam-ai/Sui8192
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
459 lines (445 loc) · 28.7 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
<!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>
<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="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="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 id="get-started-message" class="message text-center hidden">
<div class='subtitle'>Welcome!</div>
<div>
To play Sui 8192 please sign
<br/>
in or connect your wallet!
</div>
<br/>
<button id='sign-in'>
Get Started
</button>
</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://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>
</div>
<div class="header">
<div class="header-title">
SUI <span>8192</span>
</div>
<div class="header-buttons wide">
<div class="play-button header-button selected">
Play
</div>
<div class="leaderboard-button header-button">
Leaderboard
</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-i 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 DevNet
<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 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="leaderboard-button header-button">
Leaderboard
</div>
</div>
<div id="leaderboard" class="hidden">
<div class="vertical-container">
<div class="content">
<div class="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 class="split-panel">
<div class="panel">
<div class="leader-title">
Leaderboard
<span class="small">(click an item for details)</span>
</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="games-title">
Your Games
<button class="new-game">+ New Game</button>
</div>
<div id="signed-in" class="signed-in">
<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>
</div>
</div>
<div id="game" class="">
<div class="content">
<div class="instructions">
Use the ←→↑↓ keys to combine same tiles together.<br/>
Achieve a high score and unlock the ultimate tile!
</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/>
<button class="leaderboard-button secondary-button">
View Leaderboard
</button>
</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 [email protected] for help.
</p>
</div>
<div id="error-gas" class="error hidden">
<div class="close-error">
<div>✕</div>
</div>
<p>You do not have enough Sui to complete this move.</p>
<p>
Please request more at the
<a href="https://discord.com/channels/916379725201563759/971488439931392130" target="_blank">
devnet faucet
</a>.
</p>
<p>
Once you have received more Sui, please refresh this page.
</p>
</div>
<div id="board">
<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 is open source.<br class='narrow'/> 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>
</div>
</div>
</div>
<script src="build/index.js"></script>
</body>
</html>