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>
2026-06-21 09:40:44 +00:00 · 2025-06-10 13:07:26 -04:00
parent a0d17ed85e
commit 790b052ca2
8 changed files with 187 additions and 28 deletions
@@ -24,7 +24,7 @@ FROM base
 COPY --from=dependencies / /

 ARG GIT_COMMIT=unknown
-ENV GIT_COMMIT=$GIT_COMMIT
+ENV GIT_COMMIT="$GIT_COMMIT"

 # Set the working directory in the container
 WORKDIR /usr/src/app
@@ -35,7 +35,7 @@ COPY package*.json ./
 # Install dependencies while bypassing Husky hooks
 ENV HUSKY=0
 ENV NPM_CONFIG_IGNORE_SCRIPTS=1
-RUN mkdir -p .git && npm install
+RUN mkdir -p .git && npm ci

 # Copy the rest of the application code
 COPY . .
@@ -45,7 +45,7 @@ RUN npm run build-prod

 # So we can see which commit was used to build the container
 # https://openfront.io/commit.txt
-RUN echo $GIT_COMMIT > static/commit.txt
+RUN echo "$GIT_COMMIT" > static/commit.txt

 # Copy Nginx configuration and ensure it's used instead of the default
 COPY nginx.conf /etc/nginx/conf.d/default.conf
@@ -48,6 +48,7 @@
        "jimp": "^0.22.12",
        "jose": "^6.0.10",
        "lit": "^3.2.1",
+        "lit-markdown": "^1.3.2",
        "msgpack5": "^6.0.2",
        "nanoid": "^3.3.6",
        "node-addon-api": "^8.1.0",
@@ -11303,7 +11304,6 @@
      "version": "4.3.1",
      "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.3.1.tgz",
      "integrity": "sha512-3sUqbMEc77XqpdNO7FRyRog+eW3ph+GYCbj+rK+uYyRMuwsVy0rMiVtPn+QJlKFvWP/1PYpapqYn0Me2knFn+A==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=0.10.0"
@@ -11777,7 +11777,6 @@
      "version": "4.5.0",
      "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
      "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
      "license": "BSD-2-Clause",
      "engines": {
        "node": ">=0.12"
@@ -11932,7 +11931,6 @@
      "version": "4.0.0",
      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
      "license": "MIT",
      "engines": {
        "node": ">=10"
@@ -15582,6 +15580,57 @@
        "@types/trusted-types": "^2.0.2"
      }
    },
+    "node_modules/lit-markdown": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/lit-markdown/-/lit-markdown-1.3.2.tgz",
+      "integrity": "sha512-51M4QRR2UmJIKck3kRQClD8CAM2Ox7BBZ9qzQLA1ppkr5tFfyNJDXnM0A2xmpNNfFrELZrnTmD5ST6VEdcemPg==",
+      "license": "MIT",
+      "dependencies": {
+        "lit": "^2.6.1",
+        "marked": "^4.2.12",
+        "sanitize-html": "^2.9.0"
+      }
+    },
+    "node_modules/lit-markdown/node_modules/@lit/reactive-element": {
+      "version": "1.6.3",
+      "resolved": "https://registry.npmjs.org/@lit/reactive-element/-/reactive-element-1.6.3.tgz",
+      "integrity": "sha512-QuTgnG52Poic7uM1AN5yJ09QMe0O28e10XzSvWDz02TJiiKee4stsiownEIadWm8nYzyDAyT+gKzUoZmiWQtsQ==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.0.0"
+      }
+    },
+    "node_modules/lit-markdown/node_modules/lit": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/lit/-/lit-2.8.0.tgz",
+      "integrity": "sha512-4Sc3OFX9QHOJaHbmTMk28SYgVxLN3ePDjg7hofEft2zWlehFL3LiAuapWc4U/kYwMYJSh2hTCPZ6/LIC7ii0MA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit/reactive-element": "^1.6.0",
+        "lit-element": "^3.3.0",
+        "lit-html": "^2.8.0"
+      }
+    },
+    "node_modules/lit-markdown/node_modules/lit-element": {
+      "version": "3.3.3",
+      "resolved": "https://registry.npmjs.org/lit-element/-/lit-element-3.3.3.tgz",
+      "integrity": "sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@lit-labs/ssr-dom-shim": "^1.1.0",
+        "@lit/reactive-element": "^1.3.0",
+        "lit-html": "^2.8.0"
+      }
+    },
+    "node_modules/lit-markdown/node_modules/lit-html": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/lit-html/-/lit-html-2.8.0.tgz",
+      "integrity": "sha512-o9t+MQM3P4y7M7yNzqAyjp7z+mQGa4NS4CxiyLqFPyFWyc4O+nodLrkrxSaCTrla6M5YOLaT3RpbbqjszB5g3Q==",
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "@types/trusted-types": "^2.0.2"
+      }
+    },
    "node_modules/load-bmfont": {
      "version": "1.4.2",
      "resolved": "https://registry.npmjs.org/load-bmfont/-/load-bmfont-1.4.2.tgz",
@@ -15958,6 +16007,18 @@
        "tmpl": "1.0.5"
      }
    },
+    "node_modules/marked": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/marked/-/marked-4.3.0.tgz",
+      "integrity": "sha512-PRsaiG84bK+AMvxziE/lCFss8juXjNaWzVbN5tXAm4XjeaS9NAHhop+PjQxz2A9h8Q4M/xGmzP8vqNwy6JeK0A==",
+      "license": "MIT",
+      "bin": {
+        "marked": "bin/marked.js"
+      },
+      "engines": {
+        "node": ">= 12"
+      }
+    },
    "node_modules/math-intrinsics": {
      "version": "1.1.0",
      "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -17019,6 +17080,12 @@
        "url": "https://github.com/sponsors/sindresorhus"
      }
    },
