add name input and idialog when download button is clicked + change font-family of dialogs

src/app/app.component.ts

@@ -25,6 +25,8 @@ import { OtherReward } from './class/rewards/other-reward/other-reward';
 import { PrerequireRessource } from './class/prerequires/prerequire-ressource/prerequire-ressource';
 import { TooltipService } from './services/tooltip/tooltip.service';
 import { ZoomService } from './services/zoom/zoom.service';
+import { MatDialog } from '@angular/material/dialog';
+import { SaveDialogComponent } from './components/dialogs/save-dialog/save-dialog.component';
 
 @Component({
   selector: 'app-root',
@@ -38,7 +40,7 @@ export class AppComponent {
   @ViewChild('fileInput') fileInput: any;
 
   constructor(private cdr: ChangeDetectorRef, protected pieceDetailsService: PieceDetailsService, protected tooltipService: TooltipService,
-    private elementRef: ElementRef, private zoomService: ZoomService) {
+    private elementRef: ElementRef, private zoomService: ZoomService, private dialog: MatDialog) {
     pieceDetailsService.piece = this.scenario;
 
     this.scenario.missions.forEach(mission => {
@@ -54,14 +56,31 @@ export class AppComponent {
   }
 
   downloadFile(): void {
-    const jsonString = JSON.stringify(this.scenario);
-    const blob = new Blob([jsonString], { type: 'application/json' });
-    const url = URL.createObjectURL(blob);
-    const link = document.createElement('a');
-    link.download = 'scenario.json';
-    link.href = url;
-    link.click();
-    URL.revokeObjectURL(url);
+    let fileName: string = this.scenario.projectName;
+    const dialogRef = this.dialog.open(SaveDialogComponent, {
+      data: {
+        fileName: fileName,
+        result: false
+      }
+    });
+    dialogRef.afterClosed().subscribe(data => {
+      if (data.result) {
+        if (data.fileName == '') {
+          fileName = "Scénario - RLG Maker";
+        } else {
+          this.scenario.projectName = data.fileName;
+          fileName = data.fileName+' - RLG Maker';
+        }
+        const jsonString = JSON.stringify(this.scenario);
+        const blob = new Blob([jsonString], { type: 'application/json' });
+        const url = URL.createObjectURL(blob);
+        const link = document.createElement('a');
+        link.download = fileName;
+        link.href = url;
+        link.click();
+        URL.revokeObjectURL(url);        
+      }
+    });
   }
 
   selectFile(): void {

src/app/app.module.ts

@@ -37,6 +37,7 @@ import { MouseWheelZoomDirective } from './directives/mouse-wheel-zoom.directive
 import { CleanDialogComponent } from './components/dialogs/clean-dialog/clean-dialog.component';
 import { CreateDialogComponent } from './components/dialogs/create-dialog/create-dialog.component';
 import { GameCharactersComponent } from './pieces/game-characters/game-characters.component';
+import { SaveDialogComponent } from './components/dialogs/save-dialog/save-dialog.component';
 
 @NgModule({
   declarations: [
@@ -66,7 +67,8 @@ import { GameCharactersComponent } from './pieces/game-characters/game-character
     SuppressDialogComponent,
     CleanDialogComponent,
     CreateDialogComponent,
-    GameCharactersComponent
+    GameCharactersComponent,
+    SaveDialogComponent
   ],
   imports: [
     BrowserModule,

src/app/class/scenario/scenario.ts

@@ -14,4 +14,5 @@ export class Scenario {
     gameRules: string = '';
     ressources: Ressource[] = [];
     comments: Comment[] = [];
+    projectName: string = '';
 }
\ No newline at end of file

src/app/components/dialogs/clean-dialog/clean-dialog.component.scss

+h2 {
+    font-family: 'Glacial Indifference Bold';
+}
+
 button {
     margin-top: 20px;
 }
\ No newline at end of file

src/app/components/dialogs/create-dialog/create-dialog.component.scss

+h2 {
+    font-family: 'Glacial Indifference Bold', sans-serif;
+}
+
 button {
     margin-top: 20px;
 }
\ No newline at end of file

src/app/components/dialogs/save-dialog/save-dialog.component.html

+<h2 mat-dialog-title>Télécharger le scénario</h2>
+<mat-dialog-content>
+    <label for="name">Nom du projet :</label>
+    <input name="name" type="text" placeholder="Mon Scénario" [(ngModel)]="data.fileName"/>
+</mat-dialog-content>
+<mat-dialog-actions align="center">
+    <button mat-button mat-dialog-close>Annuler</button>
+    <button mat-button (click)="data.result = true" [mat-dialog-close]="data" cdkFocusInitial>Télécharger</button>
+</mat-dialog-actions>
\ No newline at end of file

src/app/components/dialogs/save-dialog/save-dialog.component.scss

+h2 {
+    font-family: 'Glacial Indifference Bold', sans-serif;
+}
+
+mat-dialog-content {
+    display: flex;
+    flex-direction: column;
+    text-align: center;
+
+    label {
+        font-size: 17px;
+        margin-bottom: 5px;
+    }
+
+    input {
+        text-align: center;
+        border-radius: 5px;
+        height: 25px;
+    }
+}
+
+button {
+    margin-top: 20px;
+}
\ No newline at end of file

src/app/components/dialogs/save-dialog/save-dialog.component.spec.ts

+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SaveDialogComponent } from './save-dialog.component';
+
+describe('SaveDialogComponent', () => {
+  let component: SaveDialogComponent;
+  let fixture: ComponentFixture<SaveDialogComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ SaveDialogComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(SaveDialogComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/components/dialogs/save-dialog/save-dialog.component.ts

+import { Component, OnInit, Inject } from '@angular/core';
+import { MAT_DIALOG_DATA } from '@angular/material/dialog';
+
+@Component({
+  selector: 'app-save-dialog',
+  templateUrl: './save-dialog.component.html',
+  styleUrls: ['./save-dialog.component.scss']
+})
+export class SaveDialogComponent implements OnInit {
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: {fileName: string, result: boolean}) { }
+
+  ngOnInit(): void {
+  }
+
+}

src/app/components/dialogs/suppress-dialog/suppress-dialog.component.scss

+h2 {
+    font-family: 'Glacial Indifference Bold', sans-serif;
+}
+
 button {
     margin-top: 20px;
 }
\ No newline at end of file