From de0b81efac6371c78ba8df1fdecea62da3948e94 Mon Sep 17 00:00:00 2001 From: Manuel Thalmann Date: Fri, 23 Dec 2022 18:13:25 +0100 Subject: [PATCH] Add an ad banner --- src/assets/ad.gif | Bin 0 -> 5883 bytes src/assets/adInfo.png | Bin 0 -> 565 bytes src/js/Components.js | 43 ++++++++++++++++++++++++++++++++++++++++-- src/styles/style.css | 4 ++++ 4 files changed, 45 insertions(+), 2 deletions(-) create mode 100644 src/assets/ad.gif create mode 100644 src/assets/adInfo.png diff --git a/src/assets/ad.gif b/src/assets/ad.gif new file mode 100644 index 0000000000000000000000000000000000000000..be89358eba823febe51e16ab7b9c44c4bcd404df GIT binary patch literal 5883 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℞{N`Fjgu^MXbxe{-^SR2`bgGdX($4lfMU`m- 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 literal 0 HcmV?d00001 diff --git a/src/assets/adInfo.png b/src/assets/adInfo.png new file mode 100644 index 0000000000000000000000000000000000000000..866679b149881c5d5887a12bd48e3816c66707db GIT binary patch literal 565 zcmV-50?Pe~P)o zzUvv!zWq`%66QIaq$G0OQJnt`v4%0CdsB7u#i{=p{{7`*Vfpmu-+y)^L9U}o%A!Y{ zh%gkxn~aPM|8@DfkIyz!?6nr<-Fxo+7t8F^4=NK*-1R#B?u!6P-u(CfKLa~6(@%3@ zp7*yu|G56||38M8KYoiIe*M||?7OeFmLfd+%Cw}8s_<}pBO(I+GyMJkpBcnD`}V6m zGb7`lE%q9VJM?8c&p#p{cBq{2 z;u4V|f#=yYJ%=jC`=3-|0{_5u+Mc+d=)9-!xVJO7H@-$FJXl1pw^a){h zmfzS60|~OiV-pD9{rn?v_C zEAt;xasY@n0Ad|V^CrwN5Rd_4O&}J=7BR#CfB*vkPBp!DY5AgH00000NkvXXu0mjf DZV?j= literal 0 HcmV?d00001 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; +}