diff --git a/frontend/static/js/index.js b/frontend/static/js/index.js index e923833..56d5aca 100644 --- a/frontend/static/js/index.js +++ b/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 @@ -96,4 +99,4 @@ document.addEventListener("DOMContentLoaded", () => { router(location.pathname); }); -export { client, navigateTo } \ No newline at end of file +export { client, navigateTo } diff --git a/frontend/static/js/views/Game.js b/frontend/static/js/views/Game.js new file mode 100644 index 0000000..312c405 --- /dev/null +++ b/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 ` +

Game

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