Hi everyone,
because I've recently decided to try making a webgame, I've begun scripting an editor for it. However, I'm quite stuck on the little project and would like some help.

The script works as follows, a directory of tiles is being read via PHP (however not alphabetically). These tiles are being put in a div element and are clickable. If you click a tile, that tile is being used to paint the map. This way you can create a world very easily, but...

It requires me to click on every x,y coord to paste the tile there, I can't figure out how to drag tiles over multiple x,y coordinates.
Also I don't know how to start on the SQL query that would upload the created map into the database, I could use an ajax based approach here, but I believe this would be too slow for instance when clicking too fast you would have to wait.
The structure of the table with the map is as follows:

CREATE TABLE IF NOT EXISTS `map` (
  `id` int(200) NOT NULL AUTO_INCREMENT,
  `y` int(20) NOT NULL,
  `x` int(20) NOT NULL,
  `background` varchar(50) NOT NULL,
  `layer1` varchar(50) NOT NULL,
  `layer2` varchar(50) NOT NULL,
  `layer3` varchar(50) NOT NULL,
  `foreground` varchar(50) NOT NULL,
  `event` varchar(60) NOT NULL,
  PRIMARY KEY (`id`)
) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;

[table explanation]
an x and y to identify each coordinate
a background and foreground layer, together with three more layers for content
an event layer for e.g. a quest, ...

I'm worried I'm doing much more work than necessary, it feels like it could be done easier but I'm not getting there. So, I'm interested in what you guys think about it. Thanks for helping out.
This is the script:

<?php
	include_once("connect.php");
	
	if(isset($_POST['update'])) {
		$query = $_POST['SQL'];
		mysql_query($query);
	}
	if(isset($_POST['insert'])) {
		$query = "INSERT INTO map(x, y) VALUES(".$_POST['SQL'].")";
		mysql_query($query);
	}
	
	if(($_GET['min_y'] != "") && ($_GET['max_y'] != "") && ($_GET['min_x'] != "") && ($_GET['max_x'] != "") && ($_GET['maxlayers'] != "")) {
		$min_y = htmlentities($_GET['min_y'], ENT_QUOTES);
		$max_y = htmlentities($_GET['max_y'], ENT_QUOTES);
		$min_x = htmlentities($_GET['min_x'], ENT_QUOTES);
		$max_x = htmlentities($_GET['max_x'], ENT_QUOTES);
		$maxLayers = htmlentities($_GET['maxlayers'], ENT_QUOTES);
	}
	else {
		$min_y = 0;
		$max_y = 9;
		$min_x = 0;
		$max_x = 9;
		$maxLayers = 3;
	}
	
	function ReadFolderDirectory($dir = "tilesets/") 
    { 
        $listDir = array(); 
        if($handler = opendir($dir)) { 
            while (($sub = readdir($handler)) !== FALSE) { 
                if ($sub != "." && $sub != ".." && $sub != "Thumb.db") { 
                    if(is_file($dir."/".$sub)) { 
                        $listDir[] = $sub; 
                    }elseif(is_dir($dir."/".$sub)){ 
                        $listDir[$sub] = ReadFolderDirectory($dir."/".$sub); 
                    } 
                } 
            }    
            closedir($handler); 
        }
        return $listDir;    
    }
    
    if(isset($_POST['set'])) {
    	$min_y = htmlentities($_POST['min_y'], ENT_QUOTES);
    	$max_y = htmlentities($_POST['max_y'], ENT_QUOTES);
    	$min_x = htmlentities($_POST['min_x'], ENT_QUOTES);
    	$max_x = htmlentities($_POST['max_x'], ENT_QUOTES);
    	$maxlayers = htmlentities($_POST['maxlayers'], ENT_QUOTES);
    	$tileset = htmlentities($_POST['currTileSet'], ENT_QUOTES);
    	
    	echo "
    		<script type=\"text/javascript\">
    			document.location = '?min_y=".$min_y."&max_y=".$max_y."&min_x=".$min_x."&max_x=".$max_x."&maxlayers=".$maxlayers."&tileset=".$tileset."';
    		</script>";
    }
