From 567b338779487aadd45aa6e40993a180d25ceca2 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 24 Apr 2026 05:36:17 +0000 Subject: [PATCH 1/3] =?UTF-8?q?Add=20game=20portal=20=E2=80=94=20187=20gam?= =?UTF-8?q?es,=20dark=20night=20UI,=20search=20&=20categories?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - index.html: single-page portal with sidebar + game grid + iframe overlay - style.css: dark night theme (#08080f bg, purple accent, category colors) - games.js: 187 games from 5 sources (UGS-Assets, Neruvy, genizy, mathtut0r1ng) - app.js: category filtering, live search, iframe game loading, fullscreen Sources: bubbls/UGS-Assets, Neruvy/neruvy-games, Neruvy/web-port, genizy/web-port, mathtut0r1ng/mathtut0r1ng.github.io https://claude.ai/code/session_013KzmqWZCgkEN2uqGkURs4M --- app.js | 154 +++++++++++++++++++++ games.js | 207 ++++++++++++++++++++++++++++ index.html | 74 ++++++++++ style.css | 389 +++++++++++++++++++++++++++++++++++++++++++++++++++++ 4 files changed, 824 insertions(+) create mode 100644 app.js create mode 100644 games.js create mode 100644 index.html create mode 100644 style.css diff --git a/app.js b/app.js new file mode 100644 index 0000000..d1a95d6 --- /dev/null +++ b/app.js @@ -0,0 +1,154 @@ +'use strict'; + +const CAT = { + all: { label: 'All Games', color: '#7c3aed', emoji: '๐ŸŽฎ' }, + action: { label: 'Action', color: '#ef4444', emoji: 'โšก' }, + adventure: { label: 'Adventure', color: '#fb923c', emoji: '๐Ÿ—บ๏ธ' }, + horror: { label: 'Horror', color: '#8b5cf6', emoji: '๐Ÿ‘ป' }, + idle: { label: 'Idle', color: '#84cc16', emoji: '๐Ÿ’ฐ' }, + multiplayer: { label: 'Multiplayer', color: '#ec4899', emoji: '๐Ÿ‘ฅ' }, + music: { label: 'Music', color: '#14b8a6', emoji: '๐ŸŽต' }, + platformer: { label: 'Platformer', color: '#f97316', emoji: '๐Ÿƒ' }, + puzzle: { label: 'Puzzle', color: '#06b6d4', emoji: '๐Ÿงฉ' }, + racing: { label: 'Racing', color: '#f59e0b', emoji: '๐ŸŽ๏ธ' }, + rpg: { label: 'RPG', color: '#a855f7', emoji: 'โš”๏ธ' }, + shooter: { label: 'Shooter', color: '#f43f5e', emoji: '๐Ÿ”ซ' }, + sports: { label: 'Sports', color: '#10b981', emoji: '๐Ÿ€' }, + strategy: { label: 'Strategy', color: '#3b82f6', emoji: 'โ™Ÿ๏ธ' }, + other: { label: 'Other', color: '#64748b', emoji: 'โœจ' }, +}; + +let activeCat = 'all'; +let searchTerm = ''; + +// โ”€โ”€ Build category nav โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ +function buildNav() { + const counts = {}; + GAMES.forEach(g => { counts[g.cat] = (counts[g.cat] || 0) + 1; }); + + const nav = document.getElementById('cat-nav'); + nav.innerHTML = Object.entries(CAT).map(([id, m]) => { + const n = id === 'all' ? GAMES.length : (counts[id] || 0); + if (id !== 'all' && !n) return ''; + return ``; + }).join(''); + + nav.addEventListener('click', e => { + const btn = e.target.closest('.cat-btn'); + if (!btn) return; + nav.querySelectorAll('.cat-btn').forEach(b => b.classList.remove('active')); + btn.classList.add('active'); + activeCat = btn.dataset.cat; + render(); + }); +} + +// โ”€โ”€ Render game grid โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ +function render() { + const lower = searchTerm.toLowerCase(); + const list = GAMES.filter(g => + (activeCat === 'all' || g.cat === activeCat) && + (!lower || g.name.toLowerCase().includes(lower)) + ); + + const grid = document.getElementById('grid'); + const empty = document.getElementById('empty'); + const count = document.getElementById('count-label'); + + count.textContent = list.length + ? `${list.length} game${list.length === 1 ? '' : 's'}` + : '0 games'; + + if (!list.length) { + grid.innerHTML = ''; + empty.classList.remove('hidden'); + return; + } + + empty.classList.add('hidden'); + grid.innerHTML = list.map(g => { + const m = CAT[g.cat]; + const idx = GAMES.indexOf(g); + const bg = `linear-gradient(135deg, ${m.color}30 0%, ${m.color}0c 100%)`; + return `
+
+ ${g.thumb + ? `${g.name}` + : `${m.emoji}` + } +
+
+
${g.name}
+ ${m.label} +
+
`; + }).join(''); +} + +// โ”€โ”€ Open game in overlay โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ +function openGame(idx) { + const g = GAMES[idx]; + const m = CAT[g.cat]; + const frame = document.getElementById('game-frame'); + const loading = document.getElementById('loading'); + const overlay = document.getElementById('overlay'); + + document.getElementById('overlay-title').textContent = g.name; + + const badge = document.getElementById('overlay-badge'); + badge.textContent = m.label; + badge.style.background = m.color + '22'; + badge.style.color = m.color; + + loading.style.display = 'flex'; + frame.style.opacity = '0'; + frame.src = g.url; + + frame.onload = () => { + loading.style.display = 'none'; + frame.style.opacity = '1'; + }; + + overlay.classList.remove('hidden'); + document.body.style.overflow = 'hidden'; +} + +function closeOverlay() { + document.getElementById('overlay').classList.add('hidden'); + document.getElementById('game-frame').src = ''; + document.getElementById('loading').style.display = 'none'; + document.body.style.overflow = ''; +} + +function goFullscreen() { + const el = document.getElementById('game-frame'); + if (el.requestFullscreen) el.requestFullscreen(); + else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen(); +} + +// โ”€โ”€ Init โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ +function init() { + buildNav(); + render(); + + document.getElementById('search').addEventListener('input', e => { + searchTerm = e.target.value; + render(); + }); + + // Delegated click on grid โ€” attached once + document.getElementById('grid').addEventListener('click', e => { + const card = e.target.closest('.card'); + if (card) openGame(+card.dataset.idx); + }); + + document.getElementById('back-btn').addEventListener('click', closeOverlay); + document.getElementById('fullscreen-btn').addEventListener('click', goFullscreen); + document.addEventListener('keydown', e => { if (e.key === 'Escape') closeOverlay(); }); +} + +init(); diff --git a/games.js b/games.js new file mode 100644 index 0000000..f25317f --- /dev/null +++ b/games.js @@ -0,0 +1,207 @@ +// URL helpers for each game source +const UGS = n => `https://bubbls.github.io/UGS-Assets/${encodeURIComponent(n)}/`; +const NG = n => `https://neruvy.github.io/neruvy-games/games/${n}/`; +const NP = n => `https://neruvy.github.io/web-port/${n}/`; +const GP = n => `https://genizy.github.io/web-port/${n}/`; +const MT = n => `https://mathtut0r1ng.github.io/gamespage/games/${n}/`; + +const GAMES = [ + + // โ”€โ”€ UGS-ASSETS (bubbls.github.io/UGS-Assets) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ + { name: "1 Date Danger", url: UGS("1-date-danger"), cat: "horror" }, + { name: "10 Minutes Till Dawn", url: UGS("10minutestilldawn"), cat: "shooter" }, + { name: "2 Minute Football", url: UGS("2 minute football"), cat: "sports" }, + { name: "2-3-4 Player Games", url: UGS("2-3-4-player-game"), cat: "multiplayer" }, + { name: "2 DOOM", url: UGS("2doom"), cat: "action" }, + { name: "3Dash", url: UGS("3dash"), cat: "platformer" }, + { name: "5B", url: UGS("5b"), cat: "other" }, + { name: "Antimatter Dimensions", url: UGS("Antimatter Dimensions"), cat: "idle" }, + { name: "Bumper Cars Soccer", url: UGS("BUMPER CARS SOCCER"), cat: "sports" }, + { name: "Blightborne", url: UGS("Blightborne"), cat: "rpg" }, + { name: "Burrito Bison", url: UGS("BurritoBison-main"), cat: "action" }, + { name: "Endacopia", url: UGS("Endacopia"), cat: "horror" }, + { name: "Five Nights at Wario's", url: UGS("FNAW-main"), cat: "horror" }, + { name: "Five Nights at Osaka's", url: UGS("Five Nights at Osaka's"), cat: "horror" }, + { name: "Insomniary", url: UGS("Insomniary"), cat: "horror" }, + { name: "Stickman GTA", url: UGS("STICKMAN GTA"), cat: "action" }, + { name: "Stickman Clash", url: UGS("Stickman Clash"), cat: "action" }, + { name: "A Day in the Office", url: UGS("a day in the office"), cat: "other" }, + { name: "Adventure Capitalist", url: UGS("adventure-capitalist"), cat: "idle" }, + { name: "Ages of Conflict", url: UGS("ages of conflict"), cat: "strategy" }, + { name: "Airline Tycoon Idle", url: UGS("airline-tycoon-idle"), cat: "idle" }, + { name: "Alien Sky Invasion", url: UGS("alien sky invasion"), cat: "shooter" }, + { name: "Amazing Rope Police", url: UGS("amazing-strange-rope-police-vice-spider"), cat: "action" }, + { name: "Amidst the Sky", url: UGS("amidst the sky"), cat: "platformer" }, + { name: "Angry Birds", url: UGS("angry-bird"), cat: "puzzle" }, + { name: "Apes vs Helium", url: UGS("apesvshelium"), cat: "action" }, + { name: "Arcade Volley", url: UGS("arcade-volley"), cat: "sports" }, + { name: "Archesspalago", url: UGS("archesspalago"), cat: "puzzle" }, + { name: "Astro Survivors", url: UGS("astro survivors"), cat: "shooter" }, + { name: "Aviamaster", url: UGS("aviamaster"), cat: "strategy" }, + { name: "Babel Tower", url: UGS("babel tower"), cat: "puzzle" }, + { name: "Backrooms 2D", url: UGS("backrooms 2D"), cat: "horror" }, + { name: "Bacon May Die", url: UGS("bacon may die"), cat: "action" }, + { name: "Bad Parenting", url: UGS("bad-parenting"), cat: "platformer" }, + { name: "Baldi's Basics", url: UGS("baldis-basics"), cat: "horror" }, + { name: "Baldi's Decomp", url: UGS("baldi decomp"), cat: "horror" }, + { name: "Ballistic", url: UGS("ballistic"), cat: "shooter" }, + { name: "Banana Poker", url: UGS("banana poker"), cat: "other" }, + { name: "Barry Has a Secret", url: UGS("barry has a secret"), cat: "horror" }, + { name: "Baseball Bros", url: UGS("baseball bros"), cat: "sports" }, + { name: "Basket Stars", url: UGS("basket stars"), cat: "sports" }, + { name: "Basketball Superstars", url: UGS("basketball-superstars"), cat: "sports" }, + { name: "Beach Boxing Sim", url: UGS("beach-boxing-sim"), cat: "sports" }, + { name: "Bearsus", url: UGS("bearsus"), cat: "action" }, + { name: "Ben 10 Super Slammer", url: UGS("ben 10 super slammer"), cat: "action" }, + { name: "BFNSU", url: UGS("bfnsu"), cat: "horror" }, + { name: "Big 2048", url: UGS("big 2048"), cat: "puzzle" }, + { name: "Big Flappy Tower", url: UGS("big flappy tower"), cat: "platformer" }, + { name: "Block Miner", url: UGS("block-miner"), cat: "idle" }, + { name: "BlockPost", url: UGS("blockpost"), cat: "shooter" }, + { name: "Blumgi Racers", url: UGS("blumgi racers"), cat: "racing" }, + { name: "Blumgi Rocket", url: UGS("blumgi-rocket"), cat: "racing" }, + { name: "Bounce Back", url: UGS("bounce back"), cat: "puzzle" }, + { name: "Bouncy Basketball", url: UGS("bouncy basketball"), cat: "sports" }, + { name: "Bouncy Motors", url: UGS("bouncy motors"), cat: "racing" }, + { name: "Bounty of One", url: UGS("bounty of one"), cat: "rpg" }, + { name: "Brawl 3D", url: UGS("brawl-3d"), cat: "multiplayer" }, + { name: "Bullet Force", url: UGS("bullet-force-multiplayer"), cat: "shooter" }, + { name: "Capybara Clicker", url: UGS("capybara clicker"), cat: "idle" }, + { name: "Cat Mario", url: UGS("cat mario"), cat: "platformer" }, + { name: "Cats Love Cake 2", url: UGS("cats love cake 2"), cat: "puzzle" }, + { name: "Cave Chaos 2", url: UGS("cave chaos 2"), cat: "platformer" }, + { name: "Cheese Chompers 3", url: UGS("cheese chompers 3"), cat: "action" }, + { name: "Chicken Gun", url: UGS("chicken-gun"), cat: "shooter" }, + { name: "Choppy Orc", url: UGS("choppy orc"), cat: "platformer" }, + { name: "CircloO 2", url: UGS("circlo02"), cat: "puzzle" }, + { name: "Clash of Vikings", url: UGS("clashofvikings"), cat: "strategy" }, + { name: "Cookie Clicker", url: UGS("cookieclicker"), cat: "idle" }, + { name: "Crazy Cars", url: UGS("crazy cars"), cat: "racing" }, + { name: "Crazy Chicken 3D", url: UGS("crazy chicken 3D"), cat: "shooter" }, + { name: "Creature Card Idle", url: UGS("creature-card-idle"), cat: "idle" }, + { name: "CS:GO Surf", url: UGS("csgo surf"), cat: "action" }, + { name: "Dandy's World Clicker", url: UGS("dandys-world-clicker"), cat: "idle" }, + { name: "D-Blox", url: UGS("dblox"), cat: "puzzle" }, + { name: "Deepest Sword", url: UGS("deepest sword"), cat: "rpg" }, + { name: "Demon Bluff", url: UGS("demon-bluff"), cat: "horror" }, + { name: "Die in the Dungeon", url: UGS("die in the dungeon"), cat: "rpg" }, + { name: "Dimension Incident", url: UGS("dimension-incident"), cat: "horror" }, + { name: "Doge Miner 2", url: UGS("doge miner 2"), cat: "idle" }, + { name: "Doodle Jump", url: UGS("doodle jump"), cat: "platformer" }, + { name: "Down the Mountain", url: UGS("down the mountain"), cat: "action" }, + { name: "Dragon", url: UGS("dragon"), cat: "action" }, + { name: "Drift Hunters", url: UGS("drift-hunters"), cat: "racing" }, + { name: "Drunken Duel", url: UGS("drunken duel"), cat: "multiplayer" }, + { name: "Duck Life 6", url: UGS("duck life 6"), cat: "rpg" }, + { name: "Duck Life Battle", url: UGS("duck life battle"), cat: "rpg" }, + { name: "Dungeon Deck", url: UGS("dungeondeck"), cat: "strategy" }, + { name: "Eagle Ride", url: UGS("eagle ride"), cat: "racing" }, + { name: "Edy's Car Simulator", url: UGS("edys car simulator"), cat: "racing" }, + { name: "Eggy Car", url: UGS("eggy car"), cat: "racing" }, + { name: "Elastic Man", url: UGS("elasticman"), cat: "other" }, + { name: "Escalating Duel", url: UGS("escalating-duel"), cat: "action" }, + { name: "Escape Road 2", url: UGS("escaperoad2city"), cat: "racing" }, + + // โ”€โ”€ NERUVY GAMES (neruvy.github.io/neruvy-games/games) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ + { name: "1v1.LOL", url: NG("1v1lol"), cat: "shooter" }, + { name: "2048", url: NG("2048"), cat: "puzzle" }, + { name: "ARC", url: NG("ARC"), cat: "action" }, + { name: "Bob the Robber 2", url: NG("bob-the-robber-2"), cat: "adventure" }, + { name: "Drive Mad", url: NG("drive-mad"), cat: "racing" }, + { name: "Granny", url: NG("granny"), cat: "horror" }, + { name: "Moto X3M", url: NG("moto-x3m"), cat: "racing" }, + { name: "Moto X3M 2", url: NG("motox3m2"), cat: "racing" }, + { name: "Poly Track", url: NG("poly-track"), cat: "racing" }, + { name: "Retro Bowl", url: NG("retro-bowl"), cat: "sports" }, + { name: "Run 3", url: NG("run-3"), cat: "platformer" }, + { name: "Slope", url: NG("slope"), cat: "action" }, + { name: "Smash Karts", url: NG("smash-karts"), cat: "racing" }, + { name: "Snow Rider 3D", url: NG("snow-rider"), cat: "racing" }, + { name: "Survival Race", url: NG("survival-race"), cat: "racing" }, + { name: "Time Shooter 3: SWAT", url: NG("time-shooter-3-swat"), cat: "shooter" }, + { name: "Vex 3", url: NG("vex3"), cat: "platformer" }, + { name: "Vex 4", url: NG("vex4"), cat: "platformer" }, + { name: "Vex 5", url: NG("vex5"), cat: "platformer" }, + { name: "Vex 6", url: NG("vex6"), cat: "platformer" }, + { name: "Vex 7", url: NG("vex7"), cat: "platformer" }, + + // โ”€โ”€ WEB PORTS โ€” Neruvy (neruvy.github.io/web-port) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ + { name: "Amanda the Adventurer", url: NP("amanda-the-adventurer"), cat: "horror" }, + { name: "Andy's Apple Farm", url: NP("andys-apple-farm"), cat: "adventure" }, + { name: "Baldi's Basics Plus", url: NP("baldi-plus"), cat: "horror" }, + { name: "Baldi's Basics Remastered", url: NP("baldi-remaster"), cat: "horror" }, + { name: "Bendy and the Ink Machine", url: NP("bendy"), cat: "horror" }, + { name: "BERGENTRUCK", url: NP("bergentruck"), cat: "adventure" }, + { name: "BLOODMONEY!", url: NP("bloodmoney"), cat: "action" }, + { name: "Buckshot Roulette", url: NP("buckshot-roulette"), cat: "horror" }, + { name: "Class of '09", url: NP("class-of-09"), cat: "adventure" }, + { name: "Cuphead", url: NP("cuphead"), cat: "action" }, + { name: "Dead Plate", url: NP("dead-plate"), cat: "horror" }, + { name: "The Deadseat", url: NP("deadseat"), cat: "horror" }, + { name: "Deltarune", url: NP("deltatraveler"), cat: "rpg" }, + { name: "Do Not Take This Cat Home", url: NP("donottakethiscathome"), cat: "horror" }, + { name: "Fears to Fathom", url: NP("fears-to-fathom"), cat: "horror" }, + { name: "Getting Over It", url: NP("getting-over-it"), cat: "platformer" }, + { name: "Happy Sheepies", url: NP("happy-sheepies"), cat: "puzzle" }, + { name: "Hotline Miami", url: NP("hotline-miami"), cat: "action" }, + { name: "Human Expenditure Program", url: NP("human-expenditure-program"), cat: "horror" }, + { name: "Jelly Drift", url: NP("jelly-drift"), cat: "racing" }, + { name: "Karlson", url: NP("karlson"), cat: "action" }, + { name: "Kindergarten", url: NP("kindergarten"), cat: "adventure" }, + { name: "Lacy's Flash Games", url: NP("lacysflashgames"), cat: "other" }, + { name: "Milkman Karlson", url: NP("milkman-karlson"), cat: "action" }, + { name: "OMORI", url: NP("omori-fixed"), cat: "rpg" }, + { name: "People Playground", url: NP("people-playground"), cat: "other" }, + { name: "Pizza Tower", url: NP("pizza-tower"), cat: "platformer" }, + { name: "Raft", url: NP("raft"), cat: "adventure" }, + { name: "Slender: The 8 Pages", url: NP("slender"), cat: "horror" }, + { name: "Speed Stars", url: NP("speed-stars"), cat: "racing" }, + { name: "That's Not My Neighbor", url: NP("thats-not-my-neighbor"), cat: "horror" }, + { name: "The Man in the Window", url: NP("the-man-in-the-window"), cat: "horror" }, + { name: "ULTRAKILL", url: NP("ultrakill"), cat: "action" }, + { name: "Undertale Yellow", url: NP("undertale-yellow"), cat: "rpg" }, + { name: "WebFishing", url: NP("web-fishing"), cat: "other" }, + { name: "Yandere Simulator", url: NP("yandere-simulator"), cat: "action" }, + { name: "Yume Nikki", url: NP("yume-nikki"), cat: "rpg" }, + + // โ”€โ”€ WEB PORTS โ€” Genizy exclusives (genizy.github.io/web-port) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ + { name: "Minesweeper Plus", url: GP("minesweeperplus"), cat: "puzzle" }, + { name: "Schoolboy Runaway", url: GP("schoolboy-runaway"), cat: "action" }, + { name: "Sonic.exe", url: GP("sonic.exe"), cat: "horror" }, + { name: "Tattletail", url: GP("tattletail"), cat: "horror" }, + { name: "Witch Heart", url: GP("witch-heart"), cat: "rpg" }, + + // โ”€โ”€ MATHTUT0R1NG (mathtut0r1ng.github.io/gamespage/games) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ + { name: "A Dance of Fire and Ice", url: MT("a-dance-of-fire-and-ice"), cat: "music" }, + { name: "Amaze", url: MT("amaze"), cat: "puzzle" }, + { name: "Aquapark.io", url: MT("aquapark.io"), cat: "sports" }, + { name: "Basket Random", url: MT("basket-random"), cat: "sports" }, + { name: "Basketball Stars", url: MT("basketball-stars"), cat: "sports" }, + { name: "Block Blast", url: MT("block-blast"), cat: "puzzle" }, + { name: "Bouncemasters", url: MT("bouncemasters"), cat: "action" }, + { name: "Bowmasters", url: MT("bowmasters"), cat: "action" }, + { name: "Bridge Race", url: MT("bridge-race"), cat: "racing" }, + { name: "Clash Royale", url: MT("clash"), cat: "strategy" }, + { name: "Crossy Road", url: MT("crossy-road"), cat: "platformer" }, + { name: "Eaglercraft 1.12.2", url: MT("eaglercraft-1.12.2"), cat: "other" }, + { name: "Five Nights at Freddy's", url: MT("fnaf"), cat: "horror" }, + { name: "Five Nights at Freddy's 2", url: MT("fnaf2"), cat: "horror" }, + { name: "Five Nights at Freddy's 3", url: MT("fnaf3"), cat: "horror" }, + { name: "Five Nights at Freddy's 4", url: MT("fnaf4"), cat: "horror" }, + { name: "Friday Night Funkin'", url: MT("friday-night-funkin"), cat: "music" }, + { name: "Hill Climb Racing Lite", url: MT("hill-climb-racing-lite"), cat: "racing" }, + { name: "Hollow Knight", url: MT("hollow-knight"), cat: "platformer" }, + { name: "Paper.io 2", url: MT("paper.io-2"), cat: "multiplayer" }, + { name: "Pixel Gun Survival", url: MT("pixel-gun-survival"), cat: "shooter" }, + { name: "R.E.P.O.", url: MT("repo"), cat: "other" }, + { name: "RE:RUN", url: MT("re-run"), cat: "action" }, + { name: "Slither.io", url: MT("slither.io"), cat: "multiplayer" }, + { name: "Solar Smash", url: MT("solar-smash"), cat: "other" }, + { name: "Spiral Roll", url: MT("spiral-roll"), cat: "puzzle" }, + { name: "Sprunki", url: MT("sprunki"), cat: "music" }, + { name: "Super Mario 64", url: MT("super-mario-64"), cat: "platformer" }, + { name: "The Impossible Quiz", url: MT("the-impossible-quiz"), cat: "puzzle" }, + { name: "The World's Hardest Game", url: MT("the-worlds-hardest-game"), cat: "platformer" }, + { name: "They Are Coming", url: MT("they-are-coming"), cat: "shooter" }, + +]; diff --git a/index.html b/index.html new file mode 100644 index 0000000..60f3355 --- /dev/null +++ b/index.html @@ -0,0 +1,74 @@ + + + + + + OMG Games + + + + + + +
+
+ +
+ + + + + + + diff --git a/style.css b/style.css new file mode 100644 index 0000000..596fa06 --- /dev/null +++ b/style.css @@ -0,0 +1,389 @@ +:root { + --bg: #08080f; + --surface: #0e0e1a; + --surface2: #141424; + --border: #1c1c30; + --border2: #252540; + --primary: #7c3aed; + --primary-lo: #7c3aed1a; + --accent: #a78bfa; + --text: #e8e8f4; + --text-dim: #9090b8; + --text-muted: #50507a; + --sidebar-w: 224px; + --bar-h: 50px; + --radius: 10px; + --card-min: 162px; +} + +*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } + +html, body { height: 100%; overflow: hidden; } + +body { + background: var(--bg); + color: var(--text); + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Inter', system-ui, sans-serif; + font-size: 14px; + display: flex; +} + +/* โ”€โ”€โ”€ SIDEBAR โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ + +#sidebar { + width: var(--sidebar-w); + flex-shrink: 0; + background: var(--surface); + border-right: 1px solid var(--border); + display: flex; + flex-direction: column; + overflow: hidden; + height: 100%; +} + +.logo { + display: flex; + align-items: center; + gap: 10px; + padding: 18px 16px 16px; + border-bottom: 1px solid var(--border); + flex-shrink: 0; +} + +.logo-badge { + background: var(--primary); + color: #fff; + font-weight: 900; + font-size: 12px; + letter-spacing: 1.5px; + padding: 4px 9px; + border-radius: 6px; +} + +.logo-label { + font-size: 19px; + font-weight: 700; + color: var(--text); + letter-spacing: -0.3px; +} + +.search-box { + position: relative; + padding: 12px; + flex-shrink: 0; + border-bottom: 1px solid var(--border); +} + +.search-icon { + position: absolute; + left: 22px; + top: 50%; + transform: translateY(-50%); + width: 15px; + height: 15px; + color: var(--text-muted); + pointer-events: none; +} + +#search { + width: 100%; + background: var(--surface2); + border: 1px solid var(--border2); + color: var(--text); + padding: 7px 10px 7px 32px; + border-radius: 8px; + font-size: 13px; + outline: none; + transition: border-color 0.15s; + font-family: inherit; +} + +#search::placeholder { color: var(--text-muted); } + +#search:focus { + border-color: var(--primary); + background: var(--surface); +} + +.sidebar-label { + font-size: 10px; + font-weight: 700; + text-transform: uppercase; + letter-spacing: 1.2px; + color: var(--text-muted); + padding: 12px 16px 6px; + flex-shrink: 0; +} + +#cat-nav { + flex: 1; + overflow-y: auto; + padding: 4px 8px 8px; +} + +.cat-btn { + display: flex; + align-items: center; + gap: 9px; + width: 100%; + padding: 7px 10px; + background: transparent; + border: none; + color: var(--text-dim); + font-size: 13px; + font-family: inherit; + border-radius: 8px; + cursor: pointer; + text-align: left; + transition: background 0.12s, color 0.12s; + user-select: none; +} + +.cat-btn:hover { background: var(--surface2); color: var(--text); } + +.cat-btn.active { + background: var(--primary-lo); + color: var(--accent); +} + +.cat-dot { + width: 8px; + height: 8px; + border-radius: 50%; + flex-shrink: 0; +} + +.cat-name { flex: 1; } + +.cat-num { + font-size: 11px; + color: var(--text-muted); + font-variant-numeric: tabular-nums; +} + +.cat-btn.active .cat-num { color: var(--accent); opacity: 0.7; } + +.sidebar-footer { + padding: 10px 16px; + border-top: 1px solid var(--border); + font-size: 11px; + color: var(--text-muted); + flex-shrink: 0; +} + +/* โ”€โ”€โ”€ MAIN GRID โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ + +#main { + flex: 1; + overflow-y: auto; + height: 100%; + padding: 18px; +} + +#grid { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(var(--card-min), 1fr)); + gap: 10px; +} + +/* โ”€โ”€โ”€ GAME CARD โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ + +.card { + background: var(--surface); + border: 1px solid var(--border); + border-radius: var(--radius); + overflow: hidden; + cursor: pointer; + transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s; +} + +.card:hover { + transform: translateY(-3px); + border-color: var(--primary); + box-shadow: 0 6px 20px #7c3aed28; +} + +.card-thumb { + width: 100%; + aspect-ratio: 16 / 9; + display: flex; + align-items: center; + justify-content: center; + position: relative; + overflow: hidden; +} + +.card-thumb img { + width: 100%; + height: 100%; + object-fit: cover; + display: block; +} + +.card-emoji { + font-size: 2.1rem; + line-height: 1; + filter: drop-shadow(0 2px 8px #0006); + pointer-events: none; + user-select: none; +} + +.card-body { + padding: 8px 10px 10px; +} + +.card-name { + font-size: 12.5px; + font-weight: 600; + color: var(--text); + line-height: 1.3; + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; + margin-bottom: 5px; +} + +.cat-badge { + display: inline-block; + font-size: 10px; + font-weight: 600; + padding: 2px 7px; + border-radius: 5px; + letter-spacing: 0.3px; +} + +/* โ”€โ”€โ”€ EMPTY STATE โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ + +#empty { + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + height: 60vh; + gap: 12px; +} + +.empty-emoji { font-size: 3rem; } +.empty-text { color: var(--text-muted); font-size: 15px; } + +/* โ”€โ”€โ”€ GAME OVERLAY โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ + +#overlay { + position: fixed; + inset: 0; + background: var(--bg); + z-index: 200; + display: flex; + flex-direction: column; +} + +#overlay.hidden { display: none; } + +#overlay-bar { + height: var(--bar-h); + background: var(--surface); + border-bottom: 1px solid var(--border); + display: flex; + align-items: center; + justify-content: space-between; + padding: 0 12px; + gap: 12px; + flex-shrink: 0; +} + +#overlay-left { + display: flex; + align-items: center; + gap: 10px; + min-width: 0; +} + +#overlay-right { display: flex; gap: 6px; flex-shrink: 0; } + +#back-btn, #fullscreen-btn { + background: var(--surface2); + border: 1px solid var(--border2); + color: var(--text-dim); + border-radius: 7px; + cursor: pointer; + display: flex; + align-items: center; + justify-content: center; + padding: 6px; + transition: background 0.12s, color 0.12s; +} + +#back-btn { width: 32px; height: 32px; flex-shrink: 0; } +#fullscreen-btn { width: 32px; height: 32px; } + +#back-btn svg, #fullscreen-btn svg { width: 15px; height: 15px; } + +#back-btn:hover, #fullscreen-btn:hover { + background: var(--border2); + color: var(--text); +} + +#overlay-title { + font-size: 14px; + font-weight: 600; + color: var(--text); + white-space: nowrap; + overflow: hidden; + text-overflow: ellipsis; +} + +#overlay-badge { + font-size: 10px; + font-weight: 600; + padding: 2px 7px; + border-radius: 5px; + white-space: nowrap; + flex-shrink: 0; +} + +#frame-wrap { + flex: 1; + position: relative; + overflow: hidden; +} + +#game-frame { + width: 100%; + height: 100%; + border: none; + display: block; + transition: opacity 0.2s; +} + +#loading { + position: absolute; + inset: 0; + display: none; + align-items: center; + justify-content: center; + background: var(--bg); + z-index: 1; +} + +#loading::after { + content: ''; + width: 36px; + height: 36px; + border: 3px solid var(--border2); + border-top-color: var(--primary); + border-radius: 50%; + animation: spin 0.7s linear infinite; +} + +@keyframes spin { to { transform: rotate(360deg); } } + +/* โ”€โ”€โ”€ SCROLLBAR โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ + +::-webkit-scrollbar { width: 5px; } +::-webkit-scrollbar-track { background: transparent; } +::-webkit-scrollbar-thumb { background: var(--border2); border-radius: 3px; } +::-webkit-scrollbar-thumb:hover { background: var(--primary); } + +/* โ”€โ”€โ”€ UTILITIES โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ */ + +.hidden { display: none !important; } From 47cf25ef3da27be7dd8ea85d780c9b334ecae482 Mon Sep 17 00:00:00 2001 From: Claude Date: Fri, 24 Apr 2026 05:49:35 +0000 Subject: [PATCH 2/3] Rebuild portal: fetch+srcdoc loading, new top-nav UI MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Game loading: - Fetch raw HTML from raw.githubusercontent.com instead of embedding GitHub Pages URLs - Inject so relative game assets (Unity, Construct 2, etc.) still resolve from the original GitHub Pages host - Fallback to direct src= embed if fetch fails New UI: - Fixed top header with logo, centered search bar, live game count - Horizontal scrollable category pills (replaces old sidebar) - Larger game cards (190px min) with play-button hover overlay - Loading spinner + text while game fetches - ESC to close, F for fullscreen games.js: each entry now has { raw, url } โ€” raw for fetching HTML, url as the for asset resolution https://claude.ai/code/session_013KzmqWZCgkEN2uqGkURs4M --- app.js | 182 ++++++++++++++--------- games.js | 417 ++++++++++++++++++++++++++++------------------------- index.html | 60 +++++--- style.css | 332 +++++++++++++++++++++++------------------- 4 files changed, 559 insertions(+), 432 deletions(-) diff --git a/app.js b/app.js index d1a95d6..6e8a1e8 100644 --- a/app.js +++ b/app.js @@ -1,5 +1,6 @@ 'use strict'; +// โ”€โ”€ Category metadata โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ const CAT = { all: { label: 'All Games', color: '#7c3aed', emoji: '๐ŸŽฎ' }, action: { label: 'Action', color: '#ef4444', emoji: 'โšก' }, @@ -18,36 +19,48 @@ const CAT = { other: { label: 'Other', color: '#64748b', emoji: 'โœจ' }, }; +// โ”€โ”€ State โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ let activeCat = 'all'; let searchTerm = ''; - -// โ”€โ”€ Build category nav โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ -function buildNav() { +let openIdx = -1; + +// โ”€โ”€ DOM refs โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ +const $ = id => document.getElementById(id); +const grid = $('grid'); +const empty = $('empty'); +const overlay = $('overlay'); +const frame = $('game-frame'); +const loader = $('loader'); +const catBar = $('cat-bar'); +const searchEl = $('search'); +const clearBtn = $('search-clear'); + +// โ”€โ”€ Category bar โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ +function buildCatBar() { const counts = {}; GAMES.forEach(g => { counts[g.cat] = (counts[g.cat] || 0) + 1; }); - const nav = document.getElementById('cat-nav'); - nav.innerHTML = Object.entries(CAT).map(([id, m]) => { + catBar.innerHTML = Object.entries(CAT).map(([id, m]) => { const n = id === 'all' ? GAMES.length : (counts[id] || 0); if (id !== 'all' && !n) return ''; - return ``; }).join(''); - nav.addEventListener('click', e => { - const btn = e.target.closest('.cat-btn'); + catBar.addEventListener('click', e => { + const btn = e.target.closest('.cat-pill'); if (!btn) return; - nav.querySelectorAll('.cat-btn').forEach(b => b.classList.remove('active')); + catBar.querySelectorAll('.cat-pill').forEach(b => b.classList.remove('active')); btn.classList.add('active'); activeCat = btn.dataset.cat; render(); }); } -// โ”€โ”€ Render game grid โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ +// โ”€โ”€ Game grid โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ function render() { const lower = searchTerm.toLowerCase(); const list = GAMES.filter(g => @@ -55,31 +68,33 @@ function render() { (!lower || g.name.toLowerCase().includes(lower)) ); - const grid = document.getElementById('grid'); - const empty = document.getElementById('empty'); - const count = document.getElementById('count-label'); - - count.textContent = list.length - ? `${list.length} game${list.length === 1 ? '' : 's'}` - : '0 games'; + const n = list.length; + $('header-count').textContent = `${n} game${n === 1 ? '' : 's'}`; - if (!list.length) { + if (!n) { grid.innerHTML = ''; empty.classList.remove('hidden'); return; } empty.classList.add('hidden'); + grid.innerHTML = list.map(g => { const m = CAT[g.cat]; const idx = GAMES.indexOf(g); - const bg = `linear-gradient(135deg, ${m.color}30 0%, ${m.color}0c 100%)`; - return `
+ const bg = `linear-gradient(145deg, ${m.color}2e 0%, ${m.color}0a 100%)`; + return `
${g.thumb ? `${g.name}` : `${m.emoji}` } +
+ + + + +
${g.name}
@@ -89,66 +104,99 @@ function render() { }).join(''); } -// โ”€โ”€ Open game in overlay โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ -function openGame(idx) { - const g = GAMES[idx]; - const m = CAT[g.cat]; - const frame = document.getElementById('game-frame'); - const loading = document.getElementById('loading'); - const overlay = document.getElementById('overlay'); +// Delegated click โ€” attached once +grid.addEventListener('click', e => { + const card = e.target.closest('.card'); + if (card) openGame(+card.dataset.idx); +}); - document.getElementById('overlay-title').textContent = g.name; +// โ”€โ”€ Game loading โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ +async function openGame(idx) { + const g = GAMES[idx]; + const m = CAT[g.cat]; + openIdx = idx; - const badge = document.getElementById('overlay-badge'); - badge.textContent = m.label; - badge.style.background = m.color + '22'; - badge.style.color = m.color; + $('overlay-name').textContent = g.name; + const badge = $('overlay-badge'); + badge.textContent = m.label; + badge.style.background = m.color + '22'; + badge.style.color = m.color; - loading.style.display = 'flex'; + overlay.classList.remove('hidden'); + loader.style.display = 'flex'; frame.style.opacity = '0'; - frame.src = g.url; + frame.removeAttribute('srcdoc'); + frame.src = ''; + + try { + const res = await fetch(g.raw); + if (!res.ok) throw new Error(`HTTP ${res.status}`); + let html = await res.text(); + + // Inject so relative asset paths resolve against the GitHub Pages host + const baseTag = ``; + if (/]*)?>/.test(html)) { + html = html.replace(/]*)?>/i, m => m + '\n' + baseTag); + } else if (/]*)?>/.test(html)) { + html = html.replace(/]*)?>/i, m => m + '\n' + baseTag + ''); + } else { + html = '' + baseTag + '\n' + html; + } + + frame.srcdoc = html; + } catch (err) { + // Fallback: embed the GitHub Pages URL directly + console.warn(`[OMG] srcdoc fetch failed for "${g.name}", falling back to src:`, err); + frame.src = g.url; + } frame.onload = () => { - loading.style.display = 'none'; - frame.style.opacity = '1'; + loader.style.display = 'none'; + frame.style.opacity = '1'; }; - - overlay.classList.remove('hidden'); - document.body.style.overflow = 'hidden'; } -function closeOverlay() { - document.getElementById('overlay').classList.add('hidden'); - document.getElementById('game-frame').src = ''; - document.getElementById('loading').style.display = 'none'; - document.body.style.overflow = ''; +function closeGame() { + overlay.classList.add('hidden'); + frame.removeAttribute('srcdoc'); + frame.src = ''; + loader.style.display = 'none'; + frame.style.opacity = '0'; + openIdx = -1; } function goFullscreen() { - const el = document.getElementById('game-frame'); - if (el.requestFullscreen) el.requestFullscreen(); - else if (el.webkitRequestFullscreen) el.webkitRequestFullscreen(); + const el = frame; + (el.requestFullscreen || el.webkitRequestFullscreen || el.mozRequestFullScreen + || function(){}).call(el); } -// โ”€โ”€ Init โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ -function init() { - buildNav(); +// โ”€โ”€ Search โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ +searchEl.addEventListener('input', e => { + searchTerm = e.target.value; + clearBtn.classList.toggle('hidden', !searchTerm); render(); +}); - document.getElementById('search').addEventListener('input', e => { - searchTerm = e.target.value; - render(); - }); +clearBtn.addEventListener('click', () => { + searchEl.value = ''; + searchTerm = ''; + clearBtn.classList.add('hidden'); + searchEl.focus(); + render(); +}); - // Delegated click on grid โ€” attached once - document.getElementById('grid').addEventListener('click', e => { - const card = e.target.closest('.card'); - if (card) openGame(+card.dataset.idx); - }); +// โ”€โ”€ Controls โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ +$('close-btn').addEventListener('click', closeGame); +$('fs-btn').addEventListener('click', goFullscreen); - document.getElementById('back-btn').addEventListener('click', closeOverlay); - document.getElementById('fullscreen-btn').addEventListener('click', goFullscreen); - document.addEventListener('keydown', e => { if (e.key === 'Escape') closeOverlay(); }); -} +document.addEventListener('keydown', e => { + if (!overlay.classList.contains('hidden')) { + if (e.key === 'Escape') closeGame(); + if (e.key === 'f' || e.key === 'F') goFullscreen(); + } +}); -init(); +// โ”€โ”€ Boot โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ +buildCatBar(); +render(); diff --git a/games.js b/games.js index f25317f..1aed814 100644 --- a/games.js +++ b/games.js @@ -1,207 +1,228 @@ -// URL helpers for each game source -const UGS = n => `https://bubbls.github.io/UGS-Assets/${encodeURIComponent(n)}/`; -const NG = n => `https://neruvy.github.io/neruvy-games/games/${n}/`; -const NP = n => `https://neruvy.github.io/web-port/${n}/`; -const GP = n => `https://genizy.github.io/web-port/${n}/`; -const MT = n => `https://mathtut0r1ng.github.io/gamespage/games/${n}/`; +// Each helper returns { raw, url } where: +// raw = raw.githubusercontent.com URL (fetch the HTML from here) +// url = github.io URL (used as so relative assets resolve) + +const UGS = n => ({ + raw: `https://raw.githubusercontent.com/bubbls/UGS-Assets/main/${encodeURIComponent(n)}/index.html`, + url: `https://bubbls.github.io/UGS-Assets/${encodeURIComponent(n)}/` +}); + +const NG = n => ({ + raw: `https://raw.githubusercontent.com/Neruvy/neruvy-games/main/games/${n}/index.html`, + url: `https://neruvy.github.io/neruvy-games/games/${n}/` +}); + +const NP = n => ({ + raw: `https://raw.githubusercontent.com/Neruvy/web-port/main/${n}/index.html`, + url: `https://neruvy.github.io/web-port/${n}/` +}); + +const GP = n => ({ + raw: `https://raw.githubusercontent.com/genizy/web-port/main/${n}/index.html`, + url: `https://genizy.github.io/web-port/${n}/` +}); + +const MT = n => ({ + raw: `https://raw.githubusercontent.com/mathtut0r1ng/mathtut0r1ng.github.io/main/gamespage/games/${n}/index.html`, + url: `https://mathtut0r1ng.github.io/gamespage/games/${n}/` +}); const GAMES = [ - // โ”€โ”€ UGS-ASSETS (bubbls.github.io/UGS-Assets) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ - { name: "1 Date Danger", url: UGS("1-date-danger"), cat: "horror" }, - { name: "10 Minutes Till Dawn", url: UGS("10minutestilldawn"), cat: "shooter" }, - { name: "2 Minute Football", url: UGS("2 minute football"), cat: "sports" }, - { name: "2-3-4 Player Games", url: UGS("2-3-4-player-game"), cat: "multiplayer" }, - { name: "2 DOOM", url: UGS("2doom"), cat: "action" }, - { name: "3Dash", url: UGS("3dash"), cat: "platformer" }, - { name: "5B", url: UGS("5b"), cat: "other" }, - { name: "Antimatter Dimensions", url: UGS("Antimatter Dimensions"), cat: "idle" }, - { name: "Bumper Cars Soccer", url: UGS("BUMPER CARS SOCCER"), cat: "sports" }, - { name: "Blightborne", url: UGS("Blightborne"), cat: "rpg" }, - { name: "Burrito Bison", url: UGS("BurritoBison-main"), cat: "action" }, - { name: "Endacopia", url: UGS("Endacopia"), cat: "horror" }, - { name: "Five Nights at Wario's", url: UGS("FNAW-main"), cat: "horror" }, - { name: "Five Nights at Osaka's", url: UGS("Five Nights at Osaka's"), cat: "horror" }, - { name: "Insomniary", url: UGS("Insomniary"), cat: "horror" }, - { name: "Stickman GTA", url: UGS("STICKMAN GTA"), cat: "action" }, - { name: "Stickman Clash", url: UGS("Stickman Clash"), cat: "action" }, - { name: "A Day in the Office", url: UGS("a day in the office"), cat: "other" }, - { name: "Adventure Capitalist", url: UGS("adventure-capitalist"), cat: "idle" }, - { name: "Ages of Conflict", url: UGS("ages of conflict"), cat: "strategy" }, - { name: "Airline Tycoon Idle", url: UGS("airline-tycoon-idle"), cat: "idle" }, - { name: "Alien Sky Invasion", url: UGS("alien sky invasion"), cat: "shooter" }, - { name: "Amazing Rope Police", url: UGS("amazing-strange-rope-police-vice-spider"), cat: "action" }, - { name: "Amidst the Sky", url: UGS("amidst the sky"), cat: "platformer" }, - { name: "Angry Birds", url: UGS("angry-bird"), cat: "puzzle" }, - { name: "Apes vs Helium", url: UGS("apesvshelium"), cat: "action" }, - { name: "Arcade Volley", url: UGS("arcade-volley"), cat: "sports" }, - { name: "Archesspalago", url: UGS("archesspalago"), cat: "puzzle" }, - { name: "Astro Survivors", url: UGS("astro survivors"), cat: "shooter" }, - { name: "Aviamaster", url: UGS("aviamaster"), cat: "strategy" }, - { name: "Babel Tower", url: UGS("babel tower"), cat: "puzzle" }, - { name: "Backrooms 2D", url: UGS("backrooms 2D"), cat: "horror" }, - { name: "Bacon May Die", url: UGS("bacon may die"), cat: "action" }, - { name: "Bad Parenting", url: UGS("bad-parenting"), cat: "platformer" }, - { name: "Baldi's Basics", url: UGS("baldis-basics"), cat: "horror" }, - { name: "Baldi's Decomp", url: UGS("baldi decomp"), cat: "horror" }, - { name: "Ballistic", url: UGS("ballistic"), cat: "shooter" }, - { name: "Banana Poker", url: UGS("banana poker"), cat: "other" }, - { name: "Barry Has a Secret", url: UGS("barry has a secret"), cat: "horror" }, - { name: "Baseball Bros", url: UGS("baseball bros"), cat: "sports" }, - { name: "Basket Stars", url: UGS("basket stars"), cat: "sports" }, - { name: "Basketball Superstars", url: UGS("basketball-superstars"), cat: "sports" }, - { name: "Beach Boxing Sim", url: UGS("beach-boxing-sim"), cat: "sports" }, - { name: "Bearsus", url: UGS("bearsus"), cat: "action" }, - { name: "Ben 10 Super Slammer", url: UGS("ben 10 super slammer"), cat: "action" }, - { name: "BFNSU", url: UGS("bfnsu"), cat: "horror" }, - { name: "Big 2048", url: UGS("big 2048"), cat: "puzzle" }, - { name: "Big Flappy Tower", url: UGS("big flappy tower"), cat: "platformer" }, - { name: "Block Miner", url: UGS("block-miner"), cat: "idle" }, - { name: "BlockPost", url: UGS("blockpost"), cat: "shooter" }, - { name: "Blumgi Racers", url: UGS("blumgi racers"), cat: "racing" }, - { name: "Blumgi Rocket", url: UGS("blumgi-rocket"), cat: "racing" }, - { name: "Bounce Back", url: UGS("bounce back"), cat: "puzzle" }, - { name: "Bouncy Basketball", url: UGS("bouncy basketball"), cat: "sports" }, - { name: "Bouncy Motors", url: UGS("bouncy motors"), cat: "racing" }, - { name: "Bounty of One", url: UGS("bounty of one"), cat: "rpg" }, - { name: "Brawl 3D", url: UGS("brawl-3d"), cat: "multiplayer" }, - { name: "Bullet Force", url: UGS("bullet-force-multiplayer"), cat: "shooter" }, - { name: "Capybara Clicker", url: UGS("capybara clicker"), cat: "idle" }, - { name: "Cat Mario", url: UGS("cat mario"), cat: "platformer" }, - { name: "Cats Love Cake 2", url: UGS("cats love cake 2"), cat: "puzzle" }, - { name: "Cave Chaos 2", url: UGS("cave chaos 2"), cat: "platformer" }, - { name: "Cheese Chompers 3", url: UGS("cheese chompers 3"), cat: "action" }, - { name: "Chicken Gun", url: UGS("chicken-gun"), cat: "shooter" }, - { name: "Choppy Orc", url: UGS("choppy orc"), cat: "platformer" }, - { name: "CircloO 2", url: UGS("circlo02"), cat: "puzzle" }, - { name: "Clash of Vikings", url: UGS("clashofvikings"), cat: "strategy" }, - { name: "Cookie Clicker", url: UGS("cookieclicker"), cat: "idle" }, - { name: "Crazy Cars", url: UGS("crazy cars"), cat: "racing" }, - { name: "Crazy Chicken 3D", url: UGS("crazy chicken 3D"), cat: "shooter" }, - { name: "Creature Card Idle", url: UGS("creature-card-idle"), cat: "idle" }, - { name: "CS:GO Surf", url: UGS("csgo surf"), cat: "action" }, - { name: "Dandy's World Clicker", url: UGS("dandys-world-clicker"), cat: "idle" }, - { name: "D-Blox", url: UGS("dblox"), cat: "puzzle" }, - { name: "Deepest Sword", url: UGS("deepest sword"), cat: "rpg" }, - { name: "Demon Bluff", url: UGS("demon-bluff"), cat: "horror" }, - { name: "Die in the Dungeon", url: UGS("die in the dungeon"), cat: "rpg" }, - { name: "Dimension Incident", url: UGS("dimension-incident"), cat: "horror" }, - { name: "Doge Miner 2", url: UGS("doge miner 2"), cat: "idle" }, - { name: "Doodle Jump", url: UGS("doodle jump"), cat: "platformer" }, - { name: "Down the Mountain", url: UGS("down the mountain"), cat: "action" }, - { name: "Dragon", url: UGS("dragon"), cat: "action" }, - { name: "Drift Hunters", url: UGS("drift-hunters"), cat: "racing" }, - { name: "Drunken Duel", url: UGS("drunken duel"), cat: "multiplayer" }, - { name: "Duck Life 6", url: UGS("duck life 6"), cat: "rpg" }, - { name: "Duck Life Battle", url: UGS("duck life battle"), cat: "rpg" }, - { name: "Dungeon Deck", url: UGS("dungeondeck"), cat: "strategy" }, - { name: "Eagle Ride", url: UGS("eagle ride"), cat: "racing" }, - { name: "Edy's Car Simulator", url: UGS("edys car simulator"), cat: "racing" }, - { name: "Eggy Car", url: UGS("eggy car"), cat: "racing" }, - { name: "Elastic Man", url: UGS("elasticman"), cat: "other" }, - { name: "Escalating Duel", url: UGS("escalating-duel"), cat: "action" }, - { name: "Escape Road 2", url: UGS("escaperoad2city"), cat: "racing" }, + // โ”€โ”€ UGS-ASSETS (bubbls/UGS-Assets) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ + { name: "1 Date Danger", ...UGS("1-date-danger"), cat: "horror" }, + { name: "10 Minutes Till Dawn", ...UGS("10minutestilldawn"), cat: "shooter" }, + { name: "2 Minute Football", ...UGS("2 minute football"), cat: "sports" }, + { name: "2-3-4 Player Games", ...UGS("2-3-4-player-game"), cat: "multiplayer" }, + { name: "2 DOOM", ...UGS("2doom"), cat: "action" }, + { name: "3Dash", ...UGS("3dash"), cat: "platformer" }, + { name: "5B", ...UGS("5b"), cat: "other" }, + { name: "Antimatter Dimensions", ...UGS("Antimatter Dimensions"), cat: "idle" }, + { name: "Bumper Cars Soccer", ...UGS("BUMPER CARS SOCCER"), cat: "sports" }, + { name: "Blightborne", ...UGS("Blightborne"), cat: "rpg" }, + { name: "Burrito Bison", ...UGS("BurritoBison-main"), cat: "action" }, + { name: "Endacopia", ...UGS("Endacopia"), cat: "horror" }, + { name: "Five Nights at Wario's", ...UGS("FNAW-main"), cat: "horror" }, + { name: "Five Nights at Osaka's", ...UGS("Five Nights at Osaka's"), cat: "horror" }, + { name: "Insomniary", ...UGS("Insomniary"), cat: "horror" }, + { name: "Stickman GTA", ...UGS("STICKMAN GTA"), cat: "action" }, + { name: "Stickman Clash", ...UGS("Stickman Clash"), cat: "action" }, + { name: "A Day in the Office", ...UGS("a day in the office"), cat: "other" }, + { name: "Adventure Capitalist", ...UGS("adventure-capitalist"), cat: "idle" }, + { name: "Ages of Conflict", ...UGS("ages of conflict"), cat: "strategy" }, + { name: "Airline Tycoon Idle", ...UGS("airline-tycoon-idle"), cat: "idle" }, + { name: "Alien Sky Invasion", ...UGS("alien sky invasion"), cat: "shooter" }, + { name: "Amazing Rope Police", ...UGS("amazing-strange-rope-police-vice-spider"), cat: "action" }, + { name: "Amidst the Sky", ...UGS("amidst the sky"), cat: "platformer" }, + { name: "Angry Birds", ...UGS("angry-bird"), cat: "puzzle" }, + { name: "Apes vs Helium", ...UGS("apesvshelium"), cat: "action" }, + { name: "Arcade Volley", ...UGS("arcade-volley"), cat: "sports" }, + { name: "Archesspalago", ...UGS("archesspalago"), cat: "puzzle" }, + { name: "Astro Survivors", ...UGS("astro survivors"), cat: "shooter" }, + { name: "Aviamaster", ...UGS("aviamaster"), cat: "strategy" }, + { name: "Babel Tower", ...UGS("babel tower"), cat: "puzzle" }, + { name: "Backrooms 2D", ...UGS("backrooms 2D"), cat: "horror" }, + { name: "Bacon May Die", ...UGS("bacon may die"), cat: "action" }, + { name: "Bad Parenting", ...UGS("bad-parenting"), cat: "platformer" }, + { name: "Baldi's Basics", ...UGS("baldis-basics"), cat: "horror" }, + { name: "Baldi's Decomp", ...UGS("baldi decomp"), cat: "horror" }, + { name: "Ballistic", ...UGS("ballistic"), cat: "shooter" }, + { name: "Banana Poker", ...UGS("banana poker"), cat: "other" }, + { name: "Barry Has a Secret", ...UGS("barry has a secret"), cat: "horror" }, + { name: "Baseball Bros", ...UGS("baseball bros"), cat: "sports" }, + { name: "Basket Stars", ...UGS("basket stars"), cat: "sports" }, + { name: "Basketball Superstars", ...UGS("basketball-superstars"), cat: "sports" }, + { name: "Beach Boxing Sim", ...UGS("beach-boxing-sim"), cat: "sports" }, + { name: "Bearsus", ...UGS("bearsus"), cat: "action" }, + { name: "Ben 10 Super Slammer", ...UGS("ben 10 super slammer"), cat: "action" }, + { name: "BFNSU", ...UGS("bfnsu"), cat: "horror" }, + { name: "Big 2048", ...UGS("big 2048"), cat: "puzzle" }, + { name: "Big Flappy Tower", ...UGS("big flappy tower"), cat: "platformer" }, + { name: "Block Miner", ...UGS("block-miner"), cat: "idle" }, + { name: "BlockPost", ...UGS("blockpost"), cat: "shooter" }, + { name: "Blumgi Racers", ...UGS("blumgi racers"), cat: "racing" }, + { name: "Blumgi Rocket", ...UGS("blumgi-rocket"), cat: "racing" }, + { name: "Bounce Back", ...UGS("bounce back"), cat: "puzzle" }, + { name: "Bouncy Basketball", ...UGS("bouncy basketball"), cat: "sports" }, + { name: "Bouncy Motors", ...UGS("bouncy motors"), cat: "racing" }, + { name: "Bounty of One", ...UGS("bounty of one"), cat: "rpg" }, + { name: "Brawl 3D", ...UGS("brawl-3d"), cat: "multiplayer" }, + { name: "Bullet Force", ...UGS("bullet-force-multiplayer"), cat: "shooter" }, + { name: "Capybara Clicker", ...UGS("capybara clicker"), cat: "idle" }, + { name: "Cat Mario", ...UGS("cat mario"), cat: "platformer" }, + { name: "Cats Love Cake 2", ...UGS("cats love cake 2"), cat: "puzzle" }, + { name: "Cave Chaos 2", ...UGS("cave chaos 2"), cat: "platformer" }, + { name: "Cheese Chompers 3", ...UGS("cheese chompers 3"), cat: "action" }, + { name: "Chicken Gun", ...UGS("chicken-gun"), cat: "shooter" }, + { name: "Choppy Orc", ...UGS("choppy orc"), cat: "platformer" }, + { name: "CircloO 2", ...UGS("circlo02"), cat: "puzzle" }, + { name: "Clash of Vikings", ...UGS("clashofvikings"), cat: "strategy" }, + { name: "Cookie Clicker", ...UGS("cookieclicker"), cat: "idle" }, + { name: "Crazy Cars", ...UGS("crazy cars"), cat: "racing" }, + { name: "Crazy Chicken 3D", ...UGS("crazy chicken 3D"), cat: "shooter" }, + { name: "Creature Card Idle", ...UGS("creature-card-idle"), cat: "idle" }, + { name: "CS:GO Surf", ...UGS("csgo surf"), cat: "action" }, + { name: "Dandy's World Clicker", ...UGS("dandys-world-clicker"), cat: "idle" }, + { name: "D-Blox", ...UGS("dblox"), cat: "puzzle" }, + { name: "Deepest Sword", ...UGS("deepest sword"), cat: "rpg" }, + { name: "Demon Bluff", ...UGS("demon-bluff"), cat: "horror" }, + { name: "Die in the Dungeon", ...UGS("die in the dungeon"), cat: "rpg" }, + { name: "Dimension Incident", ...UGS("dimension-incident"), cat: "horror" }, + { name: "Doge Miner 2", ...UGS("doge miner 2"), cat: "idle" }, + { name: "Doodle Jump", ...UGS("doodle jump"), cat: "platformer" }, + { name: "Down the Mountain", ...UGS("down the mountain"), cat: "action" }, + { name: "Dragon", ...UGS("dragon"), cat: "action" }, + { name: "Drift Hunters", ...UGS("drift-hunters"), cat: "racing" }, + { name: "Drunken Duel", ...UGS("drunken duel"), cat: "multiplayer" }, + { name: "Duck Life 6", ...UGS("duck life 6"), cat: "rpg" }, + { name: "Duck Life Battle", ...UGS("duck life battle"), cat: "rpg" }, + { name: "Dungeon Deck", ...UGS("dungeondeck"), cat: "strategy" }, + { name: "Eagle Ride", ...UGS("eagle ride"), cat: "racing" }, + { name: "Edy's Car Simulator", ...UGS("edys car simulator"), cat: "racing" }, + { name: "Eggy Car", ...UGS("eggy car"), cat: "racing" }, + { name: "Elastic Man", ...UGS("elasticman"), cat: "other" }, + { name: "Escalating Duel", ...UGS("escalating-duel"), cat: "action" }, + { name: "Escape Road 2", ...UGS("escaperoad2city"), cat: "racing" }, - // โ”€โ”€ NERUVY GAMES (neruvy.github.io/neruvy-games/games) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ - { name: "1v1.LOL", url: NG("1v1lol"), cat: "shooter" }, - { name: "2048", url: NG("2048"), cat: "puzzle" }, - { name: "ARC", url: NG("ARC"), cat: "action" }, - { name: "Bob the Robber 2", url: NG("bob-the-robber-2"), cat: "adventure" }, - { name: "Drive Mad", url: NG("drive-mad"), cat: "racing" }, - { name: "Granny", url: NG("granny"), cat: "horror" }, - { name: "Moto X3M", url: NG("moto-x3m"), cat: "racing" }, - { name: "Moto X3M 2", url: NG("motox3m2"), cat: "racing" }, - { name: "Poly Track", url: NG("poly-track"), cat: "racing" }, - { name: "Retro Bowl", url: NG("retro-bowl"), cat: "sports" }, - { name: "Run 3", url: NG("run-3"), cat: "platformer" }, - { name: "Slope", url: NG("slope"), cat: "action" }, - { name: "Smash Karts", url: NG("smash-karts"), cat: "racing" }, - { name: "Snow Rider 3D", url: NG("snow-rider"), cat: "racing" }, - { name: "Survival Race", url: NG("survival-race"), cat: "racing" }, - { name: "Time Shooter 3: SWAT", url: NG("time-shooter-3-swat"), cat: "shooter" }, - { name: "Vex 3", url: NG("vex3"), cat: "platformer" }, - { name: "Vex 4", url: NG("vex4"), cat: "platformer" }, - { name: "Vex 5", url: NG("vex5"), cat: "platformer" }, - { name: "Vex 6", url: NG("vex6"), cat: "platformer" }, - { name: "Vex 7", url: NG("vex7"), cat: "platformer" }, + // โ”€โ”€ NERUVY GAMES (Neruvy/neruvy-games) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ + { name: "1v1.LOL", ...NG("1v1lol"), cat: "shooter" }, + { name: "2048", ...NG("2048"), cat: "puzzle" }, + { name: "ARC", ...NG("ARC"), cat: "action" }, + { name: "Bob the Robber 2", ...NG("bob-the-robber-2"), cat: "adventure" }, + { name: "Drive Mad", ...NG("drive-mad"), cat: "racing" }, + { name: "Granny", ...NG("granny"), cat: "horror" }, + { name: "Moto X3M", ...NG("moto-x3m"), cat: "racing" }, + { name: "Moto X3M 2", ...NG("motox3m2"), cat: "racing" }, + { name: "Poly Track", ...NG("poly-track"), cat: "racing" }, + { name: "Run 3", ...NG("run-3"), cat: "platformer" }, + { name: "Slope", ...NG("slope"), cat: "action" }, + { name: "Smash Karts", ...NG("smash-karts"), cat: "racing" }, + { name: "Snow Rider 3D", ...NG("snow-rider"), cat: "racing" }, + { name: "Survival Race", ...NG("survival-race"), cat: "racing" }, + { name: "Time Shooter 3: SWAT", ...NG("time-shooter-3-swat"), cat: "shooter" }, + { name: "Vex 3", ...NG("vex3"), cat: "platformer" }, + { name: "Vex 4", ...NG("vex4"), cat: "platformer" }, + { name: "Vex 5", ...NG("vex5"), cat: "platformer" }, + { name: "Vex 6", ...NG("vex6"), cat: "platformer" }, + { name: "Vex 7", ...NG("vex7"), cat: "platformer" }, - // โ”€โ”€ WEB PORTS โ€” Neruvy (neruvy.github.io/web-port) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ - { name: "Amanda the Adventurer", url: NP("amanda-the-adventurer"), cat: "horror" }, - { name: "Andy's Apple Farm", url: NP("andys-apple-farm"), cat: "adventure" }, - { name: "Baldi's Basics Plus", url: NP("baldi-plus"), cat: "horror" }, - { name: "Baldi's Basics Remastered", url: NP("baldi-remaster"), cat: "horror" }, - { name: "Bendy and the Ink Machine", url: NP("bendy"), cat: "horror" }, - { name: "BERGENTRUCK", url: NP("bergentruck"), cat: "adventure" }, - { name: "BLOODMONEY!", url: NP("bloodmoney"), cat: "action" }, - { name: "Buckshot Roulette", url: NP("buckshot-roulette"), cat: "horror" }, - { name: "Class of '09", url: NP("class-of-09"), cat: "adventure" }, - { name: "Cuphead", url: NP("cuphead"), cat: "action" }, - { name: "Dead Plate", url: NP("dead-plate"), cat: "horror" }, - { name: "The Deadseat", url: NP("deadseat"), cat: "horror" }, - { name: "Deltarune", url: NP("deltatraveler"), cat: "rpg" }, - { name: "Do Not Take This Cat Home", url: NP("donottakethiscathome"), cat: "horror" }, - { name: "Fears to Fathom", url: NP("fears-to-fathom"), cat: "horror" }, - { name: "Getting Over It", url: NP("getting-over-it"), cat: "platformer" }, - { name: "Happy Sheepies", url: NP("happy-sheepies"), cat: "puzzle" }, - { name: "Hotline Miami", url: NP("hotline-miami"), cat: "action" }, - { name: "Human Expenditure Program", url: NP("human-expenditure-program"), cat: "horror" }, - { name: "Jelly Drift", url: NP("jelly-drift"), cat: "racing" }, - { name: "Karlson", url: NP("karlson"), cat: "action" }, - { name: "Kindergarten", url: NP("kindergarten"), cat: "adventure" }, - { name: "Lacy's Flash Games", url: NP("lacysflashgames"), cat: "other" }, - { name: "Milkman Karlson", url: NP("milkman-karlson"), cat: "action" }, - { name: "OMORI", url: NP("omori-fixed"), cat: "rpg" }, - { name: "People Playground", url: NP("people-playground"), cat: "other" }, - { name: "Pizza Tower", url: NP("pizza-tower"), cat: "platformer" }, - { name: "Raft", url: NP("raft"), cat: "adventure" }, - { name: "Slender: The 8 Pages", url: NP("slender"), cat: "horror" }, - { name: "Speed Stars", url: NP("speed-stars"), cat: "racing" }, - { name: "That's Not My Neighbor", url: NP("thats-not-my-neighbor"), cat: "horror" }, - { name: "The Man in the Window", url: NP("the-man-in-the-window"), cat: "horror" }, - { name: "ULTRAKILL", url: NP("ultrakill"), cat: "action" }, - { name: "Undertale Yellow", url: NP("undertale-yellow"), cat: "rpg" }, - { name: "WebFishing", url: NP("web-fishing"), cat: "other" }, - { name: "Yandere Simulator", url: NP("yandere-simulator"), cat: "action" }, - { name: "Yume Nikki", url: NP("yume-nikki"), cat: "rpg" }, + // โ”€โ”€ WEB PORTS โ€” Neruvy (Neruvy/web-port) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ + { name: "Amanda the Adventurer", ...NP("amanda-the-adventurer"), cat: "horror" }, + { name: "Andy's Apple Farm", ...NP("andys-apple-farm"), cat: "adventure" }, + { name: "Baldi's Basics Plus", ...NP("baldi-plus"), cat: "horror" }, + { name: "Baldi's Basics Remastered", ...NP("baldi-remaster"), cat: "horror" }, + { name: "Bendy and the Ink Machine", ...NP("bendy"), cat: "horror" }, + { name: "BERGENTRUCK", ...NP("bergentruck"), cat: "adventure" }, + { name: "BLOODMONEY!", ...NP("bloodmoney"), cat: "action" }, + { name: "Buckshot Roulette", ...NP("buckshot-roulette"), cat: "horror" }, + { name: "Class of '09", ...NP("class-of-09"), cat: "adventure" }, + { name: "Cuphead", ...NP("cuphead"), cat: "action" }, + { name: "Dead Plate", ...NP("dead-plate"), cat: "horror" }, + { name: "The Deadseat", ...NP("deadseat"), cat: "horror" }, + { name: "Deltarune", ...NP("deltatraveler"), cat: "rpg" }, + { name: "Do Not Take This Cat Home", ...NP("donottakethiscathome"), cat: "horror" }, + { name: "Fears to Fathom", ...NP("fears-to-fathom"), cat: "horror" }, + { name: "Getting Over It", ...NP("getting-over-it"), cat: "platformer" }, + { name: "Happy Sheepies", ...NP("happy-sheepies"), cat: "puzzle" }, + { name: "Hotline Miami", ...NP("hotline-miami"), cat: "action" }, + { name: "Human Expenditure Program", ...NP("human-expenditure-program"), cat: "horror" }, + { name: "Jelly Drift", ...NP("jelly-drift"), cat: "racing" }, + { name: "Karlson", ...NP("karlson"), cat: "action" }, + { name: "Kindergarten", ...NP("kindergarten"), cat: "adventure" }, + { name: "Lacy's Flash Games", ...NP("lacysflashgames"), cat: "other" }, + { name: "Milkman Karlson", ...NP("milkman-karlson"), cat: "action" }, + { name: "OMORI", ...NP("omori-fixed"), cat: "rpg" }, + { name: "People Playground", ...NP("people-playground"), cat: "other" }, + { name: "Pizza Tower", ...NP("pizza-tower"), cat: "platformer" }, + { name: "Raft", ...NP("raft"), cat: "adventure" }, + { name: "Slender: The 8 Pages", ...NP("slender"), cat: "horror" }, + { name: "Speed Stars", ...NP("speed-stars"), cat: "racing" }, + { name: "That's Not My Neighbor", ...NP("thats-not-my-neighbor"), cat: "horror" }, + { name: "The Man in the Window", ...NP("the-man-in-the-window"), cat: "horror" }, + { name: "ULTRAKILL", ...NP("ultrakill"), cat: "action" }, + { name: "Undertale Yellow", ...NP("undertale-yellow"), cat: "rpg" }, + { name: "WebFishing", ...NP("web-fishing"), cat: "other" }, + { name: "Yandere Simulator", ...NP("yandere-simulator"), cat: "action" }, + { name: "Yume Nikki", ...NP("yume-nikki"), cat: "rpg" }, - // โ”€โ”€ WEB PORTS โ€” Genizy exclusives (genizy.github.io/web-port) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ - { name: "Minesweeper Plus", url: GP("minesweeperplus"), cat: "puzzle" }, - { name: "Schoolboy Runaway", url: GP("schoolboy-runaway"), cat: "action" }, - { name: "Sonic.exe", url: GP("sonic.exe"), cat: "horror" }, - { name: "Tattletail", url: GP("tattletail"), cat: "horror" }, - { name: "Witch Heart", url: GP("witch-heart"), cat: "rpg" }, + // โ”€โ”€ WEB PORTS โ€” Genizy exclusives (genizy/web-port) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ + { name: "Minesweeper Plus", ...GP("minesweeperplus"), cat: "puzzle" }, + { name: "Schoolboy Runaway", ...GP("schoolboy-runaway"), cat: "action" }, + { name: "Sonic.exe", ...GP("sonic.exe"), cat: "horror" }, + { name: "Tattletail", ...GP("tattletail"), cat: "horror" }, + { name: "Witch Heart", ...GP("witch-heart"), cat: "rpg" }, - // โ”€โ”€ MATHTUT0R1NG (mathtut0r1ng.github.io/gamespage/games) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ - { name: "A Dance of Fire and Ice", url: MT("a-dance-of-fire-and-ice"), cat: "music" }, - { name: "Amaze", url: MT("amaze"), cat: "puzzle" }, - { name: "Aquapark.io", url: MT("aquapark.io"), cat: "sports" }, - { name: "Basket Random", url: MT("basket-random"), cat: "sports" }, - { name: "Basketball Stars", url: MT("basketball-stars"), cat: "sports" }, - { name: "Block Blast", url: MT("block-blast"), cat: "puzzle" }, - { name: "Bouncemasters", url: MT("bouncemasters"), cat: "action" }, - { name: "Bowmasters", url: MT("bowmasters"), cat: "action" }, - { name: "Bridge Race", url: MT("bridge-race"), cat: "racing" }, - { name: "Clash Royale", url: MT("clash"), cat: "strategy" }, - { name: "Crossy Road", url: MT("crossy-road"), cat: "platformer" }, - { name: "Eaglercraft 1.12.2", url: MT("eaglercraft-1.12.2"), cat: "other" }, - { name: "Five Nights at Freddy's", url: MT("fnaf"), cat: "horror" }, - { name: "Five Nights at Freddy's 2", url: MT("fnaf2"), cat: "horror" }, - { name: "Five Nights at Freddy's 3", url: MT("fnaf3"), cat: "horror" }, - { name: "Five Nights at Freddy's 4", url: MT("fnaf4"), cat: "horror" }, - { name: "Friday Night Funkin'", url: MT("friday-night-funkin"), cat: "music" }, - { name: "Hill Climb Racing Lite", url: MT("hill-climb-racing-lite"), cat: "racing" }, - { name: "Hollow Knight", url: MT("hollow-knight"), cat: "platformer" }, - { name: "Paper.io 2", url: MT("paper.io-2"), cat: "multiplayer" }, - { name: "Pixel Gun Survival", url: MT("pixel-gun-survival"), cat: "shooter" }, - { name: "R.E.P.O.", url: MT("repo"), cat: "other" }, - { name: "RE:RUN", url: MT("re-run"), cat: "action" }, - { name: "Slither.io", url: MT("slither.io"), cat: "multiplayer" }, - { name: "Solar Smash", url: MT("solar-smash"), cat: "other" }, - { name: "Spiral Roll", url: MT("spiral-roll"), cat: "puzzle" }, - { name: "Sprunki", url: MT("sprunki"), cat: "music" }, - { name: "Super Mario 64", url: MT("super-mario-64"), cat: "platformer" }, - { name: "The Impossible Quiz", url: MT("the-impossible-quiz"), cat: "puzzle" }, - { name: "The World's Hardest Game", url: MT("the-worlds-hardest-game"), cat: "platformer" }, - { name: "They Are Coming", url: MT("they-are-coming"), cat: "shooter" }, + // โ”€โ”€ MATHTUT0R1NG (mathtut0r1ng.github.io) โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€โ”€ + { name: "A Dance of Fire and Ice", ...MT("a-dance-of-fire-and-ice"), cat: "music" }, + { name: "Amaze", ...MT("amaze"), cat: "puzzle" }, + { name: "Aquapark.io", ...MT("aquapark.io"), cat: "sports" }, + { name: "Basket Random", ...MT("basket-random"), cat: "sports" }, + { name: "Basketball Stars", ...MT("basketball-stars"), cat: "sports" }, + { name: "Block Blast", ...MT("block-blast"), cat: "puzzle" }, + { name: "Bouncemasters", ...MT("bouncemasters"), cat: "action" }, + { name: "Bowmasters", ...MT("bowmasters"), cat: "action" }, + { name: "Bridge Race", ...MT("bridge-race"), cat: "racing" }, + { name: "Clash Royale", ...MT("clash"), cat: "strategy" }, + { name: "Crossy Road", ...MT("crossy-road"), cat: "platformer" }, + { name: "Eaglercraft 1.12.2", ...MT("eaglercraft-1.12.2"), cat: "other" }, + { name: "Five Nights at Freddy's", ...MT("fnaf"), cat: "horror" }, + { name: "Five Nights at Freddy's 2", ...MT("fnaf2"), cat: "horror" }, + { name: "Five Nights at Freddy's 3", ...MT("fnaf3"), cat: "horror" }, + { name: "Five Nights at Freddy's 4", ...MT("fnaf4"), cat: "horror" }, + { name: "Friday Night Funkin'", ...MT("friday-night-funkin"), cat: "music" }, + { name: "Hill Climb Racing Lite", ...MT("hill-climb-racing-lite"), cat: "racing" }, + { name: "Hollow Knight", ...MT("hollow-knight"), cat: "platformer" }, + { name: "Paper.io 2", ...MT("paper.io-2"), cat: "multiplayer" }, + { name: "Pixel Gun Survival", ...MT("pixel-gun-survival"), cat: "shooter" }, + { name: "R.E.P.O.", ...MT("repo"), cat: "other" }, + { name: "RE:RUN", ...MT("re-run"), cat: "action" }, + { name: "Slither.io", ...MT("slither.io"), cat: "multiplayer" }, + { name: "Solar Smash", ...MT("solar-smash"), cat: "other" }, + { name: "Spiral Roll", ...MT("spiral-roll"), cat: "puzzle" }, + { name: "Sprunki", ...MT("sprunki"), cat: "music" }, + { name: "Super Mario 64", ...MT("super-mario-64"), cat: "platformer" }, + { name: "The Impossible Quiz", ...MT("the-impossible-quiz"), cat: "puzzle" }, + { name: "The World's Hardest Game", ...MT("the-worlds-hardest-game"), cat: "platformer" }, + { name: "They Are Coming", ...MT("they-are-coming"), cat: "shooter" }, ]; diff --git a/index.html b/index.html index 60f3355..a602430 100644 --- a/index.html +++ b/index.html @@ -8,49 +8,62 @@ - + + +
+ +
+