simple POC for index
This commit is contained in:
Nick Heinbaugh
@@ -16,116 +16,7 @@
|
||||
<meta property="og:image" content="https://play.lotrtcgpc.net/gemp-lotr/images/splash.jpg" />
|
||||
<meta property="og:type" content="website" />
|
||||
|
||||
<style type="text/css">
|
||||
html {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
font-size: 100%;
|
||||
height: 100%;
|
||||
background-image: url('images/dwarrowdelf.jpg');
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
background-position: center center;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.centerContainer {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: block;
|
||||
text-align: center;
|
||||
background-color: #222222CC;
|
||||
width: 105vw;
|
||||
left: -2.5vw;
|
||||
padding: 10px;
|
||||
color: #D98E04;
|
||||
font-size: 500%;
|
||||
margin: -5px 0 0 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.login {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
font-size: 125%;
|
||||
display:grid;
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
|
||||
.status, .error {
|
||||
margin: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.status {
|
||||
color:#ffffff;
|
||||
overflow:visible
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #ff0000
|
||||
}
|
||||
|
||||
.interaction {
|
||||
margin: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.info {
|
||||
text-align: center;
|
||||
background-color: #222222CC;
|
||||
margin-bottom: 150px;
|
||||
width: 100vw;
|
||||
margin-left: calc(-50vw + 50%);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.sw-shoutout {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.ui-button-text-only .ui-button-text {
|
||||
font-size: 70%;
|
||||
padding: .2em .5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #BF6B04;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #A63F03;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
||||
<link rel="stylesheet" type="text/css" href="src/Login/index.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/dark-hive/jquery-ui-1.8.16.custom.css">
|
||||
<link rel="stylesheet" type="text/css" href="css/jquery.contextMenu.css">
|
||||
<link rel="stylesheet" type="text/css" href="js/jquery/styles/jquery.spinnercontrol.css">
|
||||
@@ -163,116 +54,11 @@
|
||||
<script type="text/javascript" src="js/gemp-022/gameAnimations.js"></script>
|
||||
<script type="text/javascript" src="js/gemp-022/merchantUi.js"></script>
|
||||
|
||||
<script type="text/javascript">
|
||||
|
||||
|
||||
var comm = new GempLotrCommunication("/gemp-lotr-server", function () {
|
||||
alert("Unable to contact the server");
|
||||
});
|
||||
|
||||
function register() {
|
||||
var login = $("#login").val();
|
||||
var password = $("#password").val();
|
||||
var password2 = $("#password2").val();
|
||||
if (password != password2) {
|
||||
$(".error").html("Password and Password repeated are different! Try again");
|
||||
} else {
|
||||
comm.register(login, password, function () {
|
||||
location.href = "/gemp-lotr/hall.html";
|
||||
},
|
||||
{
|
||||
"0": function () {
|
||||
alert("Unable to connect to server, either server is down or there is a problem" +
|
||||
" with your internet connection");
|
||||
},
|
||||
"400": function () {
|
||||
$(".error").html("Login is invalid. Login must be between 2-10 characters long, and contain only<br/>" +
|
||||
" english letters, numbers or _ (underscore) and - (dash) characters.");
|
||||
},
|
||||
"409": function () {
|
||||
$(".error").html("User with this login already exists in the system. Try a different one.");
|
||||
},
|
||||
"503": function () {
|
||||
$(".error").html("Server is down for maintenance. Please come at a later time.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function registrationScreen() {
|
||||
comm.getRegistrationForm(
|
||||
function (html) {
|
||||
$(".error").html();
|
||||
$(".interaction").html(html);
|
||||
$("#registerButton").button().click(register);
|
||||
});
|
||||
}
|
||||
|
||||
function login() {
|
||||
var login = $("#login").val();
|
||||
var password = $("#password").val();
|
||||
comm.login(login, password, function () {
|
||||
location.href = "/gemp-lotr/hall.html";
|
||||
},
|
||||
{
|
||||
"0": function () {
|
||||
alert("Unable to connect to server, either server is down or there is a problem" +
|
||||
" with your internet connection");
|
||||
},
|
||||
"401": function () {
|
||||
$(".error").html("Invalid username or password. Try again.");
|
||||
loginScreen();
|
||||
},
|
||||
"403": function () {
|
||||
$(".error").html("You have been permanently banned. If you think it was a mistake you can try sending a private message to Merrick_H on <a href='http://lotrtcgwiki.com/forums/'>TLHH forums</a>.");
|
||||
$(".interaction").html("");
|
||||
},
|
||||
"409": function () {
|
||||
$(".error").html("You have been temporarily banned. You can try logging in at a later time. If you think it was a mistake you can try sending a private message to Merrick_H on <a href='http://lotrtcgwiki.com/forums/'>TLHH forums</a>.");
|
||||
$(".interaction").html("");
|
||||
},
|
||||
"503": function () {
|
||||
$(".error").html("Server is down for maintenance. Please come at a later time.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loginScreen() {
|
||||
$(".interaction").html("");
|
||||
$(".interaction").append("Login below, or ");
|
||||
var registerButton = $("<div>Register</div>").button();
|
||||
registerButton.click(registrationScreen);
|
||||
|
||||
$(".interaction").append(registerButton);
|
||||
$(".interaction").append("<br/>Login: <input id='login' type='text'><br/>Password: <input id='password' type='password'><br/>");
|
||||
|
||||
var loginButton = $("<div>Login</div>").button();
|
||||
loginButton.click(login);
|
||||
|
||||
$("#password").keypress(function (e) {
|
||||
if (e.which == 13) {
|
||||
login();
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
$(".interaction").append(loginButton);
|
||||
}
|
||||
|
||||
$(document).ready(
|
||||
function () {
|
||||
comm.getStatus(
|
||||
function (html) {
|
||||
$(".status").append(html);
|
||||
});
|
||||
loginScreen();
|
||||
});
|
||||
</script>
|
||||
<!-- these scripts will be bundled together -->
|
||||
<script type="text/javascript" src="src/Login/login.js"></script>
|
||||
|
||||
</head>
|
||||
<body bgcolor="#000000" >
|
||||
<body>
|
||||
<div class="dim"></div>
|
||||
<div class="centerContainer">
|
||||
<h1 class="banner">GEMP: Play the Lord of the Rings TCG</h1>
|
||||
|
||||
107
gemp-lotr/gemp-lotr-async/src/main/web/src/Login/index.css
Normal file
107
gemp-lotr/gemp-lotr-async/src/main/web/src/Login/index.css
Normal file
@@ -0,0 +1,107 @@
|
||||
shtml {
|
||||
height: 100%;
|
||||
}
|
||||
body {
|
||||
font-size: 100%;
|
||||
height: 100%;
|
||||
background-image: url('../../../images/dwarrowdelf.jpg');
|
||||
background-size: cover;
|
||||
background-repeat:no-repeat;
|
||||
background-position: center center;
|
||||
background-color: #000000;
|
||||
overflow-x: hidden;
|
||||
overflow-y: hidden;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.centerContainer {
|
||||
margin: 0;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
margin-top: 150px;
|
||||
}
|
||||
|
||||
.banner {
|
||||
display: block;
|
||||
text-align: center;
|
||||
background-color: #222222CC;
|
||||
width: 105vw;
|
||||
left: -2.5vw;
|
||||
padding: 10px;
|
||||
color: #D98E04;
|
||||
font-size: 500%;
|
||||
margin: -5px 0 0 0;
|
||||
}
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 2px;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.login {
|
||||
margin: 10px;
|
||||
padding: 10px;
|
||||
font-size: 125%;
|
||||
display:grid;
|
||||
grid-row-gap: 10px;
|
||||
}
|
||||
|
||||
.status, .error {
|
||||
margin: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
.status {
|
||||
color:#ffffff;
|
||||
overflow:visible
|
||||
}
|
||||
|
||||
.error {
|
||||
color: #ff0000
|
||||
}
|
||||
|
||||
.interaction {
|
||||
margin: 0;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
.info {
|
||||
text-align: center;
|
||||
background-color: #222222CC;
|
||||
margin-bottom: 150px;
|
||||
width: 100vw;
|
||||
margin-left: calc(-50vw + 50%);
|
||||
color: #FFFFFF;
|
||||
}
|
||||
|
||||
.sw-shoutout {
|
||||
margin: auto;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
input {
|
||||
font-size: 90%;
|
||||
}
|
||||
|
||||
.ui-button-text-only .ui-button-text {
|
||||
font-size: 70%;
|
||||
padding: .2em .5em;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #BF6B04;
|
||||
}
|
||||
|
||||
a:visited {
|
||||
color: #A63F03;
|
||||
}
|
||||
104
gemp-lotr/gemp-lotr-async/src/main/web/src/Login/login.js
Normal file
104
gemp-lotr/gemp-lotr-async/src/main/web/src/Login/login.js
Normal file
@@ -0,0 +1,104 @@
|
||||
|
||||
var comm = new GempLotrCommunication("/gemp-lotr-server", function () {
|
||||
alert("Unable to contact the server");
|
||||
});
|
||||
|
||||
function register() {
|
||||
var login = $("#login").val();
|
||||
var password = $("#password").val();
|
||||
var password2 = $("#password2").val();
|
||||
if (password != password2) {
|
||||
$(".error").html("Password and Password repeated are different! Try again");
|
||||
} else {
|
||||
comm.register(login, password, function () {
|
||||
location.href = "/gemp-lotr/hall.html";
|
||||
},
|
||||
{
|
||||
"0": function () {
|
||||
alert("Unable to connect to server, either server is down or there is a problem" +
|
||||
" with your internet connection");
|
||||
},
|
||||
"400": function () {
|
||||
$(".error").html("Login is invalid. Login must be between 2-10 characters long, and contain only<br/>" +
|
||||
" english letters, numbers or _ (underscore) and - (dash) characters.");
|
||||
},
|
||||
"409": function () {
|
||||
$(".error").html("User with this login already exists in the system. Try a different one.");
|
||||
},
|
||||
"503": function () {
|
||||
$(".error").html("Server is down for maintenance. Please come at a later time.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
function registrationScreen() {
|
||||
comm.getRegistrationForm(
|
||||
function (html) {
|
||||
$(".error").html();
|
||||
$(".interaction").html(html);
|
||||
$("#registerButton").button().click(register);
|
||||
});
|
||||
}
|
||||
|
||||
function login() {
|
||||
var login = $("#login").val();
|
||||
var password = $("#password").val();
|
||||
comm.login(login, password, function () {
|
||||
location.href = "/gemp-lotr/hall.html";
|
||||
},
|
||||
{
|
||||
"0": function () {
|
||||
alert("Unable to connect to server, either server is down or there is a problem" +
|
||||
" with your internet connection");
|
||||
},
|
||||
"401": function () {
|
||||
$(".error").html("Invalid username or password. Try again.");
|
||||
loginScreen();
|
||||
},
|
||||
"403": function () {
|
||||
$(".error").html("You have been permanently banned. If you think it was a mistake you can try sending a private message to Merrick_H on <a href='http://lotrtcgwiki.com/forums/'>TLHH forums</a>.");
|
||||
$(".interaction").html("");
|
||||
},
|
||||
"409": function () {
|
||||
$(".error").html("You have been temporarily banned. You can try logging in at a later time. If you think it was a mistake you can try sending a private message to Merrick_H on <a href='http://lotrtcgwiki.com/forums/'>TLHH forums</a>.");
|
||||
$(".interaction").html("");
|
||||
},
|
||||
"503": function () {
|
||||
$(".error").html("Server is down for maintenance. Please come at a later time.");
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
function loginScreen() {
|
||||
$(".interaction").html("");
|
||||
$(".interaction").append("Login below, or ");
|
||||
var registerButton = $("<div>Register</div>").button();
|
||||
registerButton.click(registrationScreen);
|
||||
|
||||
$(".interaction").append(registerButton);
|
||||
$(".interaction").append("<br/>Login: <input id='login' type='text'><br/>Password: <input id='password' type='password'><br/>");
|
||||
|
||||
var loginButton = $("<div>Login</div>").button();
|
||||
loginButton.click(login);
|
||||
|
||||
$("#password").keypress(function (e) {
|
||||
if (e.which == 13) {
|
||||
login();
|
||||
e.preventDefault();
|
||||
return false;
|
||||
}
|
||||
});
|
||||
|
||||
$(".interaction").append(loginButton);
|
||||
}
|
||||
|
||||
$(document).ready(
|
||||
function () {
|
||||
comm.getStatus(
|
||||
function (html) {
|
||||
$(".status").append(html);
|
||||
});
|
||||
loginScreen();
|
||||
});
|
||||
Reference in New Issue
Block a user