Skip to content

Commit c101ded

Browse files
fabmaxfabmax
committed
Fix js key events
1 parent 088a84d commit c101ded

2 files changed

Lines changed: 163 additions & 157 deletions

File tree

‎live/demos/index.html‎

Lines changed: 162 additions & 156 deletions
Original file line numberDiff line numberDiff line change
@@ -1,165 +1,171 @@
1-
<!DOCTYPE html>
1+
<!doctype html>
22
<html lang="en">
3-
<head>
4-
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
5-
<title>kool - Kotlin WebGPU / WebGL Engine</title>
6-
<style>
7-
body {
8-
background-color: black;
9-
border: 0;
10-
padding: 0;
11-
margin: 0;
12-
overflow: hidden;
13-
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
14-
}
15-
canvas {
16-
width: 100vw;
17-
height: 100vh;
18-
display: block;
19-
}
20-
21-
/* Loading Screen Styles */
22-
#loading-screen {
23-
position: fixed;
24-
top: 0;
25-
left: 0;
26-
width: 100vw;
27-
height: 100vh;
28-
background: linear-gradient(135deg, #0a0a0a 0%, #202020 100%);
29-
display: flex;
30-
flex-direction: column;
31-
justify-content: center;
32-
align-items: center;
33-
z-index: 1000;
34-
transition: opacity 0.5s ease-out;
35-
}
36-
37-
#loading-screen.fade-out {
38-
opacity: 0;
39-
pointer-events: none;
40-
}
41-
42-
.loading-logo {
43-
width: 200px;
44-
margin-bottom: 2rem;
45-
}
46-
47-
.loading-text {
48-
color: #ffffff;
49-
font-size: 4rem;
50-
margin-bottom: 2rem;
51-
opacity: 0.8;
52-
text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
53-
}
54-
55-
.progress-container {
56-
width: 400px;
57-
height: 6px;
58-
background-color: rgba(255, 255, 255, 0.1);
59-
border-radius: 3px;
60-
overflow: hidden;
61-
margin-bottom: 1rem;
62-
}
63-
64-
.progress-bar {
65-
height: 100%;
66-
background: linear-gradient(90deg, #9C27B0, #E1BEE7);
67-
width: 0%;
68-
transition: width 0.3s ease;
69-
border-radius: 3px;
70-
}
71-
72-
.progress-text {
73-
color: #ffffff;
74-
font-size: 0.9rem;
75-
opacity: 0.7;
76-
min-height: 1.2rem;
77-
}
78-
79-
@media (max-width: 600px) {
80-
.progress-container {
81-
width: 80vw;
3+
<head>
4+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5+
<title>kool - Kotlin WebGPU / WebGL Engine</title>
6+
<style>
7+
body {
8+
background-color: black;
9+
border: 0;
10+
padding: 0;
11+
margin: 0;
12+
overflow: hidden;
13+
font-family:
14+
-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
15+
sans-serif;
16+
}
17+
canvas {
18+
width: 100vw;
19+
height: 100vh;
20+
display: block;
21+
}
22+
23+
/* Loading Screen Styles */
24+
#loading-screen {
25+
position: fixed;
26+
top: 0;
27+
left: 0;
28+
width: 100vw;
29+
height: 100vh;
30+
background: linear-gradient(135deg, #0a0a0a 0%, #202020 100%);
31+
display: flex;
32+
flex-direction: column;
33+
justify-content: center;
34+
align-items: center;
35+
z-index: 1000;
36+
transition: opacity 0.5s ease-out;
8237
}
38+
39+
#loading-screen.fade-out {
40+
opacity: 0;
41+
pointer-events: none;
42+
}
43+
8344
.loading-logo {
84-
width: 100px;
45+
width: 200px;
46+
margin-bottom: 2rem;
8547
}
48+
8649
.loading-text {
87-
font-size: 1rem;
88-
text-align: center;
89-
padding: 0 1rem;
50+
color: #ffffff;
51+
font-size: 4rem;
52+
margin-bottom: 2rem;
53+
opacity: 0.8;
54+
text-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
55+
}
56+
57+
.progress-container {
58+
width: 400px;
59+
height: 6px;
60+
background-color: rgba(255, 255, 255, 0.1);
61+
border-radius: 3px;
62+
overflow: hidden;
63+
margin-bottom: 1rem;
64+
}
65+
66+
.progress-bar {
67+
height: 100%;
68+
background: linear-gradient(90deg, #9c27b0, #e1bee7);
69+
width: 0%;
70+
transition: width 0.3s ease;
71+
border-radius: 3px;
9072
}
91-
}
92-
</style>
93-
</head>
94-
<body>
95-
<!-- Loading Screen -->
96-
<div id="loading-screen">
97-
<div class="loading-logo"><img src="assets/kool-logo.svg" alt="kool-logo" width="100%"></div>
98-
<div class="loading-text">kool</div>
99-
<div class="progress-container">
100-
<div class="progress-bar" id="progress-bar"></div>
73+
74+
.progress-text {
75+
color: #ffffff;
76+
font-size: 0.9rem;
77+
opacity: 0.7;
78+
min-height: 1.2rem;
79+
}
80+
81+
@media (max-width: 600px) {
82+
.progress-container {
83+
width: 80vw;
84+
}
85+
.loading-logo {
86+
width: 100px;
87+
}
88+
.loading-text {
89+
font-size: 1rem;
90+
text-align: center;
91+
padding: 0 1rem;
92+
}
93+
}
94+
</style>
95+
</head>
96+
<body>
97+
<!-- Loading Screen -->
98+
<div id="loading-screen">
99+
<div class="loading-logo">
100+
<img src="assets/kool-logo.svg" alt="kool-logo" width="100%" />
101+
</div>
102+
<div class="loading-text">kool</div>
103+
<div class="progress-container">
104+
<div class="progress-bar" id="progress-bar"></div>
105+
</div>
106+
<div class="progress-text" id="progress-text">Initializing...</div>
101107
</div>
102-
<div class="progress-text" id="progress-text">Initializing...</div>
103-
</div>
104-
105-
<!-- tabindex is required to make canvas focusable, needed to get per-canvas key events -->
106-
<canvas id="glCanvas" tabindex="0">
107-
Your browser doesn't appear to support the
108-
<code>&lt;canvas&gt;</code> element.
109-
</canvas>
110-
111-
<script type="module">
112-
// Loading progress management
113-
const progressBar = document.getElementById('progress-bar');
114-
const progressText = document.getElementById('progress-text');
115-
const loadingScreen = document.getElementById('loading-screen');
116-
let progs = {}
117-
118-
function updateProgress(progress, text) {
119-
progressBar.style.width = (progress * 100) + '%';
120-
progressText.textContent = text;
121-
}
122-
123-
function hideLoadingScreen() {
124-
loadingScreen.classList.add('fade-out');
125-
setTimeout(() => { loadingScreen.style.display = 'none'; }, 500);
126-
}
127-
128-
async function fetchBlock(url, text) {
129-
let response = await fetch(url);
130-
const reader = response.body.getReader();
131-
const contentLength = +response.headers.get('Content-Length');
132-
let receivedLength = 0;
133-
while(true) {
134-
const {done, value} = await reader.read();
135-
if (done) {
136-
break;
108+
109+
<!-- tabindex is required to make canvas focusable, needed to get per-canvas key events -->
110+
<canvas id="glCanvas" tabindex="0">
111+
Your browser doesn't appear to support the
112+
<code>&lt;canvas&gt;</code> element.
113+
</canvas>
114+
115+
<script type="module">
116+
// Loading progress management
117+
const progressBar = document.getElementById("progress-bar");
118+
const progressText = document.getElementById("progress-text");
119+
const loadingScreen = document.getElementById("loading-screen");
120+
let progs = {};
121+
122+
function updateProgress(progress, text) {
123+
progressBar.style.width = progress * 100 + "%";
124+
progressText.textContent = text;
125+
}
126+
127+
function hideLoadingScreen() {
128+
loadingScreen.classList.add("fade-out");
129+
setTimeout(() => {
130+
loadingScreen.style.display = "none";
131+
}, 500);
132+
}
133+
134+
async function fetchBlock(url, text) {
135+
let response = await fetch(url);
136+
const reader = response.body.getReader();
137+
const contentLength = +response.headers.get("Content-Length");
138+
let receivedLength = 0;
139+
while (true) {
140+
const { done, value } = await reader.read();
141+
if (done) {
142+
break;
143+
}
144+
receivedLength += value.length;
145+
progs[url] = receivedLength / contentLength;
146+
const minimalProgress = Math.min(...Object.values(progs));
147+
updateProgress(minimalProgress, text);
137148
}
138-
receivedLength += value.length;
139-
progs[url] = receivedLength / contentLength;
140-
const minimalProgress = Math.min(...Object.values(progs))
141-
updateProgress(minimalProgress, text)
142149
}
143-
}
144-
145-
updateProgress(0, 'Loading kool...');
146-
147-
// Fetch essential files tracking progress before actually loading them - will be loaded from cache afterwards
148-
fetchBlock('assets/fonts/fira-sans-regular.png', 'Loading kool...')
149-
fetchBlock('7f085d05690ec456a08f.wasm', 'Loading kool...')
150-
fetchBlock('ae413906028609bc912e.wasm', 'Loading kool...')
151-
await fetchBlock('kool-demo.js', 'Loading kool...')
152-
153-
const script = document.createElement('script');
154-
script.src = 'kool-demo.js';
155-
script.onload = function() {
156-
hideLoadingScreen();
157-
};
158-
script.onerror = function() {
159-
updateProgress(0, 'Error loading kool');
160-
progressText.style.color = '#f44336';
161-
};
162-
document.head.appendChild(script);
163-
</script>
164-
</body>
165-
</html>
150+
151+
updateProgress(0, "Loading kool...");
152+
153+
// Fetch essential files tracking progress before actually loading them - will be loaded from cache afterwards
154+
fetchBlock("assets/fonts/fira-sans-regular.png", "Loading kool...");
155+
fetchBlock("7f085d05690ec456a08f.wasm", "Loading kool...");
156+
fetchBlock("b2f5769ab7645324657c.wasm.wasm", "Loading kool...");
157+
await fetchBlock("kool-demo.js", "Loading kool...");
158+
159+
const script = document.createElement("script");
160+
script.src = "kool-demo.js";
161+
script.onload = function () {
162+
hideLoadingScreen();
163+
};
164+
script.onerror = function () {
165+
updateProgress(0, "Error loading kool");
166+
progressText.style.color = "#f44336";
167+
};
168+
document.head.appendChild(script);
169+
</script>
170+
</body>
171+
</html>

‎live/demos/kool-demo.js‎

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)