☰

GarticFlix V2

gartic odalarını listeler ve izlemenizi sağlar

// ==UserScript==
// @name         GarticFlix V2
// @namespace    http://tampermonkey.net/
// @version      v.3.6
// @description  gartic odalarını listeler ve izlemenizi sağlar
// @author       Akíra & ygn
// @match        https://gartic.io/*
// @icon         https://www.google.com/s2/favicons?domain=gartic.io
// @grant        none
// ==/UserScript==

if (window.location.href.indexOf("?L") !== -1) {
    let leftContent = document.createElement("div");
    leftContent.setAttribute("style", "position:fixed; top:0; left:0; width:30%; height:100vh; background:#111; border-right:5px solid gold; padding:10px; box-sizing:border-box; overflow-y:auto; color:#f1f1f1; z-index:9999;");
    leftContent.classList.add("leftcontent");

    let rightContent = document.createElement("div");
    rightContent.setAttribute("style", "position:fixed; top:0; left:30%; width:70%; height:100vh; background:#111; padding:10px; box-sizing:border-box; z-index:9999;");
    rightContent.classList.add("rightcontent");

    let headerIframe = `<div style="text-align:center; color:orange; font-weight:bold; margin-bottom:10px;">GARTICFLIX by Akíra</div>`;

    let themeSelect = `
        <select style='width:100%; padding:10px; margin-bottom:10px; background:#333; color:#f1f1f1; border-radius:5px;' onchange='window.refreshrooms()' class='themeselect'>
            <option value="">Tema Seç</option>
            <option value="&subject[]=30">Diğer</option>
            <option value="&subject[]=28">Anime</option>
            <option value="&subject[]=1">Genel</option>
            <option value="&subject[]=12">Oyunlar</option>
            <option value="&subject[]=24">Youtuber</option>
            <option value="&subject[]=11">LoL</option>
            <option value="&subject[]=2">Hayvanlar</option>
            <option value="&subject[]=31">Minecraft</option>
            <option value="&subject[]=4">Yiyecekler</option>
            <option value="&subject[]=9">Animasyon</option>
            <option value="&subject[]=35">Naruto</option>
            <option value="&subject[]=16">Bayraklar</option>
            <option value="&subject[]=10">Şarkılar</option>
            <option value="&subject[]=17">Futbol</option>
            <option value="&subject[]=26">Logo</option>
            <option value="&subject[]=5">Fiiller</option>
            <option value="&subject[]=33">FNAF</option>
        </select>`;

    let langSelect = `
    <select style='width:100%; padding:10px; margin-bottom:10px; background:#333; color:#f1f1f1; border-radius:5px;' onchange='window.refreshrooms()' class='langselect'>
        <option value="8">Dil Seç</option>
        <option value="23">Azərbaycanca</option>
        <option value="45">Bahasa Indonesia</option>
        <option value="11">Čeština</option>
        <option value="14">Deutsch</option>
        <option value="2">English</option>
        <option value="3">Español</option>
        <option value="4">Français</option>
        <option value="6">Italiano</option>
        <option value="44">Magyar</option>
        <option value="18">Nederlands</option>
        <option value="10">Polski</option>
        <option value="1">Português</option>
        <option value="58">Română</option>
        <option value="22">Slovenčina</option>
        <option value="13">Tiếng Việt</option>
        <option value="21">български език</option>
        <option value="7">Русский</option>
        <option value="40">עברית</option>
        <option value="19">العربية</option>
        <option value="34">فارسی</option>
        <option value="12">ภาษาไทย</option>
        <option value="16">中文 (简化字)</option>
        <option value="9">中文 (臺灣)</option>
        <option value="17">中文 (香港)</option>
        <option value="15">日本語</option>
        <option value="20">한국어</option>
        <option value="26">Afrikaans</option>
        <option value="55">Bahasa Melayu</option>
        <option value="30">Català</option>
        <option value="31">Dansk</option>
        <option value="33">Eesti</option>
        <option value="67">Esperanto</option>
        <option value="36">Føroyskt</option>
        <option value="37">Gaeilge</option>
        <option value="38">Galego</option>
        <option value="43">Hrvatski</option>
        <option value="46">Íslenska</option>
        <option value="66">Kurdî</option>
        <option value="52">Latviešu</option>
        <option value="50">Lëtzebuergesch</option>
        <option value="68">Lietuvių</option>
        <option value="56">Malti</option>
        <option value="53">Mакедонски</option>
        <option value="65">Norsk</option>
        <option value="61">Shqip</option>
        <option value="59">Slovenščina</option>
        <option value="35">Suomi</option>
        <option value="24">Svenska</option>
        <option value="62">Türkmen</option>
        <option value="64">Yorùbá</option>
        <option value="32">Ελληνικά</option>
        <option value="27">Беларуская</option>
        <option value="29">Босански</option>
        <option value="54">Монгол Хэл</option>
        <option value="60">Српски</option>
        <option value="63">Українська</option>
        <option value="49">Қазақ Tілі</option>
        <option value="42">Հայերեն</option>
        <option value="41">हिन्दी</option>
        <option value="28">বাংলা</option>
        <option value="39">ગુજરાતી</option>
        <option value="51">ພາສາລາວ</option>
        <option value="57">မြန်မာစကား</option>
        <option value="47">ქართული</option>
        <option value="25">ኣማርኛ</option>
        <option value="48">ភាសាខ្មែរ</option>
    </select>`;


    let searchInput = "<input type='text' style='width:100%; padding:10px; margin-bottom:10px; background:#333; color:#f1f1f1; border-radius:5px;' placeholder='Oda Ara..' oninput='window.refreshrooms()' class='searchparam' />";
    let roomList = "<div class='rooms' style='overflow-y:scroll; height:80%;'></div>";

    leftContent.innerHTML = headerIframe + themeSelect + langSelect + searchInput + roomList;
    document.body.appendChild(leftContent);
    document.body.appendChild(rightContent);

    function _(x) { return document.querySelector(x); }
    function _a(x) { return document.querySelectorAll(x); }

    window.filterRooms = (rooms, search) => {
        return rooms.filter(room => room.code.toLowerCase().includes(search.toLowerCase()));
    }

    window.refreshrooms = (search = "") => {
        const themeValue = _(".themeselect").value;
        const langValue = _(".langselect").value;
        fetch("https://gartic.io/req/list?search=" + search + "&language[]=" + langValue + themeValue).then(response => response.json()).then(data => {
            let roomdatas = window.filterRooms(data, search);

            let favorites = JSON.parse(localStorage.getItem('favorites')) || [];
            let favoriteRooms = roomdatas.filter(room => favorites.includes(room.code));
            let otherRooms = roomdatas.filter(room => !favorites.includes(room.code));

            _(".rooms").innerHTML = "";

            const createRoomElement = (room) => `
                <div class="room" style="position:relative; display:flex; flex-direction:column; background:#222; font-size:11pt; color:#f1f1f1; border-radius:20px; margin-top:10px; padding:20px; font-weight:bold; cursor:pointer;" onclick='window.openInIframe("https://gartic.io/${room.code}/viewer", "${room.code}")' data-code="${room.code}">
                    <img class="roomico" src="https://gartic.io/static/images/subjects/${room.subject}.svg" style="width:40px; height:40px; margin-right:10px;" />
                    <div class="roominfo">#${room.code.slice(-3)} ${room.quant}/${room.max}</div>
                    <input type="checkbox" id="favorite-${room.code}" style="position:absolute; top:10px; right:10px;" ${favorites.includes(room.code) ? 'checked' : ''} title="Favori olarak işaretle" onclick='window.toggleFavorite("${room.code}", event)'/>
                    <button style="position:absolute; bottom:10px; right:10px; padding:5px 10px; background:gold; color:black; border:none; border-radius:5px; cursor:pointer;" onclick='window.openRoom("${room.code}", event)'>►</button>
                </div>`;

            _(".rooms").innerHTML += favoriteRooms.map(createRoomElement).join('');
            _(".rooms").innerHTML += otherRooms.map(createRoomElement).join('');

            roomdatas.forEach(room => window.getUsers(room.code));
        });
    }

    window.getUsers = (roomCode) => {
        let ws = new WebSocket("wss://server01.gartic.io/socket.io/?EIO=3&transport=websocket");
        ws.onopen = () => {
            ws.send('42[12,{"v":20000,"platform":0,"sala":"' + roomCode.slice(-4) + '"}]');
        }
        ws.onmessage = (msg) => {
            if (msg.data[4] == "5") {
                let data = JSON.parse(msg.data.slice(2));
                if (data[0] == 5) {
                    data[5].forEach(user => {
                        let avatarURL = user.foto ? user.foto : `https://gartic.io/static/images/avatar/svg/${user.avatar}.svg`;
                        let userElement = `
                            <div style="margin:2px;position:relative;">
                                <img src="${avatarURL}" style="width:30px;height:30px;cursor:pointer;" />
                            </div>`;
                        document.querySelector(`.room[data-code="${roomCode}"] .users`).innerHTML += userElement;
                    });
                    ws.close();
                }
            }
        }
    }

    window.openInIframe = (url, roomCode) => {
        _(".rightcontent").innerHTML = `${headerIframe}<iframe src="${url}" style="width:100%; height:90%; border:none; border-radius:20px; box-shadow:10px 10px 10px black; border:5px solid gold;"></iframe>`;
        document.querySelectorAll('.room .watching-indicator').forEach(el => el.remove());
        const roomElement = document.querySelector(`.room[data-code="${roomCode}"]`);
        if (roomElement) {
            roomElement.insertAdjacentHTML('beforeend', '<div class="watching-indicator" style="color: gold; margin-top: 10px;">Oda izleniyor</div>');
        }
    }

    window.openRoom = (roomCode, event) => {
        event.stopPropagation();
        window.open(`https://gartic.io/${roomCode}`, "_blank");
    }

    window.toggleFavorite = (roomCode, event) => {
        event.stopPropagation();
        let favorites = JSON.parse(localStorage.getItem('favorites')) || [];
        if (favorites.includes(roomCode)) {
            favorites = favorites.filter(code => code !== roomCode);
        } else {
            favorites.push(roomCode);
        }
        localStorage.setItem('favorites', JSON.stringify(favorites));
        window.refreshrooms();
    }

    window.refreshrooms();
}