Replace 19-badge system with 200 badges across Building & Exploration tracks

Two tracks: Building (100 badges, edits 1→1M cubic curve) and Exploration
(100 badges, cells completed 1→50K cubic curve). Badge images served as
external PNGs from center-art/ instead of base64. Profile, leaderboard,
weekly recap, and achievement toast all updated for dual-track display.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

Author: amyleesterling

scripts/deploy-gh-pages.sh

@@ -15,6 +15,15 @@ git clone --depth 1 "$DEPLOY_REPO" "$DEPLOY_DIR"
 rm -rf "$DEPLOY_DIR"/*
 cp -r dist/min/* "$DEPLOY_DIR/"
 
+# Copy badge center-art PNGs
+BADGE_ART="../Documents/New project/static/badges/pyr/center-art"
+if [ -d "$BADGE_ART" ]; then
+  echo "Copying badge center-art..."
+  mkdir -p "$DEPLOY_DIR/center-art/building" "$DEPLOY_DIR/center-art/exploration"
+  cp "$BADGE_ART/building/"*.png "$DEPLOY_DIR/center-art/building/" 2>/dev/null || true
+  cp "$BADGE_ART/exploration/"*.png "$DEPLOY_DIR/center-art/exploration/" 2>/dev/null || true
+fi
+
 cd "$DEPLOY_DIR"
 git add -A
 git commit -m "Deploy $(date +%Y-%m-%d\ %H:%M)" --allow-empty

src/components/AchievementToast.vue

@@ -10,7 +10,7 @@
 import { ref, watch, onMounted, nextTick } from 'vue';
 import { storeToRefs } from 'pinia';
 import { useUserStatsStore, useProofreadingQueueStore } from '../store';
-import { BADGE_DEFINITIONS, BadgeDefinition } from '../widgets/badge_definitions';
+import { BUILDING_BADGES, EXPLORATION_BADGES, BadgeDefinition, statKeyForTrack } from '../widgets/badge_definitions';
 import { BADGE_IMAGE_MAP } from '../widgets/badge_images';
 import ConfettiCelebration from 'components/ConfettiCelebration.vue';
 
@@ -76,14 +76,14 @@ onMounted(() => {
   setTimeout(() => { confettiRef.value?.sparkle(2); }, 800);
 });
 
-// Watch for badge unlocks
+// Watch for building badge unlocks (edits)
 watch(() => stats.value.editsAllTime, (newEdits) => {
   if (!initialized) { prevEdits = newEdits; return; }
   // First real update after init — just capture baseline, don't celebrate
   if (!statsSeenNonZero && newEdits > 0) { statsSeenNonZero = true; prevEdits = newEdits; return; }
-  for (const badge of BADGE_DEFINITIONS) {
-    if (badge.editThreshold <= 0) continue;
-    if (prevEdits < badge.editThreshold && newEdits >= badge.editThreshold) {
+  for (const badge of BUILDING_BADGES) {
+    if (badge.threshold <= 0) continue;
+    if (prevEdits < badge.threshold && newEdits >= badge.threshold) {
       const imgUrl = BADGE_IMAGE_MAP[badge.imageKey] ?? '';
       addToast({
         type: 'badge',
@@ -92,8 +92,7 @@ watch(() => stats.value.editsAllTime, (newEdits) => {
         icon: imgUrl || '🏅',
         isImage: !!imgUrl,
       });
-      // 🎊 Confetti for badge unlocks!
-      fireConfetti('purple', badge.editThreshold >= 1000 ? 2 : 1);
+      fireConfetti('purple', badge.threshold >= 1000 ? 2 : 1);
     }
   }
   // Edit milestones (round numbers) — confetti scales with milestone size
@@ -107,7 +106,6 @@ watch(() => stats.value.editsAllTime, (newEdits) => {
         icon: '⚡',
         isImage: false,
       });
-      // 🎊 Confetti intensity scales with milestone
       const intensity = m >= 10000 ? 3 : m >= 1000 ? 2 : 1;
       const palette = m >= 10000 ? 'rainbow' : m >= 1000 ? 'gold' : 'cyan';
       fireConfetti(palette, intensity);
@@ -116,9 +114,25 @@ watch(() => stats.value.editsAllTime, (newEdits) => {
   prevEdits = newEdits;
 });
 
-// Watch for cell milestones
+// Watch for exploration badge unlocks + cell milestones
 watch(() => stats.value.cellsSubmitted, (newCells) => {
   if (!initialized) { prevCells = newCells; return; }
+  // Exploration badge unlocks
+  for (const badge of EXPLORATION_BADGES) {
+    if (badge.threshold <= 0) continue;
+    if (prevCells < badge.threshold && newCells >= badge.threshold) {
+      const imgUrl = BADGE_IMAGE_MAP[badge.imageKey] ?? '';
+      addToast({
+        type: 'badge',
+        title: `Badge Unlocked: ${badge.name}`,
+        subtitle: badge.description,
+        icon: imgUrl || '🏅',
+        isImage: !!imgUrl,
+      });
+      fireConfetti('purple', badge.threshold >= 500 ? 2 : 1);
+    }
+  }
+  // Cell milestones
   for (const m of CELL_MILESTONES) {
     if (prevCells < m && newCells >= m) {
       addToast({

src/components/LeaderboardPanel.vue

@@ -3,7 +3,7 @@ import {ref, computed, onMounted} from 'vue';
 import {storeToRefs} from 'pinia';
 import ModalOverlay from 'components/ModalOverlay.vue';
 import {DEMO_USERS, DemoUser} from '../data/demo-users';
-import {BADGE_DEFINITIONS} from '../widgets/badge_definitions';
+import {BADGE_DEFINITIONS, BUILDING_BADGES, EXPLORATION_BADGES, BadgeDefinition} from '../widgets/badge_definitions';
 import {BADGE_IMAGE_MAP} from '../widgets/badge_images';
 import {useUserPreferencesStore, useProofreadingBackendStore} from '../store';
 
@@ -60,6 +60,13 @@ function editCountForTab(user: DemoUser): number {
 }
 
 // Badges helpers
+function isBadgeEarnedByUser(badge: BadgeDefinition, user: DemoUser): boolean {
+  if (badge.threshold === 0) return false;
+  const stat = badge.track === 'building' ? user.stats.editsAllTime : user.stats.cellsSubmitted;
+  return stat >= badge.threshold;
+}
+
+// Legacy compat wrapper
 function isBadgeEarned(editThreshold: number, editsAllTime: number): boolean {
   if (editThreshold === 0) return false;
   return editsAllTime >= editThreshold;
@@ -69,11 +76,11 @@ function getBadgeUrl(imageKey: string): string {
   return BADGE_IMAGE_MAP[imageKey] ?? '';
 }
 
-// Top earned badge for the leaderboard row (highest threshold)
+// Top earned badge for the leaderboard row (highest threshold from either track)
 function topBadge(user: DemoUser) {
   return BADGE_DEFINITIONS
-    .filter(b => b.editThreshold > 0 && user.stats.editsAllTime >= b.editThreshold)
-    .sort((a, b) => b.editThreshold - a.editThreshold)[0] ?? null;
+    .filter(b => b.threshold > 0 && isBadgeEarnedByUser(b, user))
+    .sort((a, b) => b.threshold - a.threshold)[0] ?? null;
 }
 
 function selectUser(user: DemoUser) {
@@ -238,25 +245,60 @@ const emit = defineEmits({hide: null});
             </span>
           </div>
 
-          <!-- Badges -->
-          <div class="nge-lb-detail-badges-label">Badges</div>
+          <!-- Building Badges -->
+          <div class="nge-lb-detail-badges-label" style="color: #ffd08a;">Building Badges <span style="font-size: 0.75em; opacity: 0.6;">(edits)</span></div>
+          <div class="nge-lb-detail-badges-grid">
+            <div
+              v-for="badge in BUILDING_BADGES"
+              :key="badge.id"
+              class="nge-lb-detail-badge"
+              :class="{
+                'nge-lb-detail-badge--locked': !isBadgeEarnedByUser(badge, selectedUser),
+                'nge-lb-detail-badge--selected': selectedBadgeId === badge.id,
+              }"
+              :title="isBadgeEarnedByUser(badge, selectedUser)
+                ? badge.name + ' — click for details'
+                : '??? (locked)'"
+              @click="isBadgeEarnedByUser(badge, selectedUser)
+                ? onDetailBadgeClick(badge.id)
+                : undefined"
+            >
+              <template v-if="isBadgeEarnedByUser(badge, selectedUser)">
+                <div class="nge-lb-detail-badge-img">
+                  <img :src="getBadgeUrl(badge.imageKey)" :alt="badge.name" class="nge-lb-detail-badge-icon" />
+                </div>
+                <div class="nge-lb-detail-badge-name">{{ badge.name }}</div>
+              </template>
+              <template v-else>
+                <div class="nge-lb-detail-badge-img">
+                  <div class="nge-lb-detail-badge-mystery">
+                    <span class="nge-lb-detail-badge-mystery-q">?</span>
+                  </div>
+                </div>
+                <div class="nge-lb-detail-badge-name nge-lb-detail-badge-name--locked">???</div>
+              </template>
+            </div>
+          </div>
+
+          <!-- Exploration Badges -->
+          <div class="nge-lb-detail-badges-label" style="color: #90fff2;">Exploration Badges <span style="font-size: 0.75em; opacity: 0.6;">(cells)</span></div>
           <div class="nge-lb-detail-badges-grid">
             <div
-              v-for="badge in BADGE_DEFINITIONS"
+              v-for="badge in EXPLORATION_BADGES"
               :key="badge.id"
               class="nge-lb-detail-badge"
               :class="{
-                'nge-lb-detail-badge--locked': !isBadgeEarned(badge.editThreshold, selectedUser.stats.editsAllTime),
+                'nge-lb-detail-badge--locked': !isBadgeEarnedByUser(badge, selectedUser),
                 'nge-lb-detail-badge--selected': selectedBadgeId === badge.id,
               }"
-              :title="isBadgeEarned(badge.editThreshold, selectedUser.stats.editsAllTime)
+              :title="isBadgeEarnedByUser(badge, selectedUser)
                 ? badge.name + ' — click for details'
                 : '??? (locked)'"
-              @click="isBadgeEarned(badge.editThreshold, selectedUser.stats.editsAllTime)
+              @click="isBadgeEarnedByUser(badge, selectedUser)
                 ? onDetailBadgeClick(badge.id)
                 : undefined"
             >
-              <template v-if="isBadgeEarned(badge.editThreshold, selectedUser.stats.editsAllTime)">
+              <template v-if="isBadgeEarnedByUser(badge, selectedUser)">
                 <div class="nge-lb-detail-badge-img">
                   <img :src="getBadgeUrl(badge.imageKey)" :alt="badge.name" class="nge-lb-detail-badge-icon" />
                 </div>
@@ -285,7 +327,7 @@ const emit = defineEmits({hide: null});
                 <div class="nge-lb-detail-badge-card-name">{{ selectedBadgeDef()?.name }}</div>
                 <div class="nge-lb-detail-badge-card-desc">{{ selectedBadgeDef()?.description }}</div>
                 <div class="nge-lb-detail-badge-card-thresh">
-                  Unlocked at {{ selectedBadgeDef()?.editThreshold.toLocaleString() }} edits
+                  Unlocked at {{ selectedBadgeDef()?.threshold.toLocaleString() }} {{ selectedBadgeDef()?.track === 'building' ? 'edits' : 'cells completed' }}
                 </div>
               </div>
               <button class="nge-lb-detail-badge-card-close" @click.stop="selectedBadgeId = null">×</button>

src/components/UserProfilePanel.vue

@@ -4,7 +4,7 @@ import {storeToRefs} from 'pinia';
 import ModalOverlay from 'components/ModalOverlay.vue';
 
 import {useLoginStore, useUserStatsStore, useUserPreferencesStore, useCellHistoryStore, useProofreadingBackendStore, CellHistoryEntry} from '../store';
-import {BADGE_DEFINITIONS, BadgeDefinition} from '../widgets/badge_definitions';
+import {BADGE_DEFINITIONS, BUILDING_BADGES, EXPLORATION_BADGES, BadgeDefinition, BadgeTrack, statKeyForTrack} from '../widgets/badge_definitions';
 import {BADGE_IMAGE_MAP} from '../widgets/badge_images';
 import {DEMO_USERS, DEMO_COMMUNITY_EDITS_WEEK, DEMO_COMMUNITY_EDITS_MONTH} from '../data/demo-users';
 
@@ -272,27 +272,47 @@ function getBadgeUrl(imageKey: string): string {
   return BADGE_IMAGE_MAP[imageKey] ?? '';
 }
 
-function isBadgeEarned(editThreshold: number): boolean {
-  if (editThreshold === 0) return false;
-  return (stats.value.editsAllTime ?? 0) >= editThreshold;
+/** Get the player's current count for a given track. */
+function statForTrack(track: BadgeTrack): number {
+  return track === 'building'
+    ? (stats.value.editsAllTime ?? 0)
+    : (stats.value.cellsSubmitted ?? 0);
+}
+
+function isBadgeEarned(badge: BadgeDefinition): boolean {
+  if (badge.threshold === 0) return false;
+  return statForTrack(badge.track) >= badge.threshold;
 }
 
 function onBadgeClick(badge: BadgeDefinition) {
-  if (!isBadgeEarned(badge.editThreshold)) return;
+  if (!isBadgeEarned(badge)) return;
   // Toggle: click same badge again to return to cells canvas
   selectedBadge.value = selectedBadge.value?.id === badge.id ? null : badge;
 }
 
