Front : create class to connect, send and receive message

- Create environment class
 - Create Connexion class to connect and save data
 - Refactor back api

front/src/Connexion.ts

@@ -0,0 +1,148 @@
+const SocketIo = require('socket.io-client');
+import Axios from "axios";
+import {API_URL} from "./Enum/EnvironmentVariable";
+
+export interface PointInterface {
+    x: number;
+    y: number;
+    toJson() : object;
+}
+
+export class Message {
+    userId: string;
+    roomId: string;
+
+    constructor(userId : string, roomId : string) {
+        this.userId = userId;
+        this.roomId = roomId;
+    }
+
+    toJson() {
+        return {
+            userId: this.userId,
+            roomId: this.roomId,
+        }
+    }
+}
+
+export class Point implements PointInterface{
+    x: number;
+    y: number;
+
+    constructor(x : number, y : number) {
+        if(x  === null || y === null){
+            throw Error("position x and y cannot be null");
+        }
+        this.x = x;
+        this.y = y;
+    }
+
+    toJson(){
+        return {
+            x : this.x,
+            y: this.y
+        }
+    }
+}
+
+export class MessageUserPosition extends Message{
+    position: PointInterface;
+
+    constructor(userId : string, roomId : string, point : Point) {
+        super(userId, roomId);
+        this.position = point;
+    }
+
+    toString() {
+        return JSON.stringify(
+            Object.assign(
+                super.toJson(),
+                {
+                    position: this.position.toJson()
+                })
+        );
+    }
+}
+
+export class Connexion {
+    socket : any;
+    token : string;
+    email : string;
+    startedRoom : string;
+
+    constructor(email : string) {
+        this.email = email;
+        Axios.post(`${API_URL}/login`, {email: email})
+            .then((res) => {
+                this.token = res.data.token;
+                this.startedRoom = res.data.roomId;
+
+                this.socket = SocketIo(`${API_URL}`, {
+                    query: {
+                        token: this.token
+                    }
+                });
+
+                //join the room
+                this.joinARoom(this.startedRoom);
+
+                //share your first position
+                this.sharePosition(0, 0);
+
+                //create listen event to get all data user shared by the back
+                this.positionOfAllUser();
+
+                this.errorMessage();
+            })
+            .catch((err) => {
+                console.error(err);
+                throw err;
+            });
+    }
+
+    /**
+     * Permit to join a room
+     * @param roomId
+     */
+    joinARoom(roomId : string){
+        let messageUserPosition = new MessageUserPosition(this.email, this.startedRoom, new Point(0, 0));
+        this.socket.emit('join-room', messageUserPosition.toString());
+    }
+
+    /**
+     * Permit to share your position in map
+     * @param x
+     * @param y
+     */
+    sharePosition(x : number, y : number){
+        let messageUserPosition = new MessageUserPosition(this.email, this.startedRoom, new Point(x, y));
+        this.socket.emit('user-position', messageUserPosition.toString());
+    }
+
+    /**
+     * The data sent is an array with information for each user :
+     * [
+     * {
+     *       userId: <string>,
+     *       roomId: <string>,
+     *       position: {
+     *           x : <number>,
+     *           y : <number>
+     *       }
+     *     },
+     * ...
+     * ]
+     **/
+    positionOfAllUser(){
+        this.socket.on("user-position", (message : string) => {
+            //TODO show all user in map
+            console.info("user-position", message);
+        });
+    }
+
+    errorMessage(){
+        this.socket.on('message-error', (message : string) => {
+            console.error("message-error", message);
+        })
+    }
+}

front/src/Enum/EnvironmentVariable.ts

@@ -0,0 +1,5 @@
+const API_URL = process.env.API_URL || "http://api.workadventure.localhost";
+
+export {
+    API_URL
+}

front/src/index.ts

@@ -1,6 +1,7 @@
 import 'phaser';
 import GameConfig = Phaser.Types.Core.GameConfig;
 import {GameScene} from "./GameScene";
+import {Connexion} from "./Connexion";
 
 const resolution = 2;
 
@@ -18,3 +19,5 @@ let game = new Phaser.Game(config);
 window.addEventListener('resize', function (event) {
     game.scale.resize(window.innerWidth / resolution, window.innerHeight / resolution);
 });
+
+const connexion = new Connexion("test@gmail.com");