index.html

<!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>