Ads

index.html

@@ -7,5 +7,6 @@
     EJS_core = 'nes';
     EJS_gameUrl = 'mega_mountain.nes';
     EJS_DEBUG_XX = true;
+    EJS_AdUrl = "https://www.google.com/search?igu=1";
 </script>
 <script src='src/loader.js'></script>

src/css/main.css

@@ -44,6 +44,59 @@
     scrollbar-color:transparent #f5f5f5;
 }
 
+.ejs_ad_iframe {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    z-index: 1;
+    transform: translate(-50%, -50%);
+}
+.ejs_ad_close {
+    cursor: pointer;
+}
+.ejs_ad_close:after {
+    content: "";
+    position: absolute;
+    border-left: 20px solid transparent;
+    border-right: 20px solid #a7a7a77d;
+    border-top: 20px solid #a7a7a77d;
+    border-bottom: 20px solid transparent;
+    right: 0;
+}
+.ejs_ad_close a {
+    right: 4px;
+    top: 4px;
+    position: absolute;
+    border: 0;
+    padding: 0;
+    width: 15px;
+    height: 15px;
+    z-index: 99;
+}
+.ejs_ad_close a:before {
+    content: "";
+    border-bottom: 1px solid #fff;
+    transform: rotate(45deg) translateY(-45%);
+    width: 15px;
+    height: 15px;
+    display: block;
+    position: absolute;
+    top: 0;
+    right: 0;
+}
+.ejs_ad_close a:after {
+    content: "";
+    border-bottom: 1px solid #fff;
+    width: 15px;
+    height: 15px;
+    display: block;
+    position: absolute;
+    right: 0;
+    background: transparent;
+    top: 0;
+    transform: rotate(-45deg) translateY(-50%) translateX(0);
+}
+
 .ejs_game {/* todo. User selectable background loading image */
     width: 100%;
     height: 100%;

src/emulator.js

@@ -158,6 +158,7 @@ class EmulatorJS {
         this.config = config;
         this.setElements(element);
         this.setColor(this.config.color || "");
+        if (this.config.adUrl) this.setupAds(this.config.adUrl);
         this.canvas = this.createElement('canvas');
         this.canvas.classList.add('ejs_canvas');
         this.bindListeners();
@@ -200,6 +201,43 @@ class EmulatorJS {
         }
         this.elements.parent.setAttribute("style", "--ejs-primary-color:" + getColor(color) + ";");
     }
+    setupAds(ads) {
+        const div = this.createElement("div");
+        div.classList.add("ejs_ad_iframe");
+        const frame = this.createElement("iframe");
+        frame.src = ads;
+        frame.setAttribute("scrolling", "no");
+        frame.setAttribute("frameborder", "no");
+        frame.style.width = "300px";
+        frame.style.height = "250px";
+        
+        const closeParent = this.createElement("div");
+        closeParent.classList.add("ejs_ad_close");
+        const closeButton = this.createElement("a");
+        closeParent.appendChild(closeButton);
+        closeParent.setAttribute("hidden", "");
+        div.appendChild(closeParent);
+        div.appendChild(frame);
+        this.elements.parent.appendChild(div);
+        this.addEventListener(closeButton, "click", () => {
+            div.remove();
+        })
+        
+        this.on("start", () => {
+            closeParent.removeAttribute("hidden");
+        })
+        
+    }
+    functions = {};
+    on(event, func) {
+        if (!Array.isArray(this.functions[event])) this.functions[event] = [];
+        this.functions[event].push(func);
+    }
+    callEvent(event, data) {
+        if (!Array.isArray(this.functions[event])) return 0;
+        this.functions[event].forEach(e => e(data));
+        return this.functions[event].length;
+    }
     setElements(element) {
         const game = this.createElement("div");
         const elem = document.querySelector(element);
@@ -593,6 +631,7 @@ class EmulatorJS {
         this.updateCheatUI();
         this.updateGamepadLabels();
         this.elements.parent.focus();
+        this.callEvent("start");
     }
     bindListeners() {
         this.createContextMenu();
@@ -840,8 +879,13 @@ class EmulatorJS {
         
         let stateUrl;
         addButton("Save State", '<svg viewBox="0 0 448 512"><path fill="currentColor" d="M433.941 129.941l-83.882-83.882A48 48 0 0 0 316.118 32H48C21.49 32 0 53.49 0 80v352c0 26.51 21.49 48 48 48h352c26.51 0 48-21.49 48-48V163.882a48 48 0 0 0-14.059-33.941zM224 416c-35.346 0-64-28.654-64-64 0-35.346 28.654-64 64-64s64 28.654 64 64c0 35.346-28.654 64-64 64zm96-304.52V212c0 6.627-5.373 12-12 12H76c-6.627 0-12-5.373-12-12V108c0-6.627 5.373-12 12-12h228.52c3.183 0 6.235 1.264 8.485 3.515l3.48 3.48A11.996 11.996 0 0 1 320 111.48z"/></svg>', async () => {
-            if (stateUrl) URL.revokeObjectURL(stateUrl);
             const state = await this.gameManager.getState();
+            const called = this.callEvent("save", {
+                screenshot: this.gameManager.screenshot(),
+                state: state
+            });
+            if (called > 0) return;
+            if (stateUrl) URL.revokeObjectURL(stateUrl);
             const blob = new Blob([state]);
             stateUrl = URL.createObjectURL(blob);
             const a = this.createElement("a");

src/loader.js

@@ -49,6 +49,7 @@
     config.biosUrl = window.EJS_biosUrl;
     config.gameName = window.EJS_gameName;
     config.color = window.EJS_color;
+    config.adUrl = window.EJS_AdUrl;
     
     new EmulatorJS(EJS_player, config);