ajout regles awale

Ivan23BG · Apr 24, 2024 · 8758ea7 · 8758ea7
1 parent ef6b0de
commit 8758ea7
Show file tree

Hide file tree

Showing 3 changed files with 147 additions and 26 deletions.
diff --git a/src/main/game_ui/static/css/home_awale_styles.css b/src/main/game_ui/static/css/home_awale_styles.css
@@ -233,4 +233,87 @@ body {
 
 .selected_2:hover{
     background-color: #cc945b;
-}  
+} 
+
+
+
+/* ============== fenetre regles ==========================*/
+/* Styles pour le bouton */
+#reglesBtn{
+    user-select: none;
+    cursor: pointer;
+    display: inline-block;
+    position: relative;
+    width: 80px;
+    height: 40px;
+    margin: 10px;
+    padding: 0;
+    left: 0%;
+    top: 0%;
+    text-align: center;
+    vertical-align: middle;
+    line-height: 40px;
+    transform: translate(-10%, 0%);
+    background-color: #0892A5;
+    border-radius: 10px;
+    transition: transform .1s;
+    font-size: 110%;
+    font-size: 16px;
+    color: #DDE0BD;
+
+}
+
+#reglesBtn:hover {
+    background-color: #08636F;
+    transform: scale(1.1) translate(-10%, 0%);
+}
+
+/* Styles pour la fenêtre modale */
+.modal {
+    display: none; /* Masquer la fenêtre modale par défaut */
+    position: fixed;
+    z-index: 1;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    background-color: rgba(0,0,0,0.5);
+}
+
+.modal-content {
+    display: flex;
+    flex-direction: column;
+    font-size: 20px;
+    background-color: #0892A5;
+    border-radius: 10px;
+    margin: 15% auto;
+    padding: 20px;
+    border: 1px solid #888;
+    width: 80%;
+    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
+    position: relative;
+}
+
+.regles-content{
+    display: flex;
+    flex-direction: column;
+    float: left;
+    width: 100%;
+}
+
+
+.close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.close:hover,
+.close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+}
diff --git a/src/main/game_ui/static/js/home_awale.js b/src/main/game_ui/static/js/home_awale.js
@@ -34,4 +34,27 @@ function player_blue(){
     document.getElementById("button_red").classList.remove("selected_2")
     document.getElementById("button_blue").classList.add("selected_2")
     player = 2;
-}
+}
+
+// ========== fenetre regles ==================================
+
+const openModalBtn = document.getElementById('reglesBtn');
+const modal = document.getElementById('modal');
+const closeBtn = document.getElementsByClassName('close')[0];
+
+// Fonction pour ouvrir la fenêtre regles
+openModalBtn.onclick = function() {
+    modal.style.display = 'block';
+}
+
+// Fonction pour fermer la fenêtre modale lorsque l'utilisateur clique sur le bouton de fermeture (×)
+closeBtn.onclick = function() {
+    modal.style.display = 'none';
+}
+
+// Fermer la fenêtre modale si l'utilisateur clique en dehors de la fenêtre modale
+window.onclick = function(event) {
+    if (event.target == modal) {
+        modal.style.display = 'none';
+    }
+}
diff --git a/src/main/game_ui/templates/home_awale.html b/src/main/game_ui/templates/home_awale.html
@@ -1,39 +1,54 @@
 <!DOCTYPE html>
 <html lang="en">
-
 <head>
     <title>Jeux combinatoires</title>
-    <link rel="stylesheet" href="../static/css/home_awale_styles.css">
+    <link rel="stylesheet" href="../static/css/home_awale_styles.css" />
 </head>
 
 <body>
     <div class="home" onclick="back()">Home</div>
-    <div class = "titre">
-        <h1><center>Awale</center></h1>
-    </div>
+        <div class="titre">
+            <h1><center>Awale</center></h1>
+        </div>
 
     <div class="container">
-        <form action="/game_awale" method="post">
-            <div class="start_game1v1" type="button" onclick="submitForm(1)">Player vs Player</div>
+    <form action="/game_awale" method="post">
+        <div class="start_game1v1" type="button" onclick="submitForm(1)">Player vs Player</div>
+    </form>
+    <div class="containeIA">
+        <form action="/game_awaleia" method="post">
+            <input type="hidden" id="player" name="player" value="" />
+            <div class="start_gameIA" type="button" onclick="submitForm(2)">Player vs IA</div>
         </form>
-        <div class = "containeIA">
-            <form action="/game_awaleia" method="post">
-                <input type="hidden" id="player" name="player" value="" />
-                <div class="start_gameIA" type="button" onclick="submitForm(2)">Player vs IA</div>
-            </form>
-            <div class="choose_color">
-                <div class="chooseplayer_blue color_button selected_2" id="button_red" onclick="player_red()">Red</div>
-                <div class="chooseplayer_red color_button" id="button_blue" onclick="player_blue()">Blue</div>
-            </div>
+        <div class="choose_color">
+            <div class="chooseplayer_blue color_button selected_2" id="button_red" onclick="player_red()">Red</div>
+            <div class="chooseplayer_red color_button" id="button_blue" onclick="player_blue()">Blue</div>
         </div>
-
-        <form action="/game_awaleiaia" method="post">
+      </div>
+
+      <form action="/game_awaleiaia" method="post">
         <div class="start_gameIAvsIA" type="button" onclick="submitForm(3)">IA vs IA</div>
-        </form>
-        
-        <div class="button_out"></div>
+      </form>
+
+      <div class="button_out"></div>
     </div>
-    <script src="../static/js/home_awale.js"></script>
-</body>
+    <button id="reglesBtn">Regles</button>
 
-</html>
+    <div id="modal" class="modal">
+      <div class="modal-content">
+        <span class="close">&times;</span>
+        <div class="regles-content">
+          <p>L'awalé ou awélé est un jeu de société combinatoire abstrait créé en Afrique. </p>
+
+          <p>Chaque tour consiste à choisir l'un des trous de son camp, puis à prendre toutes les graines de ce trou pour les semer une par une dans les trous suivants, d'abord sur sa propre rangée, puis sur celle de l'adversaire, dans le sens trigonometrique.</p>
+
+          <p>Si la dernière graine semée atterrit dans un trou du camp adverse et qu'il y a alors deux ou trois graines dans ce trou, le joueur capture ces graines et les met de côté. Ensuite, il regarde la case précédente et capture également si elle contient deux ou trois graines, et ainsi de suite jusqu'à son camp ou jusqu'à ce qu'il y ait un nombre différent de graines.</p>
+
+          <p>La partie se termine lorsque l'un des joueurs a capturé au moins 25 graines (la moitié ou plus), lorsqu'il n'est plus possible de capturer d'autres graines, ou lorsqu'un joueur n'a plus de graines dans son camp sans possibilité de nourrir son adversaire.</p>
+        </div>
+      </div>
+    </div>
+
+    <script src="../static/js/home_awale.js"></script>
+  </body>
+</html>