Allow The Button header to change colour from the websocket
目前為
// ==UserScript==
// @name The Sexy Button Header
// @namespace http://www.reddit.com/r/thebutton
// @version 0.1
// @description Allow The Button header to change colour from the websocket
// @author mrozbarry
// @match http://www.reddit.com/r/thebutton
// @match http://www.reddit.com/r/thebutton/
// @grant none
// ==/UserScript==
// Sorce from mrozbarry:
// https://gist.github.com/mrozbarry/3305f204f58a18f0b94a
(function(){
// TODO: understanding the wss:// uri
// what is the ‘h’ param?
/*var params = {
e: M.floor((new Date()).getTime() / 1000),
h: ‘???need a better hacker here - it appears to be constant through page reloads’
};
socketUri = ‘wss://wss.redditmedia.com/thebutton?h=' + params.h.toString() + ‘&e=‘ + params.e.toString();
*/
// Looks like this is being stored in backbone(?)
if (!window.r || !window.r.config || !window.r.config.thebutton_websocket) {
console.warn('The button is not accessible on this page');
return;
}
state = {
uri: window.r.config.thebutton_websocket,
connected: false,
last_message_at: null,
cache: {} // Cache of last message
}
// Connect to the websocket used on the page
// Optionally, we might be able to hook into the backbone object?
var sock = new WebSocket(state.uri);
// When the socket is opened or closed, reset the state
sock.onopen = function(evt) {
state.connected = true;
state.last_message_at = null;
};
sock.onclose = function(evt) {
state.connected = false;
state.last_message_at = null;
};
// When we get a message, collect stats on how quickly they are being sent
sock.onmessage = function(evt) {
// Seems to ping pretty close to every one second
msg = JSON.parse(evt.data);
if (!msg) {
console.warn('Faulty data from socket;', evt.data)
}
delta = 0;
now = new Date();
if (state.last_message_at) {
delta = now.getTime() - state.last_message_at.getTime();
}
window.thebeard_button_script = {
state: state,
roundTripTime: delta.toString() + "milliseconds"
}
// msg <- message content
/*
// If you wanted to colour the page, you’d want to hook into:
if (msg.type == ‘ticking’) {
var seconds_left = msg.payload.seconds_left; // Should be a number/float
var tier = M.ceil(seconds_left / 10);
// Tier is a whole number, between 0 and 4:
// 6 = purple (#820080) “press 6”
// 5 = blue (#0083C7) “press 5”
// 4 = green (#02be01) “press 4”
// I presume 1-3 are assumed to be one or all of:
// * Not possible because the timer just wraps back to 60?
// * Not accessibly because users don’t let it get that far
// * Not visible because no one has gotten it yet?
// Other flair options (not tiers?) that may or may not be obvious:
// * light-grey (#e4e4e4) “can’t press” (I assume accounts made after April 2015)
// * dark-grey (#888) “no press” (I assume people that have no pressed)
}
*/
tierColours = {
'6': '#820080',
'5': '#0083C7',
'4': '#02BE01'
};
// Until 3, 2, and 1 are unlocked, revealed, or otherwise, so make it grey-ish.
tierColours['3'] = tierColours['2'] = tierColours['1'] = '#f0f0f0';
if (msg.type == 'ticking') {
var seconds_left = msg.payload.seconds_left; // Should be a number/float
var tier = Math.ceil(seconds_left / 10);
// Might want to cancel any previous state.animation here?
$('.thebutton-form').css({backgroundColor: tierColours[tier.toString()]});
}
state.last_message_at = now;
}
})();