midas
/
starmire


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123
							
<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=utf-8" />
	<meta name="description" content="Starmire - a text-based multiplayer dungeon" />
	<meta name="keywords" content="starmire mud" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Starmire MUD</title>

	<!--sharing tags -->
	<meta property="og:title" content="Starmire" />
	<meta property="og:description" content="Starmire - a text-based multiplayer dungeon" />
	<meta property="og:url" content="http://starmire.eyeofmidas.com/" />
	<link href="https://fonts.googleapis.com/css?family=Quicksand" rel="stylesheet">
	<link rel="stylesheet" media="screen" href="./css/main.css">
</head>
<body>
	<header id="background-container">
		<h1>Starmire</h1>
		<div id="current"></div>
	</header>
	<nav>
		<ul>
			<li><a href="./">Home</a></li>
			<li><a href="/terminal.html" target="_blank" onclick="window.open('/terminal.html','Starmire Terminal','resizable,height=800,width=600,scrollbars=yes'); return false;">Play</a></li>
			<li><a href="#info">Info</a></li>
			<li><a href="#register">Register</a></li>
			<li><a href="#contact">Contact</a></li>
		</ul>
	</nav>
	<main>
		<section id="hero-section">
			<div class="hero-banner"></div>
			<div class="hero-banner-call-to-action"><a href="#register" class="button">Register</a>
				<a href="/terminal.html" target="_blank" onclick="window.open('/terminal.html','Starmire Terminal','resizable,height=800,width=600,scrollbars=yes'); return false;" class="button">Play</a></div>
		</section>
		<section id="info-section">
			<h2 id="info">Info</h2>
			<p>Starmire is a text-based multiplayer game that allows ultimate flexibility in who you are and how you play. Blah blah blah.</p>
			<h3>Types of Play</h3>
			<p>Starmire works hard to make sure there is content for each type of player.
			<img src="./images/types_of_players.png" style="width: 50%; display: block; margin-left: auto; margin-right: auto;"/>
			<div><a href="/terminal.html" target="_blank" onclick="window.open('/terminal.html','Starmire Terminal','resizable,height=800,width=600,scrollbars=yes'); return false;" class="button">Play</a></div>
		</section>
		<section id="spacer-section-1">
			<div class="hero-banner"></div>
		</section>
		<section id="register-section">
			<h2 id="register">Register</h2>
			<div><div id="registrationError"></div><form method="POST" action="/api/register" id="registrationForm">
				<input type="username" id="username" name="username" placeholder="username" />
				<input type="password" id="password" name="password" placeholder="password" />
				<input type="submit" id="submitRegistration" />
			</form><div id="registrationSuccess"></div></div>
		</section>
		<section id="spacer-section-1">
			<div class="hero-banner"></div>
		</section>
		<section id="contact-section">
			<h2 id="contact">Contact</h2>
			<div>Contact Info</div>
		</section>
	</main>
	<footer>
		<p>Website Provided by <a href="http://copperwirehosting.com" target="_blank">Copper Wire Hosting</a></p>

	</footer>
	<script>
		document.addEventListener('DOMContentLoaded', function(event) {
			var request = new XMLHttpRequest();
			request.open("GET", "/api/current", true);
			request.addEventListener("load", function () {
  				var data = JSON.parse(this.responseText);
  				if(data.players.length > 0) {
	  				var ulElement = document.createElement("ul");
	  				ulElement.className = "player-list";
	  				for(var i in data.players) {
	  					var playerName = data.players[i];
	  					var nameNode = document.createTextNode(playerName);
	  					var liElement = document.createElement("li");
	  					liElement.appendChild(nameNode);
	  					ulElement.appendChild(liElement);
	  				}
	  				var currentElement = document.getElementById('current');
	  				currentElement.innerHTML = "";
	  				currentElement.appendChild(ulElement);
  				}
			});
			request.send();
		});

		document.getElementById("registrationForm").addEventListener("submit", function(event) {
			event.preventDefault();
			var form = document.getElementById("registrationForm");

			var usernameElement = document.getElementById("username");
			var passwordElement = document.getElementById("password");

			var params = [];
			params.push(encodeURIComponent(usernameElement.name) + '=' + encodeURIComponent(usernameElement.value));
			params.push(encodeURIComponent(passwordElement.name) + '=' + encodeURIComponent(passwordElement.value));
    		params = params.join('&');

        	var request = new XMLHttpRequest();
			request.open(form.method, form.action);
    		request.setRequestHeader("Content-type", "application/x-form-urlencoded");
    		request.addEventListener("load", function() {
    			var response = JSON.parse(request.response);
    			if(response.status != "ok") {
    				document.getElementById("registrationError").innerHTML = response.error;
    			} else {
    				document.getElementById("registrationError").style.display = "none";
    				document.getElementById("registrationSuccess").innerHTML = "Registration successful! Please connect via telnet or the <a href=\"/terminal.html\" target=\"_blank\">browser</a>.";
    				document.getElementById("registrationForm").parentNode.removeChild(document.getElementById("registrationForm"));
    			}
    		});
    		request.send(params);
			return true;
		})
	</script>
</body>
</html>