force modal

src/client/Main.ts

@@ -1,6 +1,5 @@
 import page from "page";
 import favicon from "../../resources/images/Favicon.svg";
-import { consolex } from "../core/Consolex";
 import { GameRecord, GameStartInfo } from "../core/Schemas";
 import { getServerConfigFromClient } from "../core/configuration/ConfigLoader";
 import { GameType } from "../core/game/Game";
@@ -62,16 +61,16 @@ class Client {
   initialize(): void {
     const newsModal = document.querySelector("news-modal") as NewsModal;
     if (!newsModal) {
-      consolex.warn("News modal element not found");
+      console.warn("News modal element not found");
     } else {
-      consolex.log("News modal element found");
+      console.log("News modal element found");
     }
     newsModal instanceof NewsModal;
     const newsButton = document.querySelector("news-button") as NewsButton;
     if (!newsButton) {
-      consolex.warn("News button element not found");
+      console.warn("News button element not found");
     } else {
-      consolex.log("News button element found");
+      console.log("News button element found");
     }
 
     // Comment out to show news button.
@@ -84,22 +83,22 @@ class Client {
       "lang-selector",
     ) as LanguageModal;
     if (!langSelector) {
-      consolex.warn("Lang selector element not found");
+      console.warn("Lang selector element not found");
     }
     if (!LanguageModal) {
-      consolex.warn("Language modal element not found");
+      console.warn("Language modal element not found");
     }
 
     this.flagInput = document.querySelector("flag-input") as FlagInput;
     if (!this.flagInput) {
-      consolex.warn("Flag input element not found");
+      console.warn("Flag input element not found");
     }
 
     this.darkModeButton = document.querySelector(
       "dark-mode-button",
     ) as DarkModeButton;
     if (!this.darkModeButton) {
-      consolex.warn("Dark mode button element not found");
+      console.warn("Dark mode button element not found");
     }
 
     const loginDiscordButton = document.getElementById(
@@ -113,7 +112,7 @@ class Client {
       "username-input",
     ) as UsernameInput;
     if (!this.usernameInput) {
-      consolex.warn("Username input element not found");
+      console.warn("Username input element not found");
     }
 
     this.publicLobby = document.querySelector("public-lobby") as PublicLobby;
@@ -122,7 +121,7 @@ class Client {
     ) as NodeListOf<GoogleAdElement>;
 
     window.addEventListener("beforeunload", () => {
-      consolex.log("Browser is closing");
+      console.log("Browser is closing");
       if (this.gameStop !== null) {
         this.gameStop();
       }
@@ -240,21 +239,20 @@ class Client {
     page("/join/:lobbyId", (ctx) => {
       if (ctx.init && sessionStorage.getItem("inLobby")) {
         // On page reload, go back home
-        page.redirect("/");
+        page("/");
         return;
       }
       const lobbyId = ctx.params.lobbyId;
 
-      if (lobbyId?.endsWith("#")) {
-        // When the cookies button is pressed, '#' is added to the url
-        // causing the page to attempt to rejoin the lobby during game play.
-        console.error("Invalid lobby ID provided");
-        return;
+      // Show news modal even if user loads game directly
+      const newsModal = document.querySelector("news-modal") as NewsModal;
+      if (newsModal) {
+        newsModal.open();
       }
 
       this.joinModal.open(lobbyId);
 
-      consolex.log(`joining lobby ${lobbyId}`);
+      console.log(`joining lobby ${lobbyId}`);
     });
 
     page();
@@ -270,13 +268,16 @@ class Client {
         updateSliderProgress(slider);
         slider.addEventListener("input", () => updateSliderProgress(slider));
       });
+    if (newsModal) {
+      newsModal.open();
+    }
   }
 
   private async handleJoinLobby(event: CustomEvent) {
     const lobby = event.detail as JoinLobbyEvent;
-    consolex.log(`joining lobby ${lobby.gameID}`);
+    console.log(`joining lobby ${lobby.gameID}`);
     if (this.gameStop !== null) {
-      consolex.log("joining lobby, stopping existing game");
+      console.log("joining lobby, stopping existing game");
       this.gameStop();
     }
     const config = await getServerConfigFromClient();
@@ -348,7 +349,7 @@ class Client {
     if (this.gameStop === null) {
       return;
     }
-    consolex.log("leaving lobby, cancelling game");
+    console.log("leaving lobby, cancelling game");
     this.gameStop();
     this.gameStop = null;
     this.publicLobby.leaveLobby();

src/client/NewsModal.ts

@@ -1,6 +1,5 @@
 import { LitElement, css, html } from "lit";
 import { customElement, query } from "lit/decorators.js";
-import { translateText } from "../client/Utils";
 import "./components/baseComponents/Button";
 import "./components/baseComponents/Modal";
 
@@ -46,37 +45,44 @@ export class NewsModal extends LitElement {
 
   render() {
     return html`
-      <o-modal title=${translateText("news.title")}>
+      <o-modal>
         <div class="options-layout">
           <div class="options-section">
             <div class="news-container">
               <div class="news-content">
-                <h3>Main things to note:</h3>
-                <br />
+                <p>
+                  This test version introduces a new building:
+                  <strong>Hospitals</strong>. Each hospital reduces your troop
+                  losses in both offensive and defensive combat.
+                </p>
+                <p>
+                  The first hospital provides a
+                  <strong>10% reduction</strong> in combat casualties. Each
+                  additional hospital reduces losses by
+                  <strong>75% of the previous reduction</strong>.
+                </p>
                 <ul>
-                  <li>Workers reproduce faster than troops.</li>
-                  <li>Defense = troops divided how much land you have.</li>
-                  <li>Attacking troops count toward your population limit.</li>
+                  <li>1st hospital: 10% reduction</li>
+                  <li>2nd hospital: 7.5% additional reduction</li>
+                  <li>3rd hospital: 5.6% additional reduction</li>
+                  <li>... and so on</li>
                 </ul>
-                <br />
-                <br />
-                See full changelog
-                <a
-                  href="https://discord.com/channels/1284581928254701718/1286745902320713780"
-                  target="_blank"
-                  style="color: #4a9eff; font-weight: bold;"
-                  >here</a
-                >.
+                <p>These effects stack cumulatively.</p>
+                <p>
+                  For a full list of changes, join the
+                  <a
+                    href="https://discord.com/channels/1379151032369676338/1379156389699649566"
+                    target="_blank"
+                  >
+                    Discord </a
+                  >.
+                </p>
               </div>
             </div>
           </div>
         </div>
 
-        <o-button
-          title=${translateText("common.close")}
-          @click=${this.close}
-          blockDesktop
-        ></o-button>
+        <o-button title="Close" @click=${this.close} blockDesktop></o-button>
       </o-modal>
     `;
   }