import 'dart:html'; import 'package:browserloop/game/Game.dart'; 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'; List examples = [ Example("While Loop Example", "#while_loop"), Example("Fixed Update, Variable Render", "#fixed_variable"), Example("Variable Timestep", "#variable_timestep") ]; LoopExample active; class Example { final String query; final String name; CanvasElement canvas = CanvasElement(width: 480, height: 480); LoopExample loop; Example(this.name, this.query); } void main() { examples.forEach((ex) { resetExample(ex); }); } void appendToDOM(Example example) { querySelector(example.query).append(example.canvas); example.canvas.onClick.forEach(activate); print("${example.query} appended to DOM"); } void removeFromDOM(Example example) { querySelector(example.query).children.clear(); print("${example.query} removed from DOM"); } 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); } void createPlaceholder(Example ex) { if (ex.canvas == null) return; // 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); // 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; CanvasElement c = (e.target as CanvasElement); examples.forEach((Example ex) { if (ex.canvas == c) { resetExample(ex); switch (ex.query) { case "#while_loop": ex.loop = new WhileLoop(new Game(ex.canvas)); break; case "#fixed_variable": ex.loop = new FixedLoopVariableRender(new Game(ex.canvas)); break; case "#variable_timestep": ex.loop = new VariableTimestep(new Game(ex.canvas)); break; } if (ex.canvas != ex.loop.game.canvas) ex.loop.game.canvas = ex.canvas; querySelector(ex.query).append(new ButtonElement() ..text = "start" ..onClick.listen((e) { ex.loop.stop(); ex.loop.start(); })); querySelector(ex.query).append(new ButtonElement() ..text = "stop" ..onClick.listen((e) { ex.loop.stop(); })); // 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); } }); }