Création de la Classe Carte

Golfier
Yannis 4 years ago
parent 7f19b9658e
commit 7c6b343cc2

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

@ -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){

Loading…
Cancel
Save