-// ── Achievement countdown ─────────────────────────────────────────────────────
+/** Label for the threshold in badge detail. */
+function thresholdLabel(badge: BadgeDefinition): string {
+  return badge.track === 'building' ? 'edits' : 'cells completed';
+}
+
+// ── Achievement countdown (shows next badge across both tracks) ──────────────
 const nextAchievement = computed(() => {
-  const allTime = stats.value.editsAllTime ?? 0;
-  const sorted = [...BADGE_DEFINITIONS].filter(b => b.editThreshold > 0).sort((a, b) => a.editThreshold - b.editThreshold);
-  const next = sorted.find(b => allTime < b.editThreshold);
-  if (!next) return null;
-  const prev = sorted[sorted.indexOf(next) - 1]?.editThreshold ?? 0;
-  const remaining = next.editThreshold - allTime;
-  const pct = Math.min(100, Math.round(((allTime - prev) / (next.editThreshold - prev)) * 100));
-  return { name: next.name, threshold: next.editThreshold, remaining, pct };
+  // Find next unearned badge from each track, show whichever is closer
+  function nextFor(badges: BadgeDefinition[], current: number) {
+    const sorted = [...badges].filter(b => b.threshold > 0).sort((a, b) => a.threshold - b.threshold);
+    const next = sorted.find(b => current < b.threshold);
+    if (!next) return null;
+    const prev = sorted[sorted.indexOf(next) - 1]?.threshold ?? 0;
+    const remaining = next.threshold - current;
+    const pct = Math.min(100, Math.round(((current - prev) / (next.threshold - prev)) * 100));
+    return { name: next.name, threshold: next.threshold, remaining, pct, track: next.track as BadgeTrack };
+  }
+  const building = nextFor(BUILDING_BADGES, stats.value.editsAllTime ?? 0);
+  const exploration = nextFor(EXPLORATION_BADGES, stats.value.cellsSubmitted ?? 0);
+  // Prefer whichever has fewer remaining (closer to unlock)
+  if (!building) return exploration;
+  if (!exploration) return building;
+  return building.remaining <= exploration.remaining ? building : exploration;
 });
 
 // ── Current dataset helper (for filtering cells) ────────────────────────────
