Move version and changelog to files (#1109)

Move these assets to files so that they can be replaced with generated
assets in the future.

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

---------

Co-authored-by: Scott Anderson <662325+scottanderson@users.noreply.github.com>

src/client/Main.ts

@@ -78,6 +78,16 @@ class Client {
   constructor() {}
 
   initialize(): void {
+    const gameVersion = document.getElementById(
+      "game-version",
+    ) as HTMLDivElement;
+    if (!gameVersion) {
+      console.warn("Game version element not found");
+    }
+    fetch("/version.txt")
+      .then((response) => (response.ok ? response.text() : "Failed to load"))
+      .then((version) => (gameVersion.innerText = version));
+
     const newsModal = document.querySelector("news-modal") as NewsModal;
     if (!newsModal) {
       consolex.warn("News modal element not found");
@@ -91,6 +101,9 @@ class Client {
     } else {
       consolex.log("News button element found");
     }
+    fetch("/changelog.md")
+      .then((response) => (response.ok ? response.text() : "Failed to load"))
+      .then((changelog) => (newsModal.markdown = changelog));
 
     // Comment out to show news button.
     // newsButton.hidden = true;

src/client/NewsModal.ts

@@ -1,5 +1,6 @@
 import { LitElement, css, html } from "lit";
-import { customElement, query } from "lit/decorators.js";
+import { resolveMarkdown } from "lit-markdown";
+import { customElement, property, query } from "lit/decorators.js";
 import { translateText } from "../client/Utils";
 import "./components/baseComponents/Button";
 import "./components/baseComponents/Modal";
@@ -11,6 +12,8 @@ export class NewsModal extends LitElement {
     close: () => void;
   };
 
+  @property({ type: String }) markdown = "Loading...";
+
   static styles = css`
     :host {
       display: block;
@@ -50,7 +53,10 @@ export class NewsModal extends LitElement {
           <div class="options-section">
             <div class="news-container">
               <div class="news-content">
-                <h3>v22 meta is back!</h3>
+                ${resolveMarkdown(this.markdown, {
+                  includeImages: true,
+                  includeCodeBlockClassNames: true,
+                })}
               </div>
             </div>
           </div>

src/client/index.html

@@ -155,7 +155,9 @@
             />
           </g>
         </svg>
-        <div class="l-header__highlightText">v23.16</div>
+        <div id="game-version" class="l-header__highlightText">
+          Loading version...
+        </div>
       </div>
     </header>
     <div class="bg-image"></div>