add cooldown

ThomasHerve · Apr 6, 2024 · 56a8372 · 56a8372
1 parent f7da538
commit 56a8372
Show file tree

Hide file tree

Showing 3 changed files with 110 additions and 12 deletions.
diff --git a/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.css b/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.css
@@ -5,12 +5,12 @@
         align-items: center;
         width: 80%;
         flex-direction: column;
+        margin-left: 3vh;
     }
 
     .button {
-        width: calc(20vh - 20px); /* Largeur égale à la hauteur pour faire un bouton carré */
-        height: calc(20vh - 20px); /* Hauteur égale à la largeur pour faire un bouton carré */
-        transform: translate(3vh);
+        width: calc(15vh - 15px); /* Largeur égale à la hauteur pour faire un bouton carré */
+        height: calc(15vh - 15px); /* Hauteur égale à la largeur pour faire un bouton carré */
         background-color: #1a237e; /* Légèrement plus clair que le fond */
         border: 10px solid #3949ab; /* Bordure */
         display: flex;
@@ -21,6 +21,20 @@
         margin: 10px; /* Espacement entre les boutons */
         font-size: 8vh;
     }
+
+    .timer {
+        width: calc(15vh - 15px); /* Largeur égale à la hauteur pour faire un bouton carré */
+        height: calc(15vh - 15px); /* Hauteur égale à la largeur pour faire un bouton carré */
+        background-color: #1a237e; /* Légèrement plus clair que le fond */
+        border: 10px solid #3949ab; /* Bordure */
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 24px;
+        cursor: pointer;
+        margin: 10px; /* Espacement entre les boutons */
+        border-radius:50%;
+    }
 }
 
 @media screen and (min-width: 1200px) {
@@ -29,12 +43,12 @@
         justify-content: center;
         align-items: center;
         width: 80%;
+        margin-left: 10vw;
     }
 
     .button {
-        width: calc(20vw - 20px); /* Largeur égale à la hauteur pour faire un bouton carré */
-        height: calc(20vw - 20px); /* Hauteur égale à la largeur pour faire un bouton carré */
-        transform: translate(10vw, 0);
+        width: calc(15vw - 15px); /* Largeur égale à la hauteur pour faire un bouton carré */
+        height: calc(15vw - 15px); /* Hauteur égale à la largeur pour faire un bouton carré */
         background-color: #1a237e; /* Légèrement plus clair que le fond */
         border: 10px solid #3949ab; /* Bordure */
         display: flex;
@@ -45,5 +59,40 @@
         margin: 10px; /* Espacement entre les boutons */
         font-size: 8vw;
     }
+
+    .timer {
+        width: calc(15vw - 15px); /* Largeur égale à la hauteur pour faire un bouton carré */
+        height: calc(15vw - 15px); /* Hauteur égale à la largeur pour faire un bouton carré */
+        background-color: #1a237e; /* Légèrement plus clair que le fond */
+        border: 10px solid #3949ab; /* Bordure */
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        font-size: 24px;
+        cursor: pointer;
+        margin: 10px; /* Espacement entre les boutons */
+        border-radius:50%;
+    }
+}
+
+.button:hover {
+    background-color: #3949ab;
+}
+
+.anim {
+    animation: anim 0.8s;
+  }
+
+@keyframes anim {
+    0% {
+        transform: scale(1);
+    }
+    30% {
+        transform: scale(0.7);
+    }
+    100% {
+        transform: scale(1);
+    }
 }
 
+
diff --git a/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.html b/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.html
@@ -5,8 +5,8 @@
 </div>
 -->
 <div class="button-container">
-<div class="button" (click)="click('0')">💡</div>
-<div class="button" (click)="click('1')">🫀</div>
-<div class="button" (click)="click('2')">👻</div>
-<div class="button" (click)="click('3')">🪟</div>
-</div>
+<div class="button" id="0" (click)="click('0')">💡</div>
+<div class="button" id="1" (click)="click('1')">🫀</div>
+<div class="button" id="2" (click)="click('2')">👻</div>
+<div class="button" id="3" (click)="click('3')">🪟</div>
+</div>
diff --git a/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.ts b/frontend/src/app/asymetric-unity-template/asymetric-unity-template.component.ts
@@ -1,6 +1,8 @@
 import { Component, OnInit } from '@angular/core';
 import { ActivatedRoute } from '@angular/router';
 import { UrlService } from '../url.service';
+import { interval } from 'rxjs';
+import { takeWhile } from 'rxjs/operators';
 
 @Component({
   selector: 'app-asymetric-unity-template',
@@ -10,6 +12,8 @@ import { UrlService } from '../url.service';
 export class AsymetricUnityTemplateComponent implements OnInit {
 
   variable: string | undefined;
+  cooldown: number = 5;
+  currentCooldown: number = 5;
 
   constructor(private route: ActivatedRoute, private urlService: UrlService) {
   }
@@ -18,10 +22,55 @@ export class AsymetricUnityTemplateComponent implements OnInit {
     this.route.params.subscribe(params => {
       this.variable = params['variable'];
     });
+    this.animation("0");
+    this.animation("1");
+    this.animation("2");
+    this.animation("3");
+
+    // Cooldown
+    interval(100)
+    .subscribe(() => {
+      if(this.currentCooldown < this.cooldown) {
+        this.currentCooldown += 0.1;
+        if(this.currentCooldown > this.cooldown) {
+          this.currentCooldown = this.cooldown;
+          document.getElementById("0")!.style.backgroundColor = "#1a237e"
+          document.getElementById("1")!.style.backgroundColor = "#1a237e"
+          document.getElementById("2")!.style.backgroundColor = "#1a237e"
+          document.getElementById("3")!.style.backgroundColor = "#1a237e"
+          document.getElementById("0")!.style.filter = "grayscale(0%)"
+          document.getElementById("1")!.style.filter = "grayscale(0%)"
+          document.getElementById("2")!.style.filter = "grayscale(0%)"
+          document.getElementById("3")!.style.filter = "grayscale(0%)"
+        }
+      }
+    });
+
   }
 
+  animation(value: string) {
+    const animated = document.getElementById(value);
+
+    animated!.addEventListener("animationend", () => {
+      animated?.classList.remove('anim');
+    });
+  }
 
   click(value: string) {
-    this.urlService.publish(this.variable, value).subscribe((x)=>console.log)
+    if(this.currentCooldown == this.cooldown) {
+      console.log("TEST")
+      this.currentCooldown = 0;
+      document.getElementById("0")!.style.backgroundColor = "grey"
+      document.getElementById("1")!.style.backgroundColor = "grey"
+      document.getElementById("2")!.style.backgroundColor = "grey"
+      document.getElementById("3")!.style.backgroundColor = "grey"
+      document.getElementById("0")!.style.filter = "grayscale(100%)"
+      document.getElementById("1")!.style.filter = "grayscale(100%)"
+      document.getElementById("2")!.style.filter = "grayscale(100%)"
+      document.getElementById("3")!.style.filter = "grayscale(100%)"
+      const animated = document.getElementById(value);
+      animated?.classList.add('anim');
+      this.urlService.publish(this.variable, value).subscribe((x)=>console.log)  
+    }
   }
 }