🐝🐝🐝

Signed-off-by: Jannik Hollenbach <jannik.hollenbach@owasp.org>

Author: J12934

balancer/ui/public/patterns/special_owasp.png

@@ -28,17 +28,17 @@ export interface GlobeHandle {
   /** Transition a country from solid fill to pattern fill */
   transitionCountryToSolved(
     countryName: string,
-    patternIndex: number
+    patternPath: string
   ): Promise<void>;
   /** Rotate camera to the country, transition material, and pulse a highlight glow */
-  focusAndHighlightCountry(countryName: string, patternIndex: number): void;
+  focusAndHighlightCountry(countryName: string, patternPath: string): void;
   /**
    * Enqueue multiple solve animations, sorted by geographic proximity
    * (greedy nearest-neighbor from the current camera position) so the camera
    * traces a short path instead of jumping randomly around the globe.
    */
   focusAndHighlightCountries(
-    solves: Array<{ countryName: string; patternIndex: number }>
+    solves: Array<{ countryName: string; patternPath: string }>
   ): void;
 }
 
@@ -201,12 +201,12 @@ function GlobeInternal({
         const handle: GlobeHandle = {
           transitionCountryToSolved: async (
             countryName: string,
-            patternIndex: number
+            patternPath: string
           ) => {
             const colors = themeColorsRef.current;
             await globeRenderer.transitionCountryToSolved(
               countryName,
-              patternIndex,
+              patternPath,
               {
                 primary: colors.primary,
                 glowIntensity: colors.glowIntensity,
@@ -215,14 +215,14 @@ function GlobeInternal({
           },
           focusAndHighlightCountry: (
             countryName: string,
-            patternIndex: number
+            patternPath: string
           ) => {
             const center = globeRenderer.getCountryCenter(countryName);
             if (!center) {
               // Fallback: just do the material transition without animation
               const colors = themeColorsRef.current;
               globeRenderer
-                .transitionCountryToSolved(countryName, patternIndex, {
+                .transitionCountryToSolved(countryName, patternPath, {
                   primary: colors.primary,
                   glowIntensity: colors.glowIntensity,
                 })
@@ -242,7 +242,7 @@ function GlobeInternal({
             animator.enqueue(
               new SolveSequenceAnimation({
                 countryName,
-                patternIndex,
+                patternPath,
                 targetPosition: capitalWorld,
                 capitalWorldPos: capitalWorld,
                 camera,
@@ -256,14 +256,14 @@ function GlobeInternal({
             );
           },
           focusAndHighlightCountries: (
-            solves: Array<{ countryName: string; patternIndex: number }>
+            solves: Array<{ countryName: string; patternPath: string }>
           ) => {
             if (solves.length === 0) return;
 
             // Resolve centers for all solves, separate those without geo data
             type SolveWithCenter = {
               countryName: string;
-              patternIndex: number;
+              patternPath: string;
               lat: number;
               lon: number;
             };
@@ -276,7 +276,7 @@ function GlobeInternal({
                 // No geo data — transition immediately without animation
                 const colors = themeColorsRef.current;
                 globeRenderer
-                  .transitionCountryToSolved(s.countryName, s.patternIndex, {
+                  .transitionCountryToSolved(s.countryName, s.patternPath, {
                     primary: colors.primary,
                     glowIntensity: colors.glowIntensity,
                   })
@@ -329,7 +329,7 @@ function GlobeInternal({
               animator.enqueue(
                 new SolveSequenceAnimation({
                   countryName: s.countryName,
-                  patternIndex: s.patternIndex,
+                  patternPath: s.patternPath,
                   targetPosition: capitalWorld,
                   capitalWorldPos: capitalWorld,
                   camera,

balancer/ui/src/components/ctf/Globe.tsx

@@ -1,10 +1,10 @@
 import type { Challenge } from "@/hooks/useChallenges";
 
-import { getPatternIndexForTeam } from "../patterns/pattern-selector";
+import { getPatternPathForTeam } from "../patterns/pattern-selector";
 
 export interface NewlySolvedChallenge {
   countryName: string;
-  patternIndex: number;
+  patternPath: string;
   challengeKey: string;
   firstSolver: string;
 }
@@ -48,10 +48,10 @@ export function findNewlySolvedChallenges(
     const isNowSolved = challenge.solveCount > 0;
 
     if (wasUnsolved && isNowSolved && challenge.firstSolver) {
-      const patternIndex = getPatternIndexForTeam(challenge.firstSolver);
+      const patternPath = getPatternPathForTeam(challenge.firstSolver);
       newlySolved.push({
         countryName,
-        patternIndex,
+        patternPath,
         challengeKey: challenge.key,
         firstSolver: challenge.firstSolver,
       });

balancer/ui/src/lib/challenges/challenge-diff.ts

@@ -1,5 +1,5 @@
 import type { CountryData } from "../globe/data/geojson-loader";
-import { getPatternIndexForTeam } from "../patterns/pattern-selector";
+import { getPatternPathForTeam } from "../patterns/pattern-selector";
 
 // Re-export Challenge from the hook
 export type { Challenge } from "../../hooks/useChallenges";
@@ -13,7 +13,7 @@ export interface ChallengeCountryMapping {
   challenge: Challenge;
   countryName: string | null;
   firstSolver?: string | null;
-  patternIndex?: number;
+  patternPath?: string;
 }
 
 /**
@@ -77,15 +77,15 @@ export function mapChallengesToCountries(
     (challenge, index) => {
       const country = sortedCountries[index];
       const firstSolver = challenge.firstSolver || null;
-      const patternIndex = firstSolver
-        ? getPatternIndexForTeam(firstSolver)
+      const patternPath = firstSolver
+        ? getPatternPathForTeam(firstSolver)
         : undefined;
 
       return {
         challenge,
         countryName: country ? country.name : null,
         firstSolver,
-        patternIndex,
+        patternPath,
       };
     }
   );
@@ -103,18 +103,18 @@ export function getCountriesByChallengeStatus(
 ): {
   solved: Set<string>;
   unsolved: Set<string>;
-  solvedWithPatterns: Map<string, number>;
+  solvedWithPatterns: Map<string, string>;
 } {
   const solved = new Set<string>();
   const unsolved = new Set<string>();
-  const solvedWithPatterns = new Map<string, number>();
+  const solvedWithPatterns = new Map<string, string>();
 
   for (const mapping of mappings) {
     if (mapping.countryName) {
       if (mapping.challenge.solveCount > 0) {
         solved.add(mapping.countryName);
-        if (mapping.patternIndex !== undefined) {
-          solvedWithPatterns.set(mapping.countryName, mapping.patternIndex);
+        if (mapping.patternPath !== undefined) {
+          solvedWithPatterns.set(mapping.countryName, mapping.patternPath);
         }
       } else {
         unsolved.add(mapping.countryName);

balancer/ui/src/lib/challenges/challenge-mapper.ts

@@ -25,7 +25,7 @@ const HIGHLIGHT_START = 1500;
 
 interface SolveSequenceParams {
   countryName: string;
-  patternIndex: number;
+  patternPath: string;
   targetPosition: Vector3;
   capitalWorldPos: Vector3;
   camera: PerspectiveCamera;
@@ -77,7 +77,7 @@ export class SolveSequenceAnimation implements Animation {
       this.params.globeRenderer
         .transitionCountryToSolved(
           this.params.countryName,
-          this.params.patternIndex,
+          this.params.patternPath,
           this.params.themeColors,
           true // animated reveal — starts with u_revealRadius = 0
         )

balancer/ui/src/lib/globe/animations/solve-sequence.ts

@@ -19,13 +19,13 @@ export class CountryGeometryManager {
   totalVertexCount: number = 0;
   countriesWithChallenges: Set<string>;
   solvedCountries: Set<string>;
-  countryPatternMap: Map<string, number>;
+  countryPatternMap: Map<string, string>;
 
   constructor(
     countries: CountryData[],
     solvedCountries: Set<string>,
     countriesWithChallenges: Set<string>,
-    solvedWithPatterns: Map<string, number>
+    solvedWithPatterns: Map<string, string>
   ) {
     this.countriesWithChallenges = countriesWithChallenges;
     this.solvedCountries = solvedCountries;
@@ -106,7 +106,7 @@ export class CountryGeometryManager {
   /**
    * Get the pattern index for a country
    */
-  getPatternIndex(countryName: string): number | undefined {
+  getPatternPath(countryName: string): string | undefined {
     return this.countryPatternMap.get(countryName);
   }
 }

balancer/ui/src/lib/globe/country-geometry.ts

@@ -8,7 +8,6 @@ import {
   ShaderMaterial,
 } from "three";
 
-import { getPatternPathByIndex } from "../patterns/pattern-selector";
 import { TextureCache } from "../patterns/texture-cache";
 
 import { createCapitalMarkers } from "./capital-markers";
@@ -78,16 +77,13 @@ export class GlobeRenderer {
 
     // Create pattern meshes for solved challenges
     for (const { geometry, name } of geometryManager.patternGeometries) {
-      const patternIndex = geometryManager.getPatternIndex(name);
+      const patternPath = geometryManager.getPatternPath(name);
 
-      if (patternIndex === undefined) {
-        console.warn(`No pattern index for country: ${name}`);
+      if (patternPath === undefined) {
+        console.warn(`No pattern path for country: ${name}`);
         continue;
       }
 
-      // Load texture
-      const patternPath = getPatternPathByIndex(patternIndex);
-
       try {
         const texture = await this.textureCache.loadTexture(patternPath);
 
@@ -206,7 +202,7 @@ export class GlobeRenderer {
    */
   async transitionCountryToSolved(
     countryName: string,
-    patternIndex: number,
+    patternPath: string,
     themeColors: { primary: number[]; glowIntensity: number },
     animated = false
   ): Promise<void> {
@@ -222,9 +218,6 @@ export class GlobeRenderer {
       return;
     }
 
-    // Load the pattern texture once
-    const patternPath = getPatternPathByIndex(patternIndex);
-
     try {
       const texture = await this.textureCache.loadTexture(patternPath);
 

balancer/ui/src/lib/globe/globe-renderer.ts

@@ -34,6 +34,9 @@ export function getPatternPathByIndex(index: number): string {
  * Get pattern file path for a team name
  */
 export function getPatternPathForTeam(teamName: string): string {
+  if (teamName === "owasp") {
+    return "/balancer/patterns/special_owasp.png";
+  }
   const index = getPatternIndexForTeam(teamName);
   return getPatternPathByIndex(index);
 }

balancer/ui/src/lib/patterns/pattern-selector.ts

@@ -17,7 +17,7 @@ import {
 } from "@/lib/challenges/challenge-mapper";
 import { CountryGeometryManager } from "@/lib/globe/country-geometry";
 import { loadGeoJSON, type CountryData } from "@/lib/globe/data/geojson-loader";
-import { getPatternIndexForTeam } from "@/lib/patterns/pattern-selector";
+import { getPatternPathForTeam } from "@/lib/patterns/pattern-selector";
 
 // CSS Color Utilities
 function getCSSVariable(name: string): string {
@@ -165,15 +165,15 @@ export default function CtfPage() {
       const countryName =
         preparedData.challengeToCountryMap.get(challenge.key) ?? null;
       const firstSolver = challenge.firstSolver || null;
-      const patternIndex = firstSolver
-        ? getPatternIndexForTeam(firstSolver)
+      const patternPath = firstSolver
+        ? getPatternPathForTeam(firstSolver)
         : undefined;
 
       return {
         challenge,
         countryName,
         firstSolver,
-        patternIndex,
+        patternPath,
       };
     });
 
@@ -207,7 +207,7 @@ export default function CtfPage() {
     globeHandleRef.current.focusAndHighlightCountries(
       newlySolved.map((s) => ({
         countryName: s.countryName,
-        patternIndex: s.patternIndex,
+        patternPath: s.patternPath,
       }))
     );
 
@@ -256,7 +256,7 @@ export default function CtfPage() {
         setLoadingProgress(60);
         let solved = new Set<string>();
         let countriesWithChallenges = new Set<string>();
-        let solvedWithPatterns = new Map<string, number>();
+        let solvedWithPatterns = new Map<string, string>();
         const challengeToCountryMap = new Map<string, string>();
 
         if (challenges.length > 0) {