Merge pull request #118 from Strilanc/dev

Dev

package.json

@@ -3,7 +3,7 @@
   "title": "Quirk",
   "description": "An HTML5 toy for exploring and understanding small quantum circuits.",
   "license": "Apache-2.0",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "homepage": "https://github.com/Strilanc/Quirk",
   "bugs": {
     "url": "https://github.com/Strilanc/Quirk/issues"

res/index.html

@@ -9,6 +9,14 @@
         <a href="https://github.com/Strilanc/Quirk/"
            style="position: fixed; bottom: 5px; right: 5px; font-size: 20px;">About Quirk</a>
         <div id="inspectorDiv">
+            <div id="loading-div" style="color: orange; font-size: 24px; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);">
+                Loading Quirk...
+            </div>
+            <noscript>
+                <div style="color: red; font-size: 24px; position: absolute; top: 25%; left: 50%; transform: translate(-50%, -50%);">
+                    You appear to have JavaScript blocked. But Quirk is made out of JavaScript... :(
+                </div>
+            </noscript>
             <div id="canvasDiv" style="width: 100%;">
                 <canvas id="drawCanvas"></canvas>
             </div>

src/browser/Polyfills.js

@@ -5,6 +5,16 @@ Float32Array.prototype.slice = Float32Array.prototype.slice || function(a, b, c)
 Float64Array.prototype.slice = Float64Array.prototype.slice || function(a, b, c) {
     return new Float64Array(Array.from(this).slice(a, b, c));
 };
+Uint32Array.prototype.slice = Float64Array.prototype.slice || function(a, b, c) {
+    return new Uint32Array(Array.from(this).slice(a, b, c));
+};
+Uint16Array.prototype.slice = Float64Array.prototype.slice || function(a, b, c) {
+    return new Uint16Array(Array.from(this).slice(a, b, c));
+};
+Uint8Array.prototype.slice = Float64Array.prototype.slice || function(a, b, c) {
+    return new Uint8Array(Array.from(this).slice(a, b, c));
+};
+
 const ARRAY_ITER = function() {
     let self = this;
     return function*() {
@@ -15,6 +25,13 @@ const ARRAY_ITER = function() {
 };
 Float32Array.prototype[Symbol.iterator] = Float32Array.prototype[Symbol.iterator] || ARRAY_ITER;
 Float64Array.prototype[Symbol.iterator] = Float64Array.prototype[Symbol.iterator] || ARRAY_ITER;
+Uint32Array.prototype[Symbol.iterator] = Uint32Array.prototype[Symbol.iterator] || ARRAY_ITER;
+Uint16Array.prototype[Symbol.iterator] = Uint16Array.prototype[Symbol.iterator] || ARRAY_ITER;
+Uint8Array.prototype[Symbol.iterator] = Uint8Array.prototype[Symbol.iterator] || ARRAY_ITER;
+
+// This was missing on the iPhone I tested.
+window.performance = window.performance || {};
+window.performance.now = window.performance.now || (() => Date.now());
 
 // Safari only puts properties on instances of WebGLRenderingContext.
 const GL = WebGLRenderingContext;

src/circuit/CircuitDefinition.js

@@ -540,18 +540,21 @@ class CircuitDefinition {
         let nonSwaps = seq(col.gates).
             mapWithIndex((gate, i) => {
                 let pt = new Point(colIndex, i);
-                if (gate === null || this.gateAtLocIsDisabledReason(pt) !== undefined) {
-                    return [];
-                }
-                let m = gate.matrixAt(time);
-                if (gate === Gates.Special.SwapHalf || m.isIdentity()) {
+                if (gate === null
+                        || gate === Gates.Special.SwapHalf
+                        || this.gateAtLocIsDisabledReason(pt) !== undefined) {
                     return [];
                 }
 
                 if (gate.customShaders !== undefined) {
                     return gate.customShaders.map(f => (inTex, conTex) => f(inTex, conTex, i, time));
                 }
 
+                let m = gate.matrixAt(time);
+                if (m.isIdentity()) {
+                    return [];
+                }
+
                 return [(inTex, conTex) => GateShaders.qubitOperation(inTex, m, i, conTex)];
             }).
             flatten();

src/main.js

@@ -322,10 +322,11 @@ const loadCircuitFromUrl = () => {
 
 window.onpopstate = () => loadCircuitFromUrl(false);
 loadCircuitFromUrl();
-haveLoaded = true;
-redrawNow();
 
 // If the webgl initialization is going to fail, don't fail during the module loading phase.
+haveLoaded = true;
 setTimeout(() => {
     initializedWglContext().onContextRestored = () => redrawThrottle.trigger();
+    redrawNow();
+    document.getElementById("loading-div").style.display = 'none';
 }, 0);

src/ui/Gates.js

@@ -319,7 +319,7 @@ const CountingGateMaker = span => new Gate(
     t => Matrix.generate(1<<span, 1<<span, (r, c) => ((r-Math.floor(t*(1<<span))) & ((1<<span)-1)) === c ? 1 : 0),
     "Counting Gate",
     "Adds an increasing little-endian count into a block of qubits."
-).withSerializedId("counting" + span).
+).withSerializedId("Counting" + span).
     withCustomDrawer(GatePainting.MATHWISE_CYCLE_DRAWER).
     withHeight(span).
     withTimeDependence().