Skip to content

Instantly share code, notes, and snippets.

@oxguy3

oxguy3/index.html

Created October 25, 2014 22:00
Show Gist options
  • Save oxguy3/459baf086652acb0502b to your computer and use it in GitHub Desktop.
Save oxguy3/459baf086652acb0502b to your computer and use it in GitHub Desktop.
Download ZIP
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>University of Rochester Playing Game: Year 1</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/jvfloat.min.js"></script>
<script src="http://www.parsecdn.com/js/parse-1.3.0.min.js"></script>
<script src="http://code.createjs.com/easeljs-0.7.0.min.js"></script>
<script src="init.js"></script>
<script src="ball.js"></script>
<script src="createMap.js"></script>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap-theme.min.css" rel="stylesheet">
<link href="css/jvfloat.css" rel="stylesheet">
<style type="text/css">
body {
background-image: url(img/webmain_background2.gif);
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
}
/*input {
position: absolute;
left: 525px;
top: -465px;
}*/
#loginContainer {
height: 500px;
}
#loginContainer .paneButtons button {
font-size: 42px;
margin-bottom: 24px;
}
#loginContainer .form-group .placeHolder {
font-size: 18px;
top:-5px;
color: #222;
}
#loginContainer .form-group {
margin-bottom: 26px;
}
</style>
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body onLoad="init();">
<div class="container">
<header class="text-center">
<img src="img/header_trans2.png">
<span class="sr-only">UofRPG: Year 1</span>
</header>
<div class="row">
<div class="col-sm-12">
<div class="theGame text-center hidden">
<canvas id="demoCanvas" width="1000" height="500">
alternate content
</canvas>
</div>
</div>
</div>
<div class="row">
<div id="loginContainer" class="col-sm-offset-4 col-sm-4">
<div id="loginContainerAlert" class="alert hidden" role="alert">
<button type="button" class="close" id="loginContainerAlertCloseBtn"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<span id="loginContainerAlertContent"></span>
</div>
<div class="paneButtons">
<button id="btnLogin" class="btn btn-lg btn-block btn-primary">Login</button>
<button id="btnRegister" class="btn btn-lg btn-block btn-primary">Register</button>
</div>
<div class="paneLogin hidden">
<div class="form-group">
<!--<label for="formLoginUsername">Username</label>-->
<input type="text" class="form-control input-lg" id="formLoginUsername" placeholder="Username">
</div>
<div class="form-group">
<!--<label for="formLoginPassword">Password</label>-->
<input type="password" class="form-control input-lg" id="formLoginPassword" placeholder="Password">
</div>
<button type="button" id="formLoginSubmit" data-loading-text="Loading..." class="btn btn-lg btn-primary">
Submit
</button>
</div>
<div class="paneRegister hidden">
<div class="form-group">
<!--<label for="formRegisterUsername">Username</label>-->
<input type="text" class="form-control input-lg" id="formRegisterUsername" placeholder="Username">
</div>
<div class="form-group">
<!--<label for="formRegisterPassword">Password</label>-->
<input type="password" class="form-control input-lg" id="formRegisterPassword" placeholder="Password">
</div>
<button type="button" id="formRegisterSubmit" data-loading-text="Loading..." class="btn btn-lg btn-primary">
Submit
</button>
</div>
</div>
</div>
<div id="gameDom">
</div>
<footer id="mastfoot">
<section class="container-fluid">
<div class="row-fluid">
<article class="span6 credits text-left">
</article>
<article class="span6 text-left">
</article>
<article class="span6 text-right">
<font size="10">
<a href="roles.html">Developer's Roles</a>
</font>
</article>
</div>
<div class="row-fluid">
<article class="span6 copyright text-right">
<p>Copyright &copy; 2014
<br/>All rights reserved</p>
</article>
</div>
</section>
</footer>
</div>
</body>
</html>
Raw
init.js
var stage, output, holder;
var tileset;
var mapData;
var startContainer, menuContainer, loginContainer, registerContainer, gameContainer;
var AccountsTable = Parse.Object.extend("Accounts");
Parse.initialize("dUWpFIH0Iv7AGTYW5ps6TkYScmxjG1LgX8hIlfNV",
"XSET46QVsV1VfewbHB0T5VoOPyaYpRIoowhtc7vF");
var accountsTable = new AccountsTable();
function init() {
//Create the Stage
stage = new createjs.Stage("demoCanvas");
startContainer = new createjs.Container();
menuContainer = new createjs.Container();
loginContainer = new createjs.Container();
registerContainer = new createjs.Container();
//createjs.Touch.enabled(stage); // just for fun to see what happens
stage.enableMouseOver();
/*
* Setup start container
*/
/*var playShape = new createjs.Shape();
playShape.graphics.beginFill("blue").drawRoundRect(-25, -10, 250, 100, 10);
var playButton = new createjs.Container();
playButton.name = "playButton";
playButton.x = 400;
playButton.y = 100;
var playLabel = new createjs.Text("Play", "bold 50px Arial", "#FFFFFF");
playLabel.name = "playLabel";
playLabel.x = 100;
playLabel.y = 45;
playLabel.textAlign = "center";
playLabel.textBaseline = "middle";
playButton.addChild(playShape, playLabel);
playButton.on("mouseover", function(evt) {
console.log("Play Button Mouseover");
playShape.graphics.beginFill("yellow").drawRoundRect(-25, -10, 250, 100, 10);
playLabel.color = "#000000"
playButton.addChild(playShape, playLabel);
stage.update();
});
playButton.on("mouseout", function(evt) {
playShape.graphics.beginFill("blue").drawRoundRect(-25, -10, 250, 100, 10);
playLabel.color = "#FFFFFF";
playButton.addChild(playShape, playLabel);
stage.update();
});
playButton.on("click", playClick, true);
startContainer.addChild(playButton);
stage.addChild(startContainer);
stage.update();*/
$("#btnLogin").click(function() {
console.log("IS THIS RUNNING AT ALL");
$(".paneButtons").addClass("hidden");
$(".paneLogin").removeClass("hidden");
});
$("#btnRegister").click(function() {
$(".paneButtons").addClass("hidden");
$(".paneRegister").removeClass("hidden");
});
$("#formLoginSubmit").click(function() {
var query = new Parse.Query(AccountsTable);
query.equalTo("Username", $("#formLoginUsername").val());
query.find({
success: function(results) {
if (results.length == 1) {
query.equalTo("Password", $("#formLoginPassword").val());
query.find({
success: function(results) {
if (results.length == 1) {
$("#formLoginUsername").val("");
$("#formLoginPassword").val("");
loginSuccessful();
} else {
$("#formLoginPassword").val("");
showLoginMessage("That password does not match.", "danger");
}
},
error: function(error) {
showLoginMessage(error.message, "danger");
}
});
} else {
$("#formLoginUsername").val("");
$("#formLoginPassword").val("");
showLoginMessage("That username does not exist.", "warning");
}
},
error: function(error) {
showLoginMessage(error.message, "danger");
}
});
});
$("#formRegisterSubmit").click(function() {
var query = new Parse.Query(AccountsTable);
query.equalTo("Username", $("#formRegisterUsername").val());
query.find({
success: function(results) {
if (results.length == 0) {
accountsTable.save({
Username: $("#formRegisterUsername").val(),
Password: $("#formRegisterPassword").val()
});
stage.removeChild(registerContainer);
showLoginMessage("Account created!", "success");
loginSuccessful();
} else {
$("#formRegisterUsername").val("");
$("#formRegisterPassword").val("");
showLoginMessage("Username already exists.", "danger");
}
},
error: function(error) {
showLoginMessage(error.message, "danger");
}
});
});
$("#loginContainerAlertCloseBtn").click(function() {
$("#loginContainerAlert").addClass("hidden");
});
$('#formLoginUsername').jvFloat();
$('#formLoginPassword').jvFloat();
$('#formRegisterUsername').jvFloat();
$('#formRegisterPassword').jvFloat();
}
init();
function loginSuccessful() {
$("#loginContainer").addClass("hidden");
$(".theGame").removeClass("hidden");
createGame();
}
function showLoginMessage(message, level) {
$("#loginContainerAlert").removeClass("hidden");
$("#loginContainerAlert").removeClass("alert-success");
$("#loginContainerAlert").removeClass("alert-danger");
$("#loginContainerAlert").removeClass("alert-warning");
$("#loginContainerAlert").removeClass("alert-info");
$("#loginContainerAlert").addClass("alert-"+level);
$("#loginContainerAlertContent").html(message);
}
/*
* Setup Main Menu container
*/
// * Setup Login Button
/* var loginShapes = new createjs.Shape();
loginShapes.name = "background";
var loginLabel = new createjs.Text("Login", "bold 50px Arial", "#FFFFFF");
loginLabel.name = "loginLabel";
loginLabel.x = 100;
loginLabel.y = 45;
loginLabel.textAlign = "center";
loginLabel.textBaseline = "middle";
var login = new createjs.Container();
login.name = "loginButton";
login.x = 400;
login.y = 50;
login.addChild(loginShapes, loginLabel);
login.on("click", loginClick, true);
loginShapes.graphics.beginFill("blue").drawRoundRect(-25, -10, 250, 100, 10);
login.on("mouseover", function(evt) {
console.log("Login Button Mouseover");
loginShapes.graphics.beginFill("yellow").drawRoundRect(-25, -10, 250, 100, 10);
loginLabel.color = "#000000";
login.addChild(loginShapes, loginLabel);
stage.update();
});
login.on("mouseout", function(evt) {
loginShapes.graphics.beginFill("blue").drawRoundRect(-25, -10, 250, 100, 10);
loginLabel.color = "#FFFFFF";
login.addChild(loginShapes, loginLabel);
stage.update();
});
menuContainer.addChild(login, output);
// * Setup Register Button
var regShapes = new createjs.Shape();
regShapes.name = "regShapes";
var registerLabel = new createjs.Text("Register", "bold 50px Arial", "#FFFFFF");
registerLabel.name = "registerLabel";
registerLabel.x = 100;
registerLabel.y = 45;
registerLabel.textAlign = "center";
registerLabel.textBaseline = "middle";
var register = new createjs.Container();
register.name = "registerButton";
register.x = 400;
register.y = 200;
register.addChild(regShapes, registerLabel);
menuContainer.addChild(register, output);
register.on("click", regClick, true);
regShapes.graphics.beginFill("blue").drawRoundRect(-25, -10, 250, 100, 10);
register.on("mouseover", function(evt) {
console.log("Register Button Mouseover");
regShapes.graphics.beginFill("yellow").drawRoundRect(-25, -10, 250, 100, 10);
registerLabel.color = "#000000";
register.addChild(regShapes, registerLabel);
stage.update();
});
register.on("mouseout", function(evt) {
regShapes.graphics.beginFill("blue").drawRoundRect(-25, -10, 250, 100, 10);
registerLabel.color = "#FFFFFF";
register.addChild(regShapes, registerLabel);
stage.update();
});
menuContainer.addChild(register, output);
stage.update();
var logUsernameLabel = new createjs.Text("Username:", "bold 40px Arial", "#000000"); //DC143C
logUsernameLabel.name = "logUsernameLabel";
logUsernameLabel.x = 225;
logUsernameLabel.y = 55;
logUsernameLabel.textAlign = "center";
logUsernameLabel.textBaseline = "middle";
var logPasswordLabel = new createjs.Text("Password:", "bold 40px Arial", "#000000"); //DC143C
logPasswordLabel.name = "logPasswordLabel";
logPasswordLabel.x = 225;
logPasswordLabel.y = 175;
logPasswordLabel.textAlign = "center";
logPasswordLabel.textBaseline = "middle";
loginContainer.addChild(logUsernameLabel);
loginContainer.addChild(logPasswordLabel);
var logSubmitShape = new createjs.Shape();
logSubmitShape.name = "logSubmitShape";
var logSubmitLabel = new createjs.Text("Submit", "bold 50px Arial", "#FFFFFF");
logSubmitLabel.name = "logSubmitLabel";
logSubmitLabel.x = 85;
logSubmitLabel.y = 45;
logSubmitLabel.textAlign = "center";
logSubmitLabel.textBaseline = "middle";
var logSubmitButton = new createjs.Container();
logSubmitButton.name = "logSubmitButton";
logSubmitButton.x = 400;
logSubmitButton.y = 225;
logSubmitButton.addChild(logSubmitShape, logSubmitLabel);
loginContainer.addChild(register, output);
logSubmitButton.on("click", loginSubmitClick, true); //doRegister, true);
logSubmitShape.graphics.beginFill("blue").drawRoundRect(-25, -10, 225, 100, 10);
logSubmitButton.on("mouseover", function(evt) {
logSubmitShape.graphics.beginFill("yellow").drawRoundRect(-25, -10, 225, 100, 10);
logSubmitLabel.color = "#000000";
logSubmitButton.addChild(logSubmitShape, logSubmitLabel);
stage.update();
});
logSubmitButton.on("mouseout", function(evt) {
logSubmitShape.graphics.beginFill("blue").drawRoundRect(-25, -10, 225, 100, 10);
logSubmitLabel.color = "#FFFFFF";
logSubmitButton.addChild(logSubmitShape, logSubmitLabel);
stage.update();
});
loginContainer.addChild(logSubmitButton);
var regUsernameLabel = new createjs.Text("Username:", "bold 40px Arial", "#000000"); //DC143C
regUsernameLabel.name = "registerLabel";
regUsernameLabel.x = 225;
regUsernameLabel.y = 55;
regUsernameLabel.textAlign = "center";
regUsernameLabel.textBaseline = "middle";
var regPasswordLabel = new createjs.Text("Password:", "bold 40px Arial", "#000000"); //DC143C
regPasswordLabel.name = "registerLabel";
regPasswordLabel.x = 225;
regPasswordLabel.y = 175;
regPasswordLabel.textAlign = "center";
regPasswordLabel.textBaseline = "middle";
registerContainer.addChild(regUsernameLabel);
registerContainer.addChild(regPasswordLabel);
var regSubmitShape = new createjs.Shape();
regSubmitShape.name = "regSubmitShape";
var regSubmitLabel = new createjs.Text("Submit", "bold 50px Arial", "#FFFFFF");
regSubmitLabel.name = "regSubmitLabel";
regSubmitLabel.x = 85;
regSubmitLabel.y = 45;
regSubmitLabel.textAlign = "center";
regSubmitLabel.textBaseline = "middle";
var regSubmitButton = new createjs.Container();
regSubmitButton.name = "regSubmitButton";
regSubmitButton.x = 400;
regSubmitButton.y = 225;
regSubmitButton.addChild(regSubmitShape, regSubmitLabel);
menuContainer.addChild(register, output);
regSubmitButton.on("click", regSubmitClick, true); //doRegister, true);
regSubmitShape.graphics.beginFill("blue").drawRoundRect(-25, -10, 225, 100, 10);
regSubmitButton.on("mouseover", function(evt) {
regSubmitShape.graphics.beginFill("yellow").drawRoundRect(-25, -10, 225, 100, 10);
regSubmitLabel.color = "#000000";
regSubmitButton.addChild(regSubmitShape, regSubmitLabel);
stage.update();
});
regSubmitButton.on("mouseout", function(evt) {
regSubmitShape.graphics.beginFill("blue").drawRoundRect(-25, -10, 225, 100, 10);
regSubmitLabel.color = "#FFFFFF";
regSubmitButton.addChild(regSubmitShape, regSubmitLabel);
stage.update();
});
registerContainer.addChild(regSubmitButton);
stage.update();
}
// function handleClick(event) {
function playClick(event) {
stage.removeChild(startContainer);
stage.addChild(menuContainer);
stage.update();
}
function regClick(event) {
stage.removeChild(menuContainer);
stage.addChild(registerContainer);
var usernameField = document.createElement("input");
usernameField.setAttribute("id", "username");
usernameField.maxLength = 12;
usernameField.style.width = '200px';
usernameField.style.height = '3em';
usernameField.placeholder = "Username";
usernameField.autofocus = true;
var passwordField = document.createElement("input");
passwordField.setAttribute("id", "password");
passwordField.type = "password";
passwordField.maxLength = 12;
passwordField.style.width = '200px';
passwordField.style.height = '3em';
passwordField.style.top = "-350px";
passwordField.placeholder = "Password";
var gameDom = new createjs.DOMElement("gameDom");
gameDom.htmlElement.appendChild(usernameField);
gameDom.htmlElement.appendChild(passwordField);
stage.update();
}
function loginClick(event) {
stage.removeChild(menuContainer);
stage.addChild(loginContainer);
var usernameField = document.createElement("input");
usernameField.setAttribute("id", "username");
usernameField.maxLength = 12;
usernameField.style.width = '200px';
usernameField.style.height = '3em';
usernameField.placeholder = "Username";
usernameField.autofocus = true;
var passwordField = document.createElement("input");
passwordField.setAttribute("id", "password");
passwordField.type = "password";
passwordField.maxLength = 12;
passwordField.style.width = '200px';
passwordField.style.height = '3em';
passwordField.style.top = "-350px";
passwordField.placeholder = "Password";
var gameDom = new createjs.DOMElement("gameDom");
gameDom.htmlElement.appendChild(usernameField);
gameDom.htmlElement.appendChild(passwordField);
stage.update();
}
function regSubmitClick(event) {
var query = new Parse.Query(AccountsTable);
query.equalTo("Username", document.getElementById("username").value);
query.find({
success: function(results) {
if (results.length == 0) {
accountsTable.save({
Username: document.getElementById("username").value,
Password: document.getElementById("password").value
});
stage.removeChild(registerContainer);
alert("Account Created");
loginSuccessful();
} else {
document.getElementById("username").value = ""
document.getElementById("password").value = ""
alert("Username already exists.");
}
},a
error: function(error) {
alert(error.message);
}
});
}
function loginSubmitClick(event) {
var query = new Parse.Query(AccountsTable);
query.equalTo("Username", document.getElementById("username").value);
query.find({
success: function(results) {
if (results.length == 1) {
query.equalTo("Password", document.getElementById("password").value);
query.find({
success: function(results) {
if (results.length == 1) {
document.getElementById("username").value = "";
document.getElementById("password").value = "";
loginSuccessful();
} else {
document.getElementById("password").value = "";
alert("That password does not match.");
}
},
error: function(error) {
alert(error.message);
}
});
} else {
document.getElementById("username").value = "";
document.getElementById("password").value = "";
alert("That Username does not exists.");
}
},
error: function(error) {
alert(error.message);
}
});
}
function loginSuccessful() {
document.getElementById("username").remove();
document.getElementById("password").remove();
stage.removeChild(loginContainer);
stage.update();
createGame();
}*/
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment