# Familiarising yourself with the TA Client
It is important that you don't just copy and paste code from here if you want to actually understand the client. The best way to use the client is to test out the features for yourself and play around with what you can do.

# What does "State-Based" mean?
The TournamentAssistant Client being state based means that not every action will result in a database query or ven a request in the first place. A great example of this can be seen on ShyyTAUI when you switch in-between the tabs on the navbar. Once the tournaments are loaded, they are saved in the state of the user. This means that it will take significantly less time to load for clients. If you request the tournaments once, but another user just requested it after a long period of inactivity, the tournaments are loaded in the state and a database query on the backend is not necessary to serve your request, hence the server will respond more promptly.

This also leads us to event listeners, or just listeners for short. Listeners serve the purpose of making sure that when the state changes on the server, your client also receives the update. A quick example of listeners is:
```ts
client.stateManager.on('matchCreated', handleMatchCreated);
client.stateManager.on('matchDeleted', handleMatchDeleted);
client.stateManager.on('matchUpdated', handleMatchUpdated);
client.stateManager.on('userConnected', handleUserConnected);
client.stateManager.on('userDisconnected', handleUserDisconnected);
```
<div class="info-box">
    <span class="material-icons">info</span>
    <div>
        <strong>Example:</strong> This is an example from the page of ShyyTAUI where the matches and available players are shown. 
    </div>
</div>

In this case, we use `client.stateManger`, which indicates that we want to listen to the changes in the state. It is often very confusing what the difference between `client.on()` and `client.stateManager.on()` is. The best way to explain it is to say that the `client` is YOU and the `stateManager` is THE SERVER. So when you listen using the `client`(`client.on()`), then you are listening to events you actioned. (`client.on('createdMatch', callback)` for example listens to the confirmation of when you created the match). On the other hand, listening with `client.stateManager.on()` acts as a global state listener(`client.stateManager.on('matchCreated', callback)` listens to when a match is created in general. Such as by another coordinator).

<div class="warning-box">
    <span class="material-icons">warning</span>
    <div>
        <strong>Note:</strong> This will be explained further in the 'State Manager' section, along with further behaviour descriptors. (most info will even be repeated) 
    </div>
</div>