Add an ad banner

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;"
+                    }
+                ]
+            ]
+        ]
+    ];
+}

src/styles/style.css

@@ -87,3 +87,7 @@ div {
 .game .menu-bar button {
     margin: 0 5px 5px 0;
 }
+
+.ad {
+    margin-top: 3rem;
+}