+    "node_modules/parse-srcset": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/parse-srcset/-/parse-srcset-1.0.2.tgz",
+      "integrity": "sha512-/2qh0lav6CmI15FzA3i/2Bzk2zCgQhGMkvhOhKNcBVQ1ldgpbfiNTVslmooUmWJcADi1f1kIeynbDRVzNlfR6Q==",
+      "license": "MIT"
+    },
    "node_modules/parse5": {
      "version": "7.2.0",
      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.0.tgz",
@@ -17411,7 +17478,6 @@
      "version": "8.5.1",
      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.1.tgz",
      "integrity": "sha512-6oz2beyjc5VMn/KV1pPw8fliQkhBXrVn1Z3TVyqZxU8kZpzEKhBdmCFqI6ZbmGtamQvQGuU1sgPTk8ZrXDD7jQ==",
-      "dev": true,
      "funding": [
        {
          "type": "opencollective",
@@ -18558,6 +18624,91 @@
      "integrity": "sha512-YZo3K82SD7Riyi0E1EQPojLz7kpepnSQI9IyPbHHg1XXXevb5dJI7tpyN2ADxGcQbHG7vcyRHk0cbwqcQriUtg==",
      "license": "MIT"
    },
+    "node_modules/sanitize-html": {
+      "version": "2.17.0",
+      "resolved": "https://registry.npmjs.org/sanitize-html/-/sanitize-html-2.17.0.tgz",
+      "integrity": "sha512-dLAADUSS8rBwhaevT12yCezvioCA+bmUTPH/u57xKPT8d++voeYE6HeluA/bPbQ15TwDBG2ii+QZIEmYx8VdxA==",
+      "license": "MIT",
+      "dependencies": {
+        "deepmerge": "^4.2.2",
+        "escape-string-regexp": "^4.0.0",
+        "htmlparser2": "^8.0.0",
+        "is-plain-object": "^5.0.0",
+        "parse-srcset": "^1.0.2",
+        "postcss": "^8.3.11"
+      }
+    },
+    "node_modules/sanitize-html/node_modules/dom-serializer": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-2.0.0.tgz",
+      "integrity": "sha512-wIkAryiqt/nV5EQKqQpo3SToSOV9J0DnbJqwK7Wv/Trc92zIAYZ4FlMu+JPFW1DfGFt81ZTCGgDEabffXeLyJg==",
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.2",
+        "entities": "^4.2.0"
+      },
+      "funding": {
+        "url": "https://github.com/cheeriojs/dom-serializer?sponsor=1"
+      }
+    },
+    "node_modules/sanitize-html/node_modules/domhandler": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/domhandler/-/domhandler-5.0.3.tgz",
+      "integrity": "sha512-cgwlv/1iFQiFnU96XXgROh8xTeetsnJiDsTc7TYCLFd9+/WNkIqPTxiM/8pSd8VIrhXGTf1Ny1q1hquVqDJB5w==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "domelementtype": "^2.3.0"
+      },
+      "engines": {
+        "node": ">= 4"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domhandler?sponsor=1"
+      }
+    },
+    "node_modules/sanitize-html/node_modules/domutils": {
+      "version": "3.2.2",
+      "resolved": "https://registry.npmjs.org/domutils/-/domutils-3.2.2.tgz",
+      "integrity": "sha512-6kZKyUajlDuqlHKVX1w7gyslj9MPIXzIFiz/rGu35uC1wMi+kMhQwGhl4lt9unC9Vb9INnY9Z3/ZA3+FhASLaw==",
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "dom-serializer": "^2.0.0",
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/domutils?sponsor=1"
+      }
+    },
+    "node_modules/sanitize-html/node_modules/htmlparser2": {
+      "version": "8.0.2",
+      "resolved": "https://registry.npmjs.org/htmlparser2/-/htmlparser2-8.0.2.tgz",
+      "integrity": "sha512-GYdjWKDkbRLkZ5geuHs5NY1puJ+PXwP7+fHPRz06Eirsb9ugf6d8kkXav6ADhcODhFFPMIXyxkxSuMf3D6NCFA==",
+      "funding": [
+        "https://github.com/fb55/htmlparser2?sponsor=1",
+        {
+          "type": "github",
+          "url": "https://github.com/sponsors/fb55"
+        }
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "domelementtype": "^2.3.0",
+        "domhandler": "^5.0.3",
+        "domutils": "^3.0.1",
+        "entities": "^4.4.0"
+      }
+    },
+    "node_modules/sanitize-html/node_modules/is-plain-object": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-5.0.0.tgz",
+      "integrity": "sha512-VRSzKkbMm5jMDoKLbltAkFQ5Qr7VDiTFGXxYFXXowVj387GeGNOCsOH6Msy00SGZ3Fp84b1Naa1psqgcCIEP5Q==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
    "node_modules/sax": {
      "version": "1.4.1",
      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
@@ -19121,7 +19272,6 @@
      "version": "1.2.1",
      "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
      "integrity": "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==",
-      "dev": true,
      "license": "BSD-3-Clause",
      "engines": {
        "node": ">=0.10.0"
@@ -121,6 +121,7 @@
    "jimp": "^0.22.12",
    "jose": "^6.0.10",
    "lit": "^3.2.1",
+    "lit-markdown": "^1.3.2",
    "msgpack5": "^6.0.2",
    "nanoid": "^3.3.6",
    "node-addon-api": "^8.1.0",
@@ -0,0 +1,3 @@
+# header
+
+changelog here
@@ -0,0 +1 @@
+v0.24.0-dev
@@ -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;
@@ -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>
@@ -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>