From 4f5483275116c64b2d5867dcb6c57b5a49047477 Mon Sep 17 00:00:00 2001
From: Flavio De Stefano <destefano.flavio@gmail.com>
Date: Tue, 21 Nov 2023 19:29:02 +0100
Subject: [PATCH] Changing perspective

---
 script.js | 11 ++++++-----
 style.css |  4 ++--
 2 files changed, 8 insertions(+), 7 deletions(-)

diff --git a/script.js b/script.js
index 615c74e..1ee996d 100644
--- a/script.js
+++ b/script.js
@@ -39,6 +39,9 @@ const kBushOffset = 16;
 const kBushDensity = 30;
 
 const kCameraOffset = 800;
+const kMaxCameraZ = -480;
+const kCameraX = kTrackWidth / 4;
+const kCameraY = 400;
 
 function loadGame() {
   readOptions();
@@ -192,10 +195,8 @@ function applyCoordinates(p) {
 }
 
 function moveCamera(z) {
-  const x = 85;
-  const y = 450;
-  z = Math.max(z - kCameraOffset, -400);
-  $scene.style.transform = `translate3d(${x}px, ${y}px, ${z}px)`;
+  const realZ = Math.max(z - kCameraOffset, kMaxCameraZ);
+  $scene.style.transform = `translate3d(${kCameraX}px, ${kCameraY}px, ${realZ}px)`;
 }
 
 function applySrc(obj, src) {
@@ -255,7 +256,7 @@ function startRenderingLoop() {
   // Find the player with the lowest Z
   const lowestZ = Object.keys(game.$.players).reduce((acc, key) => {
     return Math.min(acc, game.$.players[key].z);
-  }, Infinity);
+  }, kInfiniteTrackLength);
 
   moveCamera(lowestZ);
 }
diff --git a/style.css b/style.css
index d8ac3d8..c69013e 100644
--- a/style.css
+++ b/style.css
@@ -53,14 +53,14 @@ body {
   height: var(--screen-size);
   position: relative;
   margin: 0 auto;
-  perspective-origin: 100% -20%;
+  perspective-origin: 90% -10%;
   perspective: 1000px;
   overflow: hidden;
+  border: 3px solid var(--primary-color);
 }
 
 #scene {
   position: absolute;
-  transform: translate3d(85px, 450px, -400px);
   transform-style: preserve-3d;
 }