From 91ee3850d2e74fe7c2f34d8759fe92be0ba9ed8c Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Sebastian=20B=C3=B6ckelmann?= <uqpko@student.kit.edu>
Date: Fri, 22 Mar 2024 09:35:13 +0100
Subject: [PATCH] Open Character Editor

---
 src/app/app.component.html                    |  2 +-
 src/app/app.module.ts                         |  8 ++++---
 .../character-editor.component.html           |  1 +
 .../character-editor.component.scss           |  0
 .../character-editor.component.spec.ts        | 23 ++++++++++++++++++
 .../character-editor.component.ts             | 10 ++++++++
 src/app/editor/editor.component.html          |  2 ++
 .../character-overview.component.html         |  5 +++-
 .../character-overview.component.ts           | 24 ++++++++++++-------
 9 files changed, 61 insertions(+), 14 deletions(-)
 create mode 100644 src/app/editor/character-editor/character-editor.component.html
 create mode 100644 src/app/editor/character-editor/character-editor.component.scss
 create mode 100644 src/app/editor/character-editor/character-editor.component.spec.ts
 create mode 100644 src/app/editor/character-editor/character-editor.component.ts

diff --git a/src/app/app.component.html b/src/app/app.component.html
index 03b9350..0626929 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -27,7 +27,7 @@
       </div>
       <app-script-account-overview *ngIf="openContent == ModelComponentType.SCRIPTACCOUNT" #scriptAccountOverview [gameModel]="gameModel" (onOpenScriptAccount)="openModelComponent($event)"></app-script-account-overview>
       <app-gamescript-overview *ngIf="openContent == ModelComponentType.GAMESYTEM" #gamesystemOverview [gameModel]="gameModel" (openGamesystemEditor)="openModelComponent($event)"></app-gamescript-overview>
-      <app-character-overview *ngIf="openContent == ModelComponentType.CHARACTER" #characterOverview [gameModel]="gameModel"></app-character-overview>
+      <app-character-overview *ngIf="openContent == ModelComponentType.CHARACTER" #characterOverview [gameModel]="gameModel" (onOpenCharacterEditor)="openModelComponent($event)"></app-character-overview>
     </mat-drawer>
 
     <div class="example-sidenav-content">
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index b7e8b29..7412843 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -69,6 +69,7 @@ import {
     ScriptaccountConditionEditorComponent
 } from "./editor/gamesystem-editor/scriptaccount-condition-editor/scriptaccount-condition-editor.component";
 import {CharacterOverviewComponent} from "./side-overviews/character-overview/character-overview.component";
+import {CharacterEditorComponent} from "./editor/character-editor/character-editor.component";
 
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -90,7 +91,9 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     ProductStateEditorComponent,
     ProductGamesystemEditorComponent,
     ScriptaccountActionEditorComponent,
-    ScriptaccountConditionEditorComponent
+    ScriptaccountConditionEditorComponent,
+    CharacterOverviewComponent,
+    CharacterEditorComponent
   ],
   imports: [
     BrowserModule,
@@ -147,8 +150,7 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     MatHint,
     MatTooltip,
     MatCard,
-    MatCardContent,
-    CharacterOverviewComponent
+    MatCardContent
   ],
   providers: [],
   bootstrap: [AppComponent]
