pihkaal/pihkaal-me
1
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add prettier and format

Browse Source
This commit is contained in:
Stevan
2025-11-09 17:25:09 +01:00
parent 29c05de6ec
commit 5da56fd83b
8 changed files with 4059 additions and 2050 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
app/app.vue
View File

@@ -1,16 +1,16 @@
<template> <template>
<div class="wrapper"> <div class="wrapper">
<Screen> <Screen>
<Background /> <Background />
<Stats /> <Stats />
</Screen> </Screen>
</div> </div>
</template> </template>
<style> <style>
.wrapper { .wrapper {
width: fit-content; width: fit-content;
height: fit-content; height: fit-content;
border: 1px solid red; border: 1px solid red;
} }
</style> </style>

4
app/components/Background.vue
View File

@@ -1,6 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
useRender((ctx) => { useRender((ctx) => {
ctx.fillStyle = "green"; ctx.fillStyle = "green";
ctx.fillRect(0, 0, 100, 100); ctx.fillRect(0, 0, 100, 100);
}); });
</script> </script>

60
app/components/Screen.vue
View File

@@ -10,61 +10,61 @@ let lastFrameTime = 0;
let lastRealFrameTime = 0; let lastRealFrameTime = 0;
const registerUpdateCallback = (callback: UpdateCallback) => { const registerUpdateCallback = (callback: UpdateCallback) => {
updateCallbacks.add(callback); updateCallbacks.add(callback);
return () => updateCallbacks.delete(callback); return () => updateCallbacks.delete(callback);
}; };
const registerRenderCallback = (callback: RenderCallback) => { const registerRenderCallback = (callback: RenderCallback) => {
renderCallbacks.add(callback); renderCallbacks.add(callback);
return () => renderCallbacks.delete(callback); return () => renderCallbacks.delete(callback);
}; };
const renderFrame = (timestamp: number) => { const renderFrame = (timestamp: number) => {
if (!ctx) return; if (!ctx) return;
const deltaTime = timestamp - lastFrameTime; const deltaTime = timestamp - lastFrameTime;
lastFrameTime = timestamp; lastFrameTime = timestamp;
const start = Date.now(); const start = Date.now();
// update // update
for (const callback of updateCallbacks) { for (const callback of updateCallbacks) {
callback(deltaTime, lastRealFrameTime); callback(deltaTime, lastRealFrameTime);
} }
// render // render
ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT); ctx.clearRect(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT);
for (const callback of renderCallbacks) { for (const callback of renderCallbacks) {
callback(ctx); callback(ctx);
} }
lastRealFrameTime = Date.now() - start; lastRealFrameTime = Date.now() - start;
animationFrameId = requestAnimationFrame(renderFrame); animationFrameId = requestAnimationFrame(renderFrame);
}; };
onMounted(() => { onMounted(() => {
if (!canvas.value) throw new Error("Missing canvas"); if (!canvas.value) throw new Error("Missing canvas");
ctx = canvas.value.getContext("2d"); ctx = canvas.value.getContext("2d");
if (!ctx) throw new Error("Missing 2d context"); if (!ctx) throw new Error("Missing 2d context");
provide("registerUpdateCallback", registerUpdateCallback); provide("registerUpdateCallback", registerUpdateCallback);
provide("registerRenderCallback", registerRenderCallback); provide("registerRenderCallback", registerRenderCallback);
animationFrameId = requestAnimationFrame(renderFrame); animationFrameId = requestAnimationFrame(renderFrame);
}); });
onUnmounted(() => { onUnmounted(() => {
if (animationFrameId !== null) { if (animationFrameId !== null) {
cancelAnimationFrame(animationFrameId); cancelAnimationFrame(animationFrameId);
} }
}); });
</script> </script>
<template> <template>
<canvas ref="canvas" :width="SCREEN_WIDTH" :height="SCREEN_HEIGHT" /> <canvas ref="canvas" :width="SCREEN_WIDTH" :height="SCREEN_HEIGHT" />
<slot v-if="canvas" /> <slot v-if="canvas" />
</template> </template>

97
app/components/Stats.vue
View File