?>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
	<head>
		<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
		<title>Dreathii /:: worldEditor</title>
		<style type="text/css">
			html, body {
				margin: 0px;
				height: 100%;
				width: 100%;
				font-family: Arial, Verdana;
				font-size: 8px;
			}
			body {
				background-color: #eee;
			}			
			div.settings {
				padding: 3px;
				border-bottom: 1px solid #000;
			}
			div.tileSet {
				position: absolute;
				width: 256px;
				height: 100%;
				border-right: 1px solid #000;
				overflow: auto;
				visibility: hidden;
			}
			div.worldMap {
				position: absolute;
				margin: 0px 0px 0px 257px;
				width: <?php echo ($max_x-$min_x)*32; ?>px;
				height: <?php echo ($max_y-$min_y)*32; ?>px;
				background-color: #fff;
			}
			div.mapLayer {
				position: absolute;
				margin: 0px;
				width: <?php echo ($max_x-$min_x)*32; ?>px;
				height: <?php echo ($max_y-$min_y)*32; ?>px;
			}
			div.layerSet {
				position: absolute;
				margin: <?php echo ($max_y-$min_y)*32; ?>px 0px 0px 266px;
			}
			div.tile {
				width: 32px;
				height: 32px;
				float: left;
			}
		</style>
		<script type="text/javascript">
			isFirst = true;
			var usedTile = "";
			
			function setUsedTile(tile) {
				usedTile = tile;
			}
			
			function useTile(id) {
				if(usedTile != "") {
					element = document.getElementById(id);
					element.innerHTML = "<img src=\"tilesets/forest/"+usedTile+"\" alt=\""+usedTile+"\">";
					
					if(isFirst == false) {
						document.getElementById("SQL").value += ", ";
					}
					else {
						isFirst = false;
					}
					document.getElementById("SQL").value += id+"='"+usedTile+"'";
				}
			}
			
			function changeTileSet() {
				var element = document.getElementById('currTileSet');
				var i = element.selectedIndex;
				var l = element.options.length;
				
				for(x = 1; x < l; x++) {
					var tileSet = element.options[x].value;
					document.getElementById(tileSet).style.visibility = "hidden";
				}
				if(i > 0) {
					var tileSet = element.options[i].value;
					document.getElementById(tileSet).style.visibility = "visible";
				}
			}
			
			function getTileSet(gtileset) {
				var element = document.getElementById('currTileSet');
				var l = element.options.length;
				
				for(x = 1; x < l; x++) {
					if(element.options[x].value == gtileset) {
						element.selectedIndex = x;
					}
					var tileSet = element.options[x].value;
					document.getElementById(tileSet).style.visibility = "hidden";
				}
				if(document.getElementById(gtileset) != null) {
					document.getElementById(gtileset).style.visibility = "visible";
				}
			}
			
			function gLayer(theLayer) {
				if(theLayer != "ALL") {
					for(i = 1; i < <?php echo $maxLayers; ?>+1; i++) {
						document.getElementById('layer'+i).style.visibility = "hidden";
					}
					for(i = 1; i < theLayer+1; i++) {
						document.getElementById('layer'+i).style.visibility = "visible";
					}
				}
				else {
					for(i = 1; i < <?php echo $maxLayers; ?>+1; i++) {
						document.getElementById('layer'+i).style.visibility = "visible";
					}
				}
				document.getElementById('currLayer').innerHTML = "[Current Layer: "+theLayer+"]";
			}
		</script>
	</head>
	
	<body>
		<div class="settings">
			<form method="post" action="">
				TileSet: <select id="currTileSet" name="currTileSet" onChange="changeTileSet()">
					<option value="browse">...</option>
					<?php
						if ($handle = opendir("tilesets/")) {
							while (false !== ($file = readdir($handle))) {
								if($file != "." && $file != ".."){
									echo "<option value=\"".$file."\">".$file."</option>";
								}
							}
							
							closedir($handle);
						}
					?>
				</select>
				min_y: <input type="text" name="min_y" size="5" value="<?php echo $min_y; ?>">
				max_y: <input type="text" name="max_y" size="5" value="<?php echo $max_y; ?>">
				min_x: <input type="text" name="min_x" size="5" value="<?php echo $min_x; ?>">
				max_x: <input type="text" name="max_x" size="5" value="<?php echo $max_x; ?>">
				max Layers <input type="text" name="maxlayers" size="5" value="<?php echo $maxLayers; ?>">
				<input type="submit" name="set" value="Set">
				<input type="button" name="reset" value="Reset" onClick="document.location = 'worldEditor.php';">
				<span style="padding: 0px 20px 0px 20px;">
					<?php
						for($i = 1; $i < $maxLayers+1; $i++) {
							//echo "<div onClick=\"javascript:gLayer(".$i.");\">Layer ".$i."</div>";
							echo "<input type=\"button\" name=\"gAllLayers".$i."\" value=\"Layer ".$i."\" onClick=\"javascript:gLayer(".$i.")\">";
						}
					?>
					<input type="button" name="gAllLayers" value="All layers" onClick="javascript:gLayer('ALL')">
					<span id="currLayer">Current Layer: <?php echo $maxLayers; ?></span>
				</span>
			</form>
			<form method="post">
				<input type="hidden" id="SQL" name="SQL" value="UPDATE map SET ">
				<input type="button" name="update" value="Update">
			</form>
		</div>
		<?php
			$dirTileSets = ReadFolderDirectory();
			foreach ($dirTileSets as $tileSetTitle=>$tiles) {
				echo "<div id=\"".$tileSetTitle."\" class=\"tileSet\">";
				foreach ($tiles as $tile) {
					echo "\n<div class=\"tile\" onClick=\"javascript:setUsedTile('".$tile."')\"><img src=\"tilesets/".$tileSetTitle."/".$tile."\" alt=\"".$tile."\"></div>";
				}
				echo "</div>";
			}
		?>
		<div class="worldMap">
			<?php
				for($layer = 1; $layer < $maxLayers+1; $layer++) {
					echo "\n";
					echo "<div id=\"layer".$layer."\" class=\"mapLayer\">";
					for($y = $min_y; $y < $max_y; $y++) {
						for($x = $min_x; $x < $max_x; $x++) {
							echo "\n<div id=\"".$layer."_".$y."_".$x."\" class=\"tile\" onClick=\"javascript:useTile('".$layer."_".$y."_".$x."');\"></div>";
						}
					}
					echo "</div>";
				}
			?>
		</div>
	</body>
