Skip to content

Commit e89f6b2

Browse files
MaxGraeyMaxGraey
authored
improve html meta & code styles (#1)
1 parent f226a7b commit e89f6b2

7 files changed

Lines changed: 130 additions & 82 deletions

File tree

‎game-of-life/index.html‎

Lines changed: 9 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,18 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="user-scalable=0" />
46
<title>Conway's Game of Life - AssemblyScript</title>
57
<link rel="icon" href="https://assemblyscript.org/favicon.ico" type="image/x-icon" />
6-
<meta name="viewport" content="user-scalable=0" />
78
<style>
8-
html, body { height: 100%; margin: 0; overflow: hidden; color: #111; background: #fff; font-family: sans-serif; }
9-
body { border-top: 2px solid #bc18d4; }
10-
h1 { padding: 18px 20px 20px; font-size: 12pt; margin: 0; }
11-
a { color: #111; text-decoration: none; }
12-
a:hover { color: #bc18d4; text-decoration: underline; }
13-
canvas { position: absolute; top: 60px; left: 20px; width: calc(100% - 40px); height: calc(100% - 80px); background: #100707; cursor: cell; user-select: none; }
14-
#edge { position: absolute; bottom: 40px; right: 40px; color: #fff; display: none; text-shadow: 0 1px 2px #000; -ms-user-select: none; user-select: none; }
9+
html, body { height: 100%; margin: 0; overflow: hidden; color: #111; background: #fff; font-family: sans-serif; }
10+
body { border-top: 2px solid #bc18d4; }
11+
h1 { padding: 18px 20px 20px; font-size: 12pt; margin: 0; }
12+
a { color: #111; text-decoration: none; }
13+
a:hover { color: #bc18d4; text-decoration: underline; }
14+
canvas { position: absolute; top: 60px; left: 20px; width: calc(100% - 40px); height: calc(100% - 80px); background: #100707; cursor: cell; user-select: none; }
15+
#edge { position: absolute; bottom: 40px; right: 40px; color: #fff; display: none; text-shadow: 0 1px 2px #000; -ms-user-select: none; user-select: none; }
1516
</style>
1617
</head>
1718
<body>

‎interference/assembly/index.ts‎

Lines changed: 7 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -11,22 +11,24 @@ function set(x: i32, y: i32, v: f32): void {
1111
function distance(x1: i32, y1: i32, x2: f32, y2: f32): f32 {
1212
var dx = <f32>x1 - x2;
1313
var dy = <f32>y1 - y2;
14-
return sqrt(dx * dx + dy * dy);
14+
return Mathf.sqrt(dx * dx + dy * dy);
1515
}
1616

1717
export function update(tick: f32): void {
18-
var hw = <f32>width * 0.5,
19-
hh = <f32>height * 0.5;
18+
var w = <f32>width;
19+
var h = <f32>height;
20+
var hw = w * 0.5,
21+
hh = h * 0.5;
2022
var cx1 = (Mathf.sin(tick * 2) + Mathf.sin(tick )) * hw * 0.3 + hw,
2123
cy1 = (Mathf.cos(tick) ) * hh * 0.3 + hh,
2224
cx2 = (Mathf.sin(tick * 4) + Mathf.sin(tick + 1.2)) * hw * 0.3 + hw,
2325
cy2 = (Mathf.sin(tick * 3) + Mathf.cos(tick + 0.1)) * hh * 0.3 + hh;
24-
var res = <f32>48 / max(<f32>width, <f32>height);
26+
var res = <f32>48 / Mathf.max(w, h);
2527
var y = 0;
2628
do {
2729
let x = 0;
2830
do {
29-
set(x, y, abs(
31+
set(x, y, Mathf.abs(
3032
Mathf.sin(distance(x, y, cx1, cy1) * res) +
3133
Mathf.sin(distance(x, y, cx2, cy2) * res)
3234
) * 120);

‎interference/build/optimized.wasm‎

2 Bytes
Binary file not shown.

‎interference/index.html‎

Lines changed: 37 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,27 @@
1-
<!DOCTYPE html><html><head><title>Interference effect - AssemblyScript</title><link rel="icon" href="https://assemblyscript.org/favicon.ico" type="image/x-icon"/><style>html, body{height: 100%; margin: 0; overflow: hidden; color: #111; background: #fff; font-family: sans-serif;}body{border-top: 2px solid #50ad7b;}h1{padding: 20px; font-size: 12pt; margin: 0;}a{color: #111; text-decoration: none;}a:hover{color: #0074C1; text-decoration: underline;}canvas{position: absolute; top: 60px; left: 20px; width: calc(100% - 40px); height: calc(100% - 80px); background: #aff;}</style><body><h1> <a href="https://github.com/ColinEberhardt/wasm-interference">Interference effect</a> in <a href="http://assemblyscript.org">AssemblyScript</a> ( <a href="https://github.com/AssemblyScript/examples/blob/master/interference/assembly/index.ts">source</a> )</h1>
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="user-scalable=0" />
6+
<title>Interference effect - AssemblyScript</title>
7+
<link rel="icon" href="https://assemblyscript.org/favicon.ico" type="image/x-icon"/>
8+
<style>
9+
html, body { height: 100%; margin: 0; overflow: hidden; color: #111; background: #fff; font-family: sans-serif; }
10+
body { border-top: 2px solid #50ad7b; }
11+
h1 { padding: 20px; font-size: 12pt; margin: 0; }
12+
a { color: #111; text-decoration: none; }
13+
a:hover { color: #0074C1; text-decoration: underline; }
14+
canvas { position: absolute; top: 60px; left: 20px; width: calc(100% - 40px); height: calc(100% - 80px); background: #aff; }
15+
</style>
16+
</head>
17+
<body>
18+
<h1>
19+
<a href="https://github.com/ColinEberhardt/wasm-interference">Interference effect</a> in <a href="http://assemblyscript.org">AssemblyScript</a> ( <a href="https://github.com/AssemblyScript/examples/blob/master/interference/assembly/index.ts">source</a> )
20+
</h1>
221

322
<canvas id="canvas"></canvas>
4-
<script>
23+
24+
<script>"use strict";
525
var step = 0.001;
626
WebAssembly.instantiateStreaming(fetch("build/optimized.wasm"), { Math })
727
.then(module => {
@@ -27,8 +47,21 @@
2747
exports.update(tick += step);
2848
new Uint32Array(image.data.buffer).set(new Uint32Array(exports.memory.buffer, exports.offset, width * height));
2949
context.putImageData(image, 0, 0);
30-
})()
50+
})();
3151
});
3252
</script>
3353

34-
<style>#warning{z-index: 10; position: absolute; top: 60px; left: 20px; width: calc(100% - 240px); height: calc(100% - 280px); background: rgba(0,0,0,0.95); text-align: center; color: #fff; padding: 100px; font-size: 200%; cursor: pointer;}</style><div id="warning"> <p style="color: #f00">EPILEPSY WARNING</p><p style="text-align: justify">A very small percentage of individuals may experience epileptic seizures when exposed to certain light patterns or flashing lights. Exposure to certain patterns or backgrounds on a computer screen may induce an epileptic seizure in these individuals. Certain conditions may induce previously undetected epileptic symptoms even in persons who have no history of prior seizures or epilepsy.</p><p style="text-align: justify">If you experience any of the following symptoms while viewing - dizziness, altered vision, eye or muscle twitches, loss of awareness, disorientation, any involuntary movement, or convulsions - IMMEDIATELY discontinue use and consult your physician.</p><p>(click to continue)</p></div><script>document.getElementById("warning").addEventListener("click", (event)=>{document.body.removeChild(document.getElementById("warning")); step=0.012});</script></body></html>
54+
<style>
55+
#warning { z-index: 10; position: absolute; top: 60px; left: 20px; width: calc(100% - 240px); height: calc(100% - 280px); background: rgba(0,0,0,0.95); text-align: center; color: #fff; padding: 100px; font-size: 200%; cursor: pointer;}
56+
</style>
57+
<div id="warning">
58+
<p style="color: #f00">EPILEPSY WARNING</p>
59+
<p style="text-align: justify">A very small percentage of individuals may experience epileptic seizures when exposed to certain light patterns or flashing lights. Exposure to certain patterns or backgrounds on a computer screen may induce an epileptic seizure in these individuals. Certain conditions may induce previously undetected epileptic symptoms even in persons who have no history of prior seizures or epilepsy.</p>
60+
<p style="text-align: justify">If you experience any of the following symptoms while viewing - dizziness, altered vision, eye or muscle twitches, loss of awareness, disorientation, any involuntary movement, or convulsions - IMMEDIATELY discontinue use and consult your physician.</p>
61+
<p>(click to continue)</p>
62+
</div>
63+
<script>
64+
document.getElementById("warning").addEventListener("click", event => { document.body.removeChild(document.getElementById("warning")); step = 0.012 });
65+
</script>
66+
</body>
67+
</html>

‎mandelbrot/index.html‎

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,15 +1,17 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="user-scalable=0" />
46
<title>Mandelbrot set - AssemblyScript</title>
57
<link rel="icon" href="https://assemblyscript.org/favicon.ico" type="image/x-icon" />
68
<style>
7-
html, body { height: 100%; margin: 0; overflow: hidden; color: #111; background: #fff; font-family: sans-serif; }
8-
h1 { padding: 20px; font-size: 12pt; margin: 0; }
9-
a { color: #111; text-decoration: none; }
10-
a:hover { color: #0074C1; text-decoration: underline; }
11-
canvas { position: absolute; top: 60px; left: 20px; width: calc(100% - 40px); height: calc(100% - 80px); background: #eee; }
12-
canvas.gradient { left: 0; top: 0px; height: 2px; width: 100%; }
9+
html, body { height: 100%; margin: 0; overflow: hidden; color: #111; background: #fff; font-family: sans-serif; }
10+
h1 { padding: 20px; font-size: 12pt; margin: 0; }
11+
a { color: #111; text-decoration: none; }
12+
a:hover { color: #0074C1; text-decoration: underline; }
13+
canvas { position: absolute; top: 60px; left: 20px; width: calc(100% - 40px); height: calc(100% - 80px); background: #eee; }
14+
canvas.gradient { left: 0; top: 0px; height: 2px; width: 100%; }
1315
</style>
1416
</head>
1517
<body>

‎n-body/index.html‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,17 @@
11
<!DOCTYPE html>
22
<html>
33
<head>
4+
<meta charset="utf-8">
5+
<meta name="viewport" content="user-scalable=0" />
46
<title>N-body system - AssemblyScript</title>
57
<link rel="icon" href="https://assemblyscript.org/favicon.ico" type="image/x-icon" />
6-
<meta name="viewport" content="user-scalable=0" />
78
<style>
8-
html, body { height: 100%; margin: 0; overflow: hidden; color: #111; background: #fff; font-family: sans-serif; }
9-
body { border-top: 2px solid #070809; }
10-
h1 { padding: 18px 20px 20px; font-size: 12pt; margin: 0; }
11-
a { color: #111; text-decoration: none; }
12-
a:hover { color: #efbd03; text-decoration: underline; }
13-
canvas { position: absolute; top: 60px; left: 20px; width: calc(100% - 40px); height: calc(100% - 80px); background: #070809; }
9+
html, body { height: 100%; margin: 0; overflow: hidden; color: #111; background: #fff; font-family: sans-serif; }
10+
body { border-top: 2px solid #070809; }
11+
h1 { padding: 18px 20px 20px; font-size: 12pt; margin: 0; }
12+
a { color: #111; text-decoration: none; }
13+
a:hover { color: #efbd03; text-decoration: underline; }
14+
canvas { position: absolute; top: 60px; left: 20px; width: calc(100% - 40px); height: calc(100% - 80px); background: #070809; }
1415
</style>
1516
</head>
1617
<body>

‎sdk/index.html‎

Lines changed: 61 additions & 52 deletions
Original file line numberDiff line numberDiff line change
@@ -1,59 +1,68 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8">
5+
<title>AssemblyScript SDK Example</title>
6+
</head>
7+
<body>
18
<script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.6/require.min.js"></script>
29
<script>
3-
require([ "https://cdn.jsdelivr.net/npm/assemblyscript@latest/dist/sdk.js" ], function(sdk) {
4-
const { asc } = sdk;
5-
asc.ready.then(() => {
6-
console.log("Running simple example...");
7-
simpleExample(asc);
8-
console.log("\nRunning extended example...");
9-
extendedExample(asc);
10+
require([ "https://cdn.jsdelivr.net/npm/assemblyscript@latest/dist/sdk.js" ], ({ asc }) => {
11+
asc.ready.then(() => {
12+
console.log("Running simple example...");
13+
simpleExample(asc);
14+
console.log("\nRunning extended example...");
15+
extendedExample(asc);
16+
});
1017
});
11-
});
1218

13-
// This uses `asc.compileString`, a convenience API useful if all one wants to
14-
// do is to quickly compile a single source string to WebAssembly.
15-
function simpleExample(asc) {
16-
const { text, binary } = asc.compileString(`export function test(): void {}`, {
17-
optimizeLevel: 3,
18-
runtime: "none"
19-
});
20-
console.log(">>> TEXT >>>\n" + text);
21-
console.log(">>> BINARY >>>\n" + binary.length + " bytes");
22-
}
19+
const SOURCE_CODE = `export function test(): void {}`;
2320

24-
// The full API works very much like asc on the command line, with additional
25-
// environment bindings being provided to access the (virtual) file system.
26-
function extendedExample(asc) {
27-
const stdout = asc.createMemoryStream();
28-
const stderr = asc.createMemoryStream();
29-
asc.main([
30-
"module.ts",
31-
"-O3",
32-
"--runtime", "none",
33-
"--binaryFile", "module.wasm",
34-
"--textFile", "module.wat",
35-
"--sourceMap"
36-
], {
37-
stdout: stdout,
38-
stderr: stderr,
39-
readFile: (name, baseDir) => {
40-
if (name === "module.ts") return `export function test(): void {}`;
41-
return null;
42-
},
43-
writeFile: (name, data, baseDir) => {
44-
console.log(">>> WRITE:" + name + " >>>\n" + data.length);
45-
},
46-
listFiles: (dirname, baseDir) => {
47-
return [];
48-
}
49-
}, err => {
50-
console.log(">>> STDOUT >>>\n" + stdout.toString());
51-
console.log(">>> STDERR >>>\n" + stderr.toString());
52-
if (err) {
53-
console.log(">>> THROWN >>>");
54-
console.log(err);
55-
}
56-
});
57-
}
21+
// This uses `asc.compileString`, a convenience API useful if all one wants to
22+
// do is to quickly compile a single source string to WebAssembly.
23+
function simpleExample(asc) {
24+
const { text, binary } = asc.compileString(SOURCE_CODE, {
25+
optimizeLevel: 3,
26+
runtime: "none"
27+
});
28+
console.log(`>>> TEXT >>>\n${text}`);
29+
console.log(`>>> BINARY >>>\n${binary.length} bytes`);
30+
}
31+
32+
// The full API works very much like asc on the command line, with additional
33+
// environment bindings being provided to access the (virtual) file system.
34+
function extendedExample(asc) {
35+
const stdout = asc.createMemoryStream();
36+
const stderr = asc.createMemoryStream();
37+
asc.main([
38+
"module.ts",
39+
"-O3",
40+
"--runtime", "none",
41+
"--binaryFile", "module.wasm",
42+
"--textFile", "module.wat",
43+
"--sourceMap"
44+
], {
45+
stdout,
46+
stderr,
47+
readFile(name, baseDir) {
48+
return name === "module.ts" ? SOURCE_CODE : null;
49+
},
50+
writeFile(name, data, baseDir) {
51+
console.log(`>>> WRITE:${name} >>>\n${data.length}`);
52+
},
53+
listFiles(dirname, baseDir) {
54+
return [];
55+
}
56+
}, err => {
57+
console.log(`>>> STDOUT >>>\n${stdout.toString()}`);
58+
console.log(`>>> STDERR >>>\n${stderr.toString()}`);
59+
if (err) {
60+
console.log(">>> THROWN >>>");
61+
console.log(err);
62+
}
63+
});
64+
}
5865
</script>
5966
<p>See the browser console!</p>
67+
</body>
68+
</html>

0 commit comments

Comments
 (0)