More space for the 3d view

Signed-off-by: Hans Kokx <hans.d.kokx@gmail.com>

lib/main.dart

@@ -49,39 +49,43 @@ class _MainAppState extends State<MainApp> {
           textDirection: TextDirection.ltr,
           children: [
             Flexible(
-              child: Center(
-                child: FittedBox(
-                  fit: BoxFit.contain,
-                  child: Stack(
-                    children: [
-                      Map(
-                        rayData,
-                        playerAngle: playerAngle,
-                        playerPosition: playerPosition,
-                      ),
-                      Player(
-                        onAngleUpdated: (angle) {
-                          setState(() {
-                            playerAngle = angle;
-                          });
-                        },
-                        onPositionUpdated: (position) {
-                          setState(() {
-                            playerPosition = position;
-                          });
-                        },
-                        onRaysUpdated: (rays) {
-                          setState(() {
-                            rayData = rays;
-                          });
-                        },
-                      ),
-                    ],
+              child: Transform.translate(
+                offset: const Offset(16, 0),
+                child: Center(
+                  child: FittedBox(
+                    fit: BoxFit.contain,
+                    child: Stack(
+                      children: [
+                        Map(
+                          rayData,
+                          playerAngle: playerAngle,
+                          playerPosition: playerPosition,
+                        ),
+                        Player(
+                          onAngleUpdated: (angle) {
+                            setState(() {
+                              playerAngle = angle;
+                            });
+                          },
+                          onPositionUpdated: (position) {
+                            setState(() {
+                              playerPosition = position;
+                            });
+                          },
+                          onRaysUpdated: (rays) {
+                            setState(() {
+                              rayData = rays;
+                            });
+                          },
+                        ),
+                      ],
+                    ),
                   ),
                 ),
               ),
             ),
             Flexible(
+              flex: 3,
               child: Stack(
                 children: [
                   const Background(),
@@ -461,17 +465,13 @@ class Walls extends StatelessWidget {
 
   @override
   Widget build(BuildContext context) {
-    return Center(
-      child: FittedBox(
-        fit: BoxFit.cover,
-        child: SizedBox(
-          width: gameWidth,
-          height: gameHeight,
-          child: CustomPaint(
-            painter: WallPainter(
-              playerAngle: playerAngle,
-              rayData: rayData,
-            ),
+    return LayoutBuilder(
+      builder: (context, constraints) => ClipRect(
+        child: CustomPaint(
+          size: constraints.biggest,
+          painter: WallPainter(
+            playerAngle: playerAngle,
+            rayData: rayData,
           ),
         ),
       ),
@@ -491,14 +491,25 @@ class WallPainter extends CustomPainter {
 
   @override
   void paint(Canvas canvas, Size size) {
-    for (final RayData ray in rayData) {
-      double disT = ray.distance;
+    final double scale = math.max(
+      size.width / gameWidth,
+      size.height / gameHeight,
+    );
+    final double offsetX = (size.width - gameWidth * scale) / 2;
+    final double offsetY = (size.height - gameHeight * scale) / 2;
+
+    canvas
+      ..save()
+      ..translate(offsetX, offsetY)
+      ..scale(scale);
+
+    for (int i = 0; i < rayData.length; i++) {
+      final RayData ray = rayData[i];
 
       // * --- Draw 3D Walls ---
       // Correct the fish-eye effect
       const double dr = math.pi / 180;
-      final double rayAngle =
-          playerAngle - (dr * 30) + (rayData.indexOf(ray) * dr);
+      final double rayAngle = playerAngle - (dr * 30) + (i * dr);
 
       double correctedAngle = playerAngle - rayAngle;
       if (correctedAngle < 0) {
@@ -508,13 +519,12 @@ class WallPainter extends CustomPainter {
         correctedAngle -= 2 * math.pi;
       }
 
-      disT = disT * math.cos(correctedAngle);
+      final double disT = ray.distance * math.cos(correctedAngle);
 
       double lineHeight = (mapSize * gameHeight) / disT;
       if (lineHeight > gameHeight) {
         lineHeight = gameHeight;
       }
-
       if (lineHeight > gameWidth) {
         lineHeight = gameWidth;
       }
@@ -522,7 +532,7 @@ class WallPainter extends CustomPainter {
       final double lineOffset = (gameHeight / 2.0) - (lineHeight / 2.0);
 
       final double rayWidth = gameWidth / rayData.length;
-      final double rayX3D = rayData.indexOf(ray) * rayWidth;
+      final double rayX3D = i * rayWidth;
 
       canvas.drawRect(
         Rect.fromLTWH(rayX3D, lineOffset, rayWidth, lineHeight),
@@ -532,6 +542,8 @@ class WallPainter extends CustomPainter {
           ..strokeWidth = 1.5,
       );
     }
+
+    canvas.restore();
   }
 
   @override
@@ -643,9 +655,8 @@ class MapRayPainter extends CustomPainter {
         playerCenter,
         ray.hitPosition,
         Paint()
-          ..color = ray.color
-          ..isAntiAlias = false
-          ..strokeWidth = 1.5,
+          ..color = Colors.cyan
+          ..strokeWidth = 5,
       );
     }
   }