1. Cat's Eye Technologies
  2. HTML5 Gewgaws

Commits

Cat's Eye Technologies  committed 8cf0959

Update Cyclobots; all gewgaws now use yoob.js 0.6.

  • Participants
  • Parent commits 2f1fb11
  • Branches default

Comments (0)

Files changed (8)

File common-yoob.js-0.5/animation-frame.js

  • Ignore whitespace
-/*
- * This file is part of yoob.js version 0.5
- * Available from https://github.com/catseye/yoob.js/
- * This file is in the public domain.  See http://unlicense.org/ for details.
- */
-if (window.yoob === undefined) yoob = {};
-
-/*
- * Pretty standard shim to get window.{request,cancelRequest}AnimationFrame
- * functions, synthesized from the theory and the many examples I've seen.
- */
-
-window.requestAnimationFrame =
-    window.requestAnimationFrame ||
-    window.webkitRequestAnimationFrame ||
-    window.mozRequestAnimationFrame ||
-    window.oRequestAnimationFrame ||
-    window.msRequestAnimationFrame ||
-    function(f, elem) {
-        return setTimeout(function() {
-            f(Date.now());
-        }, 1000 / 60);
-    };
-
-window.cancelRequestAnimationFrame =
-    window.cancelRequestAnimationFrame ||
-    window.webkitCancelRequestAnimationFrame ||
-    window.mozCancelRequestAnimationFrame ||
-    window.oCancelRequestAnimationFrame ||
-    window.msCancelRequestAnimationFrame ||
-    clearTimeout;
-
-/*
- * Convenience function for using requestAnimationFrame.  Calls the
- * object's draw() method on each animation frame, and calls update()
- * as necessary to ensure it is called once every tickTime milliseconds.
- * By default, tickTime = 1/60th of a second.  It can be configured by
- * passing in a configuration dictionary after the object.  If the
- * configuration dictionary is assigned to a variable outside this
- * function, after this function returns, the request entry in the
- * dictionary will contain the animation request handle.  e.g.,
- *
- *     var cfg = {};
- *     cfg.tickTime = 1000.0 / 50.0;
- *     yoob.setUpQuantumAnimationFrame(this, cfg);
- *     cancelRequestAnimationFrame(cfg.request);
- *
- */
-yoob.setUpQuantumAnimationFrame = function(object, cfg) {
-    cfg = cfg || {};
-    cfg.lastTime = cfg.lastTime || null;
-    cfg.accumDelta = cfg.accumDelta || 0;
-    cfg.tickTime = cfg.tickTime || (1000.0 / 60.0);
-    var animFrame = function(time) {
-        object.draw();
-        if (cfg.lastTime === null) {
-            cfg.lastTime = time;
-        }
-        cfg.accumDelta += (time - cfg.lastTime);
-        while (cfg.accumDelta > cfg.tickTime) {
-            cfg.accumDelta -= cfg.tickTime;
-            object.update();
-        }
-        cfg.lastTime = time;
-        cfg.request = requestAnimationFrame(animFrame);
-    };
-    cfg.request = requestAnimationFrame(animFrame);
-};
-
-/*
- * Convenience function for using requestAnimationFrame.  Calls the
- * object's draw() method on each animation frame, passing the amount
- * of time that has elapsed (in milliseconds) since the last time it
- * was called (or 0 if it was never previously called.)  Otherwise
- * similar to yoob.setUpQuantumAnimationFrame.
- */
-yoob.setUpProportionalAnimationFrame = function(object, cfg) {
-    cfg = cfg || {};
-    cfg.lastTime = cfg.lastTime || null;
-    var animFrame = function(time) {
-        var timeElapsed = cfg.lastTime == null ? 0 : time - cfg.lastTime;
-        cfg.lastTime = time;
-        object.draw(timeElapsed);
-        cfg.request = requestAnimationFrame(animFrame);
-    };
-    cfg.request = requestAnimationFrame(animFrame);
-};

File common-yoob.js-0.5/full-screen-detector.js

  • Ignore whitespace
