sider piece title + highlight piece of actually displayed details

c4d3d97c · Romain DELEAU · 294187b8 · c4d3d97c · c4d3d97c · c4d3d97c
Commit c4d3d97c authored Aug 22, 2023 by Romain DELEAU
28 changed files
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -117,12 +117,16 @@
    </div>

    <div class="container-sider">
-        <app-role-occurence class="container-sider-element" [role]="pieceDetailsService.pieceAsRole()" *ngIf="pieceDetailsService.pieceIsRole()"></app-role-occurence>
-        <app-supplementary-task class="container-sider-element" [task]="pieceDetailsService.pieceAsTask()" [role]="pieceDetailsService.parentAsRole()" *ngIf="pieceDetailsService.pieceIsTask()"></app-supplementary-task>
-        <app-repeat class="container-sider-element" [task]="pieceDetailsService.pieceAsTask()" *ngIf="pieceDetailsService.pieceIsTask()"></app-repeat>
-        <app-interupt class="container-sider-element" [task]="pieceDetailsService.pieceAsTask()" *ngIf="pieceDetailsService.pieceIsTask()"></app-interupt>
-        <app-characters class="container-sider-element" [scenario]="scenario" [task]="pieceDetailsService.pieceAsTask()" *ngIf="pieceDetailsService.pieceIsTask()"></app-characters>
-        <app-comments class="container-sider-element" [piece]="pieceDetailsService.piece"></app-comments>
+        <div class="container-sider-title">{{getSiderTitle()}}</div>
+        <div class="container-sider-elements">
+            <app-role-occurence class="container-sider-elements-element" [role]="pieceDetailsService.pieceAsRole()" *ngIf="pieceDetailsService.pieceIsRole()"></app-role-occurence>
+            <app-supplementary-task class="container-sider-elements-element" [task]="pieceDetailsService.pieceAsTask()" [role]="pieceDetailsService.parentAsRole()" *ngIf="pieceDetailsService.pieceIsTask()"></app-supplementary-task>
+            <app-repeat class="container-sider-elements-element" [task]="pieceDetailsService.pieceAsTask()" *ngIf="pieceDetailsService.pieceIsTask()"></app-repeat>
+            <app-interupt class="container-sider-elements-element" [task]="pieceDetailsService.pieceAsTask()" *ngIf="pieceDetailsService.pieceIsTask()"></app-interupt>
+            <app-characters class="container-sider-elements-element" [scenario]="scenario" [task]="pieceDetailsService.pieceAsTask()" *ngIf="pieceDetailsService.pieceIsTask()"></app-characters>
+            <app-comments class="container-sider-elements-element" [piece]="pieceDetailsService.piece"></app-comments> 
+        </div>
+        
    </div>

    <div class="container-settings">

--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -125,16 +125,6 @@
                                    display: flex;
                                    flex-direction: row;
                                }
-                                /*
-                                &-menuButton {
-                                    border-radius: 10px;
-                                    margin-bottom: 5px;
-                                }
-
-                                &-menuButton:hover {
-                                    opacity: 0.75;
-                                }
-                                */
                            }
                        }
                    }
@@ -156,12 +146,31 @@
        overflow: scroll;
        box-shadow: -20px 0px 25px rgba(0, 0, 0, 0.3);

-        &-element {
-            margin-top: 10px;
-            margin-bottom: 10px;
+        &-title {
+            height: 30px;
+            border-bottom: solid black 2px;
+            font-size: 20px;
+            position: fixed;
+            width: 320px;
+            background-color: #e3e3e3;
+            z-index: 2;
+            box-shadow: 0px 20px 25px rgba(0, 0, 0, 0.3);
+            font-family: 'Glacial Indifference Bold', sans-serif;
            display: flex;
+            align-items: center;
+            justify-content: center;
+            
+        }
+        &-elements {
+            margin-top: 40px;
            flex-direction: column;
            align-items: center;
+            display: flex;
+
+            &-element {
+                margin-top: 10px;
+                margin-bottom: 10px;
+            }            
        }
    }


