a-b-street/abstreet
1
1
Fork 0
mirror of https://github.com/a-b-street/abstreet.git synced 2024-11-24 09:24:26 +03:00
Code Issues Projects Releases Wiki Activity

Make a web loader that can 'prefetch' abst in the background. cyipt/actdev-ui#15

Browse Source
This commit is contained in:
Dustin Carlino 2021-02-23 11:45:39 -08:00
parent ecf7c0c836
commit 4c97687a5b
9 changed files with 54 additions and 14 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
fifteen_min/index.html
View File

@ -120,7 +120,7 @@
</style>
</head>
<body>
<div id="loading" >
<div id="widgetry-canvas"><div id="loading">
<h1>15-minute Neighborhood Explorer</h1>
<div id="progress" style="display: none">
<h2>Loading...</h2>
@ -137,6 +137,6 @@
<button id="unsupported-proceed-btn" type="button">Load Anyway</button>
<p><strong>This will surely fail unless you enable WebGL first.</strong></p>
</div>
</div>
</div></div>
</body>
<html>

4
game/index.html
View File

@ -120,7 +120,7 @@
</style>
</head>
<body>
<div id="loading" >
<div id="widgetry-canvas"><div id="loading">
<h1>A/B Street</h1>
<div id="progress" style="display: none">
<h2>Loading...</h2>
@ -137,6 +137,6 @@
<button id="unsupported-proceed-btn" type="button">Load Anyway</button>
<p><strong>This will surely fail unless you enable WebGL first.</strong></p>
</div>
</div>
</div></div>
</body>
<html>

1
game/pkg/prefetch.html Symbolic link
View File

@ -0,0 +1 @@
../prefetch.html

33
game/prefetch.html Normal file
View File

@ -0,0 +1,33 @@
<!DOCTYPE html>
<!-- This is an example of having a "normal" page load A/B Street in the
background. When the user clicks a button on the page, swap the visible
layers and suddenly it's running! -->
<html>
<head>
<script type="module">
import { default as init } from './game.js';
async function run() {
await init('./game_bg.wasm');
}
run();
</script>
<script type="text/javascript">
function show_wasm() {
document.getElementById('widgetry-canvas').style.display = 'inline';
document.getElementById('normal_page').style.display = 'none';
}
</script>
</head>
<body>
<div id="normal_page">
<h1>This is the normal webpage. A/B Street is being loaded in the background.</h1>
<p>Can you feel the lag?</p>
<button type="button" onclick="show_wasm()">Switch to WASM app</button>
</div>
<div id="widgetry-canvas" style="display: none">
<h1>Loading...</h1>
</div>
</body>
<html>

3
map_gui/src/load.rs
View File

@ -264,6 +264,9 @@ mod wasm_loader {
let url = url.split("?").next().ok_or(anyhow!("empty URL?"))?;
Ok(url
.trim_end_matches("index.html")
// TODO This is brittle; we should strip off the trailing filename no matter what it
// is.
.trim_end_matches("prefetch.html")
.trim_end_matches("/")
.to_string())
}

4
osm_viewer/index.html
View File

@ -120,7 +120,7 @@
</style>
</head>
<body>
<div id="loading" >
<div id="widgetry-canvas"><div id="loading">
<h1>OpenStreetMap Viewer</h1>
<div id="progress" style="display: none">
<h2>Loading...</h2>
@ -137,6 +137,6 @@
<button id="unsupported-proceed-btn" type="button">Load Anyway</button>
<p><strong>This will surely fail unless you enable WebGL first.</strong></p>
</div>
</div>
</div></div>
</body>
<html>

4
santa/index.html
View File

@ -120,7 +120,7 @@
</style>
</head>
<body>
<div id="loading" >
<div id="widgetry-canvas"><div id="loading">
<h1>15-minute Santa</h1>
<div id="progress" style="display: none">
<h2>Loading...</h2>
@ -137,6 +137,6 @@
<button id="unsupported-proceed-btn" type="button">Load Anyway</button>
<p><strong>This will surely fail unless you enable WebGL first.</strong></p>
</div>
</div>
</div></div>
</body>
<html>

11
widgetry/src/backend_glow_wasm.rs
View File

@ -38,10 +38,13 @@ pub fn setup(
let canvas = winit_window.canvas();
let window = web_sys::window().unwrap();
let document = window.document().unwrap();
document.get_element_by_id("loading").unwrap().remove();
let body = document.body().unwrap();
body.append_child(&canvas)
.expect("Append canvas to HTML body");
let div = document
.get_element_by_id("widgetry-canvas")
.expect("no widgetry-canvas div");
// Clear out any loading messages
div.set_inner_html("");
div.append_child(&canvas)
.expect("can't append canvas to widgetry-canvas div");
let winit_window = Rc::new(winit_window);

4
widgetry_demo/index.html
View File

@ -120,7 +120,7 @@
</style>
</head>
<body>
<div id="loading" >
<div id="widgetry-canvas"><div id="loading">
<h1>Widgetry Demo</h1>
<div id="progress" style="display: none">
<h2>Loading...</h2>
@ -137,6 +137,6 @@
<button id="unsupported-proceed-btn" type="button">Load Anyway</button>
<p><strong>This will surely fail unless you enable WebGL first.</strong></p>
</div>
</div>
</div></div>
</body>
<html>