changement disposition + séparation du code en fichiers + ajout d'un chrono

apercu-reserve
adplantade 5 years ago
parent e1d77f878e
commit 7d2ccaf708

@ -0,0 +1,57 @@
var startTime = 0
var start = 0
var end = 0
var diff = 0
var timerID = 0
function chrono(){
end = new Date()
diff = end - start
diff = new Date(diff)
var msec = diff.getMilliseconds()
var sec = diff.getSeconds()
var min = diff.getMinutes()
var hr = diff.getHours()-1
if (min < 10){
min = "0" + min
}
if (sec < 10){
sec = "0" + sec
}
if(msec < 10){
msec = "00" +msec
}
else if(msec < 100){
msec = "0" +msec
}
document.getElementById("chronotime").innerHTML = hr + ":" + min + ":" + sec + ":" + msec
timerID = setTimeout("chrono()", 10)
}
function chronoStart(){
document.chronoForm.startstop.value = "stop!"
document.chronoForm.startstop.onclick = chronoStop
document.chronoForm.reset.onclick = chronoReset
start = new Date()
chrono()
}
function chronoContinue(){
document.chronoForm.startstop.value = "stop!"
document.chronoForm.startstop.onclick = chronoStop
document.chronoForm.reset.onclick = chronoReset
start = new Date()-diff
start = new Date(start)
chrono()
}
function chronoReset(){
document.getElementById("chronotime").innerHTML = "0:00:00:000"
start = new Date()
}
function chronoStopReset(){
document.getElementById("chronotime").innerHTML = "0:00:00:000"
document.chronoForm.startstop.onclick = chronoStart
}
function chronoStop(){
document.chronoForm.startstop.value = "start!"
document.chronoForm.startstop.onclick = chronoContinue
document.chronoForm.reset.onclick = chronoStopReset
clearTimeout(timerID)
}

