Update canvas size and camera zoom

pixselve-school · Feb 12, 2024 · 7fb8c96 · 7fb8c96
1 parent 75c4e42
commit 7fb8c96
Show file tree

Hide file tree

Showing 4 changed files with 7 additions and 5 deletions.
diff --git a/packages/client/src/app/canvas.tsx b/packages/client/src/app/canvas.tsx
@@ -103,6 +103,10 @@ export function Canvas(params: Params) {
   useEffect(() => {
     if (!game) return;
     game.setScreenSize(screen);
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    canvas.width = screen.width;
+    canvas.height = screen.height;
   }, [game, screen]);
 
   useEffect(() => {
@@ -120,8 +124,6 @@ export function Canvas(params: Params) {
     <canvas
       ref={canvasRef}
       className="grid-bg h-full w-full"
-      height={screen.height}
-      width={screen.width}
     />
   );
 }
diff --git a/packages/client/src/app/layout.tsx b/packages/client/src/app/layout.tsx
@@ -35,7 +35,7 @@ export default function RootLayout({
 }) {
   return (
     <SharedStateProvider>
-      <html lang="en" className="h-full">
+      <html lang="en" className="h-full text-[12px] sm:text-base">
         <body className={`h-full font-sans ${inter.variable}`}>{children}</body>
       </html>
     </SharedStateProvider>

diff --git a/packages/client/src/app/page.tsx b/packages/client/src/app/page.tsx
@@ -50,7 +50,7 @@ export default function HomePage() {
               </div>
             </div>
           ))}
-          {(api.scores?.length ?? 0 > 5) && (
+          {(api.scores?.length ?? 0) > 5 && (
             <span className="opacity-40">
               ... {api.scores?.length ?? 0 - 5} more players
             </span>

diff --git a/packages/client/src/lib/Game.ts b/packages/client/src/lib/Game.ts
@@ -29,7 +29,7 @@ export class Game {
   private canvas: HTMLCanvasElement | null = null;
   time: TimeManager;
   isSprinting = false;
-  camera: Camera = { offset: { x: 0, y: 0 }, zoom: 2 };
+  camera: Camera = { offset: { x: 0, y: 0 }, zoom: 1.5 };
   cursor: Position = { x: 0, y: 0 };
   screen = { width: 0, height: 0 };
   c: CanvasRenderingContext2D | undefined;