tabularius/index.html at main · mitranim/tabularius · 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
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
<!doctype html>
<html lang="en">

<head>
  <meta charset="utf-8">
  <title>Tabularius — book-keeper for Tower Dominion</title>
  <meta name="og:site_name" content="Tabularius">
  <meta name="description" content="Book-keeper for Tower Dominion: run history, data analysis with plots, save editing, progression unlocking, cloud backups, run link sharing, and more! Pure web app, no installation required.">
  <meta name="og:description" content="Book-keeper for Tower Dominion: run history, data analysis with plots, save editing, and more! Pure web app, no installation required.">
  <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
  <link rel="icon" href="./client/favicon.svg" type="image/svg+xml">

  <!--
  Chrome's Lighthouse audit complains about this no matter what. When not
  using preconnect, it recommends adding it for these domains. When using
  preconnect, it complains that it was unused (possibly because of HTTP
  protocol mismatch). In local testing, it wants us to use `crossorigin`
  for `cdn.jsdelivr.net`, but not for `esm.sh`. In production, it complains
  about both. This is out of our hands and up to Chrome to fix.

  Meanwhile, Safari prints messages that preconnect was successful, although
  it's unclear if this means it was actually used.

  We'd like to also hit `https://cdn.skypack.dev`, but Lighthouse also
  complains about more than 2 preconnects.
  -->
  <link rel="preconnect" href="https://cdn.jsdelivr.net">
  <link rel="preconnect" href="https://esm.sh">

  <link rel="dns-prefetch" href="https://cdn.jsdelivr.net">
  <link rel="dns-prefetch" href="https://esm.sh">
  <link rel="dns-prefetch" href="https://cdn.skypack.dev">

  <!--
  Instruct robots that only the origin + pathname URL is valid,
  without query or hash.
  -->
  <link rel="canonical" href="https://mitranim.com/tabularius/">

  <!-- Version is used by UI and SW. -->
  <script id="init">
    window.tabularius ??= Object.create(null)
    tabularius.VERSION = 171
  </script>

  <style>
    html, body {
      width: 100vw;
      height: 100vh;
    }

    * {
      font-family: ui-monospace, SF Mono, SFMono-Regular, Menlo, Monaco, DejaVu Sans Mono, Consolas, 'Liberation Mono', 'Courier New', monospace;
    }
  </style>

  <style id="loading_style">
    @media (prefers-color-scheme: dark) {
      :root {
        background-color: hsl(0deg 0% 10%);
        color: hsl(0deg 0% 80%);
      }
      a:link {color: deepskyblue}
      a:link:hover {color: dodgerblue}
    }
    @media (prefers-color-scheme: light) {
      :root {
        background-color: white;
        color: hsl(0deg 0% 30%);
      }
      a:link {color: blue}
      a:link:hover {color: blueviolet}
    }
    body {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      text-align: center;
      line-height: 1.25;
    }
  </style>

  <!--
  The importmap must precede every import that relies on it.
  It must also precede any `<link rel="modulepreload">` of our scripts
  If `<link rel="modulepreload">` is placed before the importmap, it's
  possible to have a race condition where a module is retrieved from
  a local cache and processed "too soon", before the browser processes
  the importmap, and the whole app fails due to unresolved imports.
  -->
  <script type="importmap">
    {"imports": {
      "tabularius/": "./",
      "@mitranim/js/": "https://cdn.jsdelivr.net/npm/@mitranim/js@0.1.85/",
      "@twind/core": "https://esm.sh/@twind/core@1.1.3",
      "@twind/preset-autoprefix": "https://esm.sh/@twind/preset-autoprefix@1.0.7",
      "@twind/preset-tailwind": "https://esm.sh/@twind/preset-tailwind@1.1.4",
      "@twind/preset-tailwind/": "https://esm.sh/@twind/preset-tailwind@1.1.4/",
      "idb": "https://esm.sh/idb@7.1.1/es2022/idb.mjs",
      "uplot": "https://esm.sh/uplot@1.6.27/es2022/uplot.mjs",
      "tweetnacl": "https://cdn.skypack.dev/tweetnacl@1.0.3?min"
    }}
  </script>

  <!--
  Must be deferred to avoid blocking rendering. Without this, some browsers
  flashbang the user while this script is loading, despite our dark mode
  styles above.
  -->
  <script src="https://cdn.jsdelivr.net/npm/@ungap/custom-elements@1.3.0/es.js" defer></script>

  <script type="module">
    try {
      await import(`./client/main.mjs`)
    }
    catch (err) {
      console.error(err)

      if (document.getElementById(`loading_msg`)) {
        const TARBLAN = `target="_blank" rel="noopener noreferrer"`

        // SYNC[discord_link].
        const DISCORD_LINK = `https://discord.gg/upPxCEVxgD`

        document.body.innerHTML = `
<p>Sorry! Something went wrong.</p>
<pre style="color: red; padding: 1rem; white-space: break-spaces">${err?.stack || err}</pre>
<p>
  Please report either:
  <br>
  Via <a href="https://github.com/mitranim/tabularius/issues" ${TARBLAN}>GitHub issues ↗</a>
  <br>
  Via <a href="${DISCORD_LINK}" ${TARBLAN}>Tower Dominion Discord ↗</a>, tagging @mitranim
</p>
`
      }
    }
  </script>
</head>

<body>
  <noscript>
    The app requires JavaScript.
    <br>
    Please enable JS in your browser settings.
    <style>#loading_msg {display: none}</style>
  </noscript>

  <div id="loading_msg">Loading...</div>

  <script type="module">
    const query = new URLSearchParams()
    const ver = tabularius.VERSION
    const dev = new URLSearchParams(location.search).get(`DEV`)
    if (ver) query.set(`VERSION`, ver)
    if (dev) query.set(`DEV`, dev)
    navigator.serviceWorker?.register(`./sw.mjs?` + query)
  </script>
</body>
</html>