@ -1,7 +1,7 @@
.all-container { .all-container {
display : flex; display : flex;
justify-content: space-between; justify-content: space-evenly;
/* /*
align-items: baseline; align-items: baseline;
width : min-content; width : min-content;

@ -8,12 +8,17 @@
<body> <body>
<ul id="all-container" class="all-container" style="border:2px solid orangered"> <ul id="all-container" class="all-container" style="border:2px solid orangered">
<ul id="obj-container" class="obj-container" style="border:2px solid yellow"> <ul id="obj-container" class="obj-container" style="border:2px solid yellow">
<h1>R&eacute;sultat</h1> <p id="temps"></p>
<canvas id="canvasTotal" class="vitrail"></canvas> <span id="chronotime">0:00:00:00</span>
<form name="chronoForm">
<input type="button" name="startstop" value="start!" onClick="chronoStart()" />
<input type="button" name="reset" value="reset!" onClick="chronoReset()" />
</form>
<p id="stats"></p>
<h1>Objectif</h1> <h1>Objectif</h1>
<canvas id="canvasObj" class="vitrail"></canvas> <canvas id="canvasObj" class="vitrail"></canvas>
<button onclick="generateEasy()">gen easy</button> <h1>R&eacute;sultat</h1>
<p id="stats"></p> <canvas id="canvasTotal" class="vitrail"></canvas>
</ul> </ul>
<ul id="vitraux" class="vitraux" style="border:2px solid purple"> <ul id="vitraux" class="vitraux" style="border:2px solid purple">
<canvas id="canvas1" class="vitrail"></canvas> <canvas id="canvas1" class="vitrail"></canvas>
@ -35,570 +40,8 @@
</ul> </ul>
</ul> </ul>
<script> <script src="chrono.js"></script>
<script src="vitraux.js"></script>
var canvasT = document.getElementById('canvasTotal');
var ctxT = canvasT.getContext('2d');
var canvasO = document.getElementById('canvasObj');
var ctxO = canvasO.getContext('2d');
var canvasR = document.getElementById('canvasR');
//var ctxR = canvasR.getContext('2d');
tab1=[];
tab2=[];
tab3=[];
tab4=[];
tabR=[];
points=0;
tabTotal=[];
tabObjCmp=[];
mousePos=[];
colorsAvailable=["red","yellow","green","purple"];
colors=["red","yellow","green","purple"];
size=120; // 6 lignes de 50px // 6 colonnes de 50px
canvasT.width=size;
canvasO.width=size;
canvasT.height=size;
canvasO.height=size;
for(var a=1;a<5;a++)
{
eval("var canvas"+ a +"= document.getElementById('canvas"+a+"')");
eval("var ctx"+a+" = canvas"+a+".getContext('2d')");
eval("canvas"+a+".width=size");
eval("canvas"+a+".height=size");
eval("var canvasR"+ a +"= document.getElementById('canvasR"+a+"')");
eval("var ctxR"+a+" = canvasR"+a+".getContext('2d')");
eval("canvasR"+a+".width=size");
eval("canvasR"+a+".height=size");
}
function faireCercle0(x,y,color,lectx){
var cercle = new Path2D();
nx=(size/6)*(x>0 ? x+2 : x+3);
ny=(size/6)*(y>0 ? y+2 : y+3);
cercle.moveTo(nx, ny);
cercle.arc(nx+(size/12), ny+(size/12), (size/12), 0, 2 * Math.PI);
lectx.fillStyle = color;
lectx.fill(cercle);
}
function drawImg(x,y,color,lectx)
{
var img= new Image();
var nx=(size/6)*(x>0 ? x+2 : x+3);
var ny=(size/6)*(y>0 ? y+2 : y+3);
img.src="ress/"+color+".png";
img.onload = function(){
lectx.drawImage(img,nx,ny,size/6,size/6);
}
}
function tourneG(letab,lecanvas,lectx)
{
letab.forEach(element => {
tmp=element[0];
element[0]=element[1];
element[1]=-tmp;
});
toutDessiner(letab,lecanvas,lectx);
empiler();
}
function tourneD(letab,lecanvas,lectx,sselem=null)
{
if(sselem==null){
letab.forEach(element => {
tmp=element[1];
element[1]=element[0];
element[0]=-tmp;
});
}
else {
letab[sselem].forEach(element => {
tmp=element[1];
element[1]=element[0];
element[0]=-tmp;
});
}
//console.log("pre-empiler :"+tabTotal);
empiler(sselem!=null);
//console.log("post-empiler :"+tabTotal);
if(sselem==null)
toutDessiner(letab,lecanvas,lectx);
}
function toutDessiner(pts,lecanvas,lectx)
{
lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
if(pts[0])
{
var i=1*(typeof pts[0]==="boolean");
for(i;i<pts.length;i++)
{
if(Array.isArray(pts[i]))
{
drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
}
}
}
}
function empiler(obj=false)
{
const unique = (val) => val.toString() != test.toString();
var exists=false;
if(!obj)
{
tabTotal=[];
if(tab1[0])
{
tab1.forEach(element => {
if(Array.isArray(element))
{
tabTotal.push(element);
}
})
}
if(tab2[0]){
tab2.forEach(element => {
if(Array.isArray(element))
{
colors.forEach(col => {
test=[element[0],element[1],col];
if(!exists)
exists=!tabTotal.every(unique);
})
if(!exists)
tabTotal.push(element);
exists=false;
}
})
}
if(tab3[0])
{
tab3.forEach(element => {
if(Array.isArray(element)){
colors.forEach(col => {
test=[element[0],element[1],col];
if(!exists)
exists=!tabTotal.every(unique);
})
if(!exists)
tabTotal.push(element);
exists=false;
}
})
}
if(tab4[0]){
tab4.forEach(element => {
if(Array.isArray(element))
{
colors.forEach(col => {
test=[element[0],element[1],col];
if(!exists)
exists=!tabTotal.every(unique);
})
if(!exists)
tabTotal.push(element);
exists=false;
}
})
}
checkAllOK();
toutDessiner(tabTotal,canvasT,ctxT);
}
else{
tabObjCmp=[];
for(count=1;count<tabObj[0].length;count++)
{
tabObjCmp.push(tabObj[0][count]);
}
for(tabCount=1;tabCount<tabObj.length;tabCount++)
{
for(elmCount=1;elmCount<tabObj[tabCount].length;elmCount++)
{
element=tabObj[tabCount][elmCount];
colors.forEach(col => {
test=[element[0],element[1],col];
if(!exists)
exists=!tabObjCmp.every(unique);
})
if(!exists)
tabObjCmp.push(element);
exists=false;
}
}
}
}
function swap(letab, lecanvas, lectx,ladir){
if(ladir=="H"){
letab.forEach(element=> {
element[1]=-element[1];
})
}
else {
letab.forEach(element=> {
element[0]=-element[0];
})
}
toutDessiner(letab,lecanvas,lectx);
empiler();
}
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max))+1;
}
function copyMDArray(array) //permet la copie d'arrays sans copier les références
{
var newArray = [];
array.forEach(element => {
newArray.push(Array.from(element))
});
return newArray
}
function generateEasy(){
console.log(copyMDArray(tab1))
tabObj=[copyMDArray(tab1),copyMDArray(tab2),copyMDArray(tab3),copyMDArray(tab4)];
tabObjCmp=[];
actions=getRandomInt(8)+1;
while(actions>0){
tourneD(tabObj,canvasO,ctxO,getRandomInt(4)-1);
actions--;
}
empiler(true);
toutDessiner(tabObjCmp,canvasO,ctxO);
}
function getMousePosition(lecanvas, event, lectx, letab) {
let rect = lecanvas.getBoundingClientRect();
let x = event.clientX - rect.left;
let y = event.clientY - rect.top;
let dir = compas(x,y,lecanvas);
if(x<lecanvas.width/2)
tourneG(letab,lecanvas,lectx);
else
tourneD(letab,lecanvas,lectx);
}
/// renvoie le point cardianl où se trouve le point
function compas(x,y,lecanvas)
{
rect = lecanvas.getBoundingClientRect();
x = event.clientX - rect.left;
y = event.clientY - rect.top;
ne = x>y;
se = x>lecanvas.height-y;
if(ne && se ) return "E";
if(ne && !se ) return "N";
if(!ne && se ) return "S";
if(!ne && !se ) return "O";
}
/*
6 cas : v1 vis->v1 vis
*/
function rotationManager(e)
{
var mouseOnRes = mousePos[0].match(/[R]/g)!=null;
canvasNumber=e.currentTarget.id.substring(6);
document.getElementById("canvas"+mousePos[0]).classList.remove('vitrail-select');
if(mouseOnRes && canvasNumber!="R")
{
if(!isVisible(canvasNumber))
{
toggleVisible(canvasNumber);
tabR[canvasNumber]=[];
toggleVisible(mousePos[0].substring(1),true);
}
}
else
{
if(isVisible(mousePos[0]))
{
if(canvasNumber=="R")
{
toggleVisible(mousePos[0]);
tabR[mousePos[0]]=copyMDArray(eval("tab"+mousePos[0]));
tabR[mousePos[0]][0]=eval("tab"+mousePos[0]+"[0]");
toggleVisible(mousePos[0],true);
toutDessiner(eval("tabR["+(mousePos[0])+"]"),eval("canvasR"+mousePos[0]),eval("ctxR"+mousePos[0]));
//console.log(eval("tabR["+(mousePos[0]-1)+"]"));
}
else
{
lecanvas=eval("canvas"+canvasNumber);
letab=eval("tab"+canvasNumber);
lectx=lecanvas.getContext('2d');
dir = compas(e.clientX,e.clientY,e.currentTarget);
if(mousePos[0]==canvasNumber)
{
if((mousePos[1]=="N" && dir == "O") || (mousePos[1]=="S" && dir == "E") || (mousePos[1]=="O" && dir == "S") || (mousePos[1]=="E" && dir == "N"))
{
console.log("G");
tourneG(letab,lecanvas,lectx);
}
else if((mousePos[1] == "N" && dir == "E") || (mousePos[1] == "S" && dir == "O") || (mousePos[1] == "E" && dir == "S") || (mousePos[1] == "O" && dir == "N"))
{
console.log("D");
tourneD(letab,lecanvas,lectx);
}
else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E"))
{
console.log("V");
swap(letab,lecanvas,lectx,"V");
}
else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N"))
{
console.log("H");
swap(letab,lecanvas,lectx,"H");
}
}
else
{
changeOrder(mousePos[0],canvasNumber);
}
}
}
}
}
function checkAllOK(){
//const condition = (val) => val.toString() == element.toString();
var exists=true;
//exists=!tabObjCmp.every(unique);
if(tabTotal.length==tabObjCmp.length)
{
var verifTab=[];
verifTab=copyMDArray(tabTotal);
for(i=0;i<tabTotal.length;i++)
{
const result = verifTab.filter(point => point.toString()==tabObjCmp[i].toString());
exists*=result.length;
}
}
else
{
exists=false;
}
if(exists)
{
var audio = new Audio('ress/Jewel4.mp3');
audio.play();
points++;
document.getElementById("stats").innerHTML = points+" points";
generateEasy();
}
}
function changeOrder(from, to)
{
fromTab=eval("tab"+from);
toTab=eval("tab"+to);
for(i=0;i<toTab.length;i++)
{
[fromTab[i],toTab[i]]=[toTab[i],fromTab[i]];
}
//[fromTab,toTab]=[toTab,fromTab];
toutDessiner(fromTab,eval("canvas"+from),eval("ctx"+from));
toutDessiner(toTab,eval("canvas"+to),eval("ctx"+to));
empiler();
toutDessiner(tabTotal,canvasT,ctxT);
}
function isVisible(what)
{
if(what.includes("R"))
return eval("tabR["+what.substring(1)+"][0]");
return eval("tab"+what+"[0]");
}
function toggleVisible(where,reserve=false)
{
if(!reserve)
{
eval("tab"+where+"[0]=!tab"+where+"[0];");
empiler();
toutDessiner(eval("tab"+where),eval("canvas"+where),eval("ctx"+where));
toutDessiner(tabTotal,canvasT,ctxT);
}
else
{
tabR[where][0]=!tabR[where][0];
toutDessiner(eval("tabR["+where+"]"),eval("canvasR"+where),eval("ctxR"+where));
}
}
/*
function events() {
for(var i=1;i<5;i++)
{
lecanvas="canvas"+i
eval("canvas"+i).addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
document.getElementById(lecanvas).classList.add('vitrail-select');
});
eval("canvas"+i).addEventListener("mouseup",function(e){
rotationManager(e);
})
}
}*/
canvas1.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
document.getElementById("canvas1").classList.add('vitrail-select');
})
canvas2.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
document.getElementById("canvas2").classList.add('vitrail-select');
})
canvas3.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
document.getElementById("canvas3").classList.add('vitrail-select');
})
canvas4.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
document.getElementById("canvas4").classList.add('vitrail-select');
})
canvas1.addEventListener("mouseup",function(e){
rotationManager(e);
})
canvas2.addEventListener("mouseup",function(e){
rotationManager(e);
})
canvas3.addEventListener("mouseup",function(e){
rotationManager(e);
})
canvas4.addEventListener("mouseup",function(e){
rotationManager(e);
})
canvas1.addEventListener("mouseenter",function(e){
document.getElementById("canvas1").classList.add('vitrail-hover');
})
canvas1.addEventListener("mouseleave",function(e){
document.getElementById("canvas1").classList.remove('vitrail-hover');
})
canvas2.addEventListener("mouseenter",function(e){
document.getElementById("canvas2").classList.add('vitrail-hover');
})
canvas2.addEventListener("mouseleave",function(e){
document.getElementById("canvas2").classList.remove('vitrail-hover');
})
canvas3.addEventListener("mouseenter",function(e){
document.getElementById("canvas3").classList.add('vitrail-hover');
})
canvas3.addEventListener("mouseleave",function(e){
document.getElementById("canvas3").classList.remove('vitrail-hover');
})
canvas4.addEventListener("mouseenter",function(e){
document.getElementById("canvas4").classList.add('vitrail-hover');
})
canvas4.addEventListener("mouseleave",function(e){
document.getElementById("canvas4").classList.remove('vitrail-hover');
})
/*
canvasR.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
})
*/
canvasR1.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
document.getElementById("canvasR1").classList.add('vitrail-select');
})
canvasR2.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
document.getElementById("canvasR2").classList.add('vitrail-select');
})
canvasR3.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
document.getElementById("canvasR3").classList.add('vitrail-select');
})
canvasR4.addEventListener("mousedown",function(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
document.getElementById("canvasR4").classList.add('vitrail-select');
})
canvasR.addEventListener("mouseup",function(e){
rotationManager(e);
})
tab1.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
tab2.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
tab3.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
tab4.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
toutDessiner(tab1,canvas1,ctx1);
toutDessiner(tab2,canvas2,ctx2);
toutDessiner(tab3,canvas3,ctx3);
toutDessiner(tab4,canvas4,ctx4);
empiler();
toutDessiner(tabTotal,canvasT,ctxT);
document.getElementById("stats").innerHTML = points+" points";
//events();
</script>
</body> </body>
</html> </html>

