Login   Register  
PHP Classes
elePHPant
Icontem

File: area_edit.php

Recommend this page to a friend!
Stumble It! Stumble It! Bookmark in del.icio.us Bookmark in del.icio.us
  Classes of JImmy Bo  >  PHP ROM MUD Area Loader  >  area_edit.php  >  Download  
File: area_edit.php
Role: Example script
Content type: text/plain
Description: an example area editor using the weller mud area format directory structure.
Class: PHP ROM MUD Area Loader
Load ROM MUD area map files into arrays
Author: By
Last change: fixed east west animation (had it reversed)
Date: 11 months ago
Size: 24,148 bytes
 

Contents

Class file image Download
<?php
	ob_start();
	session_start();
	
	// this file will also input and output the weller mud area format
	// this file will draw the different views for the area_edit class;

	// usage: Just RUN THIS FILE after generating a mud directory with class.load.rom.area.php
	// set the constants defined after these comments to set the directory to find the mud 
	// area directory.
	
	// still a WIP and I will keep it updated as I go.
/*	
		Related:
		PHP Class :: MUDs :: Multi User Dungeons :: Multi User Dimensions :: MMORPG :: Internet Games :: RPG :: Role Playing Game 
		Simulation :: Game Development :: World :: Universe
		
		find this and other classes by this author at:
		http://www.phpclasses.org/browse/author/144301.html
*/
	
	// basically when an area writes it will save them to a [changes folder] so that the original area
	// remains untouched.
	
	// when area is included you can choose the changes you want to implement and include them from the changes folder.
	
	define('CHANGES_FOLDER', 'ae_changes/');
	define('MAIN_AREA_FOLDER', 'test_world/');
	
	
	class area_edit_display
	{
		public $area_list;
		public $cur_area;
		public $area;
		
		function area_edit_display()
		{
		}
		
		function drop_down($which, $addclasses='', $thelabel='')
		{
			switch($which) // kinda like sammich
			{
				case 'area_list':
				
						$area_list = $this->get_list('area_list');

						echo "<select class='dropdown ".$addclasses."'><option>$thelabel</option>";
						foreach($area_list as $area)
							echo "<option>".$area."</option>";
						echo "<select>";
						
					break;
			}
		} // end drop_down //
		
		function get_list($which)
		{
			switch($which)
			{
				case 'area_list':
				
					if(!isset($this->area_list))
						if(file_exists(MAIN_AREA_FOLDER."_list.php"))
						{
							include_once(MAIN_AREA_FOLDER."_list.php");
							$this->area_list = $areas_list;
						}
					
					return $this->area_list;
					
				break; // area_list
			}
		} // end get_list
		
		
		function load_area($which)
		{
			$which = str_replace('/', '', $which);
			$which = str_replace('\\', '', $which);
			
			$area_dir = MAIN_AREA_FOLDER.$which."/";
			
			if(is_dir($area_dir))
				if(file_exists($area_dir."_include.php"))
				{
					include_once($area_dir."_include.php");
					if(!empty($area))
					{
						$this->area 	= $area;
						$this->cur_area	= $which;
						
						return true;
					}
				}
		} // end load_area
		
		function get_rooms()
		{
			if(!empty($this->area[$this->cur_area]["rooms"]))
				return $this->area[$this->cur_area]["rooms"];
		} // end get_rooms
		
	} // end class area_edit_display;
	
	
	
	
	
	class render
	{
		function render()
		{
		} // END _CONSTRUCTOR_
		
		function draw_rooms($room_data)
		{
			
			if(!empty($room_data))
			{
				$tstr = '';
				foreach($room_data as $room)
				{
					// PUT ROOM TEMPLATE HERE //
					$tstr .= '<div class="room '.$room['vnum'].'">';
					$tstr .= '	<div class="vnum">'.$room['vnum'].'</div>'."\r\n";
					$tstr .= '	<div class="name">'.$room['name'].'</div>'."\r\n";
					$tstr .= '	<div class="desc">'.$room['desc'].'</div>'."\r\n";
					
					
					$tstr .= '	<div class="exits"><div class="label">exits:</div>'."\r\n";
					if(isset($room['exits']) && is_array($room['exits']))
						foreach($room['exits'] as $direction => $exit)
						{
							$tstr .= "<div class='exit $direction' dir='".$direction."' to='".$exit['room']."' title='".htmlentities($exit['desc'])."'>".$direction."</div>\r\n";
						}
					$tstr .= "</div>\r\n";
					
					
					
					$tstr .= '</div>';
				}
				$tstr .= '';
				
				return $tstr;
			}
		} // end render->draw_rooms
		
		function draw_exits($room_data)
		{
			
			if(!empty($room_data))
			{
				$tstr = '';
				foreach($room_data as $room)
				{
					// PUT TEMPLATE HERE //
					$tstr .= "<div class='exits ".$room['vnum']." '>\r\n";
					
					if(isset($room['exits']) && is_array($room['exits']))
						foreach($room['exits'] as $direction => $exit)
						{
							$tstr .=  "<div class='exit $direction' to='".$exit['room']."' title='".htmlentities($exit['desc'])."'>".$direction."</div>\r\n";							
						
						}
					
					$tstr .= "</div>";
				}
				$tstr .= '';
				
				return $tstr;
			}
		} // end render->draw_exits
		
		
		function draw_exits_arr($room_data)
		{
			$tarr = '';
			
			if(!empty($room_data))
			{
				foreach($room_data as $room)
				{
					if(isset($room['exits']) && is_array($room['exits']))
						foreach($room['exits'] as $direction => $exit)
						{
							$tarr[$room['vnum']][$direction] = array(
								/* "direction" => $direction, */
								"to"		=> $exit['room'],
								"desc"		=> $exit['desc']
								);
						}
				}
				
				return $tarr;
			}
		} // end render->draw_exits_arr

				
	} // end class render
	
	
	
	
	
	
	$display = new area_edit_display();
	$render = new render();
	
	
	// COMMAND PROCESSOR - DOS 4 LIFE! //
	if(!empty($_GET['cmd']))
		switch($_GET['cmd'])
		{
			case 'select_area':
				if($display->load_area($_POST['area']))
				{
					$rooms = $display->get_rooms();
					
					$area['command'][] = 'redraw_rooms'; // add more commands when they become available (mobs, objects, etc)
					$area['command'][] = 'reset_current_room'; // add more commands when they become available (mobs, objects, etc)
					$area['first_room'] = current($rooms);
					$area['first_room'] = $area['first_room']['vnum'];
					$area['rooms_html'] = $render->draw_rooms($rooms);
					// $area['exits_html'] = $render->draw_exits($rooms); // don't need. we'll just use json
					$area['exits_json'] = $render->draw_exits_arr($rooms);
					
					die(json_encode($area));
				}
				break;
		}
	
	# if anything comes through as a command let's have it kill ze output of ze further data
	if(!empty($_GET['cmd']))
		die();



	// $debug_str = print_r($display->get_list('area_list'));
