added demo section with logic gates

diff --git a/demos.js b/demos.js
new file mode 100644 (file)
index 0000000..efb183c
--- /dev/null
+++ b/demos.js
@@ -0,0 +1,14 @@
+
+load_demos = function(selelt) {
+               for(let k in demos) {
+                               let opt = document.createElement('option');
+                               opt.value = k;
+                               opt.innerText = k;
+                               selelt.appendChild(opt);
+               }
+}
+
+demos = {
+               'small_gates': '[{"q":7,"r":1,"state":"off"},{"q":7,"r":2,"state":"off"},{"q":8,"r":0,"state":"off"},{"q":6,"r":1,"state":"off"},{"q":7,"r":5,"state":"off"},{"q":11,"r":-2,"state":"off"},{"q":11,"r":-3,"state":"off"},{"q":4,"r":0,"state":"off"},{"q":3,"r":1,"state":"off"},{"q":6,"r":5,"state":"off"},{"q":7,"r":6,"state":"off"},{"q":12,"r":-4,"state":"off"},{"q":2,"r":1,"state":"off"},{"q":7,"r":7,"state":"off"},{"q":13,"r":-5,"state":"head"},{"q":1,"r":1,"state":"head"},{"q":7,"r":8,"state":"tail"},{"q":8,"r":7,"state":"tail"},{"q":9,"r":6,"state":"tail"},{"q":11,"r":4,"state":"off"},{"q":12,"r":3,"state":"off"},{"q":13,"r":2,"state":"off"},{"q":14,"r":1,"state":"off"},{"q":14,"r":0,"state":"off"},{"q":14,"r":-1,"state":"off"},{"q":14,"r":-2,"state":"off"},{"q":14,"r":-4,"state":"tail"},{"q":14,"r":-5,"state":"tail"},{"q":14,"r":-6,"state":"tail"},{"q":13,"r":-6,"state":"tail"},{"q":12,"r":-6,"state":"tail"},{"q":10,"r":-6,"state":"off"},{"q":9,"r":-6,"state":"off"},{"q":8,"r":-6,"state":"off"},{"q":7,"r":-6,"state":"off"},{"q":6,"r":-5,"state":"off"},{"q":5,"r":-4,"state":"off"},{"q":4,"r":-3,"state":"off"},{"q":2,"r":-1,"state":"tail"},{"q":1,"r":0,"state":"tail"},{"q":0,"r":1,"state":"tail"},{"q":0,"r":2,"state":"tail"},{"q":0,"r":3,"state":"tail"},{"q":0,"r":5,"state":"off"},{"q":0,"r":6,"state":"off"},{"q":0,"r":7,"state":"off"},{"q":0,"r":8,"state":"off"},{"q":1,"r":8,"state":"off"},{"q":2,"r":8,"state":"off"},{"q":3,"r":8,"state":"off"},{"q":5,"r":8,"state":"tail"},{"q":6,"r":8,"state":"tail"},{"q":26,"r":1,"state":"off"},{"q":26,"r":2,"state":"off"},{"q":27,"r":1,"state":"off"},{"q":27,"r":0,"state":"off"},{"q":25,"r":1,"state":"off"},{"q":25,"r":2,"state":"off"},{"q":26,"r":3,"state":"off"},{"q":28,"r":-1,"state":"off"},{"q":24,"r":1,"state":"off"},{"q":27,"r":3,"state":"off"},{"q":28,"r":2,"state":"off"},{"q":29,"r":-1,"state":"off"},{"q":28,"r":-2,"state":"off"},{"q":24,"r":0,"state":"off"},{"q":23,"r":2,"state":"off"},{"q":29,"r":2,"state":"off"},{"q":30,"r":-2,"state":"off"},{"q":30,"r":-3,"state":"off"},{"q":29,"r":-3,"state":"off"},{"q":23,"r":0,"state":"off"},{"q":22,"r":1,"state":"off"},{"q":22,"r":2,"state":"off"},{"q":26,"r":6,"state":"off"},{"q":27,"r":5,"state":"off"},{"q":28,"r":4,"state":"off"},{"q":29,"r":3,"state":"off"},{"q":31,"r":-3,"state":"off"},{"q":31,"r":-4,"state":"off"},{"q":30,"r":-4,"state":"off"},{"q":22,"r":0,"state":"off"},{"q":21,"r":1,"state":"off"},{"q":21,"r":2,"state":"off"},{"q":26,"r":7,"state":"off"},{"q":32,"r":-5,"state":"head"},{"q":20,"r":1,"state":"head"},{"q":26,"r":8,"state":"tail"},{"q":27,"r":7,"state":"tail"},{"q":28,"r":6,"state":"tail"},{"q":30,"r":4,"state":"off"},{"q":31,"r":3,"state":"off"},{"q":32,"r":2,"state":"off"},{"q":33,"r":1,"state":"off"},{"q":33,"r":0,"state":"off"},{"q":33,"r":-1,"state":"off"},{"q":33,"r":-2,"state":"off"},{"q":33,"r":-4,"state":"tail"},{"q":33,"r":-5,"state":"tail"},{"q":33,"r":-6,"state":"tail"},{"q":32,"r":-6,"state":"tail"},{"q":31,"r":-6,"state":"tail"},{"q":29,"r":-6,"state":"off"},{"q":28,"r":-6,"state":"off"},{"q":27,"r":-6,"state":"off"},{"q":26,"r":-6,"state":"off"},{"q":25,"r":-5,"state":"off"},{"q":24,"r":-4,"state":"off"},{"q":23,"r":-3,"state":"off"},{"q":21,"r":-1,"state":"tail"},{"q":20,"r":0,"state":"tail"},{"q":19,"r":1,"state":"tail"},{"q":19,"r":2,"state":"tail"},{"q":19,"r":3,"state":"tail"},{"q":19,"r":5,"state":"off"},{"q":19,"r":6,"state":"off"},{"q":19,"r":7,"state":"off"},{"q":19,"r":8,"state":"off"},{"q":20,"r":8,"state":"off"},{"q":21,"r":8,"state":"off"},{"q":22,"r":8,"state":"off"},{"q":24,"r":8,"state":"tail"},{"q":25,"r":8,"state":"tail"},{"q":5,"r":1,"state":"off"},{"q":4,"r":2,"state":"off"},{"q":5,"r":0,"state":"off"},{"q":3,"r":2,"state":"off"},{"q":2,"r":2,"state":"off"},{"q":3,"r":0,"state":"off"},{"q":5,"r":3,"state":"off"},{"q":6,"r":3,"state":"off"},{"q":9,"r":-1,"state":"off"},{"q":4,"r":4,"state":"off"},{"q":10,"r":-1,"state":"off"},{"q":9,"r":-2,"state":"off"},{"q":4,"r":5,"state":"off"},{"q":5,"r":5,"state":"off"},{"q":10,"r":-3,"state":"off"},{"q":12,"r":-3,"state":"off"},{"q":11,"r":-4,"state":"off"},{"q":47,"r":1,"state":"off"},{"q":47,"r":2,"state":"off"},{"q":48,"r":1,"state":"off"},{"q":48,"r":0,"state":"off"},{"q":46,"r":1,"state":"off"},{"q":46,"r":2,"state":"off"},{"q":47,"r":3,"state":"off"},{"q":49,"r":-1,"state":"off"},{"q":48,"r":-1,"state":"off"},{"q":47,"r":-1,"state":"off"},{"q":45,"r":1,"state":"off"},{"q":50,"r":1,"state":"off"},{"q":50,"r":0,"state":"off"},{"q":50,"r":-1,"state":"off"},{"q":47,"r":-2,"state":"off"},{"q":45,"r":0,"state":"off"},{"q":44,"r":2,"state":"off"},{"q":45,"r":4,"state":"off"},{"q":46,"r":4,"state":"off"},{"q":51,"r":1,"state":"off"},{"q":50,"r":-3,"state":"off"},{"q":49,"r":-3,"state":"off"},{"q":47,"r":-3,"state":"off"},{"q":44,"r":0,"state":"off"},{"q":43,"r":1,"state":"off"},{"q":43,"r":2,"state":"off"},{"q":44,"r":5,"state":"off"},{"q":47,"r":6,"state":"off"},{"q":52,"r":0,"state":"head"},{"q":52,"r":-1,"state":"tail"},{"q":52,"r":-2,"state":"off"},{"q":52,"r":-3,"state":"off"},{"q":52,"r":-4,"state":"off"},{"q":51,"r":-4,"state":"off"},{"q":49,"r":-4,"state":"off"},{"q":48,"r":-4,"state":"off"},{"q":43,"r":0,"state":"off"},{"q":42,"r":1,"state":"off"},{"q":42,"r":2,"state":"off"},{"q":44,"r":6,"state":"off"},{"q":45,"r":6,"state":"off"},{"q":46,"r":6,"state":"off"},{"q":47,"r":7,"state":"off"},{"q":41,"r":1,"state":"head"},{"q":47,"r":8,"state":"tail"},{"q":48,"r":7,"state":"tail"},{"q":49,"r":6,"state":"tail"},{"q":51,"r":4,"state":"off"},{"q":52,"r":3,"state":"off"},{"q":53,"r":2,"state":"off"},{"q":54,"r":1,"state":"off"},{"q":54,"r":0,"state":"off"},{"q":54,"r":-1,"state":"off"},{"q":54,"r":-2,"state":"off"},{"q":54,"r":-4,"state":"tail"},{"q":54,"r":-5,"state":"tail"},{"q":54,"r":-6,"state":"tail"},{"q":53,"r":-6,"state":"tail"},{"q":52,"r":-6,"state":"tail"},{"q":50,"r":-6,"state":"off"},{"q":49,"r":-6,"state":"off"},{"q":48,"r":-6,"state":"off"},{"q":47,"r":-6,"state":"off"},{"q":46,"r":-5,"state":"off"},{"q":45,"r":-4,"state":"off"},{"q":44,"r":-3,"state":"off"},{"q":42,"r":-1,"state":"tail"},{"q":41,"r":0,"state":"tail"},{"q":40,"r":1,"state":"tail"},{"q":40,"r":2,"state":"tail"},{"q":40,"r":3,"state":"tail"},{"q":40,"r":5,"state":"off"},{"q":40,"r":6,"state":"off"},{"q":40,"r":7,"state":"off"},{"q":40,"r":8,"state":"off"},{"q":41,"r":8,"state":"off"},{"q":42,"r":8,"state":"off"},{"q":43,"r":8,"state":"off"},{"q":45,"r":8,"state":"tail"},{"q":46,"r":8,"state":"tail"},{"q":-2,"r":12,"state":"off"},{"q":-3,"r":13,"state":"off"},{"q":-4,"r":15,"state":"tail"},{"q":-1,"r":14,"state":"off"},{"q":-4,"r":16,"state":"off"},{"q":1,"r":15,"state":"off"},{"q":2,"r":14,"state":"off"},{"q":2,"r":13,"state":"off"},{"q":3,"r":12,"state":"off"},{"q":3,"r":14,"state":"off"},{"q":16,"r":12,"state":"head"},{"q":16,"r":13,"state":"off"},{"q":16,"r":15,"state":"off"},{"q":16,"r":16,"state":"off"},{"q":16,"r":14,"state":"off"},{"q":15,"r":15,"state":"off"},{"q":14,"r":16,"state":"off"},{"q":17,"r":13,"state":"off"},{"q":18,"r":12,"state":"off"},{"q":18,"r":14,"state":"head"},{"q":19,"r":13,"state":"off"},{"q":20,"r":12,"state":"off"},{"q":21,"r":12,"state":"off"},{"q":21,"r":13,"state":"off"},{"q":21,"r":14,"state":"off"},{"q":20,"r":15,"state":"off"},{"q":18,"r":15,"state":"off"},{"q":18,"r":16,"state":"off"},{"q":19,"r":16,"state":"off"},{"q":22,"r":16,"state":"off"},{"q":23,"r":15,"state":"off"},{"q":23,"r":14,"state":"off"},{"q":24,"r":13,"state":"off"},{"q":24,"r":12,"state":"head"},{"q":25,"r":12,"state":"off"},{"q":26,"r":12,"state":"off"},{"q":26,"r":13,"state":"off"},{"q":25,"r":14,"state":"off"},{"q":24,"r":14,"state":"off"},{"q":25,"r":15,"state":"off"},{"q":25,"r":16,"state":"off"},{"q":-1,"r":12,"state":"off"},{"q":-1,"r":13,"state":"off"},{"q":-4,"r":14,"state":"head"},{"q":-2,"r":15,"state":"off"},{"q":-3,"r":16,"state":"off"},{"q":1,"r":14,"state":"off"},{"q":3,"r":16,"state":"off"},{"q":3,"r":15,"state":"off"},{"q":0,"r":16,"state":"head"},{"q":2,"r":12,"state":"off"},{"q":4,"r":12,"state":"off"},{"q":4,"r":13,"state":"off"},{"q":35,"r":16,"state":"head"},{"q":36,"r":15,"state":"off"},{"q":36,"r":14,"state":"off"},{"q":37,"r":13,"state":"off"},{"q":37,"r":12,"state":"off"},{"q":38,"r":13,"state":"off"},{"q":38,"r":14,"state":"off"},{"q":38,"r":15,"state":"off"},{"q":39,"r":16,"state":"off"},{"q":39,"r":15,"state":"off"},{"q":40,"r":14,"state":"off"},{"q":40,"r":13,"state":"off"},{"q":41,"r":12,"state":"off"},{"q":42,"r":14,"state":"off"},{"q":43,"r":13,"state":"head"},{"q":44,"r":12,"state":"tail"},{"q":45,"r":12,"state":"off"},{"q":45,"r":13,"state":"off"},{"q":45,"r":14,"state":"off"},{"q":44,"r":15,"state":"head"},{"q":43,"r":16,"state":"tail"},{"q":42,"r":16,"state":"off"},{"q":42,"r":15,"state":"off"},{"q":47,"r":12,"state":"off"},{"q":48,"r":12,"state":"off"},{"q":49,"r":12,"state":"off"},{"q":50,"r":12,"state":"off"},{"q":48,"r":13,"state":"off"},{"q":47,"r":15,"state":"off"},{"q":46,"r":16,"state":"head"},{"q":47,"r":14,"state":"off"}]',
+               'big_gates': '[{"q":4,"r":6,"state":"off"},{"q":2,"r":7,"state":"off"},{"q":4,"r":8,"state":"off"},{"q":5,"r":7,"state":"off"},{"q":5,"r":5,"state":"off"},{"q":1,"r":7,"state":"off"},{"q":1,"r":9,"state":"off"},{"q":2,"r":9,"state":"off"},{"q":3,"r":10,"state":"off"},{"q":4,"r":9,"state":"off"},{"q":6,"r":7,"state":"off"},{"q":6,"r":6,"state":"off"},{"q":6,"r":4,"state":"off"},{"q":0,"r":7,"state":"off"},{"q":0,"r":9,"state":"off"},{"q":0,"r":10,"state":"off"},{"q":2,"r":10,"state":"off"},{"q":3,"r":11,"state":"off"},{"q":5,"r":9,"state":"off"},{"q":6,"r":8,"state":"off"},{"q":7,"r":7,"state":"off"},{"q":7,"r":6,"state":"off"},{"q":7,"r":4,"state":"off"},{"q":5,"r":3,"state":"off"},{"q":4,"r":3,"state":"head"},{"q":2,"r":4,"state":"head"},{"q":1,"r":5,"state":"off"},{"q":-1,"r":8,"state":"off"},{"q":-1,"r":10,"state":"off"},{"q":-1,"r":11,"state":"off"},{"q":0,"r":11,"state":"off"},{"q":1,"r":11,"state":"off"},{"q":8,"r":5,"state":"off"},{"q":6,"r":2,"state":"off"},{"q":4,"r":2,"state":"tail"},{"q":2,"r":3,"state":"tail"},{"q":0,"r":5,"state":"off"},{"q":-2,"r":10,"state":"off"},{"q":2,"r":12,"state":"off"},{"q":3,"r":13,"state":"off"},{"q":4,"r":12,"state":"off"},{"q":5,"r":11,"state":"off"},{"q":6,"r":10,"state":"off"},{"q":7,"r":9,"state":"off"},{"q":9,"r":5,"state":"off"},{"q":9,"r":1,"state":"off"},{"q":6,"r":1,"state":"off"},{"q":4,"r":1,"state":"off"},{"q":2,"r":2,"state":"off"},{"q":0,"r":4,"state":"off"},{"q":-3,"r":7,"state":"off"},{"q":-3,"r":11,"state":"off"},{"q":0,"r":13,"state":"off"},{"q":1,"r":13,"state":"off"},{"q":8,"r":9,"state":"head"},{"q":10,"r":7,"state":"tail"},{"q":10,"r":4,"state":"off"},{"q":10,"r":3,"state":"off"},{"q":10,"r":2,"state":"off"},{"q":10,"r":1,"state":"off"},{"q":10,"r":0,"state":"off"},{"q":9,"r":0,"state":"off"},{"q":8,"r":0,"state":"off"},{"q":7,"r":0,"state":"off"},{"q":5,"r":0,"state":"off"},{"q":3,"r":0,"state":"tail"},{"q":1,"r":2,"state":"off"},{"q":-1,"r":4,"state":"off"},{"q":-2,"r":5,"state":"off"},{"q":-3,"r":6,"state":"off"},{"q":-4,"r":7,"state":"off"},{"q":-4,"r":8,"state":"off"},{"q":-4,"r":9,"state":"off"},{"q":-4,"r":10,"state":"off"},{"q":-4,"r":11,"state":"off"},{"q":-4,"r":14,"state":"tail"},{"q":-1,"r":14,"state":"off"},{"q":2,"r":14,"state":"off"},{"q":3,"r":15,"state":"off"},{"q":4,"r":14,"state":"off"},{"q":6,"r":12,"state":"off"},{"q":8,"r":10,"state":"tail"},{"q":10,"r":8,"state":"tail"},{"q":11,"r":6,"state":"tail"},{"q":11,"r":0,"state":"off"},{"q":11,"r":-1,"state":"off"},{"q":9,"r":-1,"state":"off"},{"q":6,"r":-1,"state":"off"},{"q":4,"r":-1,"state":"tail"},{"q":2,"r":0,"state":"tail"},{"q":0,"r":2,"state":"off"},{"q":-3,"r":5,"state":"off"},{"q":-5,"r":7,"state":"off"},{"q":-5,"r":8,"state":"off"},{"q":-5,"r":14,"state":"tail"},{"q":-4,"r":15,"state":"tail"},{"q":-1,"r":15,"state":"off"},{"q":0,"r":15,"state":"off"},{"q":2,"r":15,"state":"off"},{"q":5,"r":14,"state":"off"},{"q":8,"r":11,"state":"off"},{"q":10,"r":9,"state":"tail"},{"q":12,"r":5,"state":"tail"},{"q":12,"r":-2,"state":"off"},{"q":9,"r":-2,"state":"off"},{"q":7,"r":-2,"state":"off"},{"q":5,"r":-2,"state":"tail"},{"q":1,"r":0,"state":"tail"},{"q":-1,"r":2,"state":"off"},{"q":-3,"r":4,"state":"off"},{"q":-6,"r":7,"state":"off"},{"q":-6,"r":14,"state":"tail"},{"q":-4,"r":16,"state":"tail"},{"q":-2,"r":16,"state":"off"},{"q":-1,"r":16,"state":"off"},{"q":0,"r":16,"state":"off"},{"q":6,"r":14,"state":"off"},{"q":8,"r":12,"state":"off"},{"q":13,"r":-2,"state":"off"},{"q":12,"r":-3,"state":"off"},{"q":10,"r":-3,"state":"off"},{"q":8,"r":-3,"state":"off"},{"q":-2,"r":2,"state":"off"},{"q":-4,"r":4,"state":"off"},{"q":-6,"r":6,"state":"off"},{"q":-7,"r":8,"state":"off"},{"q":-2,"r":17,"state":"off"},{"q":0,"r":17,"state":"off"},{"q":3,"r":18,"state":"off"},{"q":4,"r":17,"state":"off"},{"q":5,"r":16,"state":"off"},{"q":6,"r":15,"state":"off"},{"q":8,"r":13,"state":"off"},{"q":10,"r":11,"state":"off"},{"q":14,"r":3,"state":"off"},{"q":14,"r":-3,"state":"off"},{"q":14,"r":-4,"state":"off"},{"q":13,"r":-4,"state":"off"},{"q":11,"r":-4,"state":"off"},{"q":9,"r":-4,"state":"off"},{"q":7,"r":-4,"state":"off"},{"q":-1,"r":0,"state":"off"},{"q":-3,"r":2,"state":"off"},{"q":-5,"r":4,"state":"off"},{"q":-7,"r":6,"state":"off"},{"q":-8,"r":7,"state":"off"},{"q":-8,"r":8,"state":"off"},{"q":-8,"r":14,"state":"off"},{"q":-4,"r":18,"state":"off"},{"q":-2,"r":18,"state":"off"},{"q":-1,"r":18,"state":"off"},{"q":1,"r":18,"state":"off"},{"q":2,"r":18,"state":"off"},{"q":3,"r":19,"state":"off"},{"q":4,"r":18,"state":"off"},{"q":7,"r":15,"state":"off"},{"q":8,"r":14,"state":"off"},{"q":10,"r":12,"state":"off"},{"q":15,"r":2,"state":"off"},{"q":15,"r":-4,"state":"off"},{"q":15,"r":-5,"state":"off"},{"q":14,"r":-5,"state":"off"},{"q":11,"r":-5,"state":"off"},{"q":10,"r":-5,"state":"off"},{"q":8,"r":-5,"state":"off"},{"q":-2,"r":0,"state":"off"},{"q":-4,"r":2,"state":"off"},{"q":-5,"r":3,"state":"off"},{"q":-8,"r":6,"state":"off"},{"q":-9,"r":7,"state":"off"},{"q":-9,"r":8,"state":"off"},{"q":-9,"r":14,"state":"off"},{"q":-4,"r":19,"state":"off"},{"q":-1,"r":19,"state":"off"},{"q":0,"r":19,"state":"off"},{"q":2,"r":19,"state":"off"},{"q":3,"r":20,"state":"off"},{"q":10,"r":13,"state":"off"},{"q":16,"r":1,"state":"off"},{"q":16,"r":-6,"state":"head"},{"q":9,"r":-6,"state":"off"},{"q":-3,"r":0,"state":"off"},{"q":-10,"r":7,"state":"head"},{"q":-10,"r":14,"state":"off"},{"q":-4,"r":20,"state":"off"},{"q":3,"r":21,"state":"tail"},{"q":4,"r":20,"state":"tail"},{"q":5,"r":19,"state":"tail"},{"q":7,"r":17,"state":"off"},{"q":8,"r":16,"state":"off"},{"q":9,"r":15,"state":"off"},{"q":10,"r":14,"state":"off"},{"q":17,"r":0,"state":"off"},{"q":17,"r":-1,"state":"off"},{"q":17,"r":-2,"state":"off"},{"q":17,"r":-3,"state":"off"},{"q":17,"r":-5,"state":"tail"},{"q":17,"r":-6,"state":"tail"},{"q":17,"r":-7,"state":"tail"},{"q":16,"r":-7,"state":"tail"},{"q":15,"r":-7,"state":"tail"},{"q":13,"r":-7,"state":"off"},{"q":12,"r":-7,"state":"off"},{"q":11,"r":-7,"state":"off"},{"q":10,"r":-7,"state":"off"},{"q":-4,"r":0,"state":"off"},{"q":-5,"r":1,"state":"off"},{"q":-6,"r":2,"state":"off"},{"q":-7,"r":3,"state":"off"},{"q":-9,"r":5,"state":"tail"},{"q":-10,"r":6,"state":"tail"},{"q":-11,"r":7,"state":"tail"},{"q":-11,"r":8,"state":"tail"},{"q":-11,"r":9,"state":"tail"},{"q":-11,"r":11,"state":"off"},{"q":-11,"r":12,"state":"off"},{"q":-11,"r":13,"state":"off"},{"q":-11,"r":14,"state":"off"},{"q":-4,"r":21,"state":"off"},{"q":-3,"r":21,"state":"off"},{"q":-2,"r":21,"state":"off"},{"q":-1,"r":21,"state":"off"},{"q":1,"r":21,"state":"tail"},{"q":2,"r":21,"state":"tail"},{"q":27,"r":7,"state":"off"},{"q":28,"r":7,"state":"off"},{"q":26,"r":8,"state":"off"},{"q":27,"r":9,"state":"off"},{"q":29,"r":6,"state":"off"},{"q":29,"r":5,"state":"off"},{"q":27,"r":5,"state":"off"},{"q":26,"r":6,"state":"off"},{"q":25,"r":9,"state":"off"},{"q":28,"r":9,"state":"off"},{"q":30,"r":4,"state":"off"},{"q":28,"r":4,"state":"off"},{"q":27,"r":4,"state":"off"},{"q":25,"r":6,"state":"off"},{"q":24,"r":7,"state":"off"},{"q":24,"r":8,"state":"off"},{"q":25,"r":10,"state":"off"},{"q":26,"r":10,"state":"off"},{"q":27,"r":11,"state":"off"},{"q":28,"r":10,"state":"off"},{"q":31,"r":7,"state":"off"},{"q":31,"r":6,"state":"off"},{"q":31,"r":3,"state":"off"},{"q":28,"r":3,"state":"off"},{"q":27,"r":3,"state":"off"},{"q":26,"r":4,"state":"off"},{"q":25,"r":5,"state":"off"},{"q":23,"r":8,"state":"off"},{"q":23,"r":9,"state":"off"},{"q":23,"r":10,"state":"off"},{"q":23,"r":11,"state":"off"},{"q":27,"r":12,"state":"off"},{"q":32,"r":7,"state":"off"},{"q":32,"r":5,"state":"off"},{"q":32,"r":3,"state":"off"},{"q":32,"r":2,"state":"off"},{"q":31,"r":2,"state":"off"},{"q":29,"r":2,"state":"off"},{"q":22,"r":8,"state":"off"},{"q":22,"r":9,"state":"off"},{"q":23,"r":12,"state":"off"},{"q":24,"r":12,"state":"off"},{"q":25,"r":12,"state":"off"},{"q":28,"r":12,"state":"off"},{"q":33,"r":6,"state":"off"},{"q":33,"r":4,"state":"off"},{"q":33,"r":2,"state":"off"},{"q":32,"r":1,"state":"off"},{"q":29,"r":1,"state":"off"},{"q":22,"r":6,"state":"off"},{"q":21,"r":7,"state":"off"},{"q":21,"r":8,"state":"off"},{"q":25,"r":13,"state":"off"},{"q":29,"r":12,"state":"off"},{"q":34,"r":7,"state":"tail"},{"q":34,"r":5,"state":"off"},{"q":34,"r":3,"state":"off"},{"q":34,"r":2,"state":"off"},{"q":34,"r":0,"state":"off"},{"q":33,"r":0,"state":"off"},{"q":30,"r":0,"state":"off"},{"q":27,"r":0,"state":"tail"},{"q":22,"r":5,"state":"off"},{"q":20,"r":7,"state":"off"},{"q":20,"r":14,"state":"tail"},{"q":25,"r":14,"state":"off"},{"q":28,"r":14,"state":"off"},{"q":29,"r":13,"state":"off"},{"q":34,"r":8,"state":"tail"},{"q":35,"r":6,"state":"tail"},{"q":35,"r":4,"state":"off"},{"q":35,"r":2,"state":"off"},{"q":35,"r":-1,"state":"off"},{"q":33,"r":-1,"state":"off"},{"q":31,"r":-1,"state":"off"},{"q":28,"r":-1,"state":"tail"},{"q":26,"r":0,"state":"tail"},{"q":22,"r":4,"state":"off"},{"q":21,"r":5,"state":"off"},{"q":20,"r":6,"state":"off"},{"q":19,"r":14,"state":"tail"},{"q":20,"r":15,"state":"tail"},{"q":25,"r":15,"state":"off"},{"q":26,"r":15,"state":"off"},{"q":28,"r":15,"state":"off"},{"q":29,"r":14,"state":"off"},{"q":30,"r":13,"state":"off"},{"q":34,"r":9,"state":"tail"},{"q":36,"r":5,"state":"tail"},{"q":36,"r":3,"state":"off"},{"q":36,"r":1,"state":"off"},{"q":36,"r":0,"state":"off"},{"q":36,"r":-2,"state":"off"},{"q":35,"r":-2,"state":"off"},{"q":34,"r":-2,"state":"off"},{"q":32,"r":-2,"state":"off"},{"q":29,"r":-2,"state":"tail"},{"q":25,"r":0,"state":"tail"},{"q":21,"r":4,"state":"off"},{"q":20,"r":5,"state":"off"},{"q":18,"r":7,"state":"off"},{"q":18,"r":14,"state":"tail"},{"q":20,"r":16,"state":"tail"},{"q":24,"r":16,"state":"off"},{"q":25,"r":16,"state":"off"},{"q":26,"r":16,"state":"off"},{"q":28,"r":16,"state":"off"},{"q":30,"r":14,"state":"off"},{"q":37,"r":2,"state":"tail"},{"q":37,"r":-1,"state":"off"},{"q":36,"r":-3,"state":"off"},{"q":35,"r":-3,"state":"off"},{"q":33,"r":-3,"state":"off"},{"q":21,"r":3,"state":"off"},{"q":18,"r":6,"state":"off"},{"q":17,"r":8,"state":"off"},{"q":24,"r":17,"state":"off"},{"q":26,"r":17,"state":"off"},{"q":29,"r":16,"state":"off"},{"q":30,"r":15,"state":"off"},{"q":34,"r":11,"state":"off"},{"q":38,"r":3,"state":"off"},{"q":38,"r":1,"state":"head"},{"q":38,"r":-1,"state":"off"},{"q":37,"r":-4,"state":"off"},{"q":34,"r":-4,"state":"off"},{"q":31,"r":-4,"state":"off"},{"q":23,"r":0,"state":"off"},{"q":20,"r":3,"state":"off"},{"q":18,"r":5,"state":"off"},{"q":16,"r":7,"state":"off"},{"q":16,"r":8,"state":"off"},{"q":16,"r":14,"state":"off"},{"q":20,"r":18,"state":"off"},{"q":24,"r":18,"state":"off"},{"q":25,"r":18,"state":"off"},{"q":27,"r":19,"state":"off"},{"q":28,"r":18,"state":"off"},{"q":29,"r":17,"state":"off"},{"q":34,"r":12,"state":"off"},{"q":39,"r":2,"state":"off"},{"q":39,"r":0,"state":"off"},{"q":39,"r":-1,"state":"off"},{"q":39,"r":-5,"state":"off"},{"q":38,"r":-5,"state":"off"},{"q":37,"r":-5,"state":"off"},{"q":36,"r":-5,"state":"off"},{"q":35,"r":-5,"state":"off"},{"q":32,"r":-5,"state":"off"},{"q":22,"r":0,"state":"off"},{"q":19,"r":3,"state":"off"},{"q":18,"r":4,"state":"off"},{"q":15,"r":7,"state":"off"},{"q":15,"r":14,"state":"off"},{"q":20,"r":19,"state":"off"},{"q":25,"r":19,"state":"off"},{"q":26,"r":19,"state":"off"},{"q":27,"r":20,"state":"off"},{"q":34,"r":13,"state":"off"},{"q":40,"r":1,"state":"off"},{"q":40,"r":-6,"state":"head"},{"q":33,"r":-6,"state":"off"},{"q":21,"r":0,"state":"off"},{"q":14,"r":7,"state":"tail"},{"q":14,"r":14,"state":"off"},{"q":20,"r":20,"state":"off"},{"q":27,"r":21,"state":"tail"},{"q":28,"r":20,"state":"tail"},{"q":29,"r":19,"state":"tail"},{"q":31,"r":17,"state":"off"},{"q":32,"r":16,"state":"off"},{"q":33,"r":15,"state":"off"},{"q":34,"r":14,"state":"off"},{"q":41,"r":0,"state":"off"},{"q":41,"r":-1,"state":"off"},{"q":41,"r":-2,"state":"off"},{"q":41,"r":-3,"state":"off"},{"q":41,"r":-5,"state":"tail"},{"q":41,"r":-6,"state":"tail"},{"q":41,"r":-7,"state":"tail"},{"q":40,"r":-7,"state":"tail"},{"q":39,"r":-7,"state":"tail"},{"q":37,"r":-7,"state":"off"},{"q":36,"r":-7,"state":"off"},{"q":35,"r":-7,"state":"off"},{"q":34,"r":-7,"state":"off"},{"q":20,"r":0,"state":"off"},{"q":19,"r":1,"state":"off"},{"q":18,"r":2,"state":"off"},{"q":17,"r":3,"state":"off"},{"q":15,"r":5,"state":"tail"},{"q":14,"r":6,"state":"tail"},{"q":13,"r":7,"state":"tail"},{"q":13,"r":8,"state":"tail"},{"q":13,"r":9,"state":"tail"},{"q":13,"r":11,"state":"off"},{"q":13,"r":12,"state":"off"},{"q":13,"r":13,"state":"off"},{"q":13,"r":14,"state":"off"},{"q":20,"r":21,"state":"off"},{"q":21,"r":21,"state":"off"},{"q":22,"r":21,"state":"off"},{"q":23,"r":21,"state":"off"},{"q":25,"r":21,"state":"tail"},{"q":26,"r":21,"state":"tail"},{"q":-8,"r":24,"state":"off"},{"q":-9,"r":25,"state":"off"},{"q":-10,"r":26,"state":"off"},{"q":-11,"r":27,"state":"off"},{"q":-8,"r":25,"state":"off"},{"q":-8,"r":26,"state":"off"},{"q":-8,"r":27,"state":"off"},{"q":-10,"r":28,"state":"off"},{"q":-12,"r":28,"state":"off"},{"q":-13,"r":29,"state":"off"},{"q":-8,"r":28,"state":"off"},{"q":-8,"r":29,"state":"off"},{"q":-9,"r":28,"state":"off"},{"q":-11,"r":28,"state":"off"},{"q":-6,"r":29,"state":"off"},{"q":-6,"r":28,"state":"off"},{"q":-6,"r":27,"state":"off"},{"q":-6,"r":26,"state":"off"},{"q":-6,"r":25,"state":"off"},{"q":-6,"r":24,"state":"off"},{"q":-5,"r":25,"state":"off"},{"q":-4,"r":26,"state":"off"},{"q":-3,"r":27,"state":"off"},{"q":-2,"r":28,"state":"off"},{"q":-2,"r":29,"state":"off"},{"q":-2,"r":25,"state":"off"},{"q":-5,"r":26,"state":"off"},{"q":-4,"r":27,"state":"off"},{"q":-3,"r":28,"state":"off"},{"q":-2,"r":27,"state":"off"},{"q":-2,"r":26,"state":"off"},{"q":-2,"r":24,"state":"off"},{"q":0,"r":29,"state":"off"},{"q":0,"r":28,"state":"off"},{"q":0,"r":27,"state":"off"},{"q":0,"r":25,"state":"off"},{"q":0,"r":24,"state":"off"},{"q":0,"r":26,"state":"off"},{"q":1,"r":24,"state":"off"},{"q":2,"r":24,"state":"off"},{"q":1,"r":29,"state":"off"},{"q":3,"r":27,"state":"off"},{"q":3,"r":26,"state":"off"},{"q":3,"r":25,"state":"off"},{"q":2,"r":25,"state":"off"},{"q":2,"r":28,"state":"off"},{"q":27,"r":24,"state":"off"},{"q":27,"r":25,"state":"off"},{"q":27,"r":26,"state":"off"},{"q":27,"r":27,"state":"off"},{"q":27,"r":28,"state":"off"},{"q":27,"r":29,"state":"off"},{"q":28,"r":29,"state":"off"},{"q":29,"r":28,"state":"off"},{"q":30,"r":27,"state":"off"},{"q":30,"r":26,"state":"off"},{"q":30,"r":25,"state":"off"},{"q":29,"r":25,"state":"off"},{"q":29,"r":24,"state":"off"},{"q":28,"r":24,"state":"off"},{"q":25,"r":24,"state":"off"},{"q":25,"r":25,"state":"off"},{"q":25,"r":26,"state":"off"},{"q":25,"r":27,"state":"off"},{"q":25,"r":29,"state":"off"},{"q":25,"r":28,"state":"off"},{"q":24,"r":28,"state":"off"},{"q":24,"r":27,"state":"off"},{"q":23,"r":27,"state":"off"},{"q":23,"r":26,"state":"off"},{"q":22,"r":26,"state":"off"},{"q":22,"r":25,"state":"off"},{"q":21,"r":24,"state":"off"},{"q":21,"r":26,"state":"off"},{"q":21,"r":25,"state":"off"},{"q":21,"r":27,"state":"off"},{"q":21,"r":28,"state":"off"},{"q":21,"r":29,"state":"off"},{"q":19,"r":29,"state":"off"},{"q":19,"r":28,"state":"off"},{"q":19,"r":27,"state":"off"},{"q":19,"r":26,"state":"off"},{"q":19,"r":25,"state":"off"},{"q":19,"r":24,"state":"off"},{"q":18,"r":25,"state":"off"},{"q":17,"r":26,"state":"off"},{"q":16,"r":27,"state":"off"},{"q":15,"r":28,"state":"off"},{"q":14,"r":29,"state":"off"},{"q":16,"r":28,"state":"off"},{"q":17,"r":28,"state":"off"},{"q":18,"r":28,"state":"off"},{"q":12,"r":29,"state":"off"},{"q":13,"r":28,"state":"off"},{"q":14,"r":27,"state":"off"},{"q":15,"r":26,"state":"off"},{"q":16,"r":25,"state":"off"},{"q":17,"r":24,"state":"off"},{"q":13,"r":26,"state":"off"},{"q":13,"r":25,"state":"off"},{"q":13,"r":24,"state":"off"},{"q":12,"r":25,"state":"off"},{"q":11,"r":26,"state":"off"},{"q":10,"r":27,"state":"off"},{"q":9,"r":28,"state":"off"},{"q":8,"r":29,"state":"off"},{"q":12,"r":28,"state":"off"},{"q":12,"r":27,"state":"off"}]'
+}

