Skip to content

Commit a907786

Browse files
onlycsonlycs
committed
make more user-friendly
consider the average human. 50% of us are dumber than that.
1 parent c14f4a0 commit a907786

File tree

1 file changed

+81
-58
lines changed

1 file changed

+81
-58
lines changed

‎index.html‎

Lines changed: 81 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -1,61 +1,84 @@
11
<!doctype html>
22
<html lang="en-US">
3-
<head>
4-
<meta charset="utf-8" />
5-
<title>Fluid Simulation</title>
6-
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
7-
</head>
8-
9-
<body
10-
id="fluidsim"
11-
class="w-screen h-screen flex items-center justify-center flex-col m-0"
12-
style="background-color: #2a2a2a;">
13-
14-
<script type="module">
15-
import init from "./pkg/fluidsim.js";
16-
17-
init()
18-
.then(() => {
19-
console.log("loaded!");
20-
})
21-
.catch(() => {
22-
console.log("failure?");
23-
24-
setTimeout(() => {
25-
if (document.querySelectorAll("canvas").length == 0) {
26-
document.getElementById("help").style.display = "block";
27-
document.getElementById("onboard-help").style.display = "none";
28-
}
29-
}, 500)
30-
});
31-
</script>
32-
33-
<p id="help" class="mb-4 text-white text-2xl text-center"
34-
style="display: none;">
35-
This does not work on Firefox at the moment. <br>
36-
You need extra steps to make this work on chrome. <br>
37-
38-
Go to
39-
<span style="background-color: #101010;"
40-
class="py-1 pl-2 pr-1 rounded-sm text-xl">
41-
chrome://flags
42-
</span>, search for and enable
43-
44-
<br>
45-
<span style="background-color: #101010;"
46-
class="py-1 pl-2 pr-1 rounded-sm text-xl">
47-
Unsafe WebGPU Support
48-
</span>, then restart your browser.
49-
50-
<br><br>
51-
I hope this goes without saying:<br>
52-
this will not work on a phone<br>
53-
</p>
54-
55-
<p id="onboard-help" class="mb-4 text-white text-2xl text-center"
56-
style="display: none;">
57-
Click on the window, then click space to start.
58-
You can interact with the mouse.
59-
</p>
60-
</body>
3+
4+
<head>
5+
<meta charset="utf-8" />
6+
<title>Fluid Simulation</title>
7+
<script src="https://unpkg.com/@tailwindcss/browser@4"></script>
8+
</head>
9+
10+
<body id="fluidsim" class="w-screen h-screen flex items-center justify-center flex-col m-0">
11+
<style>
12+
body {
13+
background-color: #1a1a1a;
14+
}
15+
16+
a {
17+
text-decoration: underline;
18+
}
19+
</style>
20+
21+
<script type="module">
22+
import init from "./pkg/fluidsim.js";
23+
24+
init()
25+
.then(() => {
26+
console.log("loaded!");
27+
})
28+
.catch(() => {
29+
console.log("failure?");
30+
31+
setTimeout(() => {
32+
if (document.querySelectorAll("canvas").length == 0) {
33+
document.getElementById("help").style.display = "block";
34+
document.getElementById("onboard-help").style.display = "none";
35+
}
36+
}, 500)
37+
});
38+
</script>
39+
40+
<script>
41+
window.addEventListener("load", () => {
42+
const ua = navigator.userAgent;
43+
44+
if (ua.includes("Mobile")) {
45+
document.getElementById("help").innerHTML = "This demo does not support mobile devices.";
46+
} else if (ua.includes("Firefox")) {
47+
document.getElementById("help").innerHTML = "Firefox has not yet added WebGPU Buffer support.<br><br>For this reason, only supports Chrome and<br>Chrome-based browsers (Edge, Opera, etc.) are supported.";
48+
} else if (ua.includes("Edg")) {
49+
const repl = document.getElementById("help").innerHTML.replaceAll("chrome", "edge");
50+
document.getElementById("help").innerHTML = repl;
51+
} else if (ua.includes("Linux") && ua.includes("Chrome")) {
52+
const ihtml = document.getElementById("help").innerHTML;
53+
document.getElementById("help").innerHTML = ihtml + "<br><br>Linux requires <a href='https://github.com/gpuweb/gpuweb/wiki/Implementation-Status#chromium-chrome-edge-etc'>extra steps</a>.";
54+
} else if (ua.includes("CrOS")) {
55+
const ihtml = document.getElementById("help").innerHTML;
56+
document.getElementById("help").innerHTML = ihtml.replaceAll("browser", "device");
57+
} else if (!ua.includes("Chrome")) {
58+
const ihtml = document.getElementById("help").innerHTML;
59+
document.getElementById("help").innerHTML = "Your browser has not implemented WebGPU or is out of date.";
60+
}
61+
});
62+
</script>
63+
64+
<p id="help" class="mb-4 text-white text-2xl text-center" style="display: none;">
65+
<b class="font-extrabold">Update your browser</b>, then go to
66+
<span style="background-color: #101010;" class="py-1 pl-2 pr-1 rounded-sm text-xl">
67+
chrome://flags
68+
</span>,<br>
69+
70+
<b class="font-extrabold">search for</b> and enable
71+
<span style="background-color: #101010;" class="py-1 pl-2 pr-1 rounded-sm text-xl">
72+
Unsafe WebGPU Support
73+
</span>,<br>
74+
75+
then restart your browser.
76+
</p>
77+
78+
<p id="onboard-help" class="mb-4 text-white text-2xl text-center" style="display: none;">
79+
Click on the window, then click space to start.
80+
You can interact with the mouse.
81+
</p>
82+
</body>
83+
6184
</html>

0 commit comments

Comments
 (0)