1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<div class="piece">
<div class="piece-top">
<button mat-button (click)="tutorialService.isActive = !tutorialService.isActive; closeTutorialTrace();"><mat-icon fontIcon="expand_less"></mat-icon> {{'tutorial_leave' | translate}}</button>
<div class="piece-top-title">{{'tutorial_title' | translate}}</div>
<div class="piece-top-phases" *ngIf="!tutorialService.optionnalPhase">
<button mat-button (click)="onClickPrevious()" [disabled]="tutorialService.phase == 1">{{'tutorial_previous' | translate}}</button>
<div class="piece-top-phases-phase">{{'tutorial_phase' | translate}} {{tutorialService.phase}}/9</div>
<button mat-button (click)="onClickNext()" [disabled]="tutorialService.phase == 9">{{'tutorial_next' | translate}}</button>
</div>
<div class="piece-top-phases" *ngIf="tutorialService.optionnalPhase">
<button mat-button (click)="tutorialService.optionnalPhase = ''; resumeClassicTrace();">{{'tutorial_back' | translate}}</button>
</div>
</div>
<div class="piece-tutorial valid" [ngClass]="[tutorialService.validationFeedback, tutorialService.phaseDone[tutorialService.phase-1] && !tutorialService.optionnalPhase ? 'isValid' : '']">
<div *ngIf="!tutorialService.optionnalPhase">
<p class="piece-tutorial-title">{{'tutorial_phase_'+tutorialService.phase+'_title' | translate}}</p>
<p>{{'tutorial_phase_'+tutorialService.phase | translate}}</p>
</div>
<div *ngIf="tutorialService.optionnalPhase">
<p class="piece-tutorial-title">{{'tutorial_optionnal_'+tutorialService.optionnalPhase | translate}}</p>
<p>{{'tutorial_optionnalPhase_'+tutorialService.optionnalPhase | translate}}</p>
</div>
</div>
<div class="piece-optionnal">
<button mat-button (click)="onClickOptionnal()">{{'tutorial_optionnal' | translate}} <mat-icon fontIcon="expand_more" *ngIf="optionnalExpanded == 'hide'"></mat-icon><mat-icon fontIcon="expand_less" *ngIf="optionnalExpanded == 'show'"></mat-icon></button>
<div class="piece-optionnal-options" [class]="optionnalExpanded">
<div class="piece-optionnal-options-line">
<button mat-button [style.background-color]="'#f3ed97'" (click)="setOptionnalPhase('comments')">{{'tutorial_optionnal_comments' | translate}}</button>
<button mat-button [style.background-color]="'#c0d5fc'" (click)="setOptionnalPhase('step')">{{'tutorial_optionnal_step' | translate}}</button>
<button mat-button [style.background-color]="'#bfdaa3'" (click)="setOptionnalPhase('event')">{{'tutorial_optionnal_event' | translate}}</button>
</div>
<div class="piece-optionnal-options-line">
<button mat-button [style.background-color]="'#f7c9cf'" (click)="setOptionnalPhase('interrupt')">{{'tutorial_optionnal_interrupt' | translate}}</button>
<button mat-button [style.background-color]="'#e5c5ac'" (click)="setOptionnalPhase('occurence')">{{'tutorial_optionnal_occurence' | translate}}</button>
</div>
<div class="piece-optionnal-options-line">
<button mat-button [style.background-color]="'#ce7b66'" (click)="setOptionnalPhase('characters')">{{'tutorial_optionnal_characters' | translate}}</button>
<button mat-button [style.background-color]="'#c6c2bd'" (click)="setOptionnalPhase('rules')">{{'tutorial_optionnal_rules' | translate}}</button>
<button mat-button [style.background-color]="'#abbcc6'" (click)="setOptionnalPhase('repeat')">{{'tutorial_optionnal_repeat' | translate}}</button>
</div>
<div class="piece-optionnal-options-line">
<button mat-button [style.background-color]="'#f7f7f7'" (click)="setOptionnalPhase('resource')">{{'tutorial_optionnal_resource' | translate}}</button>
<button mat-button [style.background-color]="'#9ad5eb'" (click)="setOptionnalPhase('supplementaryRole')">{{'tutorial_optionnal_supplementaryRole' | translate}}</button>
</div>
<div class="piece-optionnal-options-line">
<button mat-button [style.background-color]="'#b28386'" (click)="setOptionnalPhase('finalTask')">{{'tutorial_optionnal_finalTask' | translate}}</button>
<button mat-button [style.background-color]="'#e8e3b3'" (click)="setOptionnalPhase('optionnalTask')">{{'tutorial_optionnal_optionnalTask' | translate}}</button>
<button mat-button [style.background-color]="'#a6c9ec'" (click)="setOptionnalPhase('repeatTask')">{{'tutorial_optionnal_repeatTask' | translate}}</button>
</div>
</div>
</div>
</div>