<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/2000/REC-xhtml1-20000126/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>document.domain = document.domain</script>
<title>PHudBase Client Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link type="text/css" media="screen" rel="stylesheet" href="css/colorbox.css"/>
<!--[if lt IE 7]>
<link type="text/css" media="screen" rel="stylesheet" href="css/colorbox-ie.css" title="example"/>
<![endif]-->
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<script type="text/javascript" src="js/jquery.pack.js"></script>
<script type="text/javascript" src="js/jquery.colorbox-min.js"></script>
<script type="text/javascript" src="js/client.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#about").colorbox({width: "600px", inline:true, href:"#m_about"});
$("#help").colorbox({width: "600px", inline:true, href:"#m_help"});
});
</script>
</head>
<body>
<table>
<tr>
<td id="logo" colspan="3">
<h1>PHudBase Client Demo</h1>
</td>
<td style='text-align: right; padding-right: 10px;'>
<a id='about' href='#'>About</a> :: <a id='help' href='#'>Help</a><br>
<span id='server_status'></span>
</td>
</tr>
<tr>
<td colspan="3">
<table cellspacing=7>
<tr>
<td id="td_output">
<div id="output"></div>
</td>
</tr>
<tr>
<td id="input">
<form id="data_form" style="display: none; text-align: center;" onsubmit="send(); return false;">
<input id='data' type='text' style='width: 85%;'> <input type='submit' value='Send'>
</form>
</td>
</tr>
</table>
</td>
<td style="width: 200px;">
<table cellspacing=7>
<tr>
<td id="map">
</td>
</tr>
<tr>
<td id="movement">
<table>
<tr>
<td style='text-align: center; vertical-align: middle;' onclick="document.forms[0].data.value='nw'; send();">NW</td>
<td style='text-align: center; vertical-align: middle;' onclick="document.forms[0].data.value='n'; send();">N</td>
<td style='text-align: center; vertical-align: middle;' onclick="document.forms[0].data.value='ne'; send();">NE</td>
</tr>
<tr>
<td style='text-align: center; vertical-align: middle;' onclick="document.forms[0].data.value='w'; send();">W</td>
<td style='text-align: center; vertical-align: middle; background: transparent; cursor: default;'></td>
<td style='text-align: center; vertical-align: middle;' onclick="document.forms[0].data.value='e'; send();">E</td>
</tr>
<tr>
<td style='text-align: center; vertical-align: middle;' onclick="document.forms[0].data.value='sw'; send();">SW</td>
<td style='text-align: center; vertical-align: middle;' onclick="document.forms[0].data.value='s'; send();">S</td>
<td style='text-align: center; vertical-align: middle;' onclick="document.forms[0].data.value='se'; send();">SE</td>
</tr>
</table>
</td>
</tr>
<tr>
<td id="td_room_content">
<div id="look_button"><a style="color: #fff;" href="javascript:void(0);" onclick="sendDirect('look');">→Look Around←</a></div>
<div id="room_content">
</div>
</td>
</tr>
<tr>
<td id="connection">
</td>
</tr>
</table>
</td>
</tr>
</table>
<div style="display: none;">
<div id='m_about' style='padding: 5px; background: #000;'>
<h2>About PHudBase</h2>
<p>
PHudBase is a PHP-based, plugin-free socket-serving powerhouse.
</p>
<p>
PHudBase was built over a period of a couple of years, stemming from my desire to test
the limits of PHP and build a true MUD-style game that's played in the browser with all
the web's goodness (and all of Telnet's, too).
</p>
<p>
PHudBase accepts telnet and WebSocket connections by default, handling either gracefully,
and can also serve Flash clients with the addition of a cross-domain policy server. It's
also fairly trivial (on the PHudBase end) to configure the client and server for use with
Orbited or other comet-based transport libraries.
</p>
<p>
The bottom line is that PHudBase provides a nearly-naked, PHP codebase on which you can build
anything from a traditional telnet MUD to a web chat to a fully-graphical game experience or
anything else you can think of that requires real-time, two-way communication.
</p>
</div>
<div id='m_help' style='padding: 5px; background: #000;'>
<h2>Type the following commands to play Phud:</h2>
<p>
<strong>say [message]</strong>: Speak to those in the room<br>
<strong>look</strong>: Take a look around<br>
<strong>nw|n|ne|e|se|s|sw|w</strong>: Move in the direction specified<br>
<strong>quit</strong>: Disconnect from Phud
</p>
</div>
</div>
</body>
</html>
