Adding the mainloop.js folder

2026-04-01 12:42:58 +08:00 · 2016-07-29 19:00:42 -07:00
parent ce71f72bce
commit ee86f2a645
2 changed files with 123 additions and 0 deletions
--- a/mainloop.js/mainloop.js-tests.ts
+++ b/mainloop.js/mainloop.js-tests.ts
@@ -0,0 +1,95 @@
+/// <reference path="mainloop.js.d.ts" />
+
+// To see what this test does, create an HTML file with these contents and open it:
+/*
+<!DOCTYPE html>
+<html>
+<head>
+    <meta charset="utf-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
+
+    <title>MainLoop.js test</title>
+
+    <meta name="description" content="TypeScript typings test for MainLoop.js.">
+
+    <style>
+html, body { height: 100%; margin: 0; overflow: hidden; position: relative; }
+    </style>
+</head>
+<body>
+    <script src="https://rawgit.com/IceCreamYou/MainLoop.js/gh-pages/build/mainloop.min.js"></script>
+    <script src="mainloop.js-tests.js"></script>
+</body>
+</html>
+*/
+
+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();
+            }
+        }
+    });
+
+});
--- a/mainloop.js/mainloop.js.d.ts
+++ 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 <http://isaacsukin.com>
+// 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;