From 015faf5d40ac441cafafc4e55cefcaf2d16b9f81 Mon Sep 17 00:00:00 2001
From: pfych <contact@pfy.ch>
Date: Fri, 23 Aug 2024 09:54:25 +1000
Subject: [PATCH] Added basic render loop code

---
 src/renderLoop.html | 65 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 src/renderLoop.html
diff --git a/src/renderLoop.html b/src/renderLoop.html
new file mode 100644
index 0000000..e7ad491
--- /dev/null
+++ b/src/renderLoop.html
@@ -0,0 +1,65 @@
+<html>
+  <body>
+    <canvas id="render" width="1920" height="1080"></canvas>
+  </body>
+  <style>
+    #render {
+      width: 100%;
+      aspect-ratio: 16/9;
+    }
+  </style>
+  <script>
+    const canvas = document.getElementById("render");
+    const { width, height } = canvas;
+    const ctx = canvas.getContext("2d");
+    ctx.font = "32px sans-serif";
+    let lastRenderTime = performance.now();
+
+    const sprites = new Image();
+    sprites.src =
+      "https://assets.pfy.ch/shipyard-icons/New_JerseyShipyardIcon.png";
+    let spritePos = [100, 100];
+    let xFlip = 1;
+    let yFlip = 1;
+
+    const renderFrameRate = (delta) => {
+      const fps = 1 / (delta / 1000);
+
+      ctx.fillStyle = "#fff";
+      ctx.fillText(`${fps.toFixed()} FPS`, 10, 42);
+    };
+
+    const draw = (ms) => {
+      const delta = ms - lastRenderTime;
+
+      ctx.fillStyle = "#000";
+      ctx.fillRect(0, 0, width, height);
+
+      renderFrameRate(delta);
+
+      const moveDistance = 100 / delta;
+
+      spritePos[0] += moveDistance * xFlip;
+      spritePos[1] += moveDistance * yFlip;
+
+      if (spritePos[0] > width) {
+        xFlip = -1;
+      } else if (spritePos[0] <= 0) {
+        xFlip = 1;
+      }
+
+      if (spritePos[1] > height) {
+        yFlip = -1;
+      } else if (spritePos[1] <= 0) {
+        yFlip = 1;
+      }
+
+      ctx.drawImage(sprites, ...spritePos);
+
+      lastRenderTime = performance.now();
+      requestAnimationFrame(draw);
+    };
+
+    requestAnimationFrame(draw);
+  </script>
+</html>
