Skip to content

Instantly share code, notes, and snippets.

@timjb
Forked from frostney/achievements.css
Created April 19, 2011 17:01
Show Gist options
  • Save timjb/928835 to your computer and use it in GitHub Desktop.
Save timjb/928835 to your computer and use it in GitHub Desktop.
/* You may want to style this to your personal need */
.achievement.status {
display: none;
position: absolute;
left: 50%;
bottom: -120px;
margin-left: -160px;
}
.achievement {
opacity: 1;
-moz-opacity: 1;
-webkit-opacity: 1;
-khtml-opacity: 1;
filter: alpha(opacity=100);
-ms-filter: "alpha(opacity=100)";
border: 1px solid #fff;
background-color: #000;
color: #ddd;
border-radius: 18px 18px 18px 18px;
-moz-border-radius: 18px;
-webkit-border-radius: 18px;
-moz-box-shadow: 0px 0px 8px #cccccc;
-webkit-box-shadow: 0px 0px 8px #cccccc;
-ms-box-shadow: 0px 0px 8px #cccccc;
box-shadow: 0px 0px 8px #cccccc;
background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAAXNSR0IArs4c6QAAAAZiS0dEAP8A/wD/oL2nkwAAAAlwSFlzAAALEwAACxMBAJqcGAAAAAd0SU1FB9sDGRMqMxBHlJ4AABdfSURBVHja7Zp5tKZFfec/36rnefd7u5umF5ZusLtZRZZmU0RADLiMOjKZQ1TGBSeiQhQ0Gfeck0wmxjjGbUaUuOAK4jZmooYJiAsgIMpym6WBZmmg9/Xe+67P81T95o96b6snZlxoz5BzqHPe8y5PVb1Vv/ot39/3V/BUe6o91Z5q/0p71asn/02v/5w/7PzmnS96c/uFF76p/YKDVtXbAG9/5zwAXvPq9u/0529608/HveGNE1x04W8+zx9f0OL1F0/s+f7mizq/uxDO+fn/vvY1ree89a2dd7/1kva5AB94d0M6bnXe+cP/UJ/ebz8cwObN8NBDXPaZz3TfCPDcMxt8/7rhb7f517f4xKf6e/U0Lzx/kksvn/ktRkzy2vMDn7u8x9lntY89/Ahd/bSnsWTBgvT08cdY894/7x6tiy/pXHnSCfbyRpOY50iCRx5Gd65R97vfHi3buKnc/cIXtPinq3/1hi66cIKPXzr7K5+d9bxOu9WxeXnd9nVOE8265ku2NEZaZnhDDQmAUjBbldaLxgxoe4xhR62m6VBo+sqv9n7lCbztkgk+9JF/+d+rjmxzyevFn7y1y4tf0v4vh67SB448yth3IbEoUAjYzIzcrT+15+ud7+zcc9jhdsRoCMVIcf4Cc/MmiRs2yq1ZA7f9LB59y0/6a172sjbf+laPi1+5lHLpTi79UPFz1Xr1PlmrM3qGwQkWdbqTHVVvaHGW2cJ6XbVaDfLc8F502tBsQQhQllBVYAbeQ5ZBUcBgkN77fej1GFpk86i0TaC1mF1tFm6/7LLBAxpLL5lch098osupp3a44YYuAC97WeeyVau44IgjLC6Yj3v8cTHbNWs2sWZTbmrK/kJvf3vnwUMOsRUPP4ytX++IUVq5MnLMMcb2bdh990t33W0vvvaa3ncuvqTNRz/SA+CNb2gd0Gi6VxWlnRsDRyA1nIxmC9pNqDfEkiUO7wISVEEmGVmOvDAcChUUJTiwWh05Yc6DHBoOYDSCTscxGOSsf6RgZtYYDsE54b31vOcWcF8YDuzbl/19d8cvasG553a+s3KlvWjlCkKtjr/5ZseWrX42VFXnyCOM/faXpqb4r9moYBZEqy1t3ZpxzTW9Q086eeKAXbuL7512WnRH1c3abX17cqLzFx/9SPcv3/yW9hlefCKiwwdDY9Eiz2GHeKvVzXbvNjUaAhmjoWi1xM6dETCcjLyGYsDKgLIMQygGkEchYoMCZR6kdPqDAdRrjsHAWLLUs2KlrN6AWiZ27rTWA+vCmbt2xTPrDbj44s41zTqXvP8D3Xte9ar2upUrbeWyZYSqkr/6av/dK66Y/nf1euvD55zTvKTeGFpVQb9n27KZadaHYMdMtLGlS6X5C7JjfnLLjq//5JZVteFgy8zzz46tI4+wsHCh/iLLJv7zrp1xWa0mmk3C6uPqvlaThRgoS5g3z5lzAKLVMIYFTEzUqEpjVBhIlmUm52T1uilEWaiMLBOZN6kuI0IwQxITk1AFmDdpeC9FE94bg6HhM3HYoXXrDwIPPlhEMztr4xZ39/nnT4TjVkffaSv2+/jrr3efuOqq6QsBlh3oT1uy1JiYcBQjY2bWrXHbd9jtvR5kNTjoYDjwAP+6pETrwmc+M9v+52tdKeGXLZMt3CdfVpayPDNbvrzhzJw5gZmjKMRoZFRVUt0qCDMoiogJDLAAGIaBHCYD54UERSULJWQ5xJjG5plRBRiOYFTKqtKwKIpCOC98ZtTrnvnzGy4EDDPbbz/v50166/bMXXed+9RVV81c+D8/vghgYv8D3OqlS6BWM+2egampcK/rzXDT9G7hZCxaGDn4ae6FgL/oDR0BfPpTrc4dd3gmJ3L2WVjY8mUwMQn33y+GA1QF4b2o1RyjQhRlcnAhgkUoShEDOAmfgfOSHMikLE99ALxDIaaxSkpECCIEqEqBoWiiqgA5Mi+qApUl7Ngu2m1YtNgoy8rmz8t0333ZP3zzmzMXrHsw508u2sb+B7RfecghjmYzWJYZ/Z7tXr++v9U9tN5N7Z42BKo3Q1y10rNseeelH7+sa887cx6wpRgUOuFHNxTq9w0wsgwmJoZMzzjieNEYSB6fHBTEdOoxjDfoDQmcg8wDzjADp+T9a7X0rKogRkugxJIwavU01jsRzSFLpmESvR7Um6M0R54U7PY7Ct72Vr0S4DWvWwzA/vv51y9bJpwPCkF0e9wH4B55eHbTYKDecAghmJYshoOWu7cAbNxYAfA/Pjr9s5tvYku7LTFeZF4zZmf77N4d8ZnwWdIiM1HLPHKQ+6TSzqWNSCncIaiKFP5ChDjWArPxbwHk0ss5I8+E956sJnIPeU0Qxc6dgZ07h3gXKYpkOu2WdMMN7s6VK3f3zQ7mxh9uALL5++2n4ycmzMzMBkOYmdaPgSTorVvs24MhhNJYsDDaIavcGVBbdu/aHlAH4OFH9On16zN27kD1GpKhGM0ee2yk23421Nq1hfqDKJJ2yzmvvOZUyyTvkc+E98g5zAwFkxUjZIbKEhUlJqEsQ0Ly3pRnqF73ajS9nAzvYHo2av0jhe5dO9SOHYXFaDKT8hzt2GFMTTm2bHP/HeDQQ7YAcNxx9Q8feqjH+4CArZth7f3xIwAeYNeu2s0HHqi37bsoqef8BbnMdNpDDxV//5rXLODOO/vs2qVHj3x67S1Td4Y420Ny0OmIZhN5jw2Hpu07gm3ZFLR1a8XMdGRUYFUFziEEzZZDzhQqDNJvZQlZhlUVMrA8E8MhVJVTtwfT04GtWwNbtlZs2FCxc1cgRlOtDnkmoqFuF1u3Tqxbh03Oy/SjH+x+BRB27qzIfW3F6ac3Lj/8cJl3FVWU7r7L/vm66/ofP+nUFtlBT2uz/uHe4/eubX9q6RJev8/CaAsWVHbCCdnxm7e0X/v5z2//nNkLkK5et2Vz49GlS92yfi/aY4/C9m1o/jys2RKNhlm9Lrw3ixG6/UC3N+fRkucHkJLXzzz4LP1qBmWV/EWokuFL6ZmU/ITPUJ4lv1KWspkZ6M6aZrvYcChGQ1OnI5UF1wJ7YOoZZ9avX73a0WhUlKXx0INw1VfDuQA/uaGPW/9wQnbfv653wdRdGo1GKITAqlWy1cfllwM16WoAtm2Pn5qccKoqlGdCzhiOYGba2LpVbNhobN4Mu3eLfk+UBVQlhCpJwTnwzsgz8JlhZnNREacElrwf794gWooi3R5s2wabNsGmjWLbVmN21hgVqa+TUZTYRMcxKvjo3OZPOKHz/hNPzPdfsCCa94HpaWntve5iGE4f/vQW57y0jTv55DZwAAC33mynP/ig6HXNqqrS6uM8L37x5P1zE961pvwaToSAQYrJNo7lWZYAjXOyaGYhGEUphiMxHBq9vqw/EOllzM6KbhfrdcVgYFYUoijFqDCrCrOikJWFKAojRiHAeZnzZj6TmYkQjFgZIYoQUavtuPaawXcBVqxovvj447N3HHwwMVql4VC6917uvPZ7sx9bd99C1t7d53/97x7ullt6wAaOO6bN+sd6t6y5yz66bYdcVYXYmazs2afkBz3/+RM/SCIY3jfos917yZLyEiOMtRVhOG/KMynLUujLMyPPSUhPlrynQDKcQ87ZHo2XM7xDziM37p+NI4E8CJMZMjOFKv13tBRFZNCZ8D+AUdxvv/oJzz619o+rVzurN0o5Z7Z2LVx55eBkgBOfOdiTM7i5D7ff2eMrX8y4/ke9S356KzdM75arysr227+KzzktP/3MMye+C9Dv6Rv1migDsiiLY4DiHMoykWeScybvkJzYA2vGcFD6hXeQWRKmoaRRe0xFck5JGE7yjrG6QzQJSWP7UYxGre6YaOuTwLIzntu49YwzMluwoMQpcu890j98m6MgjJ71rCa7dv08tfe/mEH9n+93KIYjHnywuLzRzP/j4kVa0u6YLVnsrNHwh1ZVvsqif29etz8tS6xWM2Uey3zK0OQMp2QSzgnv0mmDUuxL8pBzwslkCcvM7UXEsWCkPdrlxnEzRpT8gojRxmhTilE2GMDkhNOtU8WbTzm5teGsszKbnCwYjSK33SZd9z39wQMPdG955il1br7pl6mFXxJAMRztASTnnVd+wme10zodVkxORvZZ4CzPs2PuuadcWqv5JSGETqMunEfeC+csnTKSk0kepd0KzATac7KSISfN+XuvOZVIG3cODMlJSd2DlKC1kIwYpDJIMZiFgPoDVMv95nrm3vGSl+TZ0v0C0zNBN/1YuvrquPretb0fn35GixuvH/LsUzMeezT+agEAnHNKk5f/ccWH/rbBpZ/sfyGEWrNe59SFC4MtWizL6/kx27fTLkaBRitpeRIAEmNBIOZOdozykgA8ZJnkHDiXjGAuLEpSCOPDVxKaIaoyIbwQmDMnqkqqUthUMYLhkFhvZBOnnJLlS5dUtnNH6X74Q+3+3OfKRbt2DR89+Zktbryhz2nPbXDDj4p/XQMA1j5Wceaz63zysyPe+Y5Jrrhy9tptW/Obm229atGioEX7OhsMPBs3BJoNw3twcyaglKZmbg7npBAnaezgUp+5k06ZRVIQizYGDGkcJqKlSBPjHhhBCKKqUh5RlKIsxWAgPf3pNe2/f2k7dlXuB9/Xd77+je4xEIrjj29x6619TjipxU03Dv4FfaZfRy2edFKbn/ykB9TnnXdedveJJ+qAYlSzq75WMtGOtCdQnmGNhpRlZlmWnGE6ZTPvQF6SzDI39gGSyZlsLuGRzKIp7TONDdEUQ9rwnM1Hw0IlytKUqDMxGEC/7+ylL3VM7y51yy382XXf7/0dwDOObrNmqvf/3J//dQLYsKHk2GNbbN48HK1ZU34I5U9bujQeW5aeLVsi7bZwkpw3y7zkvAyZvMOyLHlrLzNJSmFPZphilMWIvEv9DVmyiuRIYkzf5zTGDItBCsEUgqwspao0m57BVqxwrt+v9LWvc/TUVO9b73n3JNdfD1u3DH4td5z9JgTzHXf0OfyIFvfesxjpkdfOzrT/adWq+JWiEGVp0TkRShQ85j1yHnDJAjQ+9XEgYI+Fz2lfwjjmHYoxafqc3zAlvmCcMcpsPIdS3xCxEHDDQbj1y1/unQRw3Oo2f/2+35w+d79px7X39pEe4ayz2rrxxt5Va+8KCzHK4RBXVUY6USMEsxBkSutNXt3LMpe2bNGINhYBWAhm6dDHu7M9YdAsmlmUxWCWyBJLJEmVkGZVyQ0Guv0b3+yddMO1yxMV/5z6b1Vv8L9N57PPbnHNNQlEbNhUDlqtfGOe8dJGQ0gm70VCiTYX4sCE86bkJEnPMcwS+COZDyClaDnn7qQQpKJKYdAixJDUaDBMUWBmRtq5g/N27y4e+ewXpjnj9Am+fNX0byUAPdGKzeGHTwwXL471VkvWbBi1RmJ2xzy/5TlkGcpyzLuxzyPhIiPtdwyI5rgCxmagskz84hxJUpZYUaSawXAobd7MY3fe2V1+7LPa3HFT73dav/udNn3YPA5Y1hgvNF7S7YqyNIoy8XdllWzXTMSYsEAMohp79VDNuQWoovb03cMBVqIsoay055yq8e8hJB/R60G3x1sB1t3kOOCgxu8kgCesAQBHHdXZMW+eLWg1RaNpqtdl9Qaq18zyWkJ/YOl0Dck5c4qJHAUSdLTkNCypeVmlmkFZOUKIVAGKEVaUYtCDzVt4dGqqe/ATXbt7IoMPOTxVcKvSXj0YSEVplKUsRlMMlk69EjEkrnAu6YFITGjR5BLgSUhxDHVJWhOiMItJk6o012hoTM+YZmbtLIADljSekAD8Exm8c3vByc9oc+c9vQf23Tc/W2K588KPQ5s8+CTilBIkRjuRHXHsJfVzQhRLpbJQghmKhsWYSNiyguFQNtvF9bru7+67r/uVww5v8/D6wf8/DQBYP0he6/FHdGZZJmqqSM5Ko2EqYqQNpChATOnvOBmyPT4iSmWV/EO0dPohSGWJqkoaDkWvb2440ONTU7N/ds6pK7hvbe8Jm2/2RCfYvK7PoSvb3P9gd7S011rsvdva78+BnYTZY5DltYQKcm+YklkgJDdnHjauMYzVP9icI7TRyKzfxQ36Kn7603AwwL3Tm/bKvYO94gQBjj26zR1TPQ5a1WosXqBNjYbm12oWmw2p2TTyWqLNvJecM4s2TvlIiRImhYCFKpXD5uiw4QhGQ1SUuuGmm7rPSTR3m9tv7+2Vdfu9MclxR3e4Y6rHMce2ue+efrVxY/m3S5fmfefc2WEcz6sKQkjwMEZUVVhVohhRCChU2KhAowL1e6jbx4ZDubJUNRxxyS03994EcPwJLW67be/dPtlrGjDXjj66zdQvZGD//mXzL6vX7IKJCawso/p9s7JMucEeMijRidZoSV7gczHoi8zr9VdcufvTAM97Xptt28XUnd29ut69KoAVK5sUI8fjjycBHHhg+0Mx8sYQ1Jw3Txx0kLfDDnNasCDRaTGmGp+EOUm7dmG33V7x+GMwHJhwttln8YLHH+3/44qVk/R7BZs3D/eqAPzemuiww1qse2DAzEwJwPLlnQe904sMMgnK0piZjnR7plbLYSY1Gw7vRbcLGx43rbm7YtNGoygSzZt5JjLnXjExr7bP+kdmr16+vMW2bSOOPLrFti3lk0sAO3aUrD6+w6ZNBStWtB93joOCpTCXZajZFPsshGbTNBoFpKheLzIzE9i1K7BzZ0j1vyzhgRAlCzK8Web0zIUL80X339/97jOOaXH3VP/JpwEAmzYVHHtM+4q8plPMFGNMiVGrJU1MGJ02dNqoPSG8TFUwiiKluFmWzNE7kWUJR6XESeS5WbOhk5cfmN92xx39+5+0PuCsP2jvX1baMByZFQUqRiLz0O4YjYasOc4TWi1ToylzMpVVQgxjelujkTEawWAo+j0YDo0sk9VqpmZLG75/XffAvbnmbG9O1mrxOhx0KigKrCyMWh0aDajXjXoDq+WmWo5leWJB8jxlB2ameh0rCxgVUBRGr5nCp5OR5bJGww54xSs6R195ZXfqSSmAeQv0HCVeU6FKdLYE9ZrRbMnqNVOey8YEyRz9g5nhvSwGVJTphtmoNJrNRIh6J7LczHsh7FjgySmA+ZNkZQDvZBbT1Rbvk13XGka7jUkm4cy7KDmsCoYjsUYhYCGky1aDPjTrhuGoqohzKM/BjCVPWhPIch6tNxLNI6DZVGKGvFGri3bbUiXZx8T7R6OqRJYnLBRjooqGQ1GrQX0Iw2EkRgFYrW6KQbc9aQXQbtvlkl4rmTmHMm/4PF18qNfNJNSoGY1mEkoV0s0Q5zDnUh0gGuZTzoBkch7KImWctVzs7JU37c01u701Ub88nL/6q96Pmg0eqeW4eh2abZF5UaujaFJRQCRVeOtNUa/hGg3UaKJaLqKJKiCLyDncxITUbCTVzzLkPB/7yIdH/SelAFr52rna1bMaLVGvi1puZJnRrMvyzPAZKguzbl+anTGbmU1hrhhJ/YFZUZjKQvJOyrJ0l6Bel9Xr0sSEive+t3vx3/z1BE9KAcwt7F1/Ptgs2dmtlsl7qdkE5w0zmRNmJlk0K0spBGIIsrKwWFVSumBm0ecW81xWq2HNJpqcJDSCtQHe9Z5Z3ve+9l4TwF4FQh/84ARZFrjkkj6XXto8sNFw9ziniaoyqpLos3TZIcvMnNe4VpSKnVUleZ+u3iTHmQrmo1K3bXk4nvjOv+xH7DC+9KeP8p8+NHhyCmCuXXppiwsvTKZ6+eXtd2Ve7wmRNkqgJs+FYRbD+NJDqv5oXD7HO3CebdG46OV/1P0awGWXtXnDG3p7fa3u9yGAWiu9v+giOP/83t+86tXdjrDzhH2zXtejkuEk1XKR5Ur3gjJVzYYezjKuAI4999zu4pf/UfdrV341Tfb72Pzvtf2399f2fP7C5+u/pGlf/FJnn698tbP8q1/tHHLVVe2jP/+lzvIzT/xlbbziqs6e75//Qot/s+3yzzbHptDggx/Lf23/j33s58XNL365zVPtqfZUe6r9Ptv/BeIYcVwHQEBvAAAAAElFTkSuQmCC);
background-size: 64px;
background-repeat: no-repeat;
background-position: 6px 6px;
margin-left: 0px;
width: 320px;
height: 64px;
padding-left: 80px;
padding-bottom: 8px;
padding-right: 12px;
padding-top: 8px;
z-index: 30000001;
}
.achievement.locked {
background-color: #ccc;
color: #444;
}
.achievement h5 {
color: #fff;
font-weight: bold;
text-shadow: 0px 0px 8px #eee;
margin: 0;
}
.achievement.locked h5 {
color: #444;
font-weight: bold;
text-shadow: 0px 0px 4px #888;
}
.achievement p {
margin: 0;
}
var Achievement = function(text, description, icon) {
this.active = false;
this.text = text;
this.description = description;
this.icon = icon;
};
Achievement.prototype.render = function() {
return '<div class="achievement ' + (this.active ? '' : 'locked') + '">'
+ '<h5>' + i + '</h5>'
+ '<p>' + this.description + '</p>'
+ '</div>';
};
Achievement.prototype.unlock = function() {
this.active = true;
this.show();
};
Achievement.prototype.show = function() {
var el = $('<div class="achievement status">'
+ '<h5>Achievement unlocked</h5>'
+ '<p>' + this.text + '</p>'
+ '</div>');
// Bug: #achievement_box isn't defined in index.html
//if (this.icon) {
// $('#achievement_box').css('background-image', 'url('+achievement.icon+')');
//}
el
.appendTo(document.body)
.show()
.animate({ opacity: 1, bottom: '8px' }, 750)
.delay(5000)
.animate({ opacity: 0, bottom: '-120px' }, 750, 'linear', function() {
el.hide();
});
};
Achievement.fromJSON = function(obj) {
var neww = new Achievement();
for (var key in obj) {
neww[key] = obj[key];
}
return neww;
};
Achievement.prototype.toJSON = function() {
return this;
};
// Just-A-Normal-JavaScript-Object-Pattern
var AchievementsManager = {
storage: window.localStorage,
initialize: function(storageKey) {
this.storageKey = storageKey;
if (this.storage && this.storage[storageKey]) {
this.store = JSON.parse(this.storage[storageKey]);
for (var i in this.store) {
this.store[i] = Achievement.fromJSON(this.store[i]);
}
} else {
this.store = {};
}
},
register: function(achievement) {
if (!this.store[achievement.text]) {
this.store[achievement.text] = achievement;
}
},
getCount: function() {
var count = 0;
for (var i in this.store) count++;
return count;
},
getUnlockedCount: function() {
var count = 0;
for (var i in this.store) {
if (this.store[i].active) count++;
}
return count;
},
clear: function() {
// Reset active achievements
for (var i in this.store) {
this.store[i].active = false;
}
this.save();
},
list: function() {
// Locked achievements will be shown in a grey-ish color
var result = [];
for (var i in this.store) {
result.push(this.store[i].render());
}
return result.join('<br /><br />');
},
unlock: function(text) {
var achievement = this.store[text];
if (!achievement || achievement.active) return;
achievement.unlock();
this.save();
},
save: function() {
if (!this.storage) return;
var jsonStore = {};
for (var i in this.store) {
jsonStore[i] = this.store[i].toJSON();
}
this.storage[this.storageKey] = JSON.stringify(jsonStore);
}
};
<!doctype html>
<html>
<head>
<title>Achievements example</title>
<link rel="stylesheet" href="achievements.css" />
<style>
html { overflow: hidden; }
body { font-family: Verdana,Arial,Helvetica; }
#list {
display: none;
background-color: #eee;
height: 240px;
width: 100%;
}
</style>
</head>
<body>
<p>
<input type="button" id="achievement-button-1" value="Click for Achievement One" /><br />
<input type="button" id="achievement-button-2" value="Click for Achievement Two" />
</p>
<p><input type="button" id="clear-button" value="Clear achievements" /></p>
<p><input type="button" id="list-button" value="List achievements" /></p>
<div id="list"></div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="achievements.js"></script>
<script>
$(document).ready(function() {
AchievementsManager.initialize('myGame');
AchievementsManager.register(new Achievement('I clicked a button', '...and I liked it'));
$('#achievement-button-1').click(function () {
AchievementsManager.unlock('I clicked a button');
});
AchievementsManager.register(new Achievement('Second button', 'This button is just for show.'));
$('#achievement-button-2').click(function () {
AchievementsManager.unlock('Second button');
});
$('#clear-button').click(function() {
AchievementsManager.clear();
})
$('#list-button').click(function() {
$('#list').toggle('slow');
$('#list').html(AchievementsManager.list());
})
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment