Création de la Classe Carte

Golfier
Yannis 4 years ago
parent 7f19b9658e
commit 7c6b343cc2

@ -125,7 +125,7 @@
<div id="pageGame"> <div id="pageGame">
<div class="menuhaut"> <div class="menuhaut">
<div id="Redistribution"> <div id="Redistribution">
<a onclick="creecarte()"> <a onclick="creePartie()">
<div id="contourbuttonvalider"> <div id="contourbuttonvalider">
<div class="bouttonvalider"> <div class="bouttonvalider">
<h1 id="textjouer">RELANCER</h1> <h1 id="textjouer">RELANCER</h1>

@ -2,94 +2,36 @@ var mode = 1;
var nbplayers = 1; var nbplayers = 1;
var lightprima = "#DEDEDE"; var lightprima = "#DEDEDE";
var lightsedonca = "#B7B7B7"; var lightsedonca = "#B7B7B7";
var lighttercia = "#E6E6E6"; var lighttercia = "#E6E6E6";
var darkprima = "#474747"; var darkprima = "#474747";
var darkseconda = "#393939"; var darkseconda = "#393939";
var darktercia = "#606060"; var darktercia = "#606060";
var carteselect = []; var carteselect = [];
var deckPartie = []; //Ensemble des cartes affichées à l'écran
function journuit(){ class Carte {
//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() { constructor(id) {
document.getElementById("pageAccueil").style.visibility = "hidden"; //Attribut de Classe
creecarte(); this.identifiant = id;
document.getElementById("pageGame").style.visibility = "visible"; 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 //lien clicable
var newlink = document.createElement('a'); this.link = document.createElement('a');
newlink.id = j; this.link.id = this.identifiant;
//fonction de selection //fonction de selection
newlink.onclick = function selectioncarte() { this.link.onclick = function selectioncarte() {
macarte = this.id; var macarte = this.id;
lacarte = "card" + macarte; var lacarte = "card" + macarte;
if (document.getElementById(lacarte).style.boxShadow != "") { if (document.getElementById(lacarte).style.boxShadow != "") {
var pos = carteselect.indexOf(lacarte); var pos = carteselect.indexOf(this.getIdentifiant);
carteselect.splice(pos, 1); carteselect.splice(pos, 1);
document.getElementById(lacarte).style.boxShadow = ""; document.getElementById(lacarte).style.boxShadow = "";
} }
else { else {
if (carteselect.length < 5) { if (carteselect.length < 5) {
carteselect.push(lacarte); carteselect.push(this.getIdentifiant);
document.getElementById(lacarte).style.boxShadow = "0 0 1vw red, 0 0 1vw red"; document.getElementById(lacarte).style.boxShadow = "0 0 1vw red, 0 0 1vw red";
} }
else else
@ -99,20 +41,15 @@ function creecarte() {
//div carte //div carte
var divconteneur = document.createElement('div'); var divconteneur = document.createElement('div');
divconteneur.className = "flex-item"; 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++) { for (var i = 0; i < 12; i++) {
var divcase = document.createElement('div'); var divcase = document.createElement('div');
divcase.className = "item-form"; divcase.className = "item-form";
// Point ou anneau trouvé => création // 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'); var divContainForm = document.createElement('div');
divContainForm.className = "containform"; divContainForm.className = "containform";
@ -136,7 +73,7 @@ function creecarte() {
} }
// Point ou anneau trouvé => création // 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'); var divContainForm = document.createElement('div');
divContainForm.className = "containform"; divContainForm.className = "containform";
@ -165,8 +102,90 @@ function creecarte() {
//ajout de l'élément dans la carte //ajout de l'élément dans la carte
divconteneur.appendChild(divcase); 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');
function ChoisirPseudo(){ if (nom == null) {
let nom = localStorage.getItem('nom'); nom = "SWISH";
if(nom==null){ }
nom="SWISH"; document.getElementById('inputpseudo').setAttribute('value', nom);
}
document.getElementById('inputpseudo').setAttribute('value', nom);
}; };
function EnvoyerNouveauNom(){ function EnvoyerNouveauNom() {
let pseudo = document.getElementById('inputpseudo').value; let pseudo = document.getElementById('inputpseudo').value;
localStorage.setItem('nom', pseudo); localStorage.setItem('nom', pseudo);
document.location.reload(true); document.location.reload(true);
}; };
/* /*
@ -288,3 +305,4 @@ function ajouterplayer(event){

Loading…
Cancel
Save