Split/2661 300 v2 pr1

map-generator/assets/maps/archipelagosea/info.json

@@ -0,0 +1,105 @@
+{
+  "name": "Archipelago Sea",
+  "nations": [
+    {
+      "coordinates": [145, 767],
+      "name": "Kökar",
+      "flag": "ax"
+    },
+    {
+      "coordinates": [1529, 1120],
+      "name": "Jurmo",
+      "flag": "fi"
+    },
+    {
+      "coordinates": [1097, 1268],
+      "name": "Utö",
+      "flag": "fi"
+    },
+    {
+      "coordinates": [1870, 888],
+      "name": "Trunsö",
+      "flag": "fi"
+    },
+    {
+      "coordinates": [2274, 962],
+      "name": "Borstö",
+      "flag": "fi"
+    },
+    {
+      "coordinates": [1551, 610],
+      "name": "Aspö",
+      "flag": "fi"
+    },
+    {
+      "coordinates": [1704, 783],
+      "name": "Långholm",
+      "flag": "fi"
+    },
+    {
+      "coordinates": [1865, 578],
+      "name": "Nötö",
+      "flag": "fi"
+    },
+    {
+      "coordinates": [2732, 932],
+      "name": "Vanö",
+      "flag": "fi"
+    },
+    {
+      "coordinates": [2992, 1179],
+      "name": "Örö",
+      "flag": "fi"
+    },
+    {
+      "coordinates": [3053, 614],
+      "name": "Högsåra",
+      "flag": "fi"
+    },
+    {
+      "coordinates": [1324, 252],
+      "name": "Brunskär",
+      "flag": "fi"
+    },
+    {
+      "coordinates": [1074, 111],
+      "name": "Kälö",
+      "flag": "fi"
+    },
+    {
+      "coordinates": [914, 514],
+      "name": "Uddas",
+      "flag": "fi"
+    },
+    {
+      "coordinates": [222, 625],
+      "name": "Hellsö",
+      "flag": "ax"
+    },
+    {
+      "coordinates": [1661, 23],
+      "name": "Korpoström",
+      "flag": "fi"
+    },
+    {
+      "coordinates": [44, 343],
+      "name": "Kyrkogardsö",
+      "flag": "ax"
+    },
+    {
+      "coordinates": [2453, 142],
+      "name": "Stenskär",
+      "flag": "fi"
+    },
+    {
+      "coordinates": [2152, 530],
+      "name": "Kopparholm",
+      "flag": "fi"
+    },
+    {
+      "coordinates": [3093, 98],
+      "name": "Hammarsboda",
+      "flag": "fi"
+    }
+  ]
+}

map-generator/main.go

@@ -93,6 +93,7 @@ var maps = []struct {
     {Name: "caucasus"},
     {Name: "beringsea"},
     {Name: "antarctica"},
+    {Name: "archipelagosea"},
 	{Name: "big_plains", IsTest: true},
 	{Name: "half_land_half_ocean", IsTest: true},
 	{Name: "ocean_and_land", IsTest: true},

resources/lang/en.json

@@ -366,7 +366,8 @@
     "conakry": "Conakry",
     "caucasus": "Caucasus",
     "beringsea": "Bering Sea",
-    "antarctica": "Antarctica"
+    "antarctica": "Antarctica",
+    "archipelagosea": "Archipelago Sea"
   },
   "map_categories": {
     "featured": "Featured",

resources/maps/archipelagosea/manifest.json

@@ -0,0 +1,120 @@
+{
+  "map": {
+    "height": 1508,
+    "num_land_tiles": 287155,
+    "width": 3100
+  },
+  "map16x": {
+    "height": 377,
+    "num_land_tiles": 9913,
+    "width": 775
+  },
+  "map4x": {
+    "height": 754,
+    "num_land_tiles": 59480,
+    "width": 1550
+  },
+  "name": "Archipelago Sea",
+  "nations": [
+    {
+      "coordinates": [145, 767],
+      "flag": "ax",
+      "name": "Kökar"
+    },
+    {
+      "coordinates": [1529, 1120],
+      "flag": "fi",
+      "name": "Jurmo"
+    },
+    {
+      "coordinates": [1097, 1268],
+      "flag": "fi",
+      "name": "Utö"
+    },
+    {
+      "coordinates": [1870, 888],
+      "flag": "fi",
+      "name": "Trunsö"
+    },
+    {
+      "coordinates": [2274, 962],
+      "flag": "fi",
+      "name": "Borstö"
+    },
+    {
+      "coordinates": [1551, 610],
+      "flag": "fi",
+      "name": "Aspö"
+    },
+    {
+      "coordinates": [1704, 783],
+      "flag": "fi",
+      "name": "Långholm"
+    },
+    {
+      "coordinates": [1865, 578],
+      "flag": "fi",
+      "name": "Nötö"
+    },
+    {
+      "coordinates": [2732, 932],
+      "flag": "fi",
+      "name": "Vanö"
+    },
+    {
+      "coordinates": [2992, 1179],
+      "flag": "fi",
+      "name": "Örö"
+    },
+    {
+      "coordinates": [3053, 614],
+      "flag": "fi",
+      "name": "Högsåra"
+    },
+    {
+      "coordinates": [1324, 252],
+      "flag": "fi",
+      "name": "Brunskär"
+    },
+    {
+      "coordinates": [1074, 111],
+      "flag": "fi",
+      "name": "Kälö"
+    },
+    {
+      "coordinates": [914, 514],
+      "flag": "fi",
+      "name": "Uddas"
+    },
+    {
+      "coordinates": [222, 625],
+      "flag": "ax",
+      "name": "Hellsö"
+    },
+    {
+      "coordinates": [1661, 23],
+      "flag": "fi",
+      "name": "Korpoström"
+    },
+    {
+      "coordinates": [44, 343],
+      "flag": "ax",
+      "name": "Kyrkogardsö"
+    },
+    {
+      "coordinates": [2453, 142],
+      "flag": "fi",
+      "name": "Stenskär"
+    },
+    {
+      "coordinates": [2152, 530],
+      "flag": "fi",
+      "name": "Kopparholm"
+    },
+    {
+      "coordinates": [3093, 98],
+      "flag": "fi",
+      "name": "Hammarsboda"
+    }
+  ]
+}

src/client/graphics/layers/PlayerInfoOverlay.ts

@@ -34,6 +34,7 @@ import { TransformHandler } from "../TransformHandler";
 import { ImmunityBarVisibleEvent } from "./ImmunityTimer";
 import { Layer } from "./Layer";
 import { CloseRadialMenuEvent } from "./RadialMenu";
+import "./RelationSmiley";
 import { SpawnBarVisibleEvent } from "./SpawnTimer";
 const allianceIcon = assetUrl("images/AllianceIcon.svg");
 const warshipIcon = assetUrl("images/BattleshipIconWhite.svg");
@@ -182,37 +183,21 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
     this.requestUpdate();
   }
 
