no border when highlight piece

src/app/pieces/educational-objective/educational-objective.component.html

 <div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
-[ngClass]="{'isActive': (pieceDetailsService.piece == scenario.missions[i] ? true : false)}">
+[class]="pieceDetailsService.piece == scenario.missions[i] ? 'isActive' : 'border'">
     <div class="piece-attach piece-attach-right"></div>
     <div class="piece-attach piece-attach-left-top"></div>
     <div class="piece-attach piece-attach-left-bottom"></div>

src/app/pieces/educational-objective/educational-objective.component.scss

@@ -122,13 +122,4 @@
             }
         }
     }
-}
-.piece::after {
-    content: "";
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    border: 1px solid black;
 }
\ No newline at end of file

src/app/pieces/game-characters/game-characters.component.html

 <div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
-[ngClass]="{'isActive': (pieceDetailsService.piece == scenario ? true : false)}">
+[class]="pieceDetailsService.piece == scenario ? 'isActive' : 'border'">
 
     <div class="piece-menu" [class]="displayMenu">
         <mat-icon fontIcon="backspace" (click)="onClickErase()"

src/app/pieces/game-characters/game-characters.component.scss

@@ -151,16 +151,6 @@
     }
 }
 
-.piece::after {
-    content: "";
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    border: 1px solid black;
-}
-
 .background {
     background-image: url("../../../assets/background-images/perso.png");
     background-position: center;

src/app/pieces/game-context/game-context.component.html

 <div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
-[ngClass]="{'isActive': (pieceDetailsService.piece == scenario ? true : false)}">
+[class]="pieceDetailsService.piece == scenario ? 'isActive' : 'border'">
     <div class="piece-attach piece-attach-right-top"></div>
     <div class="piece-attach piece-attach-right-bottom"></div>
 

src/app/pieces/game-context/game-context.component.scss

@@ -138,13 +138,4 @@
         }
     }
 
-}
-.piece::after {
-    content: "";
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    border: 1px solid black;
 }
\ No newline at end of file

src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.html

 <div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
-[ngClass]="{'isActive': (pieceDetailsService.piece == scenario ? true : false)}">
+[class]="pieceDetailsService.piece == scenario ? 'isActive' : 'border'">
     <div class="piece-attach piece-attach-right-top"></div>
     <div class="piece-attach piece-attach-right-bottom"></div>
 

src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.scss

@@ -116,13 +116,4 @@
             margin-bottom: 5px;
         }
     }
-}
-.piece::after {
-    content: "";
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    border: 1px solid black;
 }
\ No newline at end of file

src/app/pieces/mission-context/mission-context.component.html

 <div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
-[ngClass]="{'isActive': (pieceDetailsService.piece == scenario.missions[i] ? true : false)}">
+[class]="pieceDetailsService.piece == scenario.missions[i] ? 'isActive' : 'border'">
     <div class="piece-attach piece-attach-left-top"></div>
     <div class="piece-attach piece-attach-right"></div>
     <div class="piece-attach piece-attach-left-bottom"></div>

src/app/pieces/mission-context/mission-context.component.scss

@@ -156,14 +156,4 @@
             height: 20%;
         }
     }
-}
-
-.piece::after {
-    content: "";
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    border: 1px solid black;
 }
\ No newline at end of file

src/app/pieces/role/role.component.html

 <div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
-[ngClass]="{'isActive': (pieceDetailsService.piece == role ? true : false)}">
+[class]="pieceDetailsService.piece == role ? 'isActive' : 'border'">
     <div class="piece-attach piece-attach-left-top"></div>
     <div class="piece-attach piece-attach-right"></div>
     <div class="piece-attach piece-attach-left-bottom"></div>
@@ -164,8 +164,7 @@
 
         <div class="piece-form-title">Rôle supplémentaire</div>
         <div class="piece-form-supplementary" [style.background]="'linear-gradient(302deg, '+supplementaryRole.color+' 0%, '+supplementaryRole.color+' 50%, #9ad5ec 50%, #9ad5ec 100%)'"
