diff --git a/mainloop.js/mainloop.js-tests.ts b/mainloop.js/mainloop.js-tests.ts
new file mode 100644
index 0000000000..86a4db6240
--- /dev/null
+++ b/mainloop.js/mainloop.js-tests.ts
@@ -0,0 +1,95 @@
+///
+
+// To see what this test does, create an HTML file with these contents and open it:
+/*
+
+
+
+
+
+
+ MainLoop.js test
+
+
+
+
+
+
+
+
+
+
+*/
+
+window.addEventListener('load', () => {
+
+ let cx = window.innerWidth / 2 - 15,
+ cy = window.innerHeight / 2 - 15,
+ x = cx + 120,
+ y = cy,
+ lx = x,
+ ly = y,
+ theta = 0
+ const radius = 120,
+ velocity = 0.1 * Math.PI / 180;
+
+ const actor = document.createElement('div');
+ actor.style.width = '30px';
+ actor.style.height = '30px';
+ actor.style.backgroundColor = 'red';
+ actor.style.position = 'absolute';
+ actor.style.left = x + 'px';
+ actor.style.top = y + 'px';
+
+ document.body.appendChild(actor);
+
+ const fpsCounter = document.createElement('div');
+ fpsCounter.style.position = 'absolute';
+ fpsCounter.style.left = '10px';
+ fpsCounter.style.top = '10px';
+
+ document.body.appendChild(fpsCounter);
+
+ document.body.addEventListener('click', (event) => {
+ cx = event.pageX;
+ cy = event.pageY;
+ });
+
+ MainLoop
+ .setBegin((timestamp, delta) => {
+ lx = x;
+ ly = y;
+ x = cx + Math.cos(theta) * radius;
+ y = cy + Math.sin(theta) * radius;
+ })
+ .setDraw((interpolationPercentage) => {
+ actor.style.left = (lx + (x - lx) * interpolationPercentage) + 'px';
+ actor.style.top = (ly + (y - ly) * interpolationPercentage) + 'px';
+ })
+ .setUpdate((delta) => {
+ theta += velocity * delta;
+ })
+ .setEnd((fps, panic) => {
+ fpsCounter.textContent = Math.round(fps) + ' FPS';
+ if (panic) {
+ console.info(
+ `Main loop panicked; tried to simulate too much time. Discarding ${MainLoop.resetFrameDelta()}ms`
+ );
+ }
+ })
+ .start();
+
+ document.body.addEventListener('keyup', (event) => {
+ if ((event.which || event.keyCode) === 80) { // Hit P to toggle Pause
+ if (MainLoop.isRunning()) {
+ MainLoop.stop();
+ }
+ else {
+ MainLoop.start();
+ }
+ }
+ });
+
+});
diff --git a/mainloop.js/mainloop.js.d.ts b/mainloop.js/mainloop.js.d.ts
new file mode 100644
index 0000000000..f34d6f035a
--- /dev/null
+++ b/mainloop.js/mainloop.js.d.ts
@@ -0,0 +1,28 @@
+// Type definitions for MainLoop.js v1.0.3
+// Project: https://github.com/IceCreamYou/MainLoop.js
+// Definitions by: Isaac Sukin
+// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
+
+/**
+ * Interface for the MainLoop.js global.
+ *
+ * See the API documentation for a detailed explanation of these methods:
+ * http://icecreamyou.github.com/MainLoop.js/docs/#!/api/MainLoop
+ */
+interface MainLoop {
+ getFPS(): number;
+ getMaxAllowedFPS(): number;
+ getSimulationTimestep(): number;
+ isRunning(): boolean;
+ resetFrameDelta(): number;
+ setBegin(begin: (timestamp: number, delta: number) => void): MainLoop;
+ setDraw(draw: (interpolationPercentage: number) => void): MainLoop;
+ setUpdate(update: (delta: number) => void): MainLoop;
+ setEnd(end: (fps: number, panic: boolean) => void): MainLoop;
+ setMaxAllowedFPS(fps?: number): MainLoop;
+ setSimulationTimestep(timestep: number): MainLoop;
+ start(): MainLoop;
+ stop(): MainLoop;
+}
+
+declare var MainLoop: MainLoop;