Skip to content

Commit

Permalink
Update from wip
Browse files Browse the repository at this point in the history
  • Loading branch information
@marshray
marshray committed Dec 17, 2023
1 parent 3d3dca6 commit afdabb4
Show file tree
Hide file tree
Showing 4 changed files with 264 additions and 139 deletions.
177 changes: 143 additions & 34 deletions docs/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,22 @@

<title>Sunangle</title>

<!-- config for our rust wasm binary. go to https://trunkrs.dev/assets/#rust for more customization -->
<script type="module">import init from '/sunangle/sunangle-e3f8523f3e2b16bf.js';init('/sunangle/sunangle-e3f8523f3e2b16bf_bg.wasm');</script>
<!-- this is the base url relative to which other urls will be constructed. trunk will insert this from the public-url option -->
<!-- Config for our Rust WASM binary. See https://trunkrs.dev/assets/#rust for more
customization -->

<script type="module">
import init, * as bindings from '/sunangle/sunangle-7f97e63a6ae81529bd219c3d590b68e83cf8beb27c6b4277be2bd253a8b8a5569b7c55e0298d90fa564cbc974368af62.js';
init('/sunangle/sunangle-7f97e63a6ae81529bd219c3d590b68e83cf8beb27c6b4277be2bd253a8b8a5569b7c55e0298d90fa564cbc974368af62_bg.wasm');
window.wasmBindings = bindings;

</script>

<!-- Write the URL passed to --public-url (or specified in Trunk.toml [build]public_url) to the
HTML output. This will be accessible at runtime using document.baseURI for apps that
need to know the base URL on which they're hosted (e.g. for routing). -->
<base href="/sunangle/">

<link rel="icon" href="/sunangle/favicon-f402c8741ce815ec.ico">
<link rel="icon" href="/sunangle/favicon-f402c8741ce815ec.ico" integrity="sha384-jNOAE6jgE03LznIulCTVP6BH4NrTuROFjP9wj8bV1UUMJKtZAvstFpIAP3PDcFpx">



Expand Down Expand Up @@ -110,19 +120,18 @@
transform: rotate(360deg);
}
}

</style>

<link rel="preload" href="/sunangle/sunangle-e3f8523f3e2b16bf_bg.wasm" as="fetch" type="application/wasm" crossorigin="">
<link rel="modulepreload" href="/sunangle/sunangle-e3f8523f3e2b16bf.js"></head>
<link rel="preload" href="/sunangle/sunangle-7f97e63a6ae81529bd219c3d590b68e83cf8beb27c6b4277be2bd253a8b8a5569b7c55e0298d90fa564cbc974368af62_bg.wasm" as="fetch" type="application/wasm" crossorigin="anonymous" integrity="sha384-f5fmOmroFSm9IZw9WQto6Dz4vrJ8a0J3vivSU6i4pVabfFXgKY2Q-lZMvJdDaK9i">
<link rel="modulepreload" href="/sunangle/sunangle-7f97e63a6ae81529bd219c3d590b68e83cf8beb27c6b4277be2bd253a8b8a5569b7c55e0298d90fa564cbc974368af62.js" crossorigin="anonymous" integrity="sha384-8y9lPivTBOwytlzns3rUlEtk6BGP1PtzyyOM8wQRRpD9EIV5kw-HoOXT8Nz29qOY"></head>

<body>
<!-- The WASM code will resize the canvas dynamically -->
<!-- the id is hardcoded in main.rs . so, make sure both match. -->
<canvas id="the_canvas_id"></canvas>
<!-- Make sure this canvas id matches the value in main.rs. -->
<canvas id="sunangle_canvas_id"></canvas>

