Naloga 3 WIP

2024-12-28 19:58:17 +01:00
parent 7ad330422b
commit a20a45ebd0
51 changed files with 3327 additions and 28 deletions
--- a/naloga_3/engine/systems/ResizeSystem.js
+++ b/naloga_3/engine/systems/ResizeSystem.js
@@ -0,0 +1,84 @@
+export class ResizeSystem {
+
+    constructor({
+        canvas,
+        resize,
+        resolutionFactor = 1,
+        minWidth = 1,
+        minHeight = 1,
+        maxWidth = Infinity,
+        maxHeight = Infinity,
+    } = {}) {
+        this._resize = this._resize.bind(this);
+
+        this.canvas = canvas;
+        this.resize = resize;
+
+        this.resolutionFactor = resolutionFactor;
+        this.minCanvasSize = {
+            width: minWidth,
+            height: minHeight,
+        };
+        this.maxCanvasSize = {
+            width: maxWidth,
+            height: maxHeight,
+        };
+        this.lastSize = {
+            width: null,
+            height: null,
+        };
+    }
+
+    start() {
+        if (this._resizeFrame) {
+            return;
+        }
+
+        this._resizeFrame = requestAnimationFrame(this._resize);
+    }
+
+    stop() {
+        if (!this._resizeFrame) {
+            return;
+        }
+
+        this._resizeFrame = cancelAnimationFrame(this._resizeFrame);
+    }
+
+    _resize() {
+        this._resizeFrame = requestAnimationFrame(this._resize);
+
+        const displayRect = this.canvas.getBoundingClientRect();
+        if (displayRect.width === this.lastSize.width && displayRect.height === this.lastSize.height) {
+            return;
+        }
+
+        this.lastSize = {
+            width: displayRect.width,
+            height: displayRect.height,
+        };
+
+        const displaySize = {
+            width: displayRect.width * devicePixelRatio,
+            height: displayRect.height * devicePixelRatio,
+        };
+
+        const unclampedSize = {
+            width: Math.round(displaySize.width * this.resolutionFactor),
+            height: Math.round(displaySize.height * this.resolutionFactor),
+        };
+
+        const canvasSize = {
+            width: Math.min(Math.max(unclampedSize.width, this.minCanvasSize.width), this.maxCanvasSize.width),
+            height: Math.min(Math.max(unclampedSize.height, this.minCanvasSize.height), this.maxCanvasSize.height),
+        };
+
+        if (this.canvas.width !== canvasSize.width || this.canvas.height !== canvasSize.height) {
+            this.canvas.width = canvasSize.width;
+            this.canvas.height = canvasSize.height;
+        }
+
+        this.resize?.({ displaySize, canvasSize });
+    }
+
+}
--- a/naloga_3/engine/systems/UpdateSystem.js
+++ b/naloga_3/engine/systems/UpdateSystem.js
@@ -0,0 +1,49 @@
+export class UpdateSystem {
+
+    constructor(application) {
+        this._update = this._update.bind(this);
+        this._render = this._render.bind(this);
+
+        this.application = application;
+        this.running = false;
+    }
+
+    start() {
+        if (this.running) {
+            return;
+        }
+
+        this.application.start?.();
+
+        this._time = performance.now() / 1000;
+
+        this._updateFrame = setInterval(this._update, 0);
+        this._renderFrame = requestAnimationFrame(this._render);
+    }
+
+    stop() {
+        if (!this.running) {
+            return;
+        }
+
+        this.application.stop?.();
+
+        this._updateFrame = clearInterval(this._updateFrame);
+        this._renderFrame = cancelAnimationFrame(this._render);
+    }
+
+    _update() {
+        const time = performance.now() / 1000;
+        const dt = time - this._time;
+        this._time = time;
+
+        this.application.update?.(time, dt);
+    }
+
+    _render() {
+        this._renderFrame = requestAnimationFrame(this._render);
+
+        this.application.render?.();
+    }
+
+}