Dramatically improve ASCII renderer

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

packages/wolf_3d_renderer/lib/wolf_3d_ascii_renderer.dart

@@ -63,7 +63,7 @@ class _WolfAsciiRendererState extends State<WolfAsciiRenderer>
     // Calculate frame synchronously and trigger UI rebuild
     setState(() {
       // 120x40 is a great sweet spot for text density vs aspect ratio
-      _asciiFrame = _asciiRasterizer.render(engine, FrameBuffer(120, 40));
+      _asciiFrame = _asciiRasterizer.render(engine, FrameBuffer(160, 100));
     });
   }
 
@@ -87,34 +87,48 @@ class _WolfAsciiRendererState extends State<WolfAsciiRenderer>
         autofocus: true,
         onKeyEvent: (_) {},
         // Added the missing argument here
-        child: _asciiFrame.isEmpty
+        child: Center(
-            ? const SizedBox.shrink()
+          child: _asciiFrame.isEmpty
-            : _buildAsciiFrame(_asciiFrame),
+              ? const SizedBox.shrink()
+              : AsciiFrameWidget(frameData: _asciiFrame),
+        ),
       ),
     );
   }
+}
 
-  Widget _buildAsciiFrame(List<List<ColoredChar>> frameData) {
+class AsciiFrameWidget extends StatelessWidget {
-    return Column(
+  final List<List<ColoredChar>> frameData;
-      mainAxisAlignment: MainAxisAlignment.center,
+
-      children: frameData.map((row) {
+  const AsciiFrameWidget({super.key, required this.frameData});
-        return RichText(
+
-          text: TextSpan(
+  @override
-            style: const TextStyle(
+  Widget build(BuildContext context) {
-              fontFamily: 'Courier',
+    return FittedBox(
-              fontSize: 8, // Bumped slightly for better visibility
+      fit: BoxFit.contain,
-              height: 1.0,
+      child: Container(
-              letterSpacing: 2.0,
+        padding: const EdgeInsets.all(16.0),
-            ),
+        child: Column(
-            children: row.map((cell) {
+          mainAxisAlignment: MainAxisAlignment.center,
-              return TextSpan(
+          children: frameData.map((row) {
-                text: cell.char,
+            return RichText(
-                style: TextStyle(color: cell.color),
+              text: TextSpan(
-              );
+                style: const TextStyle(
-            }).toList(),
+                  fontFamily: 'monospace',
-          ),
+                  height: 1.0,
-        );
+                  letterSpacing: 2.0,
-      }).toList(),
+                ),
+                children: row.map((cell) {
+                  return TextSpan(
+                    text: cell.char,
+                    style: TextStyle(color: cell.color),
+                  );
+                }).toList(),
+              ),
+            );
+          }).toList(),
+        ),
+      ),
     );
   }
 }