From: Geoffrey Allott Date: Sat, 17 Jun 2023 17:57:22 +0000 (+0100) Subject: add logo to login screen; add back button to login screen; clear login details upon... X-Git-Url: https://git.pointlesshacks.com/?a=commitdiff_plain;h=94e22634268a73bec4646ba6698d4eef9a7efbb1;p=pokerwave.git add logo to login screen; add back button to login screen; clear login details upon login --- diff --git a/site/index.html b/site/index.html index 5be42dc..b20654b 100644 --- a/site/index.html +++ b/site/index.html @@ -8,6 +8,7 @@ diff --git a/site/main.js b/site/main.js index 0098b10..c0f248e 100644 --- a/site/main.js +++ b/site/main.js @@ -7,8 +7,10 @@ const sockets = []; function login() { const username = document.getElementById("username-input").value; const password = document.getElementById("password-input").value; - delete document.getElementById("login-button").onclick; - delete document.getElementById("password-input").onchange; + document.getElementById("login-button").onclick = () => {}; + document.getElementById("password-input").onchange = () => {}; + document.getElementById("password-input").value = ""; + document.getElementById("password-confirm-input").value = ""; const auth = new Auth(username, password); for (const socket of sockets) { socket.login(auth); diff --git a/site/modules/socket.js b/site/modules/socket.js index ce92836..f62eda1 100644 --- a/site/modules/socket.js +++ b/site/modules/socket.js @@ -139,6 +139,7 @@ export class Socket { case "LogoutSuccess": delete this.auth; this.show_login(); + this.splash.show(); this.state = "Connected"; break; case "ProtocolError": @@ -242,10 +243,13 @@ export class Socket { document.getElementById("login-background").classList.remove("hidden"); document.getElementById("password-confirm-label").classList.add("hidden"); document.getElementById("password-confirm-input").classList.add("hidden"); + document.getElementById("sign-up").classList.remove("hidden"); + document.getElementById("login-back").classList.add("hidden"); document.getElementById("login-button").onclick = this.login_all_sockets; document.getElementById("password-input").onchange = this.login_all_sockets; document.getElementById("login-button").innerText = "Sign In"; document.getElementById("sign-up").onclick = () => this.show_create_user(); + document.getElementById("login-back").onclick = () => this.show_login(); } show_create_user(error) { @@ -260,6 +264,7 @@ export class Socket { document.getElementById("password-confirm-label").classList.remove("hidden"); document.getElementById("password-confirm-input").classList.remove("hidden"); document.getElementById("sign-up").classList.add("hidden"); + document.getElementById("login-back").classList.remove("hidden"); document.getElementById("login-button").innerText = "Sign Up"; document.getElementById("password-input").onchange = () => {}; document.getElementById("login-button").onclick = () => { @@ -280,7 +285,6 @@ export class Socket { case "LoggedIn": this.send({type: "Logout"}); window.localStorage.removeItem("auth"); - this.splash.show(); break; case "InLobby": this.send({type: "LeaveLobby"}); diff --git a/site/modules/splash.js b/site/modules/splash.js index b812af7..4230559 100644 --- a/site/modules/splash.js +++ b/site/modules/splash.js @@ -63,7 +63,7 @@ export class SplashScreen { this.wave_group = create_svg_element(this.svg, "g", [], []); - this.logo = create_svg_element(this.svg, "text", ["splash-logo"], [["x", "1000"], ["y", "250"]]); + this.logo = create_svg_element(this.svg, "text", ["splash-logo", "pokerwave-logo"], [["x", "1000"], ["y", "250"]]); this.logo_text = document.createTextNode("PokerWave"); this.logo.append(this.logo_text); diff --git a/site/style.css b/site/style.css index bd9b031..ac7c9da 100644 --- a/site/style.css +++ b/site/style.css @@ -24,6 +24,20 @@ html, body { pointer-events: none; } +@font-face { + font-family: "vegapunk"; + src: url("./fonts/VegapunkFree-2O8WX.otf"); +} + +.pokerwave-logo { + font-family: vegapunk; + text-align: center; + text-shadow: 5px 5px red; + color: purple; + fill: purple; + pointer-events: none; +} + #game-tile-background { width: 100%; height: 100%; diff --git a/site/style/login.css b/site/style/login.css index 6ef1b18..e7f9bec 100644 --- a/site/style/login.css +++ b/site/style/login.css @@ -37,14 +37,14 @@ flex-direction: row; } -#sign-up { +#sign-up, #login-back { font-size: 2vw; text-align: right; flex-grow: 1; cursor: pointer; } -#sign-up:hover { +#sign-up:hover, #login-back:hover { text-decoration: underline; } diff --git a/site/style/mainmenu.css b/site/style/mainmenu.css index c444299..6cc8e24 100644 --- a/site/style/mainmenu.css +++ b/site/style/mainmenu.css @@ -24,7 +24,7 @@ object-fit: contain; width: 200px; height: 160px; - cursor-events: none; + pointer-events: none; } .game-format-icon > p { @@ -32,5 +32,5 @@ font-family: sans; font-size: 20px; margin-top: 0px; - cursor-events: none; + pointer-events: none; } diff --git a/site/style/splash.css b/site/style/splash.css index 62d2dc8..233207a 100644 --- a/site/style/splash.css +++ b/site/style/splash.css @@ -9,11 +9,6 @@ to { opacity: 99%; } } -@font-face { - font-family: "vegapunk"; - src: url("../fonts/VegapunkFree-2O8WX.otf"); -} - .splash-screen { cursor: pointer; } @@ -24,10 +19,6 @@ font-size: 30pt; text-anchor: middle; dominant-baseline: middle; - font-family: vegapunk; - text-shadow: 5px 5px red; - fill: purple; - cursor-events: none; } .splash-upper-bar {