Yannis 5 years ago
commit bc2817a9f0

@ -0,0 +1,6 @@
Nom Prenom Telephone email-perso telephone-parents
Golfier Alexandre 06 47 33 37 79 alexandre@golfier.eu 06 14 11 49 31
PERALDE François 0782586651 francois.peralde@gmail.com 0241523189
SOUCHON Théo 06 95 40 82 34 souchontpro@gmail.com 0661927487
TOFFIN Cyril 0768757420 cyril.toffin@gmail.com 0476849541

@ -1,89 +1,672 @@
body { :root{
background-color: purple; /*couleur héhé*/
color:white; --lightprima: #DEDEDE;
display: flex; --lightsedonca: #B7B7B7;
flex-wrap: wrap; --lighttercia: #E6E6E6;
} }
.cbleu >div{ @font-face {
background-color: blue; font-family: "Montserrat";
src: url("/fonts/MonstMontserrat-Black.woff") format("woff"),
url("/fonts/MonstMontserrat-Black.woff2") format("woff2");
} }
.cvert >div{ a {
background-color: green; cursor: pointer;
z-index: 60;
} }
.corange >div{ body{
background-color: orange; background-color: var(--lightprima);
overflow-x: hidden;
overflow-y: hidden;
/*Desactiver la selection*/
-webkit-user-select: none; /* Chrome / Safari */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE 10+ */
user-select: none;
} }
/* versions mobiles, tablette à faire*/
/*Version mobile V1*/
@media only screen and (min-width: 320px) {
.logop2 img {
position: absolute;
width: 25vw;
left: 37vw;
top: 98vw;
z-index: 30;
}
.logo img{
position: absolute;
width: 50vw;
left: 25vw;
top: 13%;
z-index: 11;
}
.mounts img {
object-fit: cover;
position: absolute;
height: 100%;
width: 100%;
pointer-events: none;
margin-left: -10px;
}
#contourbuttonvalider{
position: absolute;
border-radius: 45px;
left: -12vw;
top: 6vw;
height: 13vw;
width: 55vw;
background-color: var(--lightsedonca);
z-index: 15;
}
.bouttonvalider{
position: absolute;
height: 11vw;
width: 53vw;
top: 1vw;
left: 1vw;
border-radius: 40px;
background-color: #B130DE;
}
#textjouer{
font-family: Montserrat, impact, Arial Black;
position: absolute;
font-size: 10vw;
margin-top: -0.7vw;
margin-left: 13.5vw;
color: var(--lightsedonca);
}
#ContainBottom {
position: absolute;
margin-left: 25vw;
height: 25vw;
width: auto;
bottom: 0;
z-index: 20;
}
#clic{
visibility: hidden;
}
#card-conteneur{
z-index: 20;
position: absolute;
left: 0vw;
height: 100%;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: flex;
height: 100%;
-webkit-flex-flow: row wrap;
justify-content: space-around;
margin-top: -3vw;
}
.flex-item {
background: var(--lightsedonca);
width: 25vw;
height: 40vw;
margin-top: 8vw;
border-radius: 25px;
line-height: 10vw;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
padding-right: 0.4vw;
padding-left: 0.4vw;
padding-top: 0.4vw;
list-style: none;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.item-form {
width: 6vw;
padding-left: 0.8vw;
margin-top: 0.9vw;
height: 7.5vw;
border-radius: 10px;
background-color: var(--lighttercia);
}
.buttonretour{
position: absolute;
height: 6vw;
width: 6vw;
left: 63vw;
top: 99vw;
border-radius: 55vw;
background-color: var(--lightsedonca);
}
.txt{
position: absolute;
font-family: Arial Black;
color: var(--lightprima);
font-size: 5vw;
padding-left: 1vw;
top : -2.9vw;
}
.cviolet >div{
background-color: purple;
} }
#cercle {
width: 20px; /*Grande version*/
height: 20px; @media only screen and (min-width: 1280px) {
.logop2 img {
position: absolute;
width: 12vw;
left: 44vw;
top: 22vw;
z-index: 30;
}
.logo img{
position: absolute;
width: 12vw;
left: 44vw;
top: 13%;
z-index: 11;
}
.mounts img {
position: absolute;
height: 100%;
width: 100%;
pointer-events: none;
margin-left: -10px;
}
#contourbuttonvalider{
position: absolute;
border-radius: 45px;
left: 9.2vw;
top: 5.5vw;
height: 4vw;
width: 12vw;
background-color: var(--lightsedonca);
z-index: 15;
}
.bouttonvalider{
position: absolute;
height: 3.4vw;
width: 11.4vw;
top: 0.3vw;
left: 0.3vw;
border-radius: 30px;
background-color: #B130DE;
}
#textjouer{
font-family: Montserrat, impact, Arial Black;
position: absolute;
font-size: 2.5vw;
margin-top: 0.2vw;
margin-left: 2.7vw;
color: var(--lightsedonca);
}
#ContainBottom {
position: absolute;
margin-left: 25vw;
height: 12vw;
width: auto;
bottom: 0;
z-index: 20;
}
#clic{
position: absolute;
left: 55vw;
top : 7vw;
height: auto;
width: 15vw;
}
#card-conteneur{
z-index: 20;
position: absolute;
left: 0vw;
}
.flex-container {
padding: 0;
margin: 0;
list-style: none;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
margin-top: -7vw;
}
.flex-item {
background: var(--lightsedonca);
width: 14vw;
height: 19vw;
margin-top: 8vw;
border-radius: 25px;
line-height: 10vw;
color: white;
font-weight: bold;
font-size: 3em;
text-align: center;
padding-right: 0.4vw;
padding-left: 0.4vw;
padding-top: 0.4vw;
padding-top: 0.4vw;
list-style: none;
display: flex;
-webkit-flex-flow: row wrap;
justify-content: space-around;
}
.item-form {
width: 3vw;
padding-left: 0.8vw;
margin-top: 0.55vw;
height: 3.5vw;
border-radius: 10px; border-radius: 10px;
margin: auto; background-color: var(--lighttercia);
margin-top: 25%; }
.buttonretour{
position: absolute;
height: 3vw;
width: 3vw;
left: 57vw;
top: 22.6vw;
border-radius: 25px;
background-color: var(--lightsedonca);
}
.txt{
position: absolute;
font-family: Arial Black;
color: var(--lightprima);
font-size: 2vw;
padding-left: 0.7vw;
top : -0.9vw;
}
} }
#bague {
width: 30px; #pageGame{
height: 30px; visibility: hidden;
border-radius: 15px;
margin: auto;
position: relative;
margin-top: 13%;
} }
#bague-inté { #pageAccueil{
width: 20px; visibility: visible;
height: 20px; }
border-radius: 10px;
background-color: #bbada0;
#cloud{
z-index: 10
}
#mount1 {
z-index: 11;
}
#mount2 {
z-index: 10;
}
/* PARTIE ANNEAU / ROND */
.anneau{
background-color: #DE3030;
border-radius: 3vw;
height: 5vw;
width: 5vw;
display: table-cell;
vertical-align: middle;
}
.rondinterieur{
background-color: var(--lightsedonca);
height: 3vw;
width: 3vw;
display: table;
margin: 0 auto;
border-radius: 3vw;
}
.containform{
border-radius: 3vw;
height: 5vw;
width: 5vw;
display: table-cell;
vertical-align: middle;
}
.rond{
display: table;
margin: 0 auto;
background-color: #DE3030;
height: 3vw;
width: 3vw;
border-radius: 3vw;
}
/* PARTIE CARRE */
.carre{
background-color: #30C0DE;
height: 5vw;
width: 5vw;
display: table-cell;
vertical-align: middle
}
.carreinterieur{
background-color: var(--lightsedonca);
height: 3vw;
width: 3vw;
display: table;
margin: 0 auto;
}
.pcarre{
display: table;
margin: 0 auto;
background-color: #30C0DE;
height: 3vw;
width: 3vw;
}
/* PARTIE TRIANGLE */
.triangle{
border-left: 2.5vw solid transparent;
border-right: 2.5vw solid transparent;
border-bottom: 5vw solid #DEA430;
display: table-cell;
vertical-align: middle
}
.trianglerinterieur{
position: absolute; position: absolute;
margin: auto; left: 21.1vw;
top : 17%; bottom: 7.75vw;
left: 17%; border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 3vw solid var(--lightsedonca);
} }
.container { .ptriangle{
width: 200px; display: table;
margin: 0 auto; margin: 0 auto;
border-left: 1.5vw solid transparent;
border-right: 1.5vw solid transparent;
border-bottom: 3vw solid #DEA430;
}
/* PARTIE PENTA*/
.pentagone{
position: absolute;
width: 3vw;
box-sizing: content-box;
border-width: 3.15vw 1.2vw 0;
border-style: solid;
border-color: #6FDE30 transparent;
}
.pentagone:before{
content: "";
position: absolute;
top: -5.3vw;
left: -1.15vw;
border-width: 0 2.68vw 2.2vw;
border-style: solid;
border-color: transparent transparent #6FDE30;
}
.pentagoneinterieur{
position: absolute;
width: 1.5vw;
box-sizing: content-box;
top: -2.75vw;
left: 0.25vw;
border-width: 1.5vw 0.5vw 0;
border-style: solid;
border-color: var(--lightsedonca) transparent;
} }
.game-container { .pentagoneinterieur:before{
margin-top: 40px; content: "";
position: absolute;
top: -2.4vw;
left: -0.486vw;
border-width: 0 1.3vw 1vw;
border-style: solid;
border-color: transparent transparent var(--lightsedonca);
}
.ppentagone{
position: relative; position: relative;
padding: 15px; width: 1.5vw;
cursor: default; box-sizing: content-box;
-moz-user-select:none; top: 1vw;
background: #bbada0; left: 1vw;
border-radius: 15px; border-width: 1.5vw 0.5vw 0;
width: 160px; border-style: solid;
height: 225px; border-color: #6FDE30 transparent;
box-sizing: border-box; }
.ppentagone:before{
content: "";
position: absolute;
top: -2.45vw;
left: -0.5vw;
border-width: 0 1.3vw 1vw;
border-style: solid;
border-color: transparent transparent #6FDE30;
}
/* PARTIE LOSANGE */
.losange {
width : 0;
height : 0;
border : 1.5vw solid transparent;
border-bottom : 2.25vw solid #B130DE;
position : relative;
top : -1.5vw;
}
.losange:after {
content : '';
position : absolute;
left : -1.53vw;
top : 2.2vw;
border : 1.5vw solid transparent;
border-top : 2.25vw solid #B130DE;
}
.losangeinterieur {
width : 0;
height : 0;
border : 0.75vw solid transparent;
border-bottom : 1.125vw solid var(--lightsedonca);
position : relative;
top : 0.45vw;
left: -0.74vw;
z-index: 2;
}
.losangeinterieur:after {
content : '';
position : absolute;
left : -0.75vw;
top : 1.1vw;
border : 0.75vw solid transparent;
border-top : 1.125vw solid var(--lightsedonca);
z-index: 2;
}
.plosange {
width : 0;
height : 0;
border : 0.75vw solid transparent;
border-bottom : 1.125vw solid #B130DE;
position : relative;
top : -0.5vw;
left: -0.74vw;
z-index: 2;
}
.plosange:after {
content : '';
position : absolute;
left : -0.75vw;
top : 1.1vw;
border : 0.75vw solid transparent;
border-top : 1.125vw solid #B130DE;
z-index: 2;
} }
.grid-container { .retourstp{
position: absolute; position: absolute;
z-index: 1;
} }
.grid-row {
margin-bottom: 15px; /* J'ai trop avancé, mode multi*/
#containpseudo{
position: absolute;
height: 15%;
width: 30%;
z-index: 12;
left: 35%;
top: 30%;
}
#pseudoenter{
background-color: red;
height: 100%;
border-radius: 45px;
background-color: #B130DE;
}
#inputpseudo{
position: absolute;
width: 99%;
height: 65%;
border-radius: 30px;
font-size: 3vw;
background-color: transparent;
appearance: none;
text-align: center;
color: #707070;
border-color: transparent;
font-family: impact, Arial Black;
z-index: 11;
}
#fondinput{
background-color: red;
position: absolute;
width: 97%;
background-color: var(--lightsedonca);
height: 90%;
border-radius: 40px;
left: 1.5%;
top: 5%;
z-index: 10;
}
#buttonadd{
position: absolute;
top: 30%;
right: -12%;
height: 3vw;
width: 3vw;
border-radius: 2vw;
background-color: #B130DE;
z-index: 18;
}
#textplus{
font-size: 3vw;
font-family: arial, Arial Black;
position: absolute;
margin-top: -0.15vw;
margin-left: 0.65vw;
color: var(--lightprima);
}
#containplayers{
position: absolute;
background-color: transparent;
color: var(--lightsedonca);
width: 15vw;
height: 20vw;
z-index: 17;
right: 0%;
top: 8vw;
} }
.grid-cell { .pseudojoueur {
width: 40px; float: right;
height: 40px; margin-top: 0px;
margin-right: 5px; margin-bottom: 3%;
margin-bottom: 12px; margin-right: 10%;
float: left; font-family: Lucida Console, Arial Black, Arial;
border-radius: 15px; font-size: 2vw;
background: rgba(238, 228, 218, 0.35);
} }
#pseudolist {
width: 100%;
height: 1.7vw;
}

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.4 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 9.5 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 20 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 24 KiB

