+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/Passes-retour-designConnexion/floating-labels.css b/Passes-retour-designConnexion/floating-labels.css
new file mode 100644
index 0000000..17dd368
--- /dev/null
+++ b/Passes-retour-designConnexion/floating-labels.css
@@ -0,0 +1,124 @@
+html,
+body {
+
+ height: 100%;
+}
+
+body {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-align: center;
+ align-items: center;
+ padding-top: 40px;
+ padding-bottom: 40px;
+ background-color: #f5f5f5;
+}
+
+.form-signin {
+ width: 100%;
+ max-width: 420px;
+ padding: 15px;
+ margin: auto;
+}
+
+.form-label-group {
+ position: relative;
+ margin-bottom: 3rem;
+}
+
+.form-label-group input,
+.form-label-group label {
+ height: 3.125rem;
+ padding: .75rem;
+}
+
+.form-label-group label {
+ position: absolute;
+ top: 0;
+ left: 0;
+ display: block;
+ width: 100%;
+ margin-bottom: 0;
+ line-height: 1.5;
+ color: #495057;
+ pointer-events: none;
+ cursor: text;
+ border: 1px solid transparent;
+ border-radius: .25rem;
+ transition: all .1s ease-in-out;
+}
+
+.form-label-group input::-webkit-input-placeholder {
+ color: transparent;
+}
+
+.form-label-group input::-moz-placeholder {
+ color: transparent;
+}
+
+.form-label-group input:-ms-input-placeholder {
+ color: transparent;
+}
+
+.form-label-group input::-ms-input-placeholder {
+ color: transparent;
+}
+
+.form-label-group input::placeholder {
+ color: transparent;
+}
+
+.form-label-group input:not(:-moz-placeholder-shown) {
+ padding-top: 1.25rem;
+ padding-bottom: .25rem;
+}
+
+.form-label-group input:not(:-ms-input-placeholder) {
+ padding-top: 1.25rem;
+ padding-bottom: .25rem;
+}
+
+.form-label-group input:not(:placeholder-shown) {
+ padding-top: 1.25rem;
+ padding-bottom: .25rem;
+}
+
+.form-label-group input:not(:-moz-placeholder-shown) ~ label {
+ padding-top: .25rem;
+ padding-bottom: .25rem;
+ font-size: 12px;
+ color: #777;
+}
+
+.form-label-group input:not(:-ms-input-placeholder) ~ label {
+ padding-top: .25rem;
+ padding-bottom: .25rem;
+ font-size: 12px;
+ color: #777;
+}
+
+.form-label-group input:not(:placeholder-shown) ~ label {
+ padding-top: .25rem;
+ padding-bottom: .25rem;
+ font-size: 12px;
+ color: #777;
+}
+
+/* Fallback for Edge
+-------------------------------------------------- */
+@supports (-ms-ime-align: auto) {
+ .form-label-group {
+ display: -ms-flexbox;
+ display: flex;
+ -ms-flex-direction: column-reverse;
+ flex-direction: column-reverse;
+ }
+
+ .form-label-group label {
+ position: static;
+ }
+
+ .form-label-group input::-ms-input-placeholder {
+ color: #777;
+ }
+}
diff --git a/Passes-retour-designConnexion/flèche_droite.png b/Passes-retour-designConnexion/flèche_droite.png
new file mode 100644
index 0000000..96b1798
Binary files /dev/null and b/Passes-retour-designConnexion/flèche_droite.png differ
diff --git a/Passes-retour-designConnexion/flèche_gauche.png b/Passes-retour-designConnexion/flèche_gauche.png
new file mode 100644
index 0000000..2e12d68
Binary files /dev/null and b/Passes-retour-designConnexion/flèche_gauche.png differ
diff --git a/Passes-retour-designConnexion/rectest.js b/Passes-retour-designConnexion/rectest.js
new file mode 100644
index 0000000..8a3d697
--- /dev/null
+++ b/Passes-retour-designConnexion/rectest.js
@@ -0,0 +1,584 @@
+// get canvas related references
+var canvas = document.getElementById("terrain");
+var ctx = canvas.getContext("2d");
+var BB = canvas.getBoundingClientRect();
+var offsetX = BB.left;
+var offsetY = BB.top;
+canvas.width = window.innerWidth*0.74;
+var lt = canvas.width;
+canvas.height = lt*0.536;
+var ht = canvas.height;
+var WIDTH = canvas.width;
+var HEIGHT = canvas.height;
+
+// drag related variables
+var dragok = false;
+var startX;
+var startY;
+
+//variable pour donner le ballon
+var ball = false;
+var nbball=0;
+var nba = 0;
+var nbb = 0;
+
+
+//variable pour faire une passe
+var nbjpass = 0;
+var passable = false;
+// array de cercle de joueurs
+var joueurs = [];
+// array de cercle d'adversaire
+var adversaire = [];
+// array de passes
+var passes = [];
+// array de numero de joueur pour créér la passe
+var jpass = [];
+// array d'action pour pouvoir supprimer la derniere
+var last = [];
+// listen for mouse events
+canvas.onmousedown = myDown;
+canvas.onmouseup = myUp;
+canvas.onmousemove = myMove;
+
+// call to draw the scene
+draw();
+
+// draw a single rect
+function rect(x, y, w, h) {
+ ctx.beginPath();
+ ctx.rect(x, y, w, h);
+ ctx.closePath();
+ ctx.fill();
+}
+
+function cercle(x,y,z,a,b,c,g) {
+ ctx.fillStyle = g;
+ ctx.beginPath();
+ ctx.arc(x,y,z,a,b,c);
+ ctx.fill();
+}
+
+function ligne(a,b,c,d){
+ ctx.beginPath();
+ ctx.moveTo(a, b);
+ ctx.lineTo(c, d);
+ ctx.lineWidth= 3;
+ ctx.stroke();
+}
+
+// clear the canvas
+function clear() {
+ ctx.clearRect(0, 0, WIDTH, HEIGHT);
+}
+
+// redraw the scene
+function draw() {
+ clear();
+ ctx.fillStyle = "#FAF7F8";
+ rect(0, 0, WIDTH, HEIGHT);
+ faireterrain();
+ // redraw each rect in the rects[] array
+ for (var i = 0; i < joueurs.length; i++) {
+ var r = joueurs[i];
+ if(r.setball == true){
+ r.fill = "green";
+ }
+ else{
+ r.fill = "red";
+ }
+ ctx.fillStyle = r.fill;
+ cercle(r.x,r.y,r.rayon,r.cache,r.taille,r.last,r.fill);
+
+ }
+ for (var i = 0; i < adversaire.length; i++) {
+ var r = adversaire[i];
+ if(r.setball == true){
+ r.fill = "green";
+ }
+ ctx.fillStyle = r.fill;
+ cercle(r.x,r.y,r.rayon,r.cache,r.taille,r.last);
+ }
+ for (var i = 0; i < jpass.length-1; i=i+2) {
+ var r = jpass[i];
+ var z = jpass[i+1];
+ nbjpass=0;
+ fairepasse(r,z);
+ }
+ for(var i = 0; i < passes.length; i++) {
+ var r = passes[i];
+ ligne(r.x.x,r.x.y,r.x2.x,r.y2.y);
+ }
+}
+
+
+// handle mousedown events
+function myDown(e) {
+
+ // tell the browser we're handling this mouse event
+ e.preventDefault();
+ e.stopPropagation();
+
+ // get the current mouse position
+ var mx = parseInt(e.clientX - offsetX);
+ var my = parseInt(e.clientY - offsetY);
+ //console.log(mx);
+ //console.log(my);
+ //console.log(ball);
+
+ if(ball == true){
+ dragok = false;
+ for (var i = 0; i < joueurs.length; i++) {
+ var r = joueurs[i];
+ if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
+ // if yes, set that rects isDragging=true
+ document.body.style.cursor = 'pointer';
+ dragok = true;
+ if (nbball == 0){
+ r.setball = true;
+ r.gottheball = true;
+ nbball = nbball + 1;
+ last.push({
+ action : 3,
+ });
+ console.log(last);
+ }
+ else
+ window.alert("Un seul ballon sur le terrain");
+ ball = false;
+ draw();
+ }
+ }
+ for (var i = 0; i < adversaire.length; i++) {
+ var r = adversaire[i];
+ if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
+ // if yes, set that rects isDragging=true
+ document.body.style.cursor = 'pointer';
+ dragok = true;
+ if (nbball == 0){
+ r.setball = true;
+ r.gottheball = true;
+ nbball = nbball + 1;
+ last.push({
+ action : 4,
+ })
+ }
+ else
+ window.alert("Un seul ballon sur le terrain");
+ ball = false;
+ draw();
+ }
+ }
+ ball = false;
+ }
+
+ if(passable == true ){
+ for (var i = 0; i < joueurs.length; i++) {
+ var r = joueurs[i];
+ if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
+ // if yes, set that rects isDragging=true
+ document.body.style.cursor = 'pointer';
+ if (nbjpass == 0){
+ if(r.gottheball == false){
+ passable = false;
+ console.log(nbjpass);
+ nbjpass = 0;
+ window.alert("Seulement un joueur qui possede le ballon a un moment peut faire une passe")
+ }
+ else
+ {
+ r.gottheball = false;
+ addj(i);
+ nbjpass=nbjpass+1;
+ console.log(nbjpass);
+ }
+ }
+ else{
+
+ r.gottheball = true;
+ addj(i);
+ nbjpass=nbjpass+1;
+ console.log(nbjpass);
+ }
+
+ if(nbjpass % 2 == 0){
+ console.log(nbjpass % 2 );
+ passable=false;
+ draw();
+ }
+ }
+ }
+}
+
+else {
+ dragok = false;
+ for (var i = 0; i < joueurs.length; i++) {
+ var r = joueurs[i];
+ if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
+ // if yes, set that rects isDragging=true
+ document.body.style.cursor = 'pointer';
+ dragok = true;
+ r.isDragging = true;
+ }
+ }
+ for (var i = 0; i < adversaire.length; i++) {
+ var r = adversaire[i];
+ if (mx > r.x - r.rayon && mx < r.x + r.rayon && my > r.y - r.rayon && my < r.y + r.rayon) {
+ // if yes, set that rects isDragging=true
+ document.body.style.cursor = 'pointer';
+ dragok = true;
+ r.isDragging = true;
+ }
+ }
+}
+ // save the current mouse position
+ startX = mx;
+ startY = my;
+}
+
+
+// handle mouseup events
+function myUp(e) {
+ // tell the browser we're handling this mouse event
+ e.preventDefault();
+ e.stopPropagation();
+
+ // clear all the dragging flags
+ document.body.style.cursor = 'default';
+ dragok = false;
+ for (var i = 0; i < joueurs.length; i++) {
+ joueurs[i].isDragging = false;
+ }
+ for (var i = 0; i < adversaire.length; i++) {
+ adversaire[i].isDragging = false;
+ }
+}
+
+
+// handle mouse moves
+function myMove(e) {
+ // if we're dragging anything...
+ if (dragok) {
+
+ // tell the browser we're handling this mouse event
+ e.preventDefault();
+ e.stopPropagation();
+
+ // get the current mouse position
+ var mx = parseInt(e.clientX - offsetX);
+ var my = parseInt(e.clientY - offsetY);
+
+ // calculate the distance the mouse has moved
+ // since the last mousemove
+ var dx = mx - startX;
+ var dy = my - startY;
+
+ // move each rect that isDragging
+ // by the distance the mouse has moved
+ // since the last mousemove
+ for (var i = 0; i < joueurs.length; i++) {
+ var r = joueurs[i];
+ if (r.isDragging) {
+ r.x += dx;
+ r.y += dy;
+ }
+ }
+ for (var i = 0; i < adversaire.length; i++) {
+ var r = adversaire[i];
+ if (r.isDragging) {
+ r.x += dx;
+ r.y += dy;
+ }
+ }
+
+ // redraw the scene with the new rect positions
+ draw();
+
+ // reset the starting mouse position for the next mousemove
+ startX = mx;
+ startY = my;
+
+ }
+}
+
+
+function ajouterjoueur() {
+
+ if (joueurs.length >= 5)
+ window.alert("Nombre de joueurs maximum atteint");
+ else {
+ joueurs.push({
+ x: 60,
+ y: 35 + ((joueurs.length + 1) * 50),
+ rayon: 20,
+ cache: 0,
+ taille: Math.PI*2,
+ last: false,
+ fill: "red",
+ isDragging: false,
+ setball : false,
+ gottheball : false,
+ });
+ last.push({
+ action : 1,
+ });
+ console.log(last);
+ cercle(60,35 + (joueurs.length * 50),20,0,Math.PI*2,false,"red");
+ }
+}
+
+function ajouteradversaire() {
+
+ console.log(adversaire.length);
+ if (adversaire.length >= 5)
+ window.alert("Nombre d'adversaire maximum atteint");
+ else {
+ adversaire.push({
+ x: 560,
+ y: 35 + ((adversaire.length + 1) * 50),
+ rayon: 20,
+ cache: 0,
+ taille: Math.PI*2,
+ last: false,
+ fill: "black",
+ isDragging: false,
+ setball : false
+ });
+ last.push({
+ action : 2,
+ });
+ console.log(last);
+ cercle(560,35 + (adversaire.length * 50),20,0,Math.PI*2,false,"black");
+ }
+}
+
+function fairepasse(a,b) {
+ console.log(a);
+ console.log(b);
+ passes.push({
+ x: joueurs[a.c],
+ y: joueurs[a.c],
+ x2 : joueurs[b.c],
+ y2 : joueurs[b.c],
+ });
+ // console.log("passe stp");
+ jpass.pop();
+ jpass.pop();
+ last.push({
+ action : 5,
+ depart : a.c,
+ arrivé : b.c,
+ });
+ console.log(last);
+ ligne(joueurs[a.c].x,joueurs[a.c].y,joueurs[b.c].x,joueurs[b.c].y);
+;
+}
+
+
+function faireterrain() {
+ ctx.lineWidth="5";
+
+//Bordures du terrain
+ctx.beginPath();
+ctx.rect(0, 0, lt, ht);
+ctx.stroke();
+
+
+ctx.lineWidth="2";
+//Ligne centrale
+ctx.beginPath();
+ctx.moveTo(lt/2, ht);
+ctx.lineTo(lt/2, 0);
+ctx.stroke();
+
+//Cercle central
+ctx.beginPath();
+ctx.arc(lt/2, ht/2, lt*0.064, 0, Math.PI*2, false);
+ctx.stroke();
+
+
+/* RAQUETTES */
+//Rectangle raquette gauche
+ctx.beginPath();
+ctx.rect(0, ht/3, lt*0.208, ht/3);
+ctx.stroke();
+
+//Rectangle raquette droite
+ctx.beginPath();
+ctx.rect(lt-lt*0.208, ht/3, lt-lt*0.208, ht/3);
+ctx.stroke();
+
+//Cercle raquette gauche
+ctx.beginPath();
+ctx.arc(lt*0.208, ht/2, lt*0.064, 1.5*Math.PI, 0.5*Math.PI, false);
+ctx.stroke();
+
+//Cercle raquette droite
+ctx.beginPath();
+ctx.arc(lt-(lt*0.208), ht/2, lt*0.064, 0.5*Math.PI, 1.5*Math.PI, false);
+ctx.stroke();
+
+
+/* LIGNES LANCERS FRANCS */
+//Ligne lf 1 gauche
+ctx.beginPath();
+ctx.moveTo(0, 0.06*ht);
+ctx.lineTo(lt*0.075, 0.06*ht);
+ctx.stroke();
+
+//Ligne lf 2 gauche
+ctx.beginPath();
+ctx.moveTo(0, 0.94*ht);
+ctx.lineTo(lt*0.075, 0.94*ht);
+ctx.stroke();
+
+// Cercle lf gauche
+ctx.beginPath();
+ctx.arc(lt*0.063, ht/2, ht*0.44, 1.5*Math.PI, 0.5*Math.PI, false);
+ctx.stroke();
+
+
+//Ligne lf 1 droite
+ctx.beginPath();
+ctx.moveTo(lt, 0.06*ht);
+ctx.lineTo(lt*0.925, 0.06*ht);
+ctx.stroke();
+
+//Ligne lf 2 droite
+ctx.beginPath();
+ctx.moveTo(lt, 0.94*ht);
+ctx.lineTo(lt*0.925, 0.94*ht);
+ctx.stroke();
+
+//Cercle lf droite
+ctx.beginPath();
+ctx.arc(lt*0.937, ht/2, lt*0.236, 0.5*Math.PI, 1.5*Math.PI, false);
+ctx.stroke();
+
+
+/* PANIERS */
+//Cercle panier gauche
+ctx.beginPath();
+ctx.arc(lt*0.063, ht/2, ht*0.083, 1.5*Math.PI, 0.5*Math.PI, false);
+ctx.stroke();
+
+//Panier gauche
+ctx.beginPath();
+ctx.moveTo(lt*0.06, ht*0.44);
+ctx.lineTo(lt*0.06, ht*0.56);
+ctx.stroke();
+
+ctx.beginPath();
+ctx.arc(lt*0.072, ht/2, ht*0.01, 0, Math.PI*2, false);
+ctx.stroke();
+
+ctx.beginPath();
+ctx.moveTo(lt*0.06, ht/2);
+ctx.lineTo(lt*0.067, ht/2);
+ctx.stroke();
+
+
+//Cercle panier droit
+ctx.beginPath();
+ctx.arc(lt-lt*0.063, ht/2, ht*0.083, 0.5*Math.PI, 1.5*Math.PI, false);
+ctx.stroke();
+
+//Panier droit
+ctx.beginPath();
+ctx.moveTo(lt-lt*0.06, ht-ht*0.44);
+ctx.lineTo(lt-lt*0.06, ht-ht*0.56);
+ctx.stroke();
+
+ctx.beginPath();
+ctx.arc(lt-lt*0.072, ht/2, ht*0.01, 0, Math.PI*2, false);
+ctx.stroke();
+
+ctx.beginPath();
+ctx.moveTo(lt-lt*0.06, ht-ht/2);
+ctx.lineTo(lt-lt*0.067, ht-ht/2);
+ctx.stroke();
+
+}
+
+
+
+
+function triggerdonnerlaballe(){
+ ball = true;
+ console.log(ball);
+}
+
+function triggerfairepasse(){
+ if(joueurs.length < 2){
+ window.alert("On ne peut faire une passe si on a pas 2 joueurs")
+ }
+ else{
+ passable = true;
+ console.log(passable);
+ }
+}
+
+function addj(a){
+ jpass.push({
+ c : a,
+ });
+}
+
+function retourarriere(){
+
+ console.log(last);
+ console.log("allo");
+ x = last.length;
+ if(x == 0){
+ window.alert("Vous ne pouvez revenir en arriere")
+ }
+ else{
+ if(last[x-1].action == 1){
+ joueurs.pop();
+ last.pop();
+ draw();
+ }
+ if(last[x-1].action == 2){
+ adversaire.pop();
+ last.pop();
+ draw();
+ }
+ if(last[x-1].action == 3){
+
+ for (var i = 0; i < joueurs.length; i++) {
+ var r = joueurs[i];
+ if(r.setball == true){
+ r.setball = false;
+ nbball = nbball - 1;
+ last.pop();
+ draw();
+ }
+ }
+ }
+
+ if(last[x-1].action == 4){
+
+ for (var i = 0; i < adversaire.length; i++) {
+ var r = adversaire[i];
+ if(r.setball = true){
+ r.setball = false;
+ nbball = nbball - 1;
+ last.pop();
+ draw();
+ }
+ }
+ }
+ if(last[x-1].action == 5){
+ joueurs[last[x-1].arrivé].gottheball = false;
+ joueurs[last[x-1].depart].gottheball = true;
+ last.pop();
+ passes.pop();
+ draw();
+
+ }
+ }
+
+ }
+
+
+