--- /dev/null
+<!DOCTYPE HTML>
+<html>
+<style>
+canvas { border: 1px solid black; }
+</style>
+<body>
+<canvas id="terminal" />
+<script>
+"use strict";
+let charHeight = 24;
+let websocket_location = "ws://localhost:8000"
+
+function set_font(type='normal') {
+ ctx.font = type + ' ' + charHeight + "px monospace";
+}
+
+function write(start_y, start_x, msg) {
+ ctx.fillStyle = 'black';
+ ctx.fillRect(start_x*charWidth, start_y*charHeight, charWidth*msg.length, charHeight);
+ ctx.fillStyle = 'white';
+ ctx.fillText(msg, start_x*charWidth, start_y*charHeight);
+}
+
+function drawBox(start_y, start_x, height, width) {
+ ctx.fillStyle = 'black';
+ ctx.fillRect(start_x*charWidth, start_y*charHeight, charWidth*width, charHeight*height);
+}
+
+let terminal_canvas = document.getElementById("terminal");
+let ctx = terminal_canvas.getContext("2d");
+set_font();
+let charWidth = ctx.measureText("M").width;
+ctx.canvas.height = charHeight * 24;
+ctx.canvas.width = charWidth * 80;
+set_font(); // ctx.font gets reset to default on canvas size change, so we have to re-set our own
+ctx.textBaseline = "top";
+
+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";
+for (let i = 0; i < 30; i++) {
+ ctx.fillText(msg, charWidth*(1+i*2), charHeight*(1+i));
+}
+set_font('bold');
+for (let i = 0; i < 30; i++) {
+ ctx.fillText(String(i), 0, charHeight*(i));
+}
+msg = "0123456789.123456789.123456789.123456789.123456789.123456789.123456789.123456789";
+ctx.fillText(msg, 0, 0);
+ctx.fillText('X', charWidth*78, charHeight*23);
+set_font();
+write(3, 3, "hallihallo");
+drawBox(5, 25, 5, 5);
+
+var websocket = new WebSocket(websocket_location);
+exampleSocket.onmessage = function (event) {
+ write(2, 2, event.data);
+}
+
+let cursor = [12, 40];
+write(cursor[0], cursor[1], '@');
+document.addEventListener('keydown', (event) => {
+ const keyName = event.key;
+ write(cursor[0], cursor[1], ' ');
+ switch (keyName) {
+ case 'h': cursor[1] -= 1; break;
+ case 'j': cursor[0] += 1; break;
+ case 'k': cursor[0] -= 1; break;
+ case 'l': cursor[1] += 1; break;
+ case 'x': exampleSocket.send('test');
+ }
+ write(cursor[0], cursor[1], '@');
+}, false);
+</script>
+</body>
+</html>
projects / plomrogue2-experiments / commitdiff