?>

<!doctype html>
<html>
	<head>
		<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
	</head>

	<body>
		<div class='exit_data' style='position:absolute;visibility:hidden;'></div>
	
		<div class='rooms'></div>
		
		<div class='debug'>
			<pre>
				<?php if(!empty($debug_str)) echo $debug_str; ?>
			</pre>
		</div>
	



		<div class='navigate'>
			<div class='n'></div>
			<div class='e'></div>
			<div class='s'></div>
			<div class='w'></div>

			<div class='u'></div>
			<div class='d'></div>
		</div>


		<div class='menubar'>
			<div class='menu-item'><?php $display->drop_down('area_list','myAreaList','[ areas ]'); ?></div>
		</div>
		
		
		
		
		
		<style>
			body, html {
				position:relative;
				margin:0;
				padding:0;
			}
			
			.menubar {
				position:fixed;
				width:100%;
				bottom:0px;
				background-color:#000;
				padding:5px;
			}
			
			.menu-bar .menu-item {
				display:inline;
			}
			
			.menubar .dropdown {
				font-family:verdana;
				font-weight:bold;
				text-shadow: 0px 1px 5px #444;
				

					background: rgb(246,230,180); /* Old browsers */
					background: -moz-linear-gradient(top,  rgba(246,230,180,1) 0%, rgba(237,144,23,1) 100%); /* FF3.6+ */
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,230,180,1)), color-stop(100%,rgba(237,144,23,1))); /* Chrome,Safari4+ */
					background: -webkit-linear-gradient(top,  rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* Chrome10+,Safari5.1+ */
					background: -o-linear-gradient(top,  rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* Opera 11.10+ */
					background: -ms-linear-gradient(top,  rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* IE10+ */
					background: linear-gradient(to bottom,  rgba(246,230,180,1) 0%,rgba(237,144,23,1) 100%); /* W3C */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6e6b4', endColorstr='#ed9017',GradientType=0 ); /* IE6-9 */

				border:none;
				outline:none;
				
				display: inline-block;

				-webkit-appearance:none;
				-moz-appearance:none;
				appearance:none;

				cursor:pointer;

				padding:2px;
				padding-left:4px;
				padding-top:5px;
				padding-bottom:5px;
			}
			
			.menubar .dropdown:hover {
			
					background: rgb(178,225,255); /* Old browsers */
					background: -moz-linear-gradient(top,  rgba(178,225,255,1) 0%, rgba(102,182,252,1) 100%); /* FF3.6+ */
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(178,225,255,1)), color-stop(100%,rgba(102,182,252,1))); /* Chrome,Safari4+ */
					background: -webkit-linear-gradient(top,  rgba(178,225,255,1) 0%,rgba(102,182,252,1) 100%); /* Chrome10+,Safari5.1+ */
					background: -o-linear-gradient(top,  rgba(178,225,255,1) 0%,rgba(102,182,252,1) 100%); /* Opera 11.10+ */
					background: -ms-linear-gradient(top,  rgba(178,225,255,1) 0%,rgba(102,182,252,1) 100%); /* IE10+ */
					background: linear-gradient(to bottom,  rgba(178,225,255,1) 0%,rgba(102,182,252,1) 100%); /* W3C */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b2e1ff', endColorstr='#66b6fc',GradientType=0 ); /* IE6-9 */


					background: rgb(246,248,249); /* Old browsers */
					background: -moz-linear-gradient(top,  rgba(246,248,249,1) 0%, rgba(229,235,238,1) 50%, rgba(215,222,227,1) 51%, rgba(245,247,249,1) 100%); /* FF3.6+ */
					background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(246,248,249,1)), color-stop(50%,rgba(229,235,238,1)), color-stop(51%,rgba(215,222,227,1)), color-stop(100%,rgba(245,247,249,1))); /* Chrome,Safari4+ */
					background: -webkit-linear-gradient(top,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Chrome10+,Safari5.1+ */
					background: -o-linear-gradient(top,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* Opera 11.10+ */
					background: -ms-linear-gradient(top,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* IE10+ */
					background: linear-gradient(to bottom,  rgba(246,248,249,1) 0%,rgba(229,235,238,1) 50%,rgba(215,222,227,1) 51%,rgba(245,247,249,1) 100%); /* W3C */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f6f8f9', endColorstr='#f5f7f9',GradientType=0 ); /* IE6-9 */

			}
			
			.menubar .myAreaList option {
				background-color:white;
			}
			
			
			
			.rooms .room {
				font-family:arial;
				position:absolute;
				border:1px solid #ccc;
				margin-bottom:4px;
				background-color:#ccc;
				width:600px;
				
				top:0px;
				left:-600px;
				
				-webkit-border-top-left-radius: 0px;
				-webkit-border-top-right-radius: 10px;
				-webkit-border-bottom-right-radius: 0px;
				-webkit-border-bottom-left-radius: 10px;
				
				-moz-border-radius-topleft: 0px;
				-moz-border-radius-topright: 10px;
				-moz-border-radius-bottomright: 0px;
				-moz-border-radius-bottomleft: 10px;
				
				border-top-left-radius: 0px;
				border-top-right-radius: 10px;
				border-bottom-right-radius: 0px;
				border-bottom-left-radius: 10px;
				
				
			}
			
			.rooms .room.edit {
				
				position:fixed;
				background-color:black;
				color:white;
				
				top:50%;
				left:50%;
				margin-left:-300px;
				margin-top:-200px;
				
				-webkit-box-shadow: 3px 3px 27px rgba(50, 50, 50, 0.59);
				-moz-box-shadow:    3px 3px 27px rgba(50, 50, 50, 0.59);
				box-shadow:         3px 3px 27px rgba(50, 50, 50, 0.59);
				
				padding:5px;
				padding-left:10px;
				padding-right:10px;
			}
			
			.rooms .room.edit .vnum {
				font-family:impact;
				font-size:24px;
				font-weight:bold;
				
				color:#777;
			}
			
			.rooms .room.edit .name {
				text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #ff2d95, 0 0 30px #ff2d95, 0 0 40px #ff2d95, 0 0 50px #ff2d95, 0 0 75px #ff2d95;
			}
			
			.room .exits .label {
				display:inline;
				margin-left:10px;
			}
			
			.room .exits .exit {
				display:inline;
				cursor:pointer;
				margin-right:5px;
				margin-left:10px;
			}
			
			.room .exits .exit:hover {
				text-shadow: 0 0 5px #fff, 0 0 10px #fff, 0 0 15px #fff, 0 0 20px #952dff, 0 0 30px #952dff, 0 0 40px #952dff, 0 0 50px #952dff, 0 0 75px #952dff;
				display:inline;
			}
			
			
			.rooms .room.edit .desc {
			
				margin-top:15px;
				margin-bottom:4px;
				
				border:1px solid #555;
				
				-webkit-border-top-left-radius: 5px;
				-webkit-border-top-right-radius: 5px;
				-webkit-border-bottom-right-radius: 5px;
				-webkit-border-bottom-left-radius: 5px;
				
				-moz-border-radius-topleft: 5px;
				-moz-border-radius-topright: 5px;
				-moz-border-radius-bottomright: 5px;
				-moz-border-radius-bottomleft: 5px;
				
				border-top-left-radius: 0px;
				border-top-right-radius: 5px;
				border-bottom-right-radius: 0px;
				border-bottom-left-radius: 5px;
				
				text-indent:25px;
				padding:10px;
				background-color:black;
				font-style:italic;

					background: rgb(48,50,53); /* Old browsers */
					background: -moz-linear-gradient(-45deg,  rgba(48,50,53,1) 0%, rgba(0,0,0,1) 100%); /* FF3.6+ */
					background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,rgba(48,50,53,1)), color-stop(100%,rgba(0,0,0,1))); /* Chrome,Safari4+ */
					background: -webkit-linear-gradient(-45deg,  rgba(48,50,53,1) 0%,rgba(0,0,0,1) 100%); /* Chrome10+,Safari5.1+ */
					background: -o-linear-gradient(-45deg,  rgba(48,50,53,1) 0%,rgba(0,0,0,1) 100%); /* Opera 11.10+ */
					background: -ms-linear-gradient(-45deg,  rgba(48,50,53,1) 0%,rgba(0,0,0,1) 100%); /* IE10+ */
					background: linear-gradient(135deg,  rgba(48,50,53,1) 0%,rgba(0,0,0,1) 100%); /* W3C */
					filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#303235', endColorstr='#000000',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

				letter-spacing:0.1em;
			}

