Poki Always Fullscreen Button

Voeg fullscreen-knop toe bij Poki-games die hem missen (robustere versie). 🕹️

您需要先安裝使用者腳本管理器擴展,如 TampermonkeyGreasemonkeyViolentmonkey 之後才能安裝該腳本。

You will need to install an extension such as Tampermonkey to install this script.

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyViolentmonkey 後才能安裝該腳本。

您需要先安裝使用者腳本管理器擴充功能,如 TampermonkeyUserscripts 後才能安裝該腳本。

你需要先安裝一款使用者腳本管理器擴展,比如 Tampermonkey,才能安裝此腳本

您需要先安裝使用者腳本管理器擴充功能後才能安裝該腳本。

(我已經安裝了使用者腳本管理器,讓我安裝!)

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展,比如 Stylus,才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

你需要先安裝一款使用者樣式管理器擴展後才能安裝此樣式

(我已經安裝了使用者樣式管理器,讓我安裝!)

// ==UserScript==
// @name         Poki Always Fullscreen Button 
// @namespace    https://poki.com/
// @version      1.1
// @description  Voeg fullscreen-knop toe bij Poki-games die hem missen (robustere versie). 🕹️
// @match        *://poki.com/*
// @match        *://www.poki.com/*
// @match        *://poki.com/nl/g/*
// @match        *://www.poki.com/nl/*
// @run-at       document-end
// @license MIT 
// ==/UserScript==

(function() {
    'use strict';

    function createFullscreenButtonHtml() {
        return `
        <button type="button" id="fullscreen-button" class="HPn_GzeLxs8_4nNebuj1 phlaiC_iad_lookW5__d" aria-label="Volledig scherm">
            <div class="tqh57qBcKxMV9EdZQoAb">
                <svg width="24" height="24" xmlns="http://www.w3.org/2000/svg" class="AUcJqk5uLaoXL0jqRGuH">
                    <use href="#enterFullscreenIcon"></use>
                </svg>
            </div>
            <div class="aAJE6r6D5rwwQuTmZqYG">
                <span class="L6WSODmebiIqJJOEi46E Vlw13G6cUIC6W9LiGC_X"></span>
                <span class="L6WSODmebiIqJJOEi46E tz2DEu5qBC9Yd6hJGjoW">Volledig scherm</span>
            </div>
        </button>`;
    }

    function addFullscreenButtonIfMissing() {
        try {
            // zoek de header-container van het spel (gebaseerd op jouw voorbeelden)
            const gameHeader = document.querySelector('.J91n1ymJasoch_FZq89b');
            if (!gameHeader) return false;

            // stop als knop al bestaat
            if (gameHeader.querySelector('#fullscreen-button')) return true;

            // zoek het element waar we vóór willen invoegen (de "we zijn terug..." div in jouw snippets)
            const insertBeforeEl = gameHeader.querySelector('.gCaHtnVxpqX6wzDLyVYL');

            // als niet gevonden, fallback: voeg aan het einde van header toe
            if (insertBeforeEl) {
                insertBeforeEl.insertAdjacentHTML('beforebegin', createFullscreenButtonHtml());
            } else {
                gameHeader.insertAdjacentHTML('beforeend', createFullscreenButtonHtml());
            }

            const btn = gameHeader.querySelector('#fullscreen-button');
            if (!btn) return false;

            // functionaliteit: probeer echte Fullscreen API, anders "nep" fullscreen via CSS
            btn.addEventListener('click', () => {
                // prefer een iframe binnen het speelvlak; probeer een paar plausibele selectors
                const iframeCandidates = Array.from(document.querySelectorAll('iframe'));
                const iframe = iframeCandidates.find(f => f.offsetWidth > 100) || iframeCandidates[0];

                if (iframe) {
                    // als browser Fullscreen API toestaat
                    const requestFull = iframe.requestFullscreen || iframe.webkitRequestFullscreen || iframe.mozRequestFullScreen || iframe.msRequestFullscreen;
                    if (requestFull) {
                        try { requestFull.call(iframe); }
                        catch (e) {
                            // fallback to CSS if API errors
                            applyFakeFullscreen(iframe);
                        }
                    } else {
                        applyFakeFullscreen(iframe);
                    }
                } else {
                    console.warn('[Poki Userscript] Geen iframe gevonden om fullscreen te maken.');
                }
            });

            console.log('[Poki Userscript] Fullscreen-knop toegevoegd ✅');
            return true;
        } catch (err) {
            console.error('[Poki Userscript] Fout bij toevoegen fullscreen-knop:', err);
            return false;
        }
    }

    function applyFakeFullscreen(el) {
        el.style.position = 'fixed';
        el.style.top = '0';
        el.style.left = '0';
        el.style.width = '100%';
        el.style.height = '100%';
        el.style.zIndex = '2147483647';
        el.style.background = '#000';
    }

    // Observeer DOM — Poki laadt dynamisch, dus we blijven proberen tot het succeed
    const observer = new MutationObserver(() => {
        // probeer toevoegen; als succesvol, kunnen we blijven (maar we laten observer lopen in geval van SPA-navigatie)
        addFullscreenButtonIfMissing();
    });

    observer.observe(document.documentElement || document.body, { childList: true, subtree: true });

    // ook 1x proberen direct
    setTimeout(addFullscreenButtonIfMissing, 800);
})();