diff --git a/src/assets/ad.gif b/src/assets/ad.gif new file mode 100644 index 0000000..be89358 Binary files /dev/null and b/src/assets/ad.gif differ diff --git a/src/assets/adInfo.png b/src/assets/adInfo.png new file mode 100644 index 0000000..866679b Binary files /dev/null and b/src/assets/adInfo.png differ diff --git a/src/js/Components.js b/src/js/Components.js index ae5ece6..59b6643 100644 --- a/src/js/Components.js +++ b/src/js/Components.js @@ -81,7 +81,7 @@ export function App() } }, { - className: `game ${game.winner ? `winner ${game.winner}` : ""}` + className: `game ${game.winner ? `winner ${game.winner}` : game.currentPlayer}` }, [ Board, @@ -94,7 +94,8 @@ export function App() `Player ${Constants.PLAYER_NAMES[game.winner]} wins!` : `It's player "${Constants.PLAYER_NAMES[game.currentPlayer]}"s turn` ], - [MenuBar, { game }] + [MenuBar, { game }], + [Ad] ]; } @@ -198,3 +199,41 @@ export function Button({ content }) ...content ]; } + +/** + * Renders a very serious ad. + * + * @returns {NodeDescriptor} + * The rendered ad. + */ +export function Ad() +{ + return [ + "div", + { + className: "ad", + style: "text-align: center;" + }, + [ + "div", + { + style: "display: inline-block; position: relative;" + }, + [ + "a", + { + href: "https://www.youtube.com/watch?v=Wgt7JQdymsQ", + target: "_blank" + }, + ["img", { src: "./assets/ad.gif" }], + [ + "img", + { + src: "./assets/adInfo.png", + style: "position: absolute; top: 0; right: 0;" + } + ] + ] + ] + ]; +} diff --git a/src/styles/style.css b/src/styles/style.css index cecc996..cc74023 100644 --- a/src/styles/style.css +++ b/src/styles/style.css @@ -87,3 +87,7 @@ div { .game .menu-bar button { margin: 0 5px 5px 0; } + +.ad { + margin-top: 3rem; +}