js/lesson.js


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127

$(document).ready(
    function(){

	var k = Karma(assetList);

	k.ready(function() {
            
            logos;
            
            activities;
            
            k.ready(function(){
            
                
		    //game logic
            function draw(){  
                var canvas = document.getElementById('ladder');  
                if (canvas.getContext){
                    var ctx = canvas.getContext('2d');
                    var rows = 1 + (activities.length / 7);
                    var maxx = 1200;
                    var cellsize = 64;
                    var maxy = rows * 2.5 * cellsize;
                    canvas.setAttribute('width', maxx);
                    canvas.setAttribute('height', maxy);
                    var x = 0;
                    var y = 0;
                    var odd = 1;
                    var xstart = 1.7 * cellsize;
                    var ystart = maxy - cellsize;
                    var row = 0;
                    var cells = 15;
                    var cell = 0;
                    var id = -1;
                    var ix = 0;
                    var idm = 0;
                    var activity = 0;
                    var flag = 0;
                 
                    // ladder
                    ctx.font = "14pt Arial";
                    // ctx.textAlign = "center";
                    x = xstart;
                    y = ystart;
                    ctx.beginPath();
                    ctx.fillRect(x-cellsize*0.8,y+0.15*cellsize,cellsize*0.5,cellsize*0.2);
                    ctx.moveTo(x-cellsize*0.5,y);
                    ctx.lineTo(x-cellsize*0.2,y+0.25*cellsize);
                    ctx.moveTo(x-cellsize*0.5,y+0.5*cellsize);
                    ctx.lineTo(x-cellsize*0.2,y+0.25*cellsize);       
                    for(row=0;row<rows;row++){
                        if (activity == activities.length) {
                            break;
                        };
                        if (row % 2 == 0) {
                            x = xstart;
                        } else {
                            x = xstart + (cells - 1)*cellsize;
                        };
                        for(cell=0;cell<cells;cell++){
                            if (activity < activities.length){
                                ctx.strokeRect(x,y,cellsize, cellsize / 2);
                                if (cell % 2 == 1) {
                                    drawlogo(x,y,activity);
                                    activity = activity + 1;
                                }
                                if (row % 2 == 0){
                                    x = x + cellsize;
                                } else {
                                    x = x - cellsize;
                                }
                            }                       
                        }
                        if ((row + 1 < rows) &&
                            (activity < activities.length)) {
                            if (odd == 1) {
                                ctx.moveTo(x,y);
                                ctx.arc(x, y-cellsize, cellsize, Math.PI/2, 0, 1);
                                ctx.arc(x, y-cellsize, 1.5*cellsize, 0, Math.PI*3/2, 1);
                                ctx.arc(x, y-cellsize, cellsize, Math.PI*3/2, 0, 0);
                                ctx.arc(x, y-cellsize, 1.5*cellsize, 0, Math.PI/2, 0);
                                ctx.stroke();
                                odd = 0;
                            } else {
                                x = xstart;
                                ctx.moveTo(x,y);
                                ctx.arc(x, y-cellsize, cellsize, Math.PI/2, Math.PI, 0);
                                ctx.arc(x, y-cellsize, 1.5*cellsize, Math.PI, Math.PI*3/2, 0);
                                ctx.arc(x, y-cellsize, cellsize, Math.PI*3/2, Math.PI, 1);
                                ctx.arc(x, y-cellsize, 1.5*cellsize, Math.PI, Math.PI/2, 1);
                                ctx.stroke();
                                odd = 1;
                            }
                        }
                        y = y - 2.5 * cellsize; 
                        x = xstart;
                    }
                } 
             
                function drawlogo(x, y, activity) {

                        id = activities[activity][0];
                        ix = activities[activity][1];
                        if (id == 0){
                            // draw milestone
                            ctx.moveTo(x,y);
                            ctx.lineTo(x,y-cellsize);
                            ctx.moveTo(x+cellsize, y-cellsize);
                            ctx.lineTo(x+cellsize, y);
                            ctx.moveTo(x, y-cellsize);
                            ctx.arc(x+0.5*cellsize,y-cellsize,0.5*cellsize,Math.PI,0,0);
                            ctx.fillText(ix, x + (cellsize * 0.3), y-(cellsize * 0.4), cellsize);
                            ctx.stroke();
                        } else {
                            // draw logo
                            k.canvas["ladder"].drawImage(k.image[logos[id-1]].media, x, y - cellsize);
                            if (ix > 0) {
                                ctx.fillText(ix, x + (cellsize * 0.3), y + (cellsize * 0.4), cellsize);
                            }
                        }
                }    
            }

            draw();
        });
    });
});