TagPro_Chat_Icons.user.js

// ==UserScript==
// @name            TagPro Chat Icons
// @description     Adds a row of icons below the chat input box
// @version         0.1.1
// @include         http://tagpro-*.koalabeast.com:*
// @include         http://tangent.jukejuice.com:*
// @include         http://*.newcompte.fr*
// @require         http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js
// @require         http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js
// @resource        jqUI_CSS  http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css
// @grant           GM_getValue
// @grant           GM_setValue
// @grant           GM_deleteValue
// @grant           GM_addStyle
// @grant           GM_getResourceText
// @author          nabby
// ==/UserScript==

// @updateURL       https://gist.github.com/nabbynz/0f1180e6f3a5225a14f2/raw/TagPro_Chat_Icons.user.js
// @downloadURL     https://gist.github.com/nabbynz/0f1180e6f3a5225a14f2/raw/TagPro_Chat_Icons.user.js

console.log('START: ' + GM_info.script.name + ' (v' + GM_info.script.version + ' by ' + GM_info.script.author + ')');

var WhichPageAreWeOn = function(){
    if (window.location.port) { //In a real game
        return('ingame');
    } else if (document.URL.indexOf('/games/find') > 0) { //Joining page
        return('joining');
    } else if ($('#userscript-home').length) { //Chosen server homepage
        return('server');
    } else if (document.URL.indexOf('/profile/') > 0) {
        if ($('#saveSettings').length) {
            return('profile'); //Profile page and logged in
        } else {
            return('profileNotOurs'); //Profile page, but not our one (or we're logged out)
        }
    } else if (document.URL.indexOf('/groups') > 0) {
        return('groups');
    } else if (document.URL.indexOf('/boards') > 0) {
        return('boards');
    } else if (document.URL.indexOf('/maps') > 0) {
        return('maps');
    } else if (document.URL.indexOf('/settings') > 0) {
        return('settings');
    }
};
var PageLoc = WhichPageAreWeOn();

var jqUI_CssSrc = GM_getResourceText("jqUI_CSS");
GM_addStyle (jqUI_CssSrc);

tagpro.ready(function() {
    setTimeout(function() {
        var quickIcons = [{title:'💕', message:'💕'},
                          {title:'💙', message:'💙'},
                          {title:'😛', message:'😛'},
                          {title:'😲', message:'😲'},
                          {title:'😎', message:'😎'},
                          {title:'😐', message:'😐'},
                          {title:'😕', message:'😕'},
                          {title:'😒', message:'😒'},
                          {title:'😜', message:'😜'},

                          {title:'🙋', message:'🙋'},
                          {title:'🙌', message:'🙌'},
                          {title:'🙎', message:'🙎'},
                          {title:'🙍', message:'🙍'},

                          {title:'✨', message:'✨'},
                          {title:'⚡', message:'⚡'},
                          {title:'👙', message:'👙'},
                          {title:'🐍', message:'🐍'},
                          {title:'🌈', message:'🌈'},
                          {title:'👻', message:'👻'},
                          {title:'👽', message:'👽'},
                          {title:'👿', message:'👿'},
                          {title:'👹', message:'👹'},
                          {title:'🎃', message:'🎃'},
                          {title:'🍌', message:'🍌'},
                          {title:'🍩', message:'🍩'},
                          {title:'🍭', message:'🍭'},
                          {title:'💋', message:'💋'},
                          {title:'🕵', message:'🕵'},
                          {title:'♿', message:'♿'},
                          {title:'🕱', message:'🕱'},
                          {title:'🔜', message:'🔜'},
                          {title:'👏', message:'👏'},
                          {title:'👌', message:'👌'},
                          {title:'👍', message:'👍'},
                          {title:'☮', message:'☮'},
                          {title:'2v3', message:'It\'s 2v3 - can we wait please?'},
                          {title:'つ ◕_◕ ༽つ', message:'つ ◕_◕ ༽つ'},
                         ];
        $('#chat').show(0);
        var chatTop = $('#chat').position().top + 28;
        var chatLeft = $('#chat').position().left;
        $('#chat').hide(0);
        
        var lastClick = 0;
        var title = '';

        $('#chat').after('<div id="CS_QuickIcons" style="position:absolute; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; height:'+GM_getValue('size', {height:100}).height+'px; width:'+GM_getValue('size', {width:300}).width+'px; left:'+GM_getValue('position', {left:chatLeft}).left+'px; top:'+GM_getValue('position', {top:chatTop}).top+'px; color:#fff; background:#600; border:1px solid #a00; border-radius:3px"></div>');
        for (var i=0; i<quickIcons.length; i++) {
            title = '';
            if (quickIcons[i].message.length > quickIcons[i].title.length) title = quickIcons[i].message;
            $('#CS_QuickIcons').append('<div class="CS_QI_Item" data-messagenumber="'+i+'" title="'+title+'">' + quickIcons[i].title + '</div>');
        }

        $('#CS_QuickIcons').find('.CS_QI_Item').on('click', function() {
            if ($('#chat').is(':visible')) {
                $('#chat').prop('value', $('#chat').prop('value') + quickIcons[$(this).data('messagenumber')].message );
                $('#chat').focus();
            } else if (Date.now() - lastClick > 1500) {
                tagpro.socket.emit('chat', { 'toAll':true, 'message':quickIcons[$(this).data('messagenumber')].message } );
                lastClick = Date.now();
            }
        }); 
        
        $('#CS_QuickIcons').resizable({
            delay: 50,
            distance: 3,
            containment: 'document',
            handles: 'n, e, s, w, ne, se, sw, nw',
            resize: function(event, ui) {
                $('#CS_QuickIcons').css('border', '1px dashed white');
            },
            stop: function(event, ui) {
                GM_setValue('size', {'width':ui.size.width, 'height':ui.size.height});
                GM_setValue('position', {'top':ui.position.top, 'left':ui.position.left});
                $('#CS_QuickIcons').css('border', '1px dashed gray');
            }
        });
        $('#CS_QuickIcons').draggable({
            delay: 50,
            containment: 'window',
            scroll: false,
            drag: function(event, ui) {
                $('#CS_QuickIcons').css('border', '1px dashed white');
            },
            stop: function(event, ui) {
                GM_setValue('position', {'top':ui.position.top, 'left':ui.position.left});
                $('#CS_QuickIcons').css('border', '1px dashed gray');
            }
        });
        
        
        GM_addStyle('.CS_QI_Item { border:1px solid white; text-align:center; padding:0 1px; min-width:14px; height:17px; margin:2px; font-size:12px; cursor:pointer }');
        GM_addStyle('.CS_QI_Item:hover { opacity:0.6 }');
    }, 1000);
});