dockered

django/frontend/static/js/api/AExchangable.js

@@ -0,0 +1,51 @@
+
+
+export class AExchangeable
+{
+    /**
+     * This abstract class implement import and export method useful to export/import data to/from the server
+     * @param {[String]} fieldNameList 
+     */
+    export(fieldNameList = [])
+    {
+        let valueList = [];
+
+        fieldNameList.forEach(fieldName => {
+            let value;
+
+            if (this[fieldName] instanceof AExchangeable)
+                value = this[fieldName].export();
+            else
+                value = this[fieldName];
+        });
+
+        return valueList;
+    }
+
+    /**
+     * @param {Object} data 
+     */
+    import(data)
+    {
+        for (const [key, value] of Object.entries(data)) {
+
+            if (Array.isArray(value))
+            {
+                for (let i = 0; i < value.length; i++)
+                {   
+                    if (this[key][i] instanceof AExchangeable)
+                        this[key][i].import(value[i]);
+                    else
+                        this[key][i] = value[i];
+                }
+            }
+            else
+            {
+                if (this[key] instanceof AExchangeable)
+                    this[key].import(value);
+                else
+                    this[key] = value;
+            }
+        }
+    }
+}

django/frontend/static/js/api/Account.js

@@ -0,0 +1,93 @@
+import { Client } from "./Client.js";
+
+class Account
+{
+	/**
+	 * @param  {Client} client
+	 */
+	constructor (client)
+	{
+		/**
+		 * @type  {Client} client
+		 */
+		this.client = client;
+	}
+
+	/**
+	 * @param {String} username 
+	 * @param {String} password 
+	 * @returns {Response}
+	 */
+	async create(username, password)
+	{
+		let response = await this.client._post("/api/accounts/register", {username: username, password: password});
+
+		if (response.status === 201)
+			await this.client._update_logged(true);
+
+		return response;
+	}
+
+	/**
+	 * @param {String} password 
+	 * @returns {?Promise<Object>}
+	 */
+	async delete(password)
+	{
+		const response = await this.client._delete("/api/accounts/delete", {password: password});
+
+		if (response.ok) {
+			this.client._update_logged(false);
+			return null;
+		}
+
+		return await response.json();
+	}
+
+	/**
+		* @param {String} newUsername
+		* @returns {?Promise<Object>}
+	*/
+	async updateUsername(newUsername)
+	{
+		const data = {
+			username: newUsername
+		};
+		const response = await this.client._patch_json(`/api/accounts/update_profile`, data);
+		const respondeData = await response.json();
+
+		if (response.status === 200) {
+			this.client.me.username = respondeData.username;
+			document.getElementById('navbarDropdownButton').innerHTML = respondeData.username;
+			document.getElementById('myProfileLink').href = '/profiles/' + respondeData.username;
+			return null;
+		}
+		return respondeData['authorize'] || respondeData['detail'] || respondeData['username']?.join(' ') || 'Error.';
+	}
+
+	async updatePassword(currentPassword, newPassword, newPassword2)
+	{
+		const data = {
+			current_password: currentPassword,
+			new_password: newPassword,
+			new_password2: newPassword2
+		};
+		const response = await this.client._put('/api/accounts/update_password', data);
+		if (response.ok)
+			return null;
+
+		const responseData = await response.json();
+		const formatedData = {};
+		if (responseData['current_password'])
+			formatedData['currentPasswordDetail'] = responseData['current_password'];
+		if (responseData['new_password'])
+			formatedData['newPasswordDetail'] = responseData['new_password'];
+		if (responseData['new_password2'])
+			formatedData['newPassword2Detail'] = responseData['new_password2'];
+		if (formatedData == {})
+			formatedData['passwordDetail'] = 'Error';
+		return formatedData;
+	}
+}
+
+export { Account };

django/frontend/static/js/api/Client.js

@@ -0,0 +1,258 @@
+import { Account } from "./Account.js";
+import { MatchMaking } from "./Matchmaking.js";
+import { Profiles } from "./Profiles.js";
+import { MyProfile } from "./MyProfile.js";
+import Notice from "./Notice.js";
+import LanguageManager from './LanguageManager.js';
+
+function getCookie(name)
+{
+	let cookie = {};
+	document.cookie.split(';').forEach(function(el) {
+		let split = el.split('=');
+		cookie[split[0].trim()] = split.slice(1).join("=");
+	});
+	return cookie[name];
+}
+
+class Client
+{
+	/**
+	 * 
+	 * @param {String} url 
+	 */
+	constructor(url)
+	{
+		/**
+		 * @type {String}
+		 */
+		this._url = url;
+
+		/**
+		 * @type {Account}
+		 */
+		this.account = new Account(this);
+
+		/**
+		 * @type {Profiles}
+		 */
+		this.profiles = new Profiles(this);
+
+		/**
+		 * @type {MatchMaking}
+		 */
+		this.matchmaking = new MatchMaking(this);
+
+		/**
+		 * @type {Boolean} A private var represent if the is is log NEVER USE IT use await isAuthenticated()
+		 */
+		this._logged = undefined;
+
+		/**
+		 * @type {Notice}
+		 */
+		this.notice = new Notice(this);
+
+		this.lang = new LanguageManager();
+
+	}
+
+	/**
+	 * The only right way to determine is the user is logged
+	 * @returns {Promise<Boolean>}
+	 */
+	async isAuthenticated()
+	{
+		if (this._logged == undefined)
+			this._logged = await this._test_logged();
+		return this._logged;
+	}
+
+	/**
+	 * Send a GET request to %uri%
+	 * @param {String} uri 
+	 * @param {*} data 
+	 * @returns {Promise<Response>}  
+	 */
+	async _get(uri, data)
+	{
+		let response = await fetch(this._url + uri, {
+			method: "GET",
+			headers: {
+				'Accept-Language': this.lang.currentLang
+			},
+			body: JSON.stringify(data),
+		});
+		return response;
+	}
+
+	/**
+	 * Send a POST request
+	 * @param {String} uri 
+	 * @param {*} data 
+	 * @returns {Promise<Response>} 
+	 */
+    async _post(uri, data)
+    {
+        let response = await fetch(this._url + uri, {
+			method: "POST",
+			headers: {
+				"Content-Type": "application/json",
+				"X-CSRFToken": getCookie("csrftoken"),
+				'Accept-Language': this.lang.currentLang,
+			},
+			body: JSON.stringify(data),
+		});
+        return response;
+    }
+
+	/**
+	 * Send a DELETE request
+	 * @param {String} uri 
+	 * @param {String} data 
+	 * @returns {Promise<Response>} 
+	 */
+	async _delete(uri, data)
+    {
+        let response = await fetch(this._url + uri, {
+			method: "DELETE",
+			headers: {
+				"Content-Type": "application/json",
+				"X-CSRFToken": getCookie("csrftoken"),
+				'Accept-Language': this.lang.currentLang,
+			},
+			body: JSON.stringify(data),
+		});
+        return response;
+    }
+
+	/**
+	 * Send a PUT request with json
+	 * @param {String} uri 
+	 * @param {*} data 
+	 * @returns {Promise<Response>} 
+	 */
+	async _put(uri, data)
+    {
+        let response = await fetch(this._url + uri, {
+			method: "PUT",
+			headers: {
+				"X-CSRFToken": getCookie("csrftoken"),
+				"Content-Type": "application/json",
+				'Accept-Language': this.lang.currentLang,
+			},
+			body: JSON.stringify(data),
+		});
+        return response;
+    }
+
+	/**
+	 * Send a PATCH request with json
+	 * @param {String} uri 
+	 * @param {*} data 
+	 * @returns {Promise<Response>} 
+	 */
+	async _patch_json(uri, data)
+    {
+        let response = await fetch(this._url + uri, {
+			method: "PATCH",
+			headers: {
+				"X-CSRFToken": getCookie("csrftoken"),
+				"Content-Type": "application/json",
+				'Accept-Language': this.lang.currentLang,
+			},
+			body: JSON.stringify(data),
+		});
+        return response;
+    }
+
+	/**
+	 * Send a PATCH request with file
+	 * @param {String} uri 
+	 * @param {*} file 
+	 * @returns {Promise<Response>}
+	 */
+	async _patch_file(uri, file)
+    {
+        let response = await fetch(this._url + uri, {
+			method: "PATCH",
+			headers: {
+				"X-CSRFToken": getCookie("csrftoken"),
+				'Accept-Language': this.lang.currentLang,
+			},
+			body: file,
+		});
+        return response;
+    }
+
+	/**
+	 * Change logged state. Use It if you recv an 403 error
+	 * @param {Promise<?>} state 
+	 * @returns 
+	 */
+	async _update_logged(state)
+	{
+		if (this._logged == state)
+			return;
+
+		if (state)
+		{
+			this.me = new MyProfile(this);
+			await this.me.init();
+			this.notice.start();
+			document.getElementById('navbarLoggedOut').classList.add('d-none');
+			document.getElementById('navbarLoggedIn').classList.remove('d-none');
+			document.getElementById('navbarDropdownButton').innerHTML = this.me.username;
+			document.getElementById('myProfileLink').href = '/profiles/' + this.me.username;
+		}
+		else
+		{
+			this.me = undefined;
+			this.notice.stop();
+			document.getElementById('navbarLoggedOut').classList.remove('d-none');
+			document.getElementById('navbarLoggedIn').classList.add('d-none');
+			document.getElementById('navbarDropdownButton').innerHTML = 'Me';
+			document.getElementById('myProfileLink').href = '';
+		}
+		this._logged = state;
+	}
+
+	/**
+	 * Loggin the user
+	 * @param {String} username 
+	 * @param {String} password 
+	 * @returns {Promise<Response>}
+	 */
+	async login(username, password)
+	{
+		let response = await this._post("/api/accounts/login", {username: username, password: password});
+		if (response.status == 200)
+			await this._update_logged(true);
+
+		return response;
+	}
+
+	/**
+	 * Logout the user
+	 * @returns {Promise<?>}
+	 */
+	async logout()
+	{
+		await this._get("/api/accounts/logout");
+		await this._update_logged(false);
+	}
+
+	/**
+	 * Determine if the user is logged. NEVER USE IT, USE isAuthenticated()
+	 * @returns {Promise<Boolean>}
+	 */
+	async _test_logged()
+	{
+		let response = await this._get("/api/accounts/logged");
+
+		await this._update_logged(response.status === 200);
+		return response.status === 200;
+	}
+}
+
+export {Client};

