QW4 simulates multiplayer.

2 files changed, 271 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);
+
+})
+
diff --git a/assets/js/pedometer4.js b/assets/js/pedometer4.js
new file mode 100644
index 0000000..6b59963
--- /dev/null
+++ b/assets/js/pedometer4.js
@@ -0,0 +1,93 @@
+// Interval milliseconds between accelerometer readings
+const poll_interval = 200
+
+
+$(document).ready(function(){
+
+    // We may not have an accelerometer
+    var has_accel = false
+
+    // Make the SVG occupy all the screen
+    $('body').css({ width: '100vw', height: '100vh', margin: 0, padding: 0, overflow: 'hidden' })
+    $('#left-bits').css({ width: '100%', height: '100%', background: '#931', margin: 0 })
+	.removeAttr('viewBox')
+	.each(function() { $(this)[0].setAttribute('viewBox', '0 0 ' + parseInt($('body').css('width')) + ' ' + parseInt($('body').css('height'))) })
+
+    console.log("-- ready --");
+
+    // on déclare l'ensemble des variables ax et ay sont les données
+    // d'acceleration, n c'est la norme, maxn et minn les valeurs max
+    // et min de la norme, et pas le nombre de pas
+    var n=0, maxn = 0, minn = 0, pas = 0,
+	ax = 0, ay = 0, az = 0, pass=0;
+
+    function odmHandler(e) {
+	// we do have an accelerometer
+	has_accel = true
+	// read from it
+	ax = event.accelerationIncludingGravity.x ;
+	ay = event.accelerationIncludingGravity.y ;
+	az = event.accelerationIncludingGravity.z ;
+    }
+
+    // fake an accelerometer
+    // min/max at -12/12 mean reasonably fast pace
+    // grow to accelerate
+    // < 10 might not bring any result
+    function fakeAccel() {
+	var min = -12, max = 12
+	return Math.random() * (max - min) + min;
+    }
+
+    function mockAccelerometer() {
+	// we're on a desktop, yep
+	has_accel = false
+	// make up values
+	ax = fakeAccel()
+	ay = fakeAccel()
+	az = fakeAccel()
+    }
+
+    //programme	d'alberto desarullo qui va chercher les données de l'accelerometre
+    // Why do you have the interface if you don't have the device?
+    if (window.DeviceMotionEvent != undefined) {
+	window.ondevicemotion = odmHandler
+
+	var ev = new Event("requestMove");
+
+	function pollAccelerometer() {
+	    setInterval(makeStep, poll_interval)
+	}
+
+	function makeStep() {
+	    if (!has_accel) {
+		// no accelerometer: fake values
+		mockAccelerometer()
+	    }
+	    // on calcule la norme c'est à dire la taille du
+	    // vecteur qui est défini par les points
+	    // d'accélération ax ay et az
+	    n0 = n;
+	    n  = Math.sqrt (ax*ax + ay*ay + az*az);
+
+	    // on calcule un min et max pour la norme		
+	    if (n < n0) {
+		minn = n ;
+	    } else if (n > n0) {
+		maxn = n ;
+	    }
+	
+	    // on définit un seuil qui correspond à un pas
+	    if ((maxn - minn) > 10) {
+		// on simule multi-joueur en assignant une team au pas
+		//pas = pas+1;
+		var this_team = teams[rInt(0, teams.length - 1)]
+		updateScore(this_team, 1)
+		document.dispatchEvent(ev);
+	    }
+	}
+	
+	pollAccelerometer();
+    } 
+
+})