Skip to content

Commit 84f2b27

Browse files
rezignedrezigned
committed
Use trunk instead of wasm-pack
1 parent 2cc1673 commit 84f2b27

File tree

8 files changed

+158
-157
lines changed

8 files changed

+158
-157
lines changed

‎.gitignore‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
**/target
22
**/pkg
3+
**/dist
34
Cargo.lock
45
.DS_Store
56
.vscode

‎examples/wasm/Cargo.toml‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,8 +3,8 @@ name = "keymap-wasm"
33
version = "0.1.0"
44
edition = "2021"
55

6-
[lib]
7-
crate-type = ["cdylib", "rlib"]
6+
# [lib]
7+
# crate-type = ["cdylib", "rlib"]
88

99
# Exclude from workspace
1010
[workspace]

‎examples/wasm/game.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,7 +83,7 @@ const GROUND_Y = canvas.height - CONFIG.GROUND_HEIGHT;
8383

8484
// Image loading
8585
const playerImage = new Image();
86-
playerImage.src = "./nyan_cat.gif";
86+
playerImage.src = "/public/nyan_cat.gif";
8787

8888
class Player {
8989
constructor() {

‎examples/wasm/index.css‎

Lines changed: 141 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,141 @@
1+
@import url('https://fonts.googleapis.com/css2?family=Pixelify+Sans:[email protected]&family=Press+Start+2P&family=Silkscreen:wght@400;700&display=swap');
2+
3+
@font-face {
4+
font-family: 'PixelOperatorMonoRegular';
5+
src: url('/public/fonts/PixelOperatorMonoRegular.ttf') format('truetype');
6+
font-weight: normal;
7+
font-style: normal;
8+
}
9+
body {
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
flex-direction: column;
14+
min-height: 100vh;
15+
margin: 0;
16+
padding-top: 1.5rem;
17+
background-color: #f0f4f8; /* Soft light blue-gray */
18+
font-family: 'Silkscreen', cursive; /* Pixel font for everything */
19+
color: #334e68; /* Dark blue-gray text */
20+
}
21+
body > * {
22+
width: 600px;
23+
margin: 0 0 2rem;
24+
}
25+
h1, h2 {
26+
font-family: 'Press Start 2P', cursive; /* Pixel font for everything */
27+
text-align: center;
28+
}
29+
h1 {
30+
color: #243b53; /* Darker blue-gray for title */
31+
}
32+
h3 {
33+
margin-bottom: 1.5rem;
34+
}
35+
h4 {
36+
margin-bottom: 1.2rem;
37+
}
38+
ul {
39+
line-height: 1.5em;
40+
}
41+
code, p {
42+
font-family: 'Pixel Operator Mono', monospace;
43+
font-family: 'Pixelon', monospace;
44+
font-family: 'PixelOperatorMonoRegular', monospace;
45+
}
46+
.text, p {
47+
color: #5a7184; /* Medium blue-gray */
48+
}
49+
p {
50+
font-size: 1.2em;
51+
margin: 0 0 1em;
52+
line-height: 1.3em;
53+
}
54+
p code {
55+
color: #f01973;
56+
}
57+
code {
58+
line-height: 1.2em;
59+
}
60+
.game-container {
61+
position: relative;
62+
width: 600px;
63+
height: 300px;
64+
border: 4px solid #9fb3c8; /* Muted blue-gray border */
65+
box-sizing: content-box; /* Include padding and border in the element's total width and height */
66+
}
67+
canvas {
68+
background-color: #0c0c1f; /* Dark blue night sky */
69+
image-rendering: pixelated; /* Ensure pixel art stays sharp */
70+
image-rendering: -moz-crisp-edges;
71+
image-rendering: -webkit-crisp-edges;
72+
display: block; /* Remove extra space below canvas */
73+
}
74+
.socials a {
75+
float: right;
76+
margin-left: 0.5em;
77+
}
78+
#score {
79+
margin-top: 1em;
80+
font-size: 1.6em;
81+
text-align: right;
82+
}
83+
#gameOverMessage {
84+
position: absolute;
85+
top: 33%;
86+
left: 50%;
87+
transform: translate(-50%, -50%);
88+
font-size: 3.5em;
89+
color: #ef4444; /* Modern red */
90+
text-shadow: 2px 2px 0px #dc2626; /* Slightly darker red shadow */
91+
letter-spacing: 3px;
92+
text-transform: uppercase;
93+
display: none;
94+
z-index: 10;
95+
white-space: nowrap; /* Prevent text wrapping */
96+
}
97+
.game-container button {
98+
padding: 10px 20px;
99+
font-size: 1em;
100+
cursor: pointer;
101+
color: white;
102+
border-radius: 4px;
103+
transition: background-color 0.1s ease;
104+
font-family: 'Press Start 2P', cursive;
105+
position: absolute;
106+
left: 50%;
107+
transform: translate(-50%, -50%);
108+
z-index: 10;
109+
display: none;
110+
}
111+
#restartButton {
112+
top: calc(50% + 20px); /* Position below game over message */
113+
border: 2px solid #059669; /* Darker green border */
114+
background-color: #10b981; /* Modern green */
115+
box-shadow: 2px 2px 0px #059669;
116+
}
117+
#restartButton:hover {
118+
background-color: #059669;
119+
}
120+
#shareButton {
121+
font-size: 0.7em;
122+
top: calc(50% + 80px);
123+
border: 2px solid #ddd;
124+
background-color: #0E0E0E;
125+
box-shadow: 2px 2px 0px #9b9b9b;
126+
}
127+
#shareButton:hover {
128+
background-color: #282828;
129+
}
130+
.rainbow {
131+
font-family: 'Press Start 2P', cursive;
132+
animation: rainbowColors 4s linear infinite;
133+
opacity: 1;
134+
text-decoration: none;
135+
}
136+
@keyframes rainbowColors {
137+
0% { color: #ff33aa; }
138+
40% { color: #ff0000; }
139+
80% { color: #ff7f00; }
140+
100% { color: #ff33aa; }
141+
}

‎examples/wasm/index.html‎

Lines changed: 12 additions & 152 deletions
Original file line numberDiff line numberDiff line change
@@ -1,151 +1,17 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4-
<meta charset="utf-8">
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1" />
6+
<meta property="og:title" content="keymap-rs + WASM (Nyan Jump!)" />
7+
<meta property="og:type" content="object" />
8+
<meta property="og:url" content="https://rezigned.com/keymap-rs" />
9+
<meta property="og:image" content="https://rezigned.github.io/keymap-rs/preview.png" />
510
<title>keymap-rs + WASM (Nyan Jump!)</title>
6-
<style>
7-
@font-face {
8-
font-family: 'PixelOperatorMonoRegular';
9-
src: url('/fonts/PixelOperatorMonoRegular.ttf') format('truetype');
10-
font-weight: normal;
11-
font-style: normal;
12-
}
13-
body {
14-
display: flex;
15-
align-items: center;
16-
justify-content: center;
17-
flex-direction: column;
18-
min-height: 100vh;
19-
margin: 0;
20-
padding-top: 1.5rem;
21-
background-color: #f0f4f8; /* Soft light blue-gray */
22-
font-family: 'Silkscreen', cursive; /* Pixel font for everything */
23-
color: #334e68; /* Dark blue-gray text */
24-
}
25-
body > * {
26-
width: 600px;
27-
margin: 0 0 2rem;
28-
}
29-
h1, h2 {
30-
font-family: 'Press Start 2P', cursive; /* Pixel font for everything */
31-
text-align: center;
32-
}
33-
h1 {
34-
color: #243b53; /* Darker blue-gray for title */
35-
}
36-
h3 {
37-
margin-bottom: 1.5rem;
38-
}
39-
h4 {
40-
margin-bottom: 1.2rem;
41-
}
42-
ul {
43-
line-height: 1.5em;
44-
}
45-
code, p {
46-
font-family: 'Pixel Operator Mono', monospace;
47-
font-family: 'Pixelon', monospace;
48-
font-family: 'PixelOperatorMonoRegular', monospace;
49-
}
50-
.text, p {
51-
color: #5a7184; /* Medium blue-gray */
52-
}
53-
p {
54-
font-size: 1.2em;
55-
margin: 0 0 1em;
56-
line-height: 1.3em;
57-
}
58-
p code {
59-
color: #f01973;
60-
}
61-
code {
62-
line-height: 1.2em;
63-
}
64-
.game-container {
65-
position: relative;
66-
width: 600px;
67-
height: 300px;
68-
border: 4px solid #9fb3c8; /* Muted blue-gray border */
69-
box-sizing: content-box; /* Include padding and border in the element's total width and height */
70-
}
71-
canvas {
72-
background-color: #0c0c1f; /* Dark blue night sky */
73-
image-rendering: pixelated; /* Ensure pixel art stays sharp */
74-
image-rendering: -moz-crisp-edges;
75-
image-rendering: -webkit-crisp-edges;
76-
display: block; /* Remove extra space below canvas */
77-
}
78-
.socials a {
79-
float: right;
80-
margin-left: 0.5em;
81-
}
82-
#score {
83-
margin-top: 1em;
84-
font-size: 1.6em;
85-
text-align: right;
86-
}
87-
#gameOverMessage {
88-
position: absolute;
89-
top: 33%;
90-
left: 50%;
91-
transform: translate(-50%, -50%);
92-
font-size: 3.5em;
93-
color: #ef4444; /* Modern red */
94-
text-shadow: 2px 2px 0px #dc2626; /* Slightly darker red shadow */
95-
letter-spacing: 3px;
96-
text-transform: uppercase;
97-
display: none;
98-
z-index: 10;
99-
white-space: nowrap; /* Prevent text wrapping */
100-
}
101-
.game-container button {
102-
padding: 10px 20px;
103-
font-size: 1em;
104-
cursor: pointer;
105-
color: white;
106-
border-radius: 4px;
107-
transition: background-color 0.1s ease;
108-
font-family: 'Press Start 2P', cursive;
109-
position: absolute;
110-
left: 50%;
111-
transform: translate(-50%, -50%);
112-
z-index: 10;
113-
display: none;
114-
}
115-
#restartButton {
116-
top: calc(50% + 20px); /* Position below game over message */
117-
border: 2px solid #059669; /* Darker green border */
118-
background-color: #10b981; /* Modern green */
119-
box-shadow: 2px 2px 0px #059669;
120-
}
121-
#restartButton:hover {
122-
background-color: #059669;
123-
}
124-
#shareButton {
125-
font-size: 0.7em;
126-
top: calc(50% + 80px);
127-
border: 2px solid #ddd;
128-
background-color: #0E0E0E;
129-
box-shadow: 2px 2px 0px #9b9b9b;
130-
}
131-
#shareButton:hover {
132-
background-color: #282828;
133-
}
134-
.rainbow {
135-
font-family: 'Press Start 2P', cursive;
136-
animation: rainbowColors 4s linear infinite;
137-
opacity: 1;
138-
text-decoration: none;
139-
}
140-
@keyframes rainbowColors {
141-
0% { color: #ff33aa; }
142-
40% { color: #ff0000; }
143-
80% { color: #ff7f00; }
144-
100% { color: #ff33aa; }
145-
}
146-
</style>
147-
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
148-
<link href="https://fonts.googleapis.com/css2?family=Silkscreen:wght@400;700&display=swap" rel="stylesheet">
11+
12+
<link data-trunk rel="css" href="/index.css" />
13+
<link data-trunk rel="copy-dir" href="/public" />
14+
14915
<link rel="stylesheet" href="https://unpkg.com/@highlightjs/[email protected]/styles/tomorrow-night-blue.min.css">
15016
</head>
15117
<body>
@@ -201,17 +67,11 @@ <h4>EXAMPLE: Key Override</h4>
20167
<pre><code class="language-yaml"># Now both 'space' and the 'up' arrow can be used to jump
20268
Jump = { keys = ["space", "up"], description = "Jump Jump!" }
20369
</code></pre>
70+
<script src="https://unpkg.com/@highlightjs/[email protected]/highlight.min.js"></script>
71+
<script src="https://unpkg.com/@highlightjs/[email protected]/languages/rust.min.js"></script>
20472
<script type="module">
205-
import init, { init_game, get_keymap_as_json } from './pkg/keymap_wasm.js';
206-
207-
init().then(() => {
208-
init_game();
209-
});
210-
21173
// Initialize syntax highlighting
21274
hljs.highlightAll();
21375
</script>
214-
<script src="https://unpkg.com/@highlightjs/[email protected]/highlight.min.js"></script>
215-
<script src="https://unpkg.com/@highlightjs/[email protected]/languages/rust.min.js"></script>
21676
</body>
21777
</html>

examples/wasm/fonts/PixelOperatorMonoRegular.ttf renamed to examples/wasm/public/fonts/PixelOperatorMonoRegular.ttf

File renamed without changes.

examples/wasm/nyan_cat.gif renamed to examples/wasm/public/nyan_cat.gif

File renamed without changes.

examples/wasm/src/lib.rs renamed to examples/wasm/src/main.rs

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -74,8 +74,7 @@ pub fn get_keymap_as_json() -> String {
7474
format!("[{}]", keymap_info.join(","))
7575
}
7676

77-
#[wasm_bindgen]
78-
pub fn init_game() {
77+
pub fn main() {
7978
let window = window().unwrap();
8079
let document = window.document().unwrap();
8180

0 commit comments

Comments
 (0)