120 lines
3.4 KiB
Dart
120 lines
3.4 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;
|
|
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);
|
|
}
|
|
});
|
|
}
|