dockered

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');
+		}
+	}
+}