git @ Cat's Eye Technologies yoob.js / master eg / text-terminal.html
master

Tree @master (Download .tar.gz)

text-terminal.html @master — raw · history · blame 

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>yoob.TextTerminal Demo</title>
  <style>
#canvas_view {
    background: black;
}
#html_view {
    background: black;
}
  </style>
</head>
<body>

<h1>yoob.TextTerminal Demo</h1>

<pre id="html_view" tabindex="0"></pre>

<canvas id="canvas_view" width="600" height="400" tabindex="0">
  Your browser doesn't support displaying an HTML5 canvas.
</canvas>

</body>
<script src="../src/yoob/playfield.js"></script>
<script src="../src/yoob/cursor.js"></script>
<script src="../src/yoob/playfield-html-view.js"></script>
<script src="../src/yoob/playfield-canvas-view.js"></script>
<script src="../src/yoob/text-terminal.js"></script>
<script src="../src/yoob/line-input-buffer.js"></script>
<script>
    var element = document.getElementById('canvas_view');
    var t = new yoob.TextTerminal().init({ columns: 80, rows: 25 });

    var view;
    if (true) {
        view = t.createPlayfieldCanvasView({
            canvas: element,
            cellWidth: 12,
            cellHeight: 18
        });
    } else {
        view = new yoob.PlayfieldHTMLView().init({
            playfield: t.getPlayfield(),
            element: element
        });
        view.render = function(value) {
            //var style = ''; // "background-color: " + value.backgroundColor + "; color: " + value.textColor;
            //return '<span style="' + style + '">' + value.character + "</span>";
            return value.character;
        };
    }

    t.write("Click me!\n");
    
    t.setCharAt(30, 10, 'Z');
    t.setCharAt(30, 10, '?');

    var z = 0;
    element.onclick = function(e) {
        t.writeRaw("Hello, world! (" + z + ")  ");
        t.setColors("white", undefined);
        t.writeRaw("How's by you? ");
        t.setColors("yellow", "purple");
        t.writeRaw("That's nice.");
        t.setColors("green", "black");
        t.writeRaw(" Supercalifragilisticexpialadociousness!!!!!");
        t.advanceRow();
        t.writeRaw("What??");
        t.advanceRow();
        view.draw();
        z++;
    };

    t.write("Or focus me and\ntype something.  Try backspacing.\n\n");
    view.draw();
    var ib = new yoob.LineInputBuffer().init(element, t);
    ib.onupdate = function(str) {
        //alert("'" + str + "'");
        view.draw();
    };
    ib.onenter = function(str) {
        t.write("You typed '" + str + "'\n");
        t.write("And now I\bU see\n");
        view.draw();
    };

    element.focus();
</script>