1 /* Copyright 2011 The Dominion of Awesome
2 * See COPYING for licensing information */
7 className: "hacks-selector",
16 rendered: function() {
17 this.inherited(arguments);
18 var node = this.hasNode();
21 this.ctx = node.getContext('2d');
22 this.ctx.fillStyle = 'white';
23 this.fadeGradient = this.ctx.createLinearGradient(0, 0, 0, 128);
24 this.fadeGradient.addColorStop(0.6, 'rgba(0,0,0,0)');
25 this.fadeGradient.addColorStop(1.0, 'rgba(255,255,255,0.5)');
27 setHacksList: function(newHacksList) {
28 this.hacksList = newHacksList;
29 for (var i = 0; i < this.hacksList.length; i++) {
30 if (this.hacksThumbs[this.hacksList[i]])
32 var img = new Image();
33 img.src = "hacks/" + this.hacksList[i] + "/thumbnail.png";
34 img.onload = this.draw.bind(this);
35 this.hacksThumbs[this.hacksList[i]] = img;
40 clearTimeout(this.hideTimer);
41 this.hideTimer = setTimeout(function() {
42 this.setStyle('opacity: 0; -webkit-transition: opacity 0.5s linear');
44 this.setStyle('opacity: 1.0; -webkit-transition: opacity 0.25s linear');
47 this.ctx.clearRect(0, 0, 750, 256);
48 if (!this.hacksList) return;
49 for (var i = -2; i <= 3; i++) {
50 var frac = this.index - Math.floor(this.index);
51 var x = 311 + (i - frac) * 146;
52 var j = Math.floor(this.index) + i;
53 if (j < 0 || j > this.hacksList.length - 1)
55 var h = this.hacksList[j];
58 this.ctx.translate(x, 0);
59 this.ctx.drawImage(this.hacksThumbs[h], 0, 0);
60 this.ctx.scale(1, -1);
61 this.ctx.translate(0, -256);
63 this.ctx.fillStyle = this.fadeGradient;
64 this.ctx.rect(0, 0, 128, 128);
66 this.ctx.globalCompositeOperation = 'source-in';
67 this.ctx.drawImage(this.hacksThumbs[h], 0, 0);
71 this.ctx.shadowColor = 'white';
72 this.ctx.shadowBlur = '3';
74 this.ctx.arc(374, 160, 5, 0, Math.PI * 2);