change app language to french + add upload and download files + connect...

change app language to french + add upload and download files + connect game-context and game-educationnal-objective to the model

src/app/app.component.html

@@ -4,8 +4,8 @@
 
             <div class="container-scenario-main">
                 <div class="container-scenario-main-gamePieces" [style.z-index]="4">
-                    <app-game-educationnal-objective></app-game-educationnal-objective>
-                    <app-game-context [style.z-index]="2"></app-game-context>
+                    <app-game-educationnal-objective [gameEducationnalObjective]="this.scenario.educationnalObjective"></app-game-educationnal-objective>
+                    <app-game-context [style.z-index]="2" [gameContext]="this.scenario.context"></app-game-context>
                 </div>
 
                 <div class="container-scenario-main-missions">
@@ -150,7 +150,8 @@
             <input name="unity" type="checkbox" />
             <label for="unity">Intégrer le jeu sous Unity</label>
         </div>
-        <button mat-mini-fab color="white"><mat-icon fontIcon="download_file"></mat-icon></button>
-        <button mat-mini-fab color="white"><mat-icon fontIcon="upload-file"></mat-icon></button>
+        <button mat-mini-fab color="white" (click)="downloadFile()"><mat-icon fontIcon="download_file"></mat-icon></button>
+        <button mat-mini-fab color="white" (click)="test()"><mat-icon fontIcon="upload-file"></mat-icon></button>
+        <input type="file" (change)="onFileSelected($event)">
     </div>
 </div>
\ No newline at end of file

src/app/app.component.ts

 import { Component } from '@angular/core';
+import { Scenario } from './class/scenario/scenario';
 
 @Component({
   selector: 'app-root',
@@ -8,7 +9,35 @@ import { Component } from '@angular/core';
 export class AppComponent {
   title = 'RLG Maker';
 
-  range(n: number): number[] {
-    return Array.from(Array(n), (_, i) => i);
+  constructor() { }
+
+  scenario: Scenario = new Scenario();
+
+  test() {
+    console.log(this.scenario);
+  }
+
+  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);
+  }
+  
+  onFileSelected(event: any) {
+    const file: File = event.target.files[0];
+    if (file) {
+      const reader: FileReader = new FileReader();
+      reader.readAsText(file);
+      reader.onload = (e) => {
+        const fileContent: string = reader.result as string;
+        const scenario: Scenario = JSON.parse(fileContent) as Scenario;
+        this.scenario = scenario;
+      };
+    }
   }
 }
\ No newline at end of file

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

@@ -11,23 +11,23 @@
         <div class="piece-form-title">Contexte du jeu</div>
         <div class="piece-form-universe">
             <label for="univers">Univers</label>
-            <input name="univers" type="text" placeholder="Réaliste"/>   
+            <input name="univers" type="text" [(ngModel)]="gameContext.univers" placeholder="Réaliste"/>   
         </div>
         <div class="piece-form-support">
             <label for="support">Medium / Support(s)</label>
-            <input name="support" type="text" placeholder="Ordinateur en 3D"/>   
+            <input name="support" type="text" [(ngModel)]="gameContext.support" placeholder="Ordinateur en 3D"/>   
         </div>
         <div class="piece-form-duration">
             <label for="duration">Durée</label>
-            <input name="duration" type="text" placeholder="3h"/>   
+            <input name="duration" type="text" [(ngModel)]="gameContext.duration" placeholder="3h"/>
         </div>
         <div class="piece-form-intrigue">
             <label for="intrigue">Intrigue</label>
-            <textarea name="intrigue" placeholder="Vous êtes stagiaire dans une agence de communication et devez faire vos preuves pour être embauché.e"></textarea>  
+            <textarea name="intrigue" [(ngModel)]="gameContext.intrigue" placeholder="Vous êtes stagiaire dans une agence de communication et devez faire vos preuves pour être embauché.e"></textarea>  
         </div>
         <div class="piece-form-other">
             <label for="other">Autre</label>
-            <textarea name="other"></textarea>  
+            <textarea name="other" [(ngModel)]="gameContext.other"></textarea>  
         </div> 
     </div>
 

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

-import { Component, OnInit } from '@angular/core';
+import { Component, Input, OnInit } from '@angular/core';
+import { GameContext } from 'src/app/class/game-context/game-context';
 
 @Component({
   selector: 'app-game-context',
@@ -7,6 +8,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class GameContextComponent implements OnInit {
 
+  @Input() gameContext: GameContext = new GameContext();
+
   constructor() { }
 
   ngOnInit(): void {

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

@@ -11,7 +11,7 @@
         <div class="piece-form-title">Objectif pédagogique</div>
         <div class="piece-form-objective">
             <label for="objective">Commun pour le jeu</label>
-            <textarea name="objective" placeholder="- Améliorer les softskills&#10;- Apprendre à coopérer"></textarea>
+            <textarea name="objective" [(ngModel)]="gameEducationnalObjective.objective" placeholder="- Améliorer les softskills&#10;- Apprendre à coopérer"></textarea>
         </div>
         <div class="piece-form-footer">Sorbonne Université, LIP6 - IMT Nord Europe</div>
     </div>

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

-import { Component, OnInit } from '@angular/core';
+import { Component, OnInit, Input } from '@angular/core';
+import { GameEducationnalObjective } from 'src/app/class/game-educationnal-objective/game-educationnal-objective';
 
 @Component({
   selector: 'app-game-educationnal-objective',
@@ -7,6 +8,8 @@ import { Component, OnInit } from '@angular/core';
 })
 export class GameEducationnalObjectiveComponent implements OnInit {
 
+  @Input() gameEducationnalObjective: GameEducationnalObjective = new GameEducationnalObjective();
+
   constructor() { }
 
   ngOnInit(): void {

src/index.html

 <!doctype html>
-<html lang="en">
+<html lang="fr">
 <head>
   <meta charset="utf-8">
   <title>RLG Maker</title>