From 2668b8f839ede235728a1c41cca68a40bb7fbcaf Mon Sep 17 00:00:00 2001
From: Manas Jayanth <3097018+ManasJayanth@users.noreply.github.com>
Date: Wed, 18 Sep 2024 17:00:59 +0530
Subject: [PATCH] Use the new reason-loader with relative require() fixes

---
 src/pages/mdn-game-tutorial/Animation.re           |  5 +++--
 src/pages/mdn-game-tutorial/Ball.re                |  1 +
 .../mdn-game-tutorial/{bindings.re => Canvas.re}   | 14 ++++++--------
 src/pages/mdn-game-tutorial/Document.re            |  5 +++++
 4 files changed, 15 insertions(+), 10 deletions(-)
 create mode 100644 src/pages/mdn-game-tutorial/Ball.re
 rename src/pages/mdn-game-tutorial/{bindings.re => Canvas.re} (59%)
 create mode 100644 src/pages/mdn-game-tutorial/Document.re

diff --git a/src/pages/mdn-game-tutorial/Animation.re b/src/pages/mdn-game-tutorial/Animation.re
index efa6323..f098b9f 100644
--- a/src/pages/mdn-game-tutorial/Animation.re
+++ b/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;
diff --git a/src/pages/mdn-game-tutorial/Ball.re b/src/pages/mdn-game-tutorial/Ball.re
new file mode 100644
index 0000000..18e1096
--- /dev/null
+++ b/src/pages/mdn-game-tutorial/Ball.re
@@ -0,0 +1 @@
+let ballRadius = 130;
diff --git a/src/pages/mdn-game-tutorial/bindings.re b/src/pages/mdn-game-tutorial/Canvas.re
similarity index 59%
rename from src/pages/mdn-game-tutorial/bindings.re
rename to src/pages/mdn-game-tutorial/Canvas.re
index b868b2f..e0d95ad 100644
--- a/src/pages/mdn-game-tutorial/bindings.re
+++ b/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";
diff --git a/src/pages/mdn-game-tutorial/Document.re b/src/pages/mdn-game-tutorial/Document.re
new file mode 100644
index 0000000..472a4f4
--- /dev/null
+++ b/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";