diff --git a/index.html b/index.html
index b7cf1c65d8b285c64ec24622e4151719fdc0e11c..fb2e6884d6b6c244b6ae108abf2ddfc32ecb1748 100644 (file)
--- a/index.html
+++ b/index.html
@@ -5,6 +5,7 @@
     <script src="grid.js"></script>
                <script src="wireworld.js"></script>
                <script src="play.js"></script>
+               <script src="demos.js"></script>
                <script>
                        function run() {
                                        lc();
@@ -12,29 +13,50 @@
                        }
                </script>
                <style>
+                       span {
+                                       margin=left: 15px;
+                       }
                        input[type=number] {
                                        width: 30px;
                                        margin-left: 15px;
                        }
+                       select {
+                                       margin-left: 15px;
+                       }
+                       #es {
+                                       margin-left: 15px;
+                       }
                </style>
     <title>hww</title>
   </head>
   <body onload="run()" style="background-color: #f8f8ff;">
                <div class="ctrl">
-                       <input type="button" id="step" value="step"/>
-                       <input type="button" id="playpause" value="play"/>
-                       <input type="range" id="tempo" min="20" max="500"/>
-                       <input type="button" id="clear" value="clear"/>
-                       <input type="button" id="reset" value="reset"/>
-                       <input type="button" id="es" value="export state"/>
-                       <input type="button" id="is" value="import state"/>
-                       <input type="number" id="rad" value="5" min="1" max="30" step="1"/>
-                       <input type="button" id="rot" value="rotate hex"/>
-                       <input type="button" id="copy" value="copy hex"/>
-                       <input type="button" id="paste" value="paste hex"/>
-                       <input type="number" id="slot" value="1" min="1" max="9" step="1"/>
-                       <input type="button" id="save" value="save state"/>
-                       <input type="button" id="load" value="load state"/>
+                       <span>
+                               <input type="button" id="step" value="step"/>
+                               <input type="button" id="playpause" value="play"/>
+                               <input type="range" id="tempo" min="20" max="500"/>
+                               <input type="button" id="clear" value="clear"/>
+                               <input type="button" id="reset" value="reset"/>
+                       </span>
+                       <span>
+                               <input type="number" id="rad" value="5" min="1" max="30" step="1"/>
+                               <input type="button" id="rot" value="rotate hex"/>
+                               <input type="button" id="copy" value="copy hex"/>
+                               <input type="button" id="paste" value="paste hex"/>
+                       </span>
+                       <span>
+                               <input type="number" id="slot" value="1" min="1" max="9" step="1"/>
+                               <input type="button" id="save" value="save state"/>
+                               <input type="button" id="load" value="load state"/>
+                       </span>
+                       <span>
+                               <select name="demo" id="seldemo"></select>
+                               <input type="button" id="dload" value="load demo"/>
+                       </span>
+                       <span>
+                               <input type="button" id="es" value="export state"/>
+                               <input type="button" id="is" value="import state"/>
+                       </span>
                        <details><summary></summary><span id="outzone"></span></details>
                </div>
     <div><canvas width="2000" height="2000" id="c"></canvas></div>

