diff --git a/html/index.html b/html/index.html index c186a43..327972a 100644 --- a/html/index.html +++ b/html/index.html @@ -7,6 +7,6 @@ - +
\ No newline at end of file diff --git a/html/static/styles.css b/html/static/styles.css index e69de29..29f71c5 100644 --- a/html/static/styles.css +++ b/html/static/styles.css @@ -0,0 +1,10 @@ + +#game { + width: 500px; + height: 500px; + background-color: red; +} + +.banner { + margin: 1px; +} \ No newline at end of file diff --git a/src/game/Banner.ts b/src/game/Banner.ts index cddf762..bdce7d8 100644 --- a/src/game/Banner.ts +++ b/src/game/Banner.ts @@ -6,10 +6,14 @@ import {Position} from "./Position"; export class Banner { private readonly position: Position; private readonly banner: string; + public readonly element: HTMLElement; constructor(position: Position, banner: string) { this.position = position; this.banner = banner; + + this.element = document.createElement("img"); + this.element.classList.add("banner"); } public load(): Promise { @@ -18,6 +22,7 @@ export class Banner { image.onload = () => resolve(); image.onerror = reject; image.src = "static/banners/" + this.banner; + this.element.setAttribute("src", image.src); }) } } diff --git a/src/game/Game.ts b/src/game/Game.ts new file mode 100644 index 0000000..5358880 --- /dev/null +++ b/src/game/Game.ts @@ -0,0 +1,22 @@ +import {Banner, makeBanners} from "./Banner"; +import {Position} from "./Position"; + +export class Game { + private readonly root: HTMLElement; + private banners: Banner[]; + + constructor(root: HTMLElement) { + this.root = root; + this.banners = makeBanners(5, i => new Position(i * 88, i)); + } + + public load(): Promise { + return Promise.all(this.banners.map(banner => banner.load())).then(() => {}); + } + + public draw(): void { + this.banners.forEach(banner => { + this.root.appendChild(banner.element); + }); + } +} \ No newline at end of file diff --git a/src/game/Pattern.ts b/src/game/Pattern.ts new file mode 100644 index 0000000..e69de29 diff --git a/src/index.ts b/src/index.ts index 564dfe2..ba7c169 100644 --- a/src/index.ts +++ b/src/index.ts @@ -1,7 +1,7 @@ -import {makeBanners} from "./game/Banner"; -import {Position} from "./game/Position"; +import {Game} from "./game/Game"; -const banners = makeBanners(5, i => new Position(i, i)); -console.log(banners); - -console.log(Promise.all(banners.map(b => b.load()))); \ No newline at end of file +window.addEventListener("load", async () => { + const game = new Game(document.getElementById("game")); + await game.load(); + game.draw(); +}); \ No newline at end of file