<?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> |
Stumble It!
Bookmark in del.icio.us
Download
