diff options
Diffstat (limited to 'assets/js/index4.js')
| -rw-r--r-- | assets/js/index4.js | 178 |
1 files changed, 178 insertions, 0 deletions
diff --git a/assets/js/index4.js b/assets/js/index4.js new file mode 100644 index 0000000..150d838 --- /dev/null +++ b/assets/js/index4.js @@ -0,0 +1,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); + +}) + |