Twitch Plays Pokemon: Controls

twitch_plays_pokemon_snippets.js

//reddit: regulargabs
//MIT license
// USAGE:
// go to http://www.twitch.tv/twitchplayspokemon
// Paste the "components" that you want on the javascript console of your browser and run.

// ###############
// # COMPONENTS: #
// ###############

// CONTROLS:
// Puts GameBoy controls below the chat button
// Minified Version (use this one!):
$("#controls").append('<div style="float:left;padding-left:20px;"><a id="keyUP" class="primary_button" style="width:20px;text-align:center;">↑</a></div><div style="float:left;padding-left:100px;"><a id="keyA" class="primary_button" style="width:20px;text-align:center;">A</a></div><div style="clear:both;"></div><div style="float:left;padding-left:0px;"><a id="keyLEFT" class="primary_button" style="width:20px;text-align:center;">←</a></div><div style="float:left;padding-left:20px;"><a id="keyRIGHT" class="primary_button" style="width:20px;text-align:center;">→</a></div><div style="float:left;padding-left:60px;"><a id="keyB" class="primary_button" style="width:20px;text-align:center;">B</a></div><div style="clear:both;"></div><div style="float:left;padding-left:20px;"><a id="keyDOWN" class="primary_button" style="width:20px;text-align:center;">↓</a></div><div style="clear:both;"></div><div style="float:left;padding-left:60px;"><a id="keySELECT" class="primary_button" style="width:60px;text-align:center;">SELECT</a></div><div style="float:left;padding-left:10px;"><a id="keySTART" class="primary_button" style="width:60px;text-align:center;">START</a></div><div style="clear:both;"></div><div style="float:left;padding-left:10px;margin-bottom:10px;margin-top:10px;">Slow chat limit:<span id="keyTIME" style="color:green;">0</span></div>');var keyIn=function(e,t){e.preventDefault();$("#chat_text_input").val(t);$("#chat_speak").trigger("click");console.log(t)};$("#keyUP").on("click",function(e){keyIn(e,"up")});$("#keyDOWN").on("click",function(e){keyIn(e,"down")});$("#keyLEFT").on("click",function(e){keyIn(e,"left")});$("#keyRIGHT").on("click",function(e){keyIn(e,"right")});$("#keyA").on("click",function(e){keyIn(e,"a")});$("#keyB").on("click",function(e){keyIn(e,"b")});$("#keySELECT").on("click",function(e){keyIn(e,"select")});$("#keySTART").on("click",function(e){if(confirm("Do you really want to screw everyone's lives?")){keyIn(e,"start")}});var slowChatDelay=0;var scdUpdate=function(){if(slowChatDelay>-1)slowChatDelay-=.1;if(slowChatDelay<=0)$("#keyTIME").css("color","green");$("#keyTIME").html(Math.round(slowChatDelay*10)/10)};var scdReset=function(){slowChatDelay=30;$("#keyTIME").css("color","red")};setInterval(scdUpdate,100);$("#chat_speak").on("click",scdReset);$("#chat_text_input").keypress(function(e){if(e.which==13){scdReset()}})


