la putain de sa mere

frontend/static/js/index.js

@@ -8,6 +8,8 @@ import HomeView from "./views/HomeView.js";
 import RegisterView from "./views/accounts/RegisterView.js";
 import LogoutView from "./views/accounts/LogoutView.js";
 
+import GameView from "./views/Game.js"
+
 import { Client } from "./api/client.js";
 import AbstractRedirectView from "./views/AbstractRedirectView.js";
 import MeView from "./views/MeView.js";
@@ -44,6 +46,7 @@ const router = async (uri = "") => {
         { path: "/chat", view: Chat },
         { path: "/home", view: HomeView },
         { path: "/me", view: MeView },
+        { path: "/game", view: GameView },
     ];
 
     // Test each route for potential match

frontend/static/js/views/Game.js

@@ -0,0 +1,63 @@
+import AbstractView from './AbstractView.js'
+
+export default class extends AbstractView {
+	constructor(params) {
+		super(params, 'Game');
+	}
+
+	async getHtml() {
+		return `
+			<h1>Game</h1>
+			<button id='startGameButton'>Start Game</button>
+		`;
+	}
+
+	async postInit() {
+		document.getElementById('startGameButton').onclick = this.startGame;
+	}
+
+	startGame() {
+		this.game = new Game;
+	}
+}
+
+class Game {
+	constructor() {
+		this.canvas = document.createElement('canvas');
+		this.canvas.width = 480;
+		this.canvas.height = 270;
+		this.canvas.style.border = '1px solid #d3d3d3';
+		this.canvas.style.backgroundColor = '#f1f1f1';
+		this.context = this.canvas.getContext('2d');
+		this.paddle = new Paddle(this.context);
+		document.getElementById('app').appendChild(this.canvas);
+
+		this.interval = setInterval(this.updateGame, 20);
+	}
+
+	clear() {
+		this.context.clearRect(0, 0, this.canvas.width, this.canvas.height);
+	}
+
+	updateGame() {
+		this.clear();
+		this.paddle.y += 1;
+		this.paddle.update();
+	}
+}
+
+class Paddle {
+	constructor(context) {
+		this.width = 10;
+		this.height = 70;
+		this.x = 5;
+		this.y = 100;
+		this.ctx = context;
+		this.update();
+	}
+
+	update() {
+		this.ctx.fillStyle = 'black';
+		this.ctx.fillRect(this.x, this.y, this.width, this.height);
+	}
+}