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
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
|
// Available teams
const teams = [ 'wingl', 'musclel', 'stringl', 'cavity', 'stringr', 'muscler', 'wingr' ]
// Steps to finish
const max_steps = 42
// Animation duration in ms
const move_duration = 15000
let prev_step = 0
let step = 0;
let map = Snap('#left-bits');
let wingr = map.select('#wingr');
let wingrbbox = wingr.getBBox();
let wingl = map.select('#wingl');
let winglbbox = wingl.getBBox();
let musclel = map.select('#musclel');
let musclelbbox = musclel.getBBox();
let muscler = map.select('#muscler');
let musclerbbox = muscler.getBBox();
let stringl = map.select('#stringl');
let stringlbbox = stringl.getBBox();
let stringr = map.select('#stringr');
let stringrbbox = stringr.getBBox();
let cavity = map.select('#cavity');
let cavitybbox = cavity.getBBox();
// Assign a team for this browser
let team = teams[rInt(0, teams.length - 1)]
// Score keeps number of steps per team
let Score = {}
let resetScore = function() {
Score = {}
teams.forEach(function(t, i) {
Score[t] = { pas: 0 }
})
}
resetScore() // Populate Score hash
let reportScore = function() {
teams.forEach(function(t, i) {
$('#pas-' + t).text(Score[t]['pas'])
})
}
let updateScore = function(team, step) {
Score[team]['pas'] = Score[team]['pas'] + step;
}
// Handle devicemotion: move team along path
let moveRequested = function() {
// Each team gets a path and moves on it
teams.forEach(function(t, i) {
t_path = map.select('#path' + parseInt(1 + i))
console.log('## team', t, 'takes', t_path.attr('id'))
// How many steps to play? The more steps the slower.
// Note that more steps than available pixels on the path will break...
pas = parseInt($('#pas-' + t).text())
if (pas > max_steps) {
pas = 0
console.log('!! team', t, 'finished!')
}
// Calculate moving distance
length = Snap.path.getTotalLength(t_path)
step_l = Math.floor(length / max_steps)
console.log(' each step is', step_l, 'pixels')
if (pas == 0 || Score[t]['pas'] > pas) {
Score[t]['pas'] = pas + 1
// Advance one step
move(step_l * pas, step_l * Score[t]['pas'], t, t_path)
reportScore()
console.log(' pas', Score[t]['pas'], '/', max_steps)
// $('#pas-max-' + t).text((step_l * Score[t]['pas']) + ' / ' + length)
$('#pas-max-' + t).css('width', (step_l * Score[t]['pas'] * 100) / length + '%').css('background', '#cccc').text(length + 'px')
}
})
// console.log('Score:', Score)
}
function angle(n) {
return rInt(-n, n);
}
function rInt(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
// SVG transform for each team
function teamTransform(team, point) {
var transform;
switch(team) {
case 'wingr':
transform = 'translate(' + point.x + ',' + point.y + ') '
break;
case 'muscler':
transform = 'translate(' + point.x + ',' + point.y + ') rotate(' + (point.alpha - 360)+ ', ' + musclerbbox.cx + ', ' + musclerbbox.cy + ')'
break;
case 'stringr':
transform = 'translate(' + x + ',' + y + ') rotate('+ (point.alpha - 360)+', '+stringrbbox.cx+', '+stringrbbox.cy+')'
break;
case 'cavity':
transform = 'translate(' + x + ',' + y + ') rotate('+ (point.alpha - 360)+', '+cavitybbox.cx+', '+cavitybbox.cy+')'
break;
case 'stringl':
transform = 'translate(' + x + ',' + y + ') rotate('+ (point.alpha - 360)+', '+stringlbbox.cx+', '+stringlbbox.cy+')'
break;
case 'musclel':
transform = 'translate(' + x + ',' + y + ') rotate('+ (point.alpha - 360)+', '+musclelbbox.cx+', '+musclelbbox.cy+')'
break;
case 'wingl':
transform = 'translate(' + x + ',' + y + ')'
break;
}
// console.log(team, 'transform', transform)
return transform
}
// Execute a move
function move(from, to, team, path) {
Snap.animate(from, to, function(val) {
// Move to this point on path
toPoint = Snap.path.getPointAtLength(path, val)
x = toPoint.x; y = toPoint.y
// Execute SVG transform according to team
eval(team).transform(teamTransform(team, toPoint))
}, move_duration, mina.easeout)
}
$(document).ready(function() {
// Each team gets a path and moves on it
teams.forEach(function(t, i) {
// if (t == team) {
t_path = map.select('#path' + parseInt(1 + i))
console.log('## team', t, 'takes', t_path.attr('id'))
pas = parseInt($('#pas-' + t).text())
if (pas > max_steps) {
pas = 0
console.log('!! team', t, 'finished!')
}
Score[t]['pas'] = pas
reportScore()
console.log(' pas', pas, '/', max_steps)
length = Snap.path.getTotalLength(t_path)
steps = Math.floor(length / max_steps)
console.log(' each step is', steps, 'pixels')
// $('#pas-max-' + t).text(steps * pas + ' / ' + length)
$('#pas-max-' + t).text((steps * pas * 100) / length + '%')
move(steps * pas, length, t, t_path)
// }
})
console.log('------------------------------------------------------------')
console.log('-*- ', teams.length, 'playing. Your team is ', team)
// Keep score
resetScore()
teams.forEach(function(t) {
var dt = $('<dt>').text(t)
var dd = $('<dd>').attr('id', 'pas-' + t).text(Score[t]['pas'])
var de = $('<dd>').attr('id', 'pas-max-' + t).css('display', 'block')
$('#score').append(dt).append(dd).append(de)
})
// Listen to moves
document.addEventListener("requestMove", moveRequested, false);
})
|
