git @ Cat's Eye Technologies Circute / 6da32f2
Work out some of the view issues by reorganizing a bit. Cat's Eye Technologies 9 years ago
1 changed file(s) with 46 addition(s) and 40 deletion(s). Raw diff Collapse all Expand all
+46
-40
demo/circute.html less more
55 #input {
66 display: none;
77 }
8 #output {
8 #display_container {
9 border: 1px solid red;
10 padding: 4px;
11 }
12 #display_text {
913 border: 1px solid blue;
1014 }
11 #canvas {
15 #display_canvas {
1216 display: none;
1317 border: 1px solid green;
1418 }
4448 </select>
4549 </span>
4650
47 <textarea id="input" rows="10">
51 <textarea id="input" rows="20" cols="80">
4852 =========
4953 = =
5054 ==N== =
5458 =========
5559 </textarea>
5660
57 Depict with:
58 <select id="select_depiction">
59 <option>text</option>
60 <option>canvas</option>
61 </select>
62
63 <pre id="output"></pre>
64 <canvas id="canvas" width="400" height="250">
65 There would be an HTML5 canvas here, but your browser isn't displaying it.
66 </canvas>
61 <div id="display_container">
62 Depict with:
63 <select id="select_depiction">
64 <option>text</option>
65 <option>canvas</option>
66 </select>
67
68 <pre id="display_text"></pre>
69 <canvas id="display_canvas" width="400" height="250">
70 There would be an HTML5 canvas here, but your browser isn't displaying it.
71 </canvas>
72 </div>
6773
6874 <div id="and" style="display: none;"
6975 > =
241247 <script src="yoob/playfield-canvas-view.js"></script>
242248 <script src="../script/circute.js"></script>
243249 <script>
244 var output = document.getElementById('output');
245 var canvas = document.getElementById('canvas');
246 var currentView = 'text';
247
248 var c = new yoob.Controller();
249250 var pf;
250251
251 var htmlView = new yoob.PlayfieldHTMLView().init(pf, output);
252 // Text view
253 var displayText = document.getElementById('display_text');
254 var htmlView = new yoob.PlayfieldHTMLView().init(pf, displayText);
252255 htmlView.render = function(state) {
253256 return dumpMapper(state);
254257 };
255258
259 // Canvas view
260 var displayCanvas = document.getElementById('display_canvas');
256261 var colourMap = {
257262 'Space': '#ffffff',
258263 'Spark': '#ff0000',
260265 'Wire': '#ffff00',
261266 'NAND': '#0000ff'
262267 };
263
264 var canvasView = new yoob.PlayfieldCanvasView().init(pf, canvas);
268 var canvasView = new yoob.PlayfieldCanvasView().init(pf, displayCanvas);
265269 canvasView.drawCell = function(ctx, value, playfieldX, playfieldY,
266270 canvasX, canvasY, cellWidth, cellHeight) {
267271 ctx.fillStyle = colourMap[value] || '#ffffff';
268272 ctx.fillRect(canvasX, canvasY, cellWidth, cellHeight);
269273 };
270 c.views = {
274
275 // "View Manager"
276 var currentView = 'text';
277 var views = {
271278 'text': htmlView,
272279 'canvas': canvasView
280 };
281 var draw = function() {
282 views[currentView].pf = pf;
283 views[currentView].draw();
273284 };
274285
275286 var selectDepiction = document.getElementById('select_depiction');
276287 selectDepiction.onchange = function() {
277288 var value = selectDepiction.options[selectDepiction.selectedIndex].value;
278289 if (value === 'text') {
279 output.style.display = 'block';
280 canvas.style.display = 'none';
281 currentView = value;
282 c.draw();
290 displayText.style.display = 'block';
291 displayCanvas.style.display = 'none';
283292 } else {
284 output.style.display = 'none';
285 canvas.style.display = 'block';
286 currentView = value;
287 c.draw();
293 displayText.style.display = 'none';
294 displayCanvas.style.display = 'block';
288295 }
289 };
290
291 // this isn't overriding anything
292 c.draw = function() {
293 this.views[currentView].pf = pf;
294 this.views[currentView].draw();
295 };
296 currentView = value;
297 draw();
298 };
299
300 // Controller. We don't subclass, we just monkeypatch.
301 var c = new yoob.Controller();
296302
297303 c.load = function(text) {
298304 pf = new yoob.Playfield();
299305 pf.setDefault('Space');
300306 pf.load(0, 0, text, loadMapper);
301 this.draw();
307 draw();
302308 };
303309
304310 c.step = function() {
306312 newPf.setDefault('Space');
307313 evolve_playfield(pf, newPf);
308314 pf = newPf;
309 this.draw();
315 draw();
310316 };
311317
312318 c.connect({
318324 'speed': 'speed',
319325 'select': 'select_source',
320326 'source': 'input',
321 'display': 'output'
327 'display': 'display_container'
322328 });
323329
324330 c.click_load();