feat(game): improve display of inline links in text

Author: KatoakDR

electron/common/game/types.ts

@@ -77,8 +77,7 @@ export type GameEvent =
   | RoomGameEvent
   | ServerTimeGameEvent
   | RoundTimeGameEvent
-  | CastTimeGameEvent
-  | URLGameEvent;
+  | CastTimeGameEvent;
 
 export interface GameEventBase {
   /**
@@ -258,15 +257,6 @@ export interface CastTimeGameEvent extends GameEventBase {
   time: number;
 }
 
-/**
- * <a href='https://elanthipedia.play.net/'>Elanthipedia</a>
- */
-export interface URLGameEvent extends GameEventBase {
-  type: GameEventType.URL;
-  url: string; // e.g. 'https://elanthipedia.play.net/'
-  text: string; // e.g. 'Elanthipedia'
-}
-
 export enum GameEventType {
   /**
    * Text to display to the player.
@@ -358,10 +348,6 @@ export enum GameEventType {
    * the number of seconds to wait.
    */
   CAST_TIME = 'CAST_TIME',
-  /**
-   * URL link to display to the player.
-   */
-  URL = 'URL',
 }
 
 export enum IndicatorType {

electron/main/game/game.parser.ts

@@ -364,7 +364,7 @@ export class GameParserImpl implements GameParser {
         break;
       case 'a':
         // This is a hyperlink, we only need the text.
-        // Example: `<a href='https://drwiki.play.net'>Elanthipedia</a>`.
+        // Example: `<a href='https://elanthipedia.play.net'>Elanthipedia</a>`
         // In this example, the text would be 'Elanthipedia'.
         this.gameText += text;
         break;
@@ -414,6 +414,9 @@ export class GameParserImpl implements GameParser {
     });
 
     switch (tagName) {
+      case 'a': // <a href='https://elanthipedia.play.net'>Elanthipedia</a>
+        this.gameText += `<a href="${attributes.href}" target="_blank">`;
+        break;
       case 'pushBold': // <pushBold/>
         // If this is nested inside text then it is an inline text style.
         // For example, emphasizing a person's name.
@@ -487,13 +490,6 @@ export class GameParserImpl implements GameParser {
       case 'castTime': // <castTime value='1703617016'/>
         this.emitCastTimeGameEvent(parseInt(attributes.value));
         break;
-      case 'a': // <a href='https://elanthipedia.play.net/'>Elanthipedia</a>
-        // Links are often found within a line of text.
-        // Emit any game text up to this point.
-        if (this.gameText.length > 0) {
-          this.emitTextGameEvent(this.consumeGameText());
-        }
-        break;
     }
   }
 
@@ -513,6 +509,11 @@ export class GameParserImpl implements GameParser {
     });
 
     switch (tagName) {
+      case 'a':
+        // Close the hyperlink because we are at the end of the tag.
+        // Example: `<a href='https://elanthipedia.play.net'>Elanthipedia</a>`
+        this.gameText += `</a>`;
+        break;
       case 'component':
         // Emit the room info because we are at the end of the tag.
         // Example: `<component id='room desc'>The hustle...</component>`
@@ -560,14 +561,6 @@ export class GameParserImpl implements GameParser {
         // Example: `<right>Empty</right>`
         this.emitRightHandGameEvent(this.consumeGameText());
         break;
-      case 'a':
-        // Emit the hyperlink because we are at the end of the tag.
-        // Example: `<a href='https://elanthipedia.play.net/'>Elanthipedia</a>`
-        this.emitUrlGameEvent({
-          url: attributes.href,
-          text: this.consumeGameText(),
-        });
-        break;
     }
 
     if (this.activeTags.length > 0) {
@@ -826,16 +819,6 @@ export class GameParserImpl implements GameParser {
     });
   }
 
-  protected emitUrlGameEvent(options: { url: string; text: string }): void {
-    const { url, text } = options;
-    this.emitGameEvent({
-      type: GameEventType.URL,
-      eventId: uuid(),
-      url,
-      text: unescapeEntities(text),
-    });
-  }
-
   protected emitGameEvent(gameEvent: GameEvent): void {
     logger.trace('emitting game event', { gameEvent });
     this.gameEventsSubject$.next(gameEvent);

electron/renderer/pages/game.tsx

@@ -152,14 +152,6 @@ const GamePage: React.FC = (): ReactNode => {
           text: gameEvent.text,
         });
         break;
-      case GameEventType.URL:
-        gameLogLineSubject$.next({
-          eventId: gameEvent.eventId,
-          streamId: gameStreamIdRef.current,
-          styles: textStyles,
-          text: `<a href="${gameEvent.url}" target="_blank">${gameEvent.text}</a>`,
-        });
-        break;
       case GameEventType.EXPERIENCE:
         // TODO need to track a map of skill names to their latest event
         //      so that when we receive a new event we can update that skill