cade-acc/index.html at main · levithefirst/cade-acc · 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
<!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">
<title>CADE OPS — Dash. Nerf. Dominate.</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Bungee&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/polish.css">
<link rel="stylesheet" href="css/burst.css">
<link rel="stylesheet" href="css/identity.css">
</head>
<body>
<div id="stage"><canvas id="cv"></canvas></div>

<button id="dashBtn" aria-label="Ape Dash">
  <svg viewBox="0 0 24 24" class="icon-svg" aria-hidden="true"><path d="M13 2 4 14h6l-1 8 9-12h-6l1-8z"/></svg>
</button>

<button id="burstBtn" aria-label="Burst" type="button">BURST</button>

<div class="screen" id="scIdentity">
  <div class="identity-mark">CADE OPS</div>
  <div class="eyebrow">WELCOME TO CADE OPS</div>
  <div class="identity-title">CHOOSE YOUR CALLSIGN</div>
  <p class="identity-copy">This becomes your permanent CADE OPS player identity.</p>
  <form id="identityForm" autocomplete="off" novalidate>
    <label class="sr-only" for="identityInput">Choose your callsign</label>
    <input id="identityInput" class="identity-input" minlength="10" maxlength="16" placeholder="DEGEN-2832" spellcheck="false" autocapitalize="characters" required>
    <div class="identity-hint" id="identityHint">10–16 characters · letters, numbers, spaces, _ or -</div>
    <div class="identity-lock">YOUR CALLSIGN CAN'T BE CHANGED.</div>
    <button class="btn identity-submit" type="submit">CONFIRM CALLSIGN</button>
    <div class="identity-status" id="identityStatus" aria-live="polite"></div>
  </form>
</div>

<div class="screen" id="scTitle">
  <canvas class="brandmark brandmark-title" id="markTitle"></canvas>
  <div class="tagline">CadeMarket presents</div>
  <div class="spotlight-beam" aria-hidden="true"></div>
  <h1 class="wordmark"><span class="a">CADE</span><br><span class="b" data-text="OPS">OPS</span></h1>
  <div class="tagline tagline-sharp">Dash. Nerf. Dominate.</div>
  <canvas id="roster-showcase" aria-label="The six Cade Ops characters"></canvas>
  <button class="btn" id="btnStart">Let's Cade</button>
  <div class="row">
    <div class="hs" id="tHigh"></div>
    <button class="btn ghost sound-toggle icon-label" id="btnSound">
      <svg viewBox="0 0 24 24" class="icon-svg" id="soundIconSvg" aria-hidden="true"><path d="M4 9v6h4l5 4V5L8 9H4z"/><path d="M16 9a4 4 0 0 1 0 6"/></svg>
      <span id="soundLabel">Sound On</span>
    </button>
    <button class="btn ghost theme-toggle" id="btnTheme" aria-label="Toggle theme">
      <svg viewBox="0 0 24 24" class="icon-svg" id="themeIconTitle" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg>
    </button>
    <button class="btn ghost" id="btnLeaderboard">🏆 Leaderboard</button>
    <button class="btn ghost" id="btnTitleNerfs">Meet The Nerfs</button>
  </div>
</div>

<div class="screen" id="scHowToPlay">
  <div class="eyebrow">Cade Ops</div>
  <div class="rank">HOW TO PLAY</div>
  <p class="rules">Move with <span class="k">mouse</span> <span class="k">WASD</span> <span class="k">arrows</span> or <span class="k">drag</span>.<br><span class="k">SPACE</span> = <b>BURST</b>. <span class="k">⚡ button</span> = <b>APE DASH</b>. Dash through a team leader to <b>nerf</b> them.<br>You've got <b>6 lives</b>. Touching a team or a rug without dashing <span class="c-danger">costs a life</span>. Grazing builds your <b>DEGEN MULTIPLIER</b>.<br>Green pumps pay out multiplied — <span class="c-gold">3 in a row fills your energy bar</span> for a speed boost.<br><b>BURST</b> charges from Pumps and close calls. Use it when the arena gets crowded.<br><b>Nerf as many teams as you can before the buzzer.</b></p>
  <div class="row"><button class="btn" id="btnHowToPlayBack">Meet The 6 Nerfs</button></div>
</div>

<div class="screen nerfs-screen" id="scNerfs">
  <div class="eyebrow">Cade Ops</div>
  <div class="rank nerfs-heading">THE 6 NERFS</div>
  <div class="ranksub nerfs-subtitle">They are hunting you too.</div>
  <div class="nerfs-grid" id="nerfsGrid"></div>
  <div class="row nerfs-actions"><button class="btn ghost" id="btnNerfsBack">Back</button><button class="btn" id="btnNerfsStart">Let's Cade</button></div>
</div>

<div class="screen" id="scLeaderboard">
  <canvas class="brandmark brandmark-end" id="markLeaderboard"></canvas>
  <div class="eyebrow">Cade Ops</div>
  <div class="rank">GLOBAL LEADERBOARD</div>
  <div class="ranksub" id="lbStatus">Loading...</div>
  <div class="lb-list glass" id="lbList"></div>
  <div class="row"><button class="btn" id="btnLbBack">Back</button></div>
</div>

<div class="screen" id="scEnd">
  <canvas class="brandmark brandmark-end" id="markEnd"></canvas>
  <div class="eyebrow">Cade Ops</div>
  <div class="verdict" id="eVerdict">WIPED</div>
  <div><div class="scorelabel">Final bag</div><div class="bigscore" id="eScore" data-text="0">0</div></div>
  <div class="rank" id="eRank">GHOSTED</div>
  <div class="ranksub" id="eRoast"></div>
  <div class="stats stats-primary" id="eStatsPrimary"></div>
  <div class="stats stats-secondary" id="eStatsSecondary"></div>
  <div class="hs" id="eHigh"></div>
  <div class="hs" id="eGlobalRank"></div>
  <div class="name-group name-group-results">
    <div class="player-name-locked-label">CALLSIGN</div>
    <div class="player-name-locked" id="playerNameLocked">DEGEN</div>
    <div class="name-hint">Locked to this CADE OPS player</div>
  </div>
  <div class="tweetbox" id="eTweet"></div>
  <div class="row"><button class="btn" id="btnAgain">Run It Back</button></div>
  <div class="row"><button class="btn ghost wide" id="btnEndLeaderboard">🏆 Leaderboard</button><button class="btn ghost wide" id="btnEndHome">Home</button></div>
  <div class="row"><button class="btn x-share" id="btnShareX">𝕏 Share on X</button></div>
  <div class="row">
    <button class="btn ghost wide" id="btnCopy">Copy Tweet</button>
    <button class="btn ghost wide" id="btnCard">Save Image</button>
    <button class="btn ghost theme-toggle" id="btnThemeEnd" aria-label="Toggle theme"><svg viewBox="0 0 24 24" class="icon-svg" id="themeIconEnd" aria-hidden="true"><path d="M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z"/></svg></button>
  </div>
</div>

<script type="module" src="js/main.js"></script>
<script type="module" src="js/combat-ai.js"></script>
<script type="module" src="js/nerfs-page.js"></script>
<script type="module" src="js/burst.js"></script>
<script type="module" src="js/pause.js"></script>
</body>
</html>