.navigate .n {
	position:fixed;
	width: 0; 
	height: 0; 
	
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-bottom: 25px solid black;
	
	left:50%;
	top:20px;
	margin-left:-15px;
	cursor:pointer;
}

.navigate .s {
	position:fixed;
	width: 0; 
	height: 0; 
	
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 25px solid black;
	
	bottom:60px;
	left:50%;
	margin-left:-15px;
	
	cursor:pointer;
}

.navigate .e {
	position:fixed;
	width: 0; 
	height: 0; 
	
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 25px solid black;
	
	top:50%;
	right:20px;
	margin-top:-35px;
	cursor:pointer;
}

.navigate .w {
	position:fixed;
	width: 0; 
	height: 0; 

	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent; 
	border-right:25px solid black; 

	top:50%;
	left:20px;
	margin-top:-35px;
	cursor:pointer;
}




		</style>
		

		<script>
			// CONSTANTS //
			var CONST_ROOMDIV = $('.rooms');
			var CONST_EXITSDIV = $('.exit_data');
			
			// GLOBALS //
			var global_curRoom = '-1';
			var global_exitData = '';
			
			// BEGIN FUNCTIONS
			// BEGIN FUNCTIONS
			// BEGIN FUNCTIONS
			
			function select_area(whichArea) 
			{
			
				url = 'area_edit.php';
				url += '?&cmd=select_area';
			
				$.ajax({
					type: "POST",
					url: url,
					data: { area: whichArea },
					dataType: "json"
				
				}).done(function( msg ) {
					// console.log(msg);
					jQuery.each(msg.command, function(index, item) {
						// do something with `item` (or `this` is also `item` if you like)
						console.log(item);
						
						switch(item) // item is command
						{
							case 'redraw_rooms':
									CONST_ROOMDIV.html(msg.rooms_html);
									CONST_EXITSDIV.html(msg.rooms_html);
									
									global_exitData = msg.exits_json;
								break;
							
							case 'reset_current_room':
									var vnum = msg.first_room;
									
									console.log('attempting to set current room: '+vnum);
									console.log($('.' + vnum));
									$('.' + vnum).addClass('edit');
									
									console.log('setting exits...');
									console.log(msg);
									
									global_curRoom = vnum;
									set_exits();
								break;
							
						}
					});					
				}); /* END - ajax to handle area select */
				
			} // end function select_area
			
			
			
			
			
			function set_exits()	// sets exit buttons to current room
			{

				var exits = global_exitData[global_curRoom];

				$(function() {
				  // Handler for .ready() called.
					// first clear old data
					$( ".navigate .n" ).attr('toRoom','');
					$( ".navigate .e" ).attr('toRoom','');
					$( ".navigate .s" ).attr('toRoom','');
					$( ".navigate .w" ).attr('toRoom','');
					
					$( ".navigate .n" ).hide();
					$( ".navigate .e" ).hide();
					$( ".navigate .s" ).hide();
					$( ".navigate .w" ).hide();


					// now get exits for current room...
					console.log('js :: function set_exits()');
					
					if(typeof exits.south !== 'undefined')
					{
						$( ".navigate .s" ).attr('toRoom', exits.south["to"]);
						$( ".navigate .s" ).show();
					}
					if(typeof exits.north !== 'undefined')
					{
						$( ".navigate .n" ).attr('toRoom', exits.north["to"]);
						$( ".navigate .n" ).show();
					}
					if(typeof exits.east !== 'undefined')
					{
						$( ".navigate .e" ).attr('toRoom', exits.east["to"]);
						$( ".navigate .e" ).show();
					}
					if(typeof exits.west !== 'undefined')
					{
						$( ".navigate .w" ).attr('toRoom', exits.west["to"]);
						$( ".navigate .w" ).show();
					}
					
				});
				
			} // END function set_exits
			
			
			
			
			
			function change_room(whatRoom, whatDir)
			{
				var old_room = global_curRoom;
				var new_room = whatRoom;
				
				// check for existing room  - prevent going out of bounds (eg room that exists in another area) //
				var new_div = $("." + new_room);
				if ( !new_div.length )
					return false;
				var old_div = $('.' + old_room);
				
				
				var min_x = 0 - new_div.width();
				var min_y = 0 - new_div.height();
				var max_x = screen.width + new_div.width();
				var max_y = screen.height + new_div.height();
				
				var reset_x = '50%';
				var reset_y = '50%';
				
				var move_speed = 200;
				
				var oldpos = old_div.offset(); // oldpos.top , etc
				
				
				switch(whatDir)
				{
					// animate the navigation arrows... 
					case 'n':
					case 'north':

						$(function() {
						  // Handler for .ready() called.
						  
							old_div.animate({
								top: max_y
							}, move_speed, function() {
								// Animation complete.

								// swap out classes and reset div //
								old_div.removeClass('edit');
								
								
								old_div.css('top', reset_y);
								old_div.css('left', min_x);
								
								new_div.css('top', min_y); // swaparoo
								new_div.css('left', reset_x); // swaparoo
								
								new_div.addClass('edit');
								
								new_div.animate({
									top: ($( window ).height() / 2)
								}, move_speed, function() {
									// Animation complete.
									new_div.css('top', reset_y);
								}); // end animate

								
							}); // end animate
						});
					

					
					break; // END - n
					
					case 's':
					case 'south':
					
					
						$(function() {
						  // Handler for .ready() called.
						  
							old_div.animate({
								top: min_y
							}, move_speed, function() {
								// Animation complete.

								// swap out classes and reset div //
								old_div.removeClass('edit');
								
								// stays same - place all old divs in old div storage land
								old_div.css('top', reset_y);
								old_div.css('left', min_x);
								
								new_div.css('top', max_y); // swaparoo - opposite of initial movement
								new_div.css('left', reset_x); // swaparoo - make sure it's reset first
								
								new_div.addClass('edit');
								
								new_div.animate({
									top: ($( window ).height() / 2)
								}, move_speed, function() {
									// Animation complete.
									new_div.css('top', reset_y);
								}); // end animate

								
							}); // end animate
						});
					

					break; // END - s
					
					case 'w':
					case 'west':
						$(function() {
						  // Handler for .ready() called.
						  
							old_div.animate({
								left: max_x
							}, move_speed, function() {
								// Animation complete.

								// swap out classes and reset div //
								old_div.removeClass('edit');

								// reset to old position 
								old_div.css('left', min_x);
								old_div.css('top', reset_y);
								
								
								new_div.css('left', min_x); // swaparoo

								new_div.addClass('edit');
								
								new_div.animate({
									left: ($( window ).width() / 2)
								}, move_speed, function() {
									// Animation complete.
									new_div.css('left', reset_x);
								}); // end animate

								
							}); // end animate
						});
						
					break; // END - e


					case 'e':
					case 'east':
						$(function() {
						  // Handler for .ready() called.
						  
							old_div.animate({
								left: min_x
							}, move_speed, function() {
								// Animation complete.

								// swap out classes and reset div //
								old_div.removeClass('edit');
								
								// reset to old position 
								old_div.css('left', min_x);
								old_div.css('top', reset_y);
								
								new_div.css('left', max_x); // swaparoo

								new_div.addClass('edit');
								
								new_div.animate({
									left: ($( window ).width() / 2)
								}, move_speed, function() {
									// Animation complete.
									new_div.css('left', reset_x);
								}); // end animate

								
							}); // end animate
						});
						
					break; // END - n
					
					default:
						old_div.removeClass('edit');
					
						// reset to old 
						old_div.css('left', min_x);
						old_div.css('top', reset_y);
						
						new_div.addClass('edit');
						new_div.css('left', reset_x);
						new_div.css('top', reset_y);
					break;  // END - n // just swap - other
				}
				
				global_curRoom = new_room;
				set_exits();
			
			} // END function change_room(whatRoom)
			
			// END FUNCTIONS
			// END FUNCTIONS
			// END FUNCTIONS
			
			
			
			$(function() {
				// Handler for .ready() called.

				// handle updating elements //
				$( ".myAreaList" ).change(function() {
					that = $(this);
					console.log(that.val());
					
					select_area(that.val());
				});


				$( ".navigate .n" ).click(function() {
					var new_room = $(this).attr("toroom");
					console.log(new_room);
					if(new_room > 0)
						change_room(new_room,'n');
				});

				$( ".navigate .s" ).click(function() {
					var new_room = $(this).attr("toroom");
					console.log(new_room);
					if(new_room > 0)
						change_room(new_room,'s');
				});

				$( ".navigate .e" ).click(function() {
					var new_room = $(this).attr("toroom");
					console.log(new_room);
					if(new_room > 0)
						change_room(new_room,'e');
				});

				$( ".navigate .w" ).click(function() {
					var new_room = $(this).attr("toroom");
					console.log(new_room);
					if(new_room > 0)
						change_room(new_room,'w');
				});


				$( ".exit" ).live( "click", function() {
					console.log($(this));
					change_room($(this).attr('to'), $(this).attr('dir'));
				});
						
			});
		</script>
		
	</body>

</html>