django/frontend/static/js/api/LanguageManager.js

@@ -0,0 +1,74 @@
+import { reloadView } from '../index.js';
+
+export default class LanguageManager {
+	constructor() {
+		this.availableLanguages = ['en', 'fr', 'tp', 'cr'];
+
+		this.dict = null;
+		this.currentLang = 'en';
+		this.chosenLang = localStorage.getItem('preferedLanguage') || this.currentLang;
+		if (this.chosenLang !== this.currentLang && this.availableLanguages.includes(this.chosenLang)) {
+			this.loading = this.translatePage();
+			this.currentLang = this.chosenLang;
+		} else {
+			this.loading = this.loadDict(this.chosenLang);
+		}
+		document.getElementById('languageDisplay').innerHTML =
+			document.querySelector(`#languageSelector > [value=${this.currentLang}]`)?.innerHTML;
+	}
+
+	async translatePage() {
+		if (this.currentLang === this.chosenLang)
+			return;
+
+		await this.loadDict(this.chosenLang);
+		if (!this.dict)
+			return 1;
+
+		document.querySelectorAll('[data-i18n]').forEach(el => {
+			let key = el.getAttribute('data-i18n');
+			el.innerHTML = this.dict[key];
+		});
+		await reloadView();
+
+		return 0;
+	}
+
+	async changeLanguage(lang) {
+		if (lang === this.currentLang || !this.availableLanguages.includes(lang))
+			return 1;
+
+		this.chosenLang = lang;
+		if (await this.translatePage() !== 0)
+			return 1;
+
+		this.currentLang = this.chosenLang;
+		localStorage.setItem('preferedLanguage', lang);
+		document.getElementById('languageDisplay').innerHTML =
+			document.querySelector(`#languageSelector > [value=${this.currentLang}]`)?.innerHTML;
+		return 0;
+	}
+
+	async loadDict(lang) {
+		let dictUrl = `${location.origin}/static/js/lang/${lang}.json`;
+		let response = await fetch(dictUrl);
+
+		if (response.status !== 200) {
+			console.log(`No translation found for language ${lang}`);
+			return;
+		}
+
+		this.dict = await response.json();
+	}
+
+	async waitLoading() {
+		await this.loading;
+	}
+
+	get(key, defaultTxt) {
+		if (!this.dict)
+			return defaultTxt;
+
+		return this.dict[key] || defaultTxt;
+	}
+}

django/frontend/static/js/api/Matchmaking.js

@@ -0,0 +1,61 @@
+import { Client } from "./Client.js";
+
+class MatchMaking
+{
+	/**
+	 * @param  {Client} client
+	 */
+	constructor(client)
+	{
+		/**
+		 * @type {Client}
+		 */
+		this.client = client;
+		this.searching = false;
+	}
+
+	/**
+	 * 
+	 * @param {CallableFunction} receive_func 
+	 * @param {CallableFunction} disconnect_func 
+	 * @param {Number} mode The number of players in a game 
+	 * @returns {Promise<?>}
+	 */
+	async start(receive_func, disconnect_func, game_type, mode)
+	{
+		if (!await this.client.isAuthenticated())
+			return null;
+		
+		let url = `${window.location.protocol[4] === 's' ? 'wss' : 'ws'}://${window.location.host}/ws/matchmaking/${game_type}/${mode}`;
+
+		this._socket = new WebSocket(url);
+		
+		this.searching = true;
+
+		this.receive_func = receive_func;
+		this.disconnect_func = disconnect_func;
+
+		this._socket.onmessage = function (event) {
+			const data = JSON.parse(event.data);
+			receive_func(data);
+		};
+
+		this._socket.onclose = this.onclose.bind(this);
+	}
+
+	onclose(event)
+	{
+		this.stop();
+		this.disconnect_func(event);
+	}
+
+	stop()
+	{
+		if (this._socket)
+			this._socket.close();
+		this._socket = undefined;
+		this.searching = false;
+	}
+}
+
+export {MatchMaking};

django/frontend/static/js/api/MyProfile.js

@@ -0,0 +1,144 @@
+import { Client } from "./Client.js";
+import { Profile } from "./Profile.js";
+
+class MyProfile extends Profile
+{
+
+	/**
+	 * @param {Client} client 
+	 */
+	constructor (client)
+	{
+		super(client, "../me");
+
+		/**
+		 * @type {[Profile]}
+		*/
+		this.blockedUsers = [];
+		// /**
+		//  * @type {[Profile]}
+		// */
+		// this.friendList = [];
+		// /**
+		//  * @type {[Profile]}
+		// */
+		// this.incomingFriendRequests = [];
+		// /**
+		//  * @type {[Profile]}
+		// */
+		// this.outgoingFriendRequests = [];
+	}
+
+	async init() {
+		await super.init();
+		await this.getBlockedUsers();
+		// await this.getFriends();
+		// await this.getIncomingFriendRequests()
+		// await this.getOutgoingFriendRequests()
+	}
+
+	async getBlockedUsers() {
+		const response = await this.client._get('/api/profiles/block');
+		const data = await response.json();
+		data.forEach(profileData => this.blockedUsers.push(new Profile(this.client, profileData.username, profileData.id, profileData.avatar)));
+	}
+
+	async getFriends() {
+		const response = await this.client._get('/api/profiles/friends');
+		const data = await response.json();
+		data.forEach(profileData => this.friendList.push(new Profile(this.client, profileData.username, profileData.id, profileData.avatar)));
+	}
+	async getIncomingFriendRequests() {
+		const response = await this.client._get('/api/profiles/incoming_friend_requests');
+		const data = await response.json();
+		data.forEach(profileData => this.incomingFriendRequests.push(
+			new Profile(this.client, profileData.username, profileData.id, profileData.avatar)
+		));
+	}
+	async getOutgoingFriendRequests() {
+		const response = await this.client._get('/api/profiles/outgoing_friend_requests');
+		const data = await response.json();
+		data.forEach(profileData => this.outgoingFriendRequests.push(
+			new Profile(this.client, profileData.username, profileData.id, profileData.avatar)
+		));
+	}
+
+	/**
+	 * @param {Profile} profile
+	 * @returns {Boolean}
+	 */
+	_isFriend(profile) {
+		for (const user of this.friendList) {
+			if (user.id === profile.id)
+				return true;
+		}
+		return false;
+	}
+	/**
+	 * @param {Profile} profile
+	 * @returns {Boolean}
+	 */
+	_isBlocked(profile) {
+		for (const user of this.blockedUsers) {
+			if (user.id === profile.id)
+				return true;
+		}
+		return false;
+	}
+	/**
+	 * @param {Profile} profile
+	 * @returns {Boolean}
+	 */
+	_hasIncomingRequestFrom(profile) {
+		for (const user of this.incomingFriendRequests) {
+			if (user.id === profile.id)
+				return true;
+		}
+		return false;
+	}
+	/**
+	 * @param {Profile} profile
+	 * @returns {Boolean}
+	 */
+	_hasOutgoingRequestTo(profile) {
+		for (const user of this.outgoingFriendRequests) {
+			if (user.id === profile.id)
+				return true;
+		}
+		return false;
+	}
+
+	/**
+	 * 
+	 * @param {File} selectedFile
+	 * @returns {Promise<Response>}
+	 */
+	async changeAvatar(selectedFile)
+	{
+		const formData = new FormData();
+		formData.append('avatar', selectedFile);
+
+		const response = await this.client._patch_file(`/api/profiles/settings`, formData);
+		const responseData = await response.json();
+
+		if (response.ok) {
+			this.avatar = responseData.avatar;
+			return null;
+		}
+		return responseData;
+	}
+
+	async deleteAvatar() {
+		const response = await this.client._delete('/api/profiles/settings');
+		const responseData = await response.json();
+
+		if (response.ok) {
+			this.avatar = responseData.avatar;
+			return null;
+		}
+		return responseData;
+	}
+
+}
+
+export {MyProfile};

