2048-demo-staging/index.html at main · codeyam-ai/2048-demo-staging · GitHub

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
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>2048</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>
  <div class="container">
    <div class="heading">
      <h1 class="title" id="2048-title">2048</h1>
      <div class="scores-container">
        <div class="score-container">0</div>
        <div class="best-container">0</div>
      </div>
    </div>

    <div class="mobile-warning">
      <p>This demo is intended for a desktop or laptop screen.</p>
      <p>It will not work properly on mobile or tablet screens.</p>
      <p>If you are already on a larger screen you may need to increase the size of the window.</p>
    </div>

    <div class="above-game">
      <p class="game-intro">Join the numbers and get to the <strong>2048 tile!</strong></p>
      <a class="restart-button" id='restart-button' style="display: none;">Reset Game</a>
      <span id='start-loader' style="display: inline-block; margin-left: 60px;">
        <svg width="42" height="42" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="4" cy="12" r="3"><animate id="a" begin="0;b.end-0.25s" attributeName="r" dur="0.75s" values="3;.2;3"/></circle><circle cx="12" cy="12" r="3"><animate begin="a.end-0.6s" attributeName="r" dur="0.75s" values="3;.2;3"/></circle><circle cx="20" cy="12" r="3"><animate id="b" begin="a.end-0.45s" attributeName="r" dur="0.75s" values="3;.2;3"/></circle></svg>
      </span>
      <span id="ethos-start" style='display: none;'></span>
    </div>
    <div id="loading-messages"></div>

    <div id="email-message" style='display: none;'>
      <div style="padding-top: 48px;">
        An email has been sent to you that will allow you to log in.
      </div>
      <div style="padding-top: 24px;">
        If you don't receive the email please check your spam folder or contact us: <a href='mailto:support@ethoswallet.xyz'>support@ethoswallet.xyz</a>
      </div>
    </div>

    <div id='game' style="display: none;">
      <div class="game-container">
        <div class="left-sidebar">
          <div style="font-weight: bold;">
            Ethos 2048: An NFT Game
          </div>
          <div style="padding: 12px 0;">
            Combine the numbers to reveal the 16 tile or above and claim your free NFT trophies as you progress!
          </div>
          <div style="margin-top: 24px;">
            <div style="font-weight: bold;">How To Play</div>
            <div style="padding: 12px 0;">
              Use your <strong>arrow keys</strong> to move the tiles. When two tiles with the same number touch, they <strong>merge into one!</strong>
            </div>
          </div>
        </div>
        <div class="right-sidebar">
          <div id='loader' style="width: 300px; display: flex; justify-content: center; margin-top: 30px">
            <svg width="48" height="48" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><circle cx="4" cy="12" r="3"><animate id="a" begin="0;b.end-0.25s" attributeName="r" dur="0.75s" values="3;.2;3"/></circle><circle cx="12" cy="12" r="3"><animate begin="a.end-0.6s" attributeName="r" dur="0.75s" values="3;.2;3"/></circle><circle cx="20" cy="12" r="3"><animate id="b" begin="a.end-0.45s" attributeName="r" dur="0.75s" values="3;.2;3"/></circle></svg>
          </div>
          <div id="badge" style="display: none;">
            <div style="padding-bottom: 45px">
              <h2>You've won a trophy!</h2>
              <img id='badge-image' src="https://arweave.net/-vPjkYD6pAxwyxwl6EmDbxoK0Og7wfNEc85pM2fzscU" width=300 height=300 />
              <div id="badge-description" style="display: none;">
                This player has unlocked the 16 tile on Ethos 2048. They are a Casual Amateur!
              </div>
              <div style="font-size: smaller; color: #666; padding: 6px 0;">
                Your trophy is an NFT.
                <br/>
                You can claim it for free!
              </div>
              <div style="margin-top: 12px; display: flex; justify-content: center;">
                <button id="claim-button" class="claim-button" style="float: none;">Claim!</button>
              </div>
            </div>
          </div>
          <div id="claimed-badge" style="display: none;">
            <h3>Your Top Trophy (NFT)</h3>
            <img id='claimed-badge-image' src="https://arweave.net/-vPjkYD6pAxwyxwl6EmDbxoK0Og7wfNEc85pM2fzscU" width=300 height=300 />
            <div style="margin-top: 12px;">
              View in your <a target='_blank' id='wallet-explorer-link' href="https://ethoswallet.xyz/dashboard">Ethos Wallet Explorer</a>!
            </div>
          </div>
          <div style="width: 300px; margin-top: 24px; text-align: center;">
            <a id="logout" style="text-decoration: underline; display: none;">Log Out</a>
          </div>
        </div>

        <div class="game-message">
          <p></p>
          <div class="lower">
            <a class="keep-playing-button">Keep going</a>
            <a class="retry-button">Try again</a>
          </div>
        </div>

        <div class="grid-container">
          <div class="grid-row">
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
          </div>
          <div class="grid-row">
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
          </div>
          <div class="grid-row">
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
          </div>
          <div class="grid-row">
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
            <div class="grid-cell"></div>
          </div>
        </div>

        <div class="tile-container">

        </div>
      </div>
    </div>
  </div>

  <script src="js/bundle.js"></script>
  <script src="js/bind_polyfill.js"></script>
  <script src="js/classlist_polyfill.js"></script>
  <script src="js/animframe_polyfill.js"></script>
  <script src="js/keyboard_input_manager.js"></script>
  <script src="js/html_actuator.js"></script>
  <script src="js/grid.js"></script>
  <script src="js/tile.js"></script>
  <script src="js/local_storage_manager.js"></script>
  <script src="js/game_manager.js"></script>
  <script src="js/application.js"></script>
</body>
</html>