Skip to content

Commit

Permalink
Indicateur de couleur
Browse files Browse the repository at this point in the history
  • Loading branch information
benjamin-milhet committed May 19, 2023
1 parent 103a834 commit f6216ab
Show file tree
Hide file tree
Showing 4 changed files with 60 additions and 0 deletions.
1 change: 1 addition & 0 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ docker-compose up
## Roadmap

- - [x] Première version jouable
- - [x] Indicateur de tour
- - [ ] Notification avec le thème du site
- - [ ] Menu de personnalisation d'une partie
- - [ ] Partie privée
Expand Down
19 changes: 19 additions & 0 deletions js/client.js
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,16 @@ socket.on("playedCell", (data) => {
} else {
player.turn = player.socketId !== data.socketId;
}

if (player.turn === true && player.symbol === "red") {
$("#currentPlayer").css("background-color", "orangered");
} else if (player.turn === true && player.symbol === "yellow") {
$("#currentPlayer").css("background-color", "gold");
} else if (player.turn !== true && player.symbol === "red") {
$("#currentPlayer").css("background-color", "gold");
} else if (player.turn !== true && player.symbol === "yellow") {
$("#currentPlayer").css("background-color", "orangered");
}
} else {
if (player.socketId === data.socketId) alert("Cette case est déjà prise !");
}
Expand All @@ -61,6 +71,15 @@ function startGame(players) {
console.log(players);
$("#btnCopier").css("display", "none");
$(".lien-input").css("display", "none");
$(".indicator-container").css("display", "flex");

if (player.symbol === "red") {
$("#yourColor").css("background-color", "orangered");
} else {
$("#yourColor").css("background-color", "gold");
}

$("#currentPlayer").css("background-color", "orangered");

if (players[0].socketId === socket.id) {
player.turn = true;
Expand Down
29 changes: 29 additions & 0 deletions style/style-jeux.css
Original file line number Diff line number Diff line change
Expand Up @@ -189,6 +189,35 @@
margin-right: 10px;
}

.indicator {
width: 50px;
height: 50px;
border-radius: 50%;
margin-right: 10px;
}

.indicator-container {
display: none;
align-items: center;
margin-bottom: 20px;
}

.indicator-container > div {
display: flex;
align-items: center;
margin-right: 20px;
margin-left: 50px;
flex-direction: row;
}

.colorText {
font-size: 18px;
margin-left: 10px;
margin-right: 10px;
color: #fff;
}





Expand Down
11 changes: 11 additions & 0 deletions templates/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,17 @@

</playground>

<div class="indicator-container">
<div>
<span class="colorText">Joueur actuel : </span>
<div id="currentPlayer" class="indicator"></div>
</div>
<div>
<span class="colorText">Votre couleur : </span>
<div id="yourColor" class="indicator"></div>
</div>
</div>

<div class="lien-container">
<input type="text" id="lien-input" class="lien-input input-lien" value="">
<button id="btnCopier" class="button" onclick="copierLien()">Copier</button>
Expand Down

0 comments on commit f6216ab

Please sign in to comment.