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