-/*
- * This file is part of yoob.js version 0.5
- * Available from https://github.com/catseye/yoob.js/
- * This file is in the public domain.  See http://unlicense.org/ for details.
- */
-if (window.yoob === undefined) yoob = {};
-
-/*
- * A shim (of sorts) which detects when the user has toggled their browser's
- * full-screen mode (usually but not necessarily by pressing the F11 key) and
- * fires an 'onchange' event, in which you can resize DOM elements of your
- * choosing to suit the (non-)full-screen display (or whatever else you wish.)
- *
- * Tested in recent Firefox, Chromium, and IE.  Sure to fail in older versions
- * of some of those.
- */
-yoob.FullScreenDetector = function(cfg) {
-    this.init = function(cfg) {
-        this.period = cfg.period || 250;
-        this.onchange = cfg.onchange || function() {};
-        this.fullScreen = false;
-        this.start();
-        return this;
-    };
-
-    this.start = function() {
-        if (this.intervalId) return;
-        var $this = this;
-        this.intervalId = setInterval(function() {
-            if (!$this.fullScreen) {
-                if (window.fullScreen ||
-                      ((!window.screenTop) && (!window.screenY))) {
-                    $this.fullScreen = true;
-                    $this.onchange($this.fullScreen);
-                }
-            } else {
-                if (window.screenTop || window.screenY ||
-                    (window.fullScreen === false)) {
-                    $this.fullScreen = false;
-                    $this.onchange($this.fullScreen);
-                }
-            }
-        }, this.period);
-    };
-
-    this.stop = function() {
-        if (!this.intervalId) return;
-        clearInterval(this.intervalId);
-        this.intervalId = undefined;
-    };
-
-    this.init(cfg);
-};

File common-yoob.js-0.5/splash-screen.js

  • Ignore whitespace
-/*
- * This file is part of yoob.js version 0.5
- * Available from https://github.com/catseye/yoob.js/
- * This file is in the public domain.  See http://unlicense.org/ for details.
- */
-if (window.yoob === undefined) yoob = {};
-
-/*
- * An adapter-type thing which displays a div element with some inner HTML
- * (typically containing a message or logo or such) and a "Proceed" button,
- * all in place of a given element.  When the button is clicked, the div is
- * hidden, the given element is displayed, and the passed-in `onproceed`
- * callback is invoked.
- *
- * The intention is to allow a "splash screen", which may contain a disclaimer
- * or similar, warning of epileptic seizures or nudity or whatever, before the
- * "main canvas" or whatever is actually displayed and started.  Yeah.
- */
-yoob.showSplashScreen = function(cfg) {
-    var elem = document.getElementById(cfg.elementId);
-    var coveringDiv = document.createElement("div");
-    coveringDiv.style.left = elem.offsetLeft + 'px';
-    coveringDiv.style.top = elem.offsetTop + 'px';
-    coveringDiv.style.width = elem.offsetWidth + 'px';
-    coveringDiv.style.height = elem.offsetHeight + 'px';
-    coveringDiv.style.position = "absolute";
-    coveringDiv.style.border = elem.style.border;
-    coveringDiv.style.background = cfg.background || '#ffffff';
-    if (parseInt(elem.style.zIndex) === NaN) {
-        coveringDiv.style.zIndex = 100;
-    } else {
-        coveringDiv.style.zIndex = parseInt(elem.style.zIndex) + 1;
-    }
-    coveringDiv.innerHTML = cfg.innerHTML;
-    var button = document.createElement("button");
-    button.innerHTML = cfg.buttonText || "Proceed";
-    button.onclick = function() {
-        coveringDiv.style.display = 'none';
-        (cfg.onproceed || function() {})();
-    };
-    coveringDiv.appendChild(button);
-    document.body.appendChild(coveringDiv);
-};

File common-yoob.js-0.6/animation-frame.js

View file
  • Ignore whitespace
