put meta changes in news modal

resources/lang/en.json

@@ -20,6 +20,9 @@
     "advertise": "Advertise",
     "wiki": "Wiki"
   },
+  "news": {
+    "title": "Version 23 released!"
+  },
   "help_modal": {
     "hotkeys": "Hotkeys",
     "table_key": "Key",

src/client/NewsModal.ts

@@ -12,6 +12,10 @@ export class NewsModal extends LitElement {
   };
 
   static styles = css`
+    :host {
+      display: block;
+    }
+
     .news-container {
       max-height: 60vh;
       overflow-y: auto;
@@ -24,10 +28,20 @@ export class NewsModal extends LitElement {
     .news-content {
       color: #ddd;
       line-height: 1.5;
-      background: rgba(255, 255, 255, 0.05);
+      background: rgba(0, 0, 0, 0.6);
       border-radius: 8px;
       padding: 1rem;
     }
+
+    .news-content a {
+      color: #4a9eff !important;
+      text-decoration: underline !important;
+      transition: color 0.2s ease;
+    }
+
+    .news-content a:hover {
+      color: #6fb3ff !important;
+    }
   `;
 
   render() {
@@ -36,7 +50,24 @@ export class NewsModal extends LitElement {
         <div class="options-layout">
           <div class="options-section">
             <div class="news-container">
-              <div class="news-content">INSERT NEWS HERE</div>
+              <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
+                >.
+              </div>
             </div>
           </div>
         </div>
@@ -58,8 +89,4 @@ export class NewsModal extends LitElement {
   private close() {
     this.modalEl?.close();
   }
-
-  createRenderRoot() {
-    return this; // light DOM
-  }
 }