//Raw version (for development):
/*$("#controls").append('<div style="float:left;padding-left:20px;"><a id="keyUP" class="primary_button" style="width:20px;text-align:center;">↑</a></div><div style="float:left;padding-left:100px;"><a id="keyA" class="primary_button" style="width:20px;text-align:center;">A</a></div><div style="clear:both;"></div><div style="float:left;padding-left:0px;"><a id="keyLEFT" class="primary_button" style="width:20px;text-align:center;">←</a></div><div style="float:left;padding-left:20px;"><a id="keyRIGHT" class="primary_button" style="width:20px;text-align:center;">→</a></div><div style="float:left;padding-left:60px;"><a id="keyB" class="primary_button" style="width:20px;text-align:center;">B</a></div><div style="clear:both;"></div><div style="float:left;padding-left:20px;"><a id="keyDOWN" class="primary_button" style="width:20px;text-align:center;">↓</a></div><div style="clear:both;"></div><div style="float:left;padding-left:60px;"><a id="keySELECT" class="primary_button" style="width:60px;text-align:center;">SELECT</a></div><div style="float:left;padding-left:10px;"><a id="keySTART" class="primary_button" style="width:60px;text-align:center;">START</a></div><div style="clear:both;"></div><div style="float:left;padding-left:10px;margin-bottom:10px;margin-top:10px;">Slow chat limit:<span id="keyTIME" style="color:green;">0</span></div>');

var keyIn = function(e, key){
	e.preventDefault();
	$("#chat_text_input").val(key);
	$("#chat_speak").trigger("click");
	console.log(key);
}
$("#keyUP").on('click', function(event) {
	keyIn(event, "up");
});
$("#keyDOWN").on('click', function(event) {
	keyIn(event, "down");
});
$("#keyLEFT").on('click', function(event) {
	keyIn(event, "left");
});
$("#keyRIGHT").on('click', function(event) {
	keyIn(event, "right");
});
$("#keyA").on('click', function(event) {
	keyIn(event, "a");
});
$("#keyB").on('click', function(event) {
	keyIn(event, "b");
});
$("#keySELECT").on('click', function(event) {
	keyIn(event, "select");
});
$("#keySTART").on('click', function(event) {
	if(confirm("Do you really want to screw everyone's lives?")){
		keyIn(event, "start");
	}
});
var slowChatDelay = 0;
var scdUpdate = function(){
	if(slowChatDelay > -1)
		slowChatDelay -= 0.1;
	if(slowChatDelay <= 0)
		$("#keyTIME").css('color', 'green');
	$("#keyTIME").html(Math.round(slowChatDelay * 10) / 10);
}
var scdReset = function(){
	slowChatDelay = 30;
	$("#keyTIME").css('color', 'red');
}
setInterval(scdUpdate, 100);
$("#chat_speak").on('click', scdReset);
// Suggested by WolfgangSho
$("#chat_text_input").keypress(function (e) {
  if (e.which == 13) {
    scdReset();
  }
});*/


// HIDE COMMANDS FROM CHAT
// extracted from github.com/jpgohlke/twitch-chat-filter


var FILTER_REGEX=/^\s*((left|right|up|down|start|select|a|b|democracy|anarchy)\d?)+\s*$/i;$("<style type='text/css' >.segmented_tabs li li a.CommandsToggle {width: 50px;padding-left: 0px;padding-top: 0;height: 8px;line-height: 115%;}.segmented_tabs li li a.ChatToggle {width: 35px;padding-left: 15px;padding-top: 0;height: 8px;line-height: 115%;}#chat_line_list li { display:none }#chat_line_list li.fromjtv,#chat_line_list.showSpam li.cSpam,#chat_line_list.showSafe li.cSafe {display:inherit;} </style>").appendTo("head");var CHAT_BUTTON=$("ul.segmented_tabs li a").first();CHAT_BUTTON.css("width",CHAT_BUTTON.width()-71),$("<li><a class='CommandsToggle'>Commands</a><a class='ChatToggle'>Talk</a></li>").insertAfter(CHAT_BUTTON),$(".CommandsToggle").click(function(){$(this).toggleClass("selected"),$("#chat_line_list").toggleClass("showSpam")}),$(".ChatToggle").click(function(){$(this).toggleClass("selected"),$("#chat_line_list").toggleClass("showSafe")}),$(".ChatToggle").click(),CurrentChat.line_buffer=800,setInterval(function(){"use strict";$("#chat_line_list li:not(.cSpam):not(.cSafe)").each(function(){var a=$(this),b=a.find(".chat_line");a.length>0&&(b.text().match(FILTER_REGEX)?a.addClass("cSpam"):a.addClass("cSafe"))}),CurrentChat.currently_scrolling&&CurrentChat.scroll_chat()},100);

Added buttons for the new Democracy VS Anarchy system. Applied color styling for the hell of it but probably can do without it.