django/frontend/static/js/api/Notice.js

@@ -0,0 +1,101 @@
+import {Client} from './Client.js';
+import {createNotification} from '../utils/noticeUtils.js'
+import { lastView } from '../index.js';
+import ProfilePageView from '../views/ProfilePageView.js';
+import Search from '../views/Search.js';
+
+export default class Notice {
+
+	/**
+	 * @param  {Client} client
+	 */
+	constructor(client) {
+		/**
+		 * @type {Client}
+		 */
+		this.client = client;
+		this.url = location.origin.replace('http', 'ws') + '/ws/notice';
+	}
+
+	start() {
+		this._socket = new WebSocket(this.url);
+
+		this._socket.onclose = _ => this._socket = undefined;
+		this._socket.onmessage = message => {
+			const data = JSON.parse(message.data);
+			//console.log(data)
+
+			if (data.type === 'friend_request') {
+				this.friend_request(data.author);
+			} else if (data.type === 'new_friend') {
+				this.new_friend(data.friend);
+			} else if (data.type === 'friend_removed') {
+				this.friend_removed(data.friend);
+			} else if (data.type === 'friend_request_canceled') {
+				this.friend_request_canceled(data.author);
+			} else if (data.type === 'online') {
+				this.online(data.user)
+			} else if (data.type === 'offline') {
+				this.offline(data.user)
+			}
+		};
+	}
+
+	stop() {
+		if (this._socket) {
+			this._socket.close();
+			this._socket = undefined;
+		}
+	}
+
+	_setOnlineStatus(user, status) {
+		if (lastView instanceof ProfilePageView && lastView.profile.id === user.id) {
+			lastView.profile.online = status;
+			lastView.loadFriendshipStatus();
+		}
+		else if (lastView instanceof Search) {
+			lastView.display_specific_user(user.id);
+		}
+	}
+
+	online(user) {
+		this._setOnlineStatus(user, true)
+	}
+
+	offline(user) {
+		this._setOnlineStatus(user, false)
+	}
+
+	friend_request(author) {
+		createNotification('Friend Request', `<strong>${author.username}</strong> sent you a friend request.`);
+		if (lastView instanceof ProfilePageView && lastView.profile.id === author.id) {
+			lastView.profile.hasIncomingRequest = true;
+			lastView.loadFriendshipStatus();
+		}
+	}
+
+	new_friend(friend) {
+		createNotification('New Friend', `<strong>${friend.username}</strong> accepted your friend request.`);
+		if (lastView instanceof ProfilePageView && lastView.profile.id === friend.id) {
+			lastView.profile.isFriend = true;
+			lastView.profile.hasIncomingRequest = false;
+			lastView.profile.hasOutgoingRequest = false;
+			lastView.loadFriendshipStatus();
+		}
+	}
+
+	friend_removed(exFriend) {
+		if (lastView instanceof ProfilePageView && lastView.profile.id === exFriend.id) {
+			lastView.profile.isFriend = false;
+			lastView.profile.online = null;
+			lastView.loadFriendshipStatus();
+		}
+	}
+
+	friend_request_canceled(author) {
+		if (lastView instanceof ProfilePageView && lastView.profile.id === author.id) {
+			lastView.profile.hasIncomingRequest = false;
+			lastView.loadFriendshipStatus();
+		}
+	}
+}

django/frontend/static/js/api/Profile.js

@@ -0,0 +1,101 @@
+import { AExchangeable } from "./AExchangable.js";
+import { Client } from "./Client.js";
+
+export class Profile extends AExchangeable
+{
+	/**
+	 * @param  {Client} client
+	 */
+	constructor (client, username, id, avatar)
+	{
+		super();
+
+		/**
+		 * @type  {Client} client
+		 */
+		this.client = client;
+		
+		/**
+		 * @type {String}
+		 */
+		this.username = username;
+
+		/**
+		 * @type {Number}
+		 */
+		this.id = id;
+
+		/**
+		 * @type {String}
+		 */
+		this.avatar = avatar;
+
+		/**
+		 * @type {Boolean}
+		**/
+		this.online = null;
+
+		/**
+		 * @type {Boolean}
+		 */
+		this.isFriend;
+		this.isBlocked;
+		this.hasIncomingRequest;
+		this.hasOutgoingRequest;
+	}
+
+	/**
+	 * 
+	 * @returns {Promise<*>}
+	 */
+	async init()
+	{
+		let response;
+		if (this.username !== undefined)
+			response = await this.client._get(`/api/profiles/user/${this.username}`);
+		else 
+			response = await this.client._get(`/api/profiles/id/${this.id}`);
+
+		if (response.status !== 200)
+			return response.status;
+
+		const responseData = await response.json();
+		this.id = responseData.id;
+		this.username = responseData.username;
+		this.avatar = responseData.avatar;
+		this.online = responseData.online
+
+		if (!this.client.me || this.client.me.id === this.id)
+			return;
+
+		this.hasIncomingRequest = responseData.has_incoming_request;
+		this.hasOutgoingRequest = responseData.has_outgoing_request;
+		this.isFriend = responseData.is_friend;
+		this.isBlocked = this.client.me._isBlocked(this);
+	}
+
+	/**
+	 * @returns {Promise<[Object]>}
+	 */
+	async getGameHistory()
+	{
+		const response = await this.client._get(`/api/games/history/${this.id}`);
+		const response_data = await response.json();
+
+		const games = [];
+
+		response_data.forEach(game_data => {
+			games.push(game_data);
+		});
+
+		return games;
+	}
+
+	/**
+	 * @param {[String]} additionalFieldList
+	 */
+	export(additionalFieldList = [])
+	{
+		super.export([...["username", "avatar", "id"], ...additionalFieldList])
+	}
+}

django/frontend/static/js/api/Profiles.js

@@ -0,0 +1,59 @@
+import { Profile } from "./Profile.js";
+
+class Profiles
+{
+	/**
+	 * @param  {Client} client
+	 */
+	constructor (client)
+	{
+		/**
+		 * @type {Client} client
+		 */
+		this.client = client;
+	}
+
+	/**
+	 * 
+	 * @returns {Promise<[Profile]>}
+	 */
+	async all()
+	{
+		let response = await this.client._get("/api/profiles/");
+		let response_data = await response.json();
+
+		let profiles = [];
+		response_data.forEach((profile) => {
+			profiles.push(new Profile(this.client, profile.username, profile.id, profile.avatar));
+		});
+		return profiles;
+	}
+
+	/**
+	 * 
+	 * @param {String} username 
+	 * @returns {?Promise<Profile>}
+	 */
+	async getProfile(username)
+	{
+		let profile = new Profile(this.client, username);
+		if (await profile.init())
+			return null;
+		return profile;
+	}
+
+	/**
+	 * 
+	 * @param {Number} id 
+	 * @returns {Profile}
+	 */
+	async getProfileId(id)
+	{
+		let profile = new Profile(this.client, undefined, id);
+		if (await profile.init())
+			return null;
+		return profile;
+	}
+}
+
+export {Profiles};

