From: Christian Heller <c.heller@plomlompom.de>
Date: Wed, 28 Oct 2020 22:54:16 +0000 (+0100)
Subject: Enable multi-line input.
X-Git-Url: https://plomlompom.com/repos/%7B%7B%20web_path%20%7D%7D/decks/static/%7Broute%7D?a=commitdiff_plain;h=8a8eb0967bcffcb934a37ecc5846f007268a0dc8;p=plomrogue2-experiments

Enable multi-line input.
---

diff --git a/new2/rogue_chat_nocanvas_monochrome.html b/new2/rogue_chat_nocanvas_monochrome.html
index a3f81f2..14668ea 100644
--- a/new2/rogue_chat_nocanvas_monochrome.html
+++ b/new2/rogue_chat_nocanvas_monochrome.html
@@ -44,15 +44,15 @@ let terminal = {
   drawBox: function(start_y, start_x, height, width) {
     let end_y = start_y + height;
     let end_x = start_x + width;
-      for (let y = start_y, x = start_x;; x++) {
-        if (x == end_x) {
-          x = start_x;
-          y += 1;
-          if (y == end_y) {
-              break;
-          }
-        };
-        this.content[y][x] = ' ';
+    for (let y = start_y, x = start_x; y < this.rows; x++) {
+      if (x == end_x) {
+        x = start_x;
+        y += 1;
+        if (y == end_y) {
+            break;
+        }
+      };
+      this.content[y][x] = ' ';
     }
   },
 }
@@ -148,7 +148,14 @@ let unparser = {
 let tui = {
   mode: 'chat',
   log: [],
-  input_line: '',
+  input: '',
+  input_lines: [],
+  window_width: terminal.cols / 2,
+  height_turn_line: 1,
+  height_input: 1,
+  init: function() {
+      this.recalc_input_lines();
+  },
   switch_mode: function(mode_name, keep_pos=false) {
     if (mode_name == 'study' && !keep_pos) {
       explorer.position = game.things[game.player_id];
@@ -157,15 +164,20 @@ let tui = {
     this.full_refresh();
   },
   draw_history: function() {
-    terminal.drawBox(1, terminal.cols / 2, terminal.rows - 2, terminal.cols / 2);
-    let i = 0;
-    for (let line of this.log) {
-      terminal.write(terminal.rows - 2 - i, terminal.cols / 2, line);
-      i += 1;
+    if (terminal.rows <= this.height_turn_line + this.height_input) {
+        return;
     }
+    terminal.drawBox(this.height_turn_line, this.window_width, terminal.rows - this.height_turn_line - this.height_input, this.window_width);
+      console.log(this.log);
+      for (let y = terminal.rows - this.height_input - this.height_turn_line,
+               i = this.log.length - 1;
+           y >= this.height_turn_line && i >= 0;
+           y--, i--) {
+          terminal.write(y, this.window_width, this.log[i]);
+      }
   },
   draw_map: function() {
-    terminal.drawBox(0, 0, terminal.rows, terminal.cols / 2);
+    terminal.drawBox(0, 0, terminal.rows, this.window_width);
     let map_lines = [];
     let line = [];
     for (let i = 0, j = 0; i < game.map.length; i++, j++) {
@@ -192,24 +204,47 @@ let tui = {
         center_pos = explorer.position;
     }
     let offset = [(terminal.rows / 2) - center_pos[0],
-                  terminal.cols / 4 - center_pos[1]];
+                  this.window_width / 2 - center_pos[1]];
       for (let term_y = offset[0], map_y = 0;
            term_y < terminal.rows && map_y < game.map_size[0];
            term_y++, map_y++) {
         if (term_y >= 0) {
-            let to_draw = map_lines[map_y].join('').slice(0, terminal.cols / 2 - offset[1]);
+            let to_draw = map_lines[map_y].join('').slice(0, this.window_width - offset[1]);
             terminal.write(term_y, offset[1], to_draw);
         }
     }
   },
   draw_turn_line: function(n) {
-    terminal.drawBox(0, terminal.cols / 2, 1, terminal.cols / 2);
-    terminal.write(0, terminal.cols / 2, 'turn: ' + game.turn);
+    terminal.drawBox(0, this.window_width, 1, this.window_width);
+    terminal.write(0, this.window_width, 'turn: ' + game.turn);
+  },
+  empty_input: function(str) {
+      this.input = "";
+      this.recalc_input_lines();
+  },
+  add_to_input: function(str) {
+      if (this.input.length + str.length > this.window_width * terminal.rows) {
+          return;
+      }
+      this.input += str;
+      this.recalc_input_lines();
+  },
+  recalc_input_lines: function() {
+      this.input_lines = this.msg_into_lines_of_width("> " + this.input, this.window_width);
+      this.height_input = this.input_lines.length;
+  },
+  shorten_input: function() {
+      if (this.input.length > 2) {
+          this.input = tui.input.slice(0, -1);
+          this.recalc_input_lines();
+      }
   },
-  draw_input_line: function() {
-    terminal.drawBox(terminal.rows - 1, terminal.cols / 2, 1, terminal.cols / 2);
+  draw_input: function() {
+    terminal.drawBox(terminal.rows - this.height_input, this.window_width, this.height_input, this.window_width);
     if (this.mode == 'chat' || this.mode == 'annotate') {
-      terminal.write(terminal.rows - 1, terminal.cols / 2, '> ' + this.input_line);
+        for (let y = terminal.rows - this.height_input, i = 0; y < terminal.rows && i < this.input_lines.length; y++, i++) {
+            terminal.write(y, this.window_width, this.input_lines[i]);
+        }
     }
   },
   msg_into_lines_of_width: function(msg, width) {
@@ -217,23 +252,22 @@ let tui = {
     let lines = [];
     for (let i = 0, x = 0; i < msg.length; i++, x++) {
       if (x >= width) {
-        lines.unshift(chunk);
+        lines.push(chunk);
         chunk = "";
         x = 0;
       };
       chunk += msg[i];
     }
-    lines.unshift(chunk);
+    lines.push(chunk);
     return lines;
   },
   log_msg: function(msg) {
-    let line_length = (terminal.cols / 2);
-    let chunk = "";
-    this.log = this.msg_into_lines_of_width(msg, terminal.cols / 2).concat(this.log);
-    while (this.log.length > terminal.rows - 2) {
-      this.log.pop();
-    };
-    this.draw_history();
+      let lines = this.msg_into_lines_of_width(msg, this.window_width);
+      this.log = this.log.concat(lines);
+      while (this.log.length > terminal.rows - 2) {
+        this.log.shift();
+      };
+      this.draw_history();
   },
   refresh: function() {
     terminal.refresh();
@@ -264,11 +298,10 @@ let tui = {
     tui.log_msg("");
   },
   draw_info: function() {
-    terminal.drawBox(1, terminal.cols / 2, terminal.rows - 2, terminal.cols / 2);
-    let lines = this.msg_into_lines_of_width(explorer.get_info(), terminal.cols / 2);
-    lines.reverse();
-    for (let y = 1, i = 0; y < terminal.rows && i < lines.length; y++, i++) {
-      terminal.write(y, terminal.cols / 2, lines[i]);
+    terminal.drawBox(this.height_turn_line, this.window_width, terminal.rows - this.height_turn_line - this.height_input, this.window_width);
+    let lines = this.msg_into_lines_of_width(explorer.get_info(), this.window_width);
+    for (let y = this.height_turn_line, i = 0; y < terminal.rows && i < lines.length; y++, i++) {
+      terminal.write(y, this.window_width, lines[i]);
     }
   },
   full_refresh: function() {
@@ -279,7 +312,7 @@ let tui = {
     } else {
       this.draw_history();
     }
-    this.draw_input_line();
+    this.draw_input();
     this.refresh();
   }
 }
@@ -293,6 +326,7 @@ let game = {
 }
 
 terminal.initialize();
+tui.init();
 tui.log_help();
 tui.full_refresh();
 
@@ -405,15 +439,13 @@ let explorer = {
 document.addEventListener('keydown', (event) => {
     if (tui.mode == 'chat') {
         if (event.key.length === 1) {
-            tui.input_line += event.key;
-            tui.draw_input_line();
-            tui.refresh();
+            tui.add_to_input(event.key);
+            tui.full_refresh();
         } else if (event.key == 'Backspace') {
-            tui.input_line = tui.input_line.slice(0, -1);
-            tui.draw_input_line();
-            tui.refresh();
+            tui.shorten_input();
+            tui.full_refresh();
         } else if (event.key == 'Enter') {
-            let [tokens, token_starts] = parser.tokenize(tui.input_line);
+            let [tokens, token_starts] = parser.tokenize(tui.input);
             if (tokens.length > 0 && tokens[0].length > 0) {
                 if (tokens[0][0] == ':') {
                     if (tokens[0] == ':play' || tokens[0] == ':p') {
@@ -431,7 +463,7 @@ document.addEventListener('keydown', (event) => {
                         }
                     } else if (tokens[0] == ':msg') {
                         if (tokens.length > 2) {
-                            let msg = tui.input_line.slice(token_starts[2]);
+                            let msg = tui.input.slice(token_starts[2]);
                             server.send(['QUERY', tokens[1], msg]);
                         } else {
                             tui.log_msg('? need message target and message');
@@ -440,12 +472,11 @@ document.addEventListener('keydown', (event) => {
                         tui.log_msg('? unknown command');
                     }
                 } else {
-                    server.send(['ALL', tui.input_line]);
+                    server.send(['ALL', tui.input]);
                 }
             }
-            tui.input_line = '';
-            tui.draw_input_line();
-            tui.refresh();
+            tui.empty_input();
+            tui.full_refresh();
         }
       } else if (tui.mode == 'play') {
           if (event.key === 'c') {
@@ -493,16 +524,14 @@ document.addEventListener('keydown', (event) => {
         };
     } else if (tui.mode == 'annotate') {
         if (event.key.length === 1) {
-            tui.input_line += event.key;
-            tui.draw_input_line();
-            tui.refresh();
+            tui.add_to_input(event.key);
+            tui.full_refresh();
         } else if (event.key == 'Backspace') {
-            tui.input_line = tui.input_line.slice(0, -1);
-            tui.draw_input_line();
-            tui.refresh();
+            tui.shorten_input();
+            tui.full_refresh();
         } else if (event.key == 'Enter') {
-            explorer.annotate(tui.input_line);
-            tui.input_line = '';
+            explorer.annotate(tui.input);
+            tui.empty_input();
             tui.switch_mode('study', true);
         }
     }