Skip to content

Commit 5fb15c7

Browse files
kota-shiokarakota-shiokara
authored
Merge pull request #16 from kota-shiokara/develop
Develop
2 parents accabb3 + 1f9fc64 commit 5fb15c7

File tree

4 files changed

+120
-3
lines changed

4 files changed

+120
-3
lines changed

‎build.gradle.kts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import org.jetbrains.kotlin.gradle.targets.js.webpack.KotlinWebpackConfig
22

33
group = "jp.ikanoshiokara"
4-
version = "2.0.0"
4+
version = "2.1.0"
55

66
repositories {
77
google()

‎src/wasmJsMain/resources/animation.css

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
/* KEYFRAMES */
2+
@keyframes pulse {
3+
from {
4+
opacity: 1;
5+
transform: scale(1);
6+
}
7+
to {
8+
opacity: .25;
9+
transform: scale(.75);
10+
}
11+
}
12+
13+
/* GRID STYLING */
14+
.spinner-box {
15+
height: 300px;
16+
display: flex;
17+
justify-content: center;
18+
align-items: center;
19+
background-color: transparent;
20+
}
21+
22+
/* PULSE BUBBLES */
23+
24+
.pulse-container {
25+
width: 120px;
26+
display: flex;
27+
justify-content: space-between;
28+
align-items: center;
29+
}
30+
31+
.pulse-bubble {
32+
width: 20px;
33+
height: 20px;
34+
border-radius: 50%;
35+
background-color: #3ff9dc;
36+
}
37+
38+
.pulse-bubble-1 {
39+
animation: pulse .4s ease 0s infinite alternate;
40+
}
41+
.pulse-bubble-2 {
42+
animation: pulse .4s ease .2s infinite alternate;
43+
}
44+
.pulse-bubble-3 {
45+
animation: pulse .4s ease .4s infinite alternate;
46+
}
47+
48+
.loading {
49+
width: 100%;
50+
height: 100%;
51+
52+
display: flex;
53+
justify-content: center;
54+
align-items: center;
55+
}
56+
57+
.waiting {
58+
margin: auto;
59+
}
60+
61+
.waiting p {
62+
margin-left: 4px;
63+
margin-right: 4px;
64+
65+
color: whitesmoke;
66+
67+
font-family: 'Andika', serif;
68+
font-style: normal;
69+
font-weight: bold;
70+
text-align: center;
71+
}
72+
73+
.no-wasm-gc {
74+
display: none;
75+
}

‎src/wasmJsMain/resources/index.html

Lines changed: 30 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,15 +2,44 @@
22
<html lang="en">
33
<head>
44
<meta charset="UTF-8">
5-
<title>kota-shiokara's portfolio</title>
5+
<!-- <title>kota-shiokara's portfolio</title>-->
66
<link rel="icon" href="https://avatars.githubusercontent.com/u/50353938?s=96&v=4">
77
<link rel="apple-touch-icon" href="img/apple-touch-icon-180x180.png" sizes="180x180">
88
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
99

10+
<link rel="stylesheet" href="animation.css"/>
11+
<style>
12+
html, body {
13+
width: 100%;
14+
height: 100%;
15+
margin: 0;
16+
padding: 0;
17+
background-color: #F5B1AA;
18+
overflow: hidden;
19+
}
20+
</style>
21+
1022
<script type="application/javascript" src="skiko.js"></script>
1123
<script type="application/javascript" src="kota-shiokara.github.io.js"></script>
1224
</head>
1325
<body>
26+
<div class="loading" id="loading">
27+
<div class="waiting" id="waiting">
28+
<p class="instruction-text">Welcome to kota-shiokara's portfolio!</p>
29+
<p class="instruction-text">このページはWebAssemblyの初期化後表示されます。</p>
30+
<p class="instruction-text">This page will begin shortly after WebAssembly component has been initialized.</p>
31+
<div class="spinner-box">
32+
<div class="pulse-container">
33+
<div class="pulse-bubble pulse-bubble-1"></div>
34+
<div class="pulse-bubble pulse-bubble-2"></div>
35+
<div class="pulse-bubble pulse-bubble-3"></div>
36+
</div>
37+
</div>
38+
</div>
39+
<div class="no-wasm-gc" id="no-wasm-gc">
40+
<p class="instruction-text">Oops! Failed to load Wasm-GC. Please follow these <a href="https://kotlinlang.org/docs/wasm-get-started.html#troubleshooting" >instructions</a> to enable wasm-gc in your browser, or use the <a href="../js">js</a> site</p>
41+
</div>
42+
</div>
1443
<canvas id="ComposeTarget"></canvas>
1544
</body>
1645
</html>

‎src/wasmJsMain/resources/load.mjs

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -2,4 +2,17 @@ import { instantiate } from './kota-shiokara.github.io.uninstantiated.mjs';
22

33
await wasmSetup;
44

5-
instantiate({ skia: Module['asm'] });
5+
let te = null;
6+
try {
7+
await instantiate({ skia: Module['asm'] });
8+
} catch (e) {
9+
te = e;
10+
}
11+
12+
if (te == null) {
13+
document.getElementById("loading").style.display="none";
14+
document.getElementById("loading").style.visibility="hidden";
15+
} else {
16+
document.getElementById("waiting").style.display = "none";
17+
document.getElementById("no-wasm-gc").style.display = "block";
18+
}

0 commit comments

Comments
 (0)