avancement responsive+js

Golfier
frperalde 5 years ago
parent a20de69771
commit 94c81dcdbb

@ -343,7 +343,7 @@ body{
} }
/*DemTéléphone 1i Ecran*/ /*DemTéléphone 1i Ecran*/
@media screen and (min-width: 350px) and (max-height: 850px) { @media screen and (max-width: 550px) and (max-height: 850px) {
.anneau{ .anneau{
box-sizing: border-box; box-sizing: border-box;
background-color: #DE3030; background-color: #DE3030;

@ -1,6 +1,6 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head lang="fr">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>SwishGame</title> <title>SwishGame</title>
<link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/style.css">
@ -138,273 +138,9 @@
</a> </a>
</div> </div>
<div id="containcards" class="containcards">
<div class="containcards">
<a onclick="selectioncarte(1)">
<div class="flex-item" id="card1">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div> </div>
</a>
<a onclick="selectioncarte(2)">
<div class="flex-item" id="card2">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</a>
<a onclick="selectioncarte(3)">
<div class="flex-item" id="card3">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</a>
<a onclick="selectioncarte(4)">
<div class="flex-item" id="card4">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</a>
<a onclick="selectioncarte(5)">
<div class="flex-item" id="card5">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</a>
<a onclick="selectioncarte(6)">
<div class="flex-item" id="card6">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</a>
<a onclick="selectioncarte(7)">
<div class="flex-item" id="card7">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</a>
<a onclick="selectioncarte(8)">
<div class="flex-item" id="card8">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</a>
<a onclick="selectioncarte(9)">
<div class="flex-item" id="card9">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</a>
<a onclick="selectioncarte(10)">
<div class="flex-item" id="card10">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</a>
<a onclick="selectioncarte(11)">
<div class="flex-item" id="card11">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</a>
<a onclick="selectioncarte(12)">
<div class="flex-item" id="card12">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</a>
<a onclick="selectioncarte(13)">
<div class="flex-item" id="card13">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</a>
<a onclick="selectioncarte(14)">
<div class="flex-item" id="card14">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</a>
<a onclick="selectioncarte(15)">
<div class="flex-item" id="card15">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</a>
<a onclick="selectioncarte(16)">
<div class="flex-item" id="card16">
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
<div class="item-form"></div>
</div>
</a>
</div>
<!--
<div id="card-conteneur">
</div>-->
</div> </div>
</body> </body>

@ -59,6 +59,7 @@ function journuit(){
function lancerpartie(){ function lancerpartie(){
document.getElementById("pageAccueil").style.visibility = "hidden"; document.getElementById("pageAccueil").style.visibility = "hidden";
creecarte();
document.getElementById("pageGame").style.visibility = "visible"; document.getElementById("pageGame").style.visibility = "visible";
} }
@ -67,9 +68,15 @@ function retour(){
document.getElementById("pageGame").style.visibility = "hidden"; document.getElementById("pageGame").style.visibility = "hidden";
} }
//PARTIE SELECTION function creecarte(){
function selectioncarte(lcarte){ for (var j = 1; j <= 16; j++) {
lacarte = "card"+ lcarte ; //lien clicable
var newlink = document.createElement('a');
newlink.id = j;
//fonction de selection
newlink.onclick = function selectioncarte(){
macarte = this.id;
lacarte = "card"+macarte;
if(document.getElementById(lacarte).style.boxShadow != "") if(document.getElementById(lacarte).style.boxShadow != "")
{ {
var pos = carteselect.indexOf(lacarte); var pos = carteselect.indexOf(lacarte);
@ -85,6 +92,21 @@ function selectioncarte(lcarte){
else else
window.alert("Bonjour !"); window.alert("Bonjour !");
} }
};
//div carte
var divconteneur = document.createElement('div');
divconteneur.className = "flex-item";
divconteneur.id = "card"+j;
//div case
//ICI A VOIR POUR AJOUTER LES FORMES EN FONCTION DE LA MATRICE
for (var i = 0; i < 12; i++) {
var divcase = document.createElement('div');
divcase.className = "item-form";
divconteneur.appendChild(divcase);
}
newlink.appendChild(divconteneur);
document.getElementById("containcards").appendChild(newlink);
}
} }
@ -92,8 +114,6 @@ function selectioncarte(lcarte){
/* /*
Je n'avais rien à faire, je me suis amusé à faire l'ajout des joueurs Je n'avais rien à faire, je me suis amusé à faire l'ajout des joueurs
function addplayer(){ function addplayer(){

Loading…
Cancel
Save