home · contact · privacy
Minor client improvements.
[plomrogue2-experiments] / new2 / rogue_chat_nocanvas_monochrome.html
index 578e971912e29ad52991b76d627afdd93da18eaa..f513ad9f39a311fa86dc56d369ca4fa33536abd0 100644 (file)
@@ -10,6 +10,10 @@ movement: <select id="WASD_selector" name="WASD_selector" >
 </select>
 rows: <input id="n_rows" type="number" step=2 min=10 value=24 />
 cols: <input id="n_cols" type="number" step=4 min=20 value=80 />
+command character: <select id="command_char"" >
+<option value=":" selected>:</option>
+<option value="/">/</option>
+</select>
 </div>
 <pre id="terminal" style="display: inline-block;"></pre>
 <textarea id="input" style="opacity: 0; width: 0px;"></textarea>
@@ -20,6 +24,7 @@ let websocket_location = "ws://localhost:8000";
 let wasd_selector = document.getElementById("WASD_selector");
 let rows_selector = document.getElementById("n_rows");
 let cols_selector = document.getElementById("n_cols");
+let command_char_selector = document.getElementById("command_char");
 
 let terminal = {
   foreground: 'white',
@@ -133,6 +138,12 @@ let parser = {
   },
 }
 
+class Thing {
+    constructor(yx) {
+        this.position = yx;
+    }
+}
+
 let server = {
     init: function(url) {
         this.url = url;
@@ -144,7 +155,7 @@ let server = {
         };
         this.websocket.onclose = function(event) {
             tui.log_msg("@ server disconnected :(");
-            tui.log_msg("@ hint: try the ':reconnect' command");
+            tui.log_msg("@ hint: try the '" + command_char_selector.value + "reconnect' command");
         };
        this.websocket.onmessage = this.handle_event;
     },
@@ -165,7 +176,9 @@ let server = {
             game.portals = {};
             game.turn = parseInt(tokens[1]);
         } else if (tokens[0] === 'THING_POS') {
-            game.things[tokens[1]] = parser.parse_yx(tokens[2]);
+            game.get_thing(tokens[1], true).position = parser.parse_yx(tokens[2]);
+        } else if (tokens[0] === 'THING_NAME') {
+            game.get_thing(tokens[1], true).name_ = tokens[2];
         } else if (tokens[0] === 'MAP') {
             game.map_size = parser.parse_yx(tokens[1]);
             game.map = tokens[2]
@@ -174,15 +187,9 @@ let server = {
             if (tui.mode == mode_study) {
                 explorer.query_info();
             }
-            let player_position = [0,0];
-            for (const thing_id in game.things) {
-                if (game.player_id == thing_id) {
-                    let t = game.things[thing_id];
-                    player_position = t;
-                }
-            }
-            if (player_position in game.portals) {
-                tui.teleport_target = game.portals[player_position];
+            let t = game.get_thing(game.player_id);
+            if (t.position in game.portals) {
+                tui.teleport_target = game.portals[t.position];
                 tui.switch_mode(mode_teleport);
                 return;
             }
@@ -194,6 +201,7 @@ let server = {
         } else if (tokens[0] === 'LOGIN_OK') {
             this.send(['GET_GAMESTATE']);
             tui.log_help();
+            // TODO wait for game state for this switch, use intermediary mode?
             tui.switch_mode(mode_play);
         } else if (tokens[0] === 'PORTAL') {
             let position = parser.parse_yx(tokens[1]);
@@ -243,10 +251,10 @@ let unparser = {
 }
 
 class Mode {
-    constructor(name, has_input_prompt=false, shows_annotations=false, is_intro=false) {
+    constructor(name, has_input_prompt=false, shows_info=false, is_intro=false) {
         this.name = name;
         this.has_input_prompt = has_input_prompt;
-        this.shows_annotations = shows_annotations;
+        this.shows_info= shows_info;
         this.is_intro = is_intro;
     }
 }
@@ -258,6 +266,7 @@ let mode_play = new Mode('play / move around', false, false);
 let mode_study = new Mode('check map tiles for messages', false, true);
 let mode_edit = new Mode('write ASCII char to map tile', false, false);
 let mode_teleport = new Mode('teleport away?');
+let mode_portal = new Mode('add portal to map tile', true, true);
 
 let tui = {
   mode: mode_waiting_for_server,
@@ -296,19 +305,24 @@ let tui = {
   },
   switch_mode: function(mode, keep_pos=false) {
     if (mode == mode_study && !keep_pos) {
-      explorer.position = game.things[game.player_id];
+      explorer.position = game.things[game.player_id].position;
     }
     this.mode = mode;
     this.empty_input();
     if (mode == mode_annotate && explorer.position in explorer.info_db) {
         let info = explorer.info_db[explorer.position];
         if (info != "(none)") {
-           this.inputEl.value = explorer.info_db[explorer.position];
+           this.inputEl.value = info;
            this.recalc_input_lines();
         }
+    }
+    if (mode == mode_portal && explorer.position in game.portals) {
+        let portal = game.portals[explorer.position]
+       this.inputEl.value = portal;
+       this.recalc_input_lines();
     } else if (mode == mode_teleport) {
-        tui.log_msg("Type Y or y to affirm teleportation, any other key to abort.");
-        tui.log_msg("target: " + tui.teleport_target);
+        tui.log_msg("@ May teleport to: " + tui.teleport_target);
+        tui.log_msg("@ Type Y or y to affirm, other keys to abort.");
     }
     this.full_refresh();
   },
@@ -342,7 +356,7 @@ let tui = {
   },
   log_msg: function(msg) {
       this.log.push(msg);
-      while (this.log.length > terminal.rows * 4) {
+      while (this.log.length > 100) {
         this.log.shift();
       };
       this.full_refresh();
@@ -350,11 +364,11 @@ let tui = {
   log_help: function() {
     this.log_msg("HELP:");
     this.log_msg("chat mode commands:");
-    this.log_msg("  :nick NAME - re-name yourself to NAME");
-    this.log_msg("  :msg USER TEXT - send TEXT to USER");
-    this.log_msg("  :help - show this help");
-    this.log_msg("  :p or :play - switch to play mode");
-    this.log_msg("  :? or :study - switch to study mode");
+    this.log_msg("  " + command_char_selector.value + "nick NAME - re-name yourself to NAME");
+    this.log_msg("  " + command_char_selector.value + "msg USER TEXT - send TEXT to USER");
+    this.log_msg("  " + command_char_selector.value + "help - show this help");
+    this.log_msg("  " + command_char_selector.value + "p or " + command_char_selector.value + "play - switch to play mode");
+    this.log_msg("  " + command_char_selector.value + "? or " + command_char_selector.value + "study - switch to study mode");
     this.log_msg("commands common to study and play mode:");
     this.log_msg("  " + this.movement_keys_desc + " - move");
     this.log_msg("  c - switch to chat mode");
@@ -382,12 +396,12 @@ let tui = {
                      Math.floor(game.map_size[1] / 2)];
     for (const thing_id in game.things) {
         let t = game.things[thing_id];
-        map_lines[t[0]][t[1]] = '@';
+        map_lines[t.position[0]][t.position[1]] = '@';
         if (game.player_id == thing_id) {
-            center_pos = t;
+            center_pos = t.position;
         }
     };
-    if (tui.mode.shows_annotations) {
+    if (tui.mode.shows_info) {
         map_lines[explorer.position[0]][explorer.position[1]] = '?';
         center_pos = explorer.position;
     }
@@ -428,7 +442,7 @@ let tui = {
   },
   draw_input: function() {
     if (this.mode.has_input_prompt) {
-        for (let y = terminal.rows - this.height_input, i = 0; y < terminal.rows && i < this.input_lines.length; y++, i++) {
+        for (let y = terminal.rows - this.height_input, i = 0; i < this.input_lines.length; y++, i++) {
             terminal.write(y, this.window_width, this.input_lines[i]);
         }
     }
@@ -442,7 +456,7 @@ let tui = {
         this.draw_map();
         this.draw_turn_line();
         this.draw_mode_line();
-        if (this.mode.shows_annotations) {
+        if (this.mode.shows_info) {
           this.draw_info();
         } else {
           this.draw_history();
@@ -462,6 +476,15 @@ let game = {
         this.player_id = -1;
         this.portals = {};
     },
+    get_thing: function(id_, create_if_not_found=false) {
+        if (id_ in game.things) {
+            return game.things[id_];
+        } else if (create_if_not_found) {
+            let t = new Thing([0,0]);
+            game.things[id_] = t;
+            return t;
+        };
+    }
 }
 
 game.init();
@@ -511,6 +534,18 @@ let explorer = {
     },
     get_info: function() {
         let info = "";
+        let position_i = this.position[0] * game.map_size[1] + this.position[1];
+        info += "TERRAIN: " + game.map[position_i] + "\n";
+        for (let t_id in game.things) {
+             let t = game.things[t_id];
+             if (t.position[0] == this.position[0] && t.position[1] == this.position[1]) {
+                 info += "PLAYER @";
+                 if (t.name_) {
+                     info += ": " + t.name_;
+                 }
+                 info += "\n";
+             }
+        }
         if (this.position in game.portals) {
             info += "PORTAL: " + game.portals[this.position] + "\n";
         }
@@ -526,12 +561,18 @@ let explorer = {
             msg = " ";  // triggers annotation deletion
         }
         server.send(["ANNOTATE", unparser.to_yx(explorer.position), msg]);
+    },
+    set_portal: function(msg) {
+        if (msg.length == 0) {
+            msg = " ";  // triggers portal deletion
+        }
+        server.send(["PORTAL", unparser.to_yx(explorer.position), msg]);
     }
 }
 
 tui.inputEl.addEventListener('input', (event) => {
     if (tui.mode.has_input_prompt) {
-       let max_length = tui.window_width * terminal.rows - tui.input_prompt.length;
+        let max_length = tui.window_width * terminal.rows - tui.input_prompt.length;
         if (tui.inputEl.value.length > max_length) {
             tui.inputEl.value = tui.inputEl.value.slice(0, max_length);
         };
@@ -544,44 +585,48 @@ tui.inputEl.addEventListener('input', (event) => {
         if (['Y', 'y'].includes(tui.inputEl.value[0])) {
             server.reconnect_to(tui.teleport_target);
        } else {
+            tui.log_msg("@ teleportation aborted");
             tui.switch_mode(mode_play);
        }
     }
 }, false);
 tui.inputEl.addEventListener('keydown', (event) => {
     if (event.key == 'Enter') {
-       event.preventDefault();
+        event.preventDefault();
     }
     if (tui.mode == mode_login && event.key == 'Enter') {
         server.send(['LOGIN', tui.inputEl.value]);
         tui.switch_mode(mode_login);
+    } else if (tui.mode == mode_portal && event.key == 'Enter') {
+        explorer.set_portal(tui.inputEl.value);
+        tui.switch_mode(mode_study, true);
     } else if (tui.mode == mode_annotate && event.key == 'Enter') {
         explorer.annotate(tui.inputEl.value);
         tui.switch_mode(mode_study, true);
     } else if (tui.mode == mode_chat && event.key == 'Enter') {
         let [tokens, token_starts] = parser.tokenize(tui.inputEl.value);
         if (tokens.length > 0 && tokens[0].length > 0) {
-            if (tokens[0][0] == ':') {
-                if (tokens[0] == ':play' || tokens[0] == ':p') {
+            if (tui.inputEl.value[0][0] == command_char_selector.value) {
+                if (tokens[0].slice(1) == 'play' || tokens[0].slice(1) == 'p') {
                     tui.switch_mode(mode_play);
-                } else if (tokens[0] == ':study' || tokens[0] == ':?') {
+                } else if (tokens[0].slice(1) == 'study' || tokens[0].slice(1) == '?') {
                     tui.switch_mode(mode_study);
-                } else if (tokens[0] == ':help') {
+                } else if (tokens[0].slice(1) == 'help') {
                     tui.log_help();
-                } else if (tokens[0] == ':nick') {
+                } else if (tokens[0].slice(1) == 'nick') {
                     if (tokens.length > 1) {
                         server.send(['LOGIN', tokens[1]]);
                     } else {
                         tui.log_msg('? need login name');
                     }
-                } else if (tokens[0] == ':msg') {
+                } else if (tokens[0].slice(1) == 'msg') {
                     if (tokens.length > 2) {
                         let msg = tui.inputEl.value.slice(token_starts[2]);
                         server.send(['QUERY', tokens[1], msg]);
                     } else {
                         tui.log_msg('? need message target and message');
                     }
-                } else if (tokens[0] == ':reconnect') {
+                } else if (tokens[0].slice(1) == 'reconnect') {
                    if (tokens.length > 1) {
                         server.reconnect_to(tokens[1]);
                    } else {
@@ -622,9 +667,13 @@ tui.inputEl.addEventListener('keydown', (event) => {
           };
     } else if (tui.mode == mode_study) {
         if (event.key === 'c') {
+            event.preventDefault();
             tui.switch_mode(mode_chat);
         } else if (event.key == 'p') {
             tui.switch_mode(mode_play);
+        } else if (event.key === 'P') {
+            event.preventDefault();
+            tui.switch_mode(mode_portal);
         } else if (event.key === tui.key_left) {
              explorer.move('left');
         } else if (event.key === tui.key_right) {
@@ -659,7 +708,7 @@ cols_selector.addEventListener('input', function() {
     tui.full_refresh();
 }, false);
 window.setInterval(function() {
-    if (!(['input', 'n_cols', 'n_rows', 'WASD_selector'].includes(document.activeElement.id))) {
+    if (!(['input', 'n_cols', 'n_rows', 'WASD_selector', 'command_char'].includes(document.activeElement.id))) {
         tui.inputEl.focus();
     }
 }, 100);