</html>
<?php
	if($_GET['tileset'] != "") {
		$tileset = htmlentities($_GET['tileset'], ENT_QUOTES);
		echo "
    		<script type=\"text/javascript\">
    			getTileSet('".$tileset."');
    		</script>";
	}
?>

Looks like you read trough or just scrolled out of boringness (if that's a word). Either way, thanks for viewing, here is a screen of the script currently in action:
http://img530.imageshack.us/my.php?image=editor.png

So pretty much you are wanting a tree like the one you have in pieces, to be expandable so it won't have to be in pieces?

If so, I have a basic idea on how I would do it. I would like to know if I understood your question right before I type all of it.

So pretty much you are wanting a tree like the one you have in pieces, to be expandable so it won't have to be in pieces?

If so, I have a basic idea on how I would do it. I would like to know if I understood your question right before I type all of it.

Well no not really, sorry. Eventually it's meant as a map for players to walk around on it, it has layers just to customize it.
I'm just wondering if I'm handling this correctly or if there's a more efficient approach to it. Is this explanation clear? Don't hesitate to ask a question, thanks for reading :)

Well no not really, sorry. Eventually it's meant as a map for players to walk around on it, it has layers just to customize it.
I'm just wondering if I'm handling this correctly or if there's a more efficient approach to it. Is this explanation clear? Don't hesitate to ask a question, thanks for reading :)

Ok, I must of misread then. But that solution I was thinking of would help as well.

Are you just wanting to be able to drag a piece to cover multiple pieces of the map? If so, this will require some fancy javascript. I could help write it, but it won't be the best because frankly I hate javascript. I do know the basics however.

Can you pm me the code so I can try to help you out?

This article has been dead for over six months. Start a new discussion instead.