changeset 2281:943a3e20f1e8

Improve map search help.
author Matti Hamalainen <ccr@tnsp.org>
date Fri, 03 Apr 2020 00:02:42 +0300
parents eac6f436f387
children ff4b358ef3bc
files www/search.css www/search.js www/search.php
diffstat 3 files changed, 26 insertions(+), 10 deletions(-) [+]
line wrap: on
line diff
--- a/www/search.css	Thu Apr 02 21:59:03 2020 +0300
+++ b/www/search.css	Fri Apr 03 00:02:42 2020 +0300
@@ -7,13 +7,13 @@
   padding: 1em;
 }
 
-#note {
+.help {
   color: red;
   background: black;
   padding: 0.5em;
 }
 
-#note b {
+.help b {
 	color: yellow;
 }
 
--- a/www/search.js	Thu Apr 02 21:59:03 2020 +0300
+++ b/www/search.js	Fri Apr 03 00:02:42 2020 +0300
@@ -231,9 +231,13 @@
   if (mlobj)
     mlobj.innerHTML = "Contacting server ...";
 
-  var mlhelp = document.getElementById("note");
-  if (mlhelp)
-    mlhelp.style.display = "none";
+  var mlhelp1 = document.getElementById("help1");
+  if (mlhelp1)
+    mlhelp1.style.display = "none";
+
+  var mlhelp2 = document.getElementById("help2");
+  if (mlhelp2)
+    mlhelp2.style.display = "none";
 
   dataWS.onopen = function()
   {
--- a/www/search.php	Thu Apr 02 21:59:03 2020 +0300
+++ b/www/search.php	Fri Apr 03 00:02:42 2020 +0300
@@ -12,13 +12,24 @@
 ?>
 <h1>BatMUD map search</h1>
 <div id="noscript" class="error">
-This page requires JavaScript to be enabled to work.
+This page requires JavaScript (and WebSockets support) to work.
 </div>
 
 <div id="locSearchBox">
   <h2>Location name search</h2>
-  <input type="text" id="locPattern" autocomplete="off" maxlength="30" size="30">
-  Quick location name search. For example try typing "ferry".
+  <input type="text" id="locPattern" autocomplete="off" maxlength="30" size="30" placeholder="location name or part of it">
+  Quick location search by name.
+  <button type="button" title="Show or hide help" onclick="mapToggleView('help1')">Help!</button>
+</div>
+<div id="help1" class="help">
+  <h2>Help for location search by name</h2>
+  <ul>
+    <li>By default any text typed will be partial-matched to location name(s), including the alternative names known to Pupunen Maps database.
+    </li>
+    <li>You can use <b>*</b> glob matching token to match any character (0 or more), and <b>?</b> to match exactly one (any) character.</li>
+    <li>You can also use <b>^</b> to anchor the match to name string start, e.g. <b>^a</b> will match only location names that start with letter 'A' (case-insensitive).
+    Same goes for <b>'$'</b> to match string end. However, the matching style is otherwise "glob", not regular expression.</li>
+  </ul>
 </div>
 
 <div id="mapSearchBox">
@@ -26,7 +37,7 @@
   <textarea id="mapPattern" cols="30" rows="15"></textarea>
   <div id="controls">
     <div id="mapList"></div>
-    <button id="btnHelp" type="button" title="Show or hide help" onclick="mapToggleView('note')">Help!</button>
+    <button type="button" title="Show or hide help" onclick="mapToggleView('help2')">Help!</button>
     <span id="mapInfo"></span>
     <button id="btnMaps" type="button" title="Reset or clear the map selection to be searched. Just click it to see what happens.">C^</button>
     <button class="large" id="btnClear" type="button" title="Clear current search results and map search pattern. Does NOT reset the selected maps.">Clear search</button>
@@ -39,7 +50,8 @@
   <div id="results"></div>
 </div>
 
-<div id="note">
+<div id="help2" class="help">
+  <h2>Help for map pattern search</h2>
   <ol>
     <li>The following characters act as wildcards (they match any character):
       <b>*</b>, <b>@</b>, <b>X</b>, <b>?</b>, <b>%</b>, <b>C</b> and