CGChat

The CodinGame web-chat without CodinGame.
安裝腳本 ?
換行
// ==UserScript==
// @name        CGChat
// @namespace   BlaiseEbuth
// @match       https://www.codingame.com/*
// @grant       none
// @version     1.3.0
// @author      BlaiseEbuth
// @description The CodinGame web-chat without CodinGame.
// @icon https://i.imgur.com/E39sADi.png
// ==/UserScript==
 
/*
CGChat is an externalization as a standalone window of the CodinGame's web chat.
Copyright (C) 2020  BlaiseEbuth
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program.  If not, see <https://www.gnu.org/licenses/>.
*/
 
'use strict'; // Be strict !
 
// A map to store the clicked links.
var openedLinks = {};
 
// A function that set "CGChat" as window's title.
function setTitle()
{
    // The window's title is defined by the page's <title> tag.
    var title = document.getElementsByTagName("title");
 
    if(title.length == 1) // If the page is loaded.
    {
        // We change the title.
        title[0].innerHTML = "CGChat";
    }
}
 
// A function that clean the connexion page.
function signin()
{
    // Select all elements that are not related to the connexion process:
    var nav = document.getElementById("navigation"); // The navigation bar.
    var cookies = document.getElementsByClassName("cg-cookies-banner"); // The cookies notification.
    var footer = document.getElementsByClassName("cg-login-form_footer"); // The login form footer that allow to create a new account.
    
    // Hide all of this uselles stuff.
    if(nav != null)nav.style.display = "none";
    if(cookies.length == 1)cookies[0].style.display = "none";
    if(footer.length == 1)footer[0].style.display = "none";
}
 
// A function that adapt the height of the textarea depending on its content.
function adjustMessageBox()
{
    // We get the textarea.
    var messBox = document.getElementById("chat-input");
  
    // We compute the height difference between the textarea and its content.
    var heightDiff = messBox.scrollHeight - messBox.clientHeight;
  
    // If there is a difference:
    if(heightDiff > 0)
    {
        // We get the CSS height value of the textarea.
        var messBoxStyle = window.getComputedStyle(messBox);
        var messBoxHeight = messBoxStyle.getPropertyValue("height");
        var intHeight = parseInt(messBoxHeight.substr(0, messBoxHeight.length - 2));
      
        // If this height is lesser than 150px (the max height we allow):
        if(intHeight < 150)
        {
            // We get the absolute bottom position of the messages zone.
            var messWrap = document.getElementsByClassName("messages-wrap")[0];
            var messWrapStyle = window.getComputedStyle(messWrap);
            var messWrapBot = messWrapStyle.getPropertyValue("bottom");
 
            // We compute the new height of the textarea and the one of the chat footer which contain it.
            var newHeight = intHeight + heightDiff + 10;
            var newBottom = parseInt(messWrapBot.substr(0, messWrapBot.length - 2)) + heightDiff + 10;
 
            // We adjust the size and the position of the elements.
            messWrap.style.bottom = newBottom.toString() + "px";
            document.getElementsByClassName("footer")[0].style.height = newBottom.toString() + "px";
            document.getElementsByClassName("send-form")[0].style.height = newHeight.toString() + "px";
            messBox.style.height = newHeight.toString() + "px";
 
            // We get the messages container.
            var messView = document.getElementById("messages");
 
            // And we set the scroll bar to the end.
            messView.scrollTop = messView.scrollHeight;
        }
    }
    
    // If the textarea is empty:
    if(messBox.value == "")
    {
        // We reset all the values to the defaults.
        document.getElementsByClassName("messages-wrap")[0].style.bottom = "125px";
        document.getElementsByClassName("footer")[0].style.height = "125px";
        document.getElementsByClassName("send-form")[0].style.height = "45px";
        messBox.style.height = "45px";
    }
}
 
