@xcpcio/board-app 0.32.0 → 0.33.0

package/src/auto-imports.d.ts

@@ -38,7 +38,6 @@ declare global {
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
-  const downloadSingleFile: typeof import('./composables/utils')['downloadSingleFile']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
@@ -47,10 +46,12 @@ declare global {
   const getDataSourceUrl: typeof import('./composables/query')['getDataSourceUrl']
   const getLocalStorageKeyForFilterOrganizations: typeof import('./composables/useLocalStorage')['getLocalStorageKeyForFilterOrganizations']
   const getLocalStorageKeyForFilterTeams: typeof import('./composables/useLocalStorage')['getLocalStorageKeyForFilterTeams']
+  const getMedalColor: typeof import('./composables/color')['getMedalColor']
   const getProblemChart: typeof import('./composables/statistics')['getProblemChart']
   const getSubmitChart: typeof import('./composables/statistics')['getSubmitChart']
   const getTeamChart: typeof import('./composables/statistics')['getTeamChart']
   const getTeamPlaceChart: typeof import('./composables/statistics')['getTeamPlaceChart']
+  const getWhiteOrBlackColor: typeof import('./composables/color')['getWhiteOrBlackColor']
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
   const inject: typeof import('vue')['inject']
@@ -357,6 +358,7 @@ declare module 'vue' {
     readonly getDataSourceUrl: UnwrapRef<typeof import('./composables/query')['getDataSourceUrl']>
     readonly getLocalStorageKeyForFilterOrganizations: UnwrapRef<typeof import('./composables/useLocalStorage')['getLocalStorageKeyForFilterOrganizations']>
     readonly getLocalStorageKeyForFilterTeams: UnwrapRef<typeof import('./composables/useLocalStorage')['getLocalStorageKeyForFilterTeams']>
+    readonly getMedalColor: UnwrapRef<typeof import('./composables/color')['getMedalColor']>
     readonly getProblemChart: UnwrapRef<typeof import('./composables/statistics')['getProblemChart']>
     readonly getSubmitChart: UnwrapRef<typeof import('./composables/statistics')['getSubmitChart']>
     readonly getTeamChart: UnwrapRef<typeof import('./composables/statistics')['getTeamChart']>
@@ -658,6 +660,7 @@ declare module '@vue/runtime-core' {
     readonly getDataSourceUrl: UnwrapRef<typeof import('./composables/query')['getDataSourceUrl']>
     readonly getLocalStorageKeyForFilterOrganizations: UnwrapRef<typeof import('./composables/useLocalStorage')['getLocalStorageKeyForFilterOrganizations']>
     readonly getLocalStorageKeyForFilterTeams: UnwrapRef<typeof import('./composables/useLocalStorage')['getLocalStorageKeyForFilterTeams']>
+    readonly getMedalColor: UnwrapRef<typeof import('./composables/color')['getMedalColor']>
     readonly getProblemChart: UnwrapRef<typeof import('./composables/statistics')['getProblemChart']>
     readonly getSubmitChart: UnwrapRef<typeof import('./composables/statistics')['getSubmitChart']>
     readonly getTeamChart: UnwrapRef<typeof import('./composables/statistics')['getTeamChart']>

package/src/components/Balloon.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { Rank, createContest, createSubmissions, createTeams } from "@xcpcio/core";
+import { Balloon, Rank, createContest, createSubmissions, createTeams } from "@xcpcio/core";
 import type { Contest, Submissions, Teams } from "@xcpcio/core";
 import type { Contest as IContest, Submissions as ISubmissions, Teams as ITeams } from "@xcpcio/types";
 
@@ -43,7 +43,7 @@ watch(data, async () => {
 });
 
 const balloons = computed(() => {
-  return rank.value.balloons;
+  return rank.value.balloons.sort(Balloon.compare).reverse().slice(0, 256);
 });
 
 const setNowIntervalId = setInterval(() => {

package/src/components/BalloonBlock.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import type { Balloon, Team } from "@xcpcio/core";
-import type { ThemeColor } from "@xcpcio/types";
 
 const props = defineProps<{
   index: number;
@@ -18,17 +17,7 @@ function showTeamName(team: Team) {
   return sections.filter(s => s).join(" - ");
 }
 
-function getColor(c: ThemeColor): string {
-  if (typeof c === "string") {
-    return c;
-  }
-
-  if (isDark && c?.dark) {
-    return c.dark;
-  }
-
-  return c.light;
-}
+const balloonColor = computed(() => balloon.value.problem.balloonColor);
 </script>
 
 <template>
@@ -47,12 +36,12 @@ function getColor(c: ThemeColor): string {
         w-20
         flex flex-shrink-0 justify-center items-center
         :style="{
-          backgroundColor: getColor(balloon.problem?.balloonColor?.background_color ?? 'rgba(0, 0, 0, 0.5)'),
+          backgroundColor: balloonColor.background_color,
         }"
       >
         <div
           :style="{
-            color: getColor(balloon.problem?.balloonColor?.color ?? '#fff'),
+            color: balloonColor.color,
           }"
         >
           {{ balloon.problem.label }}

package/src/components/Countdown.vue

@@ -68,13 +68,6 @@ onUnmounted(() => {
         items-center justify-center
         font-mono
       >
-        <div
-          mt-20
-          text-5xl
-        >
-          {{ contest.name }}
-        </div>
-
         <div
           mt-20
           text-6xl

package/src/components/board/{DynamicSubmissionsModal.vue → AnimatedSubmissionsModal.vue}

@@ -3,6 +3,8 @@ import type { Problem, Rank, Team } from "@xcpcio/core";
 import { Submission } from "@xcpcio/core";
 import { SubmissionStatusToSimpleString } from "@xcpcio/types";
 
+import { getMedalColor } from "~/composables/color";
+
 const props = defineProps<{
   rank: Rank,
 }>();
@@ -33,6 +35,10 @@ const submissions = computed(() => {
       continue;
     }
 
+    if (rank.value.filterTeamByOrg(team)) {
+      continue;
+    }
+
     const problem = rank.value.contest.problemsMap.get(problemId);
     if (!problem) {
       continue;
@@ -78,16 +84,21 @@ const submissions = computed(() => {
             bg-slate-800 text-gray-200
             font-mono
             flex flex-row
-            pl-2
+            justify-center items-center
           >
             <div
-              w-8
+              w-10
+              :style="getMedalColor(s.team)"
+              flex
+              justify-center items-center
             >
-              {{ s.team.rank }}
+              <div>
+                {{ s.team.rank }}
+              </div>
             </div>
 
             <div
-              pl-2
+              pl-1
               w-80
               truncate
             >
@@ -105,7 +116,7 @@ const submissions = computed(() => {
               border-b-4
               flex justify-center
               :style="{
-                'border-color': s.problem.balloonColor?.background_color.toString() ?? '#fff',
+                borderColor: s.problem.balloonColor.background_color,
               }"
             >
               {{ s.problem.label }}
@@ -115,7 +126,9 @@ const submissions = computed(() => {
               w-10
               flex justify-center
               :class="[s.submission.status]"
-              opacity-100
+              :style="{
+                color: '#000',
+              }"
             >
               {{ SubmissionStatusToSimpleString[s.submission.status] }}
             </div>

package/src/components/board/Board.vue

@@ -460,9 +460,9 @@ const widthClass = "sm:w-[1260px] xl:w-screen";
       </div>
 
       <div
-        v-if="rankOptions.enableDynamicSubmissions"
+        v-if="rankOptions.enableAnimatedSubmissions"
       >
-        <DynamicSubmissionsModal
+        <AnimatedSubmissionsModal
           :rank="rank"
         />
       </div>

package/src/components/board/OptionsModal.vue

@@ -40,7 +40,7 @@ const title = computed(() => {
   return t("type_menu.options");
 });
 
-const enableDynamicSubmissions = ref(rankOptions.value.enableDynamicSubmissions);
+const enableAnimatedSubmissions = ref(rankOptions.value.enableAnimatedSubmissions);
 
 const orgOptions = computed(() => {
   const res = rank.value.organizations.map((o) => {
@@ -95,7 +95,7 @@ function onConfirm() {
   localStorage.setItem(localStorageKeyForFilterOrganizations, JSON.stringify(orgSelectedItems.value));
   localStorage.setItem(localStorageKeyForFilterTeams, JSON.stringify(teamsSelectedItems.value));
 
-  rankOptions.value.enableDynamicSubmissions = enableDynamicSubmissions.value;
+  rankOptions.value.enableAnimatedSubmissions = enableAnimatedSubmissions.value;
 
   onCancel();
 }
@@ -170,12 +170,12 @@ function onConfirm() {
         >
           <label class="relative inline-flex items-center cursor-pointer">
             <input
-              v-model="enableDynamicSubmissions"
+              v-model="enableAnimatedSubmissions"
               type="checkbox"
               class="sr-only peer"
             >
             <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">Dynamic Submissions</span>
+            <span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">Animated Submissions</span>
           </label>
         </div>
       </div>

package/src/components/board/ProblemBlock.vue

@@ -13,6 +13,8 @@ function onClick() {
 
 const rank = computed(() => props.rank);
 const problem = computed(() => props.problem);
+
+const balloonColor = computed(() => problem.value.balloonColor);
 </script>
 
 <template>
@@ -22,8 +24,8 @@ const problem = computed(() => props.problem);
     text-center
     style="width: 3rem;"
     :style="{
-      'background-color': problem.balloonColor?.background_color,
-      'color': problem.balloonColor?.color,
+      'background-color': balloonColor.background_color,
+      'color': balloonColor.color,
     }"
   >
     <div

package/src/components/board/SubmissionsTable.vue

@@ -244,11 +244,9 @@ function getProblemLabelColorStyle(s: Submission) {
     return undefined;
   }
 
-  const b = p.balloonColor;
-
   return {
-    backgroundColor: b.background_color as string,
-    color: b.color as string,
+    backgroundColor: p.balloonColor.background_color,
+    color: p.balloonColor.color,
   };
 }
 </script>

package/src/components/board/TeamUI.vue

@@ -21,10 +21,6 @@ const rank = computed(() => props.rank);
 const team = computed(() => props.team);
 
 function getStandClassName(t: Team, isRankField = false): string {
-  if (props.isFilter) {
-    return "filter-team";
-  }
-
   if (isRankField) {
     if (t.awards.includes(MedalType.GOLD)) {
       return "gold";
@@ -43,6 +39,10 @@ function getStandClassName(t: Team, isRankField = false): string {
     }
   }
 
+  if (props.isFilter) {
+    return "filter-team";
+  }
+
   const solvedProblemIndex = (rank.value.rankStatistics.getTeamSolvedNumIndex(t.solvedProblemNum) - 1) % 2;
   const rankIndex = (t.rank - 1) % 2;
 

package/src/components/board/Utility.vue

@@ -26,15 +26,6 @@ function goCountdown() {
     w-full
     flex mt-4 gap-4
   >
-    <a
-      btn
-      :href="resolverUrl"
-      target="_blank"
-      title="Resolver"
-    >
-      {{ t("type_menu.resolver") }}
-    </a>
-
     <button
       btn
       title="Balloon"
@@ -45,10 +36,10 @@ function goCountdown() {
 
     <button
       btn
-      title="Countdown"
-      @click="goCountdown"
+      title="Submissions"
+      disabled="true"
     >
-      {{ t('type_menu.countdown') }}
+      {{ t('type_menu.submissions') }}
     </button>
   </div>
 
@@ -56,12 +47,21 @@ function goCountdown() {
     w-full
     flex mt-4 gap-4
   >
+    <a
+      btn
+      :href="resolverUrl"
+      target="_blank"
+      title="Resolver"
+    >
+      {{ t("type_menu.resolver") }}
+    </a>
+
     <button
       btn
-      title="Submissions"
-      disabled="true"
+      title="Countdown"
+      @click="goCountdown"
     >
-      {{ t('type_menu.submissions') }}
+      {{ t('type_menu.countdown') }}
     </button>
   </div>
 </template>

package/src/components.d.ts

@@ -7,6 +7,7 @@ export {}
 
 declare module 'vue' {
   export interface GlobalComponents {
+    AnimatedSubmissionsModal: typeof import('./components/board/AnimatedSubmissionsModal.vue')['default']
     Badge: typeof import('./components/board/Badge.vue')['default']
     Balloon: typeof import('./components/Balloon.vue')['default']
     BalloonBlock: typeof import('./components/BalloonBlock.vue')['default']
@@ -20,7 +21,6 @@ declare module 'vue' {
     CustomBoard: typeof import('./components/CustomBoard.vue')['default']
     CustomCountdown: typeof import('./components/CustomCountdown.vue')['default']
     DataSourceInput: typeof import('./components/DataSourceInput.vue')['default']
-    DynamicSubmissionsModal: typeof import('./components/board/DynamicSubmissionsModal.vue')['default']
     Export: typeof import('./components/board/Export.vue')['default']
     Footer: typeof import('./components/Footer.vue')['default']
     GirlIcon: typeof import('./components/icon/GirlIcon.vue')['default']

package/src/composables/color.ts

@@ -0,0 +1,31 @@
+import { MedalType } from "@xcpcio/core";
+import type { Team } from "@xcpcio/core";
+
+export function getMedalColor(team: Team): { backgroundColor: string, color: string } | undefined {
+  const color = {
+    backgroundColor: "#fff",
+    color: "#000",
+  };
+
+  if (team.awards.includes(MedalType.GOLD)) {
+    color.backgroundColor = "#fff566";
+    return color;
+  }
+
+  if (team.awards.includes(MedalType.SILVER)) {
+    color.backgroundColor = "#ffadd2";
+    return color;
+  }
+
+  if (team.awards.includes(MedalType.BRONZE)) {
+    color.backgroundColor = "#f0c0a0";
+    return color;
+  }
+
+  if (team.awards.includes(MedalType.HONORABLE)) {
+    color.backgroundColor = "#e6f7ff";
+    return color;
+  }
+
+  return undefined;
+}

package/vite.config.ts

@@ -16,6 +16,7 @@ import Unocss from "unocss/vite";
 import Shiki from "markdown-it-shiki";
 import VueMacros from "unplugin-vue-macros/vite";
 import WebfontDownload from "vite-plugin-webfont-dl";
+import { createHtmlPlugin } from "vite-plugin-html";
 
 import packageJSON from "./package.json";
 
@@ -138,6 +139,21 @@ export default defineConfig({
 
     // https://github.com/webfansplz/vite-plugin-vue-devtools
     VueDevTools(),
+
+    // https://github.com/vbenjs/vite-plugin-html
+    createHtmlPlugin({
+      minify: {
+        collapseWhitespace: true,
+        keepClosingSlash: true,
+        removeComments: true,
+        removeRedundantAttributes: true,
+        removeScriptTypeAttributes: true,
+        removeStyleLinkTypeAttributes: true,
+        useShortDoctype: true,
+        minifyCSS: true,
+        minifyJS: true,
+      },
+    }),
   ],
 
   // https://github.com/vitest-dev/vitest

package/dist/assets/index-181beaa6.js

@@ -1 +0,0 @@
-import{g as D,s as w,i as u,v as L,o,c as n,l as t,n as V,d as s,x as S,t as p,m as g,y as F,h as R,B as I,u as A,w as O,j as q,z as M,A as Q,k as X,F as N,D as G,E as H,R as J,b as $,a as K,q as j}from"./index-6c4a0937.js";import{u as P}from"./useQueryBoardData-95ed94f9.js";import{g as W,_ as Y}from"./DataSourceInput.vue_vue_type_script_setup_true_lang-7ca3c000.js";import"./TheInput.vue_vue_type_script_setup_true_lang-2682b2e3.js";const Z={flex:"","flex-1":"","flex-col":"","justify-center":"","items-start":""},ee={class:"resolver-team-name",truncate:"","overflow-hidden":""},te=s("div",{flex:"","flex-row":"","text-sm":"","items-start":"","gap-x-2":""},null,-1),oe={"w-32":"",flex:"","flex-shrink-0":"","flex-row":"","justify-start":"","items-center":""},ne=D({__name:"BalloonBlock",props:{index:null,balloon:null},setup(f){const a=f,_=w(()=>a.index),r=w(()=>a.balloon),c=u(null),i=L(c);function x(e){return[e.location,e.organization,e.name].filter(d=>d).join(" - ")}function v(e){return typeof e=="string"?e:F&&(e!=null&&e.dark)?e.dark:e.light}return(e,b)=>{var d,l,h,k;return o(),n("div",{ref_key:"el",ref:c,"h-24":""},[t(i)?(o(),n("div",{key:0,"h-24":"",flex:"","flex-row":"","gap-x-4":"","font-mono":"","text-4xl":"",class:V([t(_)%2===0?"bg-resolver-bg-zero":"bg-resolver-bg-one"])},[s("div",{"w-20":"",flex:"","flex-shrink-0":"","justify-center":"","items-center":"",style:S({backgroundColor:v(((l=(d=t(r).problem)==null?void 0:d.balloonColor)==null?void 0:l.background_color)??"rgba(0, 0, 0, 0.5)")})},[s("div",{style:S({color:v(((k=(h=t(r).problem)==null?void 0:h.balloonColor)==null?void 0:k.color)??"#fff")})},p(t(r).problem.label),5)],4),s("div",Z,[s("div",ee,p(x(t(r).team)),1),te]),s("div",oe,p(t(r).submission.timestampToMinute),1)],2)):g("",!0)],512)}}}),se={class:"bg-[#323443]","text-gray-200":""},ae={key:0},le={flex:"","flex-col":"","justify-center":"","items-center":"","w-screen":"","h-screen":"","text-xl":"",italic:""},re={key:0},ce={key:1},ie={flex:"","flex-col":"","justify-between":""},ue=D({__name:"Balloon",props:{dataSourceUrl:null},setup(f){const a=f,_=R(I),{t:r}=A(),c=u(!1),i=u({}),x=u([]),v=u([]),e=u({}),b=u(new Date);function d(){const m=new J(i.value,x.value,v.value);m.buildBalloons(),e.value=m}const{data:l,isError:h,error:k}=P(a.dataSourceUrl,b);O(l,async()=>{var m,B,y;l.value===null||l.value===void 0||(i.value=q((m=l.value)==null?void 0:m.contest),_.value=`${i.value.name} | ${I}`,x.value=M((B=l.value)==null?void 0:B.teams),v.value=Q((y=l.value)==null?void 0:y.submissions),d(),c.value=!0)});const U=w(()=>e.value.balloons),z=setInterval(()=>{b.value=new Date},1e3);return X(()=>{clearInterval(z)}),(m,B)=>{const y=ne;return o(),n("div",se,[t(c)?(o(),n("div",ce,[s("div",ie,[(o(!0),n(N,null,G(t(U),(C,E)=>(o(),H(y,{key:C.key,index:E,balloon:C},null,8,["index","balloon"]))),128))])])):(o(),n("div",ae,[s("div",le,[s("div",null,p(t(r)("common.loading"))+"... ",1),t(h)?(o(),n("div",re,p(t(k)),1)):g("",!0)])]))])}}}),_e={key:0},de={"mt-20":""},me={key:1},fe=D({__name:"CustomBalloon",setup(f){const a=W();return(_,r)=>{const c=Y,i=ue;return o(),n(N,null,[t(a).length===0?(o(),n("div",_e,[s("div",de,[$(c)])])):g("",!0),t(a).length>0?(o(),n("div",me,[$(i,{"data-source-url":t(a)},null,8,["data-source-url"])])):g("",!0)],64)}}}),T={};function ve(f,a){const _=fe;return o(),n("div",null,[$(_)])}typeof j=="function"&&j(T);const ke=K(T,[["render",ve]]);export{ke as default};

package/dist/assets/index-622de38d.css

@@ -1 +0,0 @@
-.background[data-v-07b734a0]{background-color:#333443}.PENDING[data-v-07b734a0]{color:#3bb4f2}.RUNNING[data-v-07b734a0]{color:#5eb95e}.FROZEN[data-v-07b734a0]{color:#dd514c}.FINISHED[data-v-07b734a0]{color:#0e90d2}.PAUSED[data-v-07b734a0]{color:#3bb4f2}