Adding semi-opaque overlay to avoid interation with the app without login.

js-src/conquer/login.ts

@@ -16,14 +16,23 @@ export default class Login {
     private conquerRegisterRepeatPassword: HTMLInputElement
     private conquerRegisterSubmit: HTMLButtonElement
     private conquerRegisterError: HTMLParagraphElement
-
+    private conquerOverlayTransparent: HTMLDivElement
 
     public async enableLogIfNeeded() {
+        this.fillOverlay()
         this.fillConquerLogin()
         this.fillConquerRegister()
         this.checkLogin()
     }
 
+    private async fillOverlay() {
+        const conquerOverlayTransparent = document.querySelector('.conquer-overlay-transparent')
+        if (conquerOverlayTransparent === null || !(conquerOverlayTransparent instanceof HTMLDivElement)) {
+            Conquer.fail('No overlay found')
+        }
+        this.conquerOverlayTransparent = conquerOverlayTransparent
+    }
+
     private async fillConquerLogin() {
         const conquerLogin = document.querySelector('.conquer-login')
         if (conquerLogin === null || !(conquerLogin instanceof HTMLDivElement)) {
@@ -168,6 +177,7 @@ export default class Login {
         this.conquerRegisterError.classList.remove('conquer-display-none')
     }
     private async removeLoginRegisterCombo(): Promise<void> {
+        this.conquerOverlayTransparent.classList.add('conquer-display-none')
         this.conquerLogin.classList.add('conquer-display-none')
         this.conquerRegister.classList.add('conquer-display-none')
     }
@@ -176,6 +186,7 @@ export default class Login {
         const isLogged = await this.isLogged()
         if (!isLogged) {
             this.conquerLogin.classList.remove('conquer-display-none')
+            this.conquerOverlayTransparent.classList.remove('conquer-display-none')
             return
         }
         this.onLoginSuccess()

public/css/styles.css

@@ -18,7 +18,17 @@ body {
     border: solid 1px black; }
   body p.conquer-login-success {
     color: green; }
+  body div.conquer-overlay-transparent {
+    background: black;
+    opacity: 50%;
+    width: 100%;
+    height: 100%;
+    position: fixed;
+    top: 0;
+    left: 0;
+    z-index: 1; }
   body div.conquer-login, body div.conquer-register {
+    border: 1px solid black;
     position: fixed;
     color: black;
     font-size: 1.5rem;

public/css/styles.scss

@@ -29,11 +29,14 @@ body {
     color: green;
   }
   div.conquer-overlay-transparent {
+    background: black;
+    opacity: 50%;
     width: 100%;
     height: 100%;
     position: fixed;
     top: 0;
     left: 0;
+    z-index: 1;
   }
   div.conquer-login,div.conquer-register {
     form {
@@ -43,6 +46,7 @@ body {
         flex-direction: column;
         justify-content: center;
     }
+    border: 1px solid black;
     position: fixed;
     color: black;
     font-size: 1.5rem;