diff --git a/code/chrono.js b/code/chrono.js new file mode 100644 index 0000000..1ae0842 --- /dev/null +++ b/code/chrono.js @@ -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) +} \ No newline at end of file diff --git a/code/index.css b/code/index.css index 5439a0a..1a9c50f 100644 --- a/code/index.css +++ b/code/index.css @@ -1,7 +1,7 @@ .all-container { display : flex; - justify-content: space-between; + justify-content: space-evenly; /* align-items: baseline; width : min-content; diff --git a/code/index.html b/code/index.html index ad5ebd2..35112c7 100644 --- a/code/index.html +++ b/code/index.html @@ -8,12 +8,17 @@ - + + diff --git a/code/vitraux.js b/code/vitraux.js new file mode 100644 index 0000000..480d29f --- /dev/null +++ b/code/vitraux.js @@ -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 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 { + 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(xy; + 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 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