game: add: game map

frontend/static/js/views/GameView.js

@@ -1,5 +1,5 @@
 import { client } from "../index.js";
-import { Game } from "../api/Game.js";
+import { Game } from "../api/game/Game.js";
 import AbstractView from "./abstracts/AbstractView.js";
 
 export default class extends AbstractView
@@ -10,24 +10,137 @@ export default class extends AbstractView
 		this.game = new Game(client, params.id);
     }
 
+    draw_wall(ctx, stop_x, stop_y)
+    {
+        ctx.lineTo(stop_x, stop_y);
+    }
+
+    draw_paddle(ctx, rail_start_x, rail_start_y, rail_stop_x, rail_stop_y, pos)
+    {
+        let rail_size = Math.abs(rail_stop_x - rail_start_x) + Math.abs(rail_stop_y - rail_start_y) 
+        
+        let paddle_size = rail_size * this.game.config.paddle_ratio;
+
+        console.log(paddle_size)
+
+        let diff_x = rail_stop_x - rail_start_x,
+            diff_y = rail_stop_y - rail_start_y;
+        
+        console.log("diff", diff_x, diff_y)
+
+        let pos_x = rail_start_x + diff_x * pos,
+            pos_y = rail_start_y + diff_y * pos;
+        
+        console.log("pos", pos_x, pos_y)
+
+        let start_x = pos_x - paddle_size * (diff_x * (paddle_size / rail_size)),
+            start_y = pos_y - paddle_size * (diff_y * (paddle_size / rail_size)),
+            stop_x = pos_x + paddle_size * (diff_x * (paddle_size / rail_size)),
+            stop_y = pos_y + paddle_size * (diff_y * (paddle_size / rail_size));
+
+        console.log(start_x, start_y, stop_x, stop_y);
+        ctx.moveTo(start_x, start_y);
+        ctx.lineTo(stop_x, stop_y);
+
+        ctx.moveTo(rail_stop_x, rail_stop_y);
+    }
+
+    draw_ball(ctx, x, y)
+    {
+        ctx.rect(x, y, this.game.config.ball_size, this.game.config.ball_size);
+    }
+
+    draw_sides(ctx, nb_sides)
+    {
+        let start_x,
+            start_y,
+            stop_x,
+            stop_y;
+        
+        for (let i = 0; i <= nb_sides; i++)
+        {
+            let angle = (i * 2 * Math.PI / nb_sides) + (Math.PI / 4);
+
+            stop_x = this.game.config.center_x + 400 * Math.cos(angle);
+            stop_y = this.game.config.center_y + 400 * Math.sin(angle);
+
+            if (i == 0)
+                ctx.moveTo(stop_x, start_y);
+
+            if (i % 2 == 0)
+                this.draw_wall(ctx, stop_x, stop_y);
+            else
+                this.draw_paddle(ctx, start_x, start_y, stop_x, stop_y, 0.5);
+
+            start_x = stop_x;
+            start_y = stop_y;
+        }
+    }
+
+    draw_game()
+    {
+        let ctx = document.getElementById('canva').getContext('2d');
+
+        ctx.beginPath()
+
+        this.draw_sides(ctx, (this.game.players_id.length +10) * 2);
+        this.draw_ball(ctx, this.game.ball_pos_x, this.game.ball_pos_y);
+
+        ctx.strokeStyle = "#000000";
+        ctx.lineWidth = 4;
+        ctx.stroke();
+    }
+
+    render_game()
+    {
+        while (true)
+        {
+            this.draw_game();
+            break;
+        }
+    }
+
+    start_game()
+    {
+        let canva = document.createElement("canvas");
+
+        canva.height = this.game.config.size_x;
+        canva.width = this.game.config.size_y;
+        canva.id = "canva"; 
+
+        document.getElementById("app").appendChild(canva);
+
+        this.render_game();
+    }
+
+    async update_game_state()
+    {
+        await this.game.init();
+
+        document.getElementById("game-state").innerText = this.game.state;
+
+        //TODO invert line
+        //if (this.game.started === true && this.game.finished === false)
+        if (true)
+            this.start_game();
+    }
+
 	async postInit()
 	{
 		let error_code = await this.game.init();
 
         if (error_code)
             return error_code;
+
+        await this.update_game_state();
 	}
 
     async getHtml()
 	{
-        return `
-            <h1>Welcome back, Dom</h1>
-            <p>
-                Fugiat voluptate et nisi Lorem cillum anim sit do eiusmod occaecat irure do. Reprehenderit anim fugiat sint exercitation consequat. Sit anim laborum sit amet Lorem adipisicing ullamco duis. Anim in do magna ea pariatur et.
-            </p>
-            <p>
-                <a href="/posts" data-link>View recent posts</a>.
-            </p>
+        return /* HTML */ `
+            <link rel="stylesheet" href="/static/css/game.css">
+            <h2 id="game-state"></h2>
+            <div id="player_list"></div>
         `;
     }
 }