Made of little things.

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Black Site</title>
  </head>
  <body>

<canvas id="game"></canvas>

<div id="menu" class="screen">
  <div class="col">
    <h1>BLACK<br><span>SITE</span></h1>
    <div class="sub">TACTICAL EXTRACTION</div>
    <div class="info" id="bank" style="color:#7fe36a;font-size:16px"></div>
    <div class="info" id="menuChar"></div>
    <div class="info" id="menuMap"></div>
    <div class="info" id="menuLoadout"></div>
    <div class="info" id="menuCampaign" style="color:var(--acc)"></div>
    <div class="diff">
      <div class="difflbl">DIFFICULTY  <b id="diffName"></b></div>
      <input type="range" id="diffSlider" min="0" max="2" step="1">
      <div class="diffends"><span>HARD</span><span>NORMAL</span><span>EASY</span></div>
      <div id="diffDesc"></div>
    </div>
    <div class="info" id="best" style="color:var(--gold)"></div>
    <button class="big" data-go="deploy">DEPLOY</button>
    <button class="big" data-go="campaign">CAMPAIGN</button>
    <button data-go="maps">SELECT MAP</button>
    <button data-go="character">CHARACTER</button>
    <button data-go="loadout">LOADOUT</button>
    <button data-go="shop">ARMORY</button>
    <div class="hint">
      <section class="help-panel" aria-labelledby="helpObjectiveHeading">
        <h3 id="helpObjectiveHeading">OBJECTIVE</h3>
        <p>You only see what's in your 100&deg; field of view. Reach the helipad, press <kbd>F</kbd> to call the helicopter, survive until it lands, then board it with <kbd>F</kbd>.</p>
      </section>
      <section class="help-panel" aria-labelledby="helpControlsHeading">
        <h3 id="helpControlsHeading">KEYBOARD &amp; MOUSE CONTROLS</h3>
        <div class="control-groups">
          <section class="control-group">
            <h4>MOVEMENT</h4>
            <dl>
              <div><dt><kbd>W</kbd> <kbd>A</kbd> <kbd>S</kbd> <kbd>D</kbd></dt><dd>Move</dd></div>
              <div><dt><kbd>SHIFT</kbd></dt><dd>Sprint</dd></div>
              <div><dt><kbd>MOUSE</kbd></dt><dd>Aim</dd></div>
            </dl>
          </section>
          <section class="control-group">
            <h4>COMBAT</h4>
            <dl>
              <div><dt><kbd>LEFT CLICK</kbd></dt><dd>Fire, throw or use the equipped item</dd></div>
              <div><dt><kbd>R</kbd></dt><dd>Reload</dd></div>
              <div><dt><kbd>Q</kbd></dt><dd>Knife (Cut Throat)</dd></div>
            </dl>
          </section>
          <section class="control-group">
            <h4>EQUIPMENT</h4>
            <dl>
              <div><dt><kbd>1</kbd></dt><dd>Primary weapon</dd></div>
              <div><dt><kbd>2</kbd></dt><dd>Secondary weapon</dd></div>
              <div><dt><kbd>3</kbd></dt><dd>Throwable</dd></div>
              <div><dt><kbd>4</kbd></dt><dd>Medical</dd></div>
            </dl>
          </section>
          <section class="control-group">
            <h4>ACTIONS &amp; MENUS</h4>
            <dl>
              <div><dt><kbd>F</kbd></dt><dd>Loot, call or board the helicopter</dd></div>
              <div><dt><kbd>I</kbd></dt><dd>Inventory</dd></div>
              <div><dt><kbd>P</kbd> / <kbd>ESC</kbd></dt><dd>Pause</dd></div>
            </dl>
          </section>
        </div>
      </section>
    </div>
  </div>
</div>

<div id="loadout" class="screen">
  <div class="lbar">
    <h2>LOADOUT</h2>
    <div class="btns"><button data-go="menu">BACK</button><button data-go="deploy" style="border-color:var(--acc)">DEPLOY</button></div>
  </div>
  <h3>PRIMARY</h3>
  <div class="lgrid" id="lPrimary"></div>
  <h3>SECONDARY</h3>
  <div class="lgrid" id="lSecondary"></div>
  <h3>THROWABLE</h3>
  <div class="lgrid" id="lThrow"></div>
</div>

