diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/index.html b/gemp-lotr/gemp-lotr-async/src/main/web/index.html index 7e33bb016..94902330d 100644 --- a/gemp-lotr/gemp-lotr-async/src/main/web/index.html +++ b/gemp-lotr/gemp-lotr-async/src/main/web/index.html @@ -16,116 +16,7 @@ - - + @@ -163,116 +54,11 @@ - + + - +

GEMP: Play the Lord of the Rings TCG

diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/src/Login/index.css b/gemp-lotr/gemp-lotr-async/src/main/web/src/Login/index.css new file mode 100644 index 000000000..036c8a6a7 --- /dev/null +++ b/gemp-lotr/gemp-lotr-async/src/main/web/src/Login/index.css @@ -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; +} diff --git a/gemp-lotr/gemp-lotr-async/src/main/web/src/Login/login.js b/gemp-lotr/gemp-lotr-async/src/main/web/src/Login/login.js new file mode 100644 index 000000000..a990903a9 --- /dev/null +++ b/gemp-lotr/gemp-lotr-async/src/main/web/src/Login/login.js @@ -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
" + + " 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 TLHH forums."); + $(".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 TLHH forums."); + $(".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 = $("
Register
").button(); + registerButton.click(registrationScreen); + + $(".interaction").append(registerButton); + $(".interaction").append("
Login:
Password:
"); + + var loginButton = $("
Login
").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(); + }); \ No newline at end of file