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

Tree @rel_0_6 (Download .tar.gz)

text-terminal.html @rel_0_6 — 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
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <title>yoob.TextTerminal Demo</title>
  <style>
#terminal {
    background: black;
}
  </style>
</head>
<body>

<h1>yoob.TextTerminal Demo</h1>

<!--
<pre id="terminal" tabindex="0"></pre>
-->

<canvas id="terminal" 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('terminal');
    var t = new yoob.TextTerminal().init(80, 25);
    var view = t.createPlayfieldCanvasView(element, 12, 18);
    /*
    var view = new yoob.PlayfieldHTMLView();
    view.init(pf, element);
    */

    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>