django/frontend/static/js/api/chat/Ask.js

@@ -0,0 +1,22 @@
+
+class Ask {
+	constructor(client) {
+		this.client = client;
+	}
+
+	async ask_game(asked) {
+		response = await this.client._post(`/api/chat/ask/`);
+	}
+	
+	async ask_game_canceled() {
+
+	}
+
+	async ask_game_accepted() {
+
+	}
+
+	async ask_game_refused() {
+
+	}
+}

django/frontend/static/js/api/chat/Channel.js

@@ -0,0 +1,66 @@
+import {Message} from "./Message.js";
+
+class Channel {
+	constructor(client, channel, members, messages, reload) {
+		this.client = client;
+		this.channel = channel;
+		this.members = members;
+		this.messages = [];
+		if (messages != undefined)
+			this.updateMessages(messages);
+
+		this.connect(reload);
+	}
+
+	// reload = function to use when we receive a message
+	connect(reload) {
+		const url = location.origin.replace('http', 'ws') +
+			'/ws/chat/' +
+			this.channel;
+
+		this.chatSocket = new WebSocket(url);
+		this.chatSocket.onmessage = (event) =>{
+			let data = JSON.parse(event.data);
+
+			this.messages.push(new Message(
+				this.channel,
+				data.author,
+				data.content,
+				data.time,
+			));
+
+			reload();
+		};
+	}
+
+	disconnect() {
+		this.chatSocket.close();
+	}
+
+	updateMessages(messages)
+	{
+		this.messages = [];
+
+		messages.forEach((message) => {
+			this.messages.push(new Message(
+				message.channel,
+				message.author,
+				message.content,
+				message.time,
+			));
+		});
+	}
+
+	async sendMessageChannel(message, receivers_id) {
+
+		if (this.chatSocket == undefined)
+			return;
+
+		this.chatSocket.send(JSON.stringify({
+			'message':message,
+			'receivers_id':receivers_id,
+		}));
+	}
+}
+
+export {Channel};

django/frontend/static/js/api/chat/Channels.js

@@ -0,0 +1,23 @@
+import {Channel} from "./Channel.js";
+
+export default class Channels {
+	constructor(client) {
+		this.client = client;
+		this.channel = undefined;
+	}
+
+	async createChannel(members_id, reload) {
+		
+		const response = await this.client._post("/api/chat/", {
+			members_id:members_id
+		});
+
+		if (response.status >= 300)
+			return undefined;
+
+		const data = await response.json();
+		console.log(data)
+
+		this.channel = new Channel(this.client, data.id, members_id, data.messages, reload);
+	}
+}

django/frontend/static/js/api/chat/Message.js

@@ -0,0 +1,10 @@
+class Message {
+	constructor(channel, author, content, time) {
+		this.channel = channel;
+		this.author = author;
+		this.content = content;
+		this.time = time;
+	}
+}
+
+export {Message};

django/frontend/static/js/api/game/AGame.js

@@ -0,0 +1,159 @@
+import { AExchangeable } from "../AExchangable.js";
+import { APlayer } from "./APlayer.js";
+import { Client } from "../Client.js"
+import { sleep } from "../../utils/sleep.js";
+import { Profile } from "../Profile.js";
+
+export class AGame extends AExchangeable
+{
+    /**
+     * Abstract class to create commununication between client and server
+     * @param {Client} client 
+     * @param {Number} id 
+     * @param {CallableFunction} receiveHandler 
+     * @param {CallableFunction} disconntectHandler 
+     * @param {"tictactoe" | "pong"} gameType 
+     */
+    constructor(client, id, receiveHandler, disconntectHandler, gameType)
+    {
+        super();
+
+        /**
+         * @type {Client}
+         */
+        this.client = client;
+
+        /**
+         * @type {Number}
+         */
+        this.id = id;
+
+        /**
+         * ex: Tictactoe, Pong
+         * @type {String}
+         */
+        this.gameType = gameType;
+
+        /**
+         * @type {CallableFunction}
+         */
+        this._receiveHandler = receiveHandler;
+
+        /**
+         * @type {CallableFunction}
+         */
+        this._disconntectHandler = disconntectHandler;
+
+        /**
+         * @type {Profile}
+         */
+        this.winner;
+        
+        /**
+         * @type {Number}
+         */
+        this.startTimestamp;
+
+        /**
+         * @type {Number}
+         */
+        this.stopTimestamp;
+
+        /**
+         * @type {Boolean}
+         */
+        this.started;
+
+        /**
+         * @type {Boolean}
+         */
+        this.finished;
+
+        /**
+         * @type {[APlayer]}
+         */
+        this.players = [];
+    }
+
+    async init()
+    {
+        let response = await this.client._get(`/api/games/${this.id}`);
+
+        if (response.status !== 200)
+            return response.status;
+        
+        let response_data = await response.json();
+
+        this.import(response_data);
+    }
+
+    getState()
+    {
+        return ["waiting", "started", "finished"][this.started + this.finished];
+    }
+
+    /**
+     * Send string to the server, must be excuted after .join()
+     * @param {String} data 
+     */
+    send(data)
+    {
+        if (this._socket === undefined || this._socket.readyState !== WebSocket.OPEN)
+            return;
+        this._socket.send(data);
+    }
+
+    async join()
+    {
+        if (this.finished === true)
+        {
+            console.error("The Game is not currently ongoing.");
+            return;
+        }
+
+        const url = `${window.location.protocol[4] === 's' ? 'wss' : 'ws'}://${window.location.host}/ws/games/${this.gameType}/${this.id}`;
+
+        this._socket = new WebSocket(url);
+
+        this._socket.onmessage = async (event) => {
+			const data = JSON.parse(event.data);
+			await this._receiveHandler(data);
+		};
+
+        this._socket.onclose = async () => {
+            this._socket = undefined;
+            await this._disconntectHandler();            
+        }; 
+    }
+
+    leave()
+    {
+        if (this._socket)
+        {
+            this._socket.close();
+            this._socket = undefined;
+        }
+    }
+
+    /**
+     * Should be redefine using your own APlayer inherited
+     * @param {Object} data 
+
+    import(data)
+    {
+        super.import(data);
+
+        // just an example code
+
+        /*
+        this.players.length = 0;
+
+        data.players.forEach(player_data => {
+            let player = new APlayer(this.client, this);
+            player.import(player_data);
+            this.players.push(player);
+        });
+        
+    }
+    */
+}

django/frontend/static/js/api/game/APlayer.js

@@ -0,0 +1,39 @@
+import { Client } from "../Client.js";
+import { Profile } from "../Profile.js";
+import { AGame } from "./AGame.js";
+
+export class APlayer extends Profile
+{
+    /**
+     * 
+     * @param {Client} client 
+     * @param {AGame} game 
+     * @param {Number} id 
+     * @param {String} username 
+     * @param {String} avatar  
+     * @param {Boolean} isConnected 
+     */
+    constructor (client, game, id, username, avatar, isConnected)
+    {
+        super(client, username, id, avatar);
+
+        /**
+         * @type {AGame}
+         */
+        this.game = game
+
+        /**
+         * @type {Boolean}
+         */
+        this.isConnected = isConnected;
+
+    }
+
+    /**
+	 * @param {[String]} additionalFieldList
+	 */
+	export(additionalFieldList = [])
+    {
+        super.export([...additionalFieldList, ...["isConnected"]])
+    }
+}

django/frontend/static/js/api/game/pong/Point.js

@@ -0,0 +1,32 @@
+import { AExchangeable } from "../../AExchangable.js";
+
+class Point extends AExchangeable
+{
+    /**
+     * @param {Number} x
+     * @param {Number} y
+     */
+    constructor(x, y)
+    {
+        super();
+        
+        /**
+         * @type {Number}
+         */
+        this.x = x;
+        /**
+         * @type {Number}
+         */
+        this.y = y;
+    }
+
+    /**
+     * @type {[String]}
+     */
+    export(additionalFieldList)
+    {
+        super.export([...additionalFieldList, "x", "y"])
+    }
+}
+
+export { Point };

