--- tags : client --- # Algemeen :::info Deze file is een algemeen overzicht van de tak Client. Hier is informatie te vinden over **algemene structuur**, **afspraken bij implementatie**, **welke persoon welke functionaliteit implementeert** etc. _Leden:_ Henri, Max en Joep :::spoiler Taken ### Independent from server: - [x] [`client object en websocket object creëren`: **Henri**] - [x] [`opstart programma en connectie opzetten`: **Henri**] - [ ] [`login & profiel aanmaken`: **Joep**] ```typescript function initiateLogin() ``` - [ ] [`berichten & commands van gebruiker verwerken`: **Max**] Functionaliteit afhankelijk van of string begint met backslash of niet. ```typescript function processInput(input:string): ``` - [ ] [`limbo state & chatroom display`: **Joep**] Tonen van een chatroom met zijn inhoud en de limbo-state met de verschillende beschikbare rooms. ```typescript function displayChatroom(room:ICLIENT.CurrentRoom) function displayLimboofzo() ``` - [ ] [`laad eerdere berichten`: **Joep**] De functie verandert het room-object en roept displayChatroom() op. ```typescript function onArrowKeys(upordown:boolean, room:ICLIENT.CurrentRoom) ``` ### Contact with server: - [ ] [`inteface met server definiëren`: **Henri**] - Definition of interface with server : the exact protocols are not yet known, thus the functions can not be determined exactly yet, but the goal is - To have asynchronous functions to 'request' something from the server. For example : Requesting all available chatrooms ```typescript async public requestChatRooms() : Promise<ICLIENT.Chatroom[]> {} ``` These functions will only return a result when an answer has been given by the server - If the server initializes communication with the client (instead of the other way around like above), a function will be called which handles this exact problem. For example : a user has sent a message in the chatroom ```typescript public receivedChatroomMessage(msg:ICLIENT.Message) ``` ::: ## Structure 1. Create **ChatClient** object 2. Wait for the connection to open 3. Start the login: if information is correct login, otherwise offer to create profile 4. After login : request chatrooms & show possible chatrooms + command entry 5. From then on: new code only called from events : - User input (command or message) -> processInput - Server message -> WebSocketInterface.onMessage() - Other events (Connection errors...) 6. Everytime new login is initiated (by logging out) OR left chatroom : execute step 4 ## Implementatie details Indien ooit ergens geen connectie : error message **Client object:** - Attributen : huidige chatroom & messages in de chatroom (met hun id/name) & hoe ver gescrolled binnen messages & keystroketimings & id & email & nickname ### Input Input compromises **everything a user inputs** into the client. Since our current version is using the console, the only input is **keyboard input**. This keyboard input can either be messages or commands. **Keytimings** Universally, whenever for **every keypress** by the user the **timings are recorded**. These are combined with they key they belong to and and converted to .json format before being send to the **server**. We have decided upon a couple of conventions regadering the keytimings: - The first character has **timing zero**. - Backspaces are also recorded and converted to unicode. - Non string keys are not recorded with the exception of **Caps lock**, **Control+Alt** and **Shift**. **Messages** Messages are **all non-commands a user inputs**. If the user is in a room, this will be the text other roommembers will see being send by the user. **Commands** We have defined commands as the way the user interacts with the client. Every command will start with a **backslash** and will use **lowercase-kebab-case**. For example: ``` > /join-channel ``` A full list of all availables commands can be found [**here**](https://hackmd.io/Gq2sPWNgT-Wy6RKotzdSRQ) ### Login The **login-phase** is defined as every part of the client until a user has send their information to the server and has goten confirmation this information belongs to an existing profile. :::warning Note that this means [grafisch](#Grafisch) and [Input](#Input) will already be called upon in the login phase. ::: At first the a connection will have to be established and tested. Afterwards a **login-function** will be called upon. This will: - Clear the screen - Ask for a user-id (an e-mailadress) and password and send to server - **If this belongs to an existing profile**: login or say password incorrect - **If no matching profile exists**: ask whether user wants to create a new profile If the user wants to create a new profile, a new function will be called. A user will input an email-adress, input a password and choose a username: ``` What is your email-adress? > example@mail.com What do you want to be your password? > admin Repeat your password > admin What username do you choose? > firstnamelastname ``` :::warning At every step in this process something might go wrong, this will be reported to the user in the form of an error with an explanation. ::: ### Rooms Rooms comprises everything the user will experience while being logged-in on its client. At every step a user will be either in a **chatroom** or in the **Limbo-state**, itself being an overview of all available rooms. **Limbo** The limbo-state is what a a user will see the moment they have first logged-on. There will be an overview given of all available rooms and their room-ids to join them. Users will only be able to use commands in this state, any messages they send which are not commands will be lost. Users can **join rooms**, **create rooms**, **log-out** and **delete rooms** from the limbo-state. **Chatroom** Chatrooms are the **actual communication** possibilities for users. At the top the roomname will be visible and further down they will see messages from other channel-members in their console. If they want to view earlier messages than the ones currently shown on screen they will be able to use their **arrow-keys** to do so. At the bottom the user will see a prompt ```Message or Command:```, they can type a message with a maximum length of 240 characters or a command. Using commands users can **leave room**, **log-out** ### [Grafisch](https://hackmd.io/@PO4Team1/SklqELaBs) Grafisch is what the user visualy sees at every step of their usage of the client. Every form of output will be handled by pre-defined functions. This way every function adheres to the principle of **independence** meaning: every function is responsible for only the exact task it is set to forfill and will call other functions if it needs their functionality. The list of functions is to be found [here](https://hackmd.io/@PO4Team1/SklqELaBs).