@xcpcio/board-app 0.42.1 → 0.44.0

package/src/components/board/OptionsModal.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import _ from "lodash";
 import { MultiSelect } from "vue-search-select";
 import type { Rank, RankOptions, SelectOptionItem } from "@xcpcio/core";
 
@@ -14,6 +15,8 @@ const emit = defineEmits([
   "update:rankOptions",
 ]);
 
+const beforeRankOptions = _.cloneDeep(props.rankOptions);
+
 const { t } = useI18n();
 
 const isHidden = computed({
@@ -40,27 +43,6 @@ const title = computed(() => {
   return t("type_menu.options");
 });
 
-const enableAnimatedSubmissions = ref(rankOptions.value.enableAnimatedSubmissions);
-
-const orgOptions = computed(() => {
-  const res = rank.value.organizations.map((o) => {
-    return {
-      value: o,
-      text: o,
-    };
-  });
-
-  return res;
-});
-
-const orgSelectedItems = ref<Array<SelectOptionItem>>(rankOptions.value.filterOrganizations);
-const orgLastSelectItem = ref({});
-
-function orgOnSelect(selectedItems: Array<SelectOptionItem>, lastSelectItem: SelectOptionItem) {
-  orgSelectedItems.value = selectedItems;
-  orgLastSelectItem.value = lastSelectItem;
-}
-
 const isComposing = ref(false);
 
 function onCompositionStart() {
@@ -77,6 +59,23 @@ function onDelete(event: Event) {
   }
 }
 
+const orgOptions = computed(() => {
+  const res = rank.value.organizations.map((o) => {
+    return {
+      value: o,
+      text: o,
+    };
+  });
+
+  return res;
+});
+
+const orgSelectedItems = ref<Array<SelectOptionItem>>(rankOptions.value.filterOrganizations);
+function orgOnSelect(selectedItems: Array<SelectOptionItem>, _lastSelectItem: SelectOptionItem) {
+  orgSelectedItems.value = selectedItems;
+  rankOptions.value.setFilterOrganizations(selectedItems);
+}
+
 const teamsOptions = computed(() => {
   const res = rank.value.originTeams.map((t) => {
     return {
@@ -89,31 +88,32 @@ const teamsOptions = computed(() => {
 });
 
 const teamsSelectedItems = ref<Array<SelectOptionItem>>(rankOptions.value.filterTeams);
-const teamsLastSelectItem = ref({});
-
-function teamsOnSelect(selectedItems: Array<SelectOptionItem>, lastSelectItem: SelectOptionItem) {
+function teamsOnSelect(selectedItems: Array<SelectOptionItem>, _lastSelectItem: SelectOptionItem) {
   teamsSelectedItems.value = selectedItems;
-  teamsLastSelectItem.value = lastSelectItem;
+  rankOptions.value.setFilterTeams(selectedItems);
 }
 
 function onCancel() {
+  rankOptions.value.setSelf(beforeRankOptions);
   isHidden.value = true;
 }
 
 const localStorageKeyForFilterOrganizations = getLocalStorageKeyForFilterOrganizations();
 const localStorageKeyForFilterTeams = getLocalStorageKeyForFilterTeams();
+const routeQueryForBattleOfGiants = useRouteQueryForBattleOfGiants();
 
 function onConfirm() {
-  rankOptions.value.setFilterOrganizations(orgSelectedItems.value);
-  rankOptions.value.setFilterTeams(teamsSelectedItems.value);
-
   // can't use useStorage, maybe it's a bug
   localStorage.setItem(localStorageKeyForFilterOrganizations, JSON.stringify(orgSelectedItems.value));
   localStorage.setItem(localStorageKeyForFilterTeams, JSON.stringify(teamsSelectedItems.value));
 
-  rankOptions.value.enableAnimatedSubmissions = enableAnimatedSubmissions.value;
+  if (rankOptions.value.battleOfGiants.persist) {
+    routeQueryForBattleOfGiants.value = rankOptions.value.battleOfGiants.ToBase64();
+  } else {
+    routeQueryForBattleOfGiants.value = undefined as unknown as string;
+  }
 
-  onCancel();
+  isHidden.value = true;
 }
 </script>
 
@@ -121,56 +121,149 @@ function onConfirm() {
   <Modal
     v-model:isHidden="isHidden"
     :title="title"
-    width="w-180"
+    width="w-200"
   >
     <div
       w-full
-      font-bold font-mono
+      font-bold font-mono text-base
       flex flex-col gap-4
       items-center justify-center
     >
       <div
-        v-if="rank.contest.organization"
-        flex flex-col
-        w-full
+        flex flex-col w-full
       >
-        <div>
-          Filter {{ rank.contest.organization }}
+        <div
+          flex
+        >
+          Filter
         </div>
 
         <div
-          w-full
-          mt-2
+          ml-8 mt-2
+          grid grid-cols-6 gap-y-4
         >
-          <MultiSelect
-            :options="orgOptions"
-            :selected-options="orgSelectedItems"
-            @select="orgOnSelect"
-            @compositionstart="onCompositionStart"
-            @compositionend="onCompositionEnd"
-            @keydown.delete.capture="onDelete"
-          />
+          <div
+            v-if="rank.contest.organization"
+            flex items-center
+            text-sm
+          >
+            {{ rank.contest.organization }}:
+          </div>
+
+          <div
+            v-if="rank.contest.organization"
+            flex items-center
+            w-full
+            col-span-5
+          >
+            <MultiSelect
+              :options="orgOptions"
+              :selected-options="orgSelectedItems"
+              @select="orgOnSelect"
+              @compositionstart="onCompositionStart"
+              @compositionend="onCompositionEnd"
+              @keydown.delete.capture="onDelete"
+            />
+          </div>
+
+          <div
+            text-sm
+            flex items-center
+          >
+            Team:
+          </div>
+
+          <div
+            flex items-center
+            w-full
+            col-span-5
+          >
+            <MultiSelect
+              :options="teamsOptions"
+              :selected-options="teamsSelectedItems"
+              @select="teamsOnSelect"
+            />
+          </div>
         </div>
       </div>
 
       <div
-        flex flex-col
-        w-full
+        flex flex-col w-full
       >
-        <div>
-          Filter Team
+        <div
+          flex
+        >
+          Battle of Giants
         </div>
 
         <div
-          w-full
-          mt-2
+          ml-4 mt-2
         >
-          <MultiSelect
-            :options="teamsOptions"
-            :selected-options="teamsSelectedItems"
-            @select="teamsOnSelect"
-          />
+          <div
+            grid grid-cols-8
+            items-center
+          >
+            <span
+              text-sm font-medium
+              text-gray-900 dark:text-gray-300
+            >
+              Enable
+            </span>
+
+            <TheCheckbox
+              v-model="rankOptions.battleOfGiants.enable"
+            />
+
+            <span
+              text-sm font-medium
+              text-gray-900 dark:text-gray-300
+            >
+              Equal Teams
+            </span>
+
+            <TheCheckbox
+              v-model="rankOptions.battleOfGiants.equalTeams"
+            />
+
+            <span
+              text-sm font-medium
+              text-gray-900 dark:text-gray-300
+            >
+              Persist
+            </span>
+
+            <TheCheckbox
+              v-model="rankOptions.battleOfGiants.persist"
+            />
+
+            <span
+              text-sm font-medium
+              text-gray-900 dark:text-gray-300
+            >
+              TopX
+            </span>
+
+            <TheInput
+              v-model="rankOptions.battleOfGiants.topX"
+              text-align="left"
+              text-type="number"
+            />
+          </div>
         </div>
+
+        <GiantsOptions
+          :rank="rank"
+          :org-options="orgOptions"
+          :teams-options="teamsOptions"
+          :giants="rankOptions.battleOfGiants.blueTeam"
+        />
+
+        <GiantsOptions
+          :rank="rank"
+          :org-options="orgOptions"
+          :teams-options="teamsOptions"
+          :giants="rankOptions.battleOfGiants.redTeam"
+        />
       </div>
 
       <div
@@ -179,30 +272,35 @@ function onConfirm() {
       >
         <div
           flex
-          mb-2
         >
           Feature
         </div>
 
         <div
-          flex flex-row
+          ml-4 mt-2
         >
-          <label class="relative inline-flex items-center cursor-pointer">
-            <input
-              v-model="enableAnimatedSubmissions"
-              type="checkbox"
-              class="sr-only peer"
+          <div
+            flex flex-row
+          >
+            <TheCheckbox
+              v-model="rankOptions.enableAnimatedSubmissions"
             >
-            <div class="w-11 h-6 bg-gray-200 peer-focus:outline-none peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 rounded-full peer dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-[2px] after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600" />
-            <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Animated Submissions</span>
-          </label>
+              <span
+                ml-3
+                text-sm font-medium
+                text-gray-900 dark:text-gray-300
+              >
+                Submission Queue
+              </span>
+            </TheCheckbox>
+          </div>
         </div>
       </div>
 
       <div
-        mt-2
         w-full
-        flex items-center space-x-4
+        flex flex-row-reverse items-center
+        gap-x-4
       >
         <button
           type="submit"

package/src/components/board/Standings.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import type { Rank } from "@xcpcio/core";
+import { GiantsType, Team } from "@xcpcio/core";
 
 const props = defineProps<{
   rank: Rank,
@@ -9,6 +10,7 @@ const { t } = useI18n();
 
 const rank = computed(() => props.rank);
 const teams = computed(() => props.rank.teams);
+const rankOptions = computed(() => props.rank.options);
 
 const filterTeams = computed(() => {
   const res = props.rank.teams.filter((t) => {
@@ -28,6 +30,93 @@ const filterTeams = computed(() => {
   return res;
 });
 
+interface GiantTeam {
+  team: Team,
+  giantsType: GiantsType,
+}
+
+const giantTeams = computed(() => {
+  const battleOfGiants = rankOptions.value.battleOfGiants;
+  const blueTeam = battleOfGiants.blueTeam;
+  const redTeam = battleOfGiants.redTeam;
+  blueTeam.teams = [];
+  redTeam.teams = [];
+
+  let blueCnt = 0;
+  let redCnt = 0;
+
+  for (const t of props.rank.teams) {
+    const giantsType = (() => {
+      if (
+        blueTeam.filterOrganizationMap.has(t.organization)
+     || blueTeam.filterTeamMap.has(t.id)
+      ) {
+        if (blueCnt >= battleOfGiants.topX) {
+          return null;
+        }
+
+        blueCnt++;
+        return GiantsType.BLUE;
+      }
+
+      if (
+        redTeam.filterOrganizationMap.has(t.organization)
+     || redTeam.filterTeamMap.has(t.id)
+      ) {
+        if (redCnt >= battleOfGiants.topX) {
+          return null;
+        }
+
+        redCnt++;
+        return GiantsType.RED;
+      }
+
+      return null;
+    })();
+
+    if (giantsType === null) {
+      continue;
+    }
+
+    if (giantsType === GiantsType.BLUE) {
+      blueTeam.teams.push(t);
+    } else {
+      redTeam.teams.push(t);
+    }
+
+    if (blueCnt === battleOfGiants.topX && redCnt === battleOfGiants.topX) {
+      break;
+    }
+  }
+
+  if (battleOfGiants.equalTeams) {
+    while (blueTeam.teams.length < redTeam.teams.length) {
+      redTeam.teams.pop();
+    }
+    while (redTeam.teams.length < blueTeam.teams.length) {
+      blueTeam.teams.pop();
+    }
+  }
+
+  const res: GiantTeam[] = [...blueTeam.teams.map((t) => {
+    return {
+      team: t,
+      giantsType: GiantsType.BLUE,
+    };
+  }), ...redTeam.teams.map((t) => {
+    return {
+      team: t,
+      giantsType: GiantsType.RED,
+    };
+  })];
+
+  res.sort((lhs, rhs) => {
+    return Team.compare(lhs.team, rhs.team);
+  });
+
+  return res;
+});
+
 const maxOrgLength = computed(() => {
   let res = 0;
   rank.value.teams.forEach((t) => {
@@ -49,6 +138,15 @@ const maxTeamLength = computed(() => {
 
 <template>
   <div>
+    <div
+      v-if="rankOptions.battleOfGiants.enable"
+      mb-4
+    >
+      <GiantsScoreBoard
+        :battle-of-giants="rankOptions.battleOfGiants"
+      />
+    </div>
+
     <div>
       <table
         class="standings"
@@ -148,6 +246,23 @@ const maxTeamLength = computed(() => {
           </tr>
         </thead>
         <tbody>
+          <template
+            v-if="rankOptions.battleOfGiants.enable"
+          >
+            <template
+              v-for="(giantTeam, ix) in giantTeams"
+
+              :key="`giant-team-${giantTeam.team.id}`"
+            >
+              <TeamUI
+                :ix="ix"
+                :rank="rank"
+                :team="giantTeam.team"
+                :giants-type="giantTeam.giantsType"
+              />
+            </template>
+          </template>
+
           <template
             v-for="(team, ix) in filterTeams"
             :key="`filter-${team.id}`"

package/src/components/board/TeamUI.vue

@@ -1,12 +1,13 @@
 <script setup lang="ts">
-import { MedalType } from "@xcpcio/core";
 import type { Rank, Team } from "@xcpcio/core";
+import { GiantsType, MedalType } from "@xcpcio/core";
 
 const props = defineProps<{
   ix: number,
   rank: Rank,
   team: Team,
   isFilter?: boolean;
+  giantsType?: GiantsType;
 }>();
 
 const el = ref(null);
@@ -39,6 +40,15 @@ function getStandClassName(t: Team, isRankField = false): string {
     }
   }
 
+  if (props.giantsType !== undefined) {
+    switch (props.giantsType) {
+      case GiantsType.BLUE:
+        return "bg-blue-400";
+      case GiantsType.RED:
+        return "bg-red-400";
+    }
+  }
+
   if (props.isFilter) {
     return "filter-team";
   }
@@ -61,7 +71,10 @@ function isRenderByVisible() {
   <tr
     ref="el"
     class="h-10"
-    :class="[props.isFilter ? 'filter-team' : '']"
+    :class="[
+      props.isFilter ? 'filter-team' : '',
+      props.giantsType !== undefined ? getStandClassName(props.team) : '',
+    ]"
   >
     <td
       v-if="isRenderByVisible()"

package/src/components.d.ts

@@ -24,6 +24,8 @@ declare module 'vue' {
     DataSourceInput: typeof import('./components/DataSourceInput.vue')['default']
     Export: typeof import('./components/board/Export.vue')['default']
     Footer: typeof import('./components/Footer.vue')['default']
+    GiantsOptions: typeof import('./components/battle-of-giants/GiantsOptions.vue')['default']
+    GiantsScoreBoard: typeof import('./components/battle-of-giants/GiantsScoreBoard.vue')['default']
     GirlIcon: typeof import('./components/icon/GirlIcon.vue')['default']
     GoBack: typeof import('./components/GoBack.vue')['default']
     Modal: typeof import('./components/board/Modal.vue')['default']
@@ -49,6 +51,7 @@ declare module 'vue' {
     TeamInfoModal: typeof import('./components/board/TeamInfoModal.vue')['default']
     TeamProblemBlock: typeof import('./components/board/TeamProblemBlock.vue')['default']
     TeamUI: typeof import('./components/board/TeamUI.vue')['default']
+    TheCheckbox: typeof import('./components/TheCheckbox.vue')['default']
     TheCounter: typeof import('./components/TheCounter.vue')['default']
     TheInput: typeof import('./components/TheInput.vue')['default']
     Tooltip: typeof import('./components/flowbite/Tooltip.vue')['default']

package/src/composables/query.ts

@@ -7,3 +7,11 @@ export function getDataSourceUrl() {
     { transform: String },
   );
 }
+
+export function useRouteQueryForBattleOfGiants() {
+  return useRouteQuery(
+    "battle-of-giants",
+    "",
+    { transform: String },
+  );
+}