$("#controls").append('<a class="primary_button gamepad" x-key="up" style="width:20px;margin-left:20px">↑</a><a class="primary_button gamepad" x-key="a" style="width:20px;margin-left:100px">A</a><div style="clear:both;"></div><a class="primary_button gamepad" x-key="left" style="width:20px;margin-left:0">←</a><a class="primary_button gamepad" x-key="right" style="width:20px;margin-left:20px">→</a><a class="primary_button gamepad" x-key="b" style="width:20px;margin-left:60px">B</a><div style="clear:both;"></div><a class="primary_button gamepad" x-key="down" style="width:20px;margin-left:20px">↓</a><div style="clear:both;"></div><a class="primary_button gamepad" x-key="select" style="width:60px;margin-left:60px">SELECT</a><a class="primary_button gamepad" x-key="start" style="width:60px;margin-left:10px">START</a><div style="float:right;"><a class ="primary_button gamepad gov"x-key="democracy"style="width:35px;margin-left:10px;background-color:blue!important;background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);">DEMO</a><a class="primary_button gamepad gov" x-key="anarchy" style="width:35px;margin-left:10px;background-color:red;background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019));background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);">ANAR</a></div>');
$(".gamepad").css({
    "text-align": "center",
    display: "block",
    "float": "left"
});

$(".gov").css({
    "border":"1px solid #000!important;"
});
$(".gamepad").on("click", function(e) {
    e.preventDefault();
    $("#chat_text_input").val($(this).attr("x-key"));
    $("#chat_speak").trigger("click")
})

Minified:

$("#controls").append('<a class="primary_button gamepad" x-key="up" style="width:20px;margin-left:20px">↑</a><a class="primary_button gamepad" x-key="a" style="width:20px;margin-left:100px">A</a><div style="clear:both;"></div><a class="primary_button gamepad" x-key="left" style="width:20px;margin-left:0">←</a><a class="primary_button gamepad" x-key="right" style="width:20px;margin-left:20px">→</a><a class="primary_button gamepad" x-key="b" style="width:20px;margin-left:60px">B</a><div style="clear:both;"></div><a class="primary_button gamepad" x-key="down" style="width:20px;margin-left:20px">↓</a><div style="clear:both;"></div><a class="primary_button gamepad" x-key="select" style="width:60px;margin-left:60px">SELECT</a><a class="primary_button gamepad" x-key="start" style="width:60px;margin-left:10px">START</a><div style="float:right;"><a class ="primary_button gamepad gov"x-key="democracy"style="width:35px;margin-left:10px;background-color:blue!important;background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 50%, #207cca 51%, #7db9e8 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#2989d8), color-stop(51%,#207cca), color-stop(100%,#7db9e8)); background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%); background: -o-linear-gradient(top, #1e5799 0%,#2989d8 50%,#207cca 51%,#7db9e8 100%);">DEMO</a><a class="primary_button gamepad gov" x-key="anarchy" style="width:35px;margin-left:10px;background-color:red;background: -moz-linear-gradient(top, #a90329 0%, #8f0222 44%, #6d0019 100%);background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#a90329), color-stop(44%,#8f0222), color-stop(100%,#6d0019));background: -webkit-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);background: -o-linear-gradient(top, #a90329 0%,#8f0222 44%,#6d0019 100%);">ANAR</a></div>');$(".gamepad").css({"text-align":"center",display:"block","float":"left"});$(".gov").css({border:"1px solid #000!important;"});$(".gamepad").on("click",function(e){e.preventDefault();$("#chat_text_input").val($(this).attr("x-key"));$("#chat_speak").trigger("click")})

nice

My apologies, as I have no formal javascript knowledge. Or really, informal Javascript knowledge. However, using the original submission as a template I have added Democracy and Anarchy buttons, and realigned many buttons that were touching by a couple pixels. Only a condensed version I'm afraid.

I also seem to have no idea how to format the condensed block of text so it shows up as code with a horizontal scroll bar like loneislander did. So here's a link to a pastebin, with apologies: http://pastebin.com/56S8MaKp .
(If anybody could point me to a styling guide, that would be appreciated, the GitHub Flavored Markdown link seems irrelevant)

And here's my version that shows the UTC time of your last button press and has a lighter chat filter: https://gist.github.com/Armada651/9271525