Mercurial > hg > batmud > maputils

changeset 2189:9b55f93116b6

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Refactor the citymap HTML and CSS, remove useless use of Javascript where we can use CSS styles instead.
author Matti Hamalainen <ccr@tnsp.org>
date Sun, 13 Oct 2019 00:14:07 +0300
parents 75f59a7daa5e
children 3a78200e6ca2
files misc/misc.css mkcitymap.c tooltip.js
diffstat 3 files changed, 58 insertions(+), 45 deletions(-) [+]
line wrap: on
line diff
--- a/misc/misc.css	Sun Oct 13 00:11:26 2019 +0300
+++ b/misc/misc.css	Sun Oct 13 00:14:07 2019 +0300
@@ -101,31 +101,48 @@
   display: block;
 }
 
-a.ltloc {
+
+a.nloc {
   color: red;
   text-decoration: none;
 }
 
-a.ltloc:hover {
-  background: #888;
+a.nloc:hover {
+  background: #666;
 }
 
-a.ltloc.ltguild.lt1  {
+a.nloc.ltguild.lt1  {
   color: #080;
 }
 
-a.ltloc.ltguild.lt2  {
+a.nloc.ltguild.lt2  {
   color: #0f0;
 }
 
-a.ltloc.ltgov.lt0 {
+a.nloc.ltgov.lt0 {
   color: #f0f;
 }
 
-a.ltloc.ltgov.lt1 {
+a.nloc.ltgov.lt1 {
   color: #ff0;
 }
-a.ltloc.ltshop {
+a.nloc.ltshop {
   color: #cc0;
 }
 
+
+.lochilite {
+  color: white !important;
+  animation: pulse 1s ease infinite;
+}
+
+@keyframes pulse {
+  0% { background: #000; }
+  50% { background: #f00; }
+  100% { background: #000; }
+}
+
+.locactive {
+  background: white !important;
+  color: red !important;
+}
--- a/mkcitymap.c	Sun Oct 13 00:11:26 2019 +0300
+++ b/mkcitymap.c	Sun Oct 13 00:14:07 2019 +0300
@@ -112,7 +112,7 @@
 
     fprintf(outFile,
         "</head>\n"
-        "<body onload=\"httOnLoad();\">\n"
+        "<body onload=\"mapOnLoad();\">\n"
         );
 
     if (optMapTitle)
@@ -185,7 +185,7 @@
         for (int i = 0; i < marker->nnames; i++)
         {
             fprintf(outFile,
-                "<a class=\"ltloc lt%s lt%d\" id=\"listloc%d_%d\" href=\"?%d_%d\" "
+                "<a class=\"nloc lt%s lt%d\" id=\"listloc%d_%d\" href=\"?%d_%d\" "
                 "onmouseover=\"%s('%d_%d');\" onmouseout=\"qn();\">",
                 getCityLocationType(marker),
                 marker->align,
--- a/tooltip.js	Sun Oct 13 00:11:26 2019 +0300
+++ b/tooltip.js	Sun Oct 13 00:14:07 2019 +0300
@@ -1,53 +1,56 @@
 //
 // Tooltip and other utility functions in JavaScript for BatMUD maps
 // Programmed by Matti 'ccr' Hamalainen <ccr@tnsp.org>
-// (C) Copyright 2006-2017 Tecnic Software productions (TNSP)
+// (C) Copyright 2006-2019 Tecnic Software productions (TNSP)
 //
-var myhl = null;
+var myprev = null;
 var mytt = null;
 var myx = 0;
 var myy = 0;
-document.onmousemove = mapUpdateTooltip;
 
 
-// Change background style of given element
-function shc(uid, ucolor)
+// Change style of given element
+function mapSetStyle(uid, ustyle, uset)
 {
   var uelem = document.getElementById(uid);
   if (uelem)
-    uelem.style.background = ucolor;
+  {
+    if (uset)
+      uelem.classList.add(ustyle);
+    else
+      uelem.classList.remove(ustyle);
+  }
 }
 
 
-// Hilite map and list elements of given number
-function qh(marker)
+function mapSetActive(uid, uset)
 {
-  if (myhl != null) qu(myhl);
-  shc('maploc'+marker, 'white');
-  shc('listloc'+marker, 'white');
-  myhl = marker;
+  mapSetStyle('maploc'+uid, "locactive", uset);
+  mapSetStyle('listloc'+uid, "locactive", uset);
 }
 
-// Unlite
-function qu(marker)
+
+// Hilite map and list elements of given id
+function qh(uid)
 {
-  shc('maploc'+ marker, 'black');
-  shc('listloc'+ marker, 'black');
+  if (myprev != null) mapSetActive(myprev, false);
+  mapSetActive(uid, true);
+  myprev = uid;
 }
 
 
 function qn()
 {
-  if (myhl != null) qu(myhl);
-  myhl = null;
+  if (myprev != null) mapSetActive(myprev, false);
+  myprev = null;
   htt();
 }
 
 
-function sttq(id)
+function sttq(uid)
 {
-  qh(id);
-  stt(id);
+  qh(uid);
+  stt(uid);
 }
 
 
@@ -111,6 +114,7 @@
   mytt.style.display = "block";
 }
 
+
 // Hide tooltip
 function htt()
 {
@@ -122,24 +126,16 @@
 
 
 // Highlight one location (by index number) during page load
-var httID;
-var httST = 0;
-
-function httBlink(marker)
+function mapOnLoad()
 {
-  httST = !httST;
-  var mcolor = httST ? "white" : "black";
-  shc("maploc"+ marker, mcolor);
-  shc("listloc"+ marker, mcolor);
-}
+  document.onmousemove = mapUpdateTooltip;
 
-
-function httOnLoad()
-{
   var hstr = window.location.href;
   if (hstr.indexOf("?") >= 0)
   {
-    var name = unescape(hstr.substr(hstr.indexOf("?") + 1).toLowerCase());
-    httID = setInterval(function (qname) { httBlink(qname); }, 500, name);
+    var uid = unescape(hstr.substr(hstr.indexOf("?") + 1).toLowerCase());
+
+    mapSetStyle('maploc'+uid, "lochilite", true);
+    mapSetStyle('listloc'+uid, "lochilite", true);
   }
 }