django/frontend/static/js/api/game/pong/PongBall.js

@@ -0,0 +1,83 @@
+import { AExchangeable } from "../../AExchangable.js";
+import { PongGame } from "./PongGame.js";
+import { renderCube} from "../../../3D/cube.js"
+import { Position } from "./Position.js";
+import { Point } from "./Point.js";
+
+export class PongBall extends AExchangeable
+{
+    /**
+     * 
+     * @param {PongGame} game 
+     * @param {Position} position
+     * @param {Number} angle
+     * @param {Number} speed
+     * @param {Number} size
+     */
+    constructor(game, size, position = new Position(new Point(game.config.CENTER_X, game.config.CENTER_Y), 0), angle, speed)
+    {
+        super();
+
+        /**
+         * @type {PongGame}
+         */
+        this.game = game;
+
+        /**
+         * @type {Position}
+         */
+        this.position = position;
+
+        /**
+         * @type {Number}
+         */
+        this.size = size;
+
+        /**
+         * @type {Number}
+         */
+        this.angle = angle;
+
+        /**
+         * @type {Number}
+         */
+        this.speed = speed;
+    }
+
+    /**
+     * 
+     * @param {CanvasRenderingContext2D} ctx 
+     */
+    draw(ctx)
+    {
+		if(ctx instanceof CanvasRenderingContext2D)
+		{
+			ctx.rect(this.position.location.x - this.size / 2, this.position.location.y - this.size / 2, this.size, this.size);
+		}
+		else if(ctx instanceof WebGLRenderingContext)
+		{
+			const size = this.size * 3;
+			const posx = (this.position.location.x - this.size / 2) - this.game.config.MAP_SIZE_X / 2;
+			const posy = (this.position.location.y - this.size / 2) - this.game.config.MAP_SIZE_Y / 2;
+			renderCube(ctx, posx, 0, posy, 0, size, size, size);
+		}
+		else
+		{
+			alert('Unknown rendering context type');
+		}
+    }
+
+    /**
+     * 
+     * @param {CanvasRenderingContext2D} ctx 
+     */
+    render(ctx)
+    {
+        let distance = this.speed * (this.game.time.deltaTime() / 1000);
+
+        this.position.location.x = this.position.location.x + distance * Math.cos(this.angle);
+        this.position.location.y = this.position.location.y - distance * Math.sin(this.angle);
+
+        this.draw(ctx);
+    }
+}

django/frontend/static/js/api/game/pong/PongConfig.js

@@ -0,0 +1,94 @@
+import { AExchangeable } from "../../AExchangable.js";
+
+export class PongConfig extends AExchangeable
+{
+	/**
+	 * @param  {Client} client
+	 */
+	constructor(client)
+	{
+        super();
+
+		/**
+		 * @type {Client}
+		 */
+        this.client = client;
+
+        /**
+         * @type {Number}
+         */
+        this.MAP_SIZE_X;
+
+        /**
+         * @type {Number}
+         */
+        this.MAP_SIZE_Y;
+
+        /**
+         * @type {Number}
+         */
+        this.WALL_RATIO;
+
+        /**
+         * @type {Number}
+         */
+        this.PADDLE_SPEED_PER_SECOND_MAX;
+
+        /**
+         * @type {Number}
+         */
+        this.PADDLE_RATIO;
+
+        /**
+         * @type {Number}
+         */
+        this.BALL_SIZE;
+
+        /**
+         * @type {Number}
+         */
+        this.BALL_SPEED_INC;
+
+        /**
+         * @type {Number}
+         */
+        this.BALL_SPEED_START;
+
+        /**
+         * @type {Number}
+         */
+        this.STROKE_THICKNESS;
+
+        /**
+         * @type {Number}
+         */
+        this.GAME_MAX_SCORE;
+
+        /**
+         * @type {Number}
+         */
+        this.MAP_CENTER_X;
+
+        /**
+         * @type {Number}
+         */
+        this.MAP_CENTER_Y;
+    }
+
+    async init()
+    {
+        let response = await this.client._get("/api/games/");
+
+		if (response.status !== 200)
+            return response.status;
+
+        let response_data = await response.json();
+
+        this.import(response_data);
+
+        this.MAP_CENTER_X = this.MAP_SIZE_X / 2;
+        this.MAP_CENTER_Y = this.MAP_SIZE_Y / 2;
+
+        return 0;
+    }
+}

django/frontend/static/js/api/game/pong/PongGame.js

@@ -0,0 +1,230 @@
+import { Time } from "./Time.js";
+import { AGame } from "../AGame.js";
+import { PongConfig } from "./PongConfig.js";
+import { PongPlayer } from "./PongPlayer.js";
+import { Client } from "../../Client.js";
+import { PongBall } from "./PongBall.js";
+import { sleep } from "../../../utils/sleep.js";
+import { Wall } from "./Wall.js"
+import { Position } from "./Position.js";
+
+export class PongGame extends AGame
+{
+	/**
+	 * @param {Client} client
+     * @param {CallableFunction} goal_handler
+     * @param {CallableFunction} finish_handler 
+     * @param {CallableFunction} disconnect_handler
+     * @param {CallableFunction} startHandler 
+     * @param {Number} id 
+	 */
+	constructor(client, id, disconnectHandler, goalHandler, startHandler, finishHandler)
+	{
+        super(client, id,  undefined, disconnectHandler, "pong");
+
+        this._receiveHandler = this._receive;
+
+        /**
+         * @type {CallableFunction}
+         */
+        this._goalHandler = goalHandler;
+
+        /**
+         * @type {CallableFunction}
+         */
+        this._startHandler = startHandler;
+        
+        /**
+         * @type {CallableFunction}
+         */
+        this._finishHandler = finishHandler
+
+        /**
+         * @type {Time}
+         */
+        this.time;
+
+        /**
+         * @type {Boolean}
+         */
+        this._inited = false;
+
+        /**
+         * @type {PongConfig}
+         */
+        this.config;
+
+        /**
+         * @type {Ball}
+         */
+        this.ball = new PongBall(this, undefined, new Position(), 0, 0);
+
+        /**
+         * @type {[Wall]}
+         */
+        this.walls = [];
+
+        /**
+         * @type {[PongPlayer]}
+         */
+        this.players = [];
+    }
+
+    /**
+     * 
+     * @returns {Promise<Number>}
+     */
+    async init()
+    {
+        let response = await this.client._get(`/api/games/${this.id}`);
+
+        if (response.status !== 200)
+            return response.status;
+        
+        let response_data = await response.json();
+
+        response_data.players.forEach((player_data) => {
+            let player = new PongPlayer(this.client, this)
+            this.players.push(player);
+        });
+
+        this.import(response_data);
+
+        if (this.finished === true)
+            return 0;
+
+        this.config = new PongConfig(this.client);
+
+        let ret = await this.config.init();
+
+        if (ret !== 0)
+            return ret;
+
+        this.time = new Time();
+
+        return 0;
+    }
+
+    /**
+     * 
+     * @param {CanvasRenderingContext2D} ctx 
+     */
+    drawSides(ctx)
+    {
+        this.walls.forEach(wall => {
+            wall.draw(ctx);
+        });
+
+        this.players.forEach(player => {
+            player.draw(ctx);
+        });
+    }
+
+    /**
+     * 
+     * @param {CanvasRenderingContext2D} ctx 
+     */
+    render(ctx)
+    {
+		ctx.clearRect(0, 0, this.config.MAP_SIZE_Y, this.config.MAP_SIZE_Y);
+
+        this.drawSides(ctx);
+        this.ball.render(ctx);
+
+        ctx.strokeStyle = "#000000";
+        ctx.lineWidth = this.config.STROKE_THICKNESS;
+        ctx.stroke();
+    }
+
+    /**
+     * @param {Object} data 
+     */
+    send(data)
+    {
+        super.send(JSON.stringify(data));
+    }
+
+    /**
+     * @param {Object} data 
+     */
+    async _receive(data)
+    {
+        console.log(data)
+
+        if (this._inited === false  && data.detail === "init_game")
+        {
+            this._initGame(data);
+            return;
+        }
+
+        if (data.detail === "update_player")
+            this._updatePlayer(data);
+        else if (data.detail === "update_ball")
+            this._updateBall(data);
+        else if (data.detail === "goal")
+            await this._receiveGoal(data);
+        else if (data.detail === "finish")
+            await this._receiveFinish(data);
+        else if (data.detail === "start")
+            await this._receiveStart();
+    }
+
+    async _receiveFinish(data)
+    {
+        const winner = this.players.find(player => player.id === data.winner_id)
+        this.finished = true;
+        await this._finishHandler(winner);
+    }
+
+
+    async _receiveStart()
+    {
+        this.started = true;
+        await this._startHandler();
+    }
+
+    async _receiveGoal(data)
+    {
+        const player = this.players.find((player) => player.id === data.player_id);
+
+        if (player === undefined)
+        {
+            console.error("error: unknown player.")
+            return
+        }
+
+        player.score.push(data.timestamp)
+        console.log(player)
+        
+        await this._goalHandler(player);
+    }
+
+    _updatePlayer(data)
+    {
+        let player = this.players.find((player) => player.id === data.id);
+
+        player.import(data);
+    }
+
+    _updateBall(data)
+    {
+        this.ball.import(data);
+    }
+
+    _initGame(data)
+    {
+        data.walls.forEach((wall_data) => {
+            this.walls.push(new Wall(this));
+        });
+
+        this.import(data);
+
+        this._inited = true;
+    }
+
+    async waitInit()
+    {
+        while (this._inited !== true)
+            await sleep(100);
+    }
+}

