From c052ab04e0f0043579346d66c3542794af5b5e72 Mon Sep 17 00:00:00 2001
From: evanpelle <evanpelle@gmail.com>
Date: Tue, 17 Jun 2025 19:18:30 -0700
Subject: [PATCH] Fix gutter ads, move in-game add to bottom right corner.
 (#1214)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

## Description:

Move the in-game add to underneath the control panel, ensure both are
320px.

Remove black squares on home page when user has ad blocker

## Please complete the following:

- [x] I have added screenshots for all UI updates
- [x] I process any text displayed to the user through translateText()
and I've added it to the en.json file
- [x] I have added relevant tests to the test directory
- [x] I confirm I have thoroughly tested these changes and take full
responsibility for any bugs introduced
- [x] I understand that submitting code with bugs that could have been
caught through manual testing blocks releases and new features for all
contributors

## Please put your Discord username so you can be contacted if a bug or
regression is found:
openfront

<img width="420" alt="Screenshot 2025-06-17 at 7 13 51 PM"
src="https://github.com/user-attachments/assets/2177e0b3-de1b-4196-afd7-2ceca412e9fe"
/>
---
 src/client/GutterAdModal.ts                | 22 ++++++----------------
 src/client/graphics/layers/ControlPanel.ts |  2 +-
 src/client/graphics/layers/LeftInGameAd.ts |  2 +-
 src/client/index.html                      | 10 ++++++----
 4 files changed, 14 insertions(+), 22 deletions(-)

diff --git a/src/client/GutterAdModal.ts b/src/client/GutterAdModal.ts
index bbeedaf5f..2fcaf0c9b 100644
--- a/src/client/GutterAdModal.ts
+++ b/src/client/GutterAdModal.ts
@@ -57,6 +57,7 @@ export class GutterAdModal extends LitElement {
 
     if (!window.ramp) {
       console.warn("Playwire RAMP not available");
+      this.hide();
       return;
     }
 
@@ -82,6 +83,7 @@ export class GutterAdModal extends LitElement {
       });
     } catch (error) {
       console.error("Failed to load Playwire ads:", error);
+      this.hide();
     }
   }
 
@@ -109,36 +111,24 @@ export class GutterAdModal extends LitElement {
     return html`
       <!-- Left Gutter Ad -->
       <div
-        class="hidden xl:flex fixed left-0 top-1/2 transform -translate-y-1/2 w-[160px] min-h-[600px] bg-gray-900 border border-gray-600 z-[9999] pointer-events-auto items-center justify-center shadow-lg"
+        class="hidden xl:flex fixed left-0 top-1/2 transform -translate-y-1/2 w-[160px] min-h-[600px] z-[10] pointer-events-auto items-center justify-center"
         style="margin-left: ${this.margin};"
       >
         <div
           id="${this.leftContainerId}"
           class="w-full h-full flex items-center justify-center p-2"
-        >
-          ${!this.adLoaded
-            ? html`<span class="text-white text-xs text-center"
-                >Loading ad...</span
-              >`
-            : ""}
-        </div>
+        ></div>
       </div>
 
       <!-- Right Gutter Ad -->
       <div
-        class="hidden xl:flex fixed right-0 top-1/2 transform -translate-y-1/2 w-[160px] min-h-[600px] bg-gray-900 border border-gray-600 z-[9999] pointer-events-auto items-center justify-center shadow-lg"
+        class="hidden xl:flex fixed right-0 top-1/2 transform -translate-y-1/2 w-[160px] min-h-[600px] z-[10] pointer-events-auto items-center justify-center"
         style="margin-right: ${this.margin};"
       >
         <div
           id="${this.rightContainerId}"
           class="w-full h-full flex items-center justify-center p-2"
-        >
-          ${!this.adLoaded
-            ? html`<span class="text-white text-xs text-center"
-                >Loading ad...</span
-              >`
-            : ""}
-        </div>
+        ></div>
       </div>
     `;
   }
diff --git a/src/client/graphics/layers/ControlPanel.ts b/src/client/graphics/layers/ControlPanel.ts
index 512df847c..cff9ac873 100644
--- a/src/client/graphics/layers/ControlPanel.ts
+++ b/src/client/graphics/layers/ControlPanel.ts
@@ -204,7 +204,7 @@ export class ControlPanel extends LitElement implements Layer {
       </style>
       <div
         class="${this._isVisible
-          ? "w-full text-sm lg:text-m lg:w-72 bg-slate-800/40 backdrop-blur-sm shadow-xs p-2 pr-3 lg:p-4 shadow-lg lg:rounded-lg"
+          ? "w-[320px] text-sm lg:text-m bg-gray-800/70 p-2 pr-3 lg:p-4 shadow-lg lg:rounded-lg backdrop-blur"
           : "hidden"}"
         @contextmenu=${(e) => e.preventDefault()}
       >
diff --git a/src/client/graphics/layers/LeftInGameAd.ts b/src/client/graphics/layers/LeftInGameAd.ts
index 07db7657a..2e370d8cc 100644
--- a/src/client/graphics/layers/LeftInGameAd.ts
+++ b/src/client/graphics/layers/LeftInGameAd.ts
@@ -117,7 +117,7 @@ export class LeftInGameAd extends LitElement implements Layer {
 
     return html`
       <div
-        class="w-full min-h-[100px] bg-gray-900 border border-gray-600 z-[9999] pointer-events-auto flex items-center justify-center"
+        class="w-[320px] min-h-[100px] bg-gray-900 border border-gray-600 flex items-center justify-center"
       >
         <div
           id="${AD_CONTAINER_ID}"
diff --git a/src/client/index.html b/src/client/index.html
index f8f63617d..50dcb70d8 100644
--- a/src/client/index.html
+++ b/src/client/index.html
@@ -272,15 +272,18 @@
       style="position: fixed; pointer-events: none"
     >
       <div
-        class="w-full sm:w-2/3 sm:fixed sm:right-0 sm:bottom-0 sm:flex justify-end"
+        class="w-full sm:w-2/3 sm:fixed sm:right-0 sm:bottom-0 sm:flex flex-col items-end"
         style="pointer-events: none"
       >
         <chat-display></chat-display>
         <events-display></events-display>
       </div>
-      <div class="w-full sm:w-1/3 md:max-w-72" style="pointer-events: auto">
-        <left-in-game-ad></left-in-game-ad>
+      <div
+        class="w-[320px] flex flex-col items-center"
+        style="pointer-events: auto"
+      >
         <control-panel></control-panel>
+        <left-in-game-ad></left-in-game-ad>
       </div>
     </div>
 
@@ -364,7 +367,6 @@
     <multi-tab-modal></multi-tab-modal>
     <unit-info-modal></unit-info-modal>
     <news-modal></news-modal>
-    <left-in-game-ad></left-in-game-ad>
     <game-left-sidebar></game-left-sidebar>
     <div
       id="language-modal"