From 779393106d53f77153cee12bf01bb52471987655 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Lo=C3=AFc=20Gremaud?= <loic.gremaud@arcanite.ch>
Date: Fri, 15 May 2026 03:05:33 +0200
Subject: [PATCH] fix(opus): wrong frontend ordering points -> rank-points

---
 polylan_submitter/src/OpusMagnum.vue         |  34 +--
 polylan_submitter/src/components/Results.vue | 296 ++++++++++---------
 2 files changed, 156 insertions(+), 174 deletions(-)

diff --git a/polylan_submitter/src/OpusMagnum.vue b/polylan_submitter/src/OpusMagnum.vue
index 6dfefd4..1e8cb74 100644
--- a/polylan_submitter/src/OpusMagnum.vue
+++ b/polylan_submitter/src/OpusMagnum.vue
@@ -126,17 +126,10 @@ const goHome = () => {
         <h1 class="text-xl font-bold">Opus Magnum Puzzle Submitter</h1>
         <div class="flex-1"></div>
         <div class="flex items-center gap-4">
-          <div
-            v-if="userInfo?.is_authenticated"
-            class="flex items-center gap-2"
-          >
+          <div v-if="userInfo?.is_authenticated" class="flex items-center gap-2">
             <div class="text-sm">
               <span class="font-medium">{{ userInfo.username }}</span>
-              <span
-                v-if="userInfo.is_superuser"
-                class="badge badge-warning badge-xs ml-1"
-                >Admin</span
-              >
+              <span v-if="userInfo.is_superuser" class="badge badge-warning badge-xs ml-1">Admin</span>
             </div>
           </div>
           <div v-else class="text-sm text-base-content/70">Not logged in</div>
@@ -158,10 +151,7 @@ const goHome = () => {
         </div>
       </div>
 
-      <div
-        v-if="isLoading"
-        class="flex justify-center items-center min-h-[400px]"
-      >
+      <div v-if="isLoading" class="flex justify-center items-center min-h-[400px]">
         <div class="text-center">
           <span class="loading loading-spinner loading-lg"></span>
           <p class="mt-4 text-base-content/70">Loading puzzles...</p>
@@ -210,12 +200,8 @@ const goHome = () => {
 
         <!-- Puzzles Grid -->
         <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-          <PuzzleCard
-            v-for="puzzle in puzzlesStore.puzzles"
-            :key="puzzle.id"
-            :puzzle="puzzle"
-            :responses="responsesByPuzzle[puzzle.id] || []"
-          />
+          <PuzzleCard v-for="puzzle in puzzlesStore.puzzles" :key="puzzle.id" :puzzle="puzzle"
+            :responses="responsesByPuzzle[puzzle.id] || []" />
         </div>
 
         <!-- Empty State -->
@@ -234,18 +220,12 @@ const goHome = () => {
       <div class="modal-box max-w-6xl">
         <div class="flex justify-between items-center mb-4">
           <h3 class="font-bold text-lg">Submit Solution</h3>
-          <button
-            @click="closeSubmissionModal"
-            class="btn btn-sm btn-circle btn-ghost"
-          >
+          <button @click="closeSubmissionModal" class="btn btn-sm btn-circle btn-ghost">
             <i class="mdi mdi-close"></i>
           </button>
         </div>
 
-        <SubmissionForm
-          :puzzles="puzzlesStore.puzzles"
-          :find-puzzle-by-name="findPuzzleByName"
-        />
+        <SubmissionForm :puzzles="puzzlesStore.puzzles" :find-puzzle-by-name="findPuzzleByName" />
       </div>
       <div class="modal-backdrop" @click="closeSubmissionModal"></div>
     </div>
diff --git a/polylan_submitter/src/components/Results.vue b/polylan_submitter/src/components/Results.vue
index e4c3e94..0e03766 100644
--- a/polylan_submitter/src/components/Results.vue
+++ b/polylan_submitter/src/components/Results.vue
@@ -101,7 +101,7 @@ const getPuzzleRanking = (puzzleId: number) => {
       points: response.points,
       rank_points: response.rank_points || 0,
     };
-  });
+  }).reverse();
 };
 
 const togglePuzzleExpanded = (puzzleId: number) => {
@@ -186,7 +186,7 @@ onMounted(() => {
               <div class="text-center">
                 <p class="text-sm text-base-content/70 mb-1">Current Rank</p>
                 <p v-if="userInfo.rank !== null" class="text-4xl font-bold text-primary">
-                  #{{ userInfo.rank }}
+                  <RankBadge :rank="userInfo.rank" />
                 </p>
                 <p v-else class="text-2xl text-base-content/50">No rank yet</p>
               </div>
@@ -223,158 +223,162 @@ onMounted(() => {
               <span class="loading loading-spinner loading-lg"></span>
             </div>
 
-        <div v-else-if="!resultsData" class="text-center py-8">
-          <p class="text-base-content/70">No results available yet</p>
-        </div>
-
-        <div v-else class="space-y-6">
-          <!-- Tabs -->
-          <div class="tabs tabs-boxed">
-            <button @click="selectedTab = 'overall'" :class="[
-              'tab',
-              selectedTab === 'overall' ? 'tab-active' : '',
-            ]">
-              <i class="mdi mdi-chart-line mr-2"></i>
-              Overall Ranking
-            </button>
-            <button @click="selectedTab = 'byPuzzle'" :class="[
-              'tab',
-              selectedTab === 'byPuzzle' ? 'tab-active' : '',
-            ]">
-              <i class="mdi mdi-puzzle mr-2"></i>
-              By Puzzle
-            </button>
-          </div>
-
-          <!-- Overall Ranking -->
-          <div v-show="selectedTab === 'overall'" class="space-y-4">
-            <div v-if="getOverallRanking().length === 0" class="text-center py-8">
-              <p class="text-base-content/70">No submissions yet</p>
+            <div v-else-if="!resultsData" class="text-center py-8">
+              <p class="text-base-content/70">No results available yet</p>
             </div>
 
-            <div v-else class="overflow-x-auto">
-              <table class="table table-zebra w-full">
-                <thead>
-                  <tr>
-                    <th>Rank</th>
-                    <th>Player</th>
-                    <th class="text-right">Puzzles Solved</th>
-                    <th class="text-right">Total Points</th>
-                  </tr>
-                </thead>
-                <tbody>
-                  <tr v-for="(user, index) in getOverallRanking()" :key="user.username">
-                    <td class="font-bold">
-                      <RankBadge :rank="index + 1" />
-                    </td>
-                    <td class="font-medium">{{ user.username }}</td>
-                    <td class="text-right">{{ user.puzzlesSolved }}</td>
-                    <td class="text-right font-bold">{{ user.totalPoints }}</td>
-                  </tr>
-                </tbody>
-              </table>
-            </div>
-          </div>
+            <div v-else class="space-y-6">
+              <!-- Tabs -->
+              <div class="tabs tabs-boxed">
+                <button @click="selectedTab = 'overall'" :class="[
+                  'tab',
+                  selectedTab === 'overall' ? 'tab-active' : '',
+                ]">
+                  <i class="mdi mdi-chart-line mr-2"></i>
+                  Overall Ranking
+                </button>
+                <button @click="selectedTab = 'byPuzzle'" :class="[
+                  'tab',
+                  selectedTab === 'byPuzzle' ? 'tab-active' : '',
+                ]">
+                  <i class="mdi mdi-puzzle mr-2"></i>
+                  By Puzzle
+                </button>
+              </div>
 
-          <!-- By Puzzle Ranking -->
-          <div v-show="selectedTab === 'byPuzzle'" class="space-y-6">
-            <div v-for="puzzle in resultsData.puzzles" :key="puzzle.id" class="card bg-base-100 border border-base-300">
-              <button @click="togglePuzzleExpanded(puzzle.id)"
-                class="btn btn-ghost btn-lg w-full justify-start text-lg font-bold hover:bg-primary/20 rounded-b-none">
-                <i :class="['mdi mr-2', expandedPuzzleId === puzzle.id ? 'mdi-chevron-down' : 'mdi-chevron-right']"></i>
-                {{ puzzle.title }}
-                <span class="ml-auto badge badge-sm">
-                  {{ getPuzzleRanking(puzzle.id).length }} submissions
-                </span>
-              </button>
-
-              <!-- Expanded Details -->
-              <div v-if="expandedPuzzleId === puzzle.id" class="card-body">
-                <div v-if="getPuzzleRanking(puzzle.id).length === 0" class="text-center py-8">
-                  <p class="text-base-content/70 text-lg">No submissions yet</p>
+              <!-- Overall Ranking -->
+              <div v-show="selectedTab === 'overall'" class="space-y-4">
+                <div v-if="getOverallRanking().length === 0" class="text-center py-8">
+                  <p class="text-base-content/70">No submissions yet</p>
                 </div>
 
-                <div v-else class="space-y-6">
-                  <!-- Top 3 Podium -->
-                  <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
-                    <div v-for="(response, index) in getPuzzleRanking(puzzle.id).slice(0, 3)" :key="index"
-                      class="card bg-base-200">
-                      <div class="card-body p-4">
-                        <div class="text-xs text-base-content/70 font-bold">
-                          {{ index === 0 ? '🏆 1st Place' : index === 1 ? '🥈 2nd Place' : '🥉 3rd Place' }}
-                        </div>
-                        <h4 class="font-bold text-lg">{{ response.username }}</h4>
-                        <div class="divider my-2"></div>
-                        <div class="space-y-2 text-sm">
-                          <div class="flex justify-between">
-                            <span>Cost</span>
-                            <span class="badge badge-sm">{{ response.cost || 'N/A' }}</span>
-                          </div>
-                          <div class="flex justify-between">
-                            <span>Cycles</span>
-                            <span class="badge badge-sm">{{ response.cycles || 'N/A' }}</span>
-                          </div>
-                          <div class="flex justify-between">
-                            <span>Area</span>
-                            <span class="badge badge-sm">{{ response.area || 'N/A' }}</span>
-                          </div>
-                          <div class="flex justify-between pt-2 border-t">
-                            <span>Total (with coef.)</span>
-                            <span class="badge badge-sm">{{ response.points || 'N/A' }}</span>
-                          </div>
-                          <div class="flex justify-between pt-2 border-t">
-                            <span class="font-bold">Points</span>
-                            <span class="badge badge-primary">{{ response.rank_points }} pts</span>
+                <div v-else class="overflow-x-auto">
+                  <table class="table table-zebra w-full">
+                    <thead>
+                      <tr>
+                        <th>Rank</th>
+                        <th>Player</th>
+                        <th class="text-right">Puzzles Solved</th>
+                        <th class="text-right">Total Points</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr v-for="(user, index) in getOverallRanking()" :key="user.username">
+                        <td class="font-bold">
+                          <RankBadge :rank="index + 1" />
+                        </td>
+                        <td class="font-medium">{{ user.username }}</td>
+                        <td class="text-right">{{ user.puzzlesSolved }}</td>
+                        <td class="text-right font-bold">{{ user.totalPoints }}</td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+
+              <!-- By Puzzle Ranking -->
+              <div v-show="selectedTab === 'byPuzzle'" class="space-y-6">
+                <div v-for="puzzle in resultsData.puzzles" :key="puzzle.id"
+                  class="card bg-base-100 border border-base-300">
+                  <button @click="togglePuzzleExpanded(puzzle.id)"
+                    class="btn btn-ghost btn-lg w-full justify-start text-lg font-bold hover:bg-primary/20 rounded-b-none">
+                    <i
+                      :class="['mdi mr-2', expandedPuzzleId === puzzle.id ? 'mdi-chevron-down' : 'mdi-chevron-right']"></i>
+                    {{ puzzle.title }}
+                    <span class="ml-auto badge badge-sm">
+                      {{ getPuzzleRanking(puzzle.id).length }} submissions
+                    </span>
+                  </button>
+
+                  <!-- Expanded Details -->
+                  <div v-if="expandedPuzzleId === puzzle.id" class="card-body">
+                    <div v-if="getPuzzleRanking(puzzle.id).length === 0" class="text-center py-8">
+                      <p class="text-base-content/70 text-lg">No submissions yet</p>
+                    </div>
+
+                    <div v-else class="space-y-6">
+                      <!-- Top 3 Podium -->
+                      <div class="grid grid-cols-1 md:grid-cols-3 gap-4">
+                        <div v-for="(response, index) in getPuzzleRanking(puzzle.id).slice(0, 3)" :key="index"
+                          class="card bg-base-200">
+                          <div class="card-body p-4">
+                            <div class="text-xs text-base-content/70 font-bold">
+                              {{ index === 0 ? '🏆 1st Place' : index === 1 ? '🥈 2nd Place' : '🥉 3rd Place' }}
+                            </div>
+                            <h4 class="font-bold text-lg">{{ response.username }}</h4>
+                            <div class="divider my-2"></div>
+                            <div class="space-y-2 text-sm">
+                              <div class="flex justify-between">
+                                <span>Cost</span>
+                                <span class="badge badge-sm">{{ response.cost || 'N/A' }}</span>
+                              </div>
+                              <div class="flex justify-between">
+                                <span>Cycles</span>
+                                <span class="badge badge-sm">{{ response.cycles || 'N/A' }}</span>
+                              </div>
+                              <div class="flex justify-between">
+                                <span>Area</span>
+                                <span class="badge badge-sm">{{ response.area || 'N/A' }}</span>
+                              </div>
+                              <div class="flex justify-between pt-2 border-t">
+                                <span>Total (with coef.)</span>
+                                <span class="badge badge-sm">{{ response.points || 'N/A' }}</span>
+                              </div>
+                              <div class="flex justify-between pt-2 border-t">
+                                <span class="font-bold">Points</span>
+                                <span class="badge badge-primary">{{ response.rank_points }} pts</span>
+                              </div>
+                            </div>
                           </div>
                         </div>
                       </div>
-                    </div>
-                  </div>
 
-                  <!-- Full Ranking Table -->
-                  <div class="overflow-x-auto">
-                    <table class="table table-zebra w-full table-sm">
-                      <thead>
-                        <tr>
-                          <th class="w-12">Rank</th>
-                          <th>Player</th>
-                          <th class="text-center">Cost</th>
-                          <th class="text-center">Cycles</th>
-                          <th class="text-center">Area</th>
-                          <th class="text-center">Total (with coef.)</th>
-                          <th class="text-right">Points</th>
-                        </tr>
-                      </thead>
-                      <tbody>
-                        <tr v-for="(response, index) in getPuzzleRanking(puzzle.id)" :key="index"
-                          :class="{ 'bg-primary/10': index < 3 }">
-                          <td class="font-bold">
-                            <span v-if="index === 0" class="badge badge-warning">🏆</span>
-                            <span v-else-if="index === 1" class="badge">🥈</span>
-                            <span v-else-if="index === 2" class="badge">🥉</span>
-                            <span v-else>#{{ index + 1 }}</span>
-                          </td>
-                          <td class="font-medium">{{ response.username }}</td>
-                          <td class="text-center">
-                            <span v-if="response.cost" class="badge badge-sm">{{ response.cost }}</span>
-                            <span v-else class="text-base-content/40">—</span>
-                          </td>
-                          <td class="text-center">
-                            <span v-if="response.cycles" class="badge badge-sm">{{ response.cycles }}</span>
-                            <span v-else class="text-base-content/40">—</span>
-                          </td>
-                          <td class="text-center">
-                            <span v-if="response.area" class="badge badge-sm">{{ response.area }}</span>
-                            <span v-else class="text-base-content/40">—</span>
-                          </td>
-                          <td class="text-center">
-                            <span v-if="response.points" class="badge badge-sm">{{ response.points }}</span>
-                            <span v-else class="text-base-content/40">—</span>
-                          </td>
-                          <td class="text-right font-bold text-primary text-lg">{{ response.rank_points }}</td>
-                        </tr>
-                      </tbody>
-                    </table>
+                      <!-- Full Ranking Table -->
+                      <div class="overflow-x-auto">
+                        <table class="table table-zebra w-full table-sm">
+                          <thead>
+                            <tr>
+                              <th class="w-12">Rank</th>
+                              <th>Player</th>
+                              <th class="text-center">Cost</th>
+                              <th class="text-center">Cycles</th>
+                              <th class="text-center">Area</th>
+                              <th class="text-center">Total (with coef.)</th>
+                              <th class="text-right">Points</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            <tr v-for="(response, index) in getPuzzleRanking(puzzle.id)" :key="index"
+                              :class="{ 'bg-primary/10': index < 3 }">
+                              <td class="font-bold">
+                                <span v-if="index === 0" class="badge badge-warning">🏆</span>
+                                <span v-else-if="index === 1" class="badge">🥈</span>
+                                <span v-else-if="index === 2" class="badge">🥉</span>
+                                <span v-else>#{{ index + 1 }}</span>
+                              </td>
+                              <td class="font-medium">{{ response.username }}</td>
+                              <td class="text-center">
+                                <span v-if="response.cost" class="badge badge-sm">{{ response.cost }}</span>
+                                <span v-else class="text-base-content/40">—</span>
+                              </td>
+                              <td class="text-center">
+                                <span v-if="response.cycles" class="badge badge-sm">{{ response.cycles }}</span>
+                                <span v-else class="text-base-content/40">—</span>
+                              </td>
+                              <td class="text-center">
+                                <span v-if="response.area" class="badge badge-sm">{{ response.area }}</span>
+                                <span v-else class="text-base-content/40">—</span>
+                              </td>
+                              <td class="text-center">
+                                <span v-if="response.points" class="badge badge-sm">{{ response.points }}</span>
+                                <span v-else class="text-base-content/40">—</span>
+                              </td>
+                              <td class="text-right font-bold text-primary text-lg">{{ response.rank_points }}</td>
+                            </tr>
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
                   </div>
                 </div>
               </div>
@@ -382,8 +386,6 @@ onMounted(() => {
           </div>
         </div>
       </div>
-        </div>
-      </div>
     </div>
   </div>
 </template>