Skip to content

Commit 5ab7a43

Browse files
jsulpisjsulpis
committed
fix types
1 parent 9f20077 commit 5ab7a43

File tree

10 files changed

+212
-211
lines changed

10 files changed

+212
-211
lines changed

‎lib/package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
"test:local": "docker build -t usegl . && docker run --rm -v $(pwd)/test-results:/app/test-results usegl /bin/sh -c 'xvfb-run pnpm run test'",
3333
"test:ui": "playwright test --ui",
3434
"test:update": "docker build -t usegl . && docker run --rm -v $(pwd)/test-results:/app/test-results -v $(pwd)/tests/__screenshots__:/app/tests/__screenshots__ usegl",
35-
"typecheck": "tsc --noEmit && astro check"
35+
"typecheck": "tsc --noEmit && astro check --tsconfig playground/tsconfig.json"
3636
},
3737
"devDependencies": {
3838
"@astrojs/check": "0.9.4",

‎lib/playground/src/components/GlobalPlayPause.astro

Lines changed: 13 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -3,23 +3,23 @@ import PlayPause from "./PlayPause.astro";
33
---
44

55
<script>
6-
import { pauseAllLoops, playAllLoops } from "usegl";
6+
import { pauseAllLoops, playAllLoops } from "usegl";
77

8-
document.querySelector("[title=Play]").addEventListener("click", (event) => {
9-
if ((event.currentTarget as HTMLElement).ariaChecked === "true") {
10-
playAllLoops();
11-
} else {
12-
pauseAllLoops();
13-
}
14-
});
8+
document.querySelector("[title=Play]")!.addEventListener("click", (event) => {
9+
if ((event.currentTarget as HTMLElement).ariaChecked === "true") {
10+
playAllLoops();
11+
} else {
12+
pauseAllLoops();
13+
}
14+
});
1515
</script>
1616

1717
<PlayPause />
1818

1919
<style is:global>
20-
button {
21-
position: absolute;
22-
bottom: 0.9rem;
23-
left: 0.9rem;
24-
}
20+
button {
21+
position: absolute;
22+
bottom: 0.9rem;
23+
left: 0.9rem;
24+
}
2525
</style>

‎lib/playground/src/components/renderCount.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
export function incrementRenderCount() {
2-
const renderCountElement = document.querySelector("#renderCount");
2+
const renderCountElement = document.querySelector("#renderCount")!;
33
renderCountElement.textContent = `${Number(renderCountElement.textContent) + 1}`;
44
}

‎lib/playground/src/pages/core/gradient.astro

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -4,26 +4,26 @@ import Layout from "../../layouts/Layout.astro";
44
---
55

66
<script>
7-
import { useWebGLCanvas } from "usegl";
8-
import { incrementRenderCount } from "../../components/renderCount";
7+
import { useWebGLCanvas } from "usegl";
8+
import { incrementRenderCount } from "../../components/renderCount";
99

10-
const { onAfterRender } = useWebGLCanvas({
11-
canvas: document.querySelector("canvas"),
12-
fragment: /* glsl */ `
10+
const { onAfterRender } = useWebGLCanvas({
11+
canvas: document.querySelector("canvas")!,
12+
fragment: /* glsl */ `
1313
varying vec2 vUv;
1414
uniform float uTime;
1515

1616
void main() {
1717
gl_FragColor = vec4(vUv, sin(uTime) / 2. + .5, 1.);
1818
}
1919
`,
20-
immediate: false,
21-
});
20+
immediate: false,
21+
});
2222

23-
onAfterRender(incrementRenderCount);
23+
onAfterRender(incrementRenderCount);
2424
</script>
2525

2626
<Layout title="Gradient">
27-
<GlobalPlayPause />
28-
<canvas></canvas>
27+
<GlobalPlayPause />
28+
<canvas></canvas>
2929
</Layout>

‎lib/playground/src/pages/core/pause.astro

Lines changed: 109 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -4,12 +4,12 @@ import Layout from "../../layouts/Layout.astro";
44
---
55

66
<script>
7-
import { useWebGLCanvas, useLoop, pauseAllLoops, playAllLoops } from "usegl";
8-
import { incrementRenderCount } from "../../components/renderCount";
7+
import { useWebGLCanvas, useLoop, pauseAllLoops, playAllLoops } from "usegl";
8+
import { incrementRenderCount } from "../../components/renderCount";
99

10-
const { onAfterRender, uniforms } = useWebGLCanvas({
11-
canvas: "#glCanvas",
12-
fragment: /* glsl */ `
10+
const { onAfterRender, uniforms } = useWebGLCanvas({
11+
canvas: "#glCanvas",
12+
fragment: /* glsl */ `
1313
varying vec2 vUv;
1414
uniform float uTime1;
1515
uniform float uTime2;
@@ -45,114 +45,114 @@ import Layout from "../../layouts/Layout.astro";
4545
gl_FragColor = vec4(col, 1.);
4646
}
4747
`,
48-
uniforms: {
49-
uTime1: 0,
50-
uTime2: 0,
51-
uTime3: 0,
52-
},
53-
});
54-
55-
const { play: play1, pause: pause1 } = useLoop(
56-
({ deltaTime }) => {
57-
uniforms.uTime1 += deltaTime;
58-
},
59-
{ immediate: false }
60-
);
61-
62-
const { play: play2, pause: pause2 } = useLoop(
63-
({ time }) => {
64-
uniforms.uTime2 = time;
65-
},
66-
{ immediate: false }
67-
);
68-
69-
const { play: play3, pause: pause3 } = useLoop(
70-
({ elapsedTime }) => {
71-
uniforms.uTime3 = elapsedTime;
72-
},
73-
{ immediate: false }
74-
);
75-
76-
bindControl(".controls.local button:nth-of-type(1)", play1, pause1);
77-
bindControl(".controls.local button:nth-of-type(2)", play2, pause2);
78-
bindControl(".controls.local button:nth-of-type(3)", play3, pause3);
79-
80-
function playAll() {
81-
playAllLoops();
82-
document.querySelectorAll(".controls.local button").forEach((button) => {
83-
button.ariaChecked = "true";
84-
});
85-
}
86-
function pauseAll() {
87-
pauseAllLoops();
88-
document.querySelectorAll(".controls.local button").forEach((button) => {
89-
button.ariaChecked = "false";
90-
});
91-
}
92-
93-
bindControl(".global button", playAll, pauseAll);
94-
95-
function bindControl(selector, play: () => void, pause: () => void) {
96-
document.querySelector(selector).addEventListener("click", (event) => {
97-
if ((event.currentTarget as HTMLElement).ariaChecked === "true") {
98-
play();
99-
} else {
100-
pause();
101-
}
102-
});
103-
}
104-
105-
onAfterRender(incrementRenderCount);
48+
uniforms: {
49+
uTime1: 0,
50+
uTime2: 0,
51+
uTime3: 0,
52+
},
53+
});
54+
55+
const { play: play1, pause: pause1 } = useLoop(
56+
({ deltaTime }) => {
57+
uniforms.uTime1 += deltaTime;
58+
},
59+
{ immediate: false }
60+
);
61+
62+
const { play: play2, pause: pause2 } = useLoop(
63+
({ time }) => {
64+
uniforms.uTime2 = time;
65+
},
66+
{ immediate: false }
67+
);
68+
69+
const { play: play3, pause: pause3 } = useLoop(
70+
({ elapsedTime }) => {
71+
uniforms.uTime3 = elapsedTime;
72+
},
73+
{ immediate: false }
74+
);
75+
76+
bindControl(".controls.local button:nth-of-type(1)", play1, pause1);
77+
bindControl(".controls.local button:nth-of-type(2)", play2, pause2);
78+
bindControl(".controls.local button:nth-of-type(3)", play3, pause3);
79+
80+
function playAll() {
81+
playAllLoops();
82+
document.querySelectorAll(".controls.local button").forEach((button) => {
83+
button.ariaChecked = "true";
84+
});
85+
}
86+
function pauseAll() {
87+
pauseAllLoops();
88+
document.querySelectorAll(".controls.local button").forEach((button) => {
89+
button.ariaChecked = "false";
90+
});
91+
}
92+
93+
bindControl(".global button", playAll, pauseAll);
94+
95+
function bindControl(selector: string, play: () => void, pause: () => void) {
96+
document.querySelector(selector)!.addEventListener("click", (event) => {
97+
if ((event.currentTarget as HTMLElement).ariaChecked === "true") {
98+
play();
99+
} else {
100+
pause();
101+
}
102+
});
103+
}
104+
105+
onAfterRender(incrementRenderCount);
106106
</script>
107107

108108
<Layout title="Play/Pause">
109-
<div class="container">
110-
<div class="controls global">
111-
Global : <PlayPause />
112-
</div>
113-
<div class="controls local">
114-
<PlayPause />
115-
<PlayPause />
116-
<PlayPause />
117-
</div>
118-
<canvas id="glCanvas"></canvas>
119-
</div>
109+
<div class="container">
110+
<div class="controls global">
111+
Global : <PlayPause />
112+
</div>
113+
<div class="controls local">
114+
<PlayPause />
115+
<PlayPause />
116+
<PlayPause />
117+
</div>
118+
<canvas id="glCanvas"></canvas>
119+
</div>
120120
</Layout>
121121

122122
<style is:global>
123-
.container {
124-
width: 100%;
125-
display: flex;
126-
flex-direction: column;
127-
align-items: center;
128-
justify-content: center;
129-
text-align: center;
130-
font-size: min(1em, 2svmin);
131-
gap: 2em;
132-
}
133-
134-
.controls {
135-
display: flex;
136-
width: min(80%, 700px);
137-
max-width: 90svmin;
138-
justify-content: space-around;
139-
align-items: center;
140-
}
141-
142-
.controls.local button {
143-
font-size: 0.8em;
144-
}
145-
146-
.controls.global {
147-
justify-content: center;
148-
font-size: 1.5em;
149-
}
150-
151-
.controls button {
152-
position: static;
153-
}
154-
155-
canvas {
156-
aspect-ratio: 3/2;
157-
}
123+
.container {
124+
width: 100%;
125+
display: flex;
126+
flex-direction: column;
127+
align-items: center;
128+
justify-content: center;
129+
text-align: center;
130+
font-size: min(1em, 2svmin);
131+
gap: 2em;
132+
}
133+
134+
.controls {
135+
display: flex;
136+
width: min(80%, 700px);
137+
max-width: 90svmin;
138+
justify-content: space-around;
139+
align-items: center;
140+
}
141+
142+
.controls.local button {
143+
font-size: 0.8em;
144+
}
145+
146+
.controls.global {
147+
justify-content: center;
148+
font-size: 1.5em;
149+
}
150+
151+
.controls button {
152+
position: static;
153+
}
154+
155+
canvas {
156+
aspect-ratio: 3/2;
157+
}
158158
</style>

‎lib/playground/src/pages/core/scissor.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ import Layout from "../../layouts/Layout.astro";
66
import { useQuadRenderPass, useWebGLCanvas } from "usegl";
77
import { incrementRenderCount } from "../../components/renderCount";
88

9-
const canvas = document.querySelector("canvas");
9+
const canvas = document.querySelector("canvas")!;
1010

1111
const leftShader = useWebGLCanvas({
1212
canvas,

0 commit comments

Comments
 (0)