@@ -571,7 +591,7 @@ const emit = defineEmits({hide: null, 'open-settings': null});
             <div class="nge-profile-section-label nge-profile-section-label--green">▌ Next Achievement</div>
             <div class="nge-profile-countdown-row">
               <div class="nge-profile-countdown-name">{{ nextAchievement.name }}</div>
-              <div class="nge-profile-countdown-remaining">{{ nextAchievement.remaining.toLocaleString() }} edits to go</div>
+              <div class="nge-profile-countdown-remaining">{{ nextAchievement.remaining.toLocaleString() }} {{ nextAchievement.track === 'building' ? 'edits' : 'cells' }} to go</div>
             </div>
             <div class="nge-profile-countdown-track">
               <div class="nge-profile-countdown-fill" :style="{ width: nextAchievement.pct + '%' }"></div>
@@ -583,27 +603,65 @@ const emit = defineEmits({hide: null, 'open-settings': null});
             </div>
           </div>
 
-          <!-- Badges -->
+          <!-- Building Badges (edits) -->
           <div class="nge-profile-section nge-profile-section--badges">
-            <div class="nge-profile-section-label">▌ Badges</div>
-            <div class="nge-profile-badges-hint" v-if="selectedBadge">
+            <div class="nge-profile-section-label" style="color: #ffd08a;">▌ Building Badges <span style="font-size: 0.75em; opacity: 0.6;">(edits)</span></div>
+            <div class="nge-profile-badges-hint" v-if="selectedBadge?.track === 'building'">
               badge detail on the right · click again to dismiss
             </div>
             <div class="nge-profile-badges-grid">
               <div
