Preserve state when switching renderers

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

apps/wolf_3d_gui/lib/screens/game_screen.dart

@@ -33,10 +33,7 @@ class _GameScreenState extends State<GameScreen> {
   @override
   void initState() {
     super.initState();
-
     _input = Wolf3dFlutterInput();
-
-    // The Host Screen owns the engine lifecycle
     _engine = WolfEngine(
       data: widget.data,
       difficulty: widget.difficulty,
@@ -45,7 +42,6 @@ class _GameScreenState extends State<GameScreen> {
       input: _input,
       onGameWon: () => Navigator.of(context).pop(),
     );
-
     _engine.init();
   }
 
@@ -54,20 +50,17 @@ class _GameScreenState extends State<GameScreen> {
     return Scaffold(
       body: Stack(
         children: [
-          // Render the active view
           _useAsciiMode
               ? WolfAsciiRenderer(engine: _engine)
               : WolfFlutterRenderer(engine: _engine),
 
-          // Invisible listener to trap the 'Tab' key and swap renderers
+          // TAB listener
           Focus(
-            autofocus: false,
+            autofocus: true,
             onKeyEvent: (node, event) {
               if (event is KeyDownEvent &&
                   event.logicalKey == LogicalKeyboardKey.tab) {
-                setState(() {
+                setState(() => _useAsciiMode = !_useAsciiMode);
-                  _useAsciiMode = !_useAsciiMode;
-                });
                 return KeyEventResult.handled;
               }
               return KeyEventResult.ignored;
@@ -75,16 +68,21 @@ class _GameScreenState extends State<GameScreen> {
             child: const SizedBox.shrink(),
           ),
 
-          // Optional: A little UI hint
+          // Loading Overlay
+          if (!_engine.isInitialized)
+            Container(
+              color: Colors.black,
+              child: const Center(
+                child: CircularProgressIndicator(color: Colors.teal),
+              ),
+            ),
+
           Positioned(
             top: 16,
             right: 16,
             child: Text(
-              'Press TAB to swap renderers',
+              'TAB: Swap Renderer',
-              style: TextStyle(
+              style: TextStyle(color: Colors.white.withValues(alpha: 0.5)),
-                color: Colors.white.withValues(alpha: 0.5),
-                fontSize: 12,
-              ),
             ),
           ),
         ],

packages/wolf_3d_renderer/lib/base_renderer.dart

@@ -23,7 +23,6 @@ abstract class BaseWolfRendererState<T extends BaseWolfRenderer>
   @override
   void initState() {
     super.initState();
-    // DO NOT initialize the engine here. Just start the loop!
     gameLoop = createTicker(_tick)..start();
     focusNode.requestFocus();
   }
@@ -31,10 +30,14 @@ abstract class BaseWolfRendererState<T extends BaseWolfRenderer>
   void _tick(Duration elapsed) {
     if (!widget.engine.isInitialized) return;
 
+    if (_lastTick == Duration.zero) {
+      _lastTick = elapsed;
+      return;
+    }
+
     Duration delta = elapsed - _lastTick;
     _lastTick = elapsed;
 
-    // Tick the shared engine
     widget.engine.tick(delta);
 
     performRender();

packages/wolf_3d_renderer/lib/wolf_3d_ascii_renderer.dart

@@ -1,5 +1,4 @@
 import 'package:flutter/material.dart';
-import 'package:flutter/scheduler.dart';
 import 'package:wolf_3d_data_types/wolf_3d_data_types.dart';
 import 'package:wolf_3d_engine/wolf_3d_engine.dart';
 import 'package:wolf_3d_renderer/base_renderer.dart';
@@ -14,81 +13,28 @@ class WolfAsciiRenderer extends BaseWolfRenderer {
   State<WolfAsciiRenderer> createState() => _WolfAsciiRendererState();
 }
 
-class _WolfAsciiRendererState extends State<WolfAsciiRenderer>
+class _WolfAsciiRendererState extends BaseWolfRendererState<WolfAsciiRenderer> {
-    with SingleTickerProviderStateMixin {
-  late final WolfEngine engine;
-  late Ticker _gameLoop;
-  final FocusNode _focusNode = FocusNode();
-
-  Duration _lastTick = Duration.zero;
-
-  // Changed from String to List<List<ColoredChar>>
   List<List<ColoredChar>> _asciiFrame = [];
   final AsciiRasterizer _asciiRasterizer = AsciiRasterizer();
 
   @override
-  void initState() {
+  Color get scaffoldColor => const Color.fromARGB(255, 4, 64, 64);
-    super.initState();
 
-    engine = WolfEngine(
+  @override
-      data: widget.engine.data,
+  void performRender() {
-      difficulty: widget.engine.difficulty,
-      startingEpisode: widget.engine.startingEpisode,
-      audio: widget.engine.audio,
-      input: widget.engine.input,
-      onGameWon: () {
-        Navigator.of(context).pop();
-      },
-    );
-
-    engine.init();
-
-    _gameLoop = createTicker(_tick)..start();
-    _focusNode.requestFocus();
-  }
-
-  void _tick(Duration elapsed) {
-    if (!engine.isInitialized) return;
-
-    Duration delta = elapsed - _lastTick;
-    _lastTick = elapsed;
-
-    engine.tick(delta);
-
-    // Calculate frame synchronously and trigger UI rebuild
     setState(() {
-      // 120x40 is a great sweet spot for text density vs aspect ratio
+      _asciiFrame = _asciiRasterizer.render(
-      _asciiFrame = _asciiRasterizer.render(engine, FrameBuffer(160, 100));
+        widget.engine,
+        FrameBuffer(160, 100),
+      );
     });
   }
 
   @override
-  void dispose() {
+  Widget buildViewport(BuildContext context) {
-    _gameLoop.dispose();
+    return _asciiFrame.isEmpty
-    _focusNode.dispose();
+        ? const SizedBox.shrink()
-    super.dispose();
+        : AsciiFrameWidget(frameData: _asciiFrame);
-  }
-
-  @override
-  Widget build(BuildContext context) {
-    if (!engine.isInitialized) {
-      return const Center(child: CircularProgressIndicator(color: Colors.teal));
-    }
-
-    return Scaffold(
-      backgroundColor: Color.fromARGB(255, 4, 64, 64),
-      body: KeyboardListener(
-        focusNode: _focusNode,
-        autofocus: true,
-        onKeyEvent: (_) {},
-        // Added the missing argument here
-        child: Center(
-          child: _asciiFrame.isEmpty
-              ? const SizedBox.shrink()
-              : AsciiFrameWidget(frameData: _asciiFrame),
-        ),
-      ),
-    );
   }
 }
 

packages/wolf_3d_renderer/lib/wolf_3d_flutter_renderer.dart

@@ -1,7 +1,6 @@
 import 'dart:ui' as ui;
 
 import 'package:flutter/material.dart';
-import 'package:flutter/scheduler.dart';
 import 'package:wolf_3d_data_types/wolf_3d_data_types.dart';
 import 'package:wolf_3d_engine/wolf_3d_engine.dart';
 import 'package:wolf_3d_renderer/base_renderer.dart';
@@ -16,16 +15,8 @@ class WolfFlutterRenderer extends BaseWolfRenderer {
   State<WolfFlutterRenderer> createState() => _WolfFlutterRendererState();
 }
 
-class _WolfFlutterRendererState extends State<WolfFlutterRenderer>
+class _WolfFlutterRendererState
-    with SingleTickerProviderStateMixin {
+    extends BaseWolfRendererState<WolfFlutterRenderer> {
-  late final WolfEngine engine;
-  late Ticker _gameLoop;
-  final FocusNode _focusNode = FocusNode();
-
-  Duration _lastTick = Duration.zero;
-
-  // --- NEW RASTERIZER STATE ---
-  // Lock the internal rendering resolution to the classic 320x200
   final FrameBuffer _frameBuffer = FrameBuffer(320, 200);
   final SoftwareRasterizer _rasterizer = SoftwareRasterizer();
 
@@ -33,94 +24,49 @@ class _WolfFlutterRendererState extends State<WolfFlutterRenderer>
   bool _isRendering = false;
 
   @override
-  void initState() {
+  Color get scaffoldColor => const Color.fromARGB(255, 4, 64, 64);
-    super.initState();
-
-    engine = WolfEngine(
-      data: widget.engine.data,
-      difficulty: widget.engine.difficulty,
-      startingEpisode: widget.engine.startingEpisode,
-      audio: widget.engine.audio,
-      input: widget.engine.input,
-      onGameWon: () {
-        Navigator.of(context).pop();
-      },
-    );
-
-    engine.init();
-
-    _gameLoop = createTicker(_tick)..start();
-    _focusNode.requestFocus();
-  }
-
-  void _tick(Duration elapsed) {
-    if (!engine.isInitialized) return;
-
-    Duration delta = elapsed - _lastTick;
-    _lastTick = elapsed;
-
-    engine.tick(delta);
-
-    // Only start rendering a new frame if the previous one is finished.
-    // This prevents memory leaks and stuttering on lower-end hardware!
-    if (!_isRendering) {
-      _isRendering = true;
-
-      // 1. Crunch the math and fill the 1D memory array
-      _rasterizer.render(engine, _frameBuffer);
-
-      // 2. Convert the raw Uint32List memory into a Flutter ui.Image
-      ui.decodeImageFromPixels(
-        // Extract the underlying byte buffer from our 32-bit integer array
-        _frameBuffer.pixels.buffer.asUint8List(),
-        _frameBuffer.width,
-        _frameBuffer.height,
-        ui.PixelFormat.rgba8888, // Standard 32-bit color format
-        (ui.Image image) {
-          if (mounted) {
-            setState(() {
-              // ALWAYS dispose the old frame before assigning the new one
-              // to prevent massive memory leaks on the GPU!
-              _renderedFrame?.dispose();
-              _renderedFrame = image;
-            });
-          }
-          _isRendering = false;
-        },
-      );
-    }
-  }
 
   @override
   void dispose() {
-    _gameLoop.dispose();
-    _focusNode.dispose();
     _renderedFrame?.dispose();
     super.dispose();
   }
 
   @override
-  Widget build(BuildContext context) {
+  void performRender() {
-    if (!engine.isInitialized) {
+    // Avoid overlapping render calls since decodeImageFromPixels is async
-      return const Center(
+    if (_isRendering) return;
-        child: CircularProgressIndicator(color: Color.fromARGB(255, 4, 64, 64)),
+    _isRendering = true;
-      );
-    }
 
-    return Scaffold(
+    // 1. Rasterize the frame into the pixel buffer
-      backgroundColor: Color.fromARGB(255, 4, 64, 64),
+    _rasterizer.render(widget.engine, _frameBuffer);
-      body: KeyboardListener(
+
-        focusNode: _focusNode,
+    // 2. Convert raw pixels to a Flutter ui.Image
-        autofocus: true,
+    ui.decodeImageFromPixels(
-        onKeyEvent: (_) {},
+      _frameBuffer.pixels.buffer.asUint8List(),
-        child: Center(
+      _frameBuffer.width,
-          child: Padding(
+      _frameBuffer.height,
-            padding: const EdgeInsets.all(16.0),
+      ui.PixelFormat.rgba8888,
-            child: AspectRatio(
+      (ui.Image image) {
-              aspectRatio: 4 / 3,
+        if (mounted) {
-              child: CustomPaint(painter: BufferPainter(_renderedFrame)),
+          setState(() {
-            ),
+            _renderedFrame?.dispose();
-          ),
+            _renderedFrame = image;
+          });
+        }
+        _isRendering = false;
+      },
+    );
+  }
+
+  @override
+  Widget buildViewport(BuildContext context) {
+    return Padding(
+      padding: const EdgeInsets.all(16.0),
+      child: AspectRatio(
+        aspectRatio: 4 / 3,
+        child: CustomPaint(
+          painter: BufferPainter(_renderedFrame),
         ),
       ),
     );
@@ -129,7 +75,6 @@ class _WolfFlutterRendererState extends State<WolfFlutterRenderer>
 
 class BufferPainter extends CustomPainter {
   final ui.Image? frame;
-
   BufferPainter(this.frame);
 
   @override
@@ -137,7 +82,6 @@ class BufferPainter extends CustomPainter {
     if (frame == null) return;
 
     final Paint paint = Paint()..filterQuality = FilterQuality.none;
-
     final Rect srcRect = Rect.fromLTWH(
       0,
       0,
@@ -150,7 +94,6 @@ class BufferPainter extends CustomPainter {
   }
 
   @override
-  bool shouldRepaint(covariant BufferPainter oldDelegate) {
+  bool shouldRepaint(covariant BufferPainter oldDelegate) =>
-    return oldDelegate.frame != frame;
+      oldDelegate.frame != frame;
-  }
 }