Merge branch 'feature-regles'

Ivan23BG · Apr 24, 2024 · 0ee1333 · 0ee1333
2 parents 6d3e6f1 + 8758ea7
commit 0ee1333
Show file tree

Hide file tree

Showing 9 changed files with 314 additions and 31 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/css/home_hex_styles.css b/src/main/game_ui/static/css/home_hex_styles.css
@@ -292,4 +292,96 @@ body {
 #container{
     justify-content: center;
     flex-direction: column;
+}
+
+/* ============== 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: row;
+    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{
+    float: left;
+    width: 50%;
+}
+
+.exemple{
+    justify-content: center;
+    align-items: center;
+    width: 50%;
+    padding-left: 15%;
+    padding-top: 3%;
+}
+.gif{
+    width: 100%;
+    height: 100%;
+    background-image: url(../images/HexGif.gif);
+    background-repeat: no-repeat;
+}
+
+.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/images/HexGif.gif b/src/main/game_ui/static/images/HexGif.gif
diff --git a/src/main/game_ui/static/js/game_hex.js b/src/main/game_ui/static/js/game_hex.js
@@ -1,3 +1,7 @@
+var hover1 = "#344792"
+var hover2 = "#BA3533"
+var hex_color = "#B0BFB1"
+
 window.onload = function () {
     let current_player = 1; // Player 1 starts the game
     let game_over = false;
@@ -246,19 +250,19 @@ window.onload = function () {
     function survolHex(element) {
         return function (event) {
             // Hover uniquement si on n'est ni une couleur ni désactivé
-            if (event.type === "mouseover" && game_over === false && !element.getAttribute('couleur') && !element.getAttribute("disabled")) {
-                if (current_player === 1) {
-                    element.style.backgroundColor = "#344792";
+            if (event.type === "mouseover" && game_over===false && !element.getAttribute('couleur') && !element.getAttribute("disabled")){
+                if (current_player===1){
+                    element.style.backgroundColor = hover1;
                 }
-                if (current_player === 2) {
-                    element.style.backgroundColor = "#BA3533";
+                if (current_player===2){
+                    element.style.backgroundColor = hover2;
                 }
                 element.setAttribute("nimp", true);
             }
             // Enlève le hover si on quitte un hex ni en couleur ni disabled
-            else if (event.type === "mouseout" && game_over === false && element.getAttribute("nimp") && !element.getAttribute('disabled')) {
-                element.style.backgroundColor = "#B0BFB1";
-                element.removeAttribute("nimp");
+            else if (event.type === "mouseout" && game_over===false && element.getAttribute("nimp") && !element.getAttribute('disabled')){
+               element.style.backgroundColor = hex_color;
+               element.removeAttribute("nimp");
             }
         }
     }
@@ -287,6 +291,10 @@ document.addEventListener("keydown", gestionnairePressionTouche);
 
 
 function changerFichiers() {
+    var bhover1 = "#344792"
+    var bhover2 = "#BA3533"
+    var mhover1 = "#5197BA"
+    var mhover2 = "#F6995C"
     var Mblue = "rgb(81, 130, 155)";
     var Mred = "rgb(248, 124, 41)";
     var blue = "rgb(41, 51, 92)";
@@ -297,28 +305,37 @@ function changerFichiers() {
     if (styleSheet.getAttribute('href') === "../static/css/game_hex_styles.css") {
         //console.log("touché");
         styleSheet.setAttribute('href', "../static/css/game_hex_marine_skin.css");
+        hex_color = "#ADBBC6"
+        hover1 = mhover1;
+        hover2 = mhover2;
         div1.setAttribute("value", Mred);
         div2.setAttribute("value", Mblue);
-        changecolor(blue, Mblue, red, Mred)
+        changecolor(blue,Mblue,red,Mred,hex_color)
     } else {
         styleSheet.setAttribute('href', "../static/css/game_hex_styles.css");
-        div1.setAttribute("value", red);
+        hex_color = "#B0BFB1"
+        hover1 = bhover1;
+        hover2 = bhover2;
+        div1.setAttribute("value",red);
         div2.setAttribute("value", blue);
-        changecolor(Mblue, blue, Mred, red)
+        changecolor(Mblue,blue,Mred,red,hex_color)
     }
 
 }
 
-function changecolor(b1, b2, r1, r2) {
+function changecolor(b1,b2,r1,r2,hex_color){
     const cells = document.querySelectorAll('.hex');
     cells.forEach(hex => {
-        console.log(hex.style.backgroundColor);
+        //console.log(hex.style.backgroundColor);
         if (hex.style.backgroundColor == b1) {
             hex.style.backgroundColor = b2;
         }
-        if (hex.style.backgroundColor == r1) {
+        else if (hex.style.backgroundColor == r1) {
             hex.style.backgroundColor = r2;
         }
+        else {
+            hex.style.backgroundColor = hex_color;
+        }
     })
 }
 
diff --git a/src/main/game_ui/static/js/game_hexia.js b/src/main/game_ui/static/js/game_hexia.js
@@ -372,9 +372,9 @@ window.onload = async function () {
                 element.setAttribute("nimp", true);
             }
             // Enlève le hover si on quitte un hex ni en couleur ni disabled
-            else if (event.type === "mouseout" && game_over === false && element.getAttribute("nimp") && !element.getAttribute('disabled')) {
-                element.style.backgroundColor = "#B0BFB1";
-                element.removeAttribute("nimp");
+            else if (event.type === "mouseout" && game_over===false && element.getAttribute("nimp") && !element.getAttribute('disabled')){
+               element.style.backgroundColor = "#ADBBC6";
+               element.removeAttribute("nimp");
             }
         }
     }

diff --git a/src/main/game_ui/static/js/home_awale.js b/src/main/game_ui/static/js/home_awale.js
@@ -35,4 +35,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/static/js/home_hex.js b/src/main/game_ui/static/js/home_hex.js
@@ -57,4 +57,25 @@ function back() {
     window.location.href = '/';
 }
 
+// ========== 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';
+    }
+}