dockered

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 };