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
+
+
+
+
+
+ Objectif
+
+ Résultat
+
+
+
+
+
+
+
+
+
+
+
+
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
+
+
+
+
+
+
+ Objectif
+
+ Résultat
+
+
+
+
+
+
+
+
+
+
+
+
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
-
-
-
-
-
- Résultat
-
- Objectif
-
-
-
-
-
-
-
-
-
-
-
-
+
+ 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