Commits

Anonymous committed f896091

Improve presentation (more like Gemooy's), and add a Load object.

  • Participants
  • Parent commits 35ddf0d

Comments (0)

Files changed (3)

File impl/worb.js/TODO.markdown

+* draw arrows on gates
+* implement something for load (sound? callback?)
+* more example sources
+* speed control

File impl/worb.js/demo/worb.html

 <head>
   <meta charset="utf-8">
   <title>noit o' mnain worb</title>
+  <style>
+#canvas { border: 1px solid blue; }
+#canvas_viewport {
+    width: 420px; height: 420px; overflow: scroll; border: 1px solid black;
+    display: inline-block;
+}
+.initial_configuration { display: none; }
+  </style>
 </head>
 <body>
 
-<h1>noit o' mnain worb</h1>
+<h1>noit o' mnain worb
+<button id="load">Load</button>
+<button id="start">Start</button>
+<button id="stop">Stop</button>
+</h1>
 
-<canvas id="canvas" width="400" height="400">
-  Your browser doesn't support displaying an HTML5 canvas.
-</canvas>
+<div>
+  <span class="control-container">
+    configuration:
+    <span id="select_configuration_div">
+      <select id="select_configuration">
+        <option>(select one...)</option>
+        <option>freefill</option>
+        <option>magnetic_field</option>
+        <option>theory_of_time</option>
+        <option>fast_loop</option>
+        <option>pressure</option>
+      </select>
+    </span>
+  </span>
+</div>
+
+<div id="canvas_viewport">
+  <canvas id="canvas" width="400" height="400">
+    Your browser doesn't support displaying an HTML5 canvas.
+  </canvas>
+</div>
+
+<textarea id="configuration" rows="25" cols="40">
+</textarea>
+
+<div class="initial_configuration" id="freefill"
+>######################
+#                    #
+#                    #
+#                    #
+#                    #
+#                    #
+#         +          #
+#                    #
+#                    #
+#                    #
+#                    #
+######################
+</div>
+
+<div class="initial_configuration" id="theory_of_time"
+>######################
+#..........          #
+#..........          #
+#..........          #
+#..........          #
+#..........          #
+#..........          #
+#..........          #
+#..........          #
+#..........          #
+#..........          #
+######################
+</div>
+
+<div class="initial_configuration" id="fast_loop"
+>#######
+# ( ( #
+#v###^#
+# ).) #
+#######
+</div>
+
+<div class="initial_configuration" id="magnetic_field"
+>######################
+#                    #
+#                    #
+#                    #
+#        ---         #
+#        ---         #
+#        +++         #
+#        +++         #
+#                    #
+#                    #
+#                    #
+######################
+</div>
+
+<div class="initial_configuration" id="pressure"
+>#######################
+#..........)          #
+#######################
+</div>
 
 </body>
 <script src="../src/yoob/playfield.js"></script>
   var canvas = document.getElementById('canvas');
   var worb = new NoitOMnainWorb();
   worb.init(canvas);
+  document.getElementById('load').onclick = function() {
+      var cfg = document.getElementById('configuration');
+      worb.load(cfg);
+  };
+  document.getElementById('start').onclick = function() {
+      worb.start();
+  };
+  document.getElementById('stop').onclick = function() {
+      worb.stop();
+  };
+  document.getElementById('select_configuration').onchange = function() {
+      var cfg = document.getElementById('configuration');
+      var initcfg = document.getElementById(this.options[this.selectedIndex].value);
+      cfg.value = initcfg.innerHTML;
+      worb.load(cfg);
+  };
 </script>

File impl/worb.js/src/worb.js

  * requires yoob.Playfield
  */
 
-/* Incomplete implementation of noit o' mnain worb w/yoob.js */
-
-var program =
-  "######################\n" +
-  "#..........          #\n" +
-  "#..........          #\n" +
-  "#..........          #\n" +
-  "#..........          #\n" +
-  "#..........          #\n" +
-  "#..........          #\n" +
-  "#..........          #\n" +
-  "#..........          #\n" +
-  "#..........          #\n" +
-  "#..........          #\n" +
-  "######################\n";
-
-program =
-            "#######\n" +
-            "# < < #\n" +
-            "#v###^#\n" +
-            "# >.> #\n" +
-            "#######\n";
-
-
-program =
-            "######################\n" +
-            "#        -------     #\n" +
-            "#        -------     #\n" +
-            "#        -------     #\n" +
-            "#        -------     #\n" +
-            "#        -------     #\n" +
-            "#        +++         #\n" +
-            "#        +++         #\n" +
-            "#                    #\n" +
-            "#                    #\n" +
-            "#                    #\n" +
-            "######################\n";
+/* An implementation of noit o' mnain worb, using yoob.js */
 
 Bobule = function() {
     this.pressure = 1;
     };
 };
 
+Load = function() {
+    this.draw = function(ctx, x, y, w, h) {
+        ctx.fillStyle = "cyan";
+        ctx.fillRect(x, y, w, h);
+    };
+};
+
 /*
  * Adapter on top of yoob.Playfield
  */
                     this.put(lx, ly, new Source());
                 } else if (c === '-') {
                     this.put(lx, ly, new Sink());
-                } else if (c === '>') {
+                } else if (c === '!') {
+                    this.put(lx, ly, new Load());
+                } else if (c === '>' || c === ')') {
                     var g = new Gate();
                     g.init(1, 0);
                     this.put(lx, ly, g);
-                } else if (c === '<') {
+                } else if (c === '<' || c === '(') {
                     var g = new Gate();
                     g.init(-1, 0);
                     this.put(lx, ly, g);
 
 
 NoitOMnainWorb = function() {
+    var canvas;
     var ctx;
     var intervalId = undefined;
+    var cellWidth = 16;
+    var cellHeight = 16;
+
+    this.draw = function() {
+        canvas.width = (this.pf.worldPf.max_x - this.pf.worldPf.min_x + 1) * cellWidth;
+        canvas.height = (this.pf.worldPf.max_y - this.pf.worldPf.min_y + 1) * cellHeight;
+
+        ctx.clearRect(0, 0, canvas.width, canvas.height);
+        this.pf.drawContext(ctx, 0, 0, cellWidth, cellHeight);
+    };
 
     this.step = function() {
         var pf = this.pf;
-        ctx.clearRect(0, 0, canvas.width, canvas.height);
-        pf.drawContext(ctx, 0, 0, 16, 16);
+        this.draw();
         pf.foreachBobule(function (x, y, elem) {
             elem.move(pf, x, y);
         });
             return;
         this.step();
         var self = this;
-        interval_id = setInterval(function() { self.step(); }, 100);
-    }
+        intervalId = setInterval(function() { self.step(); }, 100);
+    };
 
     this.stop = function() {
         if (intervalId === undefined)
             return;
         clearInterval(intervalId);
         intervalId = undefined;
-    }
+    };
 
-    this.init = function(canvas) {
+    this.load = function(textarea) {
+        this.stop();
+        this.pf.clear();
+        this.pf.load(0, 0, textarea.value);
+        this.draw();
+    };
+
+    this.init = function(c) {
+        canvas = c;
         ctx = canvas.getContext('2d');
         this.pf = new WorbPlayfield();
-        this.pf.load(0, 0, program);
-        this.start();
     };
 };