@xcpcio/board-app 0.30.0 → 0.31.1

package/src/components/Countdown.vue

@@ -0,0 +1,132 @@
+<script setup lang="ts">
+import { createContest } from "@xcpcio/core";
+import type { Contest } from "@xcpcio/core";
+import { ContestState } from "@xcpcio/types";
+import type { Contest as IContest } from "@xcpcio/types";
+
+const props = defineProps<{
+  dataSourceUrl: string,
+}>();
+
+const { t } = useI18n();
+const title = useTitle(COUNTDOWN_TITLE_SUFFIX);
+
+const now = ref(new Date());
+const contest = ref({} as Contest);
+const firstLoaded = ref(false);
+
+const { data, isError, error } = useQueryBoardData(props.dataSourceUrl, now);
+watch(data, async () => {
+  if (data.value === null || data.value === undefined) {
+    return;
+  }
+
+  contest.value = createContest(data.value?.contest as IContest);
+  title.value = `${contest.value.name} | ${COUNTDOWN_TITLE_SUFFIX}`;
+
+  firstLoaded.value = true;
+});
+
+const setNowIntervalId = setInterval(() => {
+  now.value = new Date();
+}, 1000);
+
+onUnmounted(() => {
+  clearInterval(setNowIntervalId);
+});
+</script>
+
+<template>
+  <div
+    class="background"
+    text-gray-200
+    w-screen
+    h-screen
+  >
+    <div v-if="!firstLoaded">
+      <div
+        flex flex-col
+        justify-center items-center
+        w-screen h-screen
+        text-xl italic
+      >
+        <div>
+          {{ t("common.loading") }}...
+        </div>
+
+        <div v-if="isError">
+          {{ error }}
+        </div>
+      </div>
+    </div>
+
+    <div
+      v-else
+    >
+      <div
+        flex flex-col
+        items-center justify-center
+        font-mono
+      >
+        <div
+          mt-20
+          text-5xl
+        >
+          {{ contest.name }}
+        </div>
+
+        <div
+          mt-20
+          text-6xl
+          :class="[contest.getContestState(now).toString()]"
+        >
+          {{ contest.getContestState(now) }}
+        </div>
+
+        <div
+          mt-20
+          class="text-[320px]"
+          :class="[contest.getContestState(now).toString()]"
+        >
+          <div
+            v-if="contest.getContestState(now) === ContestState.PENDING"
+          >
+            {{ contest.getContestPendingTime(now) }}
+          </div>
+
+          <div
+            v-else
+          >
+            {{ contest.getContestElapsedTime(now) }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.background {
+  background-color: #333443;
+}
+
+.PENDING {
+  color: #3bb4f2;
+}
+
+.RUNNING {
+  color: rgb(94, 185, 94);
+}
+
+.FROZEN {
+  color: #dd514c;
+}
+
+.FINISHED {
+  color: #0e90d2;
+}
+
+.PAUSED {
+  color: #3bb4f2;
+}
+</style>

package/src/components/CustomCountdown.vue

@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { getDataSourceUrl } from "~/composables/query";
+
+const dataSourceUrl = getDataSourceUrl();
+</script>
+
+<template>
+  <div
+    v-if="dataSourceUrl.length === 0"
+  >
+    <div
+      mt-20
+    >
+      <DataSourceInput />
+    </div>
+  </div>
+
+  <div
+    v-if="dataSourceUrl.length > 0"
+  >
+    <Countdown
+      :data-source-url="dataSourceUrl"
+    />
+  </div>
+</template>

package/src/components/board/TeamAwards.vue

@@ -53,6 +53,28 @@ const medal = computed((): Medal | null => {
 
   return null;
 });
+
+const place = computed(() => {
+  let r = team.value.rank;
+
+  if (rank.value.contest.organization) {
+    r = team.value.organizationRank;
+  }
+
+  if (r === 1) {
+    return "1st Place";
+  }
+
+  if (r === 2) {
+    return "2nd Place";
+  }
+
+  if (r === 3) {
+    return "3rd Place";
+  }
+
+  return "";
+});
 </script>
 
 <template>
@@ -61,31 +83,39 @@ const medal = computed((): Medal | null => {
     text-xl
     font-mono font-semibold italic
     flex flex-col gap-2
-    justify-center
+    justify-center items-center
   >
-    <div>
-      Team Rank: {{ team.rank }}
-    </div>
-
     <div
-      v-if="team.organization && team.organizationRank !== -1"
+      flex flex-col
+      items-start
+      gap-y-2
     >
-      {{ rank.contest.organization }} Rank: {{ team.organizationRank }}
-    </div>
+      <div
+        v-if="medal"
+      >
+        {{ medal.text }} Medalist
+      </div>
 
-    <div
-      v-if="firstSolvedProblems.length"
-      flex flex-col gap-2
-    >
-      <div>
-        First Solved Problem {{ firstSolvedProblems }}
+      <div
+        v-if="place.length > 0"
+      >
+        {{ place }}
       </div>
-    </div>
 
-    <div
-      v-if="medal"
-    >
-      {{ medal.text }} Medal
+      <div
+        v-if="firstSolvedProblems.length"
+        flex flex-col gap-2
+      >
+        <div>
+          First Solved Problem {{ firstSolvedProblems }}
+        </div>
+      </div>
+
+      <div
+        v-if="team.solvedProblemNum > 0"
+      >
+        Solved {{ team.solvedProblemNum }} {{ team.solvedProblemNum > 1 ? 'Problems' : 'Problem' }}
+      </div>
     </div>
   </div>
 </template>

package/src/components/board/TeamInfoModal.vue

@@ -97,9 +97,6 @@ const types = [TYPE_SUBMISSIONS, TYPE_STATISTICS, TYPE_AWARDS];
                     <div>
                       TeamID: {{ team.id }}
                     </div>
-                    <div>
-                      ddd: f22
-                    </div>
                   </div>
                 </template>
               </Tooltip>

package/src/components/board/Utility.vue

@@ -15,6 +15,10 @@ const resolverUrl = computed(() => {
 function goBalloon() {
   router.push(`/balloon/?data-source=${route.path}`);
 }
+
+function goCountdown() {
+  router.push(`/countdown/?data-source=${route.path}`);
+}
 </script>
 
 <template>
@@ -39,6 +43,19 @@ function goBalloon() {
       {{ t('type_menu.balloon') }}
     </button>
 
+    <button
+      btn
+      title="Countdown"
+      @click="goCountdown"
+    >
+      {{ t('type_menu.countdown') }}
+    </button>
+  </div>
+
+  <div
+    w-full
+    flex mt-4 gap-4
+  >
     <button
       btn
       title="Submissions"

package/src/components.d.ts

@@ -15,8 +15,10 @@ declare module 'vue' {
     BottomStatistics: typeof import('./components/board/BottomStatistics.vue')['default']
     ContestIndexUI: typeof import('./components/ContestIndexUI.vue')['default']
     ContestStateBadge: typeof import('./components/board/ContestStateBadge.vue')['default']
+    Countdown: typeof import('./components/Countdown.vue')['default']
     CustomBalloon: typeof import('./components/CustomBalloon.vue')['default']
     CustomBoard: typeof import('./components/CustomBoard.vue')['default']
+    CustomCountdown: typeof import('./components/CustomCountdown.vue')['default']
     DataSourceInput: typeof import('./components/DataSourceInput.vue')['default']
     Export: typeof import('./components/board/Export.vue')['default']
     Footer: typeof import('./components/Footer.vue')['default']

package/src/composables/constant.ts

@@ -1,3 +1,4 @@
 export const TITLE_SUFFIX = "Board - XCPCIO";
 export const BALLOON_TITLE_SUFFIX = "Balloon - XCPCIO";
 export const RESOLVER_TITLE_SUFFIX = "Resolver - XCPCIO";
+export const COUNTDOWN_TITLE_SUFFIX = "Countdown - XCPCIO";

package/src/pages/countdown/index.vue

@@ -0,0 +1,10 @@
+<template>
+  <div>
+    <CustomCountdown />
+  </div>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: headless
+</route>

package/src/pages/index.vue

@@ -79,15 +79,22 @@ watch(searchText, () => {
   >
     <div>
       <div
-        v-if="isFetching"
+        v-if="isFetching || error"
+        mt-4 mb-4
         class="sm:w-[1000px] lg:w-screen"
-        flex justify-center
+        flex justify-center items-center
       >
-        {{ t("common.loading") }}...
-      </div>
+        <div
+          v-if="isFetching"
+        >
+          {{ t("common.loading") }}...
+        </div>
 
-      <div v-if="error">
-        {{ error }}
+        <div
+          v-if="error"
+        >
+          {{ error }}
+        </div>
       </div>
 
       <div

package/dist/assets/DataSourceInput.vue_vue_type_script_setup_true_lang-c6907218.js

@@ -1 +0,0 @@
-import{_}from"./TheInput.vue_vue_type_script_setup_true_lang-bd490116.js";import{H as p,g as f,q as h,i as g,I as S,D as b,j as o,o as v,c as y,d as t,b as x,E as U,G as V,t as l,l as w}from"./index-6578287f.js";function D(){return p("data-source","",{transform:String})}const I={key:0,class:"flex flex-col items-center"},R={"w-128":""},k=t("div",{"py-2":""},null,-1),B=["disabled"],u="Data Source URL",E=f({__name:"DataSourceInput",setup(C){const{t:r}=h(),a=D(),e=g(a.value),c=S(),d=b();function s(){d.push(`${c.fullPath}/?data-source=${e.value.trim()}`)}return(K,n)=>{const i=_;return o(a).length===0?(v(),y("div",I,[t("div",R,[x(i,{modelValue:o(e),"onUpdate:modelValue":n[0]||(n[0]=m=>U(e)?e.value=m:null),"w-full":"",placeholder:u,autocomplete:"false",onKeydown:V(s,["enter"])},null,8,["modelValue","onKeydown"]),t("label",{class:"hidden",for:"input"},l(u))]),k,t("div",null,[t("button",{"m-3":"","text-sm":"",btn:"",disabled:o(e).length===0,onClick:s},l(o(r)("button.go")),9,B)])])):w("",!0)}}});export{E as _,D as g};

package/dist/assets/board-85ce205a.js

@@ -1 +0,0 @@
-import{_ as p}from"./Board-1cb5a052.js";import{g as l,_ as d}from"./DataSourceInput.vue_vue_type_script_setup_true_lang-c6907218.js";import{g as f,o as t,c as n,b as a,j as r,l as i,F as g,a as B,A as k,C as c}from"./index-6578287f.js";import"./useQueryBoardData-3b8a91d5.js";import"./TheInput.vue_vue_type_script_setup_true_lang-bd490116.js";const C={key:0},h=f({__name:"CustomBoard",setup(_){const o=l();return(e,b)=>{const m=d,u=p;return t(),n(g,null,[a(m),r(o).length>0?(t(),n("div",C,[a(u,{"data-source-url":r(o)},null,8,["data-source-url"])])):i("",!0)],64)}}}),s={};function x(_,o){const e=h;return t(),k(e)}typeof c=="function"&&c(s);const U=B(s,[["render",x]]);export{U as default};

package/dist/assets/index-78001918.js

@@ -1 +0,0 @@
-import{g as C,h as w,i as u,u as V,o,c as n,j as t,n as E,d as s,k as S,t as p,l as g,m as F,p as R,B as I,q as A,w as O,s as q,v as M,x as Q,y as X,F as N,z as G,A as H,R as J,b as $,a as K,C as j}from"./index-6578287f.js";import{u as P}from"./useQueryBoardData-3b8a91d5.js";import{g as W,_ as Y}from"./DataSourceInput.vue_vue_type_script_setup_true_lang-c6907218.js";import"./TheInput.vue_vue_type_script_setup_true_lang-bd490116.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=C({__name:"BalloonBlock",props:{index:null,balloon:null},setup(f){const a=f,_=w(()=>a.index),r=w(()=>a.balloon),c=u(null),i=V(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:E([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=C({__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),(D,L)=>(o(),H(y,{key:D.key,index:L,balloon:D},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=C({__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};