diff --git a/html/static/styles.css b/html/static/styles.css index 0d36c50..9c73f35 100644 --- a/html/static/styles.css +++ b/html/static/styles.css @@ -2,11 +2,21 @@ #game { width: calc((88px + 1px) * 11 + 1px); height: 500px; - background-color: red; + background-color: grey; position: relative; } .banner { margin: 1px; position: absolute; +} + +.paddle { + position: absolute; + bottom: 20px; + height: 10px; + transform: translate(-50%, 0); + background-color: #333; + border-top-left-radius: 50%; + border-top-right-radius: 50%; } \ No newline at end of file diff --git a/src/game/Game.ts b/src/game/Game.ts index c45730d..e04ac5b 100644 --- a/src/game/Game.ts +++ b/src/game/Game.ts @@ -1,13 +1,16 @@ import {Banner, makeBanners} from "./Banner"; import {Position} from "./Position"; +import {Paddle} from "./Paddle"; export class Game { private readonly root: HTMLElement; private banners: Banner[]; + private paddle: Paddle; constructor(root: HTMLElement) { this.root = root; this.banners = makeBanners(11 * 6, i => new Position((i % 11) * (88 + 1), (0 | (i / 11)) * (31 + 1))); + this.paddle = new Paddle(); } public load(): Promise { @@ -18,5 +21,6 @@ export class Game { this.banners.forEach(banner => { this.root.appendChild(banner.element); }); + this.root.appendChild(this.paddle.element); } } \ No newline at end of file diff --git a/src/game/Paddle.ts b/src/game/Paddle.ts new file mode 100644 index 0000000..89ef985 --- /dev/null +++ b/src/game/Paddle.ts @@ -0,0 +1,16 @@ + +export class Paddle { + private position: number; + private size: number; + public readonly element: HTMLElement; + + constructor() { + this.position = ((88 + 1) * 11 + 1) / 2; + this.size = 60; + + this.element = document.createElement("div"); + this.element.classList.add("paddle"); + this.element.style.left = this.position + "px"; + this.element.style.width = this.size + "px"; + } +} \ No newline at end of file