@ -1,396 +1,307 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<title>666</title> <title>SwishGame</title>
<link rel="stylesheet" type="text/css" href="css/style.css"> <link rel="stylesheet" type="text/css" href="css/style.css">
<script type="text/javascript" src="js/main.js"></script> <script type="text/javascript" src="js/main.js"></script>
</head> </head>
<body> <body>
<!--=== DESIGN CARD ===-->
<div onclick="ajoutercarte('maCarte1')" class="container">
<div id="maCarte1" class="game-container">
<div class="grid-container"> <div id="pageAccueil">
<div class="grid-row"> <div class="logo">
<div id="card1 num1" class="grid-cell cbleu"></div> <a onclick="journuit()">
<div id="card1 num2" class="grid-cell cvert"> <img src="imgs/swishjour.png" id="imglogo">
<!--<div id="bague"> </a>
<div id="bague-inté"></div>
</div>-->
</div>
<div id="card1 num3" class="grid-cell cbleu"></div>
</div>
<div class="grid-row">
<div id="card1 num4" class="grid-cell corange"></div>
<div id="card1 num5" class="grid-cell cviolet">
<!--<div id="cercle"></div>-->
</div>
<div id="card1 num6" class="grid-cell corange"></div>
</div>
<div class="grid-row">
<div id="card1 num7" class="grid-cell corange"></div>
<div id="card1 num8" class="grid-cell cviolet"></div>
<div id="card1 num9" class="grid-cell corange"></div>
</div>
<div class="grid-row">
<div id="card1 num10" class="grid-cell cbleu"></div>
<div id="card1 num11" class="grid-cell cvert"></div>
<div id="card1 num12" class="grid-cell cbleu"></div>
</div>
</div>
</div>
</div>
<div onclick="ajoutercarte('maCarte2')" class="container">
<div id="maCarte2" class="game-container">
<div class="grid-container">
<div class="grid-row">
<div id="card2 num1" class="grid-cell cbleu"></div>
<div id="card2 num2" class="grid-cell cvert">
<!--<div id="bague">
<div id="bague-inté"></div>
</div>-->
</div>
<div id="card2 num3" class="grid-cell cbleu"></div>
</div>
<div class="grid-row">
<div id="card2 num4" class="grid-cell corange"></div>
<div id="card2 num5" class="grid-cell cviolet">
<!--<div id="cercle"></div>-->
</div>
<div id="card2 num6" class="grid-cell corange"></div>
</div>
<div class="grid-row">
<div id="card2 num7" class="grid-cell corange"></div>
<div id="card2 num8" class="grid-cell cviolet"></div>
<div id="card2 num9" class="grid-cell corange"></div>
</div>
<div class="grid-row">
<div id="card2 num10" class="grid-cell cbleu"></div>
<div id="card2 num11" class="grid-cell cvert"></div>
<div id="card2 num12" class="grid-cell cbleu"></div>
</div>
</div>
</div>
</div>
<div onclick="ajoutercarte('maCarte3')" class="container">
<div id="maCarte3" class="game-container">
<div class="grid-container">
<div class="grid-row">
<div id="card3 num1" class="grid-cell cbleu"></div>
<div id="card3 num2" class="grid-cell cvert">
<!--<div id="bague">
<div id="bague-inté"></div>
</div>-->
</div>
<div id="card3 num3" class="grid-cell cbleu"></div>
</div>
<div class="grid-row">
<div id="card3 num4" class="grid-cell corange"></div>
<div id="card3 num5" class="grid-cell cviolet">
<!--<div id="cercle"></div>-->
</div>
<div id="card3 num6" class="grid-cell corange"></div>
</div>
<div class="grid-row">
<div id="card3 num7" class="grid-cell corange"></div>
<div id="card3 num8" class="grid-cell cviolet"></div>
<div id="card3 num9" class="grid-cell corange"></div>
</div>
<div class="grid-row">
<div id="card3 num10" class="grid-cell cbleu"></div>
<div id="card3 num11" class="grid-cell cvert"></div>
<div id="card3 num12" class="grid-cell cbleu"></div>
</div>
</div>
</div>
</div>
<div onclick="ajoutercarte('maCarte4')" class="container">
<div id="maCarte4" class="game-container">
<div class="grid-container">
<div class="grid-row">
<div id="card4 num1" class="grid-cell cbleu"></div>
<div id="card4 num2" class="grid-cell cvert">
<!--<div id="bague">
<div id="bague-inté"></div>
</div>-->
</div>
<div id="card4 num3" class="grid-cell cbleu"></div>
</div>
<div class="grid-row">
<div id="card4 num4" class="grid-cell corange"></div>
<div id="card4 num5" class="grid-cell cviolet">
<!--<div id="cercle"></div>-->
</div>
<div id="card4 num6" class="grid-cell corange"></div>
</div>
<div class="grid-row">
<div id="card4 num7" class="grid-cell corange"></div>
<div id="card4 num8" class="grid-cell cviolet"></div>
<div id="card4 num9" class="grid-cell corange"></div>
</div>
<div class="grid-row">
<div id="card4 num10" class="grid-cell cbleu"></div>
<div id="card4 num11" class="grid-cell cvert"></div>
<div id="card4 num12" class="grid-cell cbleu"></div>
</div>
</div>
</div>
</div>
<div onclick="ajoutercarte('maCarte5')" class="container">
<div id="maCarte5" class="game-container">
<div class="grid-container">
<div class="grid-row">
<div id="card5 num1" class="grid-cell cbleu"></div>
<div id="card5 num2" class="grid-cell cvert">
<!--<div id="bague">
<div id="bague-inté"></div>
</div>-->
</div>
<div id="card5 num3" class="grid-cell cbleu"></div>
</div>
<div class="grid-row">
<div id="card5 num4" class="grid-cell corange"></div>
<div id="card5 num5" class="grid-cell cviolet">
<!--<div id="cercle"></div>-->
</div>
<div id="card5 num6" class="grid-cell corange"></div>
</div>
<div class="grid-row">
<div id="card5 num7" class="grid-cell corange"></div>
<div id="card5 num8" class="grid-cell cviolet"></div>
<div id="card5 num9" class="grid-cell corange"></div>
</div>
<div class="grid-row">
<div id="card5 num10" class="grid-cell cbleu"></div>
<div id="card5 num11" class="grid-cell cvert"></div>
<div id="card5 num12" class="grid-cell cbleu"></div>
</div>
</div>
</div>
</div>
<div onclick="ajoutercarte('maCarte6')" class="container">
<div id="maCarte6" class="game-container">
<div class="grid-container">
<div class="grid-row">
<div id="card6 num1" class="grid-cell cbleu"></div>
<div id="card6 num2" class="grid-cell cvert">
<!--<div id="bague">
<div id="bague-inté"></div>
</div>-->
</div>
<div id="card6 num3" class="grid-cell cbleu"></div>
</div>
<div class="grid-row">
<div id="card6 num4" class="grid-cell corange"></div>
<div id="card6 num5" class="grid-cell cviolet">
<!--<div id="cercle"></div>-->
</div>
<div id="card6 num6" class="grid-cell corange"></div>
</div>
<div class="grid-row">
<div id="card6 num7" class="grid-cell corange"></div>
<div id="card6 num8" class="grid-cell cviolet"></div>
<div id="card6 num9" class="grid-cell corange"></div>
</div>
<div class="grid-row">
<div id="card6 num10" class="grid-cell cbleu"></div>
<div id="card6 num11" class="grid-cell cvert"></div>
<div id="card6 num12" class="grid-cell cbleu"></div>
</div>
</div>
</div>
</div>
<div onclick="ajoutercarte('maCarte7')" class="container">
<div id="maCarte7" class="game-container">
<div class="grid-container">
<div class="grid-row">
<div id="card7 num1" class="grid-cell cbleu"></div>
<div id="card7 num2" class="grid-cell cvert">
<!--<div id="bague">
<div id="bague-inté"></div>
</div>-->
</div>
<div id="card7 num3" class="grid-cell cbleu"></div>
</div>
<div class="grid-row">
<div id="card7 num4" class="grid-cell corange"></div>
<div id="card7 num5" class="grid-cell cviolet">
<!--<div id="cercle"></div>-->
</div>
<div id="card7 num6" class="grid-cell corange"></div>
</div>
<div class="grid-row">
<div id="card7 num7" class="grid-cell corange"></div>
<div id="card7 num8" class="grid-cell cviolet"></div>
<div id="card7 num9" class="grid-cell corange"></div>
</div>
<div class="grid-row">
<div id="card7 num10" class="grid-cell cbleu"></div>
<div id="card7 num11" class="grid-cell cvert"></div>
<div id="card7 num12" class="grid-cell cbleu"></div>
</div>
</div>
</div>
</div>
<div onclick="ajoutercarte('maCarte8')" class="container">
<div id="maCarte8" class="game-container">
<div class="grid-container">
<div class="grid-row">
<div id="card8 num1" class="grid-cell cbleu"></div>
<div id="card8 num2" class="grid-cell cvert">
<!--<div id="bague">
<div id="bague-inté"></div>
</div>-->
</div>
<div id="card8 num3" class="grid-cell cbleu"></div>
</div>
<div class="grid-row">
<div id="card8 num4" class="grid-cell corange"></div>
<div id="card8 num5" class="grid-cell cviolet">
<!--<div id="cercle"></div>-->
</div>
<div id="card8 num6" class="grid-cell corange"></div>
</div>
<div class="grid-row">
<div id="card8 num7" class="grid-cell corange"></div>
<div id="card8 num8" class="grid-cell cviolet"></div>
<div id="card8 num9" class="grid-cell corange"></div>
</div>
<div class="grid-row">
<div id="card8 num10" class="grid-cell cbleu"></div>
<div id="card8 num11" class="grid-cell cvert"></div>
<div id="card8 num12" class="grid-cell cbleu"></div>
</div>
</div>
</div>
</div>
<div onclick="ajoutercarte('maCarte9')" class="container">
<div id="maCarte9" class="game-container">
<div class="grid-container">
<div class="grid-row">
<div id="card9 num1" class="grid-cell cbleu"></div>
<div id="card9 num2" class="grid-cell cvert">
<!--<div id="bague">
<div id="bague-inté"></div>
</div>-->
</div>
<div id="card9 num3" class="grid-cell cbleu"></div>
</div>
<div class="grid-row">
<div id="card9 num4" class="grid-cell corange"></div>
<div id="card9 num5" class="grid-cell cviolet">
<!--<div id="cercle"></div>-->
</div>
<div id="card9 num6" class="grid-cell corange"></div>
</div>
<div class="grid-row">
<div id="card9 num7" class="grid-cell corange"></div>
<div id="card9 num8" class="grid-cell cviolet"></div>
<div id="card9 num9" class="grid-cell corange"></div>
</div> </div>
<div class="grid-row">
<div id="card9 num10" class="grid-cell cbleu"></div> <div id="containpseudo">
<div id="card9 num11" class="grid-cell cvert"></div> <a onclick="lancerpartie()">
<div id="card9 num12" class="grid-cell cbleu"></div> <div id="contourbuttonvalider">
<div class="bouttonvalider">
<h1 id="textjouer">JOUER</h1>
</div> </div>
</div> </div>
</a>
</div> </div>
<!--
Je n'avais rien à faire, donc j'ai designer comme pour mes croquis (l'input du pseudo + le boutton pour jouer et pour ajouter le pseudo)
Si vous voulez voir ce que cela donne, enlevez les commentaires (également dans le JS)
<div id="containpseudo">
<div id="pseudoenter">
<div id="fondinput">
<input onkeypress="ajouterplayer(event)" placeholder="SWISH" maxlength="12" id="inputpseudo">
</div> </div>
<div onclick="ajoutercarte('maCarte10')" class="container">
<div id="maCarte10" class="game-container">
<div class="grid-container">
<div class="grid-row">
<div id="card10 num1" class="grid-cell cbleu"></div>
<div id="card10 num2" class="grid-cell cvert">
<!--<div id="bague">
<div id="bague-inté"></div>
</div>-->
</div> </div>
<div id="card10 num3" class="grid-cell cbleu"></div> <a>
<div id="contourbuttonvalider">
<div class="bouttonvalider">
<h1 id="textjouer">JOUER</h1>
</div> </div>
<div class="grid-row">
<div id="card10 num4" class="grid-cell corange"></div>
<div id="card10 num5" class="grid-cell cviolet">
<!--<div id="cercle"></div>-->
</div> </div>
<div id="card10 num6" class="grid-cell corange"></div> </a>
<div id="buttonadd">
<a onclick="addplayer()">
<h2 id="textplus">+</h2>
</a>
</div> </div>
<div class="grid-row">
<div id="card10 num7" class="grid-cell corange"></div>
<div id="card10 num8" class="grid-cell cviolet"></div>
<div id="card10 num9" class="grid-cell corange"></div>
</div> </div>
<div class="grid-row">
<div id="card10 num10" class="grid-cell cbleu"></div> <div id="containplayers">
<div id="card10 num11" class="grid-cell cvert"></div>
<div id="card10 num12" class="grid-cell cbleu"></div>
</div> </div>
-->
<div id="ContainBottom">
<!-- Forme : rond-->
<div class="anneau">
<div class="rondinterieur inté"></div>
</div> </div>
<div class="containform">
<div class="rond"></div>
</div> </div>
<!-- Forme : carré-->
<div class="carre">
<div class="carreinterieur inté"></div>
</div> </div>
<div onclick="ajoutercarte('maCarte11')" class="container"> <div class="containform">
<div id="maCarte11" class="game-container"> <div class="pcarre"></div>
<div class="grid-container">
<div class="grid-row">
<div id="card11 num1" class="grid-cell cbleu"></div>
<div id="card11 num2" class="grid-cell cvert">
<!--<div id="bague">
<div id="bague-inté"></div>
</div>-->
</div> </div>
<div id="card11 num3" class="grid-cell cbleu"></div>
<!-- Forme : triangle-->
<div class="triangle">
<div class="trianglerinterieur"></div>
</div> </div>
<div class="grid-row"> <div class="containform">
<div id="card11 num4" class="grid-cell corange"></div> <div class="ptriangle"></div>
<div id="card11 num5" class="grid-cell cviolet">
<!--<div id="cercle"></div>-->
</div> </div>
<div id="card11 num6" class="grid-cell corange"></div>
<!-- Forme : pentagone-->
<div class="containform">
<div class="pentagone">
<div class="pentagoneinterieur"></div>
</div> </div>
<div class="grid-row">
<div id="card11 num7" class="grid-cell corange"></div>
<div id="card11 num8" class="grid-cell cviolet"></div>
<div id="card11 num9" class="grid-cell corange"></div>
</div> </div>
<div class="grid-row">
<div id="card11 num10" class="grid-cell cbleu"></div> <div class="containform">
<div id="card11 num11" class="grid-cell cvert"></div> <div class="ppentagone"></div>
<div id="card11 num12" class="grid-cell cbleu"></div>
</div> </div>
<!-- Forme : losange -->
<div class="containform">
<div class="losange">
<div class="losangeinterieur"></div>
</div> </div>
</div> </div>
<div class="containform">
<div class="plosange"></div>
</div> </div>
<div onclick="ajoutercarte('maCarte12')" class="container">
<div id="maCarte12" class="game-container">
<div class="grid-container">
<div class="grid-row">
<div id="card12 num1" class="grid-cell cbleu"></div>
<div id="card12 num2" class="grid-cell cvert">
<!--<div id="bague">
<div id="bague-inté"></div>
</div>-->
</div> </div>
<div id="card12 num3" class="grid-cell cbleu"></div>
<div class="mounts">
<img src="imgs/clicjour.png" id="clic">
<img src="imgs/lightcloud.png" id="cloud">
<img src="imgs/mount1.png" id="mount1">
<img src="imgs/mount2.png" id="mount2">
</div> </div>
<div class="grid-row">
<div id="card12 num4" class="grid-cell corange"></div>
<div id="card12 num5" class="grid-cell cviolet">
<!--<div id="cercle"></div>-->
</div> </div>
<div id="card12 num6" class="grid-cell corange"></div>
<div id="pageGame">
<div class="logop2">
<a onclick="journuit()">
<img src="imgs/swishjour.png" id="imglogo2">
</a>
</div> </div>
<div class="grid-row">
<div id="card12 num7" class="grid-cell corange"></div> <a class="retourstp" onclick="retour()">
<div id="card12 num8" class="grid-cell cviolet"></div> <div class="buttonretour">
<div id="card12 num9" class="grid-cell corange"></div> <h1 class="txt">X</h1>
</div> </div>
<div class="grid-row"> </a>
<div id="card12 num10" class="grid-cell cbleu"></div>
<div id="card12 num11" class="grid-cell cvert"></div> <div id="card-conteneur">
<div id="card12 num12" class="grid-cell cbleu"></div> <div class="flex-container">
<div class="flex-item">
<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 class="flex-item">
<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 class="flex-item">
<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 class="flex-item">
<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 class="flex-item">
<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 class="flex-item">
<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 class="flex-item">
<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 class="flex-item">
<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 class="flex-item">
<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 class="flex-item">
<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 class="flex-item">
<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 class="flex-item">
<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>
</div> </div>
</div> </div>
</div> </div>
</body> </body>
</html> </html>

@ -1,174 +1,72 @@
//1 = rond var mode = 1;
//-1 = anneau var nbplayers = 1;
var lightprima = "#DEDEDE";
var carte = [//violet var lightsedonca = "#B7B7B7";
"000010020000", var lighttercia = "#E6E6E6";
"000010010000",
//verte var darkprima = "#474747";
"010000000020", var darkseconda = "#393939";
"020000000010", var darktercia = "#606060";
//orange
"000201000000", function journuit(){
"000201000000", //mode jour
"000002100000", if(mode%2 == 0){
"000002100000", //changer logo swish
"000002001000", document.getElementById("imglogo").src = "imgs/swishjour.png";
"000002001000", document.getElementById("imglogo2").src = "imgs/swishjour.png";
//bleu /*//bouttonjouer
"200000000100", document.getElementById("fondinput").style.backgroundColor = lightsedonca;
"200000000100", document.getElementById("contourbuttonvalider").style.backgroundColor = lightsedonca;
"100000000002", document.getElementById("textjouer").style.color = lightsedonca;
"100000000002", document.getElementById("textplus").style.color = lightprima;*/
"201000000000", //changer montagnesfond
"201000000000", document.getElementById("mount1").src = "imgs/mount1.png";
//vert orange document.getElementById("mount2").src = "imgs/mount2.png";
"000001000020", //nuages
"010000002000", document.getElementById("cloud").src = "imgs/lightcloud.png";
"010002000000", document.getElementById("clic").src = "imgs/clicjour.png";
"010002000000", //changer background color
"020001000000", //document.getElementById("containplayers").style.color = lightsedonca;
"020001000000", //maj couleur principales
//bleu violet document.documentElement.style.setProperty('--lightprima',lightprima);
"002000010000", document.documentElement.style.setProperty('--lightsedonca',lightsedonca);
"000020000100", document.documentElement.style.setProperty('--lighttercia',lighttercia);
"000000010200",
"000000010200",
"000000020100",
"000000020100",
//bleu vert
"000000000210",
"000000000021",
"001000000020",
"001000000020",
"002000000010",
"002000000010",
//violet orange
"000010002000",
"000100020000",
"000000012000",
"000000012000",
"000000120000",
"000000120000",
//violet vert
"010000020000",
"010000020000",
"020010000000",
"020010000000",
"010020000000",
"010020000000",
"000010000020",
"000010000020",
//orange bleu
"002000001000",
"002000001000",
"000200000100",
"000200000100",
"200001000000",
"200001000000",
"001200000000",
"001200000000",
"001002000000",
"002001000000",
"000200000001",
"000100000002"];
var carteselect = 0;
var cartesAffiches = [];
var cartesSelect = [];
//fonction au lancement
window.onload = function() {
//partie tirage au sort
for(var i=1; i<=12;i++){
var ale = Math.floor(Math.random() * Math.floor(60));
ale = ale +1;
var nomcarte = carte+i;
var macarte = carte[ale-1];
cartesAffiches.push(macarte);
generationcarte("card"+i,macarte);
}
};
function generationcarte (cartenum, nbcarte) {
for(var i=0; i<12; i++) {
if(nbcarte[i] == 1 || nbcarte[i] == 2)
{
if(nbcarte[i] == 1){
var p = document.getElementById(cartenum+" num"+ (i+1));
var e=document.createElement("div");
e.setAttribute("id","cercle");
p.appendChild(e);
}
if(nbcarte[i] == 2){
var p = document.getElementById(cartenum+" num"+ (i+1));
var e=document.createElement("div");
var f=document.createElement("div");
e.setAttribute("id","bague");
f.setAttribute("id","bague-inté")
e.appendChild(f);
p.appendChild(e);
}
}
}
}
function ajoutercarte(carte) {
var lacarte = document.getElementById(carte);
if(lacarte.style.backgroundColor == "red")
{
lacarte.style.backgroundColor = "#bbada0";
carteselect = carteselect-1;
//suppression dans les cartes select
var pos = cartesSelect.indexOf(carte);
cartesSelect.splice(pos,1);
} }
//mode nuit
else { else {
if(carteselect == 5) //changer logo swish
alert("non"); document.getElementById("imglogo").src = "imgs/swishnuit.png";
else { document.getElementById("imglogo2").src = "imgs/swishnuit.png";
lacarte.style.backgroundColor = "red"; /*//bouttonjouer
carteselect = carteselect +1; document.getElementById("fondinput").style.backgroundColor = darkseconda;
//ajout dans les cartes select document.getElementById("contourbuttonvalider").style.backgroundColor = darkseconda;
cartesSelect.push(carte); 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";
document.getElementById("clic").src = "imgs/clicnuit.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 verification(carte1, carte2){ function lancerpartie(){
var carte2_1 = carte2[2]+carte2[1]+carte2[0]+carte2[5]+carte2[4]+carte2[3]+carte2[8]+carte2[7]+carte2[6]+carte2[11]+carte2[10]+carte2[9]; document.getElementById("pageAccueil").style.visibility = "hidden";
var carte2_2 = carte2[9]+carte2[10]+carte2[11]+carte2[6]+carte2[7]+carte2[8]+carte2[3]+carte2[4]+carte2[5]+carte2[0]+carte2[1]+carte2[2]; document.getElementById("pageGame").style.visibility = "visible";
var carte2_3 = carte2[11]+carte2[10]+carte2[9]+carte2[8]+carte2[7]+carte2[6]+carte2[5]+carte2[4]+carte2[3]+carte2[2]+carte2[1]+carte2[0];
} }
function retour(){
/* document.getElementById("pageAccueil").style.visibility = "visible";
=== POSSIBILITE === document.getElementById("pageGame").style.visibility = "hidden";
}
123 | 321
456 | 654
789 | 987
ABC | CBA
---------
ABC | CBA
789 | 987
456 | 654
123 | 321
=== DEROULEMENT ALGO ===
3cartes et +
>Comparer carte1 et carte2
==> poser une carte 1 sans la toucher
==> Superposer la carte2 et essayer les 4 cas
*** SI BON
Ajouter la carte3+ et la superposer dans tt les cas
==> Vérifier qu'il y ait que des 3 || 0
*** SI PAS BON
Stoper le jeu
*/
@ -179,7 +77,41 @@ ABC | CBA
/*
Je n'avais rien à faire, je me suis amusé à faire l'ajout des joueurs
function addplayer(){
//j'ai mis une limite de 6joueurs, mais c'est à voir
if(nbplayers < 7){
//création de la div contenant le pseudo
var divpseudo = document.createElement('div');
divpseudo.id = 'pseudolist';
//reprise du pseudo entré par le joueur
var pseudo = document.getElementById("inputpseudo").value;
//vérification si pseudo vide pour lui donner un pseudo du style "Joueur3"
if(pseudo == "")
{
pseudo = "Joueur " + nbplayers;
}
//création du text-pseudo
var tag = document.createElement("p");
tag.className = "pseudojoueur";
var text = document.createTextNode(pseudo);
tag.appendChild(text);
//mise du text dans la division
divpseudo.appendChild(tag);
//insertion pseudo dans liste
document.getElementById("containplayers").appendChild(divpseudo);
//remise input vide ;)
document.getElementById("inputpseudo").value = "";
nbplayers = nbplayers +1;
}
}
function ajouterplayer(event){
if(event.keyCode == 13)
addplayer();
}
*/

Loading…
Cancel
Save