Reduced modals height on mobile, fixed public lobby button bug

src/client/HelpModal.ts

@@ -181,7 +181,7 @@ export class HelpModal extends LitElement {
 
     @media screen and (max-width: 768px) {
       #helpModal .modal-content {
-        max-height: 100vh;
+        max-height: 90vh;
         max-width: 100vw;
         width: 100%;
       }

src/client/HostLobbyModal.ts

@@ -303,7 +303,7 @@ export class HostLobbyModal extends LitElement {
 
     @media screen and (max-width: 768px) {
       .modal-content {
-        max-height: calc(100vh - 42px);
+        max-height: calc(90vh - 42px);
         max-width: 100vw;
         width: 100%;
       }

src/client/JoinPrivateLobbyModal.ts

@@ -219,7 +219,7 @@ export class JoinPrivateLobbyModal extends LitElement {
 
     @media screen and (max-width: 768px) {
       .modal-content {
-        max-height: calc(100vh - 42px);
+        max-height: calc(90vh - 42px);
         max-width: 100vw;
         width: 100%;
       }

src/client/Main.ts

@@ -95,6 +95,7 @@ class Client {
       .addEventListener("click", () => {
         if (this.usernameInput.isValid()) {
           hostModal.open();
+          this.publicLobby.leaveLobby();
         }
       });
 
@@ -172,6 +173,7 @@ class Client {
     consolex.log("leaving lobby, cancelling game");
     this.gameStop();
     this.gameStop = null;
+    this.publicLobby.leaveLobby();
   }
 
   private async handleSinglePlayer(event: CustomEvent) {

src/client/PublicLobby.ts

@@ -8,7 +8,7 @@ import { getMapsImage } from "./utilities/Maps";
 @customElement("public-lobby")
 export class PublicLobby extends LitElement {
   @state() private lobbies: Lobby[] = [];
-  @state() private isLobbyHighlighted: boolean = false;
+  @state() public isLobbyHighlighted: boolean = false;
   private lobbiesInterval: number | null = null;
   private currLobby: Lobby = null;
 
@@ -57,6 +57,7 @@ export class PublicLobby extends LitElement {
 
   public stop() {
     if (this.lobbiesInterval !== null) {
+      this.isLobbyHighlighted = false;
       clearInterval(this.lobbiesInterval);
       this.lobbiesInterval = null;
     }
@@ -115,9 +116,14 @@ export class PublicLobby extends LitElement {
     `;
   }
 
+  leaveLobby() {
+    this.isLobbyHighlighted = false;
+    this.currLobby = null;
+  }
+
   private lobbyClicked(lobby: Lobby) {
-    this.isLobbyHighlighted = !this.isLobbyHighlighted;
     if (this.currLobby == null) {
+      this.isLobbyHighlighted = true;
       this.currLobby = lobby;
       this.dispatchEvent(
         new CustomEvent("join-lobby", {
@@ -139,7 +145,7 @@ export class PublicLobby extends LitElement {
           composed: true,
         }),
       );
-      this.currLobby = null;
+      this.leaveLobby();
     }
   }
 }

src/client/SinglePlayerModal.ts

@@ -226,7 +226,7 @@ export class SinglePlayerModal extends LitElement {
 
     @media screen and (max-width: 768px) {
       .modal-content {
-        max-height: calc(100vh - 42px);
+        max-height: calc(90vh - 42px);
         max-width: 100vw;
         width: 100%;
       }