Introduce Characters and visualize them in Overview Component

src/app/app.component.html

@@ -3,7 +3,9 @@
     <button mat-icon-button class="small-icon-button" [ngClass]="openContent === ModelComponentType.SCRIPTACCOUNT ? 'selected':''"
             (click)="openScriptAccountsOverview()"><mat-icon>inventory_2</mat-icon></button>
     <button mat-icon-button class="small-icon-button" [ngClass]="openContent === ModelComponentType.GAMESYTEM ? 'selected':''"
-            (click)="openGamesystemsOverview()"><mat-icon>manufacturing</mat-icon></button>
+            (click)="openGamesystemsOverview()"><mat-icon>code</mat-icon></button>
+    <button mat-icon-button class="small-icon-button" [ngClass]="openContent === ModelComponentType.CHARACTER ? 'selected':''"
+            (click)="openCharactersOverview()"><mat-icon>person</mat-icon></button>
   </div>
 
 
@@ -20,10 +22,12 @@
         <mat-menu #contentMenu="matMenu">
           <button mat-menu-item (click)="openScriptAccountsOverview()">{{ModelComponentTypeUtillities.toString(ModelComponentType.SCRIPTACCOUNT)}}</button>
           <button mat-menu-item (click)="openGamesystemsOverview()">{{ModelComponentTypeUtillities.toString(ModelComponentType.GAMESYTEM)}}</button>
+          <button mat-menu-item (click)="openCharactersOverview()">{{ModelComponentTypeUtillities.toString(ModelComponentType.CHARACTER)}}</button>
         </mat-menu>
       </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>
     </mat-drawer>
 
     <div class="example-sidenav-content">

src/app/app.component.ts

@@ -206,6 +206,11 @@ export class AppComponent implements OnInit{
     this.drawer!.open();
   }
 
+  openCharactersOverview() {
+    this.openContent = ModelComponentType.CHARACTER
+    this.drawer!.open()
+  }
+
   protected readonly ModelComponentType = ModelComponentType;
 
   closeContentOverview() {

src/app/app.module.ts

@@ -68,6 +68,7 @@ import {
 import {
     ScriptaccountConditionEditorComponent
 } from "./editor/gamesystem-editor/scriptaccount-condition-editor/scriptaccount-condition-editor.component";
+import {CharacterOverviewComponent} from "./side-overviews/character-overview/character-overview.component";
 
 // AoT requires an exported function for factories
 const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new TranslateHttpLoader(http, './assets/i18n/', '.json');
@@ -146,7 +147,8 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     MatHint,
     MatTooltip,
     MatCard,
-        MatCardContent
+    MatCardContent,
+    CharacterOverviewComponent
   ],
   providers: [],
   bootstrap: [AppComponent]

src/app/project/game-model/GameModel.ts

@@ -4,16 +4,20 @@ import {Transition} from "./gamesystems/transitions/Transition";
 import {State} from "./gamesystems/states/State";
 import {ProductGamesystem} from "./gamesystems/ProductGamesystem";
 import {SimpleGamesystem} from "./gamesystems/SimpleGamesystem";
-import {StorageModel} from "./fs/StorageModel";
+import {Character} from "./characters/Character";
+import {ModelComponentType} from "./ModelComponentType";
 
 export class GameModel {
   gameModelName: string
 
   gamesystems: Gamesystem<any, any>[] = [];
   scriptAccounts: ScriptAccount[] = [];
+  characters: Character[] = []
 
   constructor(gameModelName: string) {
     this.gameModelName = gameModelName;
+    this.characters.push(new Character("Astrid Hofferson", "", ModelComponentType.CHARACTER))
+    this.characters.push(new Character("Hicks Haddock", "", ModelComponentType.CHARACTER))
   }
 
   addGamesystem(gamesystem: Gamesystem<any, any>) {

src/app/project/game-model/ModelComponentType.ts

@@ -1,5 +1,6 @@
 export enum ModelComponentType {
   SCRIPTACCOUNT,
-  GAMESYTEM
+  GAMESYTEM,
+  CHARACTER
 
 }

src/app/project/game-model/ModelComponentTypeUtillities.ts

@@ -5,6 +5,7 @@ export class ModelComponentTypeUtillities {
     switch (modelComponentType) {
       case ModelComponentType.SCRIPTACCOUNT: return "ScriptAccounts";
       case ModelComponentType.GAMESYTEM: return "Gamesystems";
+      case ModelComponentType.CHARACTER: return "Characters"
       default: return "Undefined";
     }
   }
@@ -13,6 +14,7 @@ export class ModelComponentTypeUtillities {
     switch (modelComponentType) {
       case ModelComponentType.SCRIPTACCOUNT: return "ScriptAccount";
       case ModelComponentType.GAMESYTEM: return "Gamesystem";
+      case ModelComponentType.CHARACTER: return "Character"
       default: return "Undefined";
     }
   }
@@ -21,6 +23,7 @@ export class ModelComponentTypeUtillities {
     switch (string) {
       case "gamesystem": return ModelComponentType.GAMESYTEM;
       case "scriptaccount": return ModelComponentType.SCRIPTACCOUNT;
+      case "character": return ModelComponentType.CHARACTER
     }
   }
 }

src/app/project/game-model/characters/Character.ts

@@ -0,0 +1,9 @@
+import {ModelComponent} from "../ModelComponent";
+import {ModelComponentType} from "../ModelComponentType";
+
+export class Character extends ModelComponent{
+
+  constructor(componentName: string, componentDescription: string, type: ModelComponentType) {
+    super(componentName, componentDescription, type);
+  }
+}

src/app/side-overviews/character-overview/character-overview.component.html

@@ -0,0 +1,5 @@
+<mat-action-list>
+  <mat-list-item class="scriptAccount-item" *ngFor="let character of gameModel!.characters">
+    <mat-icon class="scriptAccount-icon">person</mat-icon>{{character.componentName}}
+  </mat-list-item>
+</mat-action-list>

src/app/side-overviews/character-overview/character-overview.component.scss

@@ -0,0 +1,14 @@
+.scriptAccount-item {
+  min-height: 1.8em !important;
+  height: 1.8em !important;
+}
+
+.scriptAccount-icon {
+  margin-right: 10px;
+  color: #ccffff;
+  align-content: baseline;
+}
+
+.selected-item {
+  background-color: #8696b6;
+}

src/app/side-overviews/character-overview/character-overview.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { CharacterOverviewComponent } from './character-overview.component';
+
+describe('CharacterOverviewComponent', () => {
+  let component: CharacterOverviewComponent;
+  let fixture: ComponentFixture<CharacterOverviewComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [CharacterOverviewComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(CharacterOverviewComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

src/app/side-overviews/character-overview/character-overview.component.ts

@@ -0,0 +1,22 @@
+import {Component, Input} 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";
+
+@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
+}