-                v-for="badge in BADGE_DEFINITIONS"
+                v-for="badge in BUILDING_BADGES"
                 :key="badge.id"
                 class="nge-profile-badge"
                 :class="{
-                  'nge-profile-badge--locked':   !isBadgeEarned(badge.editThreshold),
+                  'nge-profile-badge--locked':   !isBadgeEarned(badge),
                   'nge-profile-badge--selected': selectedBadge?.id === badge.id,
                 }"
-                :title="isBadgeEarned(badge.editThreshold)
+                :title="isBadgeEarned(badge)
                   ? badge.name + ' — click to see detail'
                   : '??? — keep editing to unlock!'"
                 @click="onBadgeClick(badge)"
               >
-                <template v-if="isBadgeEarned(badge.editThreshold)">
+                <template v-if="isBadgeEarned(badge)">
+                  <div class="nge-profile-badge-img">
+                    <img :src="getBadgeUrl(badge.imageKey)" :alt="badge.name" class="nge-profile-badge-icon" />
+                  </div>
+                  <div class="nge-profile-badge-name">{{ badge.name }}</div>
+                </template>
+                <template v-else>
+                  <div class="nge-profile-badge-img">
+                    <div class="nge-profile-badge-mystery">
+                      <span class="nge-profile-badge-mystery-q">?</span>
+                    </div>
+                  </div>
+                  <div class="nge-profile-badge-name nge-profile-badge-name--locked">???</div>
+                </template>
+              </div>
+            </div>
+          </div>
+
+          <!-- Exploration Badges (cells completed) -->
+          <div class="nge-profile-section nge-profile-section--badges">
+            <div class="nge-profile-section-label" style="color: #90fff2;">▌ Exploration Badges <span style="font-size: 0.75em; opacity: 0.6;">(cells)</span></div>
+            <div class="nge-profile-badges-hint" v-if="selectedBadge?.track === 'exploration'">
+              badge detail on the right · click again to dismiss
+            </div>
+            <div class="nge-profile-badges-grid">
+              <div
+                v-for="badge in EXPLORATION_BADGES"
+                :key="badge.id"
+                class="nge-profile-badge"
+                :class="{
+                  'nge-profile-badge--locked':   !isBadgeEarned(badge),
+                  'nge-profile-badge--selected': selectedBadge?.id === badge.id,
+                }"
+                :title="isBadgeEarned(badge)
+                  ? badge.name + ' — click to see detail'
+                  : '??? — complete more cells to unlock!'"
+                @click="onBadgeClick(badge)"
+              >
+                <template v-if="isBadgeEarned(badge)">
                   <div class="nge-profile-badge-img">
                     <img :src="getBadgeUrl(badge.imageKey)" :alt="badge.name" class="nge-profile-badge-icon" />
                   </div>
@@ -708,7 +766,7 @@ const emit = defineEmits({hide: null, 'open-settings': null});
               <div class="nge-profile-viz-badge-desc">{{ selectedBadge.description }}</div>
               <div class="nge-profile-viz-badge-threshold">
                 Unlocked at<br>
-                <strong>{{ selectedBadge.editThreshold.toLocaleString() }}</strong> edits
+                <strong>{{ selectedBadge.threshold.toLocaleString() }}</strong> {{ thresholdLabel(selectedBadge) }}
               </div>
               <button class="nge-profile-viz-badge-back" @click="selectedBadge = null">
                 ← Back to cells map