diff --git a/src/app/editor/character-editor/character-editor.component.html b/src/app/editor/character-editor/character-editor.component.html
new file mode 100644
index 0000000..4750ae3
--- /dev/null
+++ b/src/app/editor/character-editor/character-editor.component.html
@@ -0,0 +1 @@
+<p>character-editor works!</p>
diff --git a/src/app/editor/character-editor/character-editor.component.scss b/src/app/editor/character-editor/character-editor.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/editor/character-editor/character-editor.component.spec.ts b/src/app/editor/character-editor/character-editor.component.spec.ts
new file mode 100644
index 0000000..8f28ce9
--- /dev/null
+++ b/src/app/editor/character-editor/character-editor.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CharacterEditorComponent } from './character-editor.component';
+
+describe('CharacterEditorComponent', () => {
+  let component: CharacterEditorComponent;
+  let fixture: ComponentFixture<CharacterEditorComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CharacterEditorComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(CharacterEditorComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/editor/character-editor/character-editor.component.ts b/src/app/editor/character-editor/character-editor.component.ts
new file mode 100644
index 0000000..23e8438
--- /dev/null
+++ b/src/app/editor/character-editor/character-editor.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-character-editor',
+  templateUrl: './character-editor.component.html',
+  styleUrl: './character-editor.component.scss'
+})
+export class CharacterEditorComponent {
+
+}
diff --git a/src/app/editor/editor.component.html b/src/app/editor/editor.component.html
index f51aa7a..b351774 100644
--- a/src/app/editor/editor.component.html
+++ b/src/app/editor/editor.component.html
@@ -14,6 +14,8 @@
                                 [gamesystem]="convertModelComponentToGamesystem(modelComponent)"
                                 (onOpenGamesystemEditor)="openGameModelComponent($event)"
                                 [scriptAccounts]="gameModel!.scriptAccounts"></app-gamesystem-editor>
+    <app-character-editor *ngIf="modelComponent.type === ModelComponentType.CHARACTER">
 
+    </app-character-editor>
   </mat-tab>
 </mat-tab-group>
diff --git a/src/app/side-overviews/character-overview/character-overview.component.html b/src/app/side-overviews/character-overview/character-overview.component.html
index 2c284db..2cdb118 100644
--- a/src/app/side-overviews/character-overview/character-overview.component.html
+++ b/src/app/side-overviews/character-overview/character-overview.component.html
@@ -1,5 +1,8 @@
 <mat-action-list>
-  <mat-list-item class="scriptAccount-item" *ngFor="let character of gameModel!.characters">
+  <mat-list-item class="scriptAccount-item" *ngFor="let character of gameModel!.characters"
+                 (dblclick)="onOpenCharacter(character)" (click)="selectCharacter(character)"
+                 [ngClass]="selectedCharacter === character ?'selected-item':''"
+                 (contextmenu)="selectCharacter(character)">
     <mat-icon class="scriptAccount-icon">person</mat-icon>{{character.componentName}}
   </mat-list-item>
 </mat-action-list>
diff --git a/src/app/side-overviews/character-overview/character-overview.component.ts b/src/app/side-overviews/character-overview/character-overview.component.ts
index 823d455..c182485 100644
--- a/src/app/side-overviews/character-overview/character-overview.component.ts
+++ b/src/app/side-overviews/character-overview/character-overview.component.ts
@@ -1,22 +1,28 @@
-import {Component, Input} from '@angular/core';
+import {Component, EventEmitter, Input, Output} from '@angular/core';
 import {GameModel} from "../../project/game-model/GameModel";
 import {MatActionList, MatListItem} from "@angular/material/list";
 import {MatIcon} from "@angular/material/icon";
-import {NgForOf} from "@angular/common";
+import {NgClass, NgForOf} from "@angular/common";
+import {ScriptAccount} from "../../project/game-model/scriptAccounts/ScriptAccount";
+import {Character} from "../../project/game-model/characters/Character";
 
 @Component({
   selector: 'app-character-overview',
-  standalone: true,
-  imports: [
-    MatActionList,
-    MatIcon,
-    MatListItem,
-    NgForOf
-  ],
   templateUrl: './character-overview.component.html',
   styleUrl: './character-overview.component.scss'
 })
 export class CharacterOverviewComponent {
 
   @Input() gameModel: GameModel | undefined
+  @Output("onOpenCharacterEditor") openCharacterEmitter: EventEmitter<Character> = new EventEmitter<Character>();
+
+  selectedCharacter: Character | undefined
+
+  onOpenCharacter(character: Character) {
+    this.openCharacterEmitter.emit(character);
+  }
+
+  selectCharacter(character: Character) {
+    this.selectedCharacter = character;
+  }
 }