Skip to content

Commit 8dce78d

Browse files
sojs-codersojs-coder
committed
added in-stream ads
1 parent 1c5c497 commit 8dce78d

File tree

3 files changed

+130
-27
lines changed

3 files changed

+130
-27
lines changed

‎static/assets/scripts/home.js‎

Lines changed: 114 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ try {
1919
sortCardsAlphabetically(-1);
2020
}, "Z-A"]
2121
]
22-
22+
let showingAds = true;
23+
let needToLoadAds = false;
2324
let lastInputTime = Date.now();
2425
let query = new URLSearchParams(window.location.search);
2526
let cachedRomsJSON = null;
@@ -40,13 +41,13 @@ try {
4041
});
4142
async function importJSON(path) {
4243
let url;
43-
if(path.startsWith("/") && !path.startsWith("//")){
44+
if (path.startsWith("/") && !path.startsWith("//")) {
4445
url = new URL(path, window.location.origin);
45-
}else{
46+
} else {
4647
url = new URL(path);
4748
}
4849
url.searchParams.append('_', Date.now());
49-
50+
5051
const res = await fetch(path, {
5152
method: "GET",
5253
headers: {
@@ -55,7 +56,10 @@ try {
5556
'Expires': '0'
5657
}
5758
});
58-
return res.json();
59+
if (!res.ok) {
60+
return {};
61+
}
62+
return res.json() || {};
5963
}
6064
async function init() {
6165
const gamesJson = await importJSON("/games.json");
@@ -91,27 +95,37 @@ try {
9195
document.querySelector(".cards").classList.remove("loading");
9296
let romsJSON = await importJSON("/roms/roms.json");
9397
let unseenRoms = []
94-
Object.keys(romsJSON).forEach(key=>{
98+
Object.keys(romsJSON).forEach(key => {
9599
const romsList = romsJSON[key];
96-
romsList.forEach(([romLink, romID])=>{
100+
romsList.forEach(([romLink, romID]) => {
97101
const name = `${key}-${normalize(romID)}`;
98-
if (!checkRomSeen(name)) unseenRoms.push([key,romID]);
102+
if (!checkRomSeen(name)) unseenRoms.push([key, romID]);
99103
markGameSeen(name);
100104
})
101105
})
102-
if(unseenRoms.length > 0){
103-
if(unseenRoms.length == 1){
106+
if (unseenRoms.length > 0) {
107+
if (unseenRoms.length == 1) {
104108
document.getElementById("romLinks").innerHTML += ` (${unseenRoms[0][0]}/${unseenRoms[0][1]} New!)`
105-
}else{
109+
} else {
106110
document.getElementById("romLinks").innerHTML += ` (${unseenRoms.length} New!)`
107111
}
108112
}
109113
if (query.has("q")) {
110-
log(`Search query exists: <${query.get('q')}>`)
111-
searchInput.value = query.get("q");
112-
openSearch();
113-
input();
114+
if (query.get("q").length > 0) {
115+
log(`Search query exists: <${query.get('q')}>`)
116+
searchInput.value = query.get("q");
117+
openSearch();
118+
input();
119+
} else {
120+
log(`Search query exists but is empty`)
121+
query.delete("q");
122+
var url = new URL(window.location.href);
123+
url.search = query.toString();
124+
window.history.pushState({}, '', url);
125+
}
114126
}
127+
log("Home page loaded");
128+
loadAds();
115129
}
116130
async function incrementClicks(gameID) {
117131
log(`Incrementing clicks for game ${gameID}`);
@@ -166,7 +180,7 @@ try {
166180
return parseInt(b.getAttribute('data-clicks')) - parseInt(a.getAttribute('data-clicks'));
167181
});
168182
let cardsContainer = document.querySelector(".cards");
169-
cardsContainer.innerHTML = "";
183+
removeCards();
170184
cardsArray.forEach(card => {
171185
cardsContainer.appendChild(card);
172186
});
@@ -197,14 +211,17 @@ try {
197211
matching = matching.sort((a, b) => {
198212
return b[0] - a[0]
199213
});
200-
cardsContainer.innerHTML = "";
214+
removeCards();
201215
matching = matching.filter((card) => {
202216
if (card[0] == 0) return false;
203217
cardsContainer.appendChild(card[1]);
204218
return true;
205219
});
220+
shuffleAds();
206221
lastInputTime = Date.now();
207222
if (matching.length == 0) {
223+
removeCards();
224+
hideAds();
208225
var results = await testRomSearch(searchInput.value);
209226
if (results.length > 0) {
210227
var h3 = document.createElement("h3");
@@ -232,6 +249,7 @@ try {
232249
}, failedInputCheckLag);
233250
}
234251
} else {
252+
showAds();
235253
document.getElementById("check-roms").innerHTML = "";
236254
}
237255
}
@@ -277,6 +295,26 @@ try {
277295
throw error;
278296
}
279297
};
298+
function showAds() {
299+
log("Showing ads");
300+
showingAds = true;
301+
if (needToLoadAds) {
302+
loadAds();
303+
} else {
304+
const ads = document.querySelectorAll(".tad");
305+
ads.forEach(ad => {
306+
ad.style.display = "flex";
307+
});
308+
}
309+
}
310+
function hideAds() {
311+
log("Hiding ads");
312+
showingAds = false;
313+
const ads = document.querySelectorAll(".tad");
314+
ads.forEach(ad => {
315+
ad.style.display = "none";
316+
});
317+
}
280318
function openSearch() {
281319
log("Search box opened");
282320
searchInput.type = "text";
@@ -293,7 +331,7 @@ try {
293331
card.classList.add("new");
294332
}
295333
}
296-
function checkRomSeen(id){
334+
function checkRomSeen(id) {
297335
log(`Checking if rom ${id} seen`);
298336
return localStorage.getItem(`seen-${id}`) == "yes";
299337
}
@@ -334,7 +372,7 @@ try {
334372
return compareAlpha(aText, bText) * direction;
335373
});
336374
let cardsContainer = document.querySelector(".cards");
337-
cardsContainer.innerHTML = "";
375+
removeCards();
338376
cardsArray.forEach(card => {
339377
cardsContainer.appendChild(card);
340378
});
@@ -364,8 +402,17 @@ try {
364402
}
365403
sortState = state;
366404
sortStates[sortState][0]();
405+
shuffleAds();
367406
sortDirectionText.innerHTML = sortStates[sortState][1];
368407
}
408+
function shuffleAds() {
409+
const ads = document.querySelectorAll(".tad");
410+
ads.forEach(ad => {
411+
ad.remove();
412+
var randomCard = document.querySelector(".cards").children[Math.floor(Math.random() * document.querySelector(".cards").children.length)];
413+
document.querySelector(".cards").insertBefore(ad, randomCard);
414+
});
415+
}
369416
function createPopup(popupData) {
370417
log(`Creating popup with message ${popupData.message}`);
371418
const popup = document.createElement('div');
@@ -427,6 +474,12 @@ try {
427474

428475
document.body.appendChild(popup);
429476
}
477+
function removeCards() {
478+
log("Removing all cards");
479+
cardsContainer.querySelectorAll(".card").forEach(card => {
480+
card.remove();
481+
});
482+
}
430483
function buildCard(game) {
431484
const card = document.createElement("div");
432485
card.classList.add("card");
@@ -474,7 +527,29 @@ try {
474527

475528
return card;
476529
}
477-
530+
function loadAds(num = 3) {
531+
log(`Loading ${num} ads`);
532+
if (!showingAds) {
533+
log("Ads not shown, not loading");
534+
needToLoadAds = true;
535+
return;
536+
};
537+
needToLoadAds = false;
538+
for (let i = 0; i < num; i++) {
539+
const adHTML = `<div data-mndbanid="c5cf29fe-386b-45f3-a462-bc8326f5a713"></div>`;
540+
const adCard = document.createElement("div");
541+
adCard.classList.add("tad");
542+
adCard.innerHTML = adHTML;
543+
var randomCard = document.querySelector(".cards").children[Math.floor(Math.random() * document.querySelector(".cards").children.length)];
544+
document.querySelector(".cards").insertBefore(adCard, randomCard);
545+
}
546+
const script = document.createElement("script");
547+
script.src = "https://ss.mrmnd.com/banner.js";
548+
document.body.appendChild(script);
549+
script.onload = () => {
550+
log("Ads loaded");
551+
}
552+
}
478553

479554

480555
document.addEventListener("keydown", (e) => {
@@ -521,6 +596,22 @@ try {
521596
} else {
522597
header.classList.remove('shadow');
523598
}
599+
// check if ad is visible
600+
const ads = document.querySelectorAll(".tad");
601+
ads.forEach(ad => {
602+
if(ad.getAttribute("data-loaded-check") == "true") return;
603+
if (ad.getBoundingClientRect().top < window.innerHeight) {
604+
// allow a 5s loading grace period
605+
setTimeout(() =>{
606+
// check if ad loaded (will have Iframe)
607+
if (ad.querySelector("iframe")) {
608+
ad.setAttribute("data-loaded-check", "true");
609+
} else {
610+
ad.remove();
611+
}
612+
},5000)
613+
}
614+
});
524615
});
525616
searchInput.addEventListener("click", (e) => {
526617

@@ -554,9 +645,8 @@ try {
554645
});
555646

556647

557-
init().then(() => {
558-
log("Cards all loaded")
559-
})
648+
init()
560649
} catch (err) {
561650
log(err)
562-
}
651+
}
652+

‎static/assets/styles/home.css‎

Lines changed: 16 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -346,8 +346,22 @@ button#sort {
346346
}
347347

348348
.tad {
349-
width: 120px;
350-
height: 600px;
349+
width: 500px;
350+
height: 325px;
351+
margin: 15px;
352+
position: relative;
353+
overflow: hidden;
354+
border-radius: 10px;
355+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
356+
transition: all 0.3s ease;
357+
display: flex;
358+
flex-direction: column;
359+
align-items: center;
360+
justify-content: center;
361+
}
362+
.trealad {
363+
width: 300px;
364+
height: 250px;
351365
background-color: #333;
352366
}
353367

‎static/index.html‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,7 +25,6 @@
2525
<div class="subContainer">
2626
<div class="row">
2727
<div class="ads r">
28-
<!-- <div class = "tad"></div> -->
2928
<div data-mndbanid="70edd33f-a955-4aa6-9827-4131811e6871"></div>
3029
</div>
3130
<div>

0 commit comments

Comments
 (0)