add orbs

package.json

@@ -6,7 +6,7 @@
     "packages/shared"
   ],
   "scripts": {
-    "dev": "concurrently -n \"░ client,█ server,▒ shared\" \"npm:dev --workspace=packages/client\" \"npm:start --workspace=packages/server\" \"npm:watch --workspace=packages/shared\"",
+    "dev": "concurrently -n \"░ client,█ server,▒ shared\" \"npm:dev --workspace=packages/client\" \"npm:dev --workspace=packages/server\" \"npm:watch --workspace=packages/shared\"",
     "build:client": "npm run build --workspace=packages/shared && npm run build --workspace=packages/client",
     "build:server": "npm run build --workspace=packages/shared && npm run build --workspace=packages/server"
   },

packages/client/src/app/canvas.tsx

@@ -72,6 +72,7 @@ export function Canvas(params: Params) {
 
   useEffect(() => {
     if (!game) return;
+    game.setCanvas(canvasRef.current);
     const c = canvasRef.current?.getContext('2d');
     if (!c) return;
     game.setContext(c);
@@ -93,5 +94,5 @@ export function Canvas(params: Params) {
     game.setScene(api.scene);
   }, [api.scene, game]);
 
-  return <canvas ref={canvasRef} className='w-full h-full' height={screen.height} width={screen.width} />;
+  return <canvas ref={canvasRef} className='w-full h-full dustBackground' height={screen.height} width={screen.width} />;
 }

packages/client/src/app/page.tsx

@@ -13,7 +13,7 @@ export default function HomePage() {
   const api = useApi();
 
   return (
-    <main className="dustBackground flex h-full flex-col items-center justify-center">
+    <main className="flex h-full flex-col items-center justify-center select-none">
       {!api.isConnected && (
         <LoginComponent
           setServerUrl={setServerUrl}
@@ -57,7 +57,10 @@ function LoginComponent(props: {
   setUsername: (username: string) => void;
 }) {
   return (
-    <div className="flex flex-col items-center gap-8">
+    <form className="flex flex-col items-center gap-8" onSubmit={(e) => {
+      e.preventDefault();
+      props.api.connect(props.serverUrl, props.username);
+    }}>
       <Image className="w-1/2" src={logo} alt="Viper Vortex"></Image>
 
       <h1 className="text-xl font-bold text-red-500">
@@ -82,14 +85,11 @@ function LoginComponent(props: {
       />
 
       <button
-        onClick={()=>{
-          props.api.connect(props.serverUrl, props.username);
-        }}
         disabled={!props.username || !props.serverUrl}
         className="w-full rounded-full bg-red-500 py-2 text-2xl font-bold ring-4 ring-red-500/50 ring-offset-8 ring-offset-red-950 transition-transform hover:scale-105 disabled:bg-gray-500 disabled:ring-gray-500/50"
       >
         Play
       </button>
-    </div>
+    </form>
   );
 }

packages/client/src/lib/Food.ts

@@ -19,7 +19,13 @@ export class Food extends Entity {
     if (!c) return;
     const screenFood = worldToScreen(this.position, this.game.camera);
     c.beginPath();
-    c.arc(screenFood.x, screenFood.y, 10, 0, 2 * Math.PI);
+    c.arc(
+      screenFood.x,
+      screenFood.y,
+      10 * this.game.camera.zoom,
+      0,
+      2 * Math.PI,
+    );
     c.fillStyle = "green";
     c.fill();
   }

packages/client/src/lib/Game.ts

@@ -30,7 +30,8 @@ export class Game {
   private time: TimeManager;
   private isSprinting = false;
   private angle = 0;
-  camera: Camera = { offset: { x: 0, y: 0 }, zoom: 1 };
+  private canvas: HTMLCanvasElement | null = null;
+  camera: Camera = { offset: { x: 0, y: 0 }, zoom: 2 };
   cursor: Position = { x: 0, y: 0 };
   screen = { width: 0, height: 0 };
   c: CanvasRenderingContext2D | undefined;
@@ -48,6 +49,10 @@ export class Game {
     console.log("Game Instance Destroyed");
   }
 
+  setCanvas(canvas: HTMLCanvasElement | null) {
+    this.canvas = canvas;
+  }
+
   setScene(scene: SceneDTO) {
     this.mapSize.width = scene.width;
     this.mapSize.height = scene.height;
@@ -151,9 +156,19 @@ export class Game {
     if (!playerHead) return;
 
     this.camera.offset = {
-      x: -playerHead.x + this.screen.width / 2,
-      y: -playerHead.y + this.screen.height / 2,
+      x: -playerHead.x * this.camera.zoom + this.screen.width / 2,
+      y: -playerHead.y * this.camera.zoom + this.screen.height / 2,
     };
+
+    // offset the background
+    this.canvas?.style.setProperty(
+      "--background-offset-x",
+      `${this.camera.offset.x}px`,
+    );
+    this.canvas?.style.setProperty(
+      "--background-offset-y",
+      `${this.camera.offset.y}px`,
+    );
   }
 
   private drawBorder() {
@@ -184,16 +199,16 @@ export class Game {
     Object.values(this.foods).forEach((food) => {
       food.draw();
     });
-    Object.values(this.orbs).forEach((orb) => {
-      orb.draw();
-    });
     Object.values(this.players).forEach((player) => {
       player.draw();
     });
-
+    
     if (this.me) {
       this.me.draw();
     }
+    Object.values(this.orbs).forEach((orb) => {
+      orb.draw();
+    });
 
     // show fps top right
     this.c.fillStyle = "white";

packages/client/src/lib/Orb.ts

@@ -20,7 +20,7 @@ export class Orb extends Food {
     if (!c) return;
     const screenFood = worldToScreen(this.position, this.game.camera);
     c.beginPath();
-    c.arc(screenFood.x, screenFood.y, this.size * 5, 0, 2 * Math.PI);
+    c.arc(screenFood.x, screenFood.y, this.size * 5 * this.game.camera.zoom, 0, 2 * Math.PI);
     c.fillStyle = "lightblue";
     c.fill();
   }

packages/client/src/lib/Player.ts

@@ -45,7 +45,7 @@ export class Player extends Entity {
       c.lineTo(prevScreenBodyPart.x, prevScreenBodyPart.y);
     }
 
-    c.lineWidth = 20;
+    c.lineWidth = 30 * this.game.camera.zoom
     c.strokeStyle = this.color;
     c.lineCap = "round";
     c.lineJoin = "round";