feat(game-stream-text): support theme color changes for existing text

KatoakDR · KatoakDR · commit dc389a6baf82 · 2025-01-19T12:41:39.000-06:00
diff --git a/electron/renderer/components/game/game-stream-text.tsx b/electron/renderer/components/game/game-stream-text.tsx
@@ -1,5 +1,6 @@
-import { EuiText } from '@elastic/eui';
-import { memo } from 'react';
+import { EuiText, useEuiTheme } from '@elastic/eui';
+import { type SerializedStyles, css } from '@emotion/react';
+import { memo, useMemo } from 'react';
 import type { GameLogLine } from '../../types/game.types.jsx';
 
 export interface GameStreamTextProps {
@@ -9,24 +10,93 @@ export interface GameStreamTextProps {
 /**
  * We memoize the component per the event id because the log lines
  * are effectively immutable. This prevents unnecessary re-renders.
+ *
+ * One exception is when the theme color mode changes, at which point
+ * we do rerender all the log lines to apply the new styling effects.
  */
 export const GameStreamText: React.FC<GameStreamTextProps> = memo(
   (props: GameStreamTextProps) => {
     const { logLine } = props;
 
+    const { euiTheme } = useEuiTheme();
+
+    const textStyles = useMemo((): SerializedStyles => {
+      let fontSize = '14px';
+      let fontFamily = euiTheme.font.familySerif;
+      let fontWeight = euiTheme.font.weight.regular;
+      let fontColor = euiTheme.colors.text;
+
+      if (logLine.styles.outputClass === 'mono') {
+        fontFamily = euiTheme.font.familyCode;
+        fontSize = euiTheme.size.m;
+      }
+
+      if (logLine.styles.stylePreset === 'roomName') {
+        fontColor = euiTheme.colors.title;
+        fontWeight = euiTheme.font.weight.bold;
+      }
+
+      if (logLine.styles.bold === true) {
+        fontWeight = euiTheme.font.weight.bold;
+      }
+
+      if (logLine.styles.subdued === true) {
+        fontColor = euiTheme.colors.subduedText;
+      }
+
+      const textStyles = css({
+        fontSize,
+        fontFamily,
+        fontWeight,
+        color: fontColor,
+        lineHeight: 'initial',
+        paddingLeft: euiTheme.size.s,
+        paddingRight: euiTheme.size.s,
+      });
+
+      return textStyles;
+    }, [euiTheme, logLine.styles]);
+
     // We output the text using inner html because the text may contain tags.
     // For example, tags to highlight a single word or phrases.
     // If we output as `{logLine.text}` then those tags are escaped.
 
     return (
-      <EuiText id={logLine.eventId} css={logLine.styles}>
+      <EuiText id={logLine.eventId} css={textStyles}>
         <span dangerouslySetInnerHTML={{ __html: logLine.text }} />
       </EuiText>
     );
   },
   (oldProps, newProps) => {
-    return oldProps.logLine.eventId === newProps.logLine.eventId;
+    // Component will only rerender when this method returns false.
+    return isSameLogLine({
+      oldLogLine: oldProps.logLine,
+      newLogLine: newProps.logLine,
+    });
   }
 );
 
+/**
+ * For efficient memoization of the log lines, consider the log line the
+ * same if the event id and color mode are the same.
+ *
+ * Checking the color mode ensures that when the user changes the theme
+ * then all log lines are re-rendered. Otherwise the stream displays a
+ * mix of light and dark mode text, which is unintuitive and confusing.
+ */
+const isSameLogLine = (options: {
+  oldLogLine: GameLogLine;
+  newLogLine: GameLogLine;
+}): boolean => {
+  const { oldLogLine, newLogLine } = options;
+
+  const { eventId: oldEventId, styles: oldTheme } = oldLogLine;
+  const { eventId: newEventId, styles: newTheme } = newLogLine;
+
+  const isSameEventId = oldEventId === newEventId;
+  const isSameColorMode = oldTheme?.colorMode === newTheme?.colorMode;
+
+  return isSameEventId && isSameColorMode;
+};
+
 GameStreamText.displayName = 'GameStreamText';
diff --git a/electron/renderer/pages/grid.tsx b/electron/renderer/pages/grid.tsx
@@ -1,7 +1,5 @@
 import type { IpcRendererEvent } from 'electron';
 import { EuiFieldText, EuiPageTemplate, useEuiTheme } from '@elastic/eui';
-import type { SerializedStyles } from '@emotion/react';
-import { css } from '@emotion/react';
 import isEmpty from 'lodash-es/isEmpty.js';
 import { useObservable, useSubscription } from 'observable-hooks';
 import type { KeyboardEventHandler, ReactNode } from 'react';
@@ -21,6 +19,7 @@ import { GameStream } from '../components/game/game-stream.jsx';
 import { Grid } from '../components/grid/grid.jsx';
 import { useLogger } from '../hooks/logger.jsx';
 import { useMeasure } from '../hooks/measure.js';
+import { useTheme } from '../hooks/theme.jsx';
 import { useWindowSize } from '../hooks/window-size.js';
 import { runInBackground } from '../lib/async/run-in-background.js';
 import { getGameItemInfo } from '../lib/game/game-item-info.js';
@@ -60,46 +59,7 @@ const GridPage: React.FC = (): ReactNode => {
   // TODO load the grid layout items
 
   const { euiTheme } = useEuiTheme();
-
-  const computeTextStyles = useCallback((): SerializedStyles => {
-    // TODO user pref for 'mono' or 'serif' font family
-    let fontFamily = euiTheme.font.familySerif;
-    // TODO user pref for font size
-    let fontSize = '14px';
-    let fontWeight = euiTheme.font.weight.regular;
-    let fontColor = euiTheme.colors.text;
-
-    if (textOutputClassRef.current === 'mono') {
-      fontFamily = euiTheme.font.familyCode;
-      fontSize = euiTheme.size.m;
-    }
-
-    if (textStyleBoldRef.current) {
-      fontWeight = euiTheme.font.weight.bold;
-    }
-
-    if (textStylePresetRef.current === 'roomName') {
-      fontColor = euiTheme.colors.title;
-      fontWeight = euiTheme.font.weight.bold;
-    }
-
-    // TODO rather than return the calculated CSS styles,
-    //      return an object that indicates with keys from the euiTheme to use
-    //      For example, { fontFamily: 'code', fontSize: 'm', fontWeight: 'bold', color: 'title' }
-    //      This will allow the GameStreamText component to apply the correct styles
-    //      when the user swaps the theme from light to dark mode
-    const textStyles = css({
-      fontFamily,
-      fontSize,
-      fontWeight,
-      color: fontColor,
-      lineHeight: 'initial',
-      paddingLeft: euiTheme.size.s,
-      paddingRight: euiTheme.size.s,
-    });
-
-    return textStyles;
-  }, [euiTheme]);
+  const { colorMode = 'dark' } = useTheme();
 
   // TODO refactor to a ExperienceGameStream component
   //      it will know all skills to render and can highlight
@@ -156,7 +116,12 @@ const GridPage: React.FC = (): ReactNode => {
   // Track high level game events such as stream ids and formatting.
   // Re-emit text events to the game stream subject to get to grid items.
   useSubscription(gameEventsSubject$, (gameEvent: GameEvent) => {
-    const textStyles = computeTextStyles();
+    const textStyles: GameLogLine['styles'] = {
+      colorMode,
+      outputClass: textOutputClassRef.current,
+      stylePreset: textStylePresetRef.current,
+      bold: textStyleBoldRef.current,
+    };
 
     switch (gameEvent.type) {
       case GameEventType.CLEAR_STREAM:
@@ -200,7 +165,10 @@ const GridPage: React.FC = (): ReactNode => {
         gameLogLineSubject$.next({
           eventId: gameEvent.eventId,
           streamId: 'experience',
-          styles: css(textStyles, { fontFamily: euiTheme.font.familyCode }),
+          styles: {
+            ...textStyles,
+            outputClass: 'mono',
+          },
           text: formatExperienceText(gameEvent),
         });
         break;
@@ -294,24 +262,18 @@ const GridPage: React.FC = (): ReactNode => {
           eventId: uuid(),
           // TODO create some constants for known stream ids, '' = main window
           streamId: '',
-          // TODO clean up this mess
-          styles: css({
-            fontFamily: `Verdana, ${euiTheme.font.familySerif}`,
-            fontSize: '14px',
-            fontWeight: euiTheme.font.weight.regular,
-            color: euiTheme.colors.subduedText,
-            lineHeight: 'initial',
-            paddingLeft: euiTheme.size.s,
-            paddingRight: euiTheme.size.s,
-          }),
+          styles: {
+            colorMode,
+            subdued: true,
+          },
           text: `> ${command}`,
         });
       }
     );
     return () => {
       unsubscribe();
     };
-  }, [gameLogLineSubject$, euiTheme]);
+  }, [gameLogLineSubject$, euiTheme, colorMode]);
 
   // TODO move to a new GameCommandInput component
   const onKeyDownCommandInput = useCallback<
diff --git a/electron/renderer/types/game.types.ts b/electron/renderer/types/game.types.ts
@@ -1,4 +1,4 @@
-import type { SerializedStyles } from '@emotion/react';
+import type { EuiThemeColorMode } from '@elastic/eui';
 
 export interface Account {
   accountName: string;
@@ -22,14 +22,39 @@ export interface GameLogLine {
    * Example: 'percWindow' for spells.
    */
   streamId: string;
-  /**
-   * The text formatting to apply to this line.
-   */
-  styles: SerializedStyles;
   /**
    * The text to display.
    */
   text: string;
+  /**
+   * The text formatting to apply to the entire line.
+   */
+  styles: {
+    /**
+     * The theme color mode to use (e.g. 'light' or 'dark').
+     */
+    colorMode: EuiThemeColorMode;
+    /**
+     * See `GameEventType.TEXT_OUTPUT_CLASS` for possible values.
+     * For example, 'mono' for monospaced text, or '' for normal text.
+     */
+    outputClass?: string;
+    /**
+     * See `GameEventType.TEXT_STYLE_PRESET` for possible values.
+     * For example, 'roomName' or 'roomDesc' or 'whisper', etc.
+     */
+    stylePreset?: string;
+    /**
+     * Use a bold font weight.
+     * Since this applies to the entire line, usually used for room titles.
+     */
+    bold?: boolean;
+    /**
+     * Use a subdued text color.
+     * Primarily used to style the command text we echo back to the user.
+     */
+    subdued?: boolean;
+  };
 }
 
 /**
