home · contact · privacy
Refactor TUI drawing.
[plomrogue2-experiments] / new2 / websocket_client.html
1 <!DOCTYPE HTML>
2 <html>
3 <style>
4 canvas { border: 1px solid black; }
5 </style>
6 <body>
7 <canvas id="terminal" />
8 <script>
9 "use strict";
10 let charHeight = 24;
11 let websocket_location = "ws://localhost:8000"
12
13 function set_font(type='normal') {
14   ctx.font = type + ' ' + charHeight + "px monospace";
15 }
16
17 function write(start_y, start_x, msg) {
18   ctx.fillStyle = 'black';
19   ctx.fillRect(start_x*charWidth, start_y*charHeight, charWidth*msg.length, charHeight);
20   ctx.fillStyle = 'white';
21   ctx.fillText(msg, start_x*charWidth, start_y*charHeight); 
22 }
23
24 function drawBox(start_y, start_x, height, width) {
25   ctx.fillStyle = 'black';
26   ctx.fillRect(start_x*charWidth, start_y*charHeight, charWidth*width, charHeight*height);
27 }
28
29 let terminal_canvas = document.getElementById("terminal");
30 let ctx = terminal_canvas.getContext("2d");
31 set_font();
32 let charWidth = ctx.measureText("M").width;
33 ctx.canvas.height = charHeight * 24;
34 ctx.canvas.width = charWidth * 80;
35 set_font();  // ctx.font gets reset to default on canvas size change, so we have to re-set our own
36 ctx.textBaseline = "top";
37
38 let msg = "a b c d 0 1 2 3 4 5 6 7 8 9 i iXi i i M M M M M e f g h";
39 for (let i = 0; i < 30; i++) {
40   ctx.fillText(msg, charWidth*(1+i*2), charHeight*(1+i)); 
41 }
42 set_font('bold');
43 for (let i = 0; i < 30; i++) {
44   ctx.fillText(String(i), 0, charHeight*(i)); 
45 }
46 msg = "0123456789.123456789.123456789.123456789.123456789.123456789.123456789.123456789";
47 ctx.fillText(msg, 0, 0);
48 ctx.fillText('X', charWidth*78, charHeight*23);
49 set_font();
50 write(3, 3, "hallihallo");
51 drawBox(5, 25, 5, 5);
52
53 var websocket = new WebSocket(websocket_location);
54 websocket.onmessage = function (event) {
55   write(2, 2, event.data);
56 }
57
58 let cursor = [12, 40];
59 write(cursor[0], cursor[1], '@');
60 document.addEventListener('keydown', (event) => {
61   const keyName = event.key;
62   write(cursor[0], cursor[1], ' ');
63   switch (keyName) {
64           case 'h': cursor[1] -= 1; break;
65           case 'j': cursor[0] += 1; break;
66           case 'k': cursor[0] -= 1; break;
67           case 'l': cursor[1] += 1; break;
68           case 'x': websocket.send('test');
69   }
70   write(cursor[0], cursor[1], '@');
71 }, false);
72 </script>
73 </body>
74 </html>