browserloops-examples/web/main.dart

124 lines
3.5 KiB
Dart

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';
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 Render with Dirty Flag", "#dirty_flag")
];
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;
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;
addControls(ex);
} else {
resetExample(ex);
}
});
}
void addControls(Example ex) {
querySelector(ex.query).append(new DivElement()
..append(new ButtonElement()
..text = "Start"
..onClick.listen((e) {
ex.loop.stop();
ex.loop.start();
}))
..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));
}