diff --git a/play.js b/play.js
index 6a86af5ca4a0d8483feb4a5e358cea8274ca63d4..059b0a32f50100cd06aa9308536ce640872d7ea8 100644 (file)
--- a/play.js
+++ b/play.js
@@ -25,6 +25,7 @@ var timeout = 200;
 var rstgrid = g;
 var intervalID = null;
 
+
 function play() {
                g.step();
                drawGrid(g, ctx, xcenter,ycenter,scale);
@@ -33,7 +34,6 @@ function play() {
 function lc() {
                c = document.getElementById('c');
                ctx = c.getContext('2d');
-               //c.addEventListener('click', e=>getClickCoords(c, 20, 200, 200, e));
                c.onclick = e=>wwonclick(c,ctx,g,xcenter,ycenter,scale,e)
                c.oncontextmenu = (e) => {e.preventDefault(); wwonrtclick(c,ctx,g,xcenter,ycenter,scale,e)};
                drawGrid(g, ctx, xcenter,ycenter,scale);
@@ -67,6 +67,15 @@ function lc() {
                sv.onclick = saveState;
                ld = document.getElementById("load");
                ld.onclick = loadState;
+               load_demos(document.getElementById('seldemo'));
+               dl = document.getElementById("dload");
+               dl.onclick = demoHandler;
+}
+
+demoHandler = function(e) {
+               let which = document.getElementById('seldemo').value;
+               g.loadState(demos[which]);
+               drawGrid(g, ctx, xcenter,ycenter,scale);
 }
 
 saveState = function(e) {