Fix bug in TapeHtmlView while adding it to eg/tape.html
Chris Pressey
9 years ago
6 | 6 | <script src="../src/yoob/playfield-canvas-view.js"></script> |
7 | 7 | <script src="../src/yoob/playfield-html-view.js"></script> |
8 | 8 | <style> |
9 | #canvas { border: 1px solid blue; } | |
10 | #pre { border: 1px solid red; font-size: 20px; } | |
9 | #canvas_view { border: 1px solid blue; } | |
10 | #html_view { border: 1px solid red; font-size: 20px; } | |
11 | 11 | </style> |
12 | 12 | </head> |
13 | 13 | <body> |
14 | 14 | |
15 | 15 | <h1>yoob.Playfield Demo</h1> |
16 | 16 | |
17 | <canvas id="canvas" width="100" height="100"> | |
17 | <canvas id="canvas_view" width="100" height="100"> | |
18 | 18 | Your browser doesn't support displaying an HTML5 canvas. |
19 | 19 | </canvas> |
20 | 20 | |
21 | <pre id="pre"></pre> | |
21 | <pre id="html_view"></pre> | |
22 | 22 | |
23 | 23 | <textarea id="program" rows="10" cols="40"> |
24 | 24 | # |
34 | 34 | |
35 | 35 | </body> |
36 | 36 | <script> |
37 | var canvas = document.getElementById('canvas'); | |
38 | 37 | var ip = (new yoob.Cursor()).init({ dx: 1, dy: 0 }); |
39 | 38 | var pf = new yoob.Playfield().init({ |
40 | 39 | defaultValue: ' ', |
41 | 40 | cursors: [ip] |
42 | 41 | }); |
42 | ||
43 | 43 | var canvasView = new yoob.PlayfieldCanvasView().init({ |
44 | 44 | playfield: pf, |
45 | canvas: canvas, | |
45 | canvas: document.getElementById('canvas_view'), | |
46 | 46 | cellWidth: 20, |
47 | 47 | cellHeight: 20 |
48 | 48 | }); |
49 | 49 | |
50 | 50 | var htmlView = new yoob.PlayfieldHTMLView().init({ |
51 | 51 | playfield: pf, |
52 | element: document.getElementById('pre') | |
52 | element: document.getElementById('html_view') | |
53 | 53 | }); |
54 | 54 | |
55 | 55 | var textarea = document.getElementById('program'); |
4 | 4 | <script src="../src/yoob/tape.js"></script> |
5 | 5 | <script src="../src/yoob/cursor.js"></script> |
6 | 6 | <script src="../src/yoob/tape-canvas-view.js"></script> |
7 | <script src="../src/yoob/tape-html-view.js"></script> | |
7 | 8 | <style> |
8 | #canvas { border: 1px solid blue; } | |
9 | #canvas_view { border: 1px solid blue; } | |
10 | #html_view { border: 1px solid red; font-size: 20px; } | |
9 | 11 | </style> |
10 | 12 | </head> |
11 | 13 | <body> |
12 | 14 | |
13 | 15 | <h1>yoob.Tape Demo</h1> |
14 | 16 | |
15 | <canvas id="canvas" width="400" height="40"> | |
17 | <canvas id="canvas_view" width="400" height="40"> | |
16 | 18 | Your browser doesn't support displaying an HTML5 canvas. |
17 | 19 | </canvas> |
20 | ||
21 | <pre id="html_view"></pre> | |
18 | 22 | |
19 | 23 | <button id="write_0">Write 0</button> |
20 | 24 | <button id="write_1">Write 1</button> |
24 | 28 | |
25 | 29 | </body> |
26 | 30 | <script> |
27 | var canvas = document.getElementById('canvas'); | |
28 | var head = new yoob.Cursor(); | |
31 | var head = new yoob.Cursor().init(); | |
29 | 32 | var tape = new yoob.Tape().init({ cursors: [head] }); |
30 | var tcv = new yoob.TapeCanvasView().init({ | |
33 | ||
34 | var canvasView = new yoob.TapeCanvasView().init({ | |
31 | 35 | tape: tape, |
32 | canvas: canvas | |
36 | canvas: document.getElementById('canvas_view'), | |
37 | cellWidth: 20, | |
38 | cellHeight: 20 | |
39 | }); | |
40 | ||
41 | var htmlView = new yoob.TapeHTMLView().init({ | |
42 | tape: tape, | |
43 | element: document.getElementById('html_view') | |
33 | 44 | }); |
34 | 45 | |
35 | 46 | document.getElementById('write_0').onclick = function(e) { |
36 | 47 | tape.write("0"); |
37 | tcv.draw(); | |
48 | canvasView.draw(); | |
49 | htmlView.draw(); | |
38 | 50 | }; |
39 | 51 | |
40 | 52 | document.getElementById('write_1').onclick = function(e) { |
41 | 53 | tape.write("1"); |
42 | tcv.draw(); | |
54 | canvasView.draw(); | |
55 | htmlView.draw(); | |
43 | 56 | }; |
44 | 57 | |
45 | 58 | document.getElementById('read').onclick = function(e) { |
48 | 61 | |
49 | 62 | document.getElementById('left').onclick = function(e) { |
50 | 63 | head.moveLeft(); |
51 | tcv.draw(); | |
64 | canvasView.draw(); | |
65 | htmlView.draw(); | |
52 | 66 | }; |
53 | 67 | |
54 | 68 | document.getElementById('right').onclick = function(e) { |
55 | 69 | head.moveRight(); |
56 | tcv.draw(); | |
70 | canvasView.draw(); | |
71 | htmlView.draw(); | |
57 | 72 | }; |
58 | 73 | |
59 | 74 | </script> |
54 | 54 | this.draw = function() { |
55 | 55 | var cursors = this.tape.cursors; |
56 | 56 | var text = ""; |
57 | var $this = this; | |
57 | 58 | this.tape.foreach(function(pos, value) { |
58 | var rendered = this.render(value); | |
59 | var rendered = $this.render(value); | |
59 | 60 | for (var i = 0; i < cursors.length; i++) { |
60 | if (cursors[i].x === x && cursors[i].y === y) { | |
61 | rendered = this.wrapCursorText(cursors[i], rendered); | |
61 | if (cursors[i].getX() === pos) { | |
62 | rendered = $this.wrapCursorText(cursors[i], rendered); | |
62 | 63 | } |
63 | 64 | } |
64 | 65 | text += rendered + "<br/>"; |