Skip to content

Instantly share code, notes, and snippets.

@leggetter

leggetter/stickerify.html

Created October 1, 2014 09:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save leggetter/d0ee1c3005707e24768c to your computer and use it in GitHub Desktop.
Save leggetter/d0ee1c3005707e24768c to your computer and use it in GitHub Desktop.
Download ZIP
Grokking Promises
Raw
stickerify.html
<!doctype html>
<html>
<head>
<title>Stickerify</title>
</head>
<body>
<ul id="stickers">
</ul>
<script>
/*
The little hack I'm putting together is around adding very simple gamification of Twitter.
The plan is to let somebody provide access to their tweets, do some analysis by applying some rules
and then awarding some stickers based on the results of those rules.
*/
// 2 sample tweets
var tweets = [{"created_at":"Tue Sep 30 19:55:47 +0000 2014","id":517040128687374337,"id_str":"517040128687374337","text":"@thebeebs If you luck out I\u2019ve a couple of contacts there.","source":"\u003ca href=\"https:\/\/about.twitter.com\/products\/tweetdeck\" rel=\"nofollow\"\u003eTweetDeck\u003c\/a\u003e","truncated":false,"in_reply_to_status_id":517037299872567297,"in_reply_to_status_id_str":"517037299872567297","in_reply_to_user_id":16637625,"in_reply_to_user_id_str":"16637625","in_reply_to_screen_name":"thebeebs","user":{"id":14455530,"id_str":"14455530","name":"Phil Leggetter","screen_name":"leggetter","location":"Dollar, Clackmannanshire","description":"Dev Evangelist. Open sourcing @BladeRunnerJS at @CaplinSystems. Realtime Web Technology consultant, blogger, co-author of @RealtimeWebApps. Formerly at @pusher.","url":"http:\/\/t.co\/xDL7dwLl5N","entities":{"url":{"urls":[{"url":"http:\/\/t.co\/xDL7dwLl5N","expanded_url":"http:\/\/www.leggetter.co.uk\/","display_url":"leggetter.co.uk","indices":[0,22]}]},"description":{"urls":[]}},"protected":false,"followers_count":2543,"friends_count":280,"listed_count":144,"created_at":"Sun Apr 20 22:07:00 +0000 2008","favourites_count":2663,"utc_offset":3600,"time_zone":"London","geo_enabled":true,"verified":false,"statuses_count":16373,"lang":"en","contributors_enabled":false,"is_translator":false,"is_translation_enabled":false,"profile_background_color":"022330","profile_background_image_url":"http:\/\/pbs.twimg.com\/profile_background_images\/858383605\/5c7301a461e7ada1ef313e5cdf805458.jpeg","profile_background_image_url_https":"https:\/\/pbs.twimg.com\/profile_background_images\/858383605\/5c7301a461e7ada1ef313e5cdf805458.jpeg","profile_background_tile":false,"profile_image_url":"http:\/\/pbs.twimg.com\/profile_images\/515551217796141056\/vg66Y1cn_normal.jpeg","profile_image_url_https":"https:\/\/pbs.twimg.com\/profile_images\/515551217796141056\/vg66Y1cn_normal.jpeg","profile_banner_url":"https:\/\/pbs.twimg.com\/profile_banners\/14455530\/1401924189","profile_link_color":"0084B4","profile_sidebar_border_color":"FFFFFF","profile_sidebar_fill_color":"C0DFEC","profile_text_color":"333333","profile_use_background_image":true,"default_profile":false,"default_profile_image":false,"following":false,"follow_request_sent":false,"notifications":false},"geo":null,"coordinates":null,"place":null,"contributors":null,"retweet_count":0,"favorite_count":0,"entities":{"hashtags":[],"symbols":[],"urls":[],"user_mentions":[{"screen_name":"thebeebs","name":"Martin Beeby","id":16637625,"id_str":"16637625","indices":[0,9]}]},"favorited":false,"retweeted":false,"lang":"en"},{"created_at":"Tue Sep 30 11:32:48 +0000 2014","id":516913549227360256,"id_str":"516913549227360256","text":"@paddyforan Understood. That certainly changes the way I\u2019d approach performing it. Much less Proclaimers. More Black Sabbath.","source":"\u003ca href=\"https:\/\/about.twitter.com\/products\/tweetdeck\" rel=\"nofollow\"\u003eTweetDeck\u003c\/a\u003e","truncated":false,"in_reply_to_status_id":516911857224146944,"in_reply_to_status_id_str":"516911857224146944","in_reply_to_user_id":15445975,"in_reply_to_user_id_str":"15445975","in_reply_to_screen_name":"paddyforan","user":{"id":14455530,"id_str":"14455530","name":"Phil Leggetter","screen_name":"leggetter","location":"Dollar, Clackmannanshire","description":"Dev Evangelist. Open sourcing @BladeRunnerJS at @CaplinSystems. Realtime Web Technology consultant, blogger, co-author of @RealtimeWebApps. Formerly at @pusher.","url":"http:\/\/t.co\/xDL7dwLl5N","entities":{"url":{"urls":[{"url":"http:\/\/t.co\/xDL7dwLl5N","expanded_url":"http:\/\/www.leggetter.co.uk\/","display_url":"leggetter.co.uk","indices":[0,22]}]},"description":{"urls":[]}},"protected":false,"followers_count":2543,"friends_count":280,"listed_count":144,"created_at":"Sun Apr 20 22:07:00 +0000 2008","favourites_count":2663,"utc_offset":3600,"time_zone":"London","geo_enabled":true,"verified":false,"statuses_count":16373,"lang":"en","contributors_enabled":false,"is_translator":false,"is_translation_enabled":false,"profile_background_color":"022330","profile_background_image_url":"http:\/\/pbs.twimg.com\/profile_background_images\/858383605\/5c7301a461e7ada1ef313e5cdf805458.jpeg","profile_background_image_url_https":"https:\/\/pbs.twimg.com\/profile_background_images\/858383605\/5c7301a461e7ada1ef313e5cdf805458.jpeg","profile_background_tile":false,"profile_image_url":"http:\/\/pbs.twimg.com\/profile_images\/515551217796141056\/vg66Y1cn_normal.jpeg","profile_image_url_https":"https:\/\/pbs.twimg.com\/profile_images\/515551217796141056\/vg66Y1cn_normal.jpeg","profile_banner_url":"https:\/\/pbs.twimg.com\/profile_banners\/14455530\/1401924189","profile_link_color":"0084B4","profile_sidebar_border_color":"FFFFFF","profile_sidebar_fill_color":"C0DFEC","profile_text_color":"333333","profile_use_background_image":true,"default_profile":false,"default_profile_image":false,"following":false,"follow_request_sent":false,"notifications":false},"geo":null,"coordinates":null,"place":null,"contributors":null,"retweet_count":0,"favorite_count":0,"entities":{"hashtags":[],"symbols":[],"urls":[],"user_mentions":[{"screen_name":"paddyforan","name":"Paddy","id":15445975,"id_str":"15445975","indices":[0,11]}]},"favorited":false,"retweeted":false,"lang":"en"}];
// Stickers and their rules
var stickers = [
{
id: 'has_tweeted',
name: 'Has Tweeted',
description: 'You have Tweeted!',
sticker_url: '/img/stickers/twitter.png',
rule: function( tweet ) {
// the fact that this has been called indicates that the user has
// tweeted
return {
sticker_attained: true,
rule_user_state: {} // used for keeping track of state related to the user and this rule
};
}
},
{
id: 'has_tweeted_youtube_video',
name: 'Has Tweeted a YouTube Video',
sticker_url: '/img/stickers/youtube.png',
rule: function( tweet, callback ) {
var hasYouTubeLink = false;
// aha! this needs to be asynchronous because links in Tweets may be shortened.
// So, this rule will need to use something like http://unshort.me/api.html to unshorten = async
// Surely Promises can help here and elsewhere?
return {
sticker_attained: hasYouTubeLink,
rule_user_state: {}
}
}
}
];
// Global lookup of sticker.id to the sticker info
var attainedStickers = {};
// main entry point to process tweets for a user
function processTweets( tweets ) {
console.log( tweets );
tweets.forEach( processRules );
displayStickers( attainedStickers );
}
// process all the rules against a single tweet
function processRules( tweet ) {
stickers.forEach( function( sticker ) {
// check if user already has sticker
if( attainedStickers[ sticker.id ] === undefined ) {
var result = sticker.rule( tweet );
if( result.sticker_attained ) {
attainedStickers[ sticker.id ] = sticker;
}
}
} );
}
// All rules have been processed.
// Simply display the sticker for each one that's been attained.
function displayStickers( attainedStickers ) {
var stickerWall = document.getElementById( 'stickers' );
var sticker,
li,
img;
for( var stickerId in attainedStickers ) {
sticker = attainedStickers[ stickerId ];
li = document.createElement( 'li' );
img = document.createElement( 'img' );
img.src = sticker.sticker_url;
img.title = sticker.name;
li.appendChild( img );
stickerWall.appendChild( li );
}
}
// kick things off
processTweets( tweets );
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment