Add Public Achivements UI

resources/PlayerAchievementMetadata.json

@@ -0,0 +1,5 @@
+{
+  "win_no_nukes": {
+    "difficulty": "Hard"
+  }
+}

resources/lang/en.json

@@ -417,6 +417,12 @@
     "sub_renews_on": "Renews {date}",
     "sub_price_monthly": "{price}/mo",
     "stats_overview": "Stats Overview",
+    "achievements": "Achievements",
+    "achieved_on": "Achieved on",
+    "status": "Status",
+    "no_achievements": "No player achievements unlocked yet.",
+    "not_unlocked_yet": "Not unlocked yet",
+    "unknown_difficulty": "Unknown",
     "link_discord": "Link Discord Account",
     "log_out": "Log Out",
     "sign_in_desc": "Sign in to save your stats and progress",
@@ -434,6 +440,7 @@
     "tab_account": "Account",
     "tab_stats": "Stats",
     "tab_games": "Games",
+    "tab_achievements": "Achievements",
     "tab_friends": "Friends",
     "no_stats": "No stats available yet. Play some games to start tracking.",
     "no_games": "No games played yet."
@@ -468,6 +475,10 @@
     "error_bad_request": "Invalid request",
     "error_generic": "Something went wrong. Please try again."
   },
+  "achievements": {
+    "win_no_nukes": "Win Without Nukes",
+    "win_no_nukes_desc": "Win a free-for-all match without launching any nukes."
+  },
   "leaderboard_modal": {
     "title": "Leaderboard",
     "ranked_tab": "1v1 Ranked",

src/client/AccountModal.ts

@@ -2,6 +2,7 @@ import { html, TemplateResult } from "lit";
 import { customElement, state } from "lit/decorators.js";
 import { ClientEnv } from "src/client/ClientEnv";
 import {
+  AchievementsResponse,
   PlayerGame,
   PlayerStatsTree,
   UserMeResponse,
@@ -12,6 +13,7 @@ import { fetchPlayerById, getUserMe } from "./Api";
 import { discordLogin, logOut, sendMagicLink } from "./Auth";
 import "./components/baseComponents/stats/DiscordUserHeader";
 import "./components/baseComponents/stats/GameList";
+import "./components/baseComponents/stats/PlayerAchievements";
 import "./components/baseComponents/stats/PlayerStatsTable";
 import "./components/baseComponents/stats/PlayerStatsTree";
 import { BaseModal } from "./components/BaseModal";
@@ -34,6 +36,7 @@ export class AccountModal extends BaseModal {
   private userMeResponse: UserMeResponse | null = null;
   private statsTree: PlayerStatsTree | null = null;
   private recentGames: PlayerGame[] = [];
+  private achievementGroups: AchievementsResponse = [];
   private cosmetics: Cosmetics | null = null;
 
   constructor() {
@@ -46,15 +49,39 @@ export class AccountModal extends BaseModal {
         if (this.userMeResponse?.player?.publicId === undefined) {
           this.statsTree = null;
           this.recentGames = [];
+          this.achievementGroups = [];
+        } else {
+          this.achievementGroups = this.getUserMeAchievementGroups(
+            this.userMeResponse,
+          );
         }
       } else {
         this.statsTree = null;
         this.recentGames = [];
+        this.achievementGroups = [];
         this.requestUpdate();
       }
     });
   }
 
+  private getUserMeAchievementGroups(
+    userMeResponse: UserMeResponse | null,
+  ): AchievementsResponse {
+    const achievements = userMeResponse?.player?.achievements;
+    if (!achievements) return [];
+
+    return [
+      {
+        type: "singleplayer-map",
+        data: achievements.singleplayerMap,
+      },
+      {
+        type: "player",
+        data: achievements.player ?? [],
+      },
+    ];
+  }
+
   private hasAnyStats(): boolean {
     if (!this.statsTree) return false;
     // Check if statsTree has any data
@@ -108,6 +135,10 @@ export class AccountModal extends BaseModal {
         { key: "account", label: translateText("account_modal.tab_account") },
         { key: "stats", label: translateText("account_modal.tab_stats") },
         { key: "games", label: translateText("account_modal.tab_games") },
+        {
+          key: "achievements",
+          label: translateText("account_modal.tab_achievements"),
+        },
         { key: "friends", label: translateText("account_modal.tab_friends") },
       ],
     };
@@ -137,6 +168,8 @@ export class AccountModal extends BaseModal {
         return this.renderStatsTab();
       case "games":
         return this.renderGamesTab();
+      case "achievements":
+        return this.renderAchievementsTab();
       case "friends":
         return this.renderFriendsTab();
       default:
@@ -172,6 +205,24 @@ export class AccountModal extends BaseModal {
     `;
   }
 
+  private renderAchievementsTab(): TemplateResult {
+    const achievements =
+      this.achievementGroups.length > 0
+        ? this.achievementGroups
+        : this.getUserMeAchievementGroups(this.userMeResponse);
+
+    return html`
+      <div class="bg-white/5 rounded-xl border border-white/10 p-6">
+        <h3 class="text-lg font-bold text-white mb-4">
+          ${translateText("account_modal.achievements")}
+        </h3>
+        <player-achievements
+          .achievementGroups=${achievements}
+        ></player-achievements>
+      </div>
+    `;
+  }
+
   private renderStatsTab(): TemplateResult {
     if (!this.hasAnyStats()) {
       return this.renderEmptyState(
@@ -428,6 +479,7 @@ export class AccountModal extends BaseModal {
       .then((userMe) => {
         if (userMe) {
           this.userMeResponse = userMe;
+          this.achievementGroups = this.getUserMeAchievementGroups(userMe);
           if (this.userMeResponse?.player?.publicId) {
             this.loadPlayerProfile(this.userMeResponse.player.publicId);
           }
@@ -466,6 +518,9 @@ export class AccountModal extends BaseModal {
 
       this.recentGames = data.games;
       this.statsTree = data.stats;
+      this.achievementGroups =
+        data.achievements ??
+        this.getUserMeAchievementGroups(this.userMeResponse);
 
       this.requestUpdate();
     } catch (err) {