Lichess.org TV++

Advanced Lichess.org TV page.

이 스크립트를 설치하려면 Tampermonkey, Greasemonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

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

이 스크립트를 설치하려면 Tampermonkey 또는 Violentmonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey 또는 Userscripts와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 Tampermonkey와 같은 확장 프로그램이 필요합니다.

이 스크립트를 설치하려면 유저 스크립트 관리자 확장 프로그램이 필요합니다.

(이미 유저 스크립트 관리자가 설치되어 있습니다. 설치를 진행합니다!)

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 Stylus와 같은 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

이 스타일을 설치하려면 유저 스타일 관리자 확장 프로그램이 필요합니다.

(이미 유저 스타일 관리자가 설치되어 있습니다. 설치를 진행합니다!)

// ==UserScript==
// @name         Lichess.org TV++
// @version      0.1
// @description  Advanced Lichess.org TV page.
// @author       [email protected]
// @match        http://*.lichess.org/tv
// @grant        none
// @namespace https://greasyfork.org/users/6473
// ==/UserScript==

$(function() {

    // Player colors adding to left of username
    
    var config = {
 		piece: {
            style: "top: auto !important; left: 5px !important; width: 20px !important; height: 20px !important; opacity: 0.5 !important;"
 		},
        table: {
            style: "margin-left: 15px !important;"
 		}
	};
    
    var main_player_table = $(".table_wrap > .table > .username");
	var second_player_table = $(".table_wrap > .table > .table_inner > .username");
    var main_player_color = "white";
    var second_player_color = "black";
    
    if (/black/i.test(main_player_table.attr("class"))) {
       	main_player_color = "black";
        second_player_color = "white"
    }
    
    main_player_table.before("<div class=\"cg-piece pawn "+main_player_color+"\" style=\""+config.piece.style+"\"></div>");
    second_player_table.before("<div class=\"cg-piece pawn "+second_player_color+"\" style=\""+config.piece.style+"\"></div>");
    
    main_player_table.children("a").removeAttr("data-icon");
    second_player_table.children("a").removeAttr("data-icon");
    
    main_player_table.children("a").attr("style", config.table.style);
    second_player_table.children("a").attr("style", config.table.style);
    
    
    
    // Set visible on/off TV watchers & save visible info to local storage
    
    var config = {
        watchers: {
            style: "opacity: 0.5 !important;"
 		}
	};
    
    var watchers_table = $(".under_chat > .watchers");
    
    watchers_table.before("<input type=\"checkbox\" value=\"on\" id=\"watchers_visible\" style=\""+config.watchers.style+"\" checked><label for=\"watchers_visible\"> Show watchers</label>");
    
    if (localStorage.getItem("watchers_visible") == null) {
        localStorage.setItem("watchers_visible", "on");
    }
    
    $("#watchers_visible").change(function() {
        if($(this).is(":checked")) {
            localStorage.setItem("watchers_visible", "on");
        	watchers_table.removeAttr("style");
       		watchers_table.attr("style", "visibility: visible");
        }
        else {
            localStorage.setItem("watchers_visible", "off");
            watchers_table.removeAttr("style");
       		watchers_table.attr("style", "visibility: hidden");
        }
    });

    if (localStorage.getItem("watchers_visible") == "on") {
       watchers_table.removeAttr("style");
       watchers_table.attr("style", "visibility: visible");
    }
    else {
       $("#watchers_visible").removeAttr("checked");
       watchers_table.removeAttr("style");
       watchers_table.attr("style", "visibility: hidden");
    }
    
});