How to replicate my map for other levels?

MrTIMarshall · 12-31-2012, 11:39 AM

Hello,

I would like to know how to replicate the map and it's features multiple times for the other zoom levels, the only difference is that there'll be different td styles, getting smaller and smaller.

Link: https://tornhq.com/Events/HallowTown/index-New.html

Best Regards,
Tim

vwphillips · 12-31-2012, 01:51 PM

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
  <title></title>
	<style>
		body { margin:0; padding:0; }
		table { background-color: #ada39d; }

		#Zoomed100 td {height: 29px; min-height: 29px; width: 36px; min-width: 36px; vertical-align: top; border-collapse: separate; border: 1px solid #dfdfdf; }
		#Zoomed80 td {height: 20px; min-height: 20px; width: 20px; min-width: 20px; vertical-align: top; border-collapse: separate; border: 1px solid #dfdfdf; }

		.NoMans1 {background-color:#CCCCCC; }
		.NoMans2 {background-color:#b7cdb7; }
		.Wall {background-color:#8e8e8e; }
		.Forest{background-color:#8eb68e }
		.Grass{background-color:#b7cdb7; }
		.fog{background-color:#dacbda; }
		.fog2{background-color:#d2d2d2; }
		.DeepWater{background-color:#a4cdd9; }
		.ShallowWater, .Sherrif{background-color:#acdada; }
		.Unknown{background-color:#e3cca1; }
		.Cliff{background-color:#bbb099; }
		.Hospital{background-color:#e5faff; }
		.UnknownBuilding{background-color:#cbbcda; }
		.Path{background-color:#dabc8e; }
		.Castle{background-color:#d8cabc; }
		.WitchsHouse, .ChefsHouse{background-color:#daa3a3; }
		.Cave{background-color:#b1b1b1; }
		.GreatHall{background-color:#c7d1ed; }
		.Church{background-color:#d9e3a1; }

		div#popupon {
			position: absolute;
			display: none;
			width: 240px;
			height: 100px;
			border: solid blue 3px;
			background-color: lightableue;
			padding: 10px;
			text-align: center;
		}
	</style>
</head>

<body>
				<div style="height: 900px; width: 2000px;">
					<div class="mapcontent">
						<table id="Zoomed80"></table>
					</div>
				</div>
				<div style="height: 1192px; width: 2396px;">
					<div class="mapcontent">
						<table id="Zoomed100"></table>
					</div>
				</div>

<script type="text/javascript">




var map = [
	"111112222222222222222222222222222222222222222222222222222",
	"111112222222222222222222222222222222222222222222222222222",
	"11111WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW222222222222",
	"11111TTTTTTTGGGGfffffGGGQ?????EFGGGWHHHHHHHHW222222222222",
	"11111TTTTTTGGGGGGfffGGGQQ?????EFFGGWHHHHHHHHW222222222222",
	"11111TTTTTTTGGGGGGfGGGGQq?WWWWWFFfGWHHHHHHHHW222222222222",
	"11111TTTWWWTGGGGGGGGGGQQqqWUUUUFFffWHHHHHHHHWWWW222222222",
	"11111TTTWTWTTGGGGGGGGGQGGGWUUUWFFffWHHHHHHHHHPPW222222222",
	"11111TTTWWWTTWWWWWWWGGQGGGWUUUWFFffWHHHHHHHHWWPW222222222",
	"11111TTTTTTTTWCCCCCWGGQGGGWUUUWFFqqWWWHWWWWWWWPW222222222",
	"11111TTTTTTGGWCCCCCWGGQGGGWWUWWFFqQQQQPQQQQQWWPW222222222",
	"11111TTTTTGGGWCCCCCWGGQGGGGGPGEFFqqGGGPGGGGGWWPW222222222",
	"11111TTTTGGGGWCCCCCWGGQGGGGGPGEFGGGTTGPGGGGfWWPW222222222",
	"11111TTTGGGGGWWWCWWWGGQGGGGGPPPPFFTTTTPGGGffPPPW222222222",
	"11111FFFGGGGGGGGPGGGGGQGGGGGPGEPFGTTTGPGGGffWWWW222222222",
	"11111FFFFFFGGGGGPPPPPPQPPPPPPGEPGTTTTGPGGfffWGGG222222222",
	"11111WWWFFFFGGGGPGGGGGQGPGWWWWWPPPPPTPPGGGGfW222222222222",
	"11111cccWcWFGGGGPGWWWWQGPGWwwwWGGGGTTTGGGGGGW222222222222",
	"11111cccccWFGWWWPGWhhhQGPGWwwwWGGGGGTGGGGGGGW222222222222",
	"11111cccccWFGWGWPGWhhhQGPGWWWWWGGGGGGGGGGGGGW222222222222",
	"11111ccccWFFGWWWPGWhhhQGPGGGGGEGGGGGGGGGGGG?W222222222222",
	"11111cccWFFGGGGGPGWhhhQGPPPGGGEGGGGGGGGGGG??W222222222222",
	"11111WWWFFGGGGGGPGWWhWQGGGPGGGEGGGqGqGGGGG??W222222222222",
	"11111FFFFGGGGGGGPGGGPGQGGGPGGGEGGGqqqqGGG???W222222222222",
	"11111FFFGGGGGGGGPPPPPGQGGGPGGGEGGqqqqWWWWWWWWWWWW22222222",
	"11111FGGGGGGGGGGPGGGGGQGWW+WWGEGGqWWWWBBBBBBBBBBW22222222",
	"11111GGGGGGGGGGGPGGGGGQGW+++WGEGqqWBBBBBBBBBWWWBW22222222",
	"11111GGGGGGGGGGGPGGGGGQGWWWWWGEGGqWBBBWBBBBBWqWBW22222222",
	"11111PPPPPPPPPPPPPGGGGQGGfGfGfEGGGWWWWWWWWWBWqWBW22222222",
	"11111PGGGGGGGGGGGPGGGGQGffffffEGGGGGGGGGGGBBWWWBW22222222",
	"11111PGGGGGGGGGGWWWGGGQfffffffEEGGGGGGWWWWWBBBBBW22222222",
	"11111PGGGGGGGGGGWSWGGGQfffffffEEEGGGGGWBBBBBBBBBW22222222",
	"111111111111111111111111111111111111111111111111111111111",
	"111111111111111111111111111111111111111111111111111111111"
];

var classes = {
"1" : "NoMans1",
"2" : "NoMans2",
"W" : "Wall",
"T" : "Forest", /* think "T"rees */
"G" : "Grass",
"f" : "Fog",
"F" : "Fog2",
"Q" : "DeepWater", /* think a"Q"ua */
"q" : "ShallowWater",
"S" : "Sherrif",
"?" : "Unknown",
"E" : "Cliff", /* think "E"scarpment */
"H" : "Hospital",
"U" : "UnknownBuilding",
"P" : "Path",
"C" : "Castle",
"w" : "WitchsHouse",
"B" : "ChefsHouse", /* think "B"aker */
"c" : "Cave",
"h" : "GreatHall",
"+" : "Church"
};

function Map(id,map,cls){
// get references to important elements:
 var table = document.getElementById(id);
 // set up all the cells:
 for (var r = 0; r < map.length; ++r) {
  var row = map[r];
  var tr = table.insertRow(-1);
  if (row){
   for (var c = 0; c < row.length; ++c) {
	var cell = tr.insertCell(-1);
	cell.id = (map.length - r - 2) + ":" + (c+1-5);
	cell.className = cls[row.charAt(c)];
   }
  }
 }
}

Map('Zoomed80',map,classes)
Map('Zoomed100',map,classes)

</script>

</body>

</html>

MrTIMarshall · 12-31-2012, 09:11 PM

Thank you for your help vwphillips.

Edited: https://tornhq.com/Events/HallowTown/Multiple.html
Non-edited: https://tornhq.com/Events/HallowTown/index-New.html

Although what you have done does add a new zoom level of the map, the double click feature no longer works.

Also, to add another layer do I simply make another TD ID, lets say it's called zoomed60 and add it to the Javascript like so?

Code:

Map('Zoomed60',map,classes)

Best Regards,
Tim

Old Pedant · 12-31-2012, 09:36 PM

Ummm...I don't think this is the right approach.

I may be way off base, but I *THINK* the answer is much much easier.

Demonstrating with the code I posted before. You can see how to adapt it to your new version. Changes in red, as usual.

Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style>
body{margin:0; padding:0; overflow:scroll; }
table {
	width:100%;
	background-color: #ada39d;
}
.zoom100 td {
	height: 29px;
	min-height: 29px;
	width: 36px;
	min-width: 36px;
	vertical-align: top;
	border-collapse: separate;
	border: 1px solid #dfdfdf;
}
.zoom75 td {
       height: 22px; 
        min-height: 22px; 
        width: 27px; 
        min-width: 27px;
	vertical-align: top;
	border-collapse: separate;
	border: 1px solid #dfdfdf;
}
.zoom50 td {
        height: 15px; 
        min-height: 15px; 
        width: 18px; 
        min-width: 18px;
	vertical-align: top;
	border-collapse: separate;
	border: 1px solid #dfdfdf;
}
.NoMans1 {background-color:#CCCCCC; }
.NoMans2 {background-color:#b7cdb7; }
.Wall {background-color:#8e8e8e; }
.Forest{background-color:#8eb68e }
.Grass{background-color:#b7cdb7; }
.fog{background-color:#dacbda; }
.fog2{background-color:#d2d2d2; }
.DeepWater{background-color:#a4cdd9; }
.ShallowWater, .Sherrif{background-color:#acdada; }
.Unknown{background-color:#e3cca1; }
.Cliff{background-color:#bbb099; }
.Hospital{background-color:#e5faff; }
.UnknownBuilding{background-color:#cbbcda; }
.Path{background-color:#dabc8e; }
.Castle{background-color:#d8cabc; }
.WitchsHouse, .ChefsHouse{background-color:#daa3a3; }
.Cave{background-color:#b1b1b1; }
.GreatHall{background-color:#c7d1ed; }
.Church{background-color:#d9e3a1; }

div#popon {
    position: absolute;
    display: none;
    width: 240px;
    height: 100px;
    border: solid blue 3px;
    background-color: lightblue;
    padding: 10px;
    text-align: center;
}

</style>
</head>

<body>
<div>
<form id="sizechange">
    <label><input type="radio" name="zoom" value="zoom100" checked="checked" /> 100% </label>
    <label><input type="radio" name="zoom" value="zoom75"/> 75% </label>
    <label><input type="radio" name="zoom" value="zoom50"/> 50% </label>
</form>
<br/>
<table id="mainMap" class="zoom100">
</table>
</div>
<div id="popon">
    You just clicked on cell <span id="whichClicked"></span>
    <br/>
    The cell type is <span id="typeClicked"></span>
    <br/>
    <i>(click to close)</i>
</div>
<script type="text/javascript">
(
  function() 
  {
      var theMap = [
          "111112222222222222222222222222222222222222222222222222222",
          "111112222222222222222222222222222222222222222222222222222",
          "11111WWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWWW222222222222",
          "11111TTTTTTTGGGGfffffGGGQ?????EFGGGWHHHHHHHHW222222222222",
          "11111TTTTTTGGGGGGfffGGGQQ?????EFFGGWHHHHHHHHW222222222222",
          "11111TTTTTTTGGGGGGfGGGGQq?WWWWWFFfGWHHHHHHHHW222222222222",
          "11111TTTWWWTGGGGGGGGGGQQqqWUUUUFFffWHHHHHHHHWWWW222222222",
          "11111TTTWTWTTGGGGGGGGGQGGGWUUUWFFffWHHHHHHHHHPPW222222222",
          "11111TTTWWWTTWWWWWWWGGQGGGWUUUWFFffWHHHHHHHHWWPW222222222",
          "11111TTTTTTTTWCCCCCWGGQGGGWUUUWFFqqWWWHWWWWWWWPW222222222",
          "11111TTTTTTGGWCCCCCWGGQGGGWWUWWFFqQQQQPQQQQQWWPW222222222",
          "11111TTTTTGGGWCCCCCWGGQGGGGGPGEFFqqGGGPGGGGGWWPW222222222",
          "11111TTTTGGGGWCCCCCWGGQGGGGGPGEFGGGTTGPGGGGfWWPW222222222",
          "11111TTTGGGGGWWWCWWWGGQGGGGGPPPPFFTTTTPGGGffPPPW222222222",
          "11111FFFGGGGGGGGPGGGGGQGGGGGPGEPFGTTTGPGGGffWWWW222222222",
          "11111FFFFFFGGGGGPPPPPPQPPPPPPGEPGTTTTGPGGfffWGGG222222222",
          "11111WWWFFFFGGGGPGGGGGQGPGWWWWWPPPPPTPPGGGGfW222222222222",
          "11111cccWcWFGGGGPGWWWWQGPGWwwwWGGGGTTTGGGGGGW222222222222",
          "11111cccccWFGWWWPGWhhhQGPGWwwwWGGGGGTGGGGGGGW222222222222",
          "11111cccccWFGWGWPGWhhhQGPGWWWWWGGGGGGGGGGGGGW222222222222",
          "11111ccccWFFGWWWPGWhhhQGPGGGGGEGGGGGGGGGGGG?W222222222222",
          "11111cccWFFGGGGGPGWhhhQGPPPGGGEGGGGGGGGGGG??W222222222222",
          "11111WWWFFGGGGGGPGWWhWQGGGPGGGEGGGqGqGGGGG??W222222222222",
          "11111FFFFGGGGGGGPGGGPGQGGGPGGGEGGGqqqqGGG???W222222222222",
          "11111FFFGGGGGGGGPPPPPGQGGGPGGGEGGqqqqWWWWWWWWWWWW22222222",
          "11111FGGGGGGGGGGPGGGGGQGWW+WWGEGGqWWWWBBBBBBBBBBW22222222",
          "11111GGGGGGGGGGGPGGGGGQGW+++WGEGqqWBBBBBBBBBWWWBW22222222",
          "11111GGGGGGGGGGGPGGGGGQGWWWWWGEGGqWBBBWBBBBBWqWBW22222222",
          "11111PPPPPPPPPPPPPGGGGQGGfGfGfEGGGWWWWWWWWWBWqWBW22222222",
          "11111PGGGGGGGGGGGPGGGGQGffffffEGGGGGGGGGGGBBWWWBW22222222",
          "11111PGGGGGGGGGGWWWGGGQfffffffEEGGGGGGWWWWWBBBBBW22222222",
          "11111PGGGGGGGGGGWSWGGGQfffffffEEEGGGGGWBBBBBBBBBW22222222",
          "111111111111111111111111111111111111111111111111111111111",
          "111111111111111111111111111111111111111111111111111111111"
      ]
      var classes = {
             "1" : "NoMans1",
             "2" : "NoMans2",
             "W" : "Wall", 
             "T" : "Forest", /* think "T"rees */
             "G" : "Grass", 
             "f" : "Fog", 
             "F" : "Fog2", 
             "Q" : "DeepWater", /* think a"Q"ua */
             "q" : "ShallowWater", 
             "S" : "Sherrif", 
             "?" : "Unknown", 
             "E" : "Cliff", /* think "E"scarpment */ 
             "H" : "Hospital", 
             "U" : "UnknownBuilding",
             "P" : "Path", 
             "C" : "Castle", 
             "w" : "WitchsHouse", 
             "B" : "ChefsHouse", /* think "B"aker */
             "c" : "Cave", 
             "h" : "GreatHall", 
             "+" : "Church"
}
      // get references to important elements:
      var tbl = document.getElementById("mainMap");
      var pop = document.getElementById("popon");
      var clk = document.getElementById("whichClicked");
      var typ = document.getElementById("typeClicked");

      var form = document.getElementById("sizechange");
      for ( var z = 0; z <= 2; ++z )
      {
          form.zoom[z].onclick = function( ) { tbl.className = this.value; }
      }
 
      // handle click-to-close
      pop.onclick = function( ) { this.style.display = "none"; }

      // set up all the cells:
      for ( var r = 0; r < theMap.length; ++r )
      {
          var row = theMap[r];
          var tr = tbl.insertRow(-1);
          for ( var c = 0; c < row.length; ++c )
          {
              var cell = tr.insertCell(-1);
              cell.id = "C" + (theMap.length - r) + "_" + (c+1);
              cell.className = classes[row.charAt(c)];
              cell.onclick = cellClick;
          }
      }

      // and then handle any click:
      function cellClick( )
      {
          clk.innerHTML = this.id;
          typ.innerHTML = this.className;
          // where is this cell?
          var x = -115; // adjust these to position the popon
          var y = -32;  // relative to the top left of cell
          var node = this;
          while ( node != null )
          {
              x += node.offsetLeft;
              y += node.offsetTop;
              node = node.offsetParent;
          }
          // you could code in here to ensure that the entire popon
          // is visibile (no off the bounds of the display)
          // Just for starters, you should do:
          if ( x < 0 ) x = 0;
          if ( y < 0 ) y = 0;
          // but you could also check to make sure 
          // its not off bottom or right side

          // then position it:
          pop.style.top = y + "px";
          pop.style.left = x + "px";
          pop.style.display = "block";
      }
  }   
)();
</script>
</body>
</html>

Old Pedant · 12-31-2012, 09:37 PM

Oh...and yes, it works like a charm.

And because there is ONLY ONE "layer", there will be no impact on any of the JS code. In fact, JS will not be aware of the change, except insofar as you might be looking at the width and height of the map as I showed you.

Old Pedant · 12-31-2012, 09:39 PM

And by the way, "Sheriff" is the correct spelling. Double-F, not double-R.

MrTIMarshall · 12-31-2012, 09:56 PM

This map currently allows for mouse-wheel and the usage of the buttons under the "Move around the Map" tab.

It appears what you have done changed it for a radio button?

Best Regards,
Tim

Old Pedant · 12-31-2012, 10:03 PM

READ WHAT I WROTE:

Quote:

Demonstrating with the code I posted before.
You can see how to adapt it to your new version.

The actual code used to change the zoom level isn't the important part: The "trick" is to simply CHANGE THE CLASSNAME of the <table> and, if you have the appropriate classes in the <style>s, as I showed there with zoom100, zoom75, zoom50 (where the style of all the <td>s in the <table> thus depend on the table's classname), *PRESTO* you have zoomed.

MrTIMarshall · 12-31-2012, 10:34 PM

Okay, thank you Old Pedant.

As I 'm still learning, I do not yet know exactly how to implement this...

I gather I have to do something here;

Code:

			$(".map-control a").click(function() {//control panel
				var viewport = $("#viewport2");
				//this.className is same as method to be called
				if (this.className == "zoom" || this.className == "back") {
					viewport.mapbox(this.className, 2);//step twice
				} else {
					viewport.mapbox(this.className);
				}
				return false;
			});

And again elsewhere for the mouse-wheel?

Sorry for my lack of knowledge and I am so grateful for your help!

Old Pedant · 12-31-2012, 10:44 PM

Sorry, I don't use jQuery.

I don't see how that code is relevant to changing the zoom level, at all.

It *LOOKS* like that code indeed is loading a *NEW* map into the "viewport".

WHY??? You only need one map. You just need to change the className of the map.

And why is a click on an <a> element used to change the zoom?? EDIT: Never mind. I see. Your + and - "buttons" are actually <a> elements. Why??? Why aren't they simply <img> elements? You can have onclick on an <img> element and then you don't have to cancel the effect of the onclick so that the <a> doesn't do the wrong thing.

Old Pedant · 12-31-2012, 10:59 PM

OH UGLY UGLY UGLY!

NOW I see what you have done!

Code:

			<div id="viewport2">
				<div style="width:445px; height:224px;">
					<!--top level map content goes here-->
				</div>
				<div style="height: 336px; width: 667px;">
					<div class="mapcontent">
							<!--map content goes here-->
					</div>
				</div>
				<div style="height: 488px; width: 890px;">
					<div class="mapcontent">
							<!--map content goes here-->
					</div>
				</div>
etc.

So each of those differently sized DIVs will have the *SAME* map, but at different zoom levels???

THIS IS A KILLER!

I think you have made a HUGE mistake!

OF COURSE everything you do when you change zoom levels is NOW WIPED OUT. Just because two cells have the same ID in different maps does *NOT AT ALL MAKE THEM THE SAME CELL!* And, just incindentally, it's illegal to have two or more elements with the same ID in the first place!

Look, instead of doing it this way, just have the *ONE* <div>.

Code:

		<div class="mapwrapper">
			<div id="viewport2">
				<div id="mapHolder" style="height: 1192px; width: 2396px;">
					<div class="mapcontent">
						<table id="mainMap" class="zoom100"></table>
					</div>
				</div>
			</div>
		</div>

And now you use my concept of just changing the className of document.getElementById("mainMap").

And then you *AUTOMATICALLY* also change the height and width of document.getElementById("mapHolder") [I just added that id] to match the size of the re-sized (zoomed) <table>! And you do that by getting the new size of the <table> all in JS code!

Example:

Code:

       tbl.className = "zoom" + zoomLevel; // where zoomLevel is 100,75, or 50...or whatever you choose
       var holder = document.getElementById("mapHolder");
       holder.style.height = tbl.offsetHeight;
       holder.style.width = tbl.offsetWidth;

MrTIMarshall · 12-31-2012, 11:22 PM

I'm using the JQuery Mapbox and this was how it was done.

https://tornhq.com/js/JQuery.mapbox.js

Old Pedant · 12-31-2012, 11:23 PM

By the by, I just tested that in my own version of your gameMap (the code I posted in post #4, above) and it works like a charm.

Old Pedant · 12-31-2012, 11:25 PM

Quote:

Originally Posted by MrTIMarshall

I'm using the JQuery Mapbox and this was how it was done.

https://tornhq.com/js/JQuery.mapbox.js

<shrug>I can't help it if you are using something that is less than ideal for your situation.

But I *think* that if you used what I suggested, it would probably work even with that code. Just be sure to *NOT* use their zoom code.

By the by, I think I could replicate all the functionality of that code that you are actually using in about half the number of lines. Just by avoiding jQuery. (Well, there's very little in there that actually depend on jQuery, for that matter.)

MrTIMarshall · 12-31-2012, 11:26 PM

I'll implement what you have said in a moment, I am waiting on a take-away order and I might loose track is I start now.

Thank you again

Oh and if I don't message again within 35 minutes...

...HAPPY NEW YEAR! I hope this year is better than the last!