rot-protocol/index.html at master · Noah-zipit/rot-protocol · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
    <meta name="description" content="ROT PROTOCOL — a pixel-art first-person zombie shooter. Containment failed. Survive the waves." />
    <meta name="theme-color" content="#0b1210" />
    <meta property="og:title" content="ROT PROTOCOL — Pixel Zombie FPS" />
    <meta property="og:description" content="ROT PROTOCOL — a pixel-art first-person zombie shooter. Containment failed. Survive the waves." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://noah-zipit.github.io/rot-protocol/" />
    <link rel="canonical" href="https://noah-zipit.github.io/rot-protocol/" />
    <meta name="twitter:card" content="summary" />
    <meta name="twitter:title" content="ROT PROTOCOL — Pixel Zombie FPS" />
    <meta name="twitter:description" content="ROT PROTOCOL — a pixel-art first-person zombie shooter. Containment failed. Survive the waves." />
    <link rel="icon" type="image/svg+xml" href="./favicon.svg" />
    <title>ROT PROTOCOL — Pixel Zombie FPS</title>
  </head>
  <body>
    <div id="app">
      <canvas id="game-canvas" role="img" aria-label="ROT PROTOCOL game canvas"></canvas>
      <div id="vignette"></div>

      <!-- HUD -->
      <div id="hud" class="hidden">
        <div id="boss-bars"></div>
        <div id="crosshair"><span class="ch-dot"></span><span class="ch-t"></span><span class="ch-b"></span><span class="ch-l"></span><span class="ch-r"></span></div>
        <div id="hitmarker"></div>
        <div id="health-wrap"><div id="health-bar"></div><span id="health-num">100</span></div>
        <div id="ammo-wrap"><span id="weapon-name">PISTOL</span><span id="ammo">12 / INF</span></div>
        <div id="wave-wrap"><span id="wave-label">STANDBY</span><span id="zombies-left">HOSTILES 0</span></div>
        <div id="score-wrap"><span id="score">SCORE 0</span><span id="kills">KILLS 0</span></div>
        <div id="compass" class="hidden"><div id="compass-strip"></div><div id="compass-caret"></div></div>
        <div id="loot-bar" class="hidden"><span id="loot-scrap">SCRAP 0</span><span id="loot-meds">MEDS 0</span><span id="loot-parts">PARTS 0</span></div>
        <div id="exfil-status" class="hidden"></div>
        <div id="interact-prompt" class="hidden"></div>
        <div id="edge-warning" class="hidden">TURN BACK — EDGE OF DEAD ZONE</div>
        <div id="banner" class="hidden"></div>
        <div id="damage-vignette"></div>
        <div id="slide-indicator" class="hidden">SLIDING</div>
      </div>
      <div id="popups"></div>

      <!-- Touch controls -->
      <div id="touch-ui" class="hidden">
        <div id="joystick"><div id="joy-knob"></div></div>
        <button id="btn-fire" class="tbtn tbtn-fire">FIRE</button>
        <button id="btn-slide" class="tbtn">SLIDE</button>
        <button id="btn-jump" class="tbtn">JUMP</button>
        <button id="btn-reload" class="tbtn" aria-label="Reload">RLD</button>
        <button id="btn-swap" class="tbtn" aria-label="Swap weapon">1/2</button>
        <button id="btn-melee" class="tbtn">MELEE</button>
        <button id="btn-interact" class="tbtn tbtn-exp">USE</button>
        <button id="btn-medkit" class="tbtn tbtn-exp" aria-label="Use medkit">MED</button>
        <button id="btn-sprint" class="tbtn">SPRINT</button>
        <button id="btn-pause-t" class="tbtn tbtn-small" aria-label="Pause">II</button>
        <button id="btn-mute" class="tbtn tbtn-small" aria-label="Toggle sound">SND</button>
      </div>

      <!-- Title screen -->
      <div id="screen-title" class="screen hidden">
        <h1 class="game-title">ROT<br />PROTOCOL</h1>
        <p class="subtitle">CONTAINMENT FAILED. SURVIVE THE WAVES.</p>
        <div id="map-select"></div>
        <div id="controls-list" class="controls-hint hidden">
          <span>WASD MOVE</span><span>MOUSE AIM</span><span>CLICK SHOOT</span><span>SHIFT SPRINT</span><span>C SLIDE</span><span>R RELOAD</span><span>1/2 WEAPONS</span><span>V MELEE</span><span>M MUTE</span><span>ESC PAUSE</span>
        </div>
        <p id="touch-note" class="hidden">LEFT STICK MOVE · DRAG RIGHT SIDE AIM · FIRE BUTTON SHOOTS</p>
        <div id="mode-row">
          <button id="btn-mode-waves" class="btn">WAVE PROTOCOL</button>
          <button id="btn-mode-expedition" class="btn btn-exp">EXPEDITION: DEAD ZONE</button>
        </div>
        <p class="mode-hint">WAVES: SURVIVE 10 · EXPEDITION: LOOT &amp; EXFIL — DEATH LOSES YOUR CARRY</p>
        <button id="btn-stash" class="btn btn-dim">STASH &amp; UPGRADES</button>
        <p class="credits">ZOMBIES + MONSTERS: QUATERNIUS (CC-BY/CC0) · GRAVEYARD: KENNEY (CC0) · CITY: QUATERNIUS / KENNEY / KAY LOUSBERG (CC0) · GUNS: J-TOASTIE (CC-BY) · AUDIO: PROCEDURAL</p>
      </div>

      <!-- Loadout screen -->
      <div id="screen-loadout" class="screen hidden">
        <h2>PICK YOUR LOADOUT</h2>
        <p class="subtitle">CHOOSE 2 PRIMARIES · MELEE ALWAYS READY</p>
        <div id="loadout-grid"></div>
        <button id="btn-deploy" class="btn" disabled>DEPLOY</button>
      </div>

      <!-- Stash / upgrades screen -->
      <div id="screen-stash" class="screen hidden">
        <h2>STASH</h2>
        <p class="subtitle">BANKED LOOT · SPEND BETWEEN RUNS · SURVIVES DEATH</p>
        <div id="stash-stats" class="stats"></div>
        <div id="upgrade-list"></div>
        <button id="btn-stash-back" class="btn btn-dim">BACK</button>
      </div>

      <!-- Pause screen -->
      <div id="screen-pause" class="screen hidden">
        <h2>PAUSED</h2>
        <button id="btn-resume" class="btn">RESUME</button>
        <div id="quality-row">
          <span class="q-label">QUALITY</span>
          <button class="qbtn" data-q="auto" aria-pressed="true">AUTO</button>
          <button class="qbtn" data-q="high" aria-pressed="false">HIGH</button>
          <button class="qbtn" data-q="medium" aria-pressed="false">MED</button>
          <button class="qbtn" data-q="low" aria-pressed="false">LOW</button>
        </div>
        <button id="btn-quit" class="btn btn-dim">ABANDON RUN</button>
      </div>

      <!-- Game over screen -->
      <div id="screen-over" class="screen hidden">
        <h2 class="red" id="over-title">YOU DIED</h2>
        <p class="subtitle" id="over-sub">THE ROT TAKES ANOTHER</p>
        <div id="final-stats" class="stats"></div>
        <button id="btn-restart" class="btn">TRY AGAIN</button>
      </div>

      <!-- Victory screen -->
      <div id="screen-victory" class="screen hidden">
        <h2 class="green" id="victory-title">CONTAINMENT RESTORED</h2>
        <p class="subtitle" id="victory-sub">ALL 10 WAVES SURVIVED</p>
        <div id="victory-stats" class="stats"></div>
        <button id="btn-again" class="btn">PLAY AGAIN</button>
      </div>

      <!-- Rotate overlay (touch portrait only, wired by UI.checkOrientation) -->
      <div id="rotate-overlay" class="hidden">
        <div class="rotate-box">
          <div class="rotate-icon"></div>
          <p class="rotate-title">ROTATE YOUR DEVICE</p>
          <p class="rotate-sub">ROT PROTOCOL PLAYS IN LANDSCAPE</p>
        </div>
      </div>

      <!-- Pointer-lock prompt (desktop only, wired by UI.setLockOverlay) -->
      <div id="lock-overlay" class="hidden">
        <button class="lock-box" id="lock-box">
          <p class="lock-title">CLICK TO CAPTURE MOUSE</p>
          <p class="lock-sub">AIM + FIRE NEED POINTER LOCK</p>
        </button>
      </div>

      <div id="screen-loading" class="screen"><p id="loading-label">LOADING 0%</p></div>
    </div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>