--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -215,7 +215,6 @@ export class AppComponent {
      this.zoomService.zoom -= 0.1;
      element.style.transform = `scale(${this.zoomService.zoom})`;      
    }
-
  }

  addMissionStep(mission: Mission, index: number): void {
@@ -248,4 +247,25 @@ export class AppComponent {
    }
    return res;
  }
+
+  getSiderTitle(): string {
+    let piece = this.pieceDetailsService.piece;
+    if (piece instanceof Task) {
+      return "Tâche";
+    }
+    if (piece instanceof Role) {
+      return "Rôle";
+    }
+    if (piece instanceof Mission) {
+      return "Mission";
+    }
+    if (piece instanceof Scenario) {
+      return "Scénario";
+    }
+    if (piece instanceof Step) {
+      return "Étape";
+    } else {
+      return "";
+    }
+  }
 }
\ No newline at end of file
--- a/src/app/pieces/educational-objective/educational-objective.component.html
+++ b/src/app/pieces/educational-objective/educational-objective.component.html
-<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()">
+<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
+[ngClass]="{'isActive': (pieceDetailsService.piece == scenario.missions[i] ? true : false)}">
    <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>

--- a/src/app/pieces/educational-objective/educational-objective.component.ts
+++ b/src/app/pieces/educational-objective/educational-objective.component.ts
@@ -20,7 +20,7 @@ export class EducationalObjectiveComponent implements OnInit {
  @Input() scenario: Scenario = new Scenario();
  @Input() i: number = 0;

-  constructor(private pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }

  ngOnInit(): void {
  }

--- a/src/app/pieces/game-characters/game-characters.component.html
+++ b/src/app/pieces/game-characters/game-characters.component.html
-<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()">
+<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
+[ngClass]="{'isActive': (pieceDetailsService.piece == scenario ? true : false)}">

    <div class="piece-menu" [class]="displayMenu">
        <mat-icon fontIcon="backspace" (click)="onClickErase()"

--- a/src/app/pieces/game-characters/game-characters.component.ts
+++ b/src/app/pieces/game-characters/game-characters.component.ts
@@ -20,7 +20,7 @@ export class GameCharactersComponent implements OnInit {
  @Input() scenario = new Scenario()
  newCharacter: Character = new Character();

-  constructor(protected tooltipService: TooltipService, public dialog: MatDialog, private pieceDetailsService: PieceDetailsService) { }
+  constructor(protected tooltipService: TooltipService, public dialog: MatDialog, protected pieceDetailsService: PieceDetailsService) { }

  ngOnInit(): void {
  }

--- a/src/app/pieces/game-context/game-context.component.html
+++ b/src/app/pieces/game-context/game-context.component.html
-<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()">
+<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
+[ngClass]="{'isActive': (pieceDetailsService.piece == scenario ? true : false)}">
    <div class="piece-attach piece-attach-right-top"></div>
    <div class="piece-attach piece-attach-right-bottom"></div>


--- a/src/app/pieces/game-context/game-context.component.ts
+++ b/src/app/pieces/game-context/game-context.component.ts
@@ -16,7 +16,7 @@ export class GameContextComponent implements OnInit {
  @Input() scenario: Scenario = new Scenario();
  @Input() gameContext: GameContext = new GameContext();

-  constructor(private pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }

  ngOnInit(): void {
  }

--- a/src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.html
+++ b/src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.html
-<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()">
+<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
+[ngClass]="{'isActive': (pieceDetailsService.piece == scenario ? true : false)}">
    <div class="piece-attach piece-attach-right-top"></div>
    <div class="piece-attach piece-attach-right-bottom"></div>


--- a/src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.ts
+++ b/src/app/pieces/game-educationnal-objective/game-educationnal-objective.component.ts
@@ -16,7 +16,7 @@ export class GameEducationnalObjectiveComponent implements OnInit {
  @Input() scenario: Scenario = new Scenario();
  @Input() gameEducationnalObjective: GameEducationnalObjective = new GameEducationnalObjective();

-  constructor(private pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }

  ngOnInit(): void {
  }

--- a/src/app/pieces/mission-context/mission-context.component.html
+++ b/src/app/pieces/mission-context/mission-context.component.html
-<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()">
+<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
+[ngClass]="{'isActive': (pieceDetailsService.piece == scenario.missions[i] ? true : false)}">
    <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>

--- a/src/app/pieces/mission-context/mission-context.component.ts
+++ b/src/app/pieces/mission-context/mission-context.component.ts
@@ -16,7 +16,7 @@ import { CreateDialogComponent } from 'src/app/components/dialogs/create-dialog/
 })
 export class MissionContextComponent implements OnInit {

-  constructor(private pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }

  @Input() missionContext: MissionContext = new MissionContext();
  @Input() scenario: Scenario = new Scenario();

--- a/src/app/pieces/role/role.component.html
+++ b/src/app/pieces/role/role.component.html
-<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()">
+<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
+[ngClass]="{'isActive': (pieceDetailsService.piece == role ? true : false)}">
    <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>
@@ -161,7 +162,9 @@
        </div>

        <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">
+        <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)}">
            <div class="piece-form-supplementary-form">
                <div>
                    <div class="piece-form-supplementary-form-name">

--- a/src/app/pieces/rules/rules.component.html
+++ b/src/app/pieces/rules/rules.component.html
-<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()">
+<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
+[ngClass]="{'isActive': (pieceDetailsService.piece == scenario ? true : false)}">

    <div class="piece-menu" [class]="displayMenu">
        <mat-icon fontIcon="backspace" (click)="onClickErase()"

--- a/src/app/pieces/rules/rules.component.ts
+++ b/src/app/pieces/rules/rules.component.ts
@@ -18,7 +18,7 @@ export class RulesComponent implements OnInit {
  displayMenu: string = 'hide';
  @Input() scenario: Scenario = new Scenario();

-  constructor(protected tooltipService: TooltipService, public dialog: MatDialog, private pieceDetailsService: PieceDetailsService) { }
+  constructor(protected tooltipService: TooltipService, public dialog: MatDialog, protected pieceDetailsService: PieceDetailsService) { }

  ngOnInit(): void {
  }

--- a/src/app/pieces/step/step.component.html
+++ b/src/app/pieces/step/step.component.html
-<div class="piece" [ngStyle]="{'width': pieceWidth+'px'}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()">
+<div class="piece" [ngStyle]="{'width': pieceWidth+'px'}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()"
+[ngClass]="{'isActive': (pieceDetailsService.piece == step ? true : false)}">
    <div class="piece-attach piece-attach-right"></div>
    <div class="piece-attach piece-attach-left"></div>


--- a/src/app/pieces/step/step.component.ts
+++ b/src/app/pieces/step/step.component.ts
@@ -23,7 +23,7 @@ export class StepComponent implements OnInit {
  displayMenu: string = 'hide';
  pieceWidth: number = 400;

-  constructor(private pieceDetailsService: PieceDetailsService, public dialog: MatDialog, protected tooltipService: TooltipService) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, public dialog: MatDialog, protected tooltipService: TooltipService) { }

  ngOnInit(): void {
    this.setPieceWidth();

--- a/src/app/pieces/tasks/annexe-task/annexe-task.component.html
+++ b/src/app/pieces/tasks/annexe-task/annexe-task.component.html
@@ -3,7 +3,8 @@
    '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)'"
    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">
+    matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips"
+    [ngClass]="{'isActive': (pieceDetailsService.piece == task ? true : false)}">
    <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>


--- a/src/app/pieces/tasks/annexe-task/annexe-task.component.ts
+++ b/src/app/pieces/tasks/annexe-task/annexe-task.component.ts
@@ -34,7 +34,7 @@ export class AnnexeTaskComponent implements OnInit {

  urlIcon: string = 'url("../../../../assets/background-images/annexe.png")';

-  constructor(private pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }

  ngOnInit(): void {
    this.setPieceWidth();

--- a/src/app/pieces/tasks/final-task/final-task.component.html
+++ b/src/app/pieces/tasks/final-task/final-task.component.html
@@ -3,7 +3,8 @@
    '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)'"
    matTooltip="Tâche finale: il s'agit de la dernière action à effectuer pour clore la quête."
-    matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips">
+    matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips"
+    [ngClass]="{'isActive': (pieceDetailsService.piece == task ? true : false)}">
    <div class="piece-attach piece-attach-left"></div>

    <div class="piece-menu" [class]="displayMenu">

--- a/src/app/pieces/tasks/final-task/final-task.component.ts
+++ b/src/app/pieces/tasks/final-task/final-task.component.ts
@@ -34,7 +34,7 @@ export class FinalTaskComponent implements OnInit {

  urlIcon: string = 'url("../../../../assets/background-images/final.png")';

-  constructor(private pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }

  ngOnInit(): void {
    this.setPieceWidth();

--- a/src/app/pieces/tasks/optionnal-task/optionnal-task.component.html
+++ b/src/app/pieces/tasks/optionnal-task/optionnal-task.component.html
@@ -3,7 +3,8 @@
    '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)'"
    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">
+    matTooltipPosition="before" [matTooltipDisabled]="!tooltipService.activatedTooltips"
+    [ngClass]="{'isActive': (pieceDetailsService.piece == task ? true : false)}">
    <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>


--- a/src/app/pieces/tasks/optionnal-task/optionnal-task.component.ts
+++ b/src/app/pieces/tasks/optionnal-task/optionnal-task.component.ts
@@ -34,7 +34,7 @@ export class OptionnalTaskComponent implements OnInit {

  urlIcon: string = 'url("../../../../assets/background-images/optionnal.png")';

-  constructor(private pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }
+  constructor(protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService, public dialog: MatDialog) { }

  ngOnInit(): void {
    this.setPieceWidth();

--- a/src/app/pieces/tasks/random-event/random-event.component.html
+++ b/src/app/pieces/tasks/random-event/random-event.component.html
 <div class="piece" [ngStyle]="{'width': pieceWidth+'px'}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'" (click)="onClickPiece()"
    [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)'">
+    : 'var(--piece-background-color)'"
+    [ngClass]="{'isActive': (pieceDetailsService.piece == task ? true : false)}">
    <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>


--- a/src/app/pieces/tasks/repeat-task/repeat-task.component.html
+++ b/src/app/pieces/tasks/repeat-task/repeat-task.component.html
-<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()">
+<div class="piece" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'" (click)="onClickPiece()" 
+[ngClass]="{'isActive': (pieceDetailsService.piece == task ? true : false)}">
    <div class="piece-attach piece-attach-left"></div>

    <div class="piece-menu" [class]="displayMenu">

--- a/src/app/pieces/tasks/task/task.component.html
+++ b/src/app/pieces/tasks/task/task.component.html
 <div class="piece" [ngStyle]="{'width': pieceWidth+'px'}" (mouseover)="displayMenu='show'" (mouseleave)="displayMenu='hide'; displaySymbolChoice='hide'" (click)="onClickPiece()"
    [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)'">
+    : 'var(--piece-background-color)'"
+    [ngClass]="{'isActive': (pieceDetailsService.piece == task ? true : false)}">
    <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>


--- a/src/styles.scss
+++ b/src/styles.scss
@@ -42,3 +42,19 @@ body {
        font-family: 'Glacial Indifference', sans-serif;
    }
 }
+
+.isActive::after {
+    animation: 1s effect infinite;
+    z-index: 2;
+    pointer-events: none;
+}
+
+$highlight-color: #009b00;
+@keyframes effect {
+    0%, 100% {
+        box-shadow: inset 0 0 10px $highlight-color;
+    }
+    50% {
+        box-shadow: inset 0 0 20px $highlight-color;
+    }
+}
\ No newline at end of file