Use the new reason-loader with relative require() fixes

src/pages/mdn-game-tutorial/Animation.re

@@ -1,9 +1,10 @@
-open Bindings;
+open Canvas;
+open Ball;
 
 /* Bindings to external JavaScript APIs */
-let ballRadius = 10;
 /* The main render function */
 let rec render = (canvasRef: reactRef, x, dx, y, dy) => {
+  Js.log(Document.getElementById(Document.document, "d"));
   let canvas = getCurrent(canvasRef);
   let ctx = getContext(canvas, "2d");
   let square = x => x * x;

src/pages/mdn-game-tutorial/Ball.re

@@ -0,0 +1 @@
+let ballRadius = 130;

src/pages/mdn-game-tutorial/bindings.re → src/pages/mdn-game-tutorial/Canvas.re

@@ -1,15 +1,13 @@
+open Document;
+
 type canvas;
 type context2d;
-type document;
 type reactRef;
 
-external document: document = "document";
-[@mel.send]
-external getElementById: (document, string) => canvas = "getElementById";
-[@mel.send] external getContext: (canvas, string) => context2d = "getContext";
-[@mel.get] external getWidth: canvas => int = "width";
-[@mel.get] external getHeight: canvas => int = "height";
-[@mel.get] external getCurrent: reactRef => canvas = "current";
+[@mel.send] external getContext: (htmlElement, string) => context2d = "getContext";
+[@mel.get] external getWidth: htmlElement => int = "width";
+[@mel.get] external getHeight: htmlElement => int = "height";
+[@mel.get] external getCurrent: reactRef => htmlElement = "current";
 [@mel.send]
 external clearRect: (context2d, float, float, float, float) => unit =
   "clearRect";

src/pages/mdn-game-tutorial/Document.re

@@ -0,0 +1,5 @@
+type document;
+type htmlElement;
+external document: document = "document";
+[@mel.send]
+external getElementById: (document, string) => htmlElement = "getElementById";