+/*
+ * This file is part of yoob.js version 0.5
+ * Available from https://github.com/catseye/yoob.js/
+ * This file is in the public domain.  See http://unlicense.org/ for details.
+ */
+if (window.yoob === undefined) yoob = {};
+
+/*
+ * Pretty standard shim to get window.{request,cancelRequest}AnimationFrame
+ * functions, synthesized from the theory and the many examples I've seen.
+ */
+
+window.requestAnimationFrame =
+    window.requestAnimationFrame ||
+    window.webkitRequestAnimationFrame ||
+    window.mozRequestAnimationFrame ||
+    window.oRequestAnimationFrame ||
+    window.msRequestAnimationFrame ||
+    function(f, elem) {
+        return setTimeout(function() {
+            f(Date.now());
+        }, 1000 / 60);
+    };
+
+window.cancelRequestAnimationFrame =
+    window.cancelRequestAnimationFrame ||
+    window.webkitCancelRequestAnimationFrame ||
+    window.mozCancelRequestAnimationFrame ||
+    window.oCancelRequestAnimationFrame ||
+    window.msCancelRequestAnimationFrame ||
+    clearTimeout;
+
+/*
+ * Convenience function for using requestAnimationFrame.  Calls the
+ * object's draw() method on each animation frame, and calls update()
+ * as necessary to ensure it is called once every tickTime milliseconds.
+ * By default, tickTime = 1/60th of a second.  It can be configured by
+ * passing in a configuration dictionary after the object.  If the
+ * configuration dictionary is assigned to a variable outside this
+ * function, after this function returns, the request entry in the
+ * dictionary will contain the animation request handle.  e.g.,
+ *
+ *     var cfg = {};
+ *     cfg.tickTime = 1000.0 / 50.0;
+ *     yoob.setUpQuantumAnimationFrame(this, cfg);
+ *     cancelRequestAnimationFrame(cfg.request);
+ *
+ */
+yoob.setUpQuantumAnimationFrame = function(object, cfg) {
+    cfg = cfg || {};
+    cfg.lastTime = cfg.lastTime || null;
+    cfg.accumDelta = cfg.accumDelta || 0;
+    cfg.tickTime = cfg.tickTime || (1000.0 / 60.0);
+    var animFrame = function(time) {
+        object.draw();
+        if (cfg.lastTime === null) {
+            cfg.lastTime = time;
+        }
+        cfg.accumDelta += (time - cfg.lastTime);
+        while (cfg.accumDelta > cfg.tickTime) {
+            cfg.accumDelta -= cfg.tickTime;
+            object.update();
+        }
+        cfg.lastTime = time;
+        cfg.request = requestAnimationFrame(animFrame);
+    };
+    cfg.request = requestAnimationFrame(animFrame);
+};
+
+/*
+ * Convenience function for using requestAnimationFrame.  Calls the
+ * object's draw() method on each animation frame, passing the amount
+ * of time that has elapsed (in milliseconds) since the last time it
+ * was called (or 0 if it was never previously called.)  Otherwise
+ * similar to yoob.setUpQuantumAnimationFrame.
+ */
+yoob.setUpProportionalAnimationFrame = function(object, cfg) {
+    cfg = cfg || {};
+    cfg.lastTime = cfg.lastTime || null;
+    var animFrame = function(time) {
+        var timeElapsed = cfg.lastTime == null ? 0 : time - cfg.lastTime;
+        cfg.lastTime = time;
+        object.draw(timeElapsed);
+        cfg.request = requestAnimationFrame(animFrame);
+    };
+    cfg.request = requestAnimationFrame(animFrame);
+};

File common-yoob.js-0.6/full-screen-detector.js

View file
  • Ignore whitespace
