https://teammateworld.com/static/js/spaces.js?v2.0.0

1
2var timer;
3 var canvas, ctx, bg, target, targetSelected;
4 var targets = [];
5
6
7function draw(bgUrl, points)
8{
9  //
10  for (p in points)
11  {
12    var point = points[p];
13    targets.push([point[0], point[1], true, true]); // true = red, true = not hovered
14  }
15
16  //
17  canvas = document.querySelector('canvas');
18  ctx = canvas.getContext('2d');
19
20   bg = new Image();
21   bg.onload = function() {
22
23     ctx.drawImage(bg, 0, 0, canvas.width, canvas.height);
24
25     targetSelected = new Image();
26     targetSelected.onload = function() {
27
28       target = new Image();
29       target.onload = function() {
30
31         for(i in targets)
32         {
33          var t = targets[i];
34          ctx.drawImage(target, t[0], t[1], 60, 60);
35         }
36       }
37       target.src = "/static/img/target.png";
38
39
40     }
41     targetSelected.src = "/static/img/target-selected.png";
42
43   }
44   bg.src = bgUrl;
45
46
47
48   $(window).resize(function(){
49
50     // debounce
51     clearTimeout(timer);
52     timer = setTimeout(function(){
53
54       if ($(window).width() < 768)
55       {
56         $('.info').show();
57       }
58       else
59       {
60         $('.info').hide();
61       }
62
63       for(i in targets)
64       {
65        var t = targets[i];
66        t[2] = true;
67       }
68
69       redraw();
70
71
72     }, 100);
73
74   });
75
76
77  setTargetDetection();
78
79}
80
81
82
83
84
85 function redraw()
86 {
87   // clear
88   ctx.clearRect(0, 0, canvas.width, canvas.height);
89
90   // bg
91   ctx.drawImage(bg, 0, 0, canvas.width, canvas.height);
92
93   //
94   for(i in targets)
95   {
96    var t = targets[i];
97
98    // if not selected
99    if (t[2] && t[3])
100    {
101      ctx.drawImage(target, t[0], t[1], 60, 60);
102    }
103   }
104
105   // draw the selected
106   for(i in targets)
107   {
108    var t = targets[i];
109
110    // if selected
111    if (!t[2] || !t[3])
112    {
113      ctx.drawImage(targetSelected, t[0], t[1], 60, 60);
114    }
115   }
116
117 }
118
119
120
121 function setTargetDetection()
122 {
123   canvas.addEventListener('mousemove', function(event) {
124
125     var x = canvas.width * (event.offsetX / ctx.canvas.clientWidth);
126     var y = canvas.height * (event.offsetY / ctx.canvas.clientHeight);
127
128     //
129     for(i in targets)
130     {
131       var t = targets[i];
132
133       // found
134       if (x >= t[0] && x < (t[0]+60) && y >= t[1] && y < (t[1]+60) )
135       {
136         // red - not already clicked on
137         if (t[2] === true)
138         {
139           // mark it as hovered
140           t[3] = false;
141
142         }
143
144       }
145       else if(t[3] == false)
146       {
147         t[3] = true; // set it back to not hovered
148       }
149
150     }
151
152     redraw();
153
154   }, false);
155
156
157
158   canvas.addEventListener('click', function(event) {
159
160     var windowWidth = $(window).width();
161     var windowHeight = $(window).height();
162
163     if (windowWidth < 768)
164     {
165       return;
166     }
167
168     //
169      var x = canvas.width * (event.offsetX / ctx.canvas.clientWidth);
170      var y = canvas.height * (event.offsetY / ctx.canvas.clientHeight);
171
172      //
173      for(i in targets)
174      {
175        var t = targets[i];
176
177        // found
178        if (x >= t[0] && x < (t[0]+60) && y >= t[1] && y < (t[1]+60) )
179        {
180          //
181          var infoWidth = $('#info-'+i).outerWidth();
182          var infoHeight = $('#info-'+i).outerHeight();
183
184
185          // mark as the opposite of the current visibility
186          t[2] = !t[2];
187
188
189          // default to the right
190          var top = event.offsetY;
191          var left = event.offsetX;
192
193          //
194          if (event.offsetX + infoWidth < windowWidth)
195          {
196            // to the right
197            // no change
198          }
199          else if (event.offsetX - infoWidth < windowWidth && (event.offsetX - infoWidth >= 0) )
200          {
201            // adjust the left
202            left = event.offsetX - infoWidth;
203          }
204          else
205          {
206            // in the middle
207            left = (windowWidth/2) - infoWidth/2;
208          }
209
210          // more space above than below
211          if (y > canvas.height / 2)
212          {
213            top -= infoHeight;
214          }
215
216
217
218          $('#info-'+i).css({
219
220            top: top,
221            left: left
222
223          }).toggle();
224
225        }
226        else
227        {
228            t[2] = true;
229
230           $('#info-'+i).hide();
231        }
232
233        redraw();
234      }
235
236
237
238   }, false);
239 }