cache busting
for faster load times, and seamless updates. because for some reason ServeDir can't do it correctly, and it tells the client "yeah hey nothing changed" even if something changed
This commit is contained in:
parent
9b190165ff
commit
5e6b84bed5
24 changed files with 580 additions and 203 deletions
17
static/404.html
Normal file
17
static/404.html
Normal file
|
@ -0,0 +1,17 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>404 Not Found</title>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<h1>404 Not Found</h1>
|
||||
<p>It appears the thing you're looking for doesn't exist.</p>
|
||||
<p><a href="/">Back to rakugaki</a></p>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
<!-- This page could really be prettier, don't you think? -->
|
|
@ -23,50 +23,6 @@ body {
|
|||
|
||||
/* Fonts */
|
||||
|
||||
@font-face {
|
||||
font-family: "Atkinson Hyperlegible";
|
||||
src:
|
||||
local("Atkinson Hyperlegible Regular"),
|
||||
url("font/AtkinsonHyperlegible-Regular.ttf");
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Atkinson Hyperlegible";
|
||||
src:
|
||||
local("Atkinson Hyperlegible Italic"),
|
||||
url("font/AtkinsonHyperlegible-Italic.ttf");
|
||||
font-weight: 400;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Atkinson Hyperlegible";
|
||||
src:
|
||||
local("Atkinson Hyperlegible Bold"),
|
||||
url("font/AtkinsonHyperlegible-Bold.ttf");
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "Atkinson Hyperlegible";
|
||||
src:
|
||||
local("Atkinson Hyperlegible Bold Italic"),
|
||||
url("font/AtkinsonHyperlegible-BoldItalic.ttf");
|
||||
font-weight: 700;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
/* NOTE: This is my own variant of Iosevka that more or less follows the stylistic choices
|
||||
of Atkinson Hyperlegible. */
|
||||
font-family: "Iosevka Hyperlegible";
|
||||
src:
|
||||
local("Iosevka Hyperlegible"),
|
||||
url("font/IosevkaHyperlegible-Regular.woff2");
|
||||
font-weight: 400;
|
||||
}
|
||||
|
||||
:root {
|
||||
font-family: "Atkinson Hyperlegible", sans-serif;
|
||||
}
|
||||
|
|
|
@ -1,6 +1,6 @@
|
|||
import { listen } from "./framework.js";
|
||||
import { Viewport } from "./viewport.js";
|
||||
import { Wall } from "./wall.js";
|
||||
import { listen } from "rkgk/framework.js";
|
||||
import { Viewport } from "rkgk/viewport.js";
|
||||
import { Wall } from "rkgk/wall.js";
|
||||
|
||||
class CanvasRenderer extends HTMLElement {
|
||||
viewport = new Viewport();
|
||||
|
|
|
@ -8,7 +8,7 @@ function makeLogFunction(level) {
|
|||
}
|
||||
|
||||
let { instance: hakuInstance, module: hakuModule } = await WebAssembly.instantiateStreaming(
|
||||
fetch(import.meta.resolve("./wasm/haku.wasm")),
|
||||
fetch(HAKU_WASM_PATH),
|
||||
{
|
||||
env: {
|
||||
panic(length, pMessage) {
|
||||
|
|
|
@ -1,135 +0,0 @@
|
|||
<!DOCTYPE html>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
|
||||
<title>rakugaki</title>
|
||||
|
||||
<link rel="stylesheet" href="static/base.css">
|
||||
<link rel="stylesheet" href="static/index.css">
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
|
||||
<script src="static/live-reload.js" type="module"></script>
|
||||
|
||||
<script src="static/brush-editor.js" type="module"></script>
|
||||
<script src="static/canvas-renderer.js" type="module"></script>
|
||||
<script src="static/connection-status.js" type="module"></script>
|
||||
<script src="static/framework.js" type="module"></script>
|
||||
<script src="static/resize-handle.js" type="module"></script>
|
||||
<script src="static/reticle-renderer.js" type="module"></script>
|
||||
<script src="static/session.js" type="module"></script>
|
||||
<script src="static/throbber.js" type="module"></script>
|
||||
<script src="static/viewport.js" type="module"></script>
|
||||
<script src="static/welcome.js" type="module"></script>
|
||||
|
||||
<script src="static/index.js" type="module" defer></script>
|
||||
|
||||
<link rel="icon" sizes="16x16" href="/static/favicon/rkgk@1x.png">
|
||||
<link rel="icon" sizes="32x32" href="/static/favicon/rkgk@2x.png">
|
||||
<link rel="icon" sizes="64x64" href="/static/favicon/rkgk@4x.png">
|
||||
<link rel="icon" sizes="128x128" href="/static/favicon/rkgk@8x.png">
|
||||
<link rel="icon" sizes="256x256" href="/static/favicon/rkgk@16x.png">
|
||||
<link rel="icon" sizes="512x512" href="/static/favicon/rkgk@32x.png">
|
||||
<link rel="apple-touch-icon" sizes="16x16" href="/static/favicon/rkgk@1x.png">
|
||||
<link rel="apple-touch-icon" sizes="32x32" href="/static/favicon/rkgk@2x.png">
|
||||
<link rel="apple-touch-icon" sizes="64x64" href="/static/favicon/rkgk@4x.png">
|
||||
<link rel="apple-touch-icon" sizes="128x128" href="/static/favicon/rkgk@8x.png">
|
||||
<link rel="apple-touch-icon" sizes="256x256" href="/static/favicon/rkgk@16x.png">
|
||||
<link rel="apple-touch-icon" sizes="512x512" href="/static/favicon/rkgk@32x.png">
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<main>
|
||||
<rkgk-canvas-renderer class="fullscreen"></rkgk-canvas-renderer>
|
||||
<rkgk-reticle-renderer class="fullscreen"></rkgk-reticle-renderer>
|
||||
<div class="panels fullscreen" id="panels-overlay">
|
||||
<div class="rkgk-panel menu-bar">
|
||||
<a class="icon icon-rkgk-grayscale" title="I know this menu bar is really ugly. Sorry about that."></a>
|
||||
<hr>
|
||||
<a href="/docs/rkgk.html">Manual</a>
|
||||
</div>
|
||||
<div class="right">
|
||||
<rkgk-resize-handle
|
||||
data-direction="vertical"
|
||||
data-target="panels-overlay"
|
||||
data-target-property="--right-width"
|
||||
data-init-size="384"
|
||||
data-min-size="128"></rkgk-resize-handle>
|
||||
<rkgk-brush-editor></rkgk-brush-editor>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<rkgk-welcome>
|
||||
<dialog name="welcome-dialog" class="rkgk-panel">
|
||||
<form method="dialog">
|
||||
<h3>
|
||||
My name is
|
||||
<input
|
||||
name="nickname"
|
||||
type="text"
|
||||
required minlength="1" maxlength="32"
|
||||
placeholder="... (type here!)"
|
||||
autocomplete="off"
|
||||
autofocus></input>
|
||||
</h3>
|
||||
<p>This name will be visible to any friends drawing along with you, so choose something recognizable!<br>
|
||||
Keep in mind you can always change it later.</p>
|
||||
|
||||
<div style="display: flex; flex-direction: row; align-items: center; justify-content: end; gap: 8px;">
|
||||
<rkgk-throbber name="register-progress"></rkgk-throbber>
|
||||
<button name="register">Register</button>
|
||||
</div>
|
||||
</form>
|
||||
</dialog>
|
||||
</rkgk-welcome>
|
||||
|
||||
<rkgk-connection-status>
|
||||
<dialog name="logging-in-dialog">
|
||||
<rkgk-throbber class="loading"></rkgk-throbber><p>Logging in…</p>
|
||||
</dialog>
|
||||
|
||||
<dialog name="error-dialog" class="rkgk-panel">
|
||||
<h1>owie! >_<</h1>
|
||||
<p><i>Uh oh. Seems like the pipe cracked again… There's water everywhere.<br>The basement's half full already. God dammit.</i></p>
|
||||
|
||||
<p>Super sorry about this! But rakugaki encountered an error and has to restart.</p>
|
||||
<p><b>Rest assured your drawings are safe and sound.</b></p>
|
||||
<p>Either way… try refreshing the page and see if it helps. If not, please report a bug with the following details.</p>
|
||||
|
||||
<details>
|
||||
<summary>Show error details</summary>
|
||||
<textarea name="error-text" rows="10" readonly></textarea>
|
||||
</details>
|
||||
|
||||
<p>Thank you from the mountain!</p>
|
||||
|
||||
<div style="display: flex; flex-direction: row; align-items: center; justify-content: end;">
|
||||
<button name="refresh">Refresh</button>
|
||||
</div>
|
||||
</dialog>
|
||||
|
||||
<dialog name="disconnected-dialog">
|
||||
<rkgk-throbber class="loading"></rkgk-throbber>
|
||||
<p>Connection lost. Attempting to reconnect in <span name="reconnect-duration"></span>…</p>
|
||||
</dialog>
|
||||
</rkgk-connection-status>
|
||||
|
||||
<div class="fullscreen" id="js-loading">
|
||||
<rkgk-throbber class="loading"></rkgk-throbber>
|
||||
|
||||
<noscript>
|
||||
<style>
|
||||
#js-loading>rkgk-throbber { display: none; }
|
||||
</style>
|
||||
<p>
|
||||
rakugaki is a web app and does not work without JavaScript :(<br>
|
||||
but I swear it's a very lightweight and delightful web app!
|
||||
You won't regret trying it out.
|
||||
</p>
|
||||
</noscript>
|
||||
</div>
|
||||
</main>
|
||||
</body>
|
||||
</html>
|
|
@ -1,4 +1,4 @@
|
|||
import { Wall } from "./wall.js";
|
||||
import { Wall } from "rkgk/wall.js";
|
||||
import {
|
||||
getLoginSecret,
|
||||
getUserId,
|
||||
|
@ -6,9 +6,9 @@ import {
|
|||
newSession,
|
||||
registerUser,
|
||||
waitForLogin,
|
||||
} from "./session.js";
|
||||
import { debounce } from "./framework.js";
|
||||
import { ReticleCursor } from "./reticle-renderer.js";
|
||||
} from "rkgk/session.js";
|
||||
import { debounce } from "rkgk/framework.js";
|
||||
import { ReticleCursor } from "rkgk/reticle-renderer.js";
|
||||
|
||||
const updateInterval = 1000 / 60;
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { Haku } from "./haku.js";
|
||||
import { Painter } from "./painter.js";
|
||||
import { Haku } from "rkgk/haku.js";
|
||||
import { Painter } from "rkgk/painter.js";
|
||||
|
||||
export class User {
|
||||
nickname = "";
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { listen } from "./framework.js";
|
||||
import { listen } from "rkgk/framework.js";
|
||||
|
||||
export class ResizeHandle extends HTMLElement {
|
||||
constructor() {
|
||||
|
|
|
@ -1,4 +1,4 @@
|
|||
import { listen } from "./framework.js";
|
||||
import { listen } from "rkgk/framework.js";
|
||||
|
||||
let loginStorage = JSON.parse(localStorage.getItem("rkgk.login") ?? "{}");
|
||||
|
||||
|
|
|
@ -1,5 +1,5 @@
|
|||
import { Pixmap } from "./haku.js";
|
||||
import { OnlineUsers } from "./online-users.js";
|
||||
import { Pixmap } from "rkgk/haku.js";
|
||||
import { OnlineUsers } from "rkgk/online-users.js";
|
||||
|
||||
export class Chunk {
|
||||
constructor(size) {
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue