implemented tooltips for persons

src/app/journal/journal-notes/journal-notes.component.ts

@@ -31,6 +31,8 @@ export class JournalNotesComponent implements OnInit, OnDestroy {
 
   tooltipText = 'Initial';
 
+  public npcDescriptions: any = {};
+
   editor: Editor = new Editor();
   toolbar: any = [
     // default value
@@ -149,7 +151,7 @@ export class JournalNotesComponent implements OnInit, OnDestroy {
     this.isInEditMode = false;
   }
 
-  deleteEntry(): void {
+  public deleteEntry(): void {
     this.entries.splice(this.currentEntryIndex, 1);
     if (this.entries.length === 0) {
       this.currentEntryIndex = -1;
@@ -170,22 +172,28 @@ export class JournalNotesComponent implements OnInit, OnDestroy {
 
   ////////////////////////////////////////////////////
 
+  /**
+   * Converts the content of the current entry to a tooltipified version.
+   * Is called on everyx refresh of an entry
+   */
   tooltipify() {
     let result: any = this.tooltipService.tooltipifyEntry(
       JSON.parse(JSON.stringify(this.currentEntry.content)),
     );
-    // console.log(result);
+    console.log(result.npcDescriptions);
     this.tooltipifiedEntry.content = result.content;
+    this.npcDescriptions = result.npcDescriptions;
+
+    console.log(this.npcDescriptions);
 
     // console.log(result.content);
     // console.log(this.tooltipifiedEntry);
 
-    // TODO: AB hier funktioniert es noch nicht.
     setTimeout(() => {
       result.npcs.forEach((name: string) => {
         this.addHighlightsToText(name);
       });
-    }, 1000);
+    }, 10);
 
     // result.forEach((entry: any) => {
     //   entry.content = this.sanitizer.bypassSecurityTrustHtml(entry.content);
@@ -205,7 +213,7 @@ export class JournalNotesComponent implements OnInit, OnDestroy {
 
   /**
    * Highlights and adds tooltips to the names that are mentioned in the current entry.
-   * @param name The name of the person which mentionings are to be highlighted.
+   * @param name The name of the person which is currently highlighted.
    */
   addHighlightsToText(name: string) {
     console.log('Highlighting: ' + name);
@@ -222,10 +230,21 @@ export class JournalNotesComponent implements OnInit, OnDestroy {
       componentRef.instance.tooltip = this.tooltip;
       // Appends it at the right spot
       this.renderer.appendChild(element, componentRef.location.nativeElement);
+      // add a mouseover event listener to the highlight component
+      this.renderer.listen(
+        componentRef.location.nativeElement,
+        'mouseover',
+        () => {
+          console.log('Mouseover on: ' + name);
+          console.log(this.npcDescriptions);
+
+          this.tooltipText = this.npcDescriptions[name];
+        },
+      );
     });
     // Modufies the text inside the tooltip template
     // Muss auf mouseover erfolgen
-    this.tooltipText = 'Neuer Tooltip <b>text</b>';
+    // this.tooltipText = 'Neuer Tooltip <b>text</b>';
   }
 
   ngOnDestroy(): void {

src/interfaces/interfaces.ts

@@ -188,6 +188,7 @@ export interface Npcs {
 
 export interface Npc {
   name: string;
+  identifier?: string;
   longDescription: string;
   shortDescription: string;
   organization?: string;

src/services/tooltip/tooltip.service.ts

@@ -9,20 +9,36 @@ export class TooltipService {
   private dataService: DataService = inject(DataService);
 
   public tooltipifyEntry(entry: string): any {
-    const content = this.tootipifyNpc(entry);
+    const content = this.replaceNpcs(entry);
     const matches = entry.match(/(?<=@)\w+/g);
     const uniqueMatches = [...new Set(matches)];
     // get the descriptions from the data service
+    const npcs = this.dataService.npcs;
+    const npcArray = Object.keys(npcs)
+      .map((key) => npcs[key])
+      .flat();
+    console.log(npcArray);
+    let npcsDescription: any = {};
+
+    uniqueMatches.forEach((name) => {
+      const npc = npcArray.find(
+        (npc: Npc) => npc.name === name || npc.identifier === name,
+      );
+      if (npc) {
+        console.log('NPC data found: ', npc);
+        // Add it to the npcDescription object
+        npcsDescription[name] = npc.shortDescription;
+      }
+    });
 
     return {
       content: content,
       npcs: uniqueMatches,
-      npcDescriptions: {},
+      npcDescriptions: npcsDescription,
     };
   }
 
-  private tootipifyNpc(content: string): string {
-    // Add a search that collects all the names of the npcs that occur and send it with the strings
+  private replaceNpcs(content: string): string {
     return content.replace(/@(\w+)/g, "<span class='$1'></span>");
   }
 }