feature: trophies system update to handle giving to teams / players better (#289)

Author: lukepolo

components/EloChangeBadge.vue

@@ -17,6 +17,7 @@ interface EloChange {
   expected_score?: number | string | null;
   actual_score?: number | string | null;
   k_factor?: number | string | null;
+  impact?: number | string | null;
   performance_multiplier?: number | string | null;
   series_multiplier?: number | string | null;
   map_wins?: number | string | null;
@@ -55,6 +56,8 @@ const seriesMult = computed(() => toNum(props.eloChange?.series_multiplier));
 const hasSeriesBonus = computed(() => seriesMult.value > 1);
 
 const perfMult = computed(() => toNum(props.eloChange?.performance_multiplier));
+const impact = computed(() => toNum(props.eloChange?.impact) || perfMult.value);
+const impactDelta = computed(() => Math.round((impact.value - 1) * 100));
 const expectedScore = computed(() => toNum(props.eloChange?.expected_score));
 const actualScore = computed(() => toNum(props.eloChange?.actual_score));
 const kFactor = computed(() => toNum(props.eloChange?.k_factor) || 500);
@@ -91,6 +94,11 @@ function formatSigned(n: number): string {
   return `${sign}${n.toLocaleString()}`;
 }
 
+function formatSignedPercent(n: number): string {
+  const sign = n > 0 ? "+" : "";
+  return `${sign}${n}%`;
+}
+
 // shared building blocks
 const badgeBase =
   "inline-flex items-center gap-[3px] font-['Oxanium',sans-serif] font-bold tracking-[0.04em] tabular-nums rounded-[3px] border leading-none whitespace-nowrap cursor-help transition-all duration-150 hover:-translate-y-px";
@@ -383,6 +391,40 @@ const chipClipSm =
                 </span>
               </span>
             </div>
+            <div class="flex flex-col gap-0.5 px-2 py-1.5 bg-card/80">
+              <span :class="labelClass">SCORE</span>
+              <span
+                :class="[monoNum, 'font-semibold text-[12px] text-foreground']"
+              >
+                {{ actualScore.toFixed(2) }}
+                <span
+                  class="text-[10px] text-muted-foreground font-normal ml-0.5"
+                >
+                  · EXP {{ expectedScore.toFixed(2) }}
+                </span>
+              </span>
+            </div>
+            <div class="flex flex-col gap-0.5 px-2 py-1.5 bg-card/80">
+              <span :class="labelClass">IMPACT</span>
+              <span
+                :class="[
+                  monoNum,
+                  'font-semibold text-[12px]',
+                  impact > 1
+                    ? 'text-[hsl(142_71%_60%)]'
+                    : impact < 1
+                      ? 'text-[hsl(0_84%_66%)]'
+                      : 'text-foreground',
+                ]"
+              >
+                {{ impact.toFixed(2) }}×
+                <span
+                  class="text-[10px] text-muted-foreground font-normal ml-0.5"
+                >
+                  {{ formatSignedPercent(impactDelta) }}
+                </span>
+              </span>
+            </div>
             <div class="flex flex-col gap-0.5 px-2 py-1.5 bg-card/80">
               <span :class="labelClass">PERF ×</span>
               <span

components/PlayerDisplay.vue

@@ -220,6 +220,7 @@ import TrophyCountBadge from "~/components/trophy/TrophyCountBadge.vue";
 <script lang="ts">
 import { e_player_roles_enum } from "~/generated/zeus";
 import { typedGql } from "~/generated/zeus/typedDocumentNode";
+import { resolveAvatarUrl } from "~/utilities/avatarUrl";
 
 export default {
   props: {
@@ -306,9 +307,15 @@ export default {
     me() {
       return useAuthStore().me;
     },
+    apiDomain() {
+      return useRuntimeConfig().public.apiDomain;
+    },
     playerAvatarSrc() {
       if (!this.player) return null;
-      return this.player.custom_avatar_url || this.player.avatar_url || null;
+      return resolveAvatarUrl(
+        this.player.custom_avatar_url || this.player.avatar_url,
+        this.apiDomain,
+      );
     },
     isMe() {
       if (!this.player) {

components/tournament/TournamentResults.vue

@@ -17,6 +17,19 @@ import {
   HoverCardTrigger,
 } from "~/components/ui/hover-card";
 import { ChevronRight } from "lucide-vue-next";
+import { resolveAvatarUrl } from "~/utilities/avatarUrl";
+
+const apiDomain = useRuntimeConfig().public.apiDomain;
+
+function playerAvatarSrc(player: {
+  custom_avatar_url?: string | null;
+  avatar_url?: string | null;
+}) {
+  return resolveAvatarUrl(
+    player.custom_avatar_url || player.avatar_url,
+    apiDomain,
+  );
+}
 </script>
 
 <template>
@@ -143,8 +156,8 @@ import { ChevronRight } from "lucide-vue-next";
                       :title="p.name"
                     >
                       <img
-                        v-if="p.custom_avatar_url || p.avatar_url"
-                        :src="p.custom_avatar_url || p.avatar_url"
+                        v-if="playerAvatarSrc(p)"
+                        :src="playerAvatarSrc(p)"
                         :alt="p.name"
                         class="h-full w-full object-cover"
                       />
@@ -280,7 +293,7 @@ import { ChevronRight } from "lucide-vue-next";
               :placement="0"
               :tournament-name="tournament.name"
               :tournament-start="tournament.start"
-              :tournament-type="mvp.tournament_type"
+              :tournament-type="finalStageType"
               :custom-name="trophyConfigFor(0)?.custom_name"
               :silhouette-override="trophyConfigFor(0)?.silhouette"
               :image-url="trophyConfigFor(0)?.image_url"
@@ -774,6 +787,10 @@ export default {
     isLive() {
       return (this.tournament as any)?.status === e_tournament_status_enum.Live;
     },
+    finalStageType() {
+      const stages = (this.tournament as any)?.stages || [];
+      return stages.length ? stages[stages.length - 1]?.type || null : null;
+    },
     podium() {
       const trophies = (this.tournament as any)?.trophies || [];
       if (trophies.length === 0) return [];
@@ -807,7 +824,7 @@ export default {
             t.tournament_team,
             t.tournament_team_id,
           ),
-          tournamentType: t.tournament_type,
+          tournamentType: this.finalStageType,
           players,
         });
       }

components/tournament/TournamentTrophiesConfig.vue

@@ -3,6 +3,7 @@ import TrophyBadge from "~/components/trophy/TrophyBadge.vue";
 import AvatarUpload from "~/components/AvatarUpload.vue";
 import { Input } from "~/components/ui/input";
 import { Button } from "~/components/ui/button";
+import { Switch } from "~/components/ui/switch";
 import { typedGql } from "~/generated/zeus/typedDocumentNode";
 import { $ } from "~/generated/zeus";
 
@@ -19,7 +20,7 @@ const FRAME_CLASSES =
   "relative overflow-hidden rounded-lg border border-border px-6 py-6 [background:linear-gradient(180deg,hsl(var(--card)_/_0.7)_0%,hsl(var(--card)_/_0.35)_100%)] [backdrop-filter:blur(6px)] before:pointer-events-none before:absolute before:left-2 before:top-2 before:h-[14px] before:w-[14px] before:border-l-2 before:border-t-2 before:border-[hsl(var(--tac-amber))] before:content-[''] after:pointer-events-none after:absolute after:bottom-2 after:right-2 after:h-[14px] after:w-[14px] after:border-b-2 after:border-r-2 after:border-[hsl(var(--tac-amber))] after:content-['']";
 
 export default {
-  components: { TrophyBadge, AvatarUpload, Input, Button },
+  components: { TrophyBadge, AvatarUpload, Input, Button, Switch },
   props: {
     tournament: {
       type: Object,
@@ -41,6 +42,7 @@ export default {
         number,
         boolean
       >,
+      savingEnabled: false,
     };
   },
   computed: {
@@ -177,6 +179,27 @@ export default {
       this.drafts[placement] = { custom_name: "", silhouette: null };
       this.save(placement);
     },
+    async toggleEnabled(next: boolean) {
+      this.savingEnabled = true;
+      try {
+        await this.$apollo.mutate({
+          mutation: typedGql("mutation")({
+            update_tournaments_by_pk: [
+              {
+                pk_columns: { id: $("id", "uuid!") },
+                _set: { trophies_enabled: $("trophies_enabled", "Boolean!") },
+              },
+              { id: true, trophies_enabled: true },
+            ],
+          }),
+          variables: { id: this.tournament.id, trophies_enabled: next },
+        });
+      } catch (err) {
+        console.error("Failed to toggle trophies_enabled", err);
+      } finally {
+        this.savingEnabled = false;
+      }
+    },
   },
 };
 </script>
@@ -207,7 +230,31 @@ export default {
       ORGANIZER ACCESS REQUIRED
     </div>
 
-    <div v-else class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
+    <template v-else>
+      <div
+        class="mb-4 flex items-center justify-between rounded-sm border border-border/60 bg-background/40 px-4 py-3"
+      >
+        <div class="flex flex-col gap-1">
+          <span
+            class="font-mono text-[0.7rem] font-semibold uppercase tracking-[0.2em]"
+          >
+            AWARD TROPHIES
+          </span>
+          <span
+            class="font-mono text-[0.6rem] uppercase tracking-[0.2em] text-muted-foreground"
+          >
+            Disable to skip / clear auto-awarded trophies for this tournament.
+            Manual awards stay.
+          </span>
+        </div>
+        <Switch
+          :model-value="tournament.trophies_enabled !== false"
+          :disabled="savingEnabled"
+          @update:model-value="toggleEnabled"
+        />
+      </div>
+
+    <div class="grid grid-cols-1 gap-4 sm:grid-cols-2 xl:grid-cols-4">
       <div
         v-for="p in placements"
         :key="p"
@@ -352,5 +399,6 @@ export default {
         </div>
       </div>
     </div>
+    </template>
   </section>
 </template>