3D working

frontend/static/js/api/game/Ball.js

@@ -52,9 +52,10 @@ class Ball
 		}
 		else if(ctx instanceof WebGLRenderingContext)
 		{
-			const posx = (this.position.x - this.size / 2) / 2;
-			const posy = (this.position.y - this.size / 2) / 2;
-			renderCube(ctx, posx, 0, posy, 0, this.size * 5, this.size * 5, this.size * 5);
+			const size = this.size * 3;
+			const posx = (this.position.x - this.size / 2) - this.game.config.size_x / 2;
+			const posy = (this.position.y - this.size / 2) - this.game.config.size_y / 2;
+			renderCube(ctx, posx, 0, posy, 0, size, size, size);
 		}
 		else
 		{
@@ -76,7 +77,7 @@ class Ball
         this.draw(ctx);
     }
 
-    from_json (data)
+    from_json(data)
     {
         this.position = this.position.from_json(data.position);
         this.size = data.size;

frontend/static/js/api/game/Game.js

@@ -75,7 +75,7 @@ class Game
          * @type {GameConfig}
          */
         this.config = new GameConfig(this.client);
-        
+
 
         let ret = await this.config.init();
         if (ret !== 0)
@@ -186,7 +186,7 @@ class Game
         this.walls = [];
         const walls_data = data.walls;
         walls_data.forEach((wall_data) => {
-            this.walls.push(new Wall().from_json(wall_data));
+            this.walls.push(new Wall(this).from_json(wall_data));
         });
 
         /**

frontend/static/js/api/game/GameConfig.js

@@ -14,8 +14,8 @@ class GameConfig
     async init()
     {
         let response = await this.client._get("/api/games/");
-        
-        if (response.status !== 200)
+
+		if (response.status !== 200)
             return response.status;
 
         let response_data = await response.json();
@@ -24,7 +24,7 @@ class GameConfig
          * @type {Number}
          */
         this.size_x = response_data.MAP_SIZE_X;
-        
+
         /**
          * @type {Number}
          */
@@ -86,4 +86,4 @@ class GameConfig
     }
 }
 
-export { GameConfig };
+export { GameConfig };

frontend/static/js/api/game/Player.js

@@ -1,7 +1,6 @@
 import { Game } from "./Game.js";
 import { Point } from "./Point.js";
 import { Segment } from "./Segment.js";
-import { renderCube } from "../../3D/cube.js"
 
 class Player
 {
@@ -44,7 +43,7 @@ class Player
         /**
          * @type {Segment}
          */
-        this.rail = rail === undefined ? new Segment() : rail;
+        this.rail = rail === undefined ? new Segment(game) : rail;
 
         /**
          * @type {String}
@@ -89,12 +88,12 @@ class Player
             paddle_start_y = paddle_center.y - (diff_y * (paddle_length / 2 / rail_length)),
             paddle_stop_x = paddle_center.x + (diff_x * (paddle_length / 2 / rail_length)),
             paddle_stop_y = paddle_center.y + (diff_y * (paddle_length / 2 / rail_length));
-        
+
         let paddle_start = new Point(paddle_start_x, paddle_start_y),
             paddle_stop = new Point (paddle_stop_x, paddle_stop_y);
-        
-        let paddle = new Segment(paddle_start, paddle_stop);
-        
+
+        let paddle = new Segment(this.game, paddle_start, paddle_stop);
+
         paddle.draw(ctx);
     }
 

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

@@ -1,5 +1,3 @@
-
-
 class Point
 {
     /**
@@ -27,4 +25,4 @@ class Point
     }
 }
 
-export { Point };
+export { Point };

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

@@ -7,13 +7,15 @@ class Segment
      * @param {Point} start
      * @param {Point} stop
      */
-    constructor(start, stop)
+    constructor(game, start, stop)
     {
         /**
          * @type {Point}
          */
         this.start = start === undefined ? new Point() : start;
 
+		this.game = game;
+
         /**
          * @type {Point}
          */
@@ -37,11 +39,8 @@ class Segment
         return (x ** 2 + y ** 2) ** (1 / 2);
     }
 
-    /**
-     * @param {CanvasRenderingContext2D} ctx 
-     */
-    draw(ctx)
-    {
+	draw(ctx)
+	{
 		if(ctx instanceof CanvasRenderingContext2D)
 		{
 			ctx.moveTo(this.start.x, this.start.y);
@@ -49,19 +48,23 @@ class Segment
 		}
 		else if(ctx instanceof WebGLRenderingContext)
 		{
-			renderCube(ctx, this.start.x, -3, this.start.y, 0, 0.5, 0.5, 0.5);
+			const size = this.game.config.ball_size * 2;
+			const sizex = this.len() / 2;
+			const posx = (this.start.x - this.game.config.center_x);
+			const posy = (this.start.y - this.game.config.center_y);
+			renderCube(ctx, posx, 0, posy, -this.angle(), sizex, size, size);
 		}
 		else
 		{
 			alert('Unknown rendering context type');
 		}
-    }
+	}
 
     from_json(data)
     {
         this.start = this.start.from_json(data.start);
         this.stop = this.stop.from_json(data.stop);
-        
+
         return this;
     }
 }

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

@@ -5,18 +5,18 @@ class Wall
     /**
      * @param {Segment} start
      */
-    constructor (rail)
+    constructor (game, rail)
     {
         /**
          * @type {Segment}
          */
-        this.rail = rail === undefined ? new Segment() : rail;
+        this.rail = rail === undefined ? new Segment(game) : rail;
     }
 
-    draw(ctx)
+	draw(ctx)
 	{
 		this.rail.draw(ctx);
-    }
+	}
 
     from_json(data)
     {