django/frontend/static/js/api/game/pong/PongMyPlayer.js

@@ -0,0 +1,110 @@
+import { PongPlayer } from "./PongPlayer.js";
+import { Client } from "../../Client.js";
+import { Segment } from "./Segment.js";
+import { PongGame } from "./PongGame.js";
+import { Position } from "./Position.js";
+
+export class PongMyPlayer extends PongPlayer
+{
+    /**
+     * @param {Client} client 
+     * @param {PongGame} game 
+     * @param {Segment} rail 
+     * @param {[Number]} score
+     * @param {Position} position 
+     */
+    constructor(client, game, score, rail, position = new Position(0.5))
+    {
+        super(client, game, client.me.id, client.me.username, client.me.avatar, score, rail, position, true);
+        /**
+         * @type {Client}
+         */
+        this.client = client;
+        
+        /**
+         * @type {PongGame}
+         */
+        this.game;
+
+        this.upKeys = [];
+        this.downKeys = [];
+
+        if (rail.start.x != rail.stop.x)
+        {
+            if (rail.start.x < rail.stop.x)
+            {
+                this.upKeys.push("a");
+                this.downKeys.push("d");
+            }
+            else
+            {
+                this.upKeys.push("d");
+                this.downKeys.push("a");
+            }
+        }
+        if (rail.start.y != rail.stop.y)
+        {
+            if (rail.start.y < rail.stop.y)
+            {
+                this.upKeys.push("w");
+                this.downKeys.push("s");
+            }
+            else
+            {
+                this.upKeys.push("s");
+                this.downKeys.push("w");
+            }
+        }
+    }    
+
+    /**
+     * @param {[string]} keys_pressed 
+     */
+    updatePaddle(keys_pressed)
+    {
+        let new_location = this.position.location;
+
+        keys_pressed.forEach(key => {
+            if (this.downKeys.includes(key))
+                new_location += this.game.config.PADDLE_SPEED_PER_SECOND_MAX * this.game.time.deltaTimeSecond();
+            if (this.upKeys.includes(key))
+                new_location -= this.game.config.PADDLE_SPEED_PER_SECOND_MAX * this.game.time.deltaTimeSecond();
+        });
+
+        new_location = Math.max(0 + this.game.config.PADDLE_RATIO / 2, new_location);
+        new_location = Math.min(1 - this.game.config.PADDLE_RATIO / 2, new_location);
+
+        if (this.position.location === new_location)
+            return;
+
+        this.position.location = new_location;
+
+        this._sendPaddlePosition();
+    }
+
+    _sendPaddlePosition()
+    {
+        this.game.send({"detail": "update_my_paddle_pos", ...{"time": this.game.time._currentFrame, "position": this.position}});
+    }
+
+    /**
+     * @param {Position} newPosition 
+     */
+    updatePos(newPosition)
+    {
+        let position_verified = newPosition;
+
+        let time_diff = (this.time._current_frame - newPosition.time) / 1000;
+
+        let sign = this.position.location - newPosition.location >= 0 ? 1 : -1;
+
+        let distance = Math.abs(this.position.location - newPosition.location);
+
+        let distance_max = time_diff * this.game.config.paddle_speed_per_second_max;
+
+        if (distance > distance_max)
+            position_verified.location = distance_max * sign;
+
+        this.position = position_verified;
+    }
+}

django/frontend/static/js/api/game/pong/PongPlayer.js

@@ -0,0 +1,102 @@
+import { APlayer } from "../APlayer.js";
+import { Point } from "./Point.js";
+import { Segment } from "./Segment.js";
+import { Client } from "../../Client.js";
+import { PongGame } from "./PongGame.js";
+import { Position } from "./Position.js";
+
+export class PongPlayer extends APlayer
+{
+    /**
+     * @param {Number} id 
+     * @param {PongGame} game 
+     * @param {Segment} rail
+     * @param {[Number]} score 
+     * @param {Position} position 
+     * @param {Boolean} isConnected
+     * @param {String} username
+     * @param {String} avatar 
+     * @param {Client} client 
+     * @param {Boolean} isEliminated 
+     */
+    constructor(client, game, id, username, avatar, score = [], rail = new Segment(game), position = new Position(0.5), isConnected, isEliminated)
+    {
+        super(client, game, id, username, avatar, isConnected)
+
+        /**
+         * @type {Position}
+         */
+        this.position = position;
+
+        /**
+          * @type {[Number]}
+          */
+        this.score = score;
+ 
+        /**
+         * @type {Segment}
+         */
+        this.rail = rail;
+
+        /**
+         * @type {PongPlayer}
+         */
+        this.game = game;
+
+        /**
+         * @type {Boolean}
+         */
+        this.isEliminated = isEliminated;
+    }
+
+    /**
+     * 
+     * @param {Number} new_position 
+     */
+    updatePos(new_position)
+    {
+        this.position = new_position;
+    }
+
+    /**
+     * @param {CanvasRenderingContext2D} ctx
+     */  
+    draw(ctx)
+    {
+        if (this.isConnected === false || this.isEliminated === true)
+        {
+            ctx.moveTo(this.rail.start.x, this.rail.start.y);
+            ctx.lineTo(this.rail.stop.x, this.rail.stop.y);
+            return;
+        }
+
+        const diffX = this.rail.stop.x - this.rail.start.x,
+              diffY = this.rail.stop.y - this.rail.start.y;
+
+        const railLength = this.rail.len(),
+              paddleLength = railLength * this.game.config.PADDLE_RATIO;
+
+        const paddleCenter = new Point(this.rail.start.x + diffX * this.position.location,
+                                      this.rail.start.y + diffY * this.position.location);
+
+        const paddleStartX = paddleCenter.x - (diffX * (paddleLength / 2 / railLength)),
+              paddleStartY = paddleCenter.y - (diffY * (paddleLength / 2 / railLength)),
+              paddleStopX = paddleCenter.x + (diffX * (paddleLength / 2 / railLength)),
+              paddleStopY = paddleCenter.y + (diffY * (paddleLength / 2 / railLength));
+
+        let paddleStart = new Point(paddleStartX, paddleStartY),
+            paddleStop = new Point (paddleStopX, paddleStopY);
+
+        let paddle = new Segment(this.game, paddleStart, paddleStop);
+
+        paddle.draw(ctx);
+    }
+
+    /**
+     * @param {[String]} additionalFieldList 
+     */
+    export(additionalFieldList = [])
+    {
+        super.export([...additionalFieldList, "position", "rail", "score"])
+    }
+}

django/frontend/static/js/api/game/pong/Position.js

@@ -0,0 +1,31 @@
+import { AExchangeable } from "../../AExchangable.js";
+import { Point } from "./Point.js";
+
+export class Position extends AExchangeable
+{
+    /**
+     * @param {Point | Number} location 
+     * @param {Number} time 
+     */
+    constructor(location = new Point(), time)
+    {
+        super();
+        /**
+         * @type {Point | Number}
+         */
+        this.location = location;
+
+        /**
+         * @type {Number}
+         */
+        this.time = time;
+    }
+
+    /**
+     * @param {[]} additionalFieldList 
+     */
+    export(additionalFieldList)
+    {
+        super.export([...additionalFieldList + "location", "time"]);
+    }
+}

