Examples - Change Example Reset Strategy

web/main.dart

@@ -5,8 +5,8 @@ import 'package:browserloop/src/03-FixedLoopVariableRender.dart';
 import 'package:browserloop/src/02-AnimationFrameWhile.dart';
 
 List<Example> examples = [
-  Example("While Loop Example","#while_output"),
-  Example("Fixed Update, Variable Render","#variable_output")
+  Example("While Loop Example", "#while_output"),
+  Example("Fixed Update, Variable Render", "#variable_output")
 ];
 LoopExample active;
 
@@ -21,71 +21,75 @@ class Example {
 
 void main() {
   examples.forEach((ex) {
-    appendToDOM(ex);
+    resetExample(ex);
   });
-  resetPlaceHolders();
 }
 
 void appendToDOM(Example example) {
   querySelector(example.query).append(example.canvas);
   example.canvas.onClick.forEach(activate);
-  print("${example.query} appended");
+  print("${example.query} appended to DOM");
 }
 
-void readdToDOM(Example example) {
+void removeFromDOM(Example example) {
   querySelector(example.query).children.clear();
-  print("${example.query} removed");
-  appendToDOM(example);
+  print("${example.query} removed from DOM");
 }
 
-void resetPlaceHolders([Example current]) {
-  examples.forEach((Example ex) {
-    if(current == null || ex != current) {
-      if(ex.loop != null) {
-        ex.loop.stop();
-        ex.loop = null;
-      }
-      ex.canvas = new CanvasElement(width: ex.canvas.width,height: ex.canvas.height);
-      readdToDOM(ex);
+void resetExample(Example ex) {
+  removeFromDOM(ex);
+  if (ex.loop != null) ex.loop.stop();
+  ex.canvas =
+      new CanvasElement(width: ex.canvas.width, height: ex.canvas.height);
+  createPlaceholder(ex);
+  appendToDOM(ex);
+}
 
-      CanvasRenderingContext2D ctx = ex.canvas.context2D;
-      Point c = Point(ex.canvas.width/2, ex.canvas.height/2);
-      ctx.setFillColorRgb(255, 150, 10);
-      ctx.fillRect(0, 0, ex.canvas.width, ex.canvas.height);
+void createPlaceholder(Example ex) {
+  if (ex.canvas == null) return;
 
-      ctx.beginPath();
-      ctx.moveTo(c.x-25, c.y-25);
-      ctx.lineTo(c.x+25, c.y+25);
-      ctx.lineTo(c.x-25, c.y+75);
-      ctx.closePath();
-      ctx.lineWidth = 10;
-      ctx.setStrokeColorRgb(155, 155, 155);
-      ctx.setFillColorRgb(255, 255, 255);
-      ctx.stroke();
-      ctx.fill();
-      ctx.fillText(ex.name, c.x - ctx.measureText(ex.name).width/2, c.y - 50);
+  // Clear Canvas
+  CanvasRenderingContext2D ctx = ex.canvas.context2D;
+  Point c = Point(ex.canvas.width / 2, ex.canvas.height / 2);
+  ctx.setFillColorRgb(255, 150, 10);
+  ctx.fillRect(0, 0, ex.canvas.width, ex.canvas.height);
 
-      print("reset ${ex.query}");
-    }
-  });
+  // Draw Play Button
+  ctx.beginPath();
+  ctx.moveTo(c.x - 25, c.y - 25);
+  ctx.lineTo(c.x + 25, c.y + 25);
+  ctx.lineTo(c.x - 25, c.y + 75);
+  ctx.closePath();
+  ctx.lineWidth = 10;
+  ctx.setStrokeColorRgb(155, 155, 155);
+  ctx.setFillColorRgb(255, 255, 255);
+  ctx.stroke();
+  ctx.fill();
+
+  // Draw Text
+  ctx.fillText(ex.name, c.x - ctx.measureText(ex.name).width / 2, c.y - 50);
+
+  print("${ex.query} placeholder created");
 }
 
 void activate(MouseEvent e) {
-  if(e.target is! CanvasElement) return;
+  if (e.target is! CanvasElement) return;
   CanvasElement c = (e.target as CanvasElement);
 
   examples.forEach((Example ex) {
     if (ex.canvas == c) {
-      resetPlaceHolders(ex);
+      resetExample(ex);
       switch (ex.query) {
         case "#while_output":
-          ex.loop = new WhileLoop(new Game(c));
+          print("#while_output loop added");
+          ex.loop = new WhileLoop(new Game(ex.canvas));
           break;
         case "#variable_output":
-          ex.loop = new FixedLoopVariableRender(new Game(c));
+          print("#variable_output loop added");
+          ex.loop = new FixedLoopVariableRender(new Game(ex.canvas));
           break;
       }
-
+      if (ex.canvas == ex.loop.game.canvas) print("CANVASSES ALIGN");
       querySelector(ex.query).append(new ButtonElement()
         ..text = "start"
         ..onClick.listen((e) {
@@ -100,11 +104,8 @@ void activate(MouseEvent e) {
 //    querySelector('#reset').onClick.listen((e) => ex.loop.game.reset());
 //    querySelector('#plus').onClick.listen((e) => _changeGrid(-5));
 //    querySelector('#minus').onClick.listen((e) => _changeGrid(5));
+    } else {
+      resetExample(ex);
     }
   });
-
 }
-
-
-
-//when a button is clicked delete all the other Loops containing games and replace them with a canvas (fn above)