From 7aec28076f8011369c10990f86a3f2180f83b99f Mon Sep 17 00:00:00 2001
From: Kariem816 <kariem816@gmail.com>
Date: Thu, 4 Jul 2024 20:26:31 +0300
Subject: [PATCH 1/3] fix wall texture over brightness when player is very
 close

---
 game.js | 2 +-
 game.ts | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/game.js b/game.js
index 44a9148..abdca1e 100644
--- a/game.js
+++ b/game.js
@@ -387,7 +387,7 @@ function renderWalls(display, player, scene) {
             const by2 = Math.min(display.backImageData.height - 1, y2);
             const tx = Math.floor(u * cell.width);
             const sh = (1 / Math.ceil(stripHeight)) * cell.height;
-            const shadow = 1 / display.zBuffer[x] * 2;
+            const shadow = Math.min(1 / display.zBuffer[x] * 2, 1);
             for (let y = by1; y <= by2; ++y) {
                 const ty = Math.floor((y - y1) * sh);
                 const destP = (y * display.backImageData.width + x) * 4;
diff --git a/game.ts b/game.ts
index ca2e893..2e42c79 100644
--- a/game.ts
+++ b/game.ts
@@ -466,7 +466,7 @@ function renderWalls(display: Display, player: Player, scene: Scene) {
             const by2 = Math.min(display.backImageData.height-1, y2);
             const tx = Math.floor(u*cell.width);
             const sh = (1/Math.ceil(stripHeight))*cell.height;
-            const shadow = 1/display.zBuffer[x]*2;
+            const shadow = Math.min(1/display.zBuffer[x]*2, 1);
             for (let y = by1; y <= by2; ++y) {
                 const ty = Math.floor((y - y1)*sh);
                 const destP = (y*display.backImageData.width + x)*4;

From 47da6564e37eac34b978ad85b5b55c3583d590da Mon Sep 17 00:00:00 2001
From: Kariem816 <kariem816@gmail.com>
Date: Thu, 4 Jul 2024 20:27:45 +0300
Subject: [PATCH 2/3] fix textures flipping when viewing from some angles

---
 game.js | 8 +++++++-
 game.ts | 6 +++++-
 2 files changed, 12 insertions(+), 2 deletions(-)

diff --git a/game.js b/game.js
index abdca1e..55ef9ca 100644
--- a/game.js
+++ b/game.js
@@ -375,9 +375,15 @@ function renderWalls(display, player, scene) {
             const stripHeight = display.backImageData.height / display.zBuffer[x];
             let u = 0;
             const t = p.clone().sub(c);
-            if ((Math.abs(t.x) < EPS || Math.abs(t.x - 1) < EPS) && t.y > 0) {
+            if (Math.abs(t.x) < EPS && t.y > 0) {
                 u = t.y;
             }
+            else if (Math.abs(t.x - 1) < EPS && t.y > 0) {
+                u = 1 - t.y;
+            }
+            else if (Math.abs(t.y) < EPS && t.x > 0) {
+                u = 1 - t.x;
+            }
             else {
                 u = t.x;
             }
diff --git a/game.ts b/game.ts
index 2e42c79..6de5acc 100644
--- a/game.ts
+++ b/game.ts
@@ -454,8 +454,12 @@ function renderWalls(display: Display, player: Player, scene: Scene) {
 
             let u = 0;
             const t = p.clone().sub(c);
-            if ((Math.abs(t.x) < EPS || Math.abs(t.x - 1) < EPS) && t.y > 0) {
+            if (Math.abs(t.x) < EPS && t.y > 0) {
                 u = t.y;
+            } else if (Math.abs(t.x - 1) < EPS && t.y > 0) {
+                u = 1 - t.y;
+            } else if (Math.abs(t.y) < EPS && t.x > 0) {
+                u = 1 - t.x;
             } else {
                 u = t.x;
             }

From d35984ec1c5c9dd97198c176885502b3395b41e8 Mon Sep 17 00:00:00 2001
From: Kariem816 <kariem816@gmail.com>
Date: Thu, 4 Jul 2024 20:38:41 +0300
Subject: [PATCH 3/3] show average fps instead of instantaneous

---
 game.js |  7 ++++++-
 game.ts | 10 +++++++++-
 2 files changed, 15 insertions(+), 2 deletions(-)

diff --git a/game.js b/game.js
index 55ef9ca..976d35c 100644
--- a/game.js
+++ b/game.js
@@ -346,10 +346,15 @@ function renderMinimap(ctx, player, scene, sprites) {
     }
     ctx.restore();
 }
+const dts = [];
 function renderFPS(ctx, deltaTime) {
     ctx.font = "48px bold";
     ctx.fillStyle = "white";
-    ctx.fillText(`${Math.floor(1 / deltaTime)}`, 100, 100);
+    dts.push(deltaTime);
+    if (dts.length > 60)
+        dts.shift();
+    const dtAvg = dts.reduce((a, b) => a + b, 0) / dts.length;
+    ctx.fillText(`${Math.floor(1 / dtAvg)}`, 100, 100);
 }
 function renderWalls(display, player, scene) {
     const [r1, r2] = playerFovRange(player);
diff --git a/game.ts b/game.ts
index 6de5acc..351aa7d 100644
--- a/game.ts
+++ b/game.ts
@@ -424,10 +424,18 @@ function renderMinimap(ctx: CanvasRenderingContext2D, player: Player, scene: Sce
     ctx.restore();
 }
 
+const dts: number[] = [];
 function renderFPS(ctx: CanvasRenderingContext2D, deltaTime: number) {
     ctx.font = "48px bold"
     ctx.fillStyle = "white"
-    ctx.fillText(`${Math.floor(1/deltaTime)}`, 100, 100);
+
+    dts.push(deltaTime);
+    if (dts.length > 60) // can be any number of frames
+        dts.shift();
+
+    const dtAvg = dts.reduce((a, b) => a + b, 0)/dts.length;
+
+    ctx.fillText(`${Math.floor(1/dtAvg)}`, 100, 100);
 }
 
 function renderWalls(display: Display, player: Player, scene: Scene) {