django/frontend/static/js/api/game/pong/Segment.js

@@ -0,0 +1,80 @@
+import { Point } from "./Point.js";
+import { AExchangeable } from "../../AExchangable.js";
+import { PongGame } from "./PongGame.js";
+import { renderCube } from "../../../3D/cube.js";
+
+class Segment extends AExchangeable
+{
+    /**
+     * @param {Point} start
+     * @param {Point} stop
+     * @param {PongGame} game 
+     */
+    constructor(game, start = new Point(), stop = new Point())
+    {
+        super();
+        
+        /**
+         * @type {Point}
+         */
+        this.start = start;
+
+        /**
+         * @type {Point}
+         */
+        this.stop = stop;
+
+        /**
+         * @type {PongGame}
+         */
+        this.game = game
+
+    }
+
+    angle()
+    {
+        let x = this.start.x - this.stop.x,
+            y = this.start.y - this.stop.y;
+
+        return Math.atan2(y, x);
+    }
+
+    len()
+    {
+        let x = this.start.x - this.stop.x,
+            y = this.start.y - this.stop.y;
+
+        return (x ** 2 + y ** 2) ** (1 / 2);
+    }
+
+    draw(ctx)
+	{
+		if(ctx instanceof CanvasRenderingContext2D)
+		{
+			ctx.moveTo(this.start.x, this.start.y);
+			ctx.lineTo(this.stop.x, this.stop.y);
+		}
+		else if(ctx instanceof WebGLRenderingContext)
+		{
+			const size = this.game.config.BALL_SIZE * 2;
+			const sizex = this.len() / 2;
+			const posx = (this.start.x - this.game.config.MAP_CENTER_X);
+			const posy = (this.start.y - this.game.config.MAP_CENTER_Y);
+			renderCube(ctx, posx, 0, posy, -this.angle(), sizex, size, size);
+		}
+		else
+		{
+			alert('Unknown rendering context type');
+		}
+	}
+
+    /**
+     * @param {[String]} additionalFieldList
+     */
+    export(additionalFieldList)
+    {
+        super.export([...additionalFieldList, "start", "stop"]);
+    }
+}
+
+export { Segment }

django/frontend/static/js/api/game/pong/Time.js

@@ -0,0 +1,42 @@
+
+
+class Time
+{
+    constructor()
+    {
+        /**
+         * @type {Number}
+         */
+        this._lastFrame = undefined;
+
+        /**
+         * @type {Number}
+         */
+        this._currentFrame = undefined;
+    }
+
+    deltaTime()
+    {
+        if (this._lastFrame === undefined)
+            return 0;
+        return (this._currentFrame - this._lastFrame);
+    }
+
+    deltaTimeSecond()
+    {
+        return this.deltaTime() / 1000;
+    }
+
+    get_fps()
+    {
+        return 1 / this.deltaTimeSecond();
+    }
+
+    new_frame()
+    {
+        this._lastFrame = this._currentFrame;
+        this._currentFrame = Date.now();
+    }
+}
+
+export { Time };

django/frontend/static/js/api/game/pong/Wall.js

@@ -0,0 +1,44 @@
+import { Point } from "./Point.js";
+import { PongGame } from "./PongGame.js";
+import { Segment } from "./Segment.js";
+import { renderCube} from "../../../3D/cube.js"
+
+export class Wall extends Segment
+{
+
+    /**
+     * @param {PongGame} game
+     * @param {Point} start 
+     * @param {Point} stop 
+     */
+    constructor(game, start, stop)
+    {
+        super(game, start, stop)
+
+        /**
+         * @type {PongGame}
+         */
+        this.game = game
+    }
+
+	draw(ctx)
+	{
+		if(ctx instanceof CanvasRenderingContext2D)
+		{
+			ctx.moveTo(this.start.x, this.start.y);
+			ctx.lineTo(this.stop.x, this.stop.y);
+		}
+		else if(ctx instanceof WebGLRenderingContext)
+		{
+			const size = this.game.config.BALL_SIZE * 2;
+			const sizeX = this.len() / 2;
+			const posX = (this.start.x - this.game.config.MAP_CENTER_X);
+			const posY = (this.start.y - this.game.config.MAP_CENTER_Y);
+			renderCube(ctx, posX, 0, posY, -this.angle(), sizeX, size, size);
+		}
+		else
+		{
+			alert('Unknown rendering context type');
+		}
+	}
+}

django/frontend/static/js/api/game/tictactoe/TicTacToeGame.js

