fix: game aspect ratio

cardano-scaling · Nov 26, 2024 · 2a87992 · 2a87992
1 parent 5bc2a45
commit 2a87992
Show file tree

Hide file tree

Showing 2 changed files with 4 additions and 2 deletions.
diff --git a/src/components/DoomCanvas/DoomCanvas.tsx b/src/components/DoomCanvas/DoomCanvas.tsx
@@ -136,11 +136,12 @@ const DoomCanvas: React.FC = () => {
 
   return (
     <>
-      <Card className="h-[40rem] relative">
+      <Card className="relative">
         <canvas
           id="canvas"
           ref={canvasRef}
-          className={cx("w-full h-full", { "opacity-0": isLoading || isError })}
+          className={cx("w-full", { "opacity-0": isLoading || isError })}
+          style={{ aspectRatio: "1028/805" }}
         />
         {(isLoading || isError) && (
           <div className="absolute inset-0 flex items-center justify-center text-yellow-400 text-4xl text-center px-4 w-4/5 mx-auto">

diff --git a/src/index.css b/src/index.css
@@ -75,6 +75,7 @@
   height: 19px;
   transform-origin: right center;
   transform: rotate(0deg);
+  transition: 0.3s;
 }
 
 .speedometer-tick::before {