skifree-web/index.html at main · scottmccarrison/skifree-web · 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
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, viewport-fit=cover" />
  <meta name="screen-orientation" content="portrait" />
  <meta name="theme-color" content="#e8f4ff" />
  <title>Ski Free</title>
  <link rel="stylesheet" href="css/style.css" />
</head>
<body>
  <canvas id="game"></canvas>

  <button id="title-button" type="button" title="end run and view leaderboard">SKI FREE</button>

  <div id="top-right">
    <input id="name-input" type="text" maxlength="4" placeholder="initials" autocomplete="off" />
    <button id="help-btn" type="button" title="report a bug or suggestion">?</button>
  </div>

  <div id="feedback-modal" class="hidden" role="dialog" aria-modal="true">
    <div class="fb-card">
      <div class="fb-title">what's new</div>
      <div id="changelog-body"></div>
      <div class="fb-divider"></div>
      <div class="fb-title">send feedback</div>
      <textarea id="fb-text" maxlength="4000" rows="5" placeholder="bug? idea? what happened?"></textarea>
      <div id="fb-status"></div>
      <div class="fb-actions">
        <button id="fb-cancel" type="button">cancel</button>
        <button id="fb-send" type="button">send</button>
      </div>
    </div>
  </div>

  <div id="mp-modal" class="hidden" role="dialog" aria-modal="true" aria-labelledby="mp-title">
    <div class="fb-card mp-card">
      <div class="fb-title" id="mp-title">Multiplayer</div>

      <div id="mp-roster-wrap" class="hidden">
        <div class="mp-roster-header">
          <span id="mp-roster-count">0/10</span> players
        </div>
        <div id="mp-roster" class="mp-roster"></div>
      </div>

      <div id="mp-code-row" class="hidden">
        <div class="mp-code">CODE: <span id="mp-code-display"></span></div>
      </div>

      <div id="mp-status">&nbsp;</div>
      <button id="mp-ready" class="mp-btn hidden" disabled>I'm ready</button>

      <div id="mp-pre-join">
        <button id="mp-host" class="mp-btn">Host a run</button>
        <div class="mp-divider">- or -</div>
        <div class="mp-join-row">
          <input id="mp-code-input" maxlength="4" placeholder="CODE" autocapitalize="characters" autocomplete="off" />
          <button id="mp-join-go" class="mp-btn">Join</button>
        </div>
      </div>

      <button id="mp-cancel" class="mp-btn mp-btn-secondary">Cancel</button>
    </div>
  </div>

  <div id="disconnect-toast" class="disconnect-toast" hidden></div>

  <div id="chat-bar" class="chat-bar" hidden></div>

  <div id="touch-zones" aria-hidden="true">
    <div class="tzone" data-dir="left"></div>
    <div class="tzone" data-dir="right"></div>
  </div>

  <div id="rotate-prompt">
    <div class="rotate-icon">&#x1F4F1;</div>
    <div>Rotate your device to portrait</div>
  </div>

  <script type="module" src="js/main.js"></script>
</body>
</html>