S01a

.gitignore

@@ -0,0 +1,2 @@
+MagicBoxes.dart.js
+*~

Board.dart

@@ -0,0 +1,30 @@
+class Board {
+
+  int x = 0;
+  int y = 0;
+  int width;
+  int height;
+
+  CanvasRenderingContext2D context;
+
+  Board(CanvasElement canvas) {
+    context = canvas.getContext("2d");
+    width = canvas.width;
+    height = canvas.height;
+    border();
+    init();
+  }
+
+  void init() {
+    new Box(this, 20, 20, 40, 60);
+    new Box(this, 120, 40, 60, 40);
+  }
+
+  void border() {
+    context.beginPath();
+    context.rect(x, y, width, height);
+    context.closePath();
+    context.stroke();
+  }
+
+}

Box.dart

@@ -0,0 +1,21 @@
+class Box {
+
+  Board board;
+
+  int x;
+  int y;
+  int width;
+  int height;
+
+  Box(this.board, this.x, this.y, this.width, this.height) {
+    draw();
+  }
+
+  void draw() {
+    board.context.beginPath();
+    board.context.rect(x, y, width, height);
+    board.context.closePath();
+    board.context.stroke();
+  }
+
+}

MagicBoxes.dart

@@ -1,20 +1,13 @@
 #import('dart:html');
+#source('Box.dart');
+#source('Board.dart');
 
-class MagicBoxes {
+// branch s01a
 
-  MagicBoxes() {
-  }
-
-  void run() {
-    write("Hello World!");
-  }
-
-  void write(String message) {
-    // the HTML library defines a global "document" variable
-    document.query('#status').innerHTML = message;
-  }
-}
+// See the style guide: http://www.dartlang.org/articles/style-guide/.
 
 void main() {
-  new MagicBoxes().run();
+  // Get a reference to the canvas.
+  CanvasElement canvas = document.query('#canvas');
+  Board board = new Board(canvas);
 }