// The function that manage all the chat-related actions.
function chat()
{
    // If we are in the application and jquerry is not loaded yet.
    if(window.isNwjs && document.getElementById("jquery") == null)
    {
        // We get the page's <head> element.
        var head = document.getElementsByTagName("head");
 
        if(head.length == 1) // If head is defined.
        {
            // We create a <script> element.
            var jquery = document.createElement("script");
            // With the "jquerry" id.
            jquery.id = "jquery";
            jquery.type = "text/javascript";
            jquery.src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js";
            // And we add it to the page's <head>.
            head[0].appendChild(jquery);
        }
    }
 
    // We select the navigation bar and the site's content.
    var leftCol = document.getElementsByClassName("left-column");
    var nav = document.getElementById("navigation");
 
    // If they exist we delete them.
    if(leftCol.length == 1)leftCol[0].style.display = "none"; 
    if(nav != null)nav.style.display = "none";
    
    // We select the chat's containers.
    var wrapper = document.getElementsByClassName("chat-wrapper");
    var chat = document.getElementById("chat");
 
    // If they exist, we make them occupy the full window.
    if(wrapper.length == 1)wrapper[0].style.cssText = "width:100% !important"; 
    if(chat != null)chat.style.cssText = "display:flex !important";
    
    // We check if the chat is minimized.
    var small = document.getElementsByClassName("small-chat");
 
    // If yes, we maximize it.
    if(small.length == 1)small[0].click();
 
    // We select the chat itself.
    var chatClass = document.getElementsByClassName("chat");
    // And some of its elements which need to be removed:
    var discord = document.getElementsByTagName("cg-discord-disclaimer"); // The discord disclaimer.
    var hideWrapper = document.getElementsByClassName("hide-wrapper"); // The "Hide/Show" button.
    var help = document.getElementsByClassName("help-center"); // The help center.
 
    // We make the chat occupy 100% of its container.
    if(chatClass.length == 1)chatClass[0].style.width = "100%";
    // And we delete the useless stuff.
    if(discord.length == 1)discord[0].style.display = "none";
    if(hideWrapper.length == 1)hideWrapper[0].style.display = "none";
    if(help.length == 1)help[0].style.display = "none";
 
    // We get the settings popup.
    var settings = document.getElementsByClassName("settings-popup");
 
    if(settings.length == 1) // If it exist.
    {
        for(var i = 0; i < 3; i++)
        {
             // We delete the 3 first elements to only keep the theme settings.
            settings[0].children[i].style.display = "none";
        }
    }
    
    // If the refresh button does not exist yet.
    if(document.getElementById("refreshButton") == null)
    {   
        // We create it.
        var refreshButton = document.createElement("span");
        refreshButton.id = "refreshButton";
        refreshButton.style.cssText = 
          "display : inline-block;\
          width : 15px;\
          height : 15px;\
          margin-left : 8px;\
          background-image : url('https://i.imgur.com/rDqWLLQ.png');\
          background-size : contain;";
      
        // As well as a wrapper, for display purposes.
        var buttonWrapper = document.createElement("span");
        buttonWrapper.classList.add("button-wrapper");
        buttonWrapper.setAttribute("onClick", "window.location.reload(true)");
        buttonWrapper.title = "Reload";
      
        // We get the chat's settings bar.
        var settingsBar = document.getElementsByClassName("settings-bar");
      
        // And we add the button and its wrapper to it.
        buttonWrapper.appendChild(refreshButton);
        settingsBar[0].appendChild(buttonWrapper);
    }
 
    // We get the messages container.
    var messages = document.getElementById("messages");
    
    if(messages != null) // If it is defined.
    {
        // We make the messages occupy 100% of their container.
        messages.style.width = "100%";
        
        if(window.isNwjs) // If in the application.
        {
          // We select all the links in the messages.
          var links = messages.getElementsByTagName("a");
 
          if(links.length > 0) // If there's at least one link.
          {
              // We set a click event on each of those links.
              $('a[target=_blank]').on('click', function()
              {
                  // If the link is not in the openedLinks map.
                  if(!(this.href in openedLinks))
                  {
                      // We open it in a browser.
                      require('nw.gui').Shell.openExternal(this.href);
                      // And we add the URL in the map with a value of 100.
                      openedLinks[this.href] = 100;
                  }
                  return false;
              });
          }
        }
    }
  
    adjustMessageBox();
}
 
// The main() function.
var main = function()
{
    // If we don't know if we are in the application or the browser extension.
    if(window.isNwjs == null)
    {
        try
        {
            // We call a NWJS specific knack and if it is defined we set the 'isNwjs' variable to true.
            window.isNwjs = (typeof require('nw.gui') !== "undefined");
        }
        catch(e)
        {
            // If not, we set the 'isNwjs' variable to false;
            window.isNwjs = false;
        }
    }
  
    setTitle(); // Change the window's title.
 
    for(var l in openedLinks) // For each URL in the map.
    {
        openedLinks[l]--; // We decrease its countdown.
 
        if(openedLinks[l] == 0) // If the countdown reach 0.
        {
            // We delete the URL from the map.
            delete openedLinks[l];
        }
    }
 
    // Get the current URI.
    var path = window.location.pathname;
 
    if(path  == "/start") // If not logged in.
    {
        // Go to the connexion page.
        window.location.replace("/signin");
    }
    else if(path == "/signin") // If on the connexion page.
    {
        // Call the signin() function.
        signin();
    }
    else // In other cases.
    {
        // Lets chat !
        chat();
    }
}
 
// Repeat the main() function every 100ms.
setInterval(main, 100);