From 8284e82dcfbac6609984ff0950ec2af5c528e70f Mon Sep 17 00:00:00 2001
From: Marty Oehme <marty.oehme@gmail.com>
Date: Fri, 20 Jul 2018 18:01:49 +0200
Subject: [PATCH] Examples - Add Dirty Flag Rendering

---
 lib/game/Game.dart                 |  2 +-
 lib/src/05_DirtyFlagRendering.dart | 57 ++++++++++++++++++++++++++++++
 web/index.html                     |  6 +---
 web/main.dart                      |  7 +++-
 4 files changed, 65 insertions(+), 7 deletions(-)
 create mode 100644 lib/src/05_DirtyFlagRendering.dart

diff --git a/lib/game/Game.dart b/lib/game/Game.dart
index 5ce7676..43f13f0 100644
--- a/lib/game/Game.dart
+++ b/lib/game/Game.dart
@@ -11,7 +11,7 @@ class Game {
 
   double _oscill = 0.1;
   bool _oscillDir = true; // oscillate upwards (true) or downwards (false)
-  double _OSCILLSPEED = 0.05;
+  double _OSCILLSPEED = 0.1;
   bool _fwd = true;
 
   Game(CanvasElement this.canvas) {
diff --git a/lib/src/05_DirtyFlagRendering.dart b/lib/src/05_DirtyFlagRendering.dart
new file mode 100644
index 0000000..1a71038
--- /dev/null
+++ b/lib/src/05_DirtyFlagRendering.dart
@@ -0,0 +1,57 @@
+import 'dart:html';
+
+import 'package:browserloop/game/Game.dart';
+import 'package:browserloop/game/LoopExample.dart';
+
+class DirtyFlagRender implements LoopExample {
+  static final double MS_PER_UPDATE = 1000.0;
+  static final double SAFE_GUARD = 500.0;
+  Stopwatch elapsed = new Stopwatch();
+  double lag = 0.0;
+  Game game;
+  num id;
+  bool dirty = true;
+
+  DirtyFlagRender(this.game) {
+     elapsed.start();
+     window.requestAnimationFrame(eventloop);
+  }
+
+  void eventloop(num time) {
+    lag += elapsed.elapsedMilliseconds;
+    elapsed.reset();
+
+    while (lag >= MS_PER_UPDATE && elapsed.elapsedMilliseconds < SAFE_GUARD) {
+      update();
+      lag -= MS_PER_UPDATE;
+    }
+    if(dirty) render(lag / MS_PER_UPDATE);
+    id = window.requestAnimationFrame(eventloop);
+
+  }
+
+  void update() {
+    game.update();
+    // This is for demonstration purposes. It will set the dirty flag once every
+    // update. Usually should be set this deeper in the individual logic units
+    // where a change happens and moved through the program from there.
+    dirty = true;
+  }
+
+  void render(double interp) {
+    game.draw(interp);
+    dirty = false;
+  }
+
+  // Starting and stopping the loop for the example page
+  void stop() {
+    elapsed.stop();
+    window.cancelAnimationFrame(id);
+  }
+
+  void start() {
+    elapsed.start();
+    elapsed.reset();
+    window.requestAnimationFrame(eventloop);
+  }
+}
\ No newline at end of file
diff --git a/web/index.html b/web/index.html
index 8828c30..b3e3347 100644
--- a/web/index.html
+++ b/web/index.html
@@ -14,11 +14,7 @@
 <div id="while_loop"></div>
 <div id="variable_timestep"></div>
 <div id="fixed_variable"></div>
-<!--<button id="basic_start">start</button>-->
-<!--<button id="basic_stop">stop</button>-->
-<!--<button id="basic_reset">reset</button>-->
-<!--<button id="basic_plus">+</button>-->
-<!--<button id="basic_minus">-</button>-->
+<div id="dirty_flag"></div>
 
 </body>
 </html>
diff --git a/web/main.dart b/web/main.dart
index 56be9a8..371ada1 100644
--- a/web/main.dart
+++ b/web/main.dart
@@ -4,11 +4,13 @@ import 'package:browserloop/game/LoopExample.dart';
 import 'package:browserloop/src/03-VariableTimestep.dart';
 import 'package:browserloop/src/04-FixedLoopVariableRender.dart';
 import 'package:browserloop/src/02-AnimationFrameWhile.dart';
+import 'package:browserloop/src/05_DirtyFlagRendering.dart';
 
 List<Example> examples = [
   Example("While Loop Example", "#while_loop"),
   Example("Fixed Update, Variable Render", "#fixed_variable"),
-  Example("Variable Timestep", "#variable_timestep")
+  Example("Variable Timestep", "#variable_timestep"),
+  Example("Variable Render with Dirty Flag", "#dirty_flag")
 ];
 LoopExample active;
 
@@ -91,6 +93,9 @@ void activate(MouseEvent e) {
         case "#variable_timestep":
           ex.loop = new VariableTimestep(new Game(ex.canvas));
           break;
+        case "#dirty_flag":
+          ex.loop = new DirtyFlagRender(new Game(ex.canvas));
+          break;
       }
       if (ex.canvas != ex.loop.game.canvas) ex.loop.game.canvas = ex.canvas;
       querySelector(ex.query).append(new ButtonElement()