Merge branch 'openfrontio:main' into main

src/client/graphics/layers/BuildMenu.ts

@@ -15,6 +15,7 @@ import warshipIcon from "../../../../resources/images/BattleshipIconWhite.svg";
 import missileSiloIcon from "../../../../resources/images/MissileSiloIconWhite.svg";
 import goldCoinIcon from "../../../../resources/images/GoldCoinIcon.svg";
 import portIcon from "../../../../resources/images/PortIcon.svg";
+import mirvIcon from "../../../../resources/images/MIRVIcon.svg";
 import cityIcon from "../../../../resources/images/CityIconWhite.svg";
 import shieldIcon from "../../../../resources/images/ShieldIconWhite.svg";
 import { renderNumber } from "../../Utils";
@@ -28,7 +29,8 @@ interface BuildItemDisplay {
 const buildTable: BuildItemDisplay[][] = [
   [
     { unitType: UnitType.AtomBomb, icon: atomBombIcon },
-    { unitType: UnitType.MIRV, icon: hydrogenBombIcon },
+    { unitType: UnitType.MIRV, icon: mirvIcon },
+    { unitType: UnitType.HydrogenBomb, icon: hydrogenBombIcon },
     { unitType: UnitType.Warship, icon: warshipIcon },
     { unitType: UnitType.Port, icon: portIcon },
     { unitType: UnitType.MissileSilo, icon: missileSiloIcon },

src/client/graphics/layers/ControlPanel.ts

@@ -195,7 +195,7 @@ export class ControlPanel extends LitElement implements Layer {
               type="range"
               min="1"
               max="100"
-              .value=${this.targetTroopRatio * 100}
+              .value=${(this.targetTroopRatio * 100).toString()}
               @input=${(e: Event) => {
                 this.targetTroopRatio =
                   parseInt((e.target as HTMLInputElement).value) / 100;
@@ -225,7 +225,7 @@ export class ControlPanel extends LitElement implements Layer {
               type="range"
               min="1"
               max="100"
-              .value=${this.attackRatio * 100}
+              .value=${(this.attackRatio * 100).toString()}
               @input=${(e: Event) => {
                 this.attackRatio =
                   parseInt((e.target as HTMLInputElement).value) / 100;

src/client/graphics/layers/EventsDisplay.ts

@@ -80,6 +80,17 @@ export class EventsDisplay extends LitElement implements Layer {
       this.events = remainingEvents;
       this.requestUpdate();
     }
+
+    const myPlayer = this.game.myPlayer();
+    if (!myPlayer) {
+      return;
+    }
+    myPlayer.incomingAttacks().forEach((a) => {
+      // console.log(`got incoming attack: ${JSON.stringify(a)}`);
+    });
+    myPlayer.outgoingAttacks().forEach((a) => {
+      // console.log(`got outgoing attack: ${JSON.stringify(a)}`);
+    });
   }
 
   private addEvent(event: Event) {
@@ -125,10 +136,10 @@ export class EventsDisplay extends LitElement implements Layer {
     }
 
     const requestor = this.game.playerBySmallID(
-      update.requestorID,
+      update.requestorID
     ) as PlayerView;
     const recipient = this.game.playerBySmallID(
-      update.recipientID,
+      update.recipientID
     ) as PlayerView;
 
     this.addEvent({
@@ -139,7 +150,7 @@ export class EventsDisplay extends LitElement implements Layer {
           className: "btn",
           action: () =>
             this.eventBus.emit(
-              new SendAllianceReplyIntentEvent(requestor, recipient, true),
+              new SendAllianceReplyIntentEvent(requestor, recipient, true)
             ),
         },
         {
@@ -147,7 +158,7 @@ export class EventsDisplay extends LitElement implements Layer {
           className: "btn-info",
           action: () =>
             this.eventBus.emit(
-              new SendAllianceReplyIntentEvent(requestor, recipient, false),
+              new SendAllianceReplyIntentEvent(requestor, recipient, false)
             ),
         },
       ],
@@ -156,7 +167,7 @@ export class EventsDisplay extends LitElement implements Layer {
       createdAt: this.game.ticks(),
       onDelete: () =>
         this.eventBus.emit(
-          new SendAllianceReplyIntentEvent(requestor, recipient, false),
+          new SendAllianceReplyIntentEvent(requestor, recipient, false)
         ),
     });
   }
@@ -168,7 +179,7 @@ export class EventsDisplay extends LitElement implements Layer {
     }
 
     const recipient = this.game.playerBySmallID(
-      update.request.recipientID,
+      update.request.recipientID
     ) as PlayerView;
 
     this.addEvent({
@@ -213,8 +224,8 @@ export class EventsDisplay extends LitElement implements Layer {
       update.player1ID === myPlayer.smallID()
         ? update.player2ID
         : update.player2ID === myPlayer.smallID()
-          ? update.player1ID
-          : null;
+        ? update.player1ID
+        : null;
     const other = this.game.playerBySmallID(otherID) as PlayerView;
     if (!other || !myPlayer.isAlive() || !other.isAlive()) return;
 
@@ -250,7 +261,7 @@ export class EventsDisplay extends LitElement implements Layer {
         ? AllPlayers
         : this.game.playerBySmallID(update.emoji.recipientID);
     const sender = this.game.playerBySmallID(
-      update.emoji.senderID,
+      update.emoji.senderID
     ) as PlayerView;
 
     if (recipient == myPlayer) {
@@ -306,7 +317,7 @@ export class EventsDisplay extends LitElement implements Layer {
               (event, index) => html`
                 <tr
                   class="border-b border-opacity-0 ${this.getMessageTypeClasses(
-                    event.type,
+                    event.type
                   )}"
                 >
                   <td class="lg:p-3 p-1 text-left">
@@ -331,14 +342,14 @@ export class EventsDisplay extends LitElement implements Layer {
                                 >
                                   ${btn.text}
                                 </button>
-                              `,
+                              `
                             )}
                           </div>
                         `
                       : ""}
                   </td>
                 </tr>
-              `,
+              `
             )}
           </tbody>
         </table>

src/client/index.html

@@ -147,8 +147,10 @@
       <div class="flex sm:flex-row flex-col sm:gap-8 gap-2">
         <a href="https://youtu.be/jvHEvbko3uw?si=znspkP84P76B1w5I"
           class="text-white/70 hover:text-white transition-colors duration-300" target="_blank">How to Play</a>
-        <a href="https://discord.gg/k22YrnAzGp" class="text-white/70 hover:text-white transition-colors duration-300"
-          target="_blank">Discord</a>
+          <a href="https://discord.gg/k22YrnAzGp" class="text-white/70 hover:text-white transition-colors duration-300"
+            target="_blank">Discord</a>
+            <a href="https://openfront.fandom.com/wiki/Openfront_Wiki" class="text-white/70 hover:text-white transition-colors duration-300"
+              target="_blank">Wiki</a>
       </div>
       <div class="text-white/70">
         © 2025