From 7c6b343cc26cd053990bf4867e4dc4433d910101 Mon Sep 17 00:00:00 2001 From: Yannis Date: Sun, 15 Nov 2020 12:07:40 +0100 Subject: [PATCH] =?UTF-8?q?Cr=C3=A9ation=20de=20la=20Classe=20Carte?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- SwichGIT/src/index.html | 2 +- SwichGIT/src/js/main.js | 208 ++++++++++++++++++++++------------------ 2 files changed, 114 insertions(+), 96 deletions(-) diff --git a/SwichGIT/src/index.html b/SwichGIT/src/index.html index ed1e2c0..a27ce04 100644 --- a/SwichGIT/src/index.html +++ b/SwichGIT/src/index.html @@ -125,7 +125,7 @@
- +

RELANCER

diff --git a/SwichGIT/src/js/main.js b/SwichGIT/src/js/main.js index 9121661..150777f 100644 --- a/SwichGIT/src/js/main.js +++ b/SwichGIT/src/js/main.js @@ -2,94 +2,36 @@ var mode = 1; var nbplayers = 1; var lightprima = "#DEDEDE"; var lightsedonca = "#B7B7B7"; -var lighttercia = "#E6E6E6"; +var lighttercia = "#E6E6E6"; var darkprima = "#474747"; var darkseconda = "#393939"; var darktercia = "#606060"; var carteselect = []; +var deckPartie = []; //Ensemble des cartes affichées à l'écran -function journuit(){ - //mode jour - if(mode%2 == 0){ - //changer logo swish - document.getElementById("imglogo").src = "imgs/swishjour.png"; - document.getElementById("imglogo2").src = "imgs/swishjour.png"; - - document.getElementById("fondinput").style.backgroundColor = lightsedonca; - document.getElementById("contourbuttonvalider").style.backgroundColor = lightsedonca; - document.getElementById("textjouer").style.color = lightsedonca; - document.getElementById("textplus").style.color = lightprima; - //changer montagnesfond - document.getElementById("mount1").src = "imgs/mount1.png"; - document.getElementById("mount2").src = "imgs/mount2.png"; - //nuages - document.getElementById("cloud").src = "imgs/lightcloud.png"; - //changer background color - document.getElementById("containplayers").style.color = lightsedonca; - //maj couleur principales - document.documentElement.style.setProperty('--lightprima',lightprima); - document.documentElement.style.setProperty('--lightsedonca',lightsedonca); - document.documentElement.style.setProperty('--lighttercia',lighttercia); - } - //mode nuit - else { - //changer logo swish - document.getElementById("imglogo").src = "imgs/swishnuit.png"; - document.getElementById("imglogo2").src = "imgs/swishnuit.png"; - //bouttonjouer - document.getElementById("fondinput").style.backgroundColor = darkseconda; - document.getElementById("contourbuttonvalider").style.backgroundColor = darkseconda; - document.getElementById("textjouer").style.color = darkseconda; - document.getElementById("textplus").style.color = darkprima; - //changer montagnesfond - document.getElementById("mount1").src = "imgs/darkmount1.png"; - document.getElementById("mount2").src = "imgs/darkmount2.png"; - //nuages - document.getElementById("cloud").src = "imgs/darkcloud.png"; - //mode nuit - //document.getElementById("containplayers").style.color = darkseconda; - //maj couleur principales - document.documentElement.style.setProperty('--lightprima',darkprima); - document.documentElement.style.setProperty('--lightsedonca',darkseconda); - document.documentElement.style.setProperty('--lighttercia',darktercia); - } - mode=mode+1; -} +class Carte { -function lancerpartie() { - document.getElementById("pageAccueil").style.visibility = "hidden"; - creecarte(); - document.getElementById("pageGame").style.visibility = "visible"; -} + constructor(id) { + //Attribut de Classe + this.identifiant = id; + this.Matrice = creaMatrice(); -function retour() { - document.getElementById("pageAccueil").style.visibility = "visible"; - document.getElementById("pageGame").style.visibility = "hidden"; -} - - -function creecarte() { - - while (document.getElementById("containcards").firstElementChild != null) { - document.getElementById("containcards").firstElementChild.remove(); - } - for (var j = 1; j <= 16; j++) { //lien clicable - var newlink = document.createElement('a'); - newlink.id = j; + this.link = document.createElement('a'); + this.link.id = this.identifiant; //fonction de selection - newlink.onclick = function selectioncarte() { - macarte = this.id; - lacarte = "card" + macarte; + this.link.onclick = function selectioncarte() { + var macarte = this.id; + var lacarte = "card" + macarte; if (document.getElementById(lacarte).style.boxShadow != "") { - var pos = carteselect.indexOf(lacarte); + var pos = carteselect.indexOf(this.getIdentifiant); carteselect.splice(pos, 1); document.getElementById(lacarte).style.boxShadow = ""; } else { if (carteselect.length < 5) { - carteselect.push(lacarte); + carteselect.push(this.getIdentifiant); document.getElementById(lacarte).style.boxShadow = "0 0 1vw red, 0 0 1vw red"; } else @@ -99,20 +41,15 @@ function creecarte() { //div carte var divconteneur = document.createElement('div'); divconteneur.className = "flex-item"; - divconteneur.id = "card" + j; - - + divconteneur.id = "card" + this.identifiant; - //div case - //ICI A VOIR POUR AJOUTER LES FORMES EN FONCTION DE LA MATRICE - var uneMatrice = creaMatrice(); for (var i = 0; i < 12; i++) { var divcase = document.createElement('div'); divcase.className = "item-form"; // Point ou anneau trouvé => création - if (uneMatrice[i % 3][Math.floor(i / 3)] == 1) { + if (this.Matrice[i % 3][Math.floor(i / 3)] == 1) { var divContainForm = document.createElement('div'); divContainForm.className = "containform"; @@ -136,7 +73,7 @@ function creecarte() { } // Point ou anneau trouvé => création - if (uneMatrice[i % 3][Math.floor(i / 3)] == 2) { + if (this.Matrice[i % 3][Math.floor(i / 3)] == 2) { var divContainForm = document.createElement('div'); divContainForm.className = "containform"; @@ -165,8 +102,90 @@ function creecarte() { //ajout de l'élément dans la carte divconteneur.appendChild(divcase); } - newlink.appendChild(divconteneur); - document.getElementById("containcards").appendChild(newlink); + + this.link.appendChild(divconteneur); + } + + get HTML() { + return this.link; + } + + get getIdentifiant() { + return this.identifiant; + } +} + +function journuit() { + //mode jour + if (mode % 2 == 0) { + //changer logo swish + document.getElementById("imglogo").src = "imgs/swishjour.png"; + document.getElementById("imglogo2").src = "imgs/swishjour.png"; + + document.getElementById("fondinput").style.backgroundColor = lightsedonca; + document.getElementById("contourbuttonvalider").style.backgroundColor = lightsedonca; + document.getElementById("textjouer").style.color = lightsedonca; + document.getElementById("textplus").style.color = lightprima; + //changer montagnesfond + document.getElementById("mount1").src = "imgs/mount1.png"; + document.getElementById("mount2").src = "imgs/mount2.png"; + //nuages + document.getElementById("cloud").src = "imgs/lightcloud.png"; + //changer background color + document.getElementById("containplayers").style.color = lightsedonca; + //maj couleur principales + document.documentElement.style.setProperty('--lightprima', lightprima); + document.documentElement.style.setProperty('--lightsedonca', lightsedonca); + document.documentElement.style.setProperty('--lighttercia', lighttercia); + } + //mode nuit + else { + //changer logo swish + document.getElementById("imglogo").src = "imgs/swishnuit.png"; + document.getElementById("imglogo2").src = "imgs/swishnuit.png"; + //bouttonjouer + document.getElementById("fondinput").style.backgroundColor = darkseconda; + document.getElementById("contourbuttonvalider").style.backgroundColor = darkseconda; + document.getElementById("textjouer").style.color = darkseconda; + document.getElementById("textplus").style.color = darkprima; + //changer montagnesfond + document.getElementById("mount1").src = "imgs/darkmount1.png"; + document.getElementById("mount2").src = "imgs/darkmount2.png"; + //nuages + document.getElementById("cloud").src = "imgs/darkcloud.png"; + //mode nuit + //document.getElementById("containplayers").style.color = darkseconda; + //maj couleur principales + document.documentElement.style.setProperty('--lightprima', darkprima); + document.documentElement.style.setProperty('--lightsedonca', darkseconda); + document.documentElement.style.setProperty('--lighttercia', darktercia); + } + mode = mode + 1; +} + +function lancerpartie() { + document.getElementById("pageAccueil").style.visibility = "hidden"; + creePartie(); + document.getElementById("pageGame").style.visibility = "visible"; +} + +function retour() { + document.getElementById("pageAccueil").style.visibility = "visible"; + document.getElementById("pageGame").style.visibility = "hidden"; +} + +function creePartie() { + carteselect = []; + while (document.getElementById("containcards").firstElementChild != null) { + document.getElementById("containcards").firstElementChild.remove(); + } + for (var j = 1; j <= 16; j++) { + + var uneCarte = new Carte(j); + + deckPartie.push(uneCarte); + + document.getElementById("containcards").appendChild(uneCarte.HTML); } } @@ -232,21 +251,19 @@ function creaMatrice() { } - - -function ChoisirPseudo(){ - let nom = localStorage.getItem('nom'); - if(nom==null){ - nom="SWISH"; - } - document.getElementById('inputpseudo').setAttribute('value', nom); +function ChoisirPseudo() { + let nom = localStorage.getItem('nom'); + if (nom == null) { + nom = "SWISH"; + } + document.getElementById('inputpseudo').setAttribute('value', nom); }; -function EnvoyerNouveauNom(){ - let pseudo = document.getElementById('inputpseudo').value; - localStorage.setItem('nom', pseudo); - document.location.reload(true); - +function EnvoyerNouveauNom() { + let pseudo = document.getElementById('inputpseudo').value; + localStorage.setItem('nom', pseudo); + document.location.reload(true); + }; /* @@ -288,3 +305,4 @@ function ajouterplayer(event){ +