git @ Cat's Eye Technologies yoob.js / c89937d
Fix bug in TapeHtmlView while adding it to eg/tape.html Chris Pressey 9 years ago
3 changed file(s) with 36 addition(s) and 20 deletion(s). Raw diff Collapse all Expand all
66 <script src="../src/yoob/playfield-canvas-view.js"></script>
77 <script src="../src/yoob/playfield-html-view.js"></script>
88 <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; }
1111 </style>
1212 </head>
1313 <body>
1414
1515 <h1>yoob.Playfield Demo</h1>
1616
17 <canvas id="canvas" width="100" height="100">
17 <canvas id="canvas_view" width="100" height="100">
1818 Your browser doesn't support displaying an HTML5 canvas.
1919 </canvas>
2020
21 <pre id="pre"></pre>
21 <pre id="html_view"></pre>
2222
2323 <textarea id="program" rows="10" cols="40">
2424 #
3434
3535 </body>
3636 <script>
37 var canvas = document.getElementById('canvas');
3837 var ip = (new yoob.Cursor()).init({ dx: 1, dy: 0 });
3938 var pf = new yoob.Playfield().init({
4039 defaultValue: ' ',
4140 cursors: [ip]
4241 });
42
4343 var canvasView = new yoob.PlayfieldCanvasView().init({
4444 playfield: pf,
45 canvas: canvas,
45 canvas: document.getElementById('canvas_view'),
4646 cellWidth: 20,
4747 cellHeight: 20
4848 });
4949
5050 var htmlView = new yoob.PlayfieldHTMLView().init({
5151 playfield: pf,
52 element: document.getElementById('pre')
52 element: document.getElementById('html_view')
5353 });
5454
5555 var textarea = document.getElementById('program');
44 <script src="../src/yoob/tape.js"></script>
55 <script src="../src/yoob/cursor.js"></script>
66 <script src="../src/yoob/tape-canvas-view.js"></script>
7 <script src="../src/yoob/tape-html-view.js"></script>
78 <style>
8 #canvas { border: 1px solid blue; }
9 #canvas_view { border: 1px solid blue; }
10 #html_view { border: 1px solid red; font-size: 20px; }
911 </style>
1012 </head>
1113 <body>
1214
1315 <h1>yoob.Tape Demo</h1>
1416
15 <canvas id="canvas" width="400" height="40">
17 <canvas id="canvas_view" width="400" height="40">
1618 Your browser doesn't support displaying an HTML5 canvas.
1719 </canvas>
20
21 <pre id="html_view"></pre>
1822
1923 <button id="write_0">Write 0</button>
2024 <button id="write_1">Write 1</button>
2428
2529 </body>
2630 <script>
27 var canvas = document.getElementById('canvas');
28 var head = new yoob.Cursor();
31 var head = new yoob.Cursor().init();
2932 var tape = new yoob.Tape().init({ cursors: [head] });
30 var tcv = new yoob.TapeCanvasView().init({
33
34 var canvasView = new yoob.TapeCanvasView().init({
3135 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')
3344 });
3445
3546 document.getElementById('write_0').onclick = function(e) {
3647 tape.write("0");
37 tcv.draw();
48 canvasView.draw();
49 htmlView.draw();
3850 };
3951
4052 document.getElementById('write_1').onclick = function(e) {
4153 tape.write("1");
42 tcv.draw();
54 canvasView.draw();
55 htmlView.draw();
4356 };
4457
4558 document.getElementById('read').onclick = function(e) {
4861
4962 document.getElementById('left').onclick = function(e) {
5063 head.moveLeft();
51 tcv.draw();
64 canvasView.draw();
65 htmlView.draw();
5266 };
5367
5468 document.getElementById('right').onclick = function(e) {
5569 head.moveRight();
56 tcv.draw();
70 canvasView.draw();
71 htmlView.draw();
5772 };
5873
5974 </script>
5454 this.draw = function() {
5555 var cursors = this.tape.cursors;
5656 var text = "";
57 var $this = this;
5758 this.tape.foreach(function(pos, value) {
58 var rendered = this.render(value);
59 var rendered = $this.render(value);
5960 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);
6263 }
6364 }
6465 text += rendered + "<br/>";