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:image" content="https://play.lotrtcgpc.net/gemp-lotr/images/splash.jpg" />
|
||||||
<meta property="og:type" content="website" />
|
<meta property="og:type" content="website" />
|
||||||
|
|
||||||
<style type="text/css">
|
<link rel="stylesheet" type="text/css" href="src/Login/index.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="css/dark-hive/jquery-ui-1.8.16.custom.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="css/jquery.contextMenu.css">
|
||||||
<link rel="stylesheet" type="text/css" href="js/jquery/styles/jquery.spinnercontrol.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/gameAnimations.js"></script>
|
||||||
<script type="text/javascript" src="js/gemp-022/merchantUi.js"></script>
|
<script type="text/javascript" src="js/gemp-022/merchantUi.js"></script>
|
||||||
|
|
||||||
<script type="text/javascript">
|
<!-- these scripts will be bundled together -->
|
||||||
|
<script type="text/javascript" src="src/Login/login.js"></script>
|
||||||
|
|
||||||
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>
|
|
||||||
|
|
||||||
</head>
|
</head>
|
||||||
<body bgcolor="#000000" >
|
<body>
|
||||||
<div class="dim"></div>
|
<div class="dim"></div>
|
||||||
<div class="centerContainer">
|
<div class="centerContainer">
|
||||||
<h1 class="banner">GEMP: Play the Lord of the Rings TCG</h1>
|
<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