-        *ngFor="let supplementaryRole of role.supplementaryRoles, let i = index"
-        [ngClass]="{'isActive-supplementaryRole': (pieceDetailsService.piece == role ? true : false)}">
+        *ngFor="let supplementaryRole of role.supplementaryRoles, let i = index">
             <div class="piece-form-supplementary-form">
                 <div>
                     <div class="piece-form-supplementary-form-name">

src/app/pieces/role/role.component.scss

@@ -487,14 +487,4 @@
             }
         }
     }
-}
-
-.piece::after {
-    content: "";
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    border: 1px solid black;
 }
\ No newline at end of file

src/app/pieces/rules/rules.component.html

 <div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
-[ngClass]="{'isActive': (pieceDetailsService.piece == scenario ? true : false)}">
+[class]="pieceDetailsService.piece == scenario ? 'isActive' : 'border'">
 
     <div class="piece-menu" [class]="displayMenu">
         <mat-icon fontIcon="backspace" (click)="onClickErase()"

src/app/pieces/rules/rules.component.scss

@@ -118,14 +118,4 @@
 
         }
     }
-}
-
-.piece::after {
-    content: "";
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    border: 1px solid black;
 }
\ No newline at end of file

src/app/pieces/step/step.component.html

 <div class="piece" [ngStyle]="{'width': pieceWidth+'px'}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
-[ngClass]="{'isActive': (pieceDetailsService.piece == step ? true : false)}"
+[class]="pieceDetailsService.piece == step ? 'isActive' : 'border'"
 matTooltip="Permet de découper le scénario en grandes étapes."
 matTooltipPosition="below" [matTooltipDisabled]="!tooltipService.activatedTooltips">
     <div class="piece-attach piece-attach-right"></div>

src/app/pieces/step/step.component.scss

@@ -132,14 +132,4 @@
             }
         }
     }
-}
-
-.piece::after {
-    content: "";
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    border: 1px solid black;
 }
\ No newline at end of file

src/app/pieces/tasks/annexe-task/annexe-task.component.html

@@ -4,7 +4,7 @@
     : 'var(--piece-background-color)'"
     matTooltip="Tâches annexe: ces tâches ne sont pas obligatoires pour atteindre les objectifs pédagogiques définis. Elles sont rapides et permettent aux joueurs plus rapides d'être occupés en attendant que les autres finissent leurs tâches. Il est préférable d'en mettre."
     matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips"
-    [ngClass]="{'isActive': (pieceDetailsService.piece == task ? true : false)}">
+    [class]="pieceDetailsService.piece == task ? 'isActive' : 'border'">
     <div class="piece-attach piece-attach-left"></div>
     <div class="piece-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div>
 

src/app/pieces/tasks/annexe-task/annexe-task.component.scss

@@ -339,14 +339,4 @@
             }
         }
     }
-}
-
-.piece::after {
-    content: "";
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    border: 1px solid black;
 }
\ No newline at end of file

src/app/pieces/tasks/final-task/final-task.component.html

@@ -4,7 +4,7 @@
     : 'var(--piece-background-color)'"
     matTooltip="Tâche finale: il s'agit de la dernière action à effectuer pour clore la quête."
     matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips"
-    [ngClass]="{'isActive': (pieceDetailsService.piece == task ? true : false)}">
+    [class]="pieceDetailsService.piece == task ? 'isActive' : 'border'">
     <div class="piece-attach piece-attach-left"></div>
 
     <div class="piece-menu" [class]="displayMenu">

src/app/pieces/tasks/final-task/final-task.component.scss

@@ -378,14 +378,4 @@
             padding: 4px;
         }
     }
-}
-
-.piece::after {
-    content: "";
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    border: 1px solid black;
 }
\ No newline at end of file

src/app/pieces/tasks/optionnal-task/optionnal-task.component.html

@@ -4,7 +4,7 @@
     : 'var(--piece-background-color)'"
     matTooltip="Tâche optionnelle: cette tâche peut être réalisée ou non. À la différence d'une tâche annexe, les tâches optionnelles sont utiles pour répondre aux objectifs pédagogiques, comme les tâches simples, mais offent la possibilité au joueur de réaliser la tâche de plusieurs manières différentes."
     matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips"
