infopane: Pane switching machinery

Signed-off-by: Ian Jackson <ijackson@chiark.greenend.org.uk>

diff --git a/templates/macros.tera b/templates/macros.tera
index 71659c3f4b022a7db186fb50d275bb8d852d7b41..099c76962bd52856e9b814047c010e2301a3d749 100644 (file)
--- a/templates/macros.tera
+++ b/templates/macros.tera
@@ -86,15 +86,25 @@ Hi {{nick | escape}}
 
 {% macro infopane() %}
 <div id="infopane">
- <div id="uopane" class="somepane">
+
+ <div id="pane_help" class="somepane">
   <div id="uos" class="uos">
     <div class="uos-mid" id="uos-mid"></div>
   </div>
   <div class="uos">
     <div class="uokey"><strong>Mouse</strong> select/deselect/drag</div>
     <div class="uokey"><strong>shift</strong> multiple selection</div>
+    <div class="uokey">Show
+      <strong>H</strong> this help
+      <strong>U</strong> players
+    </div>
   </div>
- </div id="uopane">
+ </div>
+
+ <div id="pane_players" class="somepane" style="display:none">
+   Player list will appear here.
+ </div>
+
 </div id="infopane">
 {% endmacro infopane %}
 

diff --git a/templates/script.ts b/templates/script.ts
index e5497ae71d52eb2df872aa9b455feab8a1bb9650..75612cf4b07d3ca10339fd8ebef5cec94a26ea62 100644 (file)
--- a/templates/script.ts
+++ b/templates/script.ts
@@ -124,6 +124,12 @@ var zoom_btn : HTMLInputElement;
 var links_elem : HTMLElement;
 var wresting: boolean;
 
+type PaneName = string;
+const pane_keys : { [key: string]: PaneName } = {
+  "H" : "help",
+  "U" : "players",
+};
+
 const uo_kind_prec : { [kind: string]: number } = {
   'GlobalExtra' :  50,
   'Client'      :  70,
@@ -357,6 +363,11 @@ function some_keydown(e: KeyboardEvent) {
   // my tsc says this isComposing thing doesn't exist.  wat.
   if ((e as any).isComposing /* || e.keyCode === 229 */) return;
 
+  let pane = pane_keys[e.key];
+  if (pane) {
+    return pane_switch(pane);
+  }
+
   let uo = uo_map[e.key];
   if (uo === undefined || uo === null) return;
 
@@ -381,6 +392,22 @@ function some_keydown(e: KeyboardEvent) {
   }
 }
 
+function pane_switch(newpane: PaneName) {
+  let new_e;
+  for (;;) {
+    new_e = document.getElementById('pane_' + newpane)!;
+    let style = new_e.getAttribute('style');
+    if (style || newpane == 'help') break;
+    newpane = 'help';
+  }
+  for (let old_e = new_e.parentElement!.firstElementChild;
+       old_e;
+       old_e = old_e.nextElementSibling) {
+    old_e.setAttribute('style','display: none;');
+  }
+  new_e.removeAttribute('style');
+}
+
 keyops_local['left' ] = function (uo: UoRecord) { rotate_targets(uo, +1); }
 keyops_local['right'] = function (uo: UoRecord) { rotate_targets(uo, -1); }