2dfight/index.html at main · tecsteps/2dfight · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <meta name="color-scheme" content="dark" />
    <title>KNOCKBOTS</title>
    <style>
      :root { color-scheme: dark; }
      * { margin: 0; padding: 0; box-sizing: border-box; }
      html, body { width: 100%; height: 100%; overflow: hidden; background: #05070c; }
      body { font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; }
      #app { position: fixed; inset: 0; }
      canvas { display: block; width: 100%; height: 100%; touch-action: none; }
      #ui { position: fixed; inset: 0; pointer-events: none; z-index: 10; }
      #boot {
        position: fixed; inset: 0; z-index: 100; display: grid; place-items: center;
        background: radial-gradient(120% 90% at 50% 40%, #0d1422 0%, #05070c 70%);
        transition: opacity .5s ease; color: #cfe6ff;
      }
      #boot.hidden { opacity: 0; pointer-events: none; }
      #boot .wrap { text-align: center; }
      #boot h1 {
        font-size: clamp(38px, 9vw, 104px); letter-spacing: .14em; font-weight: 900;
        background: linear-gradient(180deg, #eaf4ff 0%, #6fa8ff 55%, #1d4b8f 100%);
        -webkit-background-clip: text; background-clip: text; color: transparent;
        text-shadow: 0 0 60px rgba(90,150,255,.35);
      }
      #boot p { margin-top: 14px; font-size: 13px; letter-spacing: .28em; color: #5f7c9e; text-transform: uppercase; }
      #bar { margin: 26px auto 0; width: min(340px, 60vw); height: 2px; background: #16233a; overflow: hidden; }
      #bar i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, #2f6fd0, #7fd4ff); transition: width .25s ease; }

      /* Control legend. Which one shows is decided at runtime from the device,
         because telling a gamepad player about WASD is worse than saying nothing. */
      #controls {
        margin: 40px auto 0; max-width: min(680px, 88vw);
        border-top: 1px solid #16233a; padding-top: 22px;
        font-family: ui-monospace, "SF Mono", Menlo, monospace;
      }
      #controls h2 {
        font-size: 9px; letter-spacing: .3em; color: #4f6a8c;
        text-transform: uppercase; font-weight: 400; margin-bottom: 16px;
      }
      #controls .grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); gap: 12px 26px; }
      #controls .row { display: grid; grid-template-columns: 118px 1fr; align-items: center; gap: 12px; }
      #controls .keys { display: flex; gap: 4px; justify-content: flex-end; }

      /* Positional key map. The caps sit where they physically sit, with a
         half-key stagger per row, so the shape can be matched against the
         keyboard without reading the letters. */
      #controls .keymap { display: flex; gap: clamp(28px, 6vw, 72px); justify-content: center; align-items: flex-start; flex-wrap: wrap; }
      #controls .kc { display: flex; flex-direction: column; gap: 9px; }
      #controls .kc-h { font-size: 8.5px; letter-spacing: .28em; color: #4f6a8c; text-transform: uppercase; }
      #controls .kc-pad { display: flex; flex-direction: column; gap: 4px; }
      #controls .kc-row { display: flex; gap: 4px; }
      #controls .kc-list { display: flex; flex-direction: column; gap: 3px; margin-top: 4px; }
      #controls .kc-li { font-size: 10px; letter-spacing: .1em; color: #6f8bab; text-transform: uppercase; display: flex; gap: 7px; }
      #controls .kc-li b { color: #9dc4ee; font-weight: 600; min-width: 1.1em; }

      #controls kbd {
        display: inline-grid; place-items: center; min-width: 30px; height: 30px; padding: 0 7px;
        background: linear-gradient(180deg, #1b2942, #101a2b);
        border: 1px solid #26364f; border-bottom-width: 2px; border-radius: 5px;
        font: 600 12px/1 ui-monospace, monospace; color: #cfe6ff;
      }
      #controls kbd[data-tag]::after {
        content: attr(data-tag); position: absolute; margin: -19px 0 0 19px;
        font-size: 7.5px; color: #d08a4a; letter-spacing: .08em;
      }
      #controls kbd { position: relative; }
      #controls .lbl { font-size: 10.5px; letter-spacing: .1em; color: #6f8bab; text-transform: uppercase; text-align: left; }
      #controls .note { margin-top: 16px; font-size: 10.5px; letter-spacing: .06em; color: #d08a4a; line-height: 1.7; }
      @media (max-width: 620px) { #controls .grid { grid-template-columns: 1fr; } #controls .row { grid-template-columns: 108px 1fr; } }
    </style>
  </head>
  <body>
    <div id="app"></div>
    <div id="ui"></div>
    <div id="boot">
      <div class="wrap">
        <h1>KNOCKBOTS</h1>
        <p id="boot-status">Initialising</p>
        <div id="bar"><i></i></div>
        <div id="controls" hidden>
          <h2 id="controls-title">Controls</h2>
          <div class="grid" id="controls-grid"></div>
          <div class="note" id="controls-note" hidden></div>
        </div>
      </div>
    </div>
    <script type="module" src="/src/main.js"></script>

    <!--
      Cloudflare Web Analytics.

      The account had Web Analytics switched ON for knockbots.com already
      (enabled: true, auto_install: true) and it was doing nothing: the served page
      carried exactly one script tag, and the live response was byte-identical to
      the local dist (5261 = 5261), so nothing was being injected. Automatic
      install works by rewriting HTML as it passes through the proxy, and a Pages
      custom domain serves the response directly, so there was no rewrite step. The
      dashboard said on; the page said otherwise. Same shape as the setEffect defect
      in RenderPipeline -- a flag set is not an effect had -- so this is the beacon
      placed explicitly, where it can be verified in the served bytes.

      The site token is not a secret. It is designed to sit in public page source
      and identifies the site, not the account; it grants no API access.

      `defer` matters: this is the one external request the page makes, and it must
      never sit in front of the game booting. If Cloudflare is slow or blocked, the
      game is unaffected and the only casualty is a missing datapoint.

      Cookieless and no cross-site tracking -- no consent banner, and nothing about
      an individual player is collected.
    -->
    <script defer src="https://static.cloudflareinsights.com/beacon.min.js"
            data-cf-beacon='{"token": "21298906eb06411f85965c6c20914d60"}'></script>
  </body>
</html>