-    [ngClass]="{'isActive': (pieceDetailsService.piece == task ? true : false)}">
+    [class]="pieceDetailsService.piece == task ? 'isActive' : 'border'">
     <div class="piece-attach piece-attach-left"></div>
     <div class="piece-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div>
 

src/app/pieces/tasks/optionnal-task/optionnal-task.component.scss

@@ -389,14 +389,4 @@
             padding: 4px;
         }
     }
-}
-
-.piece::after {
-    content: "";
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    border: 1px solid black;
 }
\ No newline at end of file

src/app/pieces/tasks/random-event/random-event.component.html

@@ -2,7 +2,7 @@
     [style.background]="task.supplementaryRole ?
     'linear-gradient(140deg, var(--piece-background-color) 0%, var(--piece-background-color) 55%,'+task.supplementaryRole.color+' 55%,'+task.supplementaryRole.color+' 100%)'
     : 'var(--piece-background-color)'"
-    [ngClass]="{'isActive': (pieceDetailsService.piece == task ? true : false)}">
+    [class]="pieceDetailsService.piece == task ? 'isActive' : 'border'">
     <div class="piece-attach piece-attach-left"></div>
     <div class="piece-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div>
 

src/app/pieces/tasks/random-event/random-event.component.scss

@@ -379,14 +379,4 @@
             }
         }
     }
-}
-
-.piece::after {
-    content: "";
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    border: 1px solid black;
 }
\ No newline at end of file

src/app/pieces/tasks/repeat-task/repeat-task.component.html

 <div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()" 
-[ngClass]="{'isActive': (pieceDetailsService.piece == task ? true : false)}">
+[class]="pieceDetailsService.piece == task ? 'isActive' : 'border'">
     <div class="piece-attach piece-attach-left"></div>
 
     <div class="piece-menu" [class]="displayMenu">

src/app/pieces/tasks/repeat-task/repeat-task.component.scss

@@ -147,14 +147,7 @@
     }
 }
 
-.piece::after {
-    content: "";
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    border: 1px solid black;
+.isActive::after, .border::after {
     border-top-right-radius: 50%;
     border-bottom-right-radius: 50%;
 }
\ No newline at end of file

src/app/pieces/tasks/task/task.component.html

@@ -2,7 +2,7 @@
     [style.background]="task.supplementaryRole ?
     'linear-gradient(140deg, var(--piece-background-color) 0%, var(--piece-background-color) 55%,'+task.supplementaryRole.color+' 55%,'+task.supplementaryRole.color+' 100%)'
     : 'var(--piece-background-color)'"
-    [ngClass]="{'isActive': (pieceDetailsService.piece == task ? true : false)}">
+    [class]="pieceDetailsService.piece == task ? 'isActive' : 'border'">
     <div class="piece-attach piece-attach-left"></div>
     <div class="piece-attach piece-attach-right" [style.background]="task.supplementaryRole ? task.supplementaryRole.color : 'var(--piece-background-color)'"></div>
 

src/app/pieces/tasks/task/task.component.scss

@@ -386,14 +386,4 @@
             }
         }
     }
-}
-
-.piece::after {
-    content: "";
-    position: absolute;
-    top: 0px;
-    left: 0px;
-    right: 0px;
-    bottom: 0px;
-    border: 1px solid black;
 }
\ No newline at end of file

src/styles.scss

@@ -53,6 +53,12 @@ body {
 }
 
 .isActive::after {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
     animation: 1s effect infinite;
     z-index: 2;
     pointer-events: none;
@@ -66,4 +72,14 @@ $highlight-color: #009b00;
     50% {
         box-shadow: inset 0 0 20px $highlight-color;
     }
+}
+
+.border::after {
+    content: "";
+    position: absolute;
+    top: 0px;
+    left: 0px;
+    right: 0px;
+    bottom: 0px;
+    border: 1px solid black;
 }
\ No newline at end of file