Move version and changelog to files (#1109)

## Description:

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

## Please complete the following:

- [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

@@ -59,11 +59,19 @@ 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) {
       console.warn("News modal element not found");
-    } else {
-      console.log("News modal element found");
     }
     newsModal instanceof NewsModal;
     const newsButton = document.querySelector("news-button") as NewsButton;
@@ -72,6 +80,9 @@ class Client {
     } else {
       console.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;
@@ -51,22 +54,10 @@ export class NewsModal extends LitElement {
           <div class="options-section">
             <div class="news-container">
               <div class="news-content">
-                <h3>Main things to note:</h3>
-                <br />
-                <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>
-                </ul>
-                <br />
-                <br />
-                See full changelog
-                <a
-                  href="https://discord.com/channels/1284581928254701718/1286745902320713780"
-                  target="_blank"
-                  style="color: #4a9eff; font-weight: bold;"
-                  >here</a
-                >.
+                ${resolveMarkdown(this.markdown, {
+                  includeImages: true,
+                  includeCodeBlockClassNames: true,
+                })}
               </div>
             </div>
           </div>

src/client/index.html

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