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');
@@ -91,63 +92,64 @@ const httpLoaderFactory = (http: HttpClient): TranslateHttpLoader =>  new Transl
     ScriptaccountActionEditorComponent,
     ScriptaccountConditionEditorComponent
   ],
-    imports: [
+  imports: [
-        BrowserModule,
+    BrowserModule,
-        FormsModule,
+    FormsModule,
-        HttpClientModule,
+    HttpClientModule,
-        CoreModule,
+    CoreModule,
-        SharedModule,
+    SharedModule,
-        TranslateModule.forRoot({
+    TranslateModule.forRoot({
-            loader: {
+      loader: {
-                provide: TranslateLoader,
+        provide: TranslateLoader,
-                useFactory: httpLoaderFactory,
+        useFactory: httpLoaderFactory,
-                deps: [HttpClient]
+        deps: [HttpClient]
-            }
+      }
-        }),
+    }),
-        BrowserAnimationsModule,
+    BrowserAnimationsModule,
-        MatIcon,
+    MatIcon,
-        MatToolbar,
+    MatToolbar,
-        MatButton,
+    MatButton,
-        MatFormField,
+    MatFormField,
-        MatInput,
+    MatInput,
-        MatDrawerContainer,
+    MatDrawerContainer,
-        MatDrawer,
+    MatDrawer,
-        MatIconButton,
+    MatIconButton,
-        MatMenuTrigger,
+    MatMenuTrigger,
-        MatMenu,
+    MatMenu,
-        MatMenuItem,
+    MatMenuItem,
-        MatListItem,
+    MatListItem,
-        MatActionList,
+    MatActionList,
-        MatTabGroup,
+    MatTabGroup,
-        MatTab,
+    MatTab,
-        MatTabLabel,
+    MatTabLabel,
-        MatLabel,
+    MatLabel,
-        MatFormField,
+    MatFormField,
-        ReactiveFormsModule,
+    ReactiveFormsModule,
-        MatError,
+    MatError,
-        MatDialogTitle,
+    MatDialogTitle,
-        MatDialogContent,
+    MatDialogContent,
-        MatDialogActions,
+    MatDialogActions,
-        MatMiniFabButton,
+    MatMiniFabButton,
-        MatTreeModule,
+    MatTreeModule,
-        MatTable,
+    MatTable,
-        MatColumnDef,
+    MatColumnDef,
-        MatHeaderCell,
+    MatHeaderCell,
-        MatHeaderCellDef,
+    MatHeaderCellDef,
-        MatCellDef,
+    MatCellDef,
-        MatCell,
+    MatCell,
-        MatHeaderRow,
+    MatHeaderRow,
-        MatRow,
+    MatRow,
-        MatHeaderRowDef,
+    MatHeaderRowDef,
-        MatRowDef,
+    MatRowDef,
-        MatCheckbox,
+    MatCheckbox,
-        MatSelect,
+    MatSelect,
-        MatOption,
+    MatOption,
-        MatHint,
+    MatHint,
-        MatTooltip,
+    MatTooltip,
-        MatCard,
+    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
+}