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/game.css similarity index 85% rename from code/index.css rename to code/game.css index 5439a0a..110f0ed 100644 --- a/code/index.css +++ b/code/game.css @@ -1,7 +1,7 @@ .all-container { display : flex; - justify-content: space-between; + justify-content: center; /* align-items: baseline; width : min-content; @@ -15,6 +15,8 @@ display : flex; align-items: baseline; width : min-content; + + margin: 20px; /* Then we define the flow direction and if we allow the items to wrap * Remember this is the same as: @@ -46,6 +48,7 @@ display : flex; align-items: baseline; width : min-content; + margin: 20px; /* Then we define the flow direction and if we allow the items to wrap * Remember this is the same as: @@ -59,7 +62,7 @@ flex-direction: column; } - .vitrail { + .vitrail-plein { margin: 3px; padding: 6px; background-image: url(ress/fond_fin.png); @@ -68,22 +71,18 @@ background-size: cover; } - .vitrail-select { + .vitrail-vide { margin: 3px; padding: 6px; - background-image: url(ress/fond_fin.png); background-repeat: no-repeat; background-position: center; background-size: cover; + } + + .vitrail-select { border: 5px solid red; } .vitrail-hover { - margin: 3px; - padding: 6px; - background-image: url(ress/fond_fin.png); - background-repeat: no-repeat; - background-position: center; - background-size: cover; border: 5px solid blue; } \ No newline at end of file diff --git a/code/game.html b/code/game.html new file mode 100644 index 0000000..8de8f0b --- /dev/null +++ b/code/game.html @@ -0,0 +1,47 @@ + + + + + On The Dot + + + + + + + + + + diff --git a/code/game.php b/code/game.php new file mode 100644 index 0000000..b692473 --- /dev/null +++ b/code/game.php @@ -0,0 +1,50 @@ + + + + + On The Dot + + + + + + + + + + diff --git a/code/index.html b/code/index.html index 147277c..36f5510 100644 --- a/code/index.html +++ b/code/index.html @@ -1,605 +1,15 @@ - - - - On The Dot - - - - - - - + + On the Dot + + +
+ +
+
+ +
+
+ + diff --git a/code/index.php b/code/index.php new file mode 100644 index 0000000..5667d8c --- /dev/null +++ b/code/index.php @@ -0,0 +1,16 @@ + + + + On the Dot + + +
+ +
+
+ +
+
+ + + \ No newline at end of file diff --git a/code/selecteur.js b/code/selecteur.js new file mode 100644 index 0000000..bfccbb9 --- /dev/null +++ b/code/selecteur.js @@ -0,0 +1,21 @@ +function $_GET(param) { + var vars = {}; + window.location.href.replace( location.hash, '' ).replace( + /[?&]+([^=&]+)=?([^&]*)?/gi, // regexp + function( m, key, value ) { // callback + vars[key] = value !== undefined ? value : ''; + } + ); + + if ( param ) { + return vars[param] ? vars[param] : null; + } + return vars; +} + +var get=$_GET(); + +if(get['mode']=="no-res") +{ + document.getElementById("canvasR").style.display="none"; +} \ No newline at end of file diff --git a/code/vitraux.js b/code/vitraux.js new file mode 100644 index 0000000..ac35329 --- /dev/null +++ b/code/vitraux.js @@ -0,0 +1,516 @@ +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); + + var firstAv=1; + for(i=1;i<4;i++) //détermine la 1° place libre dans la réserve + { + if(typeof tabR[i][0]=="boolean") + firstAv++; + else + break; + } + + console.log("firstAv="+firstAv); + + if(mouseOnRes && !canvasNumber.includes("R")) //clic dans la réserve, relâche sur la pile en jeu + { + if(!isVisible(canvasNumber)) //relâche sur emplacement vide au centre + { + toggleVisible(canvasNumber); + tabR[canvasNumber]=[]; + console.log("contenu du tabR[cn] : "+tabR[canvasNumber]); + toggleVisible(mousePos[0].substring(1),true); + } + } + else + { + if(isVisible(mousePos[0])) //clic sur un vitrail présent + { + if(canvasNumber.includes("R")) //relâche dans réserve + { + if(tabR[canvasNumber]==null) //emplacement de réserve vide + { + toggleVisible(mousePos[0]); //inverser tag du canvas du centre + tabR[firstAv]=copyMDArray(eval("tab"+mousePos[0])); //mettre le canvas dans la réserve + tabR[firstAv][0]=eval("tab"+mousePos[0]+"[0]"); //transférer le tag du canvas dans la réserve + toggleVisible(firstAv,true); //inverser tag du canvas de réesrve + toutDessiner(tabR[firstAv],eval("canvasR"+firstAv),eval("ctxR"+firstAv)); //afficher canvas dans réserve + //console.log(eval("tabR["+(mousePos[0]-1)+"]")); + } + else //emplacement de réserve occupé + { + 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")) + { + 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")) + { + tourneD(letab,lecanvas,lectx); + } + else if ((mousePos[1] == "E" && dir == "O") || (mousePos[1] == "O" && dir == "E")) + { + swap(letab,lecanvas,lectx,"V"); + } + else if ((mousePos[1] == "N" && dir == "S") || (mousePos[1] == "S" && dir == "N")) + { + 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"; + chronoStop(); + 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