GarticFlix V2

gartic odalarını listeler ve izlemenizi sağlar

目前為 2024-09-08 提交的版本,檢視 最新版本

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

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

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

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

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

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

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

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

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

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

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

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

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

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

// ==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();
}