@xcpcio/board-app 0.83.2 → 0.85.3

package/src/components/board/PendingPage.vue

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { Rank, SelectOptionItem } from "@xcpcio/core";
 import type { Lang } from "@xcpcio/types";
+import type { SegmentedControlOption } from "../common/SegmentedControl.vue";
 
 const props = defineProps<{
   rank: Rank;
@@ -11,6 +12,15 @@ const lang = computed(() => locale.value as unknown as Lang);
 
 const rank = computed(() => props.rank);
 
+// Tab state - only show seat map tab if config exists
+const hasSeatMap = computed(() => !!rank.value.contest.seatMap);
+const currentTab = ref<"teams" | "seat-map">("teams");
+
+const tabOptions = computed<SegmentedControlOption[]>(() => [
+  { value: "teams", label: t("pending_page.teams_tab") },
+  { value: "seat-map", label: t("pending_page.seat_map_tab") },
+]);
+
 const orgOptions = computed(() => {
   return rank.value.organizations.map((o) => {
     return {
@@ -99,72 +109,100 @@ const hasFilters = computed(() => {
     || rank.value.originTeams.length > 0
     || rank.value.contest.group.size > 0;
 });
+
+// Compute filtered team IDs for seat map highlighting
+const filteredTeamIds = computed(() => {
+  return new Set(filteredTeams.value.map(t => t.id));
+});
 </script>
 
 <template>
   <div class="w-full">
     <div
-      v-if="hasFilters"
+      v-if="hasFilters || hasSeatMap"
       flex="~ wrap gap-3 items-center"
-      mb="4"
+      mb-6
     >
-      <div
-        v-if="groupOptions.length > 0"
-        w-48
-      >
-        <TheMultiSelect
-          :options="groupOptions"
-          :selected-options="groupSelectedItems"
-          :placeholder="t('standings.group')"
-          @select="groupOnSelect"
-        />
+      <!-- Filters on the left -->
+      <div flex="~ wrap gap-3 items-center" flex-1>
+        <div
+          v-if="groupOptions.length > 0"
+          w-48
+        >
+          <TheMultiSelect
+            :options="groupOptions"
+            :selected-options="groupSelectedItems"
+            :placeholder="t('standings.group')"
+            @select="groupOnSelect"
+          />
+        </div>
+
+        <div
+          v-if="rank.contest.options.enableOrganization && orgOptions.length > 0"
+          w-80
+        >
+          <TheMultiSelect
+            :options="orgOptions"
+            :selected-options="orgSelectedItems"
+            :placeholder="t('standings.organization')"
+            @select="orgOnSelect"
+          />
+        </div>
+
+        <div
+          v-if="teamsOptions.length > 0"
+          w-80
+        >
+          <TheMultiSelect
+            :options="teamsOptions"
+            :selected-options="teamsSelectedItems"
+            :placeholder="t('standings.team')"
+            @select="teamsOnSelect"
+          />
+        </div>
       </div>
 
+      <!-- Tab switcher on the right side -->
+      <SegmentedControl
+        v-if="hasSeatMap"
+        v-model="currentTab"
+        :options="tabOptions"
+      />
+    </div>
+
+    <!-- Teams Grid View -->
+    <template v-if="currentTab === 'teams'">
       <div
-        v-if="rank.contest.options.enableOrganization && orgOptions.length > 0"
-        w-116
+        v-if="hasTeams"
+        class="grid gap-4"
+        grid="~ cols-1 sm:cols-2 lg:cols-3 xl:cols-4"
       >
-        <TheMultiSelect
-          :options="orgOptions"
-          :selected-options="orgSelectedItems"
-          :placeholder="t('standings.organization')"
-          @select="orgOnSelect"
+        <TeamCard
+          v-for="team in filteredTeams"
+          :key="team.id"
+          :rank="rank"
+          :team="team"
         />
       </div>
 
       <div
-        v-if="teamsOptions.length > 0"
-        w-116
+        v-else
+        flex="~ col items-center justify-center"
+        py="12"
+        text="gray-500 dark:gray-400"
       >
-        <TheMultiSelect
-          :options="teamsOptions"
-          :selected-options="teamsSelectedItems"
-          :placeholder="t('standings.team')"
-          @select="teamsOnSelect"
-        />
+        <span text="lg">{{ t("pending_page.no_teams") }}</span>
       </div>
-    </div>
+    </template>
 
-    <div
-      v-if="hasTeams"
-      class="grid gap-4"
-      grid="~ cols-1 sm:cols-2 lg:cols-3 xl:cols-4"
-    >
-      <TeamCard
-        v-for="team in filteredTeams"
-        :key="team.id"
+    <!-- Seat Map View -->
+    <template v-else-if="currentTab === 'seat-map' && hasSeatMap">
+      <SeatMapView
         :rank="rank"
-        :team="team"
+        :seat-map="rank.contest.seatMap!"
+        :filtered-team-ids="filteredTeamIds"
+        :all-teams="rank.originTeams"
       />
-    </div>
-
-    <div
-      v-else
-      flex="~ col items-center justify-center"
-      py="12"
-      text="gray-500 dark:gray-400"
-    >
-      <span text="lg">{{ t("pending_page.no_teams") }}</span>
-    </div>
+    </template>
   </div>
 </template>

package/src/components/board/Progress.vue

@@ -18,6 +18,7 @@ const rankOptions = computed({
     return props!.rankOptions;
   },
   set(value) {
+    // eslint-disable-next-line vue/custom-event-name-casing
     emit("update:rank-options", value);
   },
 });

package/src/components/board/SeatMapView.vue

@@ -0,0 +1,265 @@
+<script setup lang="ts">
+import type { Rank, SeatMap, SeatMapSection, Team } from "@xcpcio/core";
+import type { Lang } from "@xcpcio/types";
+
+const props = defineProps<{
+  rank: Rank;
+  seatMap: SeatMap;
+  filteredTeamIds: Set<string>;
+  allTeams: Team[];
+}>();
+
+const { locale } = useI18n();
+const lang = computed(() => locale.value as unknown as Lang);
+
+// === Seat Sizing ===
+const SEAT_HEIGHT = 24;
+const GAP_SIZE = 4;
+const FONT_SIZE = 10;
+const SEAT_PADDING = 8;
+
+// Calculate max seat ID length in a section
+function getMaxSeatIdLength(section: SeatMapSection): number {
+  let maxLen = 2; // minimum 2 characters
+  for (const row of section.grid) {
+    for (const seatId of row) {
+      if (seatId && seatId.length > maxLen) {
+        maxLen = seatId.length;
+      }
+    }
+  }
+  return maxLen;
+}
+
+// Calculate seat width based on max seat ID length
+function getSeatWidth(section: SeatMapSection): number {
+  const maxLen = getMaxSeatIdLength(section);
+  const charWidth = FONT_SIZE * 0.6;
+  return Math.round(maxLen * charWidth + SEAT_PADDING);
+}
+
+// Build seat ID to team mapping
+const seatToTeam = computed(() => {
+  return props.seatMap.buildSeatToTeamMap(props.allTeams);
+});
+
+// Get team for a given seat
+function getTeamForSeat(seatId: string | null): Team | undefined {
+  if (!seatId) {
+    return undefined;
+  }
+  return seatToTeam.value.get(seatId);
+}
+
+// Get tooltip content for a seat
+function getTooltipContent(seatId: string): string {
+  const team = getTeamForSeat(seatId);
+  if (!team) {
+    return seatId;
+  }
+
+  const name = team.name.getOrDefault(lang.value);
+  const org = team.organization?.name.getOrDefault(lang.value);
+  return org ? `${name} - ${org}` : name;
+}
+
+// Check if a seat's team should be highlighted
+function isSeatHighlighted(seatId: string | null): boolean {
+  const team = getTeamForSeat(seatId);
+  if (!team) {
+    return false;
+  }
+  return props.filteredTeamIds.size === 0 || props.filteredTeamIds.has(team.id);
+}
+
+// Get max columns in the grid
+function getMaxCols(section: SeatMapSection): number {
+  if (section.grid.length === 0) {
+    return 0;
+  }
+  return Math.max(...section.grid.map(row => row.length));
+}
+
+// Normalize row to have consistent column count
+function getNormalizedRow(row: Array<string | null>, maxCols: number): Array<string | null> {
+  if (row.length >= maxCols) {
+    return row;
+  }
+  return [...row, ...Array.from({ length: maxCols - row.length }).fill(null) as Array<string | null>];
+}
+
+// Get grid style for a section
+function getSectionGridStyle(section: SeatMapSection) {
+  const cols = getMaxCols(section);
+  const width = getSeatWidth(section);
+  return {
+    display: "grid",
+    gridTemplateColumns: `repeat(${cols}, ${width}px)`,
+    gap: `${GAP_SIZE}px`,
+  };
+}
+
+function getSeatStyle(section: SeatMapSection) {
+  return {
+    width: `${getSeatWidth(section)}px`,
+    height: `${SEAT_HEIGHT}px`,
+    fontSize: `${FONT_SIZE}px`,
+  };
+}
+
+function getRowLabelStyle() {
+  return {
+    height: `${SEAT_HEIGHT}px`,
+    marginBottom: `${GAP_SIZE}px`,
+  };
+}
+</script>
+
+<template>
+  <div class="seat-map-container" flex="~ col items-center">
+    <div
+      v-for="(section, sectionIdx) in seatMap.sections"
+      :key="sectionIdx"
+      class="seat-map-section"
+      mb-8
+    >
+      <h3
+        v-if="section.title.getOrDefault(lang)"
+        text="lg center gray-700 dark:gray-300"
+        font="semibold"
+        mb-4
+      >
+        {{ section.title.getOrDefault(lang) }}
+      </h3>
+
+      <div
+        class="seat-grid-wrapper dark:bg-gray-800/40 dark:border-gray-700/50"
+        flex="~ justify-center"
+        bg-white
+        rounded-xl
+        p-4
+        border
+        border-gray-200
+      >
+        <!-- Row labels -->
+        <div
+          v-if="section.rowLabels.length > 0"
+          class="row-labels"
+          flex="~ col"
+          mr-3
+        >
+          <div
+            v-for="(label, rowIdx) in section.rowLabels"
+            :key="rowIdx"
+            :style="getRowLabelStyle()"
+            flex="~ items-center justify-center"
+            text="xs gray-400 dark:gray-500"
+            font-medium
+            w-6
+          >
+            {{ label ?? "" }}
+          </div>
+        </div>
+
+        <!-- Seat grid -->
+        <div :style="getSectionGridStyle(section)">
+          <template v-for="(row, rowIdx) in section.grid" :key="rowIdx">
+            <template v-for="(seatId, colIdx) in getNormalizedRow(row, getMaxCols(section))" :key="`${rowIdx}-${colIdx}`">
+              <Tooltip v-if="seatId" placement="bottom">
+                <div
+                  class="seat"
+                  :class="{
+                    'seat-occupied': getTeamForSeat(seatId),
+                    'seat-highlighted': isSeatHighlighted(seatId),
+                    'seat-dimmed': filteredTeamIds.size > 0 && !isSeatHighlighted(seatId) && getTeamForSeat(seatId),
+                  }"
+                  :style="getSeatStyle(section)"
+                  flex="~ items-center justify-center"
+                  rounded="sm"
+                  font="mono"
+                  cursor-pointer
+                >
+                  {{ seatId }}
+                </div>
+                <template #popper>
+                  {{ getTooltipContent(seatId) }}
+                </template>
+              </Tooltip>
+              <div
+                v-else
+                :style="getSeatStyle(section)"
+              />
+            </template>
+          </template>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+/* Empty seat - flat gray */
+.seat {
+  background-color: #f3f4f6;
+  border: 1px solid #d1d5db;
+  transition: all 0.2s ease;
+}
+
+.seat:hover {
+  background-color: #e5e7eb;
+  border-color: #9ca3af;
+}
+
+/* Occupied seat - flat blue */
+.seat-occupied {
+  background-color: #bfdbfe;
+  border-color: #60a5fa;
+  color: #1e40af;
+}
+
+.seat-occupied:hover {
+  background-color: #93c5fd;
+}
+
+/* Highlighted seat - deep blue + slight scale */
+.seat-highlighted {
+  background-color: #3b82f6;
+  border-color: #2563eb;
+  color: white;
+  transform: scale(1.05);
+  z-index: 1;
+}
+
+/* Dimmed state */
+.seat-dimmed {
+  opacity: 0.35;
+}
+
+/* === Dark Mode === */
+.dark .seat {
+  background-color: #374151;
+  border-color: #4b5563;
+}
+
+.dark .seat:hover {
+  background-color: #4b5563;
+}
+
+.dark .seat-occupied {
+  background-color: #1e3a5f;
+  border-color: #3b82f6;
+  color: #93c5fd;
+}
+
+.dark .seat-occupied:hover {
+  background-color: #1e4a7f;
+}
+
+/* Dark mode highlight - blue glow effect */
+.dark .seat-highlighted {
+  background-color: #3b82f6;
+  border-color: #60a5fa;
+  color: white;
+  box-shadow: 0 0 16px rgba(59, 130, 246, 0.5);
+}
+</style>

package/src/components/board/SubmissionsTable.vue

@@ -150,8 +150,7 @@ const submissions = computed(() => {
     if (o.orgIds.length === 0
       && o.teamIds.length === 0
       && o.languages.length === 0
-      && o.statuses.length === 0
-    ) {
+      && o.statuses.length === 0) {
       return true;
     }
 

package/src/components/board/SubmitHeatMap.less

@@ -1,13 +1,21 @@
 @correct-colors: #9be9a8, #40c463, #30a14e, #216e39;
 @incorrect-colors: #ff8c8c, #ff4d4f, #ff1a1a, #d40d0d;
+@correct-colors-dark: #216e39, #30a14e, #40c463, #9be9a8;
+@incorrect-colors-dark: #d40d0d, #ff1a1a, #ff4d4f, #ff8c8c;
 
-.generate-heat-rules(@class, @colors) {
+.generate-heat-rules(@class, @colors, @dark-colors) {
   each(@colors, {
     .@{class}[data-level="@{index}"] {
       background-color: @value;
     }
   });
+
+  each(@dark-colors, {
+    .dark .@{class}[data-level="@{index}"] {
+      background-color: @value;
+    }
+  });
 }
 
-.generate-heat-rules(correct-heat, @correct-colors);
-.generate-heat-rules(incorrect-heat, @incorrect-colors);
+.generate-heat-rules(correct-heat, @correct-colors, @correct-colors-dark);
+.generate-heat-rules(incorrect-heat, @incorrect-colors, @incorrect-colors-dark);