experiments/browserloops-examples
1
0
Fork 0
Code Issues Pull requests Projects Releases Wiki Activity

Examples - Change Example Reset Strategy

Browse source
This commit is contained in:
Marty Oehme 2018-07-20 14:06:47 +02:00
parent cf12eb8823
commit 5c71f761e7
1 changed files with 46 additions and 45 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

53
web/main.dart
View file

@ -21,38 +21,40 @@ class Example {
void main() { void main() {
examples.forEach((ex) { examples.forEach((ex) {
appendToDOM(ex); resetExample(ex);
}); });
resetPlaceHolders();
} }
void appendToDOM(Example example) { void appendToDOM(Example example) {
querySelector(example.query).append(example.canvas); querySelector(example.query).append(example.canvas);
example.canvas.onClick.forEach(activate); 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(); querySelector(example.query).children.clear();
print("${example.query} removed"); print("${example.query} removed from DOM");
appendToDOM(example);
} }
void resetPlaceHolders([Example current]) { void resetExample(Example ex) {
examples.forEach((Example ex) { removeFromDOM(ex);
if(current == null || ex != current) { if (ex.loop != null) ex.loop.stop();
if(ex.loop != null) { ex.canvas =
ex.loop.stop(); new CanvasElement(width: ex.canvas.width, height: ex.canvas.height);
ex.loop = null; createPlaceholder(ex);
appendToDOM(ex);
} }
ex.canvas = new CanvasElement(width: ex.canvas.width,height: ex.canvas.height);
readdToDOM(ex);
void createPlaceholder(Example ex) {
if (ex.canvas == null) return;
// Clear Canvas
CanvasRenderingContext2D ctx = ex.canvas.context2D; CanvasRenderingContext2D ctx = ex.canvas.context2D;
Point c = Point(ex.canvas.width / 2, ex.canvas.height / 2); Point c = Point(ex.canvas.width / 2, ex.canvas.height / 2);
ctx.setFillColorRgb(255, 150, 10); ctx.setFillColorRgb(255, 150, 10);
ctx.fillRect(0, 0, ex.canvas.width, ex.canvas.height); ctx.fillRect(0, 0, ex.canvas.width, ex.canvas.height);
// Draw Play Button
ctx.beginPath(); ctx.beginPath();
ctx.moveTo(c.x - 25, c.y - 25); ctx.moveTo(c.x - 25, c.y - 25);
ctx.lineTo(c.x + 25, c.y + 25); ctx.lineTo(c.x + 25, c.y + 25);
@ -63,11 +65,11 @@ void resetPlaceHolders([Example current]) {
ctx.setFillColorRgb(255, 255, 255); ctx.setFillColorRgb(255, 255, 255);
ctx.stroke(); ctx.stroke();
ctx.fill(); ctx.fill();
// Draw Text
ctx.fillText(ex.name, c.x - ctx.measureText(ex.name).width / 2, c.y - 50); ctx.fillText(ex.name, c.x - ctx.measureText(ex.name).width / 2, c.y - 50);
print("reset ${ex.query}"); print("${ex.query} placeholder created");
}
});
} }
void activate(MouseEvent e) { void activate(MouseEvent e) {
@ -76,16 +78,18 @@ void activate(MouseEvent e) {
examples.forEach((Example ex) { examples.forEach((Example ex) {
if (ex.canvas == c) { if (ex.canvas == c) {
resetPlaceHolders(ex); resetExample(ex);
switch (ex.query) { switch (ex.query) {
case "#while_output": case "#while_output":
ex.loop = new WhileLoop(new Game(c)); print("#while_output loop added");
ex.loop = new WhileLoop(new Game(ex.canvas));
break; break;
case "#variable_output": case "#variable_output":
ex.loop = new FixedLoopVariableRender(new Game(c)); print("#variable_output loop added");
ex.loop = new FixedLoopVariableRender(new Game(ex.canvas));
break; break;
} }
if (ex.canvas == ex.loop.game.canvas) print("CANVASSES ALIGN");
querySelector(ex.query).append(new ButtonElement() querySelector(ex.query).append(new ButtonElement()
..text = "start" ..text = "start"
..onClick.listen((e) { ..onClick.listen((e) {
@ -100,11 +104,8 @@ void activate(MouseEvent e) {
// querySelector('#reset').onClick.listen((e) => ex.loop.game.reset()); // querySelector('#reset').onClick.listen((e) => ex.loop.game.reset());
// querySelector('#plus').onClick.listen((e) => _changeGrid(-5)); // querySelector('#plus').onClick.listen((e) => _changeGrid(-5));
// querySelector('#minus').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)