projects / pokerwave.git / commitdiff
? search:
summary | shortlog | log | commit | commitdiff | tree
raw | patch | inline | side by side (parent: d4b48c2)
add logo to login screen; add back button to login screen; clear login details upon...
authorGeoffrey Allott <geoffrey@allott.email>
Sat, 17 Jun 2023 17:57:22 +0000 (18:57 +0100)
committerGeoffrey Allott <geoffrey@allott.email>
Sat, 17 Jun 2023 17:57:22 +0000 (18:57 +0100)
site/index.html patch | blob | history
site/main.js patch | blob | history
site/modules/socket.js patch | blob | history
site/modules/splash.js patch | blob | history
site/style.css patch | blob | history
site/style/login.css patch | blob | history
site/style/mainmenu.css patch | blob | history
site/style/splash.css patch | blob | history

diff --git a/site/index.html b/site/index.html
index 5be42dcabfb515857873b40ada3a0df9e344ed8e..b20654b38319b3350101994b58111cb666dc4de0 100644 (file)
--- a/site/index.html
+++ b/site/index.html
@@ -8,6 +8,7 @@
     <body>
         <div id="login-background" class="hidden">
             <div id="login">
+                <div class="pokerwave-logo">PokerWave</div>
                 <label id="username-label" for="username-input">username</label>
                 <input id="username-input" />
                 <label id="password-label" for="password-input">password</label>
@@ -18,6 +19,7 @@
                 <div id="login-text-container">
                     <p id="login-error"></p>
                     <p id="sign-up">Sign Up</p>
+                    <p id="login-back">Back</p>
                 </div>
             </div>
         </div>
diff --git a/site/main.js b/site/main.js
index 0098b1056bc30bc8a7cd179c95c0d3ab123a977c..c0f248ef9e34920bc926991aed14c228c05108d9 100644 (file)
--- 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 ce92836d2663e7a76800287911c24a2977b8ed8d..f62eda1e9e94e159082f228fc418d94749798c0f 100644 (file)
--- 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 b812af7fbdbd3dc1d77044015ec9b7db361334fd..4230559f5c31fa0accb2796d0b96b0522cc181f0 100644 (file)
--- 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 bd9b031e5e9513c9eb42756543f6c4befbccbeba..ac7c9da7cdaad430bc606bbd94042c689742c360 100644 (file)
--- 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 6ef1b18d7372610a3fc69277dee9ee651148c255..e7f9bec34fec651c3eb80a22d775aa6775f12128 100644 (file)
--- 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 c4442996ef09d046d09c9a3345c76281a058cc96..6cc8e24b72f90908e199781f09c08cd6c0fc431f 100644 (file)
--- 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 62d2dc8aa0105343e6be287b8542bb747c3bc4bd..233207a8ffc9dd62f4ef9ce18bd28c68e5d7f983 100644 (file)
--- 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 {
online poker and card games