-  private getPlayerNameColor(
-    player: PlayerView,
-    myPlayer: PlayerView | null | undefined,
-    isFriendly: boolean,
-  ): string {
+  private getPlayerNameColor(isFriendly: boolean): string {
     if (isFriendly) return "text-green-500";
-    if (
-      myPlayer &&
-      myPlayer !== player &&
-      player.type() === PlayerType.Nation
-    ) {
-      const relation =
-        this.playerProfile?.relations[myPlayer.smallID()] ?? Relation.Neutral;
-      return this.getRelationClass(relation);
-    }
     return "text-white";
   }
 
-  private getRelationClass(relation: Relation): string {
-    switch (relation) {
-      case Relation.Hostile:
-        return "text-red-500";
-      case Relation.Distrustful:
-        return "text-red-300";
-      case Relation.Neutral:
-        return "text-white";
-      case Relation.Friendly:
-        return "text-green-500";
-      default:
-        return "text-white";
-    }
+  private getRelationSmiley(
+    player: PlayerView,
+    myPlayer: PlayerView | null | undefined,
+  ): TemplateResult | string {
+    if (!myPlayer || myPlayer === player || player.type() !== PlayerType.Nation)
+      return "";
+    const relation =
+      this.playerProfile?.relations[myPlayer.smallID()] ?? Relation.Neutral;
+    if (relation === Relation.Neutral) return "";
+    return html`<relation-smiley .relation=${relation}></relation-smiley>`;
   }
 
   private getRelationName(relation: Relation): string {
@@ -363,8 +348,6 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
         <div class="flex flex-col justify-between self-stretch">
           <div
             class="flex items-center gap-2 font-bold text-sm lg:text-lg ${this.getPlayerNameColor(
-              player,
-              myPlayer,
               isFriendly ?? false,
             )}"
           >
@@ -375,6 +358,7 @@ export class PlayerInfoOverlay extends LitElement implements Layer {
                 />`
               : html``}
             <span>${player.displayName()}</span>
+            ${this.getRelationSmiley(player, myPlayer)}
             ${playerTeam !== "" && player.type() !== PlayerType.Bot
               ? html`<div class="flex flex-col leading-tight">
                   <span class="text-gray-400 text-xs font-normal"

src/client/graphics/layers/RelationSmiley.ts

@@ -0,0 +1,79 @@
+import { html, LitElement } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { Relation } from "../../../core/game/Game";
+
+type FaceData = {
+  color: string;
+  eyeCy: number;
+  mouth: string;
+  brows?: string[];
+};
+const RELATION_FACES: Partial<Record<Relation, FaceData>> = {
+  [Relation.Hostile]: {
+    color: "#ef4444",
+    eyeCy: 7.5,
+    mouth: "M5 12 Q8 9 11 12",
+    brows: ["M4 5.5 L6.5 7", "M12 5.5 L9.5 7"],
+  },
+  [Relation.Distrustful]: {
+    color: "#f97316",
+    eyeCy: 6.8,
+    mouth: "M5.5 11 Q8 9.2 10.5 11",
+  },
+  [Relation.Friendly]: {
+    color: "#22c55e",
+    eyeCy: 6.5,
+    mouth: "M5 10 Q8 13 11 10",
+  },
+};
+
+@customElement("relation-smiley")
+export class RelationSmiley extends LitElement {
+  @property({ type: Number })
+  relation: Relation = Relation.Neutral;
+
+  createRenderRoot() {
+    return this;
+  }
+
+  render() {
+    const face = RELATION_FACES[this.relation];
+    if (!face) return html``;
+    const { color, eyeCy, mouth, brows } = face;
+    return html`<svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      xmlns="http://www.w3.org/2000/svg"
+      style="flex-shrink:0"
+      aria-hidden="true"
+    >
+      <circle
+        cx="8"
+        cy="8"
+        r="6.5"
+        stroke="${color}"
+        stroke-width="1.4"
+        fill="none"
+      />
+      ${brows?.map(
+        (d) =>
+          html`<path
+            d="${d}"
+            stroke="${color}"
+            stroke-width="1.4"
+            stroke-linecap="round"
+          />`,
+      )}
+      <circle cx="5.8" cy="${eyeCy}" r="0.9" fill="${color}" />
+      <circle cx="10.2" cy="${eyeCy}" r="0.9" fill="${color}" />
+      <path
+        d="${mouth}"
+        stroke="${color}"
+        stroke-width="1.4"
+        fill="none"
+        stroke-linecap="round"
+      />
+    </svg>`;
+  }
+}