Merge pull request #24 from WildCodeSchool-2023-09/S6_game_played_com…

…ment S6 game played comment
WildCodeSchool-2023-09 · Feb 7, 2024 · f60696c · f60696c
2 parents cd179c0 + d21cf5c
commit f60696c
Show file tree

Hide file tree

Showing 26 changed files with 922 additions and 239 deletions.
diff --git a/assets/images/icons/star-regular-empty-mini.svg b/assets/images/icons/star-regular-empty-mini.svg
diff --git a/assets/images/icons/star-regular-empty.svg b/assets/images/icons/star-regular-empty.svg
diff --git a/assets/scripts/carousel.js b/assets/scripts/carousel.js
@@ -14,7 +14,7 @@ export function setVerticalCarousel(slideHeight, carousel, sliderBtns, currentSl
     carousel.addEventListener("scroll", function(e) {
         setTimeout(function() {
             for (let i = 0 ; i < sliderBtns.length ; i++) {
-                if (carousel.scrollTop >= slideHeight * i) {
+                if (carousel.scrollTop > slideHeight * i - 1 && carousel.scrollTop < slideHeight * i + 1) {
                     document.querySelector('.' + currentSlide).classList.toggle(currentSlide);
                     sliderBtns[i].classList.toggle(currentSlide);
                 }
@@ -37,7 +37,7 @@ export function setHorizontalCarousel(slideWidth, carousel, sliderBtns, currentS
     carousel.addEventListener("scroll", function(e) {
         setTimeout(function() {
             for (let i = (sliderBtns.length - 1) ; i >= 0 ; i--) {
-                if (carousel.scrollLeft <= slideWidth * i) {
+                if (carousel.scrollLeft < slideWidth * i + 1 && carousel.scrollLeft > slideWidth * i - 1) {
                     document.querySelector('.' + currentSlide).classList.toggle(currentSlide);
                     sliderBtns[i].classList.toggle(currentSlide);
                 }

diff --git a/assets/scripts/notationReview.js b/assets/scripts/notationReview.js
@@ -0,0 +1,153 @@
+const inputNotation = document.querySelector(".input-notation");
+const firstStar = document.getElementById("first-star");
+const firstStarSolid = document.getElementById("first-star-solid");
+const secondStar = document.getElementById("second-star");
+const secondStarSolid = document.getElementById("second-star-solid");
+const thirdStar = document.getElementById("third-star");
+const thirdStarSolid = document.getElementById("third-star-solid");
+const fourthStar = document.getElementById("fourth-star");
+const fourthStarSolid = document.getElementById("fourth-star-solid");
+const fifthStar = document.getElementById("fifth-star");
+const fifthStarSolid = document.getElementById("fifth-star-solid");
+
+inputNotation.setAttribute('value', 0);
+
+firstStar.addEventListener("click", () => {
+    firstStar.style.display = "none";
+    firstStarSolid.style.display = "block";
+    secondStar.style.display = "block";
+    secondStarSolid.style.display = "none";
+    thirdStar.style.display = "block";
+    thirdStarSolid.style.display = "none";
+    fourthStar.style.display = "block";
+    fourthStarSolid.style.display = "none";
+    fifthStar.style.display = "block";
+    fifthStarSolid.style.display = "none";
+    inputNotation.setAttribute("value", 1);
+});
+
+firstStarSolid.addEventListener("click", () => {
+    firstStar.style.display = "none";
+    firstStarSolid.style.display = "block";
+    secondStar.style.display = "block";
+    secondStarSolid.style.display = "none";
+    thirdStar.style.display = "block";
+    thirdStarSolid.style.display = "none";
+    fourthStar.style.display = "block";
+    fourthStarSolid.style.display = "none";
+    fifthStar.style.display = "block";
+    fifthStarSolid.style.display = "none";
+    inputNotation.setAttribute("value", 1);
+});
+
+secondStar.addEventListener("click", () => {
+    firstStar.style.display = "none";
+    firstStarSolid.style.display = "block";
+    secondStar.style.display = "none";
+    secondStarSolid.style.display = "block";
+    thirdStar.style.display = "block";
+    thirdStarSolid.style.display = "none";
+    fourthStar.style.display = "block";
+    fourthStarSolid.style.display = "none";
+    fifthStar.style.display = "block";
+    fifthStarSolid.style.display = "none";
+    inputNotation.setAttribute("value", 2);
+});
+
+secondStarSolid.addEventListener("click", () => {
+    firstStar.style.display = "none";
+    firstStarSolid.style.display = "block";
+    secondStar.style.display = "none";
+    secondStarSolid.style.display = "block";
+    thirdStar.style.display = "block";
+    thirdStarSolid.style.display = "none";
+    fourthStar.style.display = "block";
+    fourthStarSolid.style.display = "none";
+    fifthStar.style.display = "block";
+    fifthStarSolid.style.display = "none";
+    inputNotation.setAttribute("value", 2);
+});
+
+thirdStar.addEventListener("click", () => {
+    firstStar.style.display = "none";
+    firstStarSolid.style.display = "block";
+    secondStar.style.display = "none";
+    secondStarSolid.style.display = "block";
+    thirdStar.style.display = "none";
+    thirdStarSolid.style.display = "block";
+    fourthStar.style.display = "block";
+    fourthStarSolid.style.display = "none";
+    fifthStar.style.display = "block";
+    fifthStarSolid.style.display = "none";
+    inputNotation.setAttribute("value", 3);
+});
+
+thirdStarSolid.addEventListener("click", () => {
+    firstStar.style.display = "none";
+    firstStarSolid.style.display = "block";
+    secondStar.style.display = "none";
+    secondStarSolid.style.display = "block";
+    thirdStar.style.display = "none";
+    thirdStarSolid.style.display = "block";
+    fourthStar.style.display = "block";
+    fourthStarSolid.style.display = "none";
+    fifthStar.style.display = "block";
+    fifthStarSolid.style.display = "none";
+    inputNotation.setAttribute("value", 3);
+});
+
+fourthStar.addEventListener("click", () => {
+    firstStar.style.display = "none";
+    firstStarSolid.style.display = "block";
+    secondStar.style.display = "none";
+    secondStarSolid.style.display = "block";
+    thirdStar.style.display = "none";
+    thirdStarSolid.style.display = "block";
+    fourthStar.style.display = "none";
+    fourthStarSolid.style.display = "block";
+    fifthStar.style.display = "block";
+    fifthStarSolid.style.display = "none";
+    inputNotation.setAttribute("value", 4);
+});
+
+fourthStarSolid.addEventListener("click", () => {
+    firstStar.style.display = "none";
+    firstStarSolid.style.display = "block";
+    secondStar.style.display = "none";
+    secondStarSolid.style.display = "block";
+    thirdStar.style.display = "none";
+    thirdStarSolid.style.display = "block";
+    fourthStar.style.display = "none";
+    fourthStarSolid.style.display = "block";
+    fifthStar.style.display = "block";
+    fifthStarSolid.style.display = "none";
+    inputNotation.setAttribute("value", 4);
+});
+
+fifthStar.addEventListener("click", () => {
+    firstStar.style.display = "none";
+    firstStarSolid.style.display = "block";
+    secondStar.style.display = "none";
+    secondStarSolid.style.display = "block";
+    thirdStar.style.display = "none";
+    thirdStarSolid.style.display = "block";
+    fourthStar.style.display = "none";
+    fourthStarSolid.style.display = "block";
+    fifthStar.style.display = "none";
+    fifthStarSolid.style.display = "block";
+    inputNotation.setAttribute("value", 5);
+});
+
+fifthStarSolid.addEventListener("click", () => {
+    firstStar.style.display = "none";
+    firstStarSolid.style.display = "block";
+    secondStar.style.display = "none";
+    secondStarSolid.style.display = "block";
+    thirdStar.style.display = "none";
+    thirdStarSolid.style.display = "block";
+    fourthStar.style.display = "none";
+    fourthStarSolid.style.display = "block";
+    fifthStar.style.display = "none";
+    fifthStarSolid.style.display = "block";
+    inputNotation.setAttribute("value", 5);
+});
diff --git a/assets/scripts/commentModal.js → assets/scripts/reviewModal.js b/assets/scripts/commentModal.js → assets/scripts/reviewModal.js
@@ -1,9 +1,9 @@
 document.addEventListener('DOMContentLoaded', () => {
-    const doc = document.querySelector('.carousel');
+    const doc = document.querySelector('#game-played');
     const trigger = document.querySelector('[aria-haspopup="dialog"]');
     const dialog = document.getElementById(trigger.getAttribute('aria-controls'));
     const dismissTrigger = dialog.querySelector('[data-dismiss]');
-    const commentBox = document.querySelector('.comment-box');
+    const commentBox = document.querySelector('.review-box');
 
     // Function to display the modal with animation
     const open = function (dialog, box) {

diff --git a/assets/styles/app.scss b/assets/styles/app.scss
@@ -105,8 +105,8 @@ table {
 
 // TEXT
 
-h2, h3, h4, h5, h6, span, td, th, a,
-p, ul, label, input, input::placeholder, select, button, img[alt],
+h2, h3, h4, h5, h6, span,
+p, ul, label, input, input::placeholder, select, textarea, a, button, img[alt],
 .text
 {
     background: $colorGradient5;

diff --git a/assets/styles/dashboard-admin.scss b/assets/styles/dashboard-admin.scss
@@ -41,9 +41,18 @@
 
         .content {
 
+            div.logout {
+                a {
+                    padding: .5rem 1rem;
+                    border-radius: $borderRadiusSmall;
+                    border: 1px #C10BEE solid;
+                }
+            }
+
             .nav-admin {
                 display: flex;
                 flex-direction: column;
+                margin-top: 15px;
 
                 a {
                     text-align: center;