<div id="campaign" class="screen">
  <div class="lbar">
    <h2>CAMPAIGN</h2>
    <div class="btns"><div class="funds">FUNDS HOLD <b id="campHold"></b></div><button data-go="menu">BACK</button></div>
  </div>
  <div class="info" style="position:relative;line-height:1.7">Fight through all five maps in order. Your weapons and items carry over from map to map, and health and armour are restored after each one.
    Kills and intel go into the funds hold (no time penalty in the campaign). Quitting or restarting a map partway through costs the hold $400. Clear all five to collect the hold plus a $3,000 bonus (scaled by difficulty). If you die, the campaign and its hold are lost.</div>
  <div class="info" id="campStatus" style="position:relative;color:var(--gold);margin-top:10px"></div>
  <div class="mgrid" id="campMaps"></div>
  <div class="campbtns"><button class="big" id="campContinue">CONTINUE CAMPAIGN</button><button id="campNew">NEW CAMPAIGN</button></div>
</div>

<div id="character" class="screen">
  <div class="lbar">
    <h2>CHARACTER</h2>
    <div class="btns"><button data-go="menu">BACK</button><button data-go="deploy" style="border-color:var(--acc)">DEPLOY</button></div>
  </div>
  <div class="info" style="position:relative">Pick who you deploy as. Each character has their own perks.</div>
  <div class="mgrid" id="charGrid"></div>
</div>

<div id="maps" class="screen">
  <div class="lbar">
    <h2>SELECT MAP</h2>
    <div class="btns"><button data-go="menu">BACK</button><button data-go="deploy" style="border-color:var(--acc)">DEPLOY</button></div>
  </div>
  <div class="info" style="position:relative">Green dot: insertion. H: extraction. Enemy positions are unknown until you deploy.</div>
  <div class="mgrid" id="mapGrid"></div>
</div>

<div id="shop" class="screen">
  <div class="lbar">
    <h2>ARMORY</h2>
    <div class="btns"><div class="funds">FUNDS <b id="shopFunds"></b></div><button data-go="menu">BACK</button><button data-go="loadout">LOADOUT</button><button data-go="deploy" style="border-color:var(--acc)">DEPLOY</button></div>
  </div>
  <div class="info" style="position:relative">Extract with intel to earn funds ($10 per kill). Every minute before you call extraction takes $50 off that mission's payout. Each weapon level adds +3% damage (the Barrett gets +2% fire rate instead). Level 20 weapons get a laser sight.</div>
  <h3>WEAPON UPGRADES</h3>
  <div class="lgrid" id="sWeapons"></div>
  <h3>THROWABLES</h3>
  <div class="lgrid" id="sThrow"></div>
  <h3>BODY ARMOUR</h3>
  <div class="lgrid" id="sArmour"></div>
</div>

<div id="pause" class="screen overlay">
  <div class="box">
    <h2>PAUSED</h2>
    <button class="big" data-go="resume">RESUME</button>
    <button id="pauseRestart" data-go="restart">RESTART MISSION</button>
    <button id="pauseQuit" data-go="quit">QUIT TO MENU</button>
  </div>
</div>

<div id="end" class="screen overlay">
  <div class="box">
    <h2 id="endTitle"></h2>
    <div id="endSub"></div>
    <div id="endStats"></div>
    <button class="big camp" id="endContinue" data-go="campaign-next">CONTINUE CAMPAIGN</button>
    <button class="big quick" data-go="deploy">REDEPLOY</button>
    <button data-go="shop">ARMORY</button>
    <button class="quick" data-go="loadout">LOADOUT</button>
    <button data-go="menu">MAIN MENU</button>
  </div>
</div>

<div id="inv">
  <div class="ipanel" id="invLeft">
    <div class="ititle" id="lootTitle">SUPPLY CACHE</div>
    <div class="isub">DRAG ITEMS TO YOUR INVENTORY</div>
    <div id="lootGrid"></div>
    <div id="lootEmpty">Nothing here. Drag items here to drop them.</div>
  </div>
  <div class="ipanel" id="invRight">
    <div class="ititle">INVENTORY</div>
    <div class="isub">2 WEAPON SLOTS  /  4 ITEM SLOTS</div>
    <div id="wSlots"></div>
    <div class="slotlbl">BODY ARMOUR</div>
    <div id="aSlot"></div>
    <div class="slotlbl">ITEMS</div>
    <div id="iSlots"></div>
    <div class="ihp">HEALTH <i><b id="invHp"></b></i> <span id="invHpTxt"></span></div>
  </div>
  <button id="invClose">CLOSE  [F]</button>
  <div id="invTip"></div>
</div>
<div id="ghost" class="cell ghost"></div>
<div id="tooSmall" role="status">Make the window bigger to play Black Site.</div>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>