@xcpcio/board-app 0.6.4 → 0.13.0

package/src/components/ContestIndex.vue

@@ -0,0 +1,227 @@
+<script setup lang="ts">
+import type { ContestIndex } from "@xcpcio/core";
+import type { Image } from "@xcpcio/types";
+
+import { useElementVisibility } from "@vueuse/core";
+
+const props = defineProps<{
+  data: ContestIndex
+}>();
+
+const { t } = useI18n();
+
+const contest = computed(() => props.data.contest);
+const now = ref(new Date());
+
+const el = ref(null);
+const isVisible = useElementVisibility(el);
+
+function getImageSource(image: Image): string {
+  if (image?.url) {
+    return image.url;
+  }
+
+  if (image?.base64) {
+    return `data:image/${image.type};base64,${image.base64}`;
+  }
+
+  return "";
+}
+
+const setNowIntervalId = setInterval(() => {
+  now.value = new Date();
+}, 1000);
+
+onUnmounted(() => {
+  clearInterval(setNowIntervalId);
+});
+</script>
+
+<template>
+  <div ref="el">
+    <div h-32>
+      <div
+        v-if="isVisible"
+      >
+        <div
+          w-240
+          flex flex-col justify-center
+          font-serif pb-2
+          border="b-2 gray-200 dark:gray-700"
+        >
+          <div
+            w-full flex
+          >
+            <div
+              v-if="contest.logo !== undefined"
+              class="logo"
+            >
+              <img
+                class="h-10 w-10"
+                :src="getImageSource(contest.logo)"
+                alt="logo"
+              >
+            </div>
+
+            <VTooltip
+              w-inherit
+            >
+              <div
+                class="title"
+                overflow-hidden
+                text-2xl truncate
+              >
+                {{ contest.name }}
+              </div>
+
+              <template #popper>
+                {{ contest.name }}
+              </template>
+            </VTooltip>
+          </div>
+
+          <div flex items-end>
+            <div float-left font-mono text-base>
+              {{ t("index.start") }}:
+              {{ contest.startTime.format("YYYY-MM-DD HH:mm:ss") }}<sup class="pl-0.5">{{ contest.startTime.format("z") }}</sup>
+              <br>
+              {{ t("index.duration") }}:
+              {{ contest.getContestDuration() }}
+            </div>
+
+            <div flex-1>
+              <div flex items-center justify-center>
+                <div
+                  font-bold font-mono
+                  class="w-[68%]"
+                >
+                  <div>
+                    <ContestStateBadge
+                      :state="contest.getContestState(now)"
+                      :pending-time="contest.getContestPendingTime(now)"
+                    />
+                  </div>
+                  <Progress
+                    :width="contest.getContestProgressRatio(now)"
+                    :state="contest.getContestState(now)"
+                  />
+                </div>
+              </div>
+            </div>
+            <div float-right>
+              <RouterLink
+                class="go MuiIconButton-root"
+                :to="props.data.boardLink"
+              >
+                <span class="MuiIconButton-label">
+                  <RightArrowIcon />
+                </span>
+              </RouterLink>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.logo {
+  float: left;
+  text-align: left;
+  font-size: 16px;
+  padding-top: 12px;
+  padding-right: 8px;
+}
+
+.title {
+  --scroll-bar: 0;
+  font-variant: tabular-nums;
+  line-height: 1.5715;
+  box-sizing: border-box;
+  position: relative;
+  text-align: left;
+  font-weight: 400;
+  padding-left: 0px;
+  padding-right: 16px;
+  padding-top: 12px;
+  padding-bottom: 12px;
+}
+
+.MuiIconButton-root {
+  -webkit-font-smoothing: antialiased;
+  font-weight: 400;
+  line-height: 1.43;
+  letter-spacing: 0.01071em;
+  box-sizing: inherit;
+  border: 0;
+  cursor: pointer;
+  margin: 0;
+  display: inline-flex;
+  outline: 0;
+  position: relative;
+  align-items: center;
+  user-select: none;
+  vertical-align: middle;
+  justify-content: center;
+  text-decoration: none;
+  background-color: transparent;
+  -webkit-tap-highlight-color: transparent;
+  flex: 0 0 auto;
+  color: rgba(0, 0, 0, 0.54);
+  padding: 12px;
+  overflow: visible;
+  font-size: 1.5rem;
+  text-align: center;
+  transition: background-color 150ms cubic-bezier(0.4, 0, 0.2, 1) 0ms;
+  border-radius: 50%;
+}
+
+.MuiIconButton-label {
+  -webkit-font-smoothing: antialiased;
+  font-family: "Roboto", "Helvetica", "Arial", sans-serif;
+  font-weight: 400;
+  line-height: 1.43;
+  letter-spacing: 0.01071em;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  color: rgba(0, 0, 0, 0.54);
+  font-size: 1.5rem;
+  text-align: center;
+  box-sizing: inherit;
+  width: 100%;
+  display: flex;
+  align-items: inherit;
+  justify-content: inherit;
+}
+
+.go {
+  text-decoration: none;
+  color: #121314;
+  position: relative;
+}
+
+.go:after {
+  content: "";
+  position: absolute;
+  z-index: -1;
+  top: 60%;
+  left: -0.1em;
+  right: -0.1em;
+  bottom: 0;
+  transition: top 200ms cubic-bezier(0, 0.8, 0.13, 1);
+  background-color: #91d5ff;
+}
+
+.go:hover:after {
+  top: 0%;
+}
+
+.loading {
+  height: calc(100vh);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

package/src/components/Footer.vue

@@ -0,0 +1,94 @@
+<script setup lang="ts">
+import { GITHUB_SHA, GITHUB_URL, VERSION } from "@xcpcio/types";
+</script>
+
+<template>
+  <footer
+    mt-8
+    py-4 md:py-8 lg:py-10
+    w-full
+    flex justify-center items-center
+  >
+    <div
+      text-center
+      w-full
+    >
+      <RouterLink
+        flex items-center justify-center
+        text-2xl font-semibold text-gray-900 dark:text-white
+        to="/"
+      >
+        <div
+          i-ion-balloon-sharp
+          mr-4 h-8
+        />
+        Get more balloons
+      </RouterLink>
+
+      <p
+        my-6 text-gray-500 dark:text-gray-400
+        w-full
+        flex justify-center
+      >
+        Open-source project of ICPC/CCPC Standings.
+      </p>
+
+      <ul
+        mb-6
+        w-full
+        flex flex-wrap items-center justify-center
+        text-gray-900 dark:text-white
+      >
+        <li>
+          <RouterLink
+            to="/"
+            mr-4 md:mr-6 hover:underline
+          >
+            Home
+          </RouterLink>
+        </li>
+
+        <li>
+          <VTooltip
+            w-inherit
+          >
+            <a
+              :href="GITHUB_URL"
+              class="mr-4 md:mr-6 hover:underline"
+              rel="noreferrer"
+              target="_blank"
+              title="GitHub"
+            >
+              GitHub
+            </a>
+
+            <template #popper>
+              <div
+                flex justify-center
+                flex-col
+              >
+                <div>Tag: {{ VERSION }}</div>
+                <div>Sha: {{ GITHUB_SHA }}</div>
+              </div>
+            </template>
+          </VTooltip>
+        </li>
+
+        <li>
+          <a
+            href="mailto:hi@dup4.com"
+            mr-4 md:mr-6 hover:underline
+          >Contact</a>
+        </li>
+      </ul>
+
+      <span
+        text-sm text-gray-500 sm:text-center dark:text-gray-400
+        w-full
+      >© 2020-PRESENT <RouterLink
+        to="/"
+        hover:underline
+      >XCPCIO™</RouterLink>. All Rights Reserved.</span>
+    </div>
+  </footer>
+</template>

package/src/components/GoBack.vue

@@ -0,0 +1,22 @@
+<script setup lang="ts">
+const router = useRouter();
+const { t } = useI18n();
+</script>
+
+<template>
+  <div>
+    <div
+      class="m-3 text-sm btn"
+      @click="router.back()"
+    >
+      {{ t("button.back") }}
+    </div>
+
+    <RouterLink
+      class="m-3 text-sm btn"
+      to="/"
+    >
+      {{ t("button.home") }}
+    </RouterLink>
+  </div>
+</template>

package/src/components/NavBar.vue

@@ -0,0 +1,152 @@
+<script setup lang="ts">
+import { GITHUB_URL } from "@xcpcio/types";
+import { availableLocales, loadLanguageAsync } from "~/modules/i18n";
+
+const props = defineProps<{
+  width?: string,
+}>();
+
+const { t, locale } = useI18n();
+const { y: scroll } = useWindowScroll();
+
+function toTop() {
+  window.scrollTo({
+    top: 0,
+    behavior: "smooth",
+  });
+}
+
+async function toggleLocales() {
+  const locales = availableLocales;
+  const newLocale = locales[(locales.indexOf(locale.value) + 1) % locales.length];
+  await loadLanguageAsync(newLocale);
+  locale.value = newLocale;
+}
+</script>
+
+<template>
+  <header
+    class="header z-40"
+    :class="[props?.width ?? '']"
+  >
+    <!-- <RouterLink
+      class="absolute h-12 w-12 select-none outline-none xl:fixed m-6"
+      text-xl
+      to="/"
+      focusable="false"
+    >
+      <div i-ion-balloon-sharp />
+    </RouterLink> -->
+
+    <button
+      title="Scroll to top"
+      fixed bottom-6 right-6 z-100 h-10 w-10
+      rounded-full transition duration-300
+      print:hidden
+      hover-bg-hex-8883 hover:op100
+      :class="scroll > 300 ? 'op30' : 'op0! pointer-events-none'"
+      @click="toTop()"
+    >
+      <div i-ri-arrow-up-line />
+    </button>
+
+    <nav
+      class="nav"
+      :class="[props?.width ? '' : 'fixed']"
+      text-xl
+    >
+      <div class="spacer" />
+      <div
+        class="right"
+        print:op0
+      >
+        <RouterLink
+          icon-btn
+          :title="t('button.home')"
+          to="/"
+          focusable="false"
+        >
+          <div i-ion-balloon-sharp />
+        </RouterLink>
+
+        <a
+          icon-btn
+          :title="t('button.toggle_langs')"
+          @click="toggleLocales()"
+        >
+          <div i-carbon-language />
+        </a>
+
+        <a
+          icon-btn
+          :title="t('button.toggle_dark')"
+          @click="toggleDark()"
+        >
+          <div i="carbon-sun dark:carbon-moon" />
+        </a>
+
+        <a
+          icon-btn
+          rel="noreferrer"
+          :href="GITHUB_URL"
+          target="_blank"
+          title="GitHub"
+        >
+          <div i-carbon-logo-github />
+        </a>
+      </div>
+    </nav>
+  </header>
+</template>
+
+<style scoped>
+.header h1 {
+  margin-bottom: 0;
+}
+
+.logo {
+  position: absolute;
+  top: 1.5rem;
+  left: 1.5rem;
+}
+
+.nav {
+  padding: 1rem;
+  width: 100%;
+  display: grid;
+  grid-template-columns: auto max-content;
+  box-sizing: border-box;
+}
+
+.nav > * {
+  margin: auto;
+}
+
+.nav img {
+  margin-bottom: 0;
+}
+
+.nav a {
+  cursor: pointer;
+  text-decoration: none;
+  color: inherit;
+  transition: opacity 0.2s ease;
+  opacity: 0.6;
+  outline: none;
+}
+
+.nav a:hover {
+  opacity: 1;
+  text-decoration-color: inherit;
+}
+
+.nav .right {
+  display: grid;
+  grid-gap: 1.2rem;
+  grid-auto-flow: column;
+}
+
+.nav .right > * {
+  margin: auto;
+}
+</style>

package/src/components/SearchInput.vue

@@ -0,0 +1,50 @@
+<script setup lang="ts">
+const { modelValue } = defineModels<{
+  modelValue: string | null
+}>();
+
+const inputEl = $ref<HTMLInputElement>();
+const vFocus = {
+  mounted: (el: HTMLElement) => el.focus(),
+};
+
+function clear() {
+  modelValue.value = null;
+  inputEl?.focus();
+}
+
+function focus() {
+  inputEl?.focus();
+}
+
+defineExpose({ focus });
+</script>
+
+<template>
+  <div relative>
+    <input
+      ref="inputEl"
+      v-model="modelValue"
+      v-focus
+      type="text"
+      v-bind="$attrs"
+      p="x-4 y-2"
+      text="left"
+      bg="transparent"
+      autocomplete="off"
+      w="full"
+      border="~ rounded gray-300 dark:gray-500"
+      outline="none active:none"
+      aria-label="Search"
+      placeholder="Search..."
+    >
+    <button
+      v-if="modelValue?.length"
+      absolute flex right-2 w-10 top-2 bottom-2 text-xl op30 hover:op90
+      aria-label="Clear search"
+      @click="clear()"
+    >
+      <span i-carbon-close ma block aria-hidden="true" />
+    </button>
+  </div>
+</template>

package/src/components/TheCounter.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+const props = defineProps<{
+  initial: number
+}>();
+
+const { count, inc, dec } = useCounter(props.initial);
+</script>
+
+<template>
+  <div>
+    {{ count }}
+    <button class="inc" @click="inc()">
+      +
+    </button>
+    <button class="dec" @click="dec()">
+      -
+    </button>
+  </div>
+</template>

package/src/components/TheInput.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+const { modelValue } = defineModels<{
+  modelValue: string
+}>();
+</script>
+
+<template>
+  <input
+    id="input"
+    v-model="modelValue"
+    type="text"
+    v-bind="$attrs"
+    p="x-4 y-2"
+    w="250px"
+    text="center"
+    bg="transparent"
+    border="~ rounded gray-200 dark:gray-700"
+    outline="none active:none"
+  >
+</template>

package/src/components/board/Balloon.vue

@@ -0,0 +1,5 @@
+<template>
+  <div
+    flex
+  />
+</template>