add WIP leaderboard

package.json

@@ -20,14 +20,15 @@
     "@apollo/client": "^3.7.17",
     "@github/time-elements": "^3.1.2",
     "@ropescore/components": "^1.8.1",
+    "@ropescore/rulesets": "^0.6.1",
     "@sentry/tracing": "^7.57.0",
     "@sentry/vue": "^7.57.0",
     "@unocss/preset-wind": "^0.53.5",
     "@unocss/transformer-directives": "^0.53.5",
     "@vue/apollo-composable": "^4.0.0-beta.8",
     "@vueuse/core": "^10.2.1",
     "@vueuse/head": "^1.1.26",
-    "@vueuse/router": "^10.2.1",
+    "@vueuse/router": "^10.4.1",
     "graphql": "^16.7.1",
     "graphql-ws": "^5.14.0",
     "unocss": "^0.53.5",

src/graphql/fragments/RankedResultBaseFragment.gql

@@ -0,0 +1,8 @@
+fragment RankedResultBaseFragment on RankedResult {
+  id
+  versionName
+  versionType
+  competitionEventId
+  maxEntryLockedAt
+  results
+}

src/graphql/queries/Leaderboard.gql

@@ -0,0 +1,21 @@
+query Leaderboard ($groupId: ID!, $limit: Int, $maxVisibility: ResultVersionType) {
+  group (groupId: $groupId) {
+    id
+    name
+
+    categories {
+      id
+      name
+      type
+
+      participants {
+        ...AthleteFragment
+        ...TeamFragment
+      }
+
+      rankedResults (limit: $limit, maxVisibility: $maxVisibility) {
+        ...RankedResultBaseFragment
+      }
+    }
+  }
+}

src/hooks/ruleset.ts

@@ -0,0 +1,32 @@
+import { unref, watch, isRef, ref } from 'vue'
+import { importPreconfiguredCompetitionEvent } from '../import-helpers'
+import type { MaybeRef } from '@vueuse/core'
+import { type CompetitionEvent } from '@ropescore/rulesets'
+
+export function useCompetitionEvent (competitionEventId: MaybeRef<string | undefined>) {
+  const competitionEvent = ref<CompetitionEvent>()
+
+  const key = unref(competitionEventId)
+  if (key != null) {
+    importPreconfiguredCompetitionEvent(key)
+      .then(ce => { competitionEvent.value = ce })
+      .catch(err => {
+        console.error(err)
+      })
+  }
+
+  if (isRef(competitionEventId)) {
+    watch(competitionEventId, id => {
+      if (id == null) competitionEvent.value = undefined
+      else {
+        importPreconfiguredCompetitionEvent(id)
+          .then(ce => { competitionEvent.value = ce })
+          .catch(err => {
+            console.error(err)
+          })
+      }
+    })
+  }
+
+  return competitionEvent
+}

src/import-helpers.ts

@@ -0,0 +1,53 @@
+import { RSUnsupported } from '@ropescore/rulesets'
+import type { CompetitionEventModel, OverallModel, CompetitionEvent, Overall, Ruleset } from '@ropescore/rulesets'
+
+const modelRegex = /^[a-z0-9-.]+@(?<version>[a-z0-9-.]+)$/
+const evtDefRegex = /^e\.(?<org>[a-z]+)(?:\.(?:[a-z0-9-]+)){5}@(?<version>[a-z0-9-.]+)$/
+const rulesetRegex = /^[a-z0-9-]+@(?<version>[a-z0-9-.]+)$/
+
+export async function importCompetitionEventModel (modelId: string): Promise<CompetitionEventModel> {
+  if (!modelRegex.test(modelId)) throw new TypeError('Invalid competitionEvent provided must be in the form of <model id>@<version>')
+  try {
+    return (await import(`../node_modules/@ropescore/rulesets/dist/esm/lib/models/competition-events/${modelId}.js`)).default
+  } catch {
+    throw new RSUnsupported('competition-event-model', modelId)
+  }
+}
+export async function importOverallModel (modelId: string): Promise<OverallModel> {
+  if (!modelRegex.test(modelId)) throw new TypeError('Invalid competitionEvent provided must be in the form of <model id>@<version>')
+  try {
+    return (await import(`../node_modules/@ropescore/rulesets/dist/esm/lib/models/overalls/${modelId}.js`)).default
+  } catch {
+    throw new RSUnsupported('overall-model', modelId)
+  }
+}
+
+export async function importPreconfiguredCompetitionEvent (competitionEvent: string): Promise<CompetitionEvent> {
+  const match = evtDefRegex.exec(competitionEvent)
+  if (match?.groups?.org == null || match.groups?.version == null) throw new TypeError('Invalid competitionEvent provided must be in the form of <event definition lookup code>@<version>')
+  try {
+    return (await import(`../node_modules/@ropescore/rulesets/dist/esm/lib/preconfigured/competition-events/${match.groups.org}/${match.groups.version}/${competitionEvent}.js`)).default
+  } catch {
+    throw new RSUnsupported('competition-event-preconfigured', competitionEvent)
+  }
+}
+export async function importPreconfiguredOverall (competitionEvent: string): Promise<Overall> {
+  const match = evtDefRegex.exec(competitionEvent)
+  if (match?.groups?.org == null || match.groups?.version == null) throw new TypeError('Invalid competitionEvent provided must be in the form of <event definition lookup code>@<version>')
+  try {
+    return (await import(`../node_modules/@ropescore/rulesets/dist/esm/lib/preconfigured/overalls/${match.groups.org}/${match.groups.version}/${competitionEvent}.js`)).default
+  } catch {
+    throw new RSUnsupported('overall-preconfigured', competitionEvent)
+  }
+}
+
+export async function importRuleset (rulesetId: string): Promise<Ruleset> {
+  if (!rulesetRegex.test(rulesetId)) throw new TypeError('Invalid competitionEvent provided must be in the form of <ruleset id>@<version>')
+  if (rulesetId === 'types') throw new RSUnsupported('ruleset', rulesetId)
+  try {
+    return (await import(`../node_modules/@ropescore/rulesets/dist/esm/lib/rulesets/${rulesetId}.js`)).default
+  } catch (err) {
+    console.error(err)
+    throw new RSUnsupported('ruleset', rulesetId)
+  }
+}

src/router.ts

@@ -11,6 +11,7 @@ const router = createRouter({
     { path: '/groups/:groupId/live', component: async () => import('./views/Live.vue'), meta: { fullscreen: true, authRequired: true } },
     { path: '/groups/:groupId/on-floor', component: async () => import('./views/OnFloor.vue'), meta: { fullscreen: true, authRequired: true } },
     { path: '/groups/:groupId/next-up', component: async () => import('./views/NextUp.vue'), meta: { fullscreen: true, authRequired: true } },
+    { path: '/groups/:groupId/leaderboard', component: async () => import('./views/Leaderboard.vue'), meta: { fullscreen: true, authRequired: true } },
 
     { path: '/device-stream', component: async () => import('./views/DeviceStreamSetup.vue'), meta: { authRequired: true } },
     { path: '/device-stream/live', component: async () => import('./views/DeviceStreamLive.vue'), meta: { fullscreen: true, authRequired: true } },

src/views/Groups.vue

@@ -36,6 +36,9 @@
             <button-link :to="`/groups/${group.id}/next-up`">
               Next Up
             </button-link>
+            <button-link :to="`/groups/${group.id}/leaderboard`">
+              Leaderboard
+            </button-link>
           </menu>
         </div>
       </div>