@ -0,0 +1,507 @@
var canvasT = document.getElementById('canvasTotal');
var ctxT = canvasT.getContext('2d');
var canvasO = document.getElementById('canvasObj');
var ctxO = canvasO.getContext('2d');
var canvasR = document.getElementById('canvasR');
//var ctxR = canvasR.getContext('2d');
tab1=[];
tab2=[];
tab3=[];
tab4=[];
tabR=[];
tabR1=[];
tabR2=[];
tabR3=[];
tabR4=[];
points=0;
tabTotal=[];
tabObjCmp=[];
mousePos=[];
colorsAvailable=["red","yellow","green","purple"];
colors=["red","yellow","green","purple"];
size=screen.height/6; // 6 lignes de 50px // 6 colonnes de 50px
canvasT.width=size;
canvasO.width=size;
canvasT.height=size;
canvasO.height=size;
for(var a=1;a<5;a++)
{
eval("var canvas"+ a +"= document.getElementById('canvas"+a+"')");
eval("var ctx"+a+" = canvas"+a+".getContext('2d')");
eval("canvas"+a+".width=size");
eval("canvas"+a+".height=size");
eval("var canvasR"+ a +"= document.getElementById('canvasR"+a+"')");
eval("var ctxR"+a+" = canvasR"+a+".getContext('2d')");
eval("canvasR"+a+".width=size");
eval("canvasR"+a+".height=size");
}
function faireCercle0(x,y,color,lectx){
var cercle = new Path2D();
nx=(size/6)*(x>0 ? x+2 : x+3);
ny=(size/6)*(y>0 ? y+2 : y+3);
cercle.moveTo(nx, ny);
cercle.arc(nx+(size/12), ny+(size/12), (size/12), 0, 2 * Math.PI);
lectx.fillStyle = color;
lectx.fill(cercle);
}
function drawImg(x,y,color,lectx)
{
var img= new Image();
var nx=(size/6)*(x>0 ? x+2 : x+3);
var ny=(size/6)*(y>0 ? y+2 : y+3);
img.src="ress/"+color+".png";
img.onload = function(){
lectx.drawImage(img,nx,ny,size/6,size/6);
}
}
function tourneG(letab,lecanvas,lectx)
{
letab.forEach(element => {
tmp=element[0];
element[0]=element[1];
element[1]=-tmp;
});
toutDessiner(letab,lecanvas,lectx);
empiler();
}
function tourneD(letab,lecanvas,lectx,sselem=null)
{
if(sselem==null){
letab.forEach(element => {
tmp=element[1];
element[1]=element[0];
element[0]=-tmp;
});
}
else {
letab[sselem].forEach(element => {
tmp=element[1];
element[1]=element[0];
element[0]=-tmp;
});
}
//console.log("pre-empiler :"+tabTotal);
empiler(sselem!=null);
//console.log("post-empiler :"+tabTotal);
if(sselem==null)
toutDessiner(letab,lecanvas,lectx);
}
function toutDessiner(pts,lecanvas,lectx)
{
lectx.clearRect(0, 0, lecanvas.width, lecanvas.height);
if(pts[0])
{
var i=1*(typeof pts[0]==="boolean");
for(i;i<pts.length;i++)
{
if(Array.isArray(pts[i]))
{
drawImg(pts[i][0],pts[i][1],pts[i][2],lectx);
}
}
}
}
function empiler(obj=false)
{
const unique = (val) => val.toString() != test.toString();
var exists=false;
if(!obj)
{
tabTotal=[];
if(tab1[0])
{
tab1.forEach(element => {
if(Array.isArray(element))
{
tabTotal.push(element);
}
})
}
if(tab2[0]){
tab2.forEach(element => {
if(Array.isArray(element))
{
colors.forEach(col => {
test=[element[0],element[1],col];
if(!exists)
exists=!tabTotal.every(unique);
})
if(!exists)
tabTotal.push(element);
exists=false;
}
})
}
if(tab3[0])
{
tab3.forEach(element => {
if(Array.isArray(element)){
colors.forEach(col => {
test=[element[0],element[1],col];
if(!exists)
exists=!tabTotal.every(unique);
})
if(!exists)
tabTotal.push(element);
exists=false;
}
})
}
if(tab4[0]){
tab4.forEach(element => {
if(Array.isArray(element))
{
colors.forEach(col => {
test=[element[0],element[1],col];
if(!exists)
exists=!tabTotal.every(unique);
})
if(!exists)
tabTotal.push(element);
exists=false;
}
})
}
checkAllOK();
toutDessiner(tabTotal,canvasT,ctxT);
}
else{
tabObjCmp=[];
for(count=1;count<tabObj[0].length;count++)
{
tabObjCmp.push(tabObj[0][count]);
}
for(tabCount=1;tabCount<tabObj.length;tabCount++)
{
for(elmCount=1;elmCount<tabObj[tabCount].length;elmCount++)
{
element=tabObj[tabCount][elmCount];
colors.forEach(col => {
test=[element[0],element[1],col];
if(!exists)
exists=!tabObjCmp.every(unique);
})
if(!exists)
tabObjCmp.push(element);
exists=false;
}
}
}
}
function swap(letab, lecanvas, lectx,ladir){
if(ladir=="H"){
letab.forEach(element=> {
element[1]=-element[1];
})
}
else {
letab.forEach(element=> {
element[0]=-element[0];
})
}
toutDessiner(letab,lecanvas,lectx);
empiler();
}
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max))+1;
}
function copyMDArray(array) //permet la copie d'arrays sans copier les références
{
var newArray = [];
array.forEach(element => {
newArray.push(Array.from(element))
});
return newArray
}
function generateEasy(){
console.log(copyMDArray(tab1))
tabObj=[copyMDArray(tab1),copyMDArray(tab2),copyMDArray(tab3),copyMDArray(tab4)];
tabObjCmp=[];
actions=getRandomInt(8)+1;
while(actions>0){
tourneD(tabObj,canvasO,ctxO,getRandomInt(4)-1);
actions--;
}
empiler(true);
toutDessiner(tabObjCmp,canvasO,ctxO);
}
function getMousePosition(lecanvas, event, lectx, letab) {
let rect = lecanvas.getBoundingClientRect();
let x = event.clientX - rect.left;
let y = event.clientY - rect.top;
let dir = compas(x,y,lecanvas);
if(x<lecanvas.width/2)
tourneG(letab,lecanvas,lectx);
else
tourneD(letab,lecanvas,lectx);
}
/// renvoie le point cardianl où se trouve le point
function compas(x,y,lecanvas)
{
rect = lecanvas.getBoundingClientRect();
x = event.clientX - rect.left;
y = event.clientY - rect.top;
ne = x>y;
se = x>lecanvas.height-y;
if(ne && se ) return "E";
if(ne && !se ) return "N";
if(!ne && se ) return "S";
if(!ne && !se ) return "O";
}
function rotationManager(e)
{
var mouseOnRes = mousePos[0].match(/[R]/g)!=null;
canvasNumber=e.currentTarget.id.substring(6);
document.getElementById("canvas"+mousePos[0]).classList.remove('vitrail-select');
console.log(mousePos[0]+" vers "+canvasNumber+", mouseOnRes?"+mouseOnRes);
if(mouseOnRes && !canvasNumber.includes("R"))
{
if(!isVisible(canvasNumber))
{
toggleVisible(canvasNumber);
tabR[canvasNumber]=[];
toggleVisible(mousePos[0].substring(1),true);
}
}
else
{
if(isVisible(mousePos[0]))
{
if(canvasNumber.includes("R"))
{
if(tabR[canvasNumber]==null)
{
toggleVisible(mousePos[0]);
tabR[mousePos[0]]=copyMDArray(eval("tab"+mousePos[0]));
tabR[mousePos[0]][0]=eval("tab"+mousePos[0]+"[0]");
toggleVisible(mousePos[0],true);
toutDessiner(tabR[mousePos[0]],eval("canvasR"+mousePos[0]),eval("ctxR"+mousePos[0]));
//console.log(eval("tabR["+(mousePos[0]-1)+"]"));
}
else
{
changeOrder(mousePos[0],canvasNumber);
}
}
else
{
lecanvas=eval("canvas"+canvasNumber);
letab=eval("tab"+canvasNumber);
lectx=lecanvas.getContext('2d');
dir = compas(e.clientX,e.clientY,e.currentTarget);
if(mousePos[0]==canvasNumber)
{
if((mousePos[1]=="N" && dir == "O") || (mousePos[1]=="S" && dir == "E") || (mousePos[1]=="O" && dir == "S") || (mousePos[1]=="E" && dir == "N"))
{
console.log("G");
tourneG(letab,lecanvas,lectx);
}
else if((mousePos[1] == "N" && dir == "E") || (mousePos[1] == "S" && dir == "O") || (mousePos[1] == "E" && dir == "S") || (mousePos[1] == "O" && dir == "N"))
{
console.log("D");
tourneD(letab,lecanvas,lectx);
}
else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E"))
{
console.log("V");
swap(letab,lecanvas,lectx,"V");
}
else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N"))
{
console.log("H");
swap(letab,lecanvas,lectx,"H");
}
}
else
{
changeOrder(mousePos[0],canvasNumber);
}
}
}
}
}
function checkAllOK(){
//const condition = (val) => val.toString() == element.toString();
var exists=true;
//exists=!tabObjCmp.every(unique);
if(tabTotal.length==tabObjCmp.length)
{
var verifTab=[];
verifTab=copyMDArray(tabTotal);
for(i=0;i<tabTotal.length;i++)
{
const result = verifTab.filter(point => point.toString()==tabObjCmp[i].toString());
exists*=result.length;
}
}
else
{
exists=false;
}
if(exists)
{
var audio = new Audio('ress/Jewel4.mp3');
audio.play();
points++;
document.getElementById("stats").innerHTML = points+" points";
generateEasy();
}
}
function changeOrder(from, to)
{
if(from.includes("R"))
fromTab=tabR[from];
else
fromTab=eval("tab"+from);
if(to.includes("R"))
toTab=tabR[to];
else
toTab=eval("tab"+to);
for(i=0;i<toTab.length;i++)
{
[fromTab[i],toTab[i]]=[toTab[i],fromTab[i]];
}
//[fromTab,toTab]=[toTab,fromTab];
toutDessiner(fromTab,eval("canvas"+from),eval("ctx"+from));
toutDessiner(toTab,eval("canvas"+to),eval("ctx"+to));
empiler();
toutDessiner(tabTotal,canvasT,ctxT);
}
function isVisible(what)
{
if(what.includes("R"))
{
if(eval("tabR["+what+"]")==null)
return null;
return eval("tabR["+what.substring(1)+"][0]");
}
return eval("tab"+what+"[0]");
}
function toggleVisible(where,reserve=false)
{
if(!reserve)
{
eval("tab"+where+"[0]=!tab"+where+"[0];");
empiler();
toutDessiner(eval("tab"+where),eval("canvas"+where),eval("ctx"+where));
toutDessiner(tabTotal,canvasT,ctxT);
}
else
{
tabR[where][0]=!tabR[where][0];
toutDessiner(eval("tabR["+where+"]"),eval("canvasR"+where),eval("ctxR"+where));
}
}
function events() {
for(var i=1;i<5;i++)
{
eval("canvas"+i).addEventListener("mousedown",function(e){mdManager(e);});
eval("canvas"+i).addEventListener("mouseup",function(e){muManager(e);});
eval("canvas"+i).addEventListener("mouseenter",function(e){meManager(e);});
eval("canvas"+i).addEventListener("mouseleave",function(e){mlManager(e);});
eval("canvasR"+i).addEventListener("mousedown",function(e){mdManager(e);});
eval("canvasR"+i).addEventListener("mouseup",function(e){muManager(e);});
eval("canvasR"+i).addEventListener("mouseenter",function(e){meManager(e);});
eval("canvasR"+i).addEventListener("mouseleave",function(e){mlManager(e);});
}
}
function mdManager(e){
mousePos = [e.currentTarget.id.substring(6),compas(e.clientX,e.clientY,e.currentTarget)];
document.getElementById(e.currentTarget.id).classList.add('vitrail-select');
}
function muManager(e){
rotationManager(e);
mousePos=[];
}
function meManager(e) {
document.getElementById(e.currentTarget.id).classList.add('vitrail-hover');
}
function mlManager(e) {
document.getElementById(e.currentTarget.id).classList.remove('vitrail-hover');
}
tab1.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
tab2.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
tab3.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
tab4.push(true,[-3,-3,"green"],[-3,2,"red"],[1,2,"yellow"],[3,-3,"purple"]);
toutDessiner(tab1,canvas1,ctx1);
toutDessiner(tab2,canvas2,ctx2);
toutDessiner(tab3,canvas3,ctx3);
toutDessiner(tab4,canvas4,ctx4);
empiler();
toutDessiner(tabTotal,canvasT,ctxT);
document.getElementById("stats").innerHTML = points+" points";
events();
generateEasy();
Loading…
Cancel
Save