plomlompom.com Git - plomrogue2-experiments/blob - 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>