@@ -1,13 +1,13 @@
<script lang="ts" setup> <script lang="ts" setup>
const props = defineProps({ const props = defineProps({
x: { x: {
type: Number, type: Number,
default: 0, default: 0,
}, },
y: { y: {
type: Number, type: Number,
default: 0, default: 0,
}, },
}); });
const SAMPLES = 60; const SAMPLES = 60;
@@ -15,54 +15,53 @@ let average = { deltaTime: 0, realDeltaTime: 0 };
const lastFrames: (typeof average)[] = []; const lastFrames: (typeof average)[] = [];
useUpdate((deltaTime, realDeltaTime) => { useUpdate((deltaTime, realDeltaTime) => {
lastFrames.push({ deltaTime, realDeltaTime }); lastFrames.push({ deltaTime, realDeltaTime });
if (lastFrames.length > SAMPLES) { if (lastFrames.length > SAMPLES) {
lastFrames.shift(); lastFrames.shift();
} }
if (lastFrames.length > 0) { if (lastFrames.length > 0) {
average = { average = {
deltaTime: deltaTime:
lastFrames.reduce((acc, v) => acc + v.deltaTime, 0) / lastFrames.reduce((acc, v) => acc + v.deltaTime, 0) / lastFrames.length,
lastFrames.length, realDeltaTime:
realDeltaTime: lastFrames.reduce((acc, v) => acc + v.realDeltaTime, 0) /
lastFrames.reduce((acc, v) => acc + v.realDeltaTime, 0) / lastFrames.length,
lastFrames.length, };
}; }
}
}); });
useRender((ctx) => { useRender((ctx) => {
const LINE_COUNT = 5; const LINE_COUNT = 5;
const LINE_HEIGHT = 12; const LINE_HEIGHT = 12;
ctx.fillStyle = "red"; ctx.fillStyle = "red";
ctx.fillRect(props.x - 2, props.y, 140, LINE_COUNT * LINE_HEIGHT + 3); ctx.fillRect(props.x - 2, props.y, 140, LINE_COUNT * LINE_HEIGHT + 3);
let textY = props.y; let textY = props.y;
ctx.fillStyle = "black"; ctx.fillStyle = "black";
ctx.fillText("[avg on 60 frames]", props.x, (textY += LINE_HEIGHT)); ctx.fillText("[avg on 60 frames]", props.x, (textY += LINE_HEIGHT));
ctx.fillText( ctx.fillText(
`fps=${(1000 / average.deltaTime).toFixed()}`, `fps=${(1000 / average.deltaTime).toFixed()}`,
props.x, props.x,
(textY += LINE_HEIGHT), (textY += LINE_HEIGHT),
); );
ctx.fillText( ctx.fillText(
`frame_time=${average.deltaTime.toFixed(2)}ms`, `frame_time=${average.deltaTime.toFixed(2)}ms`,
props.x, props.x,
(textY += LINE_HEIGHT), (textY += LINE_HEIGHT),
); );
ctx.fillText( ctx.fillText(
`real_fps=${(1000 / average.realDeltaTime).toFixed()}`, `real_fps=${(1000 / average.realDeltaTime).toFixed()}`,
props.x, props.x,
(textY += LINE_HEIGHT), (textY += LINE_HEIGHT),
); );
ctx.fillText( ctx.fillText(
`real_frame_time=${average.realDeltaTime.toFixed(2)}ms`, `real_frame_time=${average.realDeltaTime.toFixed(2)}ms`,
props.x, props.x,
(textY += LINE_HEIGHT), (textY += LINE_HEIGHT),
); );
}); });
</script> </script>

6
nuxt.config.ts
View File

@@ -1,5 +1,5 @@
// https://nuxt.com/docs/api/configuration/nuxt-config // https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({ export default defineNuxtConfig({
compatibilityDate: '2025-07-15', compatibilityDate: "2025-07-15",
devtools: { enabled: true } devtools: { enabled: true },
}) });

6
package.json
View File

@@ -7,11 +7,15 @@
"dev": "nuxt dev", "dev": "nuxt dev",
"generate": "nuxt generate", "generate": "nuxt generate",
"preview": "nuxt preview", "preview": "nuxt preview",
"postinstall": "nuxt prepare" "postinstall": "nuxt prepare",
"format": "prettier --write --cache ."
}, },
"dependencies": { "dependencies": {
"nuxt": "^4.2.1", "nuxt": "^4.2.1",
"vue": "^3.5.22", "vue": "^3.5.22",
"vue-router": "^4.6.3" "vue-router": "^4.6.3"
},
"devDependencies": {
"prettier": "^3.6.2"
} }
} }

5916
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

2
pnpm-workspace.yaml
View File

@@ -1,3 +1,3 @@
onlyBuiltDependencies: onlyBuiltDependencies:
- '@parcel/watcher' - "@parcel/watcher"
- esbuild - esbuild