EZ PbP - A simple javascript-based battle grid for PbP games

[Tortoise262]

I've been working on a website to supplement my PbP games. If anyone is interested in using it, send me a PM or post on this thread.

Here's the link:
http://crossproduct.mygamesonline.org/rpg/

[Lochar]

Oh wow, nice.

[Flickerdart]

Ooh, that looks neat. Certainly more convenient for PbP than IRC-based games, but still neat.

[Tortoise262]

Update: Now you can add/remove/edit monsters as well. If anyone wants to try out EZ PbP, just PM me: Tell me what you want your folder name to be and how many PC's are in your game.

[Glyde]

That's really cool, and in a way, a lot more reliable than things like maptool and gametable because there isn't much peer-to-peer troubleshooting and internet problems. Keep it up, and I'm sure it'll transform into something super nifty.

[Garian]

This is a great idea! Keep up the work!

[Tortoise262]

I guess I didn't mention this before, because I thought it was understood, but you guys can feel free to mess around with everything in the "testgame" campaign. That's what it's there for!

[Dogmantra]

I had a little play with the Testgame campaign, and if I ever run a PbP on these boards, I may have to use this.

[woodenbandman]

Wow, this is a fantastic tool. Bookmarked and saved!

[wadledo]

Very cool.

[Trodon]

that's amazing

[Tortoise262]

If anybody wants to help me out, I could use a bunch more terrain images. 32x32 pixels, in transparent PNG if possible.

[Fri]

Woah! This is amazing! and looks great too!

May I use it for my new campaign? Hoping that the campaign that will last long enough so the map wouldn't be a waste though.

What do I need to do (what information that I need to give to you) to have a campaign in the server? Only campaign name and number of player?

[Douglas]

Looks like a decent start, but it could use some improvement. Some feature suggestions:
1) Point and click movement on the view grid screen.
2) Require DM login for some features.
3) Allow players to enter moves, but don't execute them until the DM approves them.

[Tortoise262]

Woah! This is amazing! and looks great too!

May I use it for my new campaign? Hoping that the campaign that will last long enough so the map wouldn't be a waste though.

What do I need to do (what information that I need to give to you) to have a campaign in the server? Only campaign name and number of player?

Yeah, just PM me with what you want your folder to be called and how many players.

Looks like a decent start, but it could use some improvement. Some feature suggestions:
1) Point and click movement on the view grid screen.
2) Require DM login for some features.
3) Allow players to enter moves, but don't execute them until the DM approves them.

Thanks for the ideas. I can work on that stuff once everything else is functioning.

[chilepepper]

Excellent job so far. I was wondering if it would be possible to drop whole map image as the background and then have the movable figures on top.

[Arcane Copycat]

I approve of this. Bookmarked.

Is there any way you can add in an option to show difference in elevation? you know, for subtle slopes and whatnot

[Doc Roc]

I'll take a look when I'm back from class!

[HamsterOfTheGod]

I've been working on a website to supplement my PbP games. If anyone is interested in using it, send me a PM or post on this thread.

Here's the link:
http://crossproduct.mygamesonline.org/rpg/

Very cool!

[ColdSepp]

Looks promising.

Automated creation of a campaign will be nice, an altogether handy tool.

[Fixer]

So far this has to be one of the best online tools for PbP gaming I have seen.

This should rank right up there with online character sheets. I shall suggest this to my GMs.

[ShneekeyTheLost]

You are my hero simply for using sprite-based graphics of the 16 bit console era (LTTP is the one I specifically recognised).

Look up a program called RPG Maker. It's got tons of graphics suitable for making almost any terrain. The program itself is for making 16 bit style RPG's, but you can simply yoink the graphics pallets.

This is awesome sauce on crack! Tell AfroAkuma about this so he can use it in his Test Your Might games!

One suggestion: Find a way to allow one marker to cover multiple hexes. With players loving to abuse things like Enlarge Person or Expansion, you are going to encounter situations where players which only normally inhabit one square now inhabit multiple squares. The easy end-around until such time as you can make that monumental change is to allow multiple copies of a character covering an area. Thus if a character casts Enlarge Person on Bob, then Bob would have four 'bob' counters next to one another to signify that.

[Darkfire]

Awesome and those sprites sure bring back some memories.

I've been working on something similar for face-to-face sessions with my players but never got particularly far (and went for the easy option of using a static background image and plain counters). That said, I did get drag and drop counter movement working: take a look the libraries available at script.aculo.us and feel free to borrow whatever you like from my source code below (that offer extends to everyone):

Spoiler

Show

