From 1cff66b0d9dd51f6cfaff22569bfa1fe1979609a Mon Sep 17 00:00:00 2001 From: Luna Date: Wed, 24 Sep 2025 13:41:04 +0200 Subject: [PATCH] roles and docs update --- .vscode/settings.json | 3 +- .../popups/AddNewAuthorisedUser.svelte | 163 ++--- .../components/popups/AddOrModifyRole.svelte | 557 ++++++++++++++++++ src/lib/taDocs/1-intro.md | 4 +- src/lib/taDocs/3-client-addAuthorizedUser.md | 46 ++ src/lib/taDocs/3-client-allFunctions.md | 2 + src/lib/taDocs/3-client-intro.md | 30 +- src/lib/taDocs/sample.md | 14 + src/routes/+layout.svelte | 299 ++++++++-- src/routes/api/docs/[slug]/+server.ts | 2 +- src/routes/documentation/+page.svelte | 217 +++---- .../[tournamentguid]/settings/+page.svelte | 220 +++++-- 12 files changed, 1258 insertions(+), 299 deletions(-) create mode 100644 src/lib/components/popups/AddOrModifyRole.svelte create mode 100644 src/lib/taDocs/3-client-addAuthorizedUser.md diff --git a/.vscode/settings.json b/.vscode/settings.json index 2f86c50..ed7a091 100644 --- a/.vscode/settings.json +++ b/.vscode/settings.json @@ -1,3 +1,4 @@ { - "svelte.enable-ts-plugin": true + "svelte.enable-ts-plugin": true, + "typescript.experimental.useTsgo": true } diff --git a/src/lib/components/popups/AddNewAuthorisedUser.svelte b/src/lib/components/popups/AddNewAuthorisedUser.svelte index b475f1b..3e2de3f 100644 --- a/src/lib/components/popups/AddNewAuthorisedUser.svelte +++ b/src/lib/components/popups/AddNewAuthorisedUser.svelte @@ -1,12 +1,13 @@ + + + +{#if isOpen} +
+
+
+

{role ? 'Modify Role' : 'Create Role'}

+ +
+ +
+
+ + +
+ + {#if !role} +
+ + +
+ {/if} + + {#if error} +

{error}

+ {/if} + +
+
+

Permissions ({selectedPermissions.size} of {availablePermissions && availablePermissions.length ? availablePermissions.length : 0} selected)

+
+ + +
+
+ +
+ {#each availablePermissions as permission (permission.value)} +
+
+ +
+ handlePermissionToggle(permission.value)} + class="permission-checkbox" + /> +
+ {/each} +
+
+
+ +
+ + +
+
+
+{/if} + + \ No newline at end of file diff --git a/src/lib/taDocs/1-intro.md b/src/lib/taDocs/1-intro.md index 91cfba7..a4bd963 100644 --- a/src/lib/taDocs/1-intro.md +++ b/src/lib/taDocs/1-intro.md @@ -1,9 +1,9 @@ # Introduction -TournamentAssistant is a piece of woftware which has a backend(TournamentAssistantServer), frontend(TournamentAssistantUI), and in-game plugin(TournamentAssistant). It is important to note before proceeding that TA uses a websocket for connections and DOES NOT have a RESTful API. The websocket uses protobuf, so the packets themseves are not readable by humans naturally. That is why the TA client is important. It includes the proto models and deserialises them. +TournamentAssistant is a piece of software which has a backend(TournamentAssistantServer), frontend(TournamentAssistantUI), and in-game plugin(TournamentAssistant). It is important to note before proceeding that TA uses a websocket for connections and DOES NOT have a RESTful API. The websocket uses protobuf, so the packets themseves are not readable by humans naturally. That is why the TA client is important. It includes the proto models and deserialises them. ## Prerequisites You should probably get familiar with: -- Serialisation +- Serialisation - optional, but recommended - Typescript - Websocket connections diff --git a/src/lib/taDocs/3-client-addAuthorizedUser.md b/src/lib/taDocs/3-client-addAuthorizedUser.md new file mode 100644 index 0000000..a435f57 --- /dev/null +++ b/src/lib/taDocs/3-client-addAuthorizedUser.md @@ -0,0 +1,46 @@ +# The taClient.addAuthorizedUser() method +This documents the `taClient.addAuthorizedUser()` method. + +This method has input parameters. The function could easily be defined as: +```ts +async function addAuthorizedUser(tournamentId: string, discordId: string, roleIds: string[]): Promise { + // backend logic +} +``` +## General usage: +```ts +const response: Response = taClient.addAuthorizedUser(tournamentGuid, userDiscordId, ['roleId1', 'roleId2']) +``` + +The `response` variable from above will actually be a 'mashup' of two types. Firstly, the standard `Response` type. Secondly the `Response_AddAuthorizedUser`. Find the custom response object below. + +- For `Response` please find documentation at [Modals -> Response](/documentation#Modals/4-Response) +- For `Response_AddAuthorizedUser` please find documentation at [Modals -> Response_AddAuthorizedUser](/documentation#Modals/4-Response_AddAuthorizedUser). + +```js +{ + details: { + addAuthorizedUser: Response_AddAuthorizedUser, + oneofKind: 'addAuthorizedUser' + }, + respondingToPacketId: 'packet-guid-uuidv4', + type: Response_ResponseType +} +``` + +
+ info +
+ Note: The method uses role.roleId, not role.guid. +
+
+ +```ts +ts example here +``` +
+ info +
+ Example: A direct example is not available, as this function is not used in ShyyTAUI. +
+
\ No newline at end of file diff --git a/src/lib/taDocs/3-client-allFunctions.md b/src/lib/taDocs/3-client-allFunctions.md index 4817816..70d0f58 100644 --- a/src/lib/taDocs/3-client-allFunctions.md +++ b/src/lib/taDocs/3-client-allFunctions.md @@ -10,6 +10,7 @@ The table below shows all of the functions of the taClient. From this point onwa |addServer()|Add a CoreServer. You will probably never use this.|True| |addTournamentPool()|Add a map pool to a tournament. This is the way a map pool can be created.|True| |addTournamentPoolMaps()|Add maps to an already existing map pool.|True| +|addTournamentRole()|Add a role to a tournament.|True| |addTournamentTeam()|Add a team to a tournament. This will create a new team|True| |addUserToMatch()|Add a user to a match. This is how a coordinator joins a match.|True| |connect()|Connect to a TournamentAssistant Core Server. This is the main server, not the tournament.|True| @@ -42,6 +43,7 @@ The table below shows all of the functions of the taClient. From this point onwa |removeQualifierMap()|Remove a qualifier map from an already existing qualifier.|True| |removeTournamentPool()|Remove a map pool from a tournament.|True| |removeTournamentPoolMap()|Remove a map from an already existing map pool.|True| +|removeTournamentRole()|Remove a role from a tournament.|True| |removeTournamentTeam()|Remove a team from a tournament.|True| |removeUserFromMatch()|Remove a user from a match.|True| |returnToMenu()|Return the speciied players to the menu.|False| diff --git a/src/lib/taDocs/3-client-intro.md b/src/lib/taDocs/3-client-intro.md index bb67b97..cce6690 100644 --- a/src/lib/taDocs/3-client-intro.md +++ b/src/lib/taDocs/3-client-intro.md @@ -3,16 +3,40 @@ The `taClient`(client for short) is how most of the actions will be carried out. The `stateManager` is the way you would fetch tournaments, get matches, or do anything related to getting specific data that does not require a database query. It is best if you are familiar with what methods it has and how you can use them. -For the ease of this explanation let me provide an example: +## Standard Response Object +There are a couple of important notes for client responses. Since most client responses are async, they will return a promise. This will be shown as `Promise` in IntelliSense. In reality, what happens under the hood is that ProtoBuf sends back a packet of the form: +```ts +{ + details: { + packetType: data, + oneofKind: 'packetType' + }, + respondingToPacketId: 'packet-guid-uuidv4', + type: Response_ResponseType +} +``` +For the definition of the `Response_ResponseType` look at the [Modals -> Response_ResponseType](/documentation#Modals/4-Response_ResponseType) + + +
+ question_mark +
+ Why is this important? TypeScript DOES NOT recognise these `packetType` objects, hence when dealing with responses we often use `as any` to get rid of type errors. +
+
+ +Let me provide an example of how the client is used in ShyyTAUI: ```ts onMount(async() => { // Check if the user is logged in if ($authTokenStore) { - // Using the client listen to events that will not be stored in the state, such as scores and song finish events + // Using the client listen for events that will not be stored in the state, + // such as scores and song finish events client.on('realtimeScore', handleRealtimeScoreUpdate); client.on('songFinished', handleSongFinished); } else { - // If the user is not authenticated, they will be thrown to the discord authentication page + // If the user is not authenticated, + // they will be thrown to the discord authentication page window.location.href = "/discordAuth" } }); diff --git a/src/lib/taDocs/sample.md b/src/lib/taDocs/sample.md index 63c4a39..05b09b4 100644 --- a/src/lib/taDocs/sample.md +++ b/src/lib/taDocs/sample.md @@ -13,6 +13,20 @@ Some more normal text... +
+ question_mark +
+ Will the stateManager be out-of-date? The stateManager automatically updates its state when a packet is received or sent, so no, you do not have to worry about out-of-date information being stored. +
+
+ +
+ warning +
+ Note: This will be explained further in the 'State Manager' section, along with further behaviour descriptors. (most info will even be repeated) +
+
+ ## Support If you have any issues, please contact us through Discord or email diff --git a/src/routes/+layout.svelte b/src/routes/+layout.svelte index 4d6fbcd..cf5e553 100644 --- a/src/routes/+layout.svelte +++ b/src/routes/+layout.svelte @@ -7,6 +7,7 @@ let isAuthenticated = false; let profileDropdownOpen = false; + let mobileMenuOpen = false; let userProfile: { name: string; avatar?: string } | null = null; onMount(() => { @@ -25,6 +26,10 @@ profileDropdownOpen = !profileDropdownOpen; } + function toggleMobileMenu() { + mobileMenuOpen = !mobileMenuOpen; + } + function logout() { authTokenStore.set(null); discordDataStore.set(null); @@ -32,14 +37,27 @@ isAuthenticated = false; userProfile = null; profileDropdownOpen = false; + mobileMenuOpen = false; goto('/'); } function handleClickOutside(event: MouseEvent) { const dropdown = document.querySelector('.profile-container'); + const mobileMenu = document.querySelector('.mobile-menu'); + const hamburger = document.querySelector('.hamburger-button'); + if (dropdown && !dropdown.contains(event.target as Node) && profileDropdownOpen) { profileDropdownOpen = false; } + + if (mobileMenu && !mobileMenu.contains(event.target as Node) && + hamburger && !hamburger.contains(event.target as Node) && mobileMenuOpen) { + mobileMenuOpen = false; + } + } + + function handleNavClick() { + mobileMenuOpen = false; } @@ -52,7 +70,8 @@ -