diff --git a/src/lib/taDocs/0-TODO b/src/lib/taDocs/0-TODO
index 388a8eb..0fe1eb7 100644
--- a/src/lib/taDocs/0-TODO
+++ b/src/lib/taDocs/0-TODO
@@ -1,8 +1,8 @@
still left:
-- the last 3 stateManager docs,
- all the base client methods,
- all the modals
- all the enums
+- all the evnts(listeners)
- further docs on streamsync
- how to correctly load a map
- how to handle scores (sec. 6)
diff --git a/src/lib/taDocs/2-stateManager-allFunctions.md b/src/lib/taDocs/2-stateManager-allFunctions.md
index 38ab6cc..87a7e11 100644
--- a/src/lib/taDocs/2-stateManager-allFunctions.md
+++ b/src/lib/taDocs/2-stateManager-allFunctions.md
@@ -1,4 +1,5 @@
# All of the methods of the StateManager
+The table below shows all of the functions of the State manager. From this point onwards `taClient` will be defined as `let taClient = new TAClient();`.
Below you can find a table that shows all of the methods of the stateManager.
| taClient.stateManager. (method) | Purpose and functionality | Is Async |
@@ -19,20 +20,3 @@ Below you can find a table that shows all of the methods of the stateManager.
|once()|This is essentially the same as `taClient.stateManager.on()` except it unsubscribes after the first event.|False|
|removeListener()|Unsibscribe from the events that you have started to listen to.|False|
-## How to listen, what is the general schema?
-Generally, the format is just:
-```ts
-taClient.stateManager.on('eventType', () => {
- // callback function
-})
-```
-or
-```ts
-async function handleEvent(params) {
- // code here
-}
-
-taClient.stateManager.on('eventType', handleEvent);
-```
-
-All of the event types and how to handle them are within this State Manager section.
\ No newline at end of file
diff --git a/src/lib/taDocs/2-stateManager-on.md b/src/lib/taDocs/2-stateManager-on.md
new file mode 100644
index 0000000..f7823eb
--- /dev/null
+++ b/src/lib/taDocs/2-stateManager-on.md
@@ -0,0 +1,88 @@
+# The stateManager.on() method
+This documents the `stateManager.on()` method.
+
+There are multiple parameters for this method, and a deeper dive into each of them can be found in the [Events -> Introduction page](/documentation#Events/6-events-intro) and all of the pages within the Events category.
+
+
+## How to listen, what is the general schema?
+Generally, the format is just:
+```ts
+taClient.stateManager.on('eventType', () => {
+ // callback function
+})
+```
+or
+```ts
+async function handleEvent(params) {
+ // code here
+}
+
+taClient.stateManager.on('eventType', handleEvent);
+```
+
+Essentiallly both are the same thing. The point is that when an event happens, depending on your subscription type, different types of data will be passed through to a method(callback). Once you start to listen to events, you will listen until you *remove* the listener or *disconnect* the client.
+
+Find documentation on how to remove a listener at the [State Manager -> RemoveListener page](/documentation#State%20Manager/2-stateManager-removeListener)
+
+I will provide an example from ShyyTAUI which listens to the `matchDeleted` and `matchUpdated` events.
+```ts
+// Handle match events
+// Handle when a match is updated. This happens when a new map is set, or something about the match chages like authorised users
+async function handleMatchUpdated(params: [Match, Tournament]) {
+ // Log the request for debugging and clarity
+ console.log("Match updated:", params);
+ // Check if the updated match guid is the same as the match we are in-s guid
+ if (params[0].guid === matchGuid) {
+ // If it is, update the match variable to ensure that we see the latest data
+ match = params[0];
+ // Since the song might have changed, let's refresh the song data(from BeatSaver)
+ await refreshMatchDetails(params[0]);
+ }
+}
+
+// Handle when a match is deleted
+function handleMatchDeleted(params: [Match, Tournament]) {
+ // Just log the packet in console to ensure that I know what is happening
+ console.log("Match deleted:", params);
+ // Check if the match that got deleted was the one the user was just in
+ if (params[0].guid === matchGuid) {
+ // If yes then navigate back to the create or join match screen without resetting the state
+ goto(`/tournaments/${tournamentGuid}`);
+ }
+}
+
+// This is triggered when the component is loaded
+onMount(async() => {
+ if ($authTokenStore) {
+ // Using stateManger listen to global changes to our match
+ client.stateManager.on('matchDeleted', handleMatchDeleted);
+ client.stateManager.on('matchUpdated', handleMatchUpdated);
+ } else {
+ window.location.href = "/discordAuth"
+ }
+});
+
+// This is triggered when the component is destroyed
+onDestroy(() => {
+ // Remove the listeners that were added on mount
+ client.stateManager.removeListener('matchUpdated', handleMatchUpdated);
+ client.stateManager.removeListener('matchDeleted', handleMatchDeleted);
+});
+```
+
+ info
+
+ Example: This is an example from the page of ShyyTAUI within the match cordination page.
+
+
+
+As you may see, the `params` variable in the method / callback had the same type in the `matchUpdated` and `matchDeleted` case. Generally it is very easy to even guess what the packet should include, as it of course includes the details of whta its name entails. In this case it was a simple array with a `Match` and `Tournament` object inside it.
+
+
+ warning
+
+ IMPORTANT: When you listen to events, rather than only listening in the current tournament, it listens globally!
+
+
+
+The above warning is important to consider. Since this is the `stateManager`, it will receive updates for the global state. That includes any tournament-s details that you are authorised to view. So say you are in *Tournament 1*, and then get a `matchUpdated` packet. This DOES NOT mean that the match you are currently in for updated. It means that a match (the object of which is passed on in `params[0]`) has been updated in the tournament(the object of which is passed on in `params[1]`). This tournament can however be *Tournament 57* as far as we are concerned. You must have authorisation for the tournament in order to actually receive these events. Although even in my implementation I discard this `Tournament` object, it can prove useful a lot of times. An example of this is when a user disconnects. You want to know if that user was in your tournament or not.
\ No newline at end of file
diff --git a/src/lib/taDocs/2-stateManager-once.md b/src/lib/taDocs/2-stateManager-once.md
new file mode 100644
index 0000000..0492786
--- /dev/null
+++ b/src/lib/taDocs/2-stateManager-once.md
@@ -0,0 +1,36 @@
+# The stateManager.once() method
+This documents the `stateManager.once()` method.
+
+There are multiple parameters for this method, and a deeper dive into each of them can be found in the [Events -> Introduction page](/documentation#Events/6-events-intro) and all of the pages within the Events category.
+
+
+ info
+
+ In Short: The difference between on() and once() is that on() stays connected until removed or the client disconnects, while once will detach after the first event.
+
+
+
+## How is this different from stateManager.on()?
+Generally, the format is just:
+```ts
+taClient.stateManager.once('eventType', () => {
+ // callback function
+})
+```
+or
+```ts
+async function handleEvent(params) {
+ // code here
+}
+
+taClient.stateManager.once('eventType', handleEvent);
+```
+
+Essentiallly both are the same thing. The point is that when an event happens, depending on your subscription type, different types of data will be passed through to a method(callback). The reason why `once()` is different is because it automatically detaches after the first event. That means the callback method is only triggered once, and then the listener is removed.
+
+The listener also detaches upon a disconnect from the `CoreServer`.
+
+## Its events
+The events in `once()` are the exact same as in `on()`. There is no direct implementation in ShyyTAUI, as there really is not a scenario when you want a listener to only trigger once.
+
+You might wonder why that is. Why is it not enough to listen to a `matchDeleted` event once? The answer is simple. Since just like `on()`, `once()` also gets triggered by other tournaments' data changes and not just the current match getting deleted.
\ No newline at end of file
diff --git a/src/lib/taDocs/2-stateManager-removeListener.md b/src/lib/taDocs/2-stateManager-removeListener.md
new file mode 100644
index 0000000..ebfe117
--- /dev/null
+++ b/src/lib/taDocs/2-stateManager-removeListener.md
@@ -0,0 +1,79 @@
+# The stateManager.removeListener() method
+This documents the `stateManager.removeListener()` method.
+
+There are multiple parameters for this method, and a deeper dive into each of them can be found in the [Events -> Introduction page](/documentation#Events/6-events-intro) and all of the pages within the Events category.
+
+
+## How can you remove a listener?
+Generally, the format is just:
+```ts
+taClient.stateManager.removeListener('eventType', () => {
+ // callback function
+})
+```
+or
+```ts
+async function handleEvent(params) {
+ // code here
+}
+
+taClient.stateManager.removeListener('eventType', handleEvent);
+```
+
+Essentiallly both are the same thing. The point is that they both remove a listener added by `taClient.stateManager.on()` or `taClient.stateManager.once()`.
+
+Find documentation on how to add a listener at the [State Manager -> On page](/documentation#State%20Manager/2-stateManager-on)
+
+I will provide an example from ShyyTAUI which listens to the `matchDeleted` and `matchUpdated` events.
+```ts
+// This is triggered when the component is destroyed
+onDestroy(() => {
+ // Remove the listeners that were added on mount
+ client.stateManager.removeListener('matchUpdated', handleMatchUpdated);
+ client.stateManager.removeListener('matchDeleted', handleMatchDeleted);
+});
+
+// This is triggered when the component is loaded
+onMount(async() => {
+ if ($authTokenStore) {
+ // Using stateManger listen to global changes to our match
+ client.stateManager.on('matchDeleted', handleMatchDeleted);
+ client.stateManager.on('matchUpdated', handleMatchUpdated);
+ } else {
+ window.location.href = "/discordAuth"
+ }
+});
+
+// Handle match events
+// Handle when a match is updated. This happens when a new map is set, or something about the match chages like authorised users
+async function handleMatchUpdated(params: [Match, Tournament]) {
+ // Log the request for debugging and clarity
+ console.log("Match updated:", params);
+ // Check if the updated match guid is the same as the match we are in-s guid
+ if (params[0].guid === matchGuid) {
+ // If it is, update the match variable to ensure that we see the latest data
+ match = params[0];
+ // Since the song might have changed, let's refresh the song data(from BeatSaver)
+ await refreshMatchDetails(params[0]);
+ }
+}
+
+// Handle when a match is deleted
+function handleMatchDeleted(params: [Match, Tournament]) {
+ // Just log the packet in console to ensure that I know what is happening
+ console.log("Match deleted:", params);
+ // Check if the match that got deleted was the one the user was just in
+ if (params[0].guid === matchGuid) {
+ // If yes then navigate back to the create or join match screen without resetting the state
+ goto(`/tournaments/${tournamentGuid}`);
+ }
+}
+```
+
+ info
+
+ Example: This is an example from the page of ShyyTAUI within the match cordination page.
+
+
+
+You would usually want to use this method when you unload a component or switch screens. But there is not much mor eto say about it.
\ No newline at end of file
diff --git a/src/lib/taDocs/3-client.md b/src/lib/taDocs/3-client-allFunctions.md
similarity index 100%
rename from src/lib/taDocs/3-client.md
rename to src/lib/taDocs/3-client-allFunctions.md
diff --git a/src/lib/taDocs/3-client-intro.md b/src/lib/taDocs/3-client-intro.md
new file mode 100644
index 0000000..bb67b97
--- /dev/null
+++ b/src/lib/taDocs/3-client-intro.md
@@ -0,0 +1,31 @@
+# An Introduction to the Client
+The `taClient`(client for short) is how most of the actions will be carried out. It is used when you want to query the database, connect to servers, and listen to things that are not saved in the state, such as live data
+
+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:
+```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
+ client.on('realtimeScore', handleRealtimeScoreUpdate);
+ client.on('songFinished', handleSongFinished);
+ } else {
+ // If the user is not authenticated, they will be thrown to the discord authentication page
+ window.location.href = "/discordAuth"
+ }
+});
+
+onDestroy(() => {
+ // Remove the listeners that were added on mount
+ client.removeListener('realtimeScore', handleRealtimeScoreUpdate);
+ client.removeListener('songFinished', handleSongFinished);
+});
+```
+
+ info
+
+ Example: This is an example from the page of ShyyTAUI within the match coorination page.
+