<html xmlns="http://wwww.w3.org/1999/xhtml">
	<head>
		<style type="text/css">
		ul.list li {
		  list-style-type: none;
		  padding:0px;
		}

		ul.list {
		  padding:0px;
		  margin: 0px 0 0 0;
		}

		li.green {
		  list-style-image: url(./img/green_bullet.png);
		  background-color: #ECF3E1;
		  border:1px solid #C5DEA1;
		  cursor: move;
		  margin-left:10px;
		}

		li.red {
		  list-style-image: url(./img/red_bullet.png);
		  margin-left:10px;
		  background-color: #EBC1C1;
		  border:1px solid #DE6464;
		  cursor: move;
		}

		li.blank {
		  background-color: #FFFFFF;
		  border:1px solid #FFFFFF;
		  margin-left:10px;
		  cursor: move;
		}

		h3 {
		  padding:0px 0px 0 0;
		  margin:0px;
		}
		</style>
		<script language="javascript" src="http://script.aculo.us/prototype.js" type="text/javascript"></script>
		<script language="javascript" src="http://script.aculo.us/scriptaculous.js" type="text/javascript"></script>
		<script language="javascript" src="http://script.aculo.us/dragdrop.js" type="text/javascript"></script>
		<script language="javascript" src="http://script.aculo.us/controls.js" type="text/javascript"></script>
		<script language="javascript" src="http://script.aculo.us/inc/builder.js" type="text/javascript"></script>
	</head>
	<body>
	<!-- Had to offset the background image by 16+12 x 12 to get counters to align (roughly) with the grid  --> 
		<div id="map" style="float:left;clear:none;height:835px;width:668px;">
		<img title="1-1" src="http://www.wizards.com/dnd/images/rhod_maps/95680.jpg" z-index="-1" style="padding-left:28px;padding-top:12px"></img>
		<div id="toolbox" style="position:absolute;top:0px;left:0px;height:20px;width:100%;">
		<img id="imgentry1" title="Jess" alt="fr" src="http://www.mouseonhouse.com/image/map/CircleBlue.gif" z-index="10"></img>
		<img id="imgentry2" title="Storm" alt="fr" src="http://www.mouseonhouse.com/image/map/CircleBlue.gif" z-index="10"></img>
		<img id="imgentry3" title="Storm's badger" alt="fr" src="http://www.mouseonhouse.com/image/map/CircleBlue.gif" z-index="10"></img>
		<img id="imgentry4" title="Titus" alt="fr" src="http://www.mouseonhouse.com/image/map/CircleBlue.gif" z-index="10"></img>
		<img id="imgentry5" title="Titus' weasel" alt="fr" src="http://www.mouseonhouse.com/image/map/CircleBlue.gif" z-index="10"></img>
		<img id="imgentry6" title="Xan" alt="fr" src="http://www.mouseonhouse.com/image/map/CircleBlue.gif" z-index="10"></img>
		</div>
		</div>
		<div id="initiative" style="height:90%;width:220px;position:fixed;top:0px;right:0px">
		<ul class="list" id="marker" style="height:90%;width:20px;float:right;">
			<li class="blank"><img src="http://www.electromagnetics.biz/Images/ClosedRedLeftArrow.jpg"></li>
   			<li class="blank">&nbsp;</li>
   			<li class="blank">&nbsp;</li>
   			<li class="blank">&nbsp;</li>
   			<li class="blank">&nbsp;</li>
   			<li class="blank">&nbsp;</li>
			<li class="blank">&nbsp;</li>
			<li class="blank">&nbsp;</li>
   			<li class="blank">&nbsp;</li>
   			<li class="blank">&nbsp;</li>
			<li class="blank">&nbsp;</li>
 		</ul>
		<ul class="list" id="ini" style="height:90%;width:200px;float:right;">
			<li class="green" id="entry1" onclick="select('entry1')">Jess (Ini 4)</li>
   			<li class="green" id="entry2" onclick="select('entry2')">Storm (Ini 5)</li>
   			<li class="green" id="entry3" onclick="select('entry3')">Storm's Badger (Ini 5)</li>
			<li class="green" id="entry4" onclick="select('entry4')">Titus (Ini 2)</li>
   			<li class="green" id="entry5" onclick="select('entry5')">Titus' weasel (Ini 2)</li>
   			<li class="green" id="entry6" onclick="select('entry6')">Xan (Ini 7)</li>
 		</ul>
		</div>
		<div id="inf" style="position:fixed;bottom:0px;left:0px;" z-index="-1">
			<form name="info">
				<textarea id="display" rows="3" cols="60"></textarea>
			</form>
		</div>
		<div id="ops" style="position:fixed;bottom:0px;right:0px;" z-index="-1">
			<form id="create">
				Name <input type="text" id="name"></input><br>
				Initiative <input type="text" id="init" value="0"></input><br>
				# <input type="text" id="multi" value="1"></id><br>
				Friendly? <input type="checkbox" id="friend"></input><br>
				<button type="button" onclick="add()">Add</button>
				<button type="button" onclick="edit()">Edit</button>
				<button type="button" onclick="del()">Delete</button>
			</form>
		</div>
 	<script type="text/javascript">
	// <![CDATA[
	Sortable.create("marker",      {dropOnEmpty:true,containment:["marker"],constraint:true});
	Sortable.create("ini",      {dropOnEmpty:true,containment:["ini"],constraint:false});
	for(var i=1; i < 7; i++) {
		registerToken("imgentry"+i);
	}
	var count = 6;
	function add(){
		if (document.getElementById("friend").checked) {
			addFri();
		} else {
			addHos();
		};
	};
	function addFri(){
		var num;
		for (num = parseInt(document.getElementById("multi").value);num>0;num--) {
			var nam = "entry"+ ++count;
			var li = Builder.node('li', {class:'green',id:nam,onclick:"select('"+nam+"')"},  document.getElementById("name").value+" "+num+" (Ini "+document.getElementById("init").value+")");
			$('ini').appendChild(li);
			new Draggable(nam, {revert:true});
			var im = Builder.node('img', {src:'http://www.mouseonhouse.com/image/map/CircleBlue.gif',id:"Simg"+nam,title:document.getElementById("name").value+num,alt:"fr"});
			$('toolbox').appendChild(im);
			registerToken("img"+nam);
		};
	};
	function addHos(){
		var num;
		for (num=parseInt(document.getElementById("multi").value);num>0;num--) {
			var nam = "entry"+ ++count;
			var li = Builder.node('li', {class:'red',id:nam,onclick:"select('"+nam+"')"}, document.getElementById("name").value+" "+num+" (Ini "+document.getElementById("init").value+")");
			$('ini').appendChild(li);
			new Draggable(nam, {revert:true});
			var im = Builder.node('img', {src:'http://www.mouseonhouse.com/image/map/CircleRed.gif',id:"img"+nam,title:document.getElementById("name").value+num,alt:"fr"});
			$('toolbox').appendChild(im);
			registerToken("img"+nam);
		};
	};
	function registerToken(tokid) {
		new Draggable(tokid, {ghosting: 'true',
		snap: [24,24],
		onStart:function(draggable){
			startmove(draggable.element);
		},
		onDrag:function(draggable){
			duringmove(draggable.element);
		},
		onEnd:function(draggable){
			aftermove(draggable.element);
		}});

	}

	var mvId; var oldX; var oldY; var selected;
	var display = document.getElementById('display');
	function startMove(element) {
			mvId = element.id;
			oldX = Math.floor(element.x/24);
			oldY = Math.floor(element.y/24);
		}
		
		function duringmove(element) {
			var x = Math.floor(element.x/24);
			var y = Math.floor(element.y/24);
			var dx = Math.abs(x-oldX)
			var dy = Math.abs(y-oldY);
			display.value = element.title+" (" + oldX + ", " + oldY + ") -> (" + x +", " + y + ") = ("+Math.abs(x-oldX)+" x "+Math.abs(y-oldY)+")";
			display.value= display.value + " ["+ squaresMoved(dx,dy)*5 + "ft]";
		}

		function aftermove(element) {
			oldX = Math.floor(element.x/24);oldY = Math.floor(element.y/24);
		}
		function squaresMoved(a,b) {
			var dist = Math.abs(a-b);
			dist = dist + Math.min(a,b)+Math.floor(Math.min(a,b)/2);
			return dist;
		}
		function select(eltid) {
			selected = document.getElementById(eltid);
			
			document.getElementById("multi").value = "1";
			var label; var init; var friend;
			label = selected.firstChild.nodeValue;
			init = label.slice(label.lastIndexOf(" ")+1,label.length-1);
			label = label.slice(0,label.lastIndexOf("(")-1);
			document.getElementById("name").value = label;
			document.getElementById("init").value = init;
			if (selected.className == "green") {
				friend = true;
			} else {
				friend = false;
			}
			document.getElementById("friend").checked = (friend)?"checked":"";
			display.value = "Selected: " + label + "\r\nFriendly?: " + ((friend)?"Yes":"No") + "\r\nInitiative: " + init;
		}
		function edit() {
			selected.className = (document.getElementById("friend").checked)?"green":"red";
			selected.firstChild.nodeValue = document.getElementById("name").value + " (Ini: " + document.getElementById("init").value+ ")";
		}
		function del() {
			$("img"+selected.id).remove();
			$(selected.id).remove();
			count--;
			display.value = "Nothing selected."
		}
 	// ]]>
 	</script>
	</body>
</html>

I've swapped links to my locally stored files to equivalent one's you all be able to access so just bung it in a file and load it up to take a look. It works and looks fine in Firefox but I don't know if Internet Explorer'll handle the CSS correctly.

[Tortoise262]

Whoa! Style sheets! I'm so unschooled, lol. I should read up on that CSS stuff, since it's the standard nowadays.

[Myrmex]

This is amazing. I hope you have the bandwidth to handle all the use this is going to get. I suggest setting up a PayPal so we can donate to support you. I know I would put what little cash I have to spare to support this endeavor!

[Tortoise262]

This is amazing. I hope you have the bandwidth to handle all the use this is going to get. I suggest setting up a PayPal so we can donate to support you. I know I would put what little cash I have to spare to support this endeavor!

That may not be a bad idea in the future. Right now, I'm using a free host, and the site hasn't caught on enough for me to have any bandwidth issues so far.

[Tortoise262]

Wow! I forgot all about this! I should start working on it again.