+/*
+ * This file is part of yoob.js version 0.5
+ * Available from https://github.com/catseye/yoob.js/
+ * This file is in the public domain.  See http://unlicense.org/ for details.
+ */
+if (window.yoob === undefined) yoob = {};
+
+/*
+ * A shim (of sorts) which detects when the user has toggled their browser's
+ * full-screen mode (usually but not necessarily by pressing the F11 key) and
+ * fires an 'onchange' event, in which you can resize DOM elements of your
+ * choosing to suit the (non-)full-screen display (or whatever else you wish.)
+ *
+ * Tested in recent Firefox, Chromium, and IE.  Sure to fail in older versions
+ * of some of those.
+ */
+yoob.FullScreenDetector = function(cfg) {
+    this.init = function(cfg) {
+        this.period = cfg.period || 250;
+        this.onchange = cfg.onchange || function() {};
+        this.fullScreen = false;
+        this.start();
+        return this;
+    };
+
+    this.start = function() {
+        if (this.intervalId) return;
+        var $this = this;
+        this.intervalId = setInterval(function() {
+            if (!$this.fullScreen) {
+                if (window.fullScreen ||
+                      ((!window.screenTop) && (!window.screenY))) {
+                    $this.fullScreen = true;
+                    $this.onchange($this.fullScreen);
+                }
+            } else {
+                if (window.screenTop || window.screenY ||
+                    (window.fullScreen === false)) {
+                    $this.fullScreen = false;
+                    $this.onchange($this.fullScreen);
+                }
+            }
+        }, this.period);
+    };
+
+    this.stop = function() {
+        if (!this.intervalId) return;
+        clearInterval(this.intervalId);
+        this.intervalId = undefined;
+    };
+
+    this.init(cfg);
+};

File common-yoob.js-0.6/splash-screen.js

View file
  • Ignore whitespace
+/*
+ * This file is part of yoob.js version 0.5
+ * Available from https://github.com/catseye/yoob.js/
+ * This file is in the public domain.  See http://unlicense.org/ for details.
+ */
+if (window.yoob === undefined) yoob = {};
+
+/*
+ * An adapter-type thing which displays a div element with some inner HTML
+ * (typically containing a message or logo or such) and a "Proceed" button,
+ * all in place of a given element.  When the button is clicked, the div is
+ * hidden, the given element is displayed, and the passed-in `onproceed`
+ * callback is invoked.
+ *
+ * The intention is to allow a "splash screen", which may contain a disclaimer
+ * or similar, warning of epileptic seizures or nudity or whatever, before the
+ * "main canvas" or whatever is actually displayed and started.  Yeah.
+ */
+yoob.showSplashScreen = function(cfg) {
+    var elem = document.getElementById(cfg.elementId);
+    var coveringDiv = document.createElement("div");
+    coveringDiv.style.left = elem.offsetLeft + 'px';
+    coveringDiv.style.top = elem.offsetTop + 'px';
+    coveringDiv.style.width = elem.offsetWidth + 'px';
+    coveringDiv.style.height = elem.offsetHeight + 'px';
+    coveringDiv.style.position = "absolute";
+    coveringDiv.style.border = elem.style.border;
+    coveringDiv.style.background = cfg.background || '#ffffff';
+    if (parseInt(elem.style.zIndex) === NaN) {
+        coveringDiv.style.zIndex = 100;
+    } else {
+        coveringDiv.style.zIndex = parseInt(elem.style.zIndex) + 1;
+    }
+    coveringDiv.innerHTML = cfg.innerHTML;
+    var button = document.createElement("button");
+    button.innerHTML = cfg.buttonText || "Proceed";
+    button.onclick = function() {
+        coveringDiv.style.display = 'none';
+        (cfg.onproceed || function() {})();
+    };
+    coveringDiv.appendChild(button);
+    document.body.appendChild(coveringDiv);
+};

File cyclobots/cyclobots.js

View file
  • Ignore whitespace
             e.preventDefault();
         });
 
-        yoob.setUpQuantumAnimationFrame(this);
+        this.animation = (new yoob.Animation()).init({
+            object: this
+        });
+        this.animation.start();
     };
 
     this.selectABot = function(canvasX, canvasY) {

File multicolouralism/index.html

View file
  • Ignore whitespace
 
 </body>
 <script src="../common-yoob.js-0.6/animation.js"></script>
-<script src="../common-yoob.js-0.5/splash-screen.js"></script>
+<script src="../common-yoob.js-0.6/splash-screen.js"></script>
 <script src="multicolouralism.js"></script>
 <script>
   yoob.showSplashScreen({