Mercurial > hg > batmud > maputils
changeset 2575:9d147f7d809c
Rename util.js to worldmap.js to better reflect its functionality.
author | Matti Hamalainen <ccr@tnsp.org> |
---|---|
date | Mon, 29 Jan 2024 00:25:14 +0200 |
parents | 5e6efb5a6b84 |
children | 72a56465ebd7 |
files | Makefile.common Makefile.maps src/util.js src/worldmap.js world/Makefile |
diffstat | 5 files changed, 315 insertions(+), 315 deletions(-) [+] |
line wrap: on
line diff
--- a/Makefile.common Sun Jan 28 02:32:53 2024 +0200 +++ b/Makefile.common Mon Jan 29 00:25:14 2024 +0200 @@ -79,7 +79,7 @@ ### ### Special targets ### -upload: src/tooltip.js src/citymap.js src/util.js $(MISC_MAPS_PATH)misc.css \ +upload: src/tooltip.js src/citymap.js src/worldmap.js $(MISC_MAPS_PATH)misc.css \ $(addprefix $(MISC_MAPS_PATH),$(addsuffix .html,$(MISC_MAPS))) \ $(addprefix $(MISC_MAPS_PATH),$(addsuffix .map,$(MISC_MAPS))) \ $(addprefix $(MISC_MAPS_PATH),$(addsuffix .loc,$(MISC_MAPS)))
--- a/Makefile.maps Sun Jan 28 02:32:53 2024 +0200 +++ b/Makefile.maps Mon Jan 29 00:25:14 2024 +0200 @@ -27,7 +27,7 @@ %.html: %.tmp2 %.desc %.tmp3 $(COLORMAP_BIN) @echo "COLORMAP $@" - @$(COLORMAP_BIN) $(COLORMAP_OPTS) -J util.js $(COLORMAP_HTML) -P $(COLORMAP_EXTRA) -t "`cat $(patsubst %.tmp2,%.desc,$<)`" $< | \ + @$(COLORMAP_BIN) $(COLORMAP_OPTS) -J worldmap.js $(COLORMAP_HTML) -P $(COLORMAP_EXTRA) -t "`cat $(patsubst %.tmp2,%.desc,$<)`" $< | \ sed -e "/@LOCATIONS@/r $(patsubst %.tmp2,%.tmp3,$<)" -e "s/@LOCATIONS@//g" > $@
--- a/src/util.js Sun Jan 28 02:32:53 2024 +0200 +++ /dev/null Thu Jan 01 00:00:00 1970 +0000 @@ -1,312 +0,0 @@ -// -// Positioning utility functions in JavaScript for BatMUD maps -// Programmed by Matti 'ccr' Hamalainen <ccr@tnsp.org> -// (C) Copyright 2007-2024 Tecnic Software productions (TNSP) -// -var mapElem = null; -var mapDragEnable = false, mapDragGoing = false; -var mapDragPos = { x: 0, y: 0, mx: 0, my: 0 }; -var mapCurrPos = null; -var mapCurrLoc = null; -var mapScrollTimerID = -1; -var mapScrollPosStart, mapScrollPosEnd; -var mapScrollIndex = 0.0, mapScrollSteps = 50; - - -function mapAddEventListener(obname, evtype, evcallback) -{ - document.getElementById(obname).addEventListener(evtype, evcallback, false); -} - - -function mapFindElemCoords(elem) -{ - var xc = yc = 0; - if (elem.offsetParent) - { - xc = elem.offsetLeft; - yc = elem.offsetTop; - while (elem = elem.offsetParent) - { - xc += elem.offsetLeft; - yc += elem.offsetTop; - } - } - - return { x: xc, y: yc, mx: 0, my: 0 }; -} - - -function mapGetWindowSize() -{ - var winW = 0, winH = 0; - if (typeof(window.innerWidth) == 'number') - { - // Non-MSIE - winW = window.innerWidth; - winH = window.innerHeight; - } - else - if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) - { - // MSIE 6+ in 'standards compliant mode' - winW = document.documentElement.clientWidth; - winH = document.documentElement.clientHeight; - } - else - if (document.body && (document.body.clientWidth || document.body.clientHeight)) - { - // MSIE 4 compatible - winW = document.body.clientWidth; - winH = document.body.clientHeight; - } - - return { w: winW, h: winH }; -} - - -function mapSetWindowPos(px, py) -{ - const dim = mapGetWindowSize(); - mapDragPos.x = px - (dim.w / 2); - mapDragPos.y = py - (dim.h / 2); - - mapElem.scrollLeft = mapDragPos.x; - mapElem.scrollTop = mapDragPos.y; -} - - -function mapClamp10(a) -{ - return (a < 0.0 ? 0.0 : (a > 1.0 ? 1.0 : a)); -} - - -function mapSCurve(t) -{ - return (t * t * (3.0 - 2.0 * t)); -} - - -function mapLerp(t, a, b) -{ - return (a + t * (b - a)); -} - - -function mapScrollToPos() -{ - if (mapScrollIndex <= 1.0) - { - const n = mapSCurve(mapClamp10(mapScrollIndex)); - const px = mapLerp(n, mapScrollPosStart.x, mapScrollPosEnd.x); - const py = mapLerp(n, mapScrollPosStart.y, mapScrollPosEnd.y); - - mapSetWindowPos(px, py); - mapScrollIndex += 1.0 / mapScrollSteps; - } - else - { - clearInterval(mapScrollTimerID); - } -} - - -function mapSetActiveLocation(newLoc) -{ - // Change CSS class state for prev/curr/new selected element - if (mapCurrLoc != null) - { - var celem = document.getElementById(mapCurrLoc); - var mcelem = document.getElementById("m"+ mapCurrLoc); - if (celem && mcelem) - { - celem.classList.remove("nactive"); - mcelem.classList.remove("nactive"); - } - } - - if (newLoc != null) - { - var celem = document.getElementById(newLoc); - var mcelem = document.getElementById("m"+ newLoc); - if (celem && mcelem) - { - celem.classList.add("nactive"); - mcelem.classList.add("nactive"); - - mapCurrLoc = newLoc; - mapCurrPos = mapFindElemCoords(celem); - } - } - - - // Set the active item in the location dropdown - var ssel = document.getElementById("slocation"); - if (ssel) - { - var found = false; - for (var opt, i = 0; opt = ssel.options[i]; i++) - { - if (opt.value == newLoc) - { - ssel.selectedIndex = i; - found = true; - break; - } - } - - if (!found) - ssel.selectedIndex = 0; - } -} - - -function mapSetPosToElem(nelem) -{ - const pos = mapFindElemCoords(nelem); - mapSetWindowPos(pos.x, pos.y); -} - - -function mapGotoLocation() -{ - var newLoc = document.getElementById("slocation").value; - if (newLoc == "") - { - mapCurrLoc = null; - } - else - if (mapCurrLoc != newLoc || mapCurrPos != mapDragPos) - { - var nelem = document.getElementById(newLoc); - if (nelem) - { - //const spanning = document.getElementById("spanning").checked; - var celem = mapCurrLoc != null ? document.getElementById(mapCurrLoc) : null; - //if (spanning && celem) - if (celem) - { - if (mapScrollTimerID != -1) - clearInterval(mapScrollTimerID); - - if (mapCurrPos != null) - mapScrollPosStart = mapCurrPos; - else - mapScrollPosStart = mapFindElemCoords(celem); - - mapScrollPosEnd = mapFindElemCoords(nelem); - mapScrollIndex = 0.0; - mapScrollTimerID = setInterval(mapScrollToPos, 10); - } - else - { - mapSetPosToElem(nelem); - } - } - } - - mapSetActiveLocation(newLoc); - - // Set href - var slink = window.location.href; - var spos; - if ((spos = slink.indexOf("#")) >= 0) - slink = slink.substr(0, spos); - slink += newLoc != null ? "#" + newLoc : ""; - - window.location.href = slink; -} - - -function mapUpdateLabelVisibility() -{ - var vcl = document.all ? document.styleSheets[0].rules[0] : document.styleSheets[0].cssRules[0]; - vcl.style.visibility = document.getElementById("slabels").checked ? "visible" : "hidden"; -} - - -function mapDragUpHandler(ev) -{ - if (mapDragGoing) - { - mapDragGoing = false; - mapElem.style.cursor = "grab"; - mapElem.style.removeProperty("user-select"); - } -} - - -function mapDragMoveHandler(ev) -{ - if (mapDragGoing) - { - const dx = ev.clientX - mapDragPos.mx; - const dy = ev.clientY - mapDragPos.my; - - mapElem.scrollLeft = mapDragPos.x - dx; - mapElem.scrollTop = mapDragPos.y - dy; - } -} - - -function mapDragStartPan(ev) -{ - if (mapDragEnable) - { - mapElem.style.cursor = "grabbing"; - mapElem.style.userSelect = "none"; - - if (mapScrollTimerID != -1) - clearInterval(mapScrollTimerID); - - mapDragPos = { - x: mapElem.scrollLeft, - y: mapElem.scrollTop, - mx: ev.clientX, - my: ev.clientY, - }; - - mapDragGoing = true; - } -} - - -function mapUpdateDragPan() -{ - mapDragEnable = document.getElementById("spanning").checked; - mapElem.style.cursor = mapDragEnable ? "grab" : "default"; -} - - -function mapOnLoad() -{ - mapElem = document.getElementById("smap"); - - var slink = window.location.href; - var spos; - if ((spos = slink.indexOf("#")) >= 0) - { - var eid = unescape(slink.substr(spos + 1).toLowerCase()).trim(); - var nelem = document.getElementById(eid); - if (nelem) - { - setTimeout(function() - { - mapSetPosToElem(nelem); - mapSetActiveLocation(eid); - }, - 50); - } - } - - mapAddEventListener("slabels", "change", mapUpdateLabelVisibility); - mapAddEventListener("slocation", "change", mapGotoLocation); - mapAddEventListener("spanning", "change", mapUpdateDragPan); - mapAddEventListener("smap", "mousedown", mapDragStartPan); - document.addEventListener("mousemove", mapDragMoveHandler); - document.addEventListener("mouseup", mapDragUpHandler); - - mapUpdateLabelVisibility(); - mapUpdateDragPan(); -}
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/src/worldmap.js Mon Jan 29 00:25:14 2024 +0200 @@ -0,0 +1,312 @@ +// +// Worldmap utility functions in JavaScript for BatMUD maps +// Programmed by Matti 'ccr' Hamalainen <ccr@tnsp.org> +// (C) Copyright 2007-2024 Tecnic Software productions (TNSP) +// +var mapElem = null; +var mapDragEnable = false, mapDragGoing = false; +var mapDragPos = { x: 0, y: 0, mx: 0, my: 0 }; +var mapCurrPos = null; +var mapCurrLoc = null; +var mapScrollTimerID = -1; +var mapScrollPosStart, mapScrollPosEnd; +var mapScrollIndex = 0.0, mapScrollSteps = 50; + + +function mapAddEventListener(obname, evtype, evcallback) +{ + document.getElementById(obname).addEventListener(evtype, evcallback, false); +} + + +function mapFindElemCoords(elem) +{ + var xc = yc = 0; + if (elem.offsetParent) + { + xc = elem.offsetLeft; + yc = elem.offsetTop; + while (elem = elem.offsetParent) + { + xc += elem.offsetLeft; + yc += elem.offsetTop; + } + } + + return { x: xc, y: yc, mx: 0, my: 0 }; +} + + +function mapGetWindowSize() +{ + var winW = 0, winH = 0; + if (typeof(window.innerWidth) == 'number') + { + // Non-MSIE + winW = window.innerWidth; + winH = window.innerHeight; + } + else + if (document.documentElement && (document.documentElement.clientWidth || document.documentElement.clientHeight)) + { + // MSIE 6+ in 'standards compliant mode' + winW = document.documentElement.clientWidth; + winH = document.documentElement.clientHeight; + } + else + if (document.body && (document.body.clientWidth || document.body.clientHeight)) + { + // MSIE 4 compatible + winW = document.body.clientWidth; + winH = document.body.clientHeight; + } + + return { w: winW, h: winH }; +} + + +function mapSetWindowPos(px, py) +{ + const dim = mapGetWindowSize(); + mapDragPos.x = px - (dim.w / 2); + mapDragPos.y = py - (dim.h / 2); + + mapElem.scrollLeft = mapDragPos.x; + mapElem.scrollTop = mapDragPos.y; +} + + +function mapClamp10(a) +{ + return (a < 0.0 ? 0.0 : (a > 1.0 ? 1.0 : a)); +} + + +function mapSCurve(t) +{ + return (t * t * (3.0 - 2.0 * t)); +} + + +function mapLerp(t, a, b) +{ + return (a + t * (b - a)); +} + + +function mapScrollToPos() +{ + if (mapScrollIndex <= 1.0) + { + const n = mapSCurve(mapClamp10(mapScrollIndex)); + const px = mapLerp(n, mapScrollPosStart.x, mapScrollPosEnd.x); + const py = mapLerp(n, mapScrollPosStart.y, mapScrollPosEnd.y); + + mapSetWindowPos(px, py); + mapScrollIndex += 1.0 / mapScrollSteps; + } + else + { + clearInterval(mapScrollTimerID); + } +} + + +function mapSetActiveLocation(newLoc) +{ + // Change CSS class state for prev/curr/new selected element + if (mapCurrLoc != null) + { + var celem = document.getElementById(mapCurrLoc); + var mcelem = document.getElementById("m"+ mapCurrLoc); + if (celem && mcelem) + { + celem.classList.remove("nactive"); + mcelem.classList.remove("nactive"); + } + } + + if (newLoc != null) + { + var celem = document.getElementById(newLoc); + var mcelem = document.getElementById("m"+ newLoc); + if (celem && mcelem) + { + celem.classList.add("nactive"); + mcelem.classList.add("nactive"); + + mapCurrLoc = newLoc; + mapCurrPos = mapFindElemCoords(celem); + } + } + + + // Set the active item in the location dropdown + var ssel = document.getElementById("slocation"); + if (ssel) + { + var found = false; + for (var opt, i = 0; opt = ssel.options[i]; i++) + { + if (opt.value == newLoc) + { + ssel.selectedIndex = i; + found = true; + break; + } + } + + if (!found) + ssel.selectedIndex = 0; + } +} + + +function mapSetPosToElem(nelem) +{ + const pos = mapFindElemCoords(nelem); + mapSetWindowPos(pos.x, pos.y); +} + + +function mapGotoLocation() +{ + var newLoc = document.getElementById("slocation").value; + if (newLoc == "") + { + mapCurrLoc = null; + } + else + if (mapCurrLoc != newLoc || mapCurrPos != mapDragPos) + { + var nelem = document.getElementById(newLoc); + if (nelem) + { + //const spanning = document.getElementById("spanning").checked; + var celem = mapCurrLoc != null ? document.getElementById(mapCurrLoc) : null; + //if (spanning && celem) + if (celem) + { + if (mapScrollTimerID != -1) + clearInterval(mapScrollTimerID); + + if (mapCurrPos != null) + mapScrollPosStart = mapCurrPos; + else + mapScrollPosStart = mapFindElemCoords(celem); + + mapScrollPosEnd = mapFindElemCoords(nelem); + mapScrollIndex = 0.0; + mapScrollTimerID = setInterval(mapScrollToPos, 10); + } + else + { + mapSetPosToElem(nelem); + } + } + } + + mapSetActiveLocation(newLoc); + + // Set href + var slink = window.location.href; + var spos; + if ((spos = slink.indexOf("#")) >= 0) + slink = slink.substr(0, spos); + slink += newLoc != null ? "#" + newLoc : ""; + + window.location.href = slink; +} + + +function mapUpdateLabelVisibility() +{ + var vcl = document.all ? document.styleSheets[0].rules[0] : document.styleSheets[0].cssRules[0]; + vcl.style.visibility = document.getElementById("slabels").checked ? "visible" : "hidden"; +} + + +function mapDragUpHandler(ev) +{ + if (mapDragGoing) + { + mapDragGoing = false; + mapElem.style.cursor = "grab"; + mapElem.style.removeProperty("user-select"); + } +} + + +function mapDragMoveHandler(ev) +{ + if (mapDragGoing) + { + const dx = ev.clientX - mapDragPos.mx; + const dy = ev.clientY - mapDragPos.my; + + mapElem.scrollLeft = mapDragPos.x - dx; + mapElem.scrollTop = mapDragPos.y - dy; + } +} + + +function mapDragStartPan(ev) +{ + if (mapDragEnable) + { + mapElem.style.cursor = "grabbing"; + mapElem.style.userSelect = "none"; + + if (mapScrollTimerID != -1) + clearInterval(mapScrollTimerID); + + mapDragPos = { + x: mapElem.scrollLeft, + y: mapElem.scrollTop, + mx: ev.clientX, + my: ev.clientY, + }; + + mapDragGoing = true; + } +} + + +function mapUpdateDragPan() +{ + mapDragEnable = document.getElementById("spanning").checked; + mapElem.style.cursor = mapDragEnable ? "grab" : "default"; +} + + +function mapOnLoad() +{ + mapElem = document.getElementById("smap"); + + var slink = window.location.href; + var spos; + if ((spos = slink.indexOf("#")) >= 0) + { + var eid = unescape(slink.substr(spos + 1).toLowerCase()).trim(); + var nelem = document.getElementById(eid); + if (nelem) + { + setTimeout(function() + { + mapSetPosToElem(nelem); + mapSetActiveLocation(eid); + }, + 50); + } + } + + mapAddEventListener("slabels", "change", mapUpdateLabelVisibility); + mapAddEventListener("slocation", "change", mapGotoLocation); + mapAddEventListener("spanning", "change", mapUpdateDragPan); + mapAddEventListener("smap", "mousedown", mapDragStartPan); + document.addEventListener("mousemove", mapDragMoveHandler); + document.addEventListener("mouseup", mapDragUpHandler); + + mapUpdateLabelVisibility(); + mapUpdateDragPan(); +}
--- a/world/Makefile Sun Jan 28 02:32:53 2024 +0200 +++ b/world/Makefile Mon Jan 29 00:25:14 2024 +0200 @@ -30,7 +30,7 @@ $(addsuffix .ansi,$(WORLD_MAPS)) \ $(addsuffix .png,$(WORLD_MAPS)) \ $(addsuffix .htm,$(WORLD_MAPS) $(EXTRA_WORLD_MAPS)) \ - util.js changelog.txt + worldmap.js changelog.txt LOCFILES = $(addsuffix .loc,$(WORLD_MAPS) $(EXTRA_WORLD_MAPS)) special.loc limbo.loc EXTRA_MAP_UPLOAD += $(addsuffix .map,$(WORLD_MAPS) $(EXTRA_WORLD_MAPS))