Maintenant, tout dans le executor.php. Fin de tempPreMega.

Ajout d'un super simulateur de tours de Monoï dans la page 404.
2021-06-06 12:48:11 +02:00
parent 228f54d140
commit 38ec48c9fc
55 changed files with 1853 additions and 1042 deletions
@@ -0,0 +1,156 @@
+<span id="out"></span><br/>
+<canvas id="pieces" width="1000" height="500"></canvas>
+
+<script type="text/javascript">
+	var pieceColor = "#33E722";
+	var backColor = "#212121";
+	var canvas = document.getElementById('pieces');
+	var drawWidth = document.body.clientWidth - 50
+	canvas.width = drawWidth;
+	var ctx = canvas.getContext('2d');
+	ctx.fillStyle = backColor;
+	ctx.fillRect(0,0,drawWidth,500);
+	roundRect(ctx,10,10,100,70,5,true,false);
+	var tas=[[0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16,17,18,19],[],[]];
+	//var tas=[[0,1,2],[],[]];
+	var X = [drawWidth/4,drawWidth/2,3*drawWidth/4];
+	var Y = 450;
+	var Yhigh = 30;
+	var moves = [];
+	var pieceHeigth = 7;
+	var pieceLevitation = 1;
+	var speed = 5;
+	var pieceDelta = 1;
+	var getWidthFromSize = function(x){return 7*x+10;}
+	var entreDeux = 200;
+	document.getElementById('out').innerHTML="Géneration des déplacements";
+	bouge(0,2,1,19);
+	document.getElementById('out').innerHTML="Placement des pieces";
+	redraw();
+	
+	function bouge(a,b,c,z){
+		if(z===1){moves.push([a,b]);return;}
+		bouge(a,c,b,z-1);
+		bouge(a,b,c,1);
+		bouge(c,b,a,z-1);
+	}
+	da = moves[moves.length-1][0];
+	db = moves[moves.length-1][1];
+	deplacer(da,db);
+	
+	function pieceDeplacing(){
+		var signe = (da>db)?-1:1;
+		ctx.fillStyle = backColor;
+		ctx.fillRect(oldX,oldY,L,pieceHeigth);
+		oldX = oldX + (signe * pieceDelta);
+		if((signe===1)?oldX>=endX:oldX<=endX){
+			setTimeout(pieceDescending,speed);
+			oldX = endX;
+		}else
+			setTimeout(pieceAscending,speed);
+			
+		ctx.fillStyle = pieceColor;
+		ctx.fillRect(oldX,oldY,L,pieceHeigth);
+	}
+	
+	function pieceAscending(){
+		ctx.fillStyle = backColor;
+		ctx.fillRect(oldX,oldY,L,pieceHeigth);
+		oldY = oldY-pieceDelta;
+		if(oldY<=topY){
+			oldY = topY
+			setTimeout(pieceDeplacing,speed);
+		}else
+			setTimeout(pieceAscending,speed);
+		ctx.fillStyle = pieceColor;
+		ctx.fillRect(oldX,oldY,L,pieceHeigth);
+	}
+				
+	function pieceDescending(){
+		ctx.fillStyle = backColor;
+		ctx.fillRect(oldX,oldY,L,pieceHeigth);
+		oldY = oldY + pieceDelta;
+		if(oldY>=endY){
+			oldY = endY;
+			setTimeout(finishDeplacing,speed);
+		}else
+			setTimeout(pieceDescending,speed);
+		ctx.fillStyle = pieceColor;
+		ctx.fillRect(oldX,oldY,L,pieceHeigth);
+		
+	}
+	function redraw(){
+		ctx.fillStyle = backColor;
+		ctx.fillRect(0,0,drawWidth,500);
+		ctx.fillStyle = pieceColor;
+		for(var t = 0;t<tas.length;t++){//Pour chaque tas (t)
+			for(var i = 0;i<tas[t].length;i++){//Pour chaque piece du tas  (i du tas t)
+				L = getWidthFromSize(tas[t][i]);
+				oldX = Math.round(X[t]- (L/2));
+				oldY = Math.round(Y-(pieceHeigth+pieceLevitation)*(tas[t].length-i));
+				ctx.fillRect(oldX,oldY,L,pieceHeigth);
+			}
+		}
+	}
+	
+	function deplacer(a,b){
+		document.getElementById('out').innerHTML=a+'->'+b;
+		da=a;
+		db=b;
+		L = getWidthFromSize(tas[da][0]);
+		topY = Math.round(Yhigh-pieceHeigth/2);
+		endX = X[db] - L/2;
+		endY = Math.round(Y-(pieceHeigth+pieceLevitation)*(tas[db].length + 1));
+		oldX = Math.round(X[da]- (L/2));
+		oldY = Math.round(Y-(pieceHeigth+pieceLevitation)*(tas[da].length));
+		ctx.fillStyle = backColor;
+		ctx.fillRect(oldX,oldY,L,pieceHeigth);
+		setTimeout(pieceAscending,entreDeux);//TODO timeout variatisation
+	}
+
+	function finishDeplacing(){
+		tas[db].unshift(tas[da][0]);
+		tas[da].shift();
+		moves.shift();
+		if(moves.length>0){
+			console.log(moves[0][0]+'->'+moves[0][1]);
+			setTimeout(function(){deplacer(moves[0][0],moves[0][1]);},entreDeux);
+			//redraw();
+		}else{
+			//redraw();
+			console.log("Done !!!");
+		}
+			
+	}
+	function roundRect(ctx,x,y,width,height,radius,fill,stroke){
+		//console.log('roundRect('+x+','+y+','+width+','+height+')');
+		if(typeof stroke === 'undefined')
+			stroke = true;
+		if(typeof radius === 'undefined')
+			radius = 5;
+		if(typeof radius === 'number')
+			radius = {tl:radius,tr:radius,br:radius,bl:radius};
+		else{
+			var defaultRadius = {tl:0,tr:0,br:0,bl:0};
+			for(var side in defaultRadius)
+				radius[side] = radius[side] || defaultRadius[side];
+		}
+		ctx.beginPath();
+		ctx.moveTo(x+radius.tl, y);
+		ctx.lineTo(x+width-radius.tr, y);
+		ctx.quadraticCurveTo(x+width,y,x+width,y+radius.tr);
+		ctx.lineTo(x+width, y+height-radius.br);
+		ctx.quadraticCurveTo(x+width,y+height,x+width-radius.br,y+height);
+		ctx.lineTo(x+radius.bl, y+height);
+		ctx.quadraticCurveTo(x,y+height,x,y+height-radius.br);
+		ctx.lineTo(x, y+radius.tl);
+		ctx.quadraticCurveTo(x,y,x+radius.tl,y);
+		ctx.closePath();
+		if(fill)
+			ctx.fill();
+		if(stroke)
+			ctx.stroke();
+		
+		
+	}
+</script>