TwitchHasAController

controller.js

$(function () {

    $("#controls > div").hide();

    $('<canvas id="viewport" width="140" height="65">')
        .css("float", "left")
        .appendTo("#controls");

    $("<button />", {
        text: "Show",
        click: function () {
            var text = $(this).text();

            if (text === "Show") {
                $(this).text("Hide");
                $("#controls > div").show();
            } else if (text === "Hide") {
                $(this).text("Show");
                $("#controls > div").hide();
            }
        },
    })
        .css("float", "left")
        .appendTo("#controls");

    var canvas = $("#viewport")[0],
        context = canvas.getContext("2d");

    var CButton = function (x, y, fillStyle, path, text) {
        this.position = { x: x, y: y };

        this.fillStyle = fillStyle;

        this.path = path;

        this.text = text || null;

        this.alpha = 0.5;

        this.strokeStyle = "black";
    };
    CButton.prototype.draw = function (ctx) {
        ctx.save();

        ctx.fillStyle = this.fillStyle;
        ctx.strokeStyle = this.strokeStyle;
        ctx.globalAlpha = this.alpha;

        this.path(ctx);

        if (this.image != null) {
            ctx.drawImage(this.image, 0, 0);
        } else {
            ctx.fill();
        }

        if (this.text !== null) {
            this.text(ctx);
        }

        if (this.hover) ctx.stroke();

        ctx.restore();
    };

    var circlePath = function (ctx) {
        ctx.translate(this.position.x, this.position.y)
        ctx.beginPath();
        ctx.arc(0, 0, 9, 0, 2 * Math.PI);
        ctx.closePath();
    };

    var rectPath = function (ctx) {
        ctx.translate(this.position.x, this.position.y)
        ctx.rotate(-Math.PI / 8);
        ctx.beginPath();
        ctx.arc(14, 3, 3, 3 * Math.PI / 2, Math.PI / 2);
        ctx.arc(3, 3, 3, Math.PI / 2, 3 * Math.PI / 2);
        ctx.closePath();
    };

    var imagePath = function (ctx) {
        ctx.translate(this.position.x, this.position.y);

        ctx.beginPath();
        ctx.rect(0, 0, this.image.width, this.image.height);
        ctx.closePath();
    };

    var controller = {
        left: new CButton(0, 15, "black", function (ctx) {
            ctx.translate(this.position.x, this.position.y)
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(10, 0);
            ctx.lineTo(15, 5);
            ctx.lineTo(10, 10);
            ctx.lineTo(0, 10);
            ctx.closePath();
        }),

        up: new CButton(15, 0, "black", function (ctx) {
            ctx.translate(this.position.x, this.position.y)
            ctx.beginPath();
            ctx.moveTo(0, 0);
            ctx.lineTo(10, 0);
            ctx.lineTo(10, 10);
            ctx.lineTo(5, 15);
            ctx.lineTo(0, 10);
            ctx.closePath();
        }),

        right: new CButton(25, 15, "black", function (ctx) {
            ctx.translate(this.position.x, this.position.y)
            ctx.beginPath();
            ctx.moveTo(0, 5);
            ctx.lineTo(5, 0);
            ctx.lineTo(15, 0);
            ctx.lineTo(15, 10);
            ctx.lineTo(5, 10);
            ctx.closePath();
        }),

        down: new CButton(15, 25, "black", function (ctx) {
            ctx.translate(this.position.x, this.position.y)
            ctx.beginPath();
            ctx.moveTo(5, 0);
            ctx.lineTo(10, 5);
            ctx.lineTo(10, 15);
            ctx.lineTo(0, 15);
            ctx.lineTo(0, 5);
            ctx.closePath();
        }),

        a: new CButton(125, 17, "rgb(200,0,0)", circlePath, function (ctx) {
            ctx.font = "bold 10px sans-serif";
            ctx.fillStyle = "white";
            ctx.fillText("A", -3, 3);
        }),

        b: new CButton(105, 30, "rgb(200,0,0)", circlePath, function (ctx) {
            ctx.font = "bold 10px sans-serif";
            ctx.fillStyle = "white";
            ctx.fillText("B", -3, 3);
        }),

        select: new CButton(45, 35, "black", rectPath, function (ctx) {
            ctx.rotate(Math.PI / 8);
            ctx.font = "7px sans-serif";
            ctx.fillStyle = "black";
            ctx.fillText("SELECT", -7, 11);
        }),

        start: new CButton(70, 35, "black", rectPath, function (ctx) {
            ctx.rotate(Math.PI / 8);
            ctx.font = "7px sans-serif";
            ctx.fillStyle = "black";
            ctx.fillText("START", -2, 11);
        }),

        anarchy: new CButton(45, 0, "black", imagePath),

        democracy: new CButton(70, 0, "black", imagePath),
    };

    controller.anarchy.image = (function () {
        var i = new Image();
        i.src = "http://cdn.bulbagarden.net/upload/4/47/Bag_Helix_Fossil_Sprite.png";
        return i;
    })();
    controller.democracy.image = (function () {
        var i = new Image();
        i.src = "http://cdn.bulbagarden.net/upload/5/5f/Bag_Dome_Fossil_Sprite.png";
        return i;
    })();

    var animate = function () {
        window.requestAnimationFrame(animate);

        context.clearRect(0, 0, canvas.width, canvas.height);

        var text = $(".chat_line:last").text();

        $.each(controller, function (name, button) {
            if (text === name) {
                button.alpha = 1.0;
            } else {
                button.alpha = 0.5;
            }

            button.draw(context);
        });
    };

    animate();

    $(canvas).mousedown(function (e) {
        if (e.which === 1) {
            $.each(controller, function (name, button) {
                if (button.hover) {
                    $("#chat_text_input").val(name);
                    $("#chat_speak").click();
                }
            });
        }
    });

    $(canvas).mousemove(function (e) {
        $.each(controller, function (name, button) {
            context.save();

            button.path(context);

            button.hover = context.isPointInPath(e.offsetX, e.offsetY);

            context.restore();
        });
    });
});

It would be better to put the "ANAR" and "DEMO" buttons back instead of the fossils. Newbies wouldn't know their significance and thus not immediately know what they do. In short, it's bad design.

Wymar's dome fossil is showing

Could you make it disable inputs until you're not going to be affected by the cooldown system in the chat?
And possibly add a clock that shows your current minutes and seconds so you can judge how much lag you've got?
Also, could you add the code below to the top of your source so you can install it directly by clicking 'View raw' when using Tampermonkey or Greasemonkey?

// ==UserScript==
// @name        Controller for Twitch Plays Pokemon
// @namespace   http://mkosler.github.com/
// @version     1.4
// @description Inputs the button you pressed after 15-30 seconds, unless you input faster than every 30 seconds when the chat cooldown system is active.
// @match       http://www.twitch.tv/twitchplayspokemon
// @copyright   2014, Michael Kosler
// ==/UserScript==

@knutremi: I'm not certain how I could find the slow mode timer. Sure, I could just magic number it to a certain delay, but what if it changes?

I think it has changed multiple times already due to changes Twitch made to cope with the load. I think you could use the time from the error messages that show up in the chat when you enter commands too quickly instead. But that requires scraping of the chat I believe.