wip reformatting uokeys

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

diff --git a/templates/script.ts b/templates/script.ts
index 567096cea4f10f88e2f8fefc7c354135881d6597..4ed718bd48e19b756b3ef5cf0e1edc9312edaa93 100644 (file)
--- a/templates/script.ts
+++ b/templates/script.ts
@@ -110,6 +110,7 @@ var wresting: boolean;
 
 const uo_kind_prec : { [kind: string]: number } = {
   'GlobalExtra' :  50,
+  'Client'      :  70,
   'Global'      : 100,
   'Piece'       : 200,
   'ClientExtra' : 500,
@@ -292,16 +293,28 @@ function recompute_keybindings() {
     return uo_kind_prec[a.kind] - uo_kind_prec[b.kind]
       || ak.localeCompare(bk);
   });
-  let out = document.createElement('div');
-  out.setAttribute('class','uokeys');
+  let mid_elem = null;
+  for (let celem = uos_node.firstElementChild;
+       celem != null;
+       celem = nextelem) {
+    var nextelem = celem.nextElementSibling
+    let cid = celem.getAttribute("id");
+    if (cid == "uos-mid") mid_elem = celem;
+    else if (celem.getAttribute("class") == 'uos-mid') ;
+    else celem.remove();
+  }
   for (var kk of uo_keys) {
     let uo = uo_map[kk]!;
+    let prec = uo_kind_prec[uo.kind];
     let ent = document.createElement('div');
     ent.setAttribute('class','uokey-'+uo.kind);
     ent.innerHTML = '<b>' + kk + '</b> ' + uo.desc;
-    out.appendChild(ent);
+    if (prec < 400) {
+      uos_node.insertBefore(ent, mid_elem);
+    } else {
+      uos_node.appendChild(ent);
+    }
   }
-  uos_node.firstChild!.replaceWith(out);
 }
 
 function some_keydown(e: KeyboardEvent) {

diff --git a/templates/session.tera b/templates/session.tera
index 69f27f19f7ec91d47860b7caed5c98fd74c06b40..27d1a2aab11ac892b1bb836ebff56d5ecdc60050 100644 (file)
--- a/templates/session.tera
+++ b/templates/session.tera
@@ -4,16 +4,15 @@
       data-gen="{{gen}}"
       data-load="{{ load | escape }}">
 <style>
-  div.uokeys { display: flex; flex-wrap: wrap; }
+  div[class=uos] { display: flex; flex-wrap: wrap; }
   div[class|=uokey] {
     outline: 1px solid #000;
     margin: 1px;
     padding-left: 5px;
     padding-right: 6.5px;
   }
-  div.uokey-ClientExtra {
-    margin-left: auto;
-    margin-top: auto;
+  div[class=uokey-ClientExtra] {
+    align-self: end;
   }
 </style>
 <h1>Hi {{nick | escape}}<span id="wresting-warning"></div></h1>
@@ -40,13 +39,13 @@
 {%- endfor %}
     </svg>
 <p>
-  <div id="uos" style="height: 100px;">
-    <dev></div>
+  <div id="uos" class="uos" style="height: 100px;">
+    <div class="uos-mid" id="uos-mid" style="margin-left: auto; margin-top: auto;"></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>
-<div class="uokeys">
-<div class="uokey"><strong>Mouse</strong> select/deselect/drag</div>
-<div class="uokey"><strong>shift</strong> multiple selection</div>
-</div>
 <p>
   <div id="log" style="overflow-y: scroll; height: 200px;">
 {% for ent in log %}