<!--Register Service Worker. this will cache the wasm / js scripts for offline use (for PWA functionality). -->
<!-- Force refresh (Ctrl + F5) to load the latest files instead of cached files -->
<!-- Register a service worker to cache the wasm/js scripts for offline use (for PWA functionality). -->
<!-- Force refresh (Ctrl + F5) to load the latest files instead of cached files. -->
<script>
// We disable caching during development so that we always view the latest version.
if ('serviceWorker' in navigator && window.location.hash !== "#dev") {
Expand All @@ -135,32 +144,132 @@



<script>"use strict";

(function () {

const address = '{{__TRUNK_ADDRESS__}}';
let protocol = '';
protocol =
protocol
? protocol
: window.location.protocol === 'https:'
? 'wss'
: 'ws';
const url = protocol + '://' + address + '/_trunk/ws';

class Overlay {
constructor() {
// create an overlay
this._overlay = document.createElement("div");
const style = this._overlay.style;
style.height = "100vh";
style.width = "100vw";
style.position = "fixed";
style.top = "0";
style.left = "0";
style.backgroundColor = "rgba(222, 222, 222, 0.5)";
style.fontFamily = "sans-serif";
// not sure that's the right approach
style.zIndex = "1000000";
style.backdropFilter = "blur(1rem)";

const container = document.createElement("div");
// center it
container.style.position = "absolute";
container.style.top = "30%";
container.style.left = "15%";
container.style.maxWidth = "85%";

this._title = document.createElement("div");
this._title.innerText = "Build failure";
this._title.style.paddingBottom = "2rem";
this._title.style.fontSize = "2.5rem";

this._message = document.createElement("div");
this._message.style.whiteSpace = "pre-wrap";

const icon= document.createElement("div");
icon.innerHTML = '<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" fill="#dc3545" viewBox="0 0 16 16"><path d="M8.982 1.566a1.13 1.13 0 0 0-1.96 0L.165 13.233c-.457.778.091 1.767.98 1.767h13.713c.889 0 1.438-.99.98-1.767L8.982 1.566zM8 5c.535 0 .954.462.9.995l-.35 3.507a.552.552 0 0 1-1.1 0L7.1 5.995A.905.905 0 0 1 8 5zm.002 6a1 1 0 1 1 0 2 1 1 0 0 1 0-2z"/></svg>';
this._title.prepend(icon);

container.append(this._title, this._message);
this._overlay.append(container);

this._inject();
window.setInterval(() => {
this._inject();
}, 250);
}

set reason(reason) {
this._message.textContent = reason;
}

_inject() {
if (!this._overlay.isConnected) {
// prepend it
document.body?.prepend(this._overlay);
}
}

}

class Client {
constructor(url) {
this.url = url;
this.poll_interval = 5000;
this._overlay = null;
}

start() {
const ws = new WebSocket(this.url);
ws.onmessage = (ev) => {
const msg = JSON.parse(ev.data);
switch (msg.type) {
case "reload":
this.reload();
break;
case "buildFailure":
this.buildFailure(msg.data)
break;
}
};
ws.onclose = this.onclose;
}

<script>(function () {
var protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
var url = protocol + '//' + window.location.host + '/_trunk/ws';
var poll_interval = 5000;
var reload_upon_connect = () => {
window.setTimeout(
() => {
// when we successfully reconnect, we'll force a
// reload (since we presumably lost connection to
// trunk due to it being killed, so it will have
// rebuilt on restart)
var ws = new WebSocket(url);
ws.onopen = () => window.location.reload();
ws.onclose = reload_upon_connect;
},
poll_interval);
};
onclose() {
window.setTimeout(
() => {
// when we successfully reconnect, we'll force a
// reload (since we presumably lost connection to
// trunk due to it being killed, so it will have
// rebuilt on restart)
const ws = new WebSocket(this.url);
ws.onopen = () => window.location.reload();
ws.onclose = this.onclose;
},
this.poll_interval);
}

var ws = new WebSocket(url);
ws.onmessage = (ev) => {
const msg = JSON.parse(ev.data);
if (msg.reload) {
reload() {
window.location.reload();
}
};
ws.onclose = reload_upon_connect;

buildFailure({reason}) {
// also log the console
console.error("Build failed:", reason);

console.debug("Overlay", this._overlay);

if (!this._overlay) {
this._overlay = new Overlay();
}
this._overlay.reason = reason;
}
}

new Client(url).start();

})()
</script></body></html><!-- Powered by egui: https://github.com/emilk/egui/ -->
Loading

0 comments on commit afdabb4

Please sign in to comment.