fof/index.html at master · arjunbazinga/fof · 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
<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover" />
    <title>Friend or Foe</title>
    <meta
      name="description"
      content="A two-box game where the other player is reading you. A playable version of the friend or foe environment from DeepMind's AI Safety Gridworlds."
    />
    <meta name="theme-color" content="#edefea" media="(prefers-color-scheme: light)" />
    <meta name="theme-color" content="#101311" media="(prefers-color-scheme: dark)" />
    <meta name="color-scheme" content="light dark" />
    <meta name="build" content="__BUILD__" />
    <!--
      Static site with no user input and no third-party origins. 'self' still
      blocks every other origin; an explicit default-src 'none' with a
      per-directive allowlist bought nothing here beyond one more thing that
      could behave differently in an engine I cannot test.
    -->
    <meta
      http-equiv="Content-Security-Policy"
      content="default-src 'self'; style-src 'self' 'unsafe-inline'; img-src 'self' data:; object-src 'none'; base-uri 'none'; form-action 'none'"
    />
    <link rel="manifest" href="./manifest.webmanifest" />
    <link rel="apple-touch-icon" href="./apple-touch-icon.png" />
    <link rel="icon" href="./favicon.svg" type="image/svg+xml" />
    <link rel="preload" href="./fonts/bricolage.woff2" as="font" type="font/woff2" crossorigin />
    <link rel="preload" href="./fonts/plex-sans.woff2" as="font" type="font/woff2" crossorigin />
    <link rel="preload" href="./fonts/plex-mono-400.woff2" as="font" type="font/woff2" crossorigin />
    <meta property="og:title" content="Friend or Foe" />
    <meta property="og:description" content="You think you are guessing which box has the reward. You are training the thing that hides it." />
    <meta property="og:type" content="website" />
    <meta property="og:url" content="https://arjunbazinga.github.io/fof/" />
    <meta property="og:image" content="https://arjunbazinga.github.io/fof/og.png" />
    <meta property="og:image:width" content="1200" />
    <meta property="og:image:height" content="630" />
    <meta property="og:image:alt" content="A bar reading “it expects you to pick LEFT 64%”, above the words “You are not watching the game.”" />
    <meta name="twitter:card" content="summary_large_image" />
    <meta name="twitter:creator" content="@arjunsriv" />
  </head>
    <style>
      /*
        Shown only if the app never mounts. It sits inside #app and the first
        render replaces it, so a working page never flashes it -- and a broken
        one says something instead of going blank. Inline so it survives the
        stylesheet failing too.
      */
      .boot {
        opacity: 0;
        animation: boot-show 1ms linear 1.5s forwards;
        max-width: 30em;
        margin: 4em auto;
        padding: 0 1.2em;
        font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
        font-size: 13px;
        line-height: 1.7;
        color: #5b6560;
      }
      @keyframes boot-show { to { opacity: 1; } }
      .boot b { color: #111518; }
      @media (prefers-color-scheme: dark) {
        .boot { color: #8b958c; }
        .boot b { color: #e9ece4; }
      }
    </style>
  <body>
    <div id="app">
      <p class="boot">
        <b>Friend or Foe didn’t start.</b><br />
        Pull down to refresh — an older copy of this page may be cached.<br />
        If it keeps happening, the build is <b>__BUILD__</b>; send that along.
      </p>
    </div>
    <noscript>
      <p style="font-family: system-ui; max-width: 34em; margin: 3em auto; padding: 0 1em">
        Friend or Foe is a game about a hidden player that predicts your next move from your last few
        moves. It needs JavaScript to run. The mechanics come from
        <a href="https://arxiv.org/abs/1711.09883">AI Safety Gridworlds</a> (Leike et al., 2017), §2.2.3.
      </p>
    </noscript>
    <script type="module" src="/src/main.ts"></script>
  </body>
</html>