Add nag overlay + AdSense

ads.txt

@@ -0,0 +1 @@
+google.com, pub-2501747033825166, DIRECT, f08c47fec0942fa0

html/compilation-mappings.txt

@@ -1,7 +1,7 @@
-B0FBAF4CEF8D558F559CFB4F84356A1C.cache.js
+6755203EE2F338F6DD60AFCA6650756A.cache.js
 user.agent gecko1_8
 
-B0FBAF4CEF8D558F559CFB4F84356A1C.cache.js
+6755203EE2F338F6DD60AFCA6650756A.cache.js
 user.agent safari
 
 Devmode:devmode.js

html/html.nocache.js

@@ -1,4 +1,4 @@
-function html(){var N='bootstrap',O='begin',P='gwt.codesvr.html=',Q='gwt.codesvr=',R='html',S='startup',T='DUMMY',U=0,V=1,W='iframe',X='position:absolute; width:0; height:0; border:none; left: -1000px;',Y=' top: -1000px;',Z='Chrome',$='CSS1Compat',_='<!doctype html>',ab='',bb='<html><head><\/head><body><\/body><\/html>',cb='undefined',db='readystatechange',eb=10,fb='script',gb='moduleStartup',hb='moduleRequested',ib='Failed to load ',jb='head',kb='javascript',lb='meta',mb='name',nb='html::',ob='::',pb='gwt:property',qb='content',rb='=',sb='gwt:onPropertyErrorFn',tb='Bad handler "',ub='" for "gwt:onPropertyErrorFn"',vb='gwt:onLoadErrorFn',wb='" for "gwt:onLoadErrorFn"',xb='#',yb='?',zb='/',Ab='img',Bb='clear.cache.gif',Cb='baseUrl',Db='html.nocache.js',Eb='base',Fb='//',Gb='user.agent',Hb='webkit',Ib='safari',Jb='gecko',Kb=11,Lb='gecko1_8',Mb='selectingPermutation',Nb='html.devmode.js',Ob='B0FBAF4CEF8D558F559CFB4F84356A1C',Pb=':1',Qb=':',Rb='.cache.js',Sb='link',Tb='rel',Ub='stylesheet',Vb='href',Wb='loadExternalRefs',Xb='gwt/chrome/chrome.css',Yb='end',Zb='http:',$b='file:',_b='_gwt_dummy_',ac='__gwtDevModeHook:html',bc='Ignoring non-whitelisted Dev Mode URL: ',cc=':moduleBase';var n=window;var o=document;q(N,O);function p(){var a=n.location.search;return a.indexOf(P)!=-1||a.indexOf(Q)!=-1}
+function html(){var N='bootstrap',O='begin',P='gwt.codesvr.html=',Q='gwt.codesvr=',R='html',S='startup',T='DUMMY',U=0,V=1,W='iframe',X='position:absolute; width:0; height:0; border:none; left: -1000px;',Y=' top: -1000px;',Z='Chrome',$='CSS1Compat',_='<!doctype html>',ab='',bb='<html><head><\/head><body><\/body><\/html>',cb='undefined',db='readystatechange',eb=10,fb='script',gb='moduleStartup',hb='moduleRequested',ib='Failed to load ',jb='head',kb='javascript',lb='meta',mb='name',nb='html::',ob='::',pb='gwt:property',qb='content',rb='=',sb='gwt:onPropertyErrorFn',tb='Bad handler "',ub='" for "gwt:onPropertyErrorFn"',vb='gwt:onLoadErrorFn',wb='" for "gwt:onLoadErrorFn"',xb='#',yb='?',zb='/',Ab='img',Bb='clear.cache.gif',Cb='baseUrl',Db='html.nocache.js',Eb='base',Fb='//',Gb='user.agent',Hb='webkit',Ib='safari',Jb='gecko',Kb=11,Lb='gecko1_8',Mb='selectingPermutation',Nb='html.devmode.js',Ob='6755203EE2F338F6DD60AFCA6650756A',Pb=':1',Qb=':',Rb='.cache.js',Sb='link',Tb='rel',Ub='stylesheet',Vb='href',Wb='loadExternalRefs',Xb='gwt/chrome/chrome.css',Yb='end',Zb='http:',$b='file:',_b='_gwt_dummy_',ac='__gwtDevModeHook:html',bc='Ignoring non-whitelisted Dev Mode URL: ',cc=':moduleBase';var n=window;var o=document;q(N,O);function p(){var a=n.location.search;return a.indexOf(P)!=-1||a.indexOf(Q)!=-1}
 function q(a,b){if(n.__gwtStatsEvent){n.__gwtStatsEvent({moduleName:R,sessionId:n.__gwtStatsSessionId,subSystem:S,evtGroup:a,millis:(new Date).getTime(),type:b})}}
 html.__sendStats=q;html.__moduleName=R;html.__errFn=null;html.__moduleBase=T;html.__softPermutationId=U;html.__computePropValue=null;html.__getPropMap=null;html.__installRunAsyncCode=function(){};html.__gwtStartLoadingFragment=function(){return null};html.__gwt_isKnownPropertyValue=function(){return false};html.__gwt_getMetaProperty=function(){return null};var r=null;var s=n.__gwt_activeModules=n.__gwt_activeModules||{};s[R]={moduleName:R};html.__moduleStartupDone=function(e){var f=s[R].bindings;s[R].bindings=function(){var a=f?f():{};var b=e[html.__softPermutationId];for(var c=U;c<b.length;c++){var d=b[c];a[d[U]]=d[V]}return a}};var t;function u(){v();return t}
 function v(){if(t){return}var a=o.createElement(W);a.id=R;a.style.cssText=X+Y;a.tabIndex=-1;o.body.appendChild(a);t=a.contentWindow.document;if(navigator.userAgent.indexOf(Z)==-1){t.open();var b=document.compatMode==$?_:ab;t.write(b+bb);t.close()}}

index.html

@@ -1,32 +1,135 @@
 <!doctype html>
-<html>
+<html lang="en">
 <head>
   <title>Bauhaus Echo</title>
   <meta http-equiv="content-type" content="text/html; charset=UTF-8">
-  <meta id="gameViewport" name="viewport" content="width=device-width initial-scale=1">
+  <meta id="gameViewport" name="viewport" content="width=device-width, initial-scale=1">
   <link rel="icon" type="image/png" href="favicon.png">
   <link href="styles.css" rel="stylesheet" type="text/css">
+
+  <!-- Google AdSense — auto ads enabled at account level -->
+  <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-2501747033825166"
+    crossorigin="anonymous"></script>
 </head>
 
 <body>
 
+<!-- ================================================================= -->
+<!--  NAG OVERLAY — shown before first game and between every game     -->
+<!-- ================================================================= -->
+<div id="nag-overlay">
+  <div id="nag-box">
+    <div id="nag-header">
+      <h1 id="nag-title">BAUHAUS ECHO</h1>
+      <p id="nag-tagline">A visual memory puzzle</p>
+    </div>
+
+    <div id="nag-pitch">
+      <p><strong>Want the full experience without ads?</strong></p>
+      <p>Support us on itch.io for just $2 — desktop, no ads, ever.</p>
+    </div>
+
+    <div id="nag-store-links">
+      <a href="https://suchsoftware.itch.io/bauhaus-echo"
+         target="_blank" rel="noopener noreferrer"
+         class="nag-btn nag-btn-primary">
+        Buy on itch.io — $2
+      </a>
+
+      <div id="nag-mobile-row">
+        <a href="https://apps.apple.com/us/app/bauhaus-echo/id6759010657"
+           target="_blank" rel="noopener noreferrer"
+           class="nag-btn nag-btn-store">
+          App Store
+        </a>
+        <a href="https://play.google.com/store/apps/details?id=com.suchsoftware.bauhausecho"
+           target="_blank" rel="noopener noreferrer"
+           class="nag-btn nag-btn-store">
+          Google Play
+        </a>
+      </div>
+    </div>
+
+    <div id="nag-divider"></div>
+
+    <!-- AdSense display ad — replace data-ad-slot with your unit ID -->
+    <div id="nag-ad-container">
+      <ins class="adsbygoogle"
+        style="display:block"
+        data-ad-client="ca-pub-2501747033825166"
+        data-ad-slot="3097663248"
+        data-ad-format="auto"
+        data-full-width-responsive="true"></ins>
+    </div>
+
+    <button id="nag-continue" onclick="dismissNagOverlay()">
+      Continue to Web Version ▸
+    </button>
+
+    <p id="nag-fine-print">Free with ads between games</p>
+  </div>
+</div>
+
+<!-- Game canvas container -->
 <div align="center" id="embed-html"></div>
-<script type="text/javascript" src="html/html.nocache.js"></script>
-</body>
 
 <script>
-function handleMouseDown(evt) {
+// ================================================================
-  evt.preventDefault();
+//  Nag overlay state machine
-  evt.stopPropagation();
+// ================================================================
-  window.focus();
+(function() {
-}
+  var overlay  = document.getElementById('nag-overlay');
+  var embed    = document.getElementById('embed-html');
+  var gwtLoaded = false;
 
-function handleMouseUp(evt) {
+  // Request the first ad for the initial overlay
-  evt.preventDefault();
+  try { (adsbygoogle = window.adsbygoogle || []).push({}); } catch(e) {}
-  evt.stopPropagation();
+
-}
+  // Called when user clicks "Continue to Web Version"
-document.addEventListener('contextmenu', event => event.preventDefault());
+  // Also called from GwtAdManager via JSNI after between-game nag
-document.getElementById('embed-html').addEventListener('mousedown', handleMouseDown, false);
+  window.dismissNagOverlay = function() {
-document.getElementById('embed-html').addEventListener('mouseup', handleMouseUp, false);
+    overlay.style.display = 'none';
+
+    // If a rewarded-ad session was pending, notify GWT
+    if (window.__gwtRewardCallback) {
+      try { window.__gwtRewardCallback(); } catch(e) {}
+    }
+
+    if (!gwtLoaded) {
+      // First dismiss: inject GWT script to start the game
+      var s = document.createElement('script');
+      s.type = 'text/javascript';
+      s.src  = 'html/html.nocache.js';
+      document.body.appendChild(s);
+      gwtLoaded = true;
+
+      // Attach input handlers once GWT creates the canvas
+      s.onload = function() {
+        setTimeout(function() {
+          embed.addEventListener('mousedown', blockDefault, false);
+          embed.addEventListener('mouseup',   blockDefault, false);
+        }, 500);
+      };
+    }
+  };
+
+  // Called from GwtAdManager.showInterstitialAd() via JSNI
+  // Shows the nag overlay on top of the running game
+  window.showNagOverlay = function() {
+    overlay.style.display = 'flex';
+    // Request a fresh ad each time the overlay appears
+    try { (adsbygoogle = window.adsbygoogle || []).push({}); } catch(e) {}
+  };
+
+  // Block right-click and default mouse behaviour on the canvas
+  function blockDefault(evt) {
+    evt.preventDefault();
+    evt.stopPropagation();
+    window.focus();
+  }
+  document.addEventListener('contextmenu', function(e) { e.preventDefault(); });
+})();
 </script>
+
+</body>
 </html>

styles.css

@@ -1,52 +1,209 @@
+/* ================================================================
+   BASE
+   ================================================================ */
 canvas {
-    cursor: default;
+  cursor: default;
-    outline: none;
+  outline: none;
 }
 
 body {
-    background-color: #222222;
+  background-color: #222;
-    margin: 0px;
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
 }
 
-p {
+/* ================================================================
-    text-align: center;
+   NAG OVERLAY
-    color: #eeeeee;
+   ================================================================ */
+#nag-overlay {
+  position: fixed;
+  inset: 0;
+  z-index: 9999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(10, 10, 10, 0.92);
+  backdrop-filter: blur(6px);
+  -webkit-backdrop-filter: blur(6px);
 }
 
-a {
+#nag-box {
-    text-align: center;
+  max-width: 420px;
-    color: #bbbbff;
+  width: 90%;
+  padding: 2.5rem 2rem;
+  text-align: center;
+  color: #eee;
 }
 
+/* Header */
+#nag-header {
+  margin-bottom: 1.8rem;
+}
+
+#nag-title {
+  margin: 0;
+  font-size: 2rem;
+  font-weight: 800;
+  letter-spacing: 0.25em;
+  color: #fff;
+}
+
+#nag-tagline {
+  margin: 0.3rem 0 0;
+  font-size: 0.95rem;
+  color: #999;
+  letter-spacing: 0.08em;
+}
+
+/* Pitch text */
+#nag-pitch {
+  margin-bottom: 1.6rem;
+  line-height: 1.5;
+}
+
+#nag-pitch p {
+  margin: 0.25rem 0;
+  font-size: 0.95rem;
+  color: #ccc;
+  text-align: center;
+}
+
+/* Store link buttons */
+#nag-store-links {
+  display: flex;
+  flex-direction: column;
+  gap: 0.6rem;
+  margin-bottom: 1.4rem;
+}
+
+.nag-btn {
+  display: inline-block;
+  padding: 0.75rem 1.2rem;
+  border-radius: 6px;
+  font-size: 0.95rem;
+  font-weight: 600;
+  text-decoration: none;
+  text-align: center;
+  cursor: pointer;
+  transition: transform 0.1s ease, box-shadow 0.15s ease;
+  border: none;
+  box-sizing: border-box;
+}
+
+.nag-btn:active {
+  transform: scale(0.97);
+}
+
+/* Primary CTA — itch.io */
+.nag-btn-primary {
+  background: #fa5c5c;
+  color: #fff;
+  font-size: 1.05rem;
+  padding: 0.85rem 1.2rem;
+}
+
+.nag-btn-primary:hover {
+  background: #ff7070;
+  box-shadow: 0 0 20px rgba(250, 92, 92, 0.3);
+}
+
+/* App Store / Google Play row */
+#nag-mobile-row {
+  display: flex;
+  gap: 0.6rem;
+}
+
+.nag-btn-store {
+  flex: 1;
+  background: transparent;
+  color: #aaa;
+  border: 1px solid #444;
+  font-size: 0.85rem;
+  padding: 0.6rem 0.5rem;
+}
+
+.nag-btn-store:hover {
+  border-color: #777;
+  color: #ddd;
+}
+
+/* Divider */
+#nag-divider {
+  height: 1px;
+  background: #333;
+  margin: 0.2rem 0 1.2rem;
+}
+
+/* Ad container */
+#nag-ad-container {
+  margin: 0 0 1.2rem;
+  min-height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* Continue button */
+#nag-continue {
+  display: block;
+  width: 100%;
+  padding: 0.75rem;
+  background: transparent;
+  color: #777;
+  border: 1px solid #333;
+  border-radius: 6px;
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: color 0.15s ease, border-color 0.15s ease;
+  font-family: inherit;
+}
+
+#nag-continue:hover {
+  color: #bbb;
+  border-color: #555;
+}
+
+/* Fine print */
+#nag-fine-print {
+  margin: 0.7rem 0 0;
+  font-size: 0.75rem;
+  color: #555;
+  text-align: center;
+}
+
+/* ================================================================
+   SUPERDEV (debug)
+   ================================================================ */
 .superdev {
-    color: rgb(37,37,37);
+  color: rgb(37,37,37);
-    text-shadow: 0px 1px 1px rgba(250,250,250,0.1);
+  text-shadow: 0px 1px 1px rgba(250,250,250,0.1);
-    font-size: 50pt;
+  font-size: 50pt;
-    display: block;
+  display: block;
-    position: relative;
+  position: relative;
-    text-decoration: none;
+  text-decoration: none;
-    background-color: rgb(83,87,93);
+  background-color: rgb(83,87,93);
-    box-shadow: 0px 3px 0px 0px rgb(34,34,34),
+  box-shadow: 0px 3px 0px 0px rgb(34,34,34),
-                0px 7px 10px 0px rgb(17,17,17),
+              0px 7px 10px 0px rgb(17,17,17),
-                inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
+              inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
-                inset 0px -12px 35px 0px rgba(0, 0, 0, .5);
+              inset 0px -12px 35px 0px rgba(0, 0, 0, .5);
-    width: 70px;
+  width: 70px;
-    height: 70px;
+  height: 70px;
-    border: 0;
+  border: 0;
-    border-radius: 35px;
+  border-radius: 35px;
-    text-align: center;
+  text-align: center;
-    line-height: 68px;
+  line-height: 68px;
 }
 
 .superdev:active {
-    box-shadow: 0px 0px 0px 0px rgb(34,34,34),
+  box-shadow: 0px 0px 0px 0px rgb(34,34,34),
-                0px 3px 7px 0px rgb(17,17,17),
+              0px 3px 7px 0px rgb(17,17,17),
-                inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
+              inset 0px 1px 1px 0px rgba(250, 250, 250, .2),
-                inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
+              inset 0px -10px 35px 5px rgba(0, 0, 0, .5);
-    background-color: rgb(83,87,93);
+  background-color: rgb(83,87,93);
-    top: 3px;
+  top: 3px;
-    color: #fff;
+  color: #fff;
-    text-shadow: 0px 0px 3px rgb(250,250,250);
+  text-shadow: 0px 0px 3px rgb(250,250,250);
 }
 
 .superdev:hover {