@@ -0,0 +1,334 @@
+import { client, lang } from "../../../index.js";
+
+import { AGame } from "../AGame.js";
+
+class TicTacToe
+{
+    constructor(height, width, gap, rectsize, canvas, game_id)
+    {
+        this.height = height;
+        this.width = width;
+        this.gap = gap;
+        this.rectsize = rectsize;
+        this.map = [[],[],[],[],[],[],[],[],[]];
+        for (let i = 0; i < 9; i++)
+			for (let j = 0; j < 9; j++)
+				this.map[i].push(-1);
+		this.game_id = game_id;
+		this.game = new AGame(client, game_id, this.onReceive.bind(this), this.uninit.bind(this), "tictactoe")
+        this.canvas = canvas
+        this.context = this.canvas.getContext("2d");
+		this.sign;
+		this.currentMorpion = 4;
+		this.turn;
+    }
+
+	async init()
+	{
+		await this.game.join();
+		this.canvas.addEventListener("mousedown", (event, morpion = this) => this.onClick(event, morpion));
+	}
+
+	async uninit()
+	{
+		this.canvas.removeEventListener("mousedown", (event, morpion = this) => this.onClick(event, morpion));
+		this.game.leave()
+	}
+
+	async onReceive(messageData)
+	{
+		switch (messageData.detail)
+		{
+			case 'x':
+			case 'o':
+				this.sign = messageData.detail;
+				this.turn = messageData.detail == "x";
+				break;
+			
+			case 'game_start':
+				this.game.started = true;
+				this.game.finished = false;
+				if (this.turn)
+					this.setOutline(4, false);
+				this.printTimer();
+				break;
+
+			case 'game_move':
+				if (messageData.targetMorpion === undefined || messageData.targetCase === undefined)
+					return ;
+				this.map[messageData.targetMorpion][messageData.targetCase] = (this.sign == "x") ? 1 : 0;
+				this.printSign(messageData.targetMorpion, messageData.targetCase, (this.sign == "x") ? "o" : "x");
+				this.setOutline(this.currentMorpion, false);
+				this.printTimer();
+				break;
+			
+			case 'game_end':
+				this.game.finished = true;
+				this.canvas.removeEventListener("mousedown", (event, morpion = this) => this.onClick(event, morpion));
+				this.printWin(messageData.winning_sign);
+				break;
+			case 'catchup':
+				this.map = messageData.morpion;
+				for (let i = 0; i < 9; i++)
+				{
+					for (let j = 0; j < 9; j++)
+					{
+						if (this.map[i][j] != -1)
+							this.printSign(i, j, this.map[i][j])
+					}
+				}
+				this.turn = (messageData.turn == this.sign);
+				this.currentMorpion = messageData.currentMorpion;
+				if (this.turn)
+					this.setOutline(this.currentMorpion, false);
+		}
+	}
+
+	printWin(winning_sign)
+	{
+		this.context.beginPath();
+		this.context.fillStyle = "white";
+		this.context.fillRect(this.width / 2 - 200, this.height - this.gap + 10, 400, 80);
+		this.context.closePath();
+		this.context.beginPath();
+		this.context.font = `20px sans-serif`;
+		this.context.fillStyle = (winning_sign == "o") ? "red" : "green";
+		this.context.fillText((winning_sign == "o") ? lang.get("morpionWin") + "O" : lang.get("morpionWin") + "X", this.width / 2 - 85, this.height - this.gap / 2 + 10, 180);
+	}
+
+	printTimer()
+	{
+		let sec = 20;
+		let turn = this.turn
+		if (this.turn)
+		{
+			this.context.beginPath();
+			this.context.fillStyle = "white";
+			this.context.font = `20px Verdana`;
+			this.context.fillText(sec, this.width / 2, this.gap / 2);
+			this.context.closePath();
+			sec--;
+		}
+		let id = setInterval(() =>
+		{
+			this.context.beginPath();
+			this.context.fillStyle = "#1a1a1d";
+			this.context.fillRect(this.width / 2 - 40, 0, this.width / 2 + 40, this.gap - 10)
+			this.context.closePath();
+			if (sec == 0 || turn != this.turn || this.game.finished)
+			{
+				clearInterval(id);
+				if (sec == 0 && !this.turn && this.game.finished == false)
+					this.game.send(JSON.stringify({"timerIsDue" : this.sign}))
+				return;
+			}
+			if (this.turn)
+			{
+				this.context.beginPath();
+				this.context.fillStyle = "white";
+				this.context.font = `20px Verdana`;
+				this.context.fillText(sec, this.width / 2, this.gap / 2);
+				this.context.closePath();
+			}
+			sec--;
+		}, 1000
+	)
+	}
+	checkWin()
+	{
+		for (let i = 0; i < 9; i++)
+		{
+			for (let j = 0; j < 3; j++)
+			{
+				if (this.map[i][j] == this.map[i][j + 3] && this.map[i][j + 3] == this.map[i][j + 6])
+					return (this.map[i][j])
+			}
+			for (let j = 0; i < 9; i += 3)
+			{
+				if (this.map[i][j] == this.map[i][j + 1] && this.map[i][j + 1] == this.map[i][j + 2])
+					return (this.map[i][j])
+			}
+            if (this.map[i][0] == this.map[i][4] && this.map[i][4] == this.map[i][8])
+                return (this.map[i][0]);
+            if (this.map[i][6] == this.map[i][4] && this.map[i][4] == this.map[i][2])
+                return (this.map[i][6]);
+			return -1
+		}
+	}
+
+	onClick(event, morpion)
+	{
+		let x = event.offsetX;
+		let y = event.offsetY;
+		let targetMorpion, targetCase;
+
+		if (this.game.finished)
+		{
+			return;
+		}
+		targetMorpion = morpion.findPlace(x, this) + morpion.findPlace(y, this) * 3;
+		if (morpion.findPlace(x, this) < 0 || morpion.findPlace(y, this) < 0)
+			return -1;
+		targetCase = morpion.findSquare(x, this.rectsize * 3 * morpion.findPlace(x, this) + this.gap, this) + morpion.findSquare(y, this.rectsize * 3 * morpion. findPlace(y, this) + this.gap, this) * 3;
+
+		if (morpion.checkCase(targetMorpion, targetCase))
+		{
+			morpion.setOutline(this.currentMorpion, true);
+			morpion.sendCase(targetMorpion, targetCase);
+			morpion.printTimer()
+		}
+		else
+			morpion.incorrectCase();
+	}
+
+	checkCase(targetMorpion, targetCase)
+	{
+		return (this.map[targetMorpion][targetCase] == -1 && this.turn == true && targetMorpion == this.currentMorpion);
+	}
+
+	incorrectCase()
+	{
+
+	}
+
+	sendCase(targetMorpion, targetCase)
+	{
+		this.map[targetMorpion][targetCase] = (this.sign == "x") ? 0 : 1;
+		this.currentMorpion = targetCase;
+		this.printSign(targetMorpion, targetCase, this.sign);
+		this.game.send(JSON.stringify({"targetMorpion" : targetMorpion, "targetCase" : targetCase, "sign" : this.sign}));
+		this.turn = !this.turn;
+	}
+
+	printSign(targetMorpion, targetCase, sign)
+	{
+		let targetX = (this.gap + targetMorpion % 3 * this.rectsize * 3) + (targetCase % 3 * this.rectsize);
+		let targetY = (this.gap + Math.floor(targetMorpion / 3) * this.rectsize * 3) + (Math.floor(targetCase / 3) * this.rectsize);
+		if (sign == "x")
+		{
+			this.context.beginPath();
+			this.context.strokeStyle = "green";
+			this.context.moveTo(targetX + 10, targetY + 10);
+			this.context.lineTo(targetX + 40, targetY + 40);
+			this.context.moveTo(targetX + 40, targetY + 10);
+			this.context.lineTo(targetX + 10, targetY + 40);
+			this.context.stroke();
+			this.context.closePath();
+		}
+		else
+		{
+			this.context.beginPath();
+			this.context.strokeStyle = "red";
+			targetX += this.rectsize / 2;
+			targetY += this.rectsize / 2;
+			this.context.arc(targetX, targetY, 15, 0, 2 * Math.PI);
+			this.context.stroke();
+			this.context.closePath();
+		}
+		if (sign != this.sign)
+			this.turn = true;
+	}
+
+	findPlace(x, morpion)
+	{	
+		if (x <= this.gap || x >= this.gap + this.rectsize * 9)
+			return -1;
+		if (x <= this.gap + this.rectsize * 3)
+			return 0;
+		if (x >= this.gap + this.rectsize * 3 && x <= this.gap + this.rectsize * 6)
+			return 1;
+		if (x >= this.gap + this.rectsize * 6)
+			return 2;
+		return -1;
+	}
+
+	findSquare(x, gap, morpion)
+	{
+		if (x <= gap + this.rectsize)
+			return 0;
+		if (x >= gap + this.rectsize && x <= gap + this.rectsize * 2)
+			return 1;
+		if (x >= gap + this.rectsize * 2)
+			return 2;
+		return -1;
+	}
+
+	setOutline(targetMorpion, clear)
+	{
+		let targetX = (this.gap + targetMorpion % 3 * this.rectsize * 3);
+		let targetY = (this.gap + Math.floor(targetMorpion / 3) * this.rectsize * 3);
+		if (this.game.finished)
+			return;
+		if (!clear)
+		{
+			this.context.beginPath();
+			this.context.strokeStyle = (this.sign == "x") ? "green" : "red";
+			this.context.rect(targetX, targetY, this.rectsize * 3, this.rectsize * 3)
+			this.context.stroke();
+			this.context.closePath();
+		}
+		else
+		{
+			this.context.beginPath();
+			this.context.strokeStyle = `rgb(230 230 230)`;
+			this.context.rect(targetX, targetY, this.rectsize * 3, this.rectsize * 3)
+			this.context.stroke();
+			this.context.closePath();
+		}
+	}
+
+    DrawSuperMorpion()
+    {
+        this.context.fillStyle = "#1a1a1d";
+		this.context.roundRect(0, 0, this.canvas.width, this.canvas.height, 20);
+        this.context.fill();
+		for (let i = 1, x = this.gap, y  = this.gap; i <= 9; i++)
+		{
+			this.DrawMorpion(x, y);
+			x += this.rectsize * 3;
+			if (i % 3 == 0)
+			{
+				y += this.rectsize * 3;
+				x = this.gap;
+			}
+		}
+		this.context.lineWidth = 6;
+		for (let i = 0; i < 4; i++)
+		{
+			this.context.beginPath();
+			this.context.strokeStyle = `rgb(230 230 230)`;
+			this.context.moveTo(this.gap + i * this.rectsize * 3, this.gap - 3);
+			this.context.lineTo(this.gap + i * this.rectsize * 3, this.canvas.height - this.gap + 3);
+			this.context.stroke();
+			this.context.closePath();
+		};
+		for (let i = 0; i < 4; i++)
+		{
+			this.context.beginPath();
+			this.context.strokeStyle = `rgb(230 230 230)`;
+			this.context.moveTo(this.gap, this.gap + i * this.rectsize * 3);
+			this.context.lineTo(this.canvas.height - this.gap, this.gap + i * this.rectsize * 3);
+			this.context.stroke();
+			this.context.closePath();
+		}
+    }
+
+    DrawMorpion(start_x, start_y)
+    {
+        this.context.beginPath();
+		this.context.strokeStyle = `rgb(200 200 200)`;
+		for (let i = 1, x = 0, y = 0; i <= 9; i++)
+		{
+			this.context.strokeRect(start_x + x, start_y + y, this.rectsize, this.rectsize);
+			x += this.rectsize;
+			if (i % 3 == 0)
+			{
+				y += this.rectsize;
+				x = 0;
+			}
+		}
+		this.context.closePath();
+    }
+}
+
+export { TicTacToe };