feat(game): refactor styling to use css prop and add style props for customization

Author: KatoakDR

electron/renderer/components/game/game-roundtime.tsx

@@ -105,7 +105,7 @@ export const GameRoundTime: React.FC = (): ReactNode => {
   const timerCmps = useMemo((): ReactElement => {
     return (
       <div
-        style={{
+        css={{
           display: 'flex',
           flexDirection: 'column',
           alignContent: 'center',
@@ -152,7 +152,7 @@ const GameTimeDisplay: React.FC<GameTimeDisplayProps> = (
   return (
     <EuiToolTip content={typeTooltip} position="top">
       <div
-        style={{
+        css={{
           position: 'relative',
           width: '100%',
           height: '25px',
@@ -162,7 +162,7 @@ const GameTimeDisplay: React.FC<GameTimeDisplayProps> = (
         }}
       >
         <div
-          style={{
+          css={{
             position: 'absolute',
             left: 0,
             width: `${fillWidth}%`,
@@ -171,7 +171,7 @@ const GameTimeDisplay: React.FC<GameTimeDisplayProps> = (
           }}
         />
         <div
-          style={{
+          css={{
             position: 'absolute',
             width: '100%',
             height: '100%',

electron/renderer/components/game/game-status-bars.tsx

@@ -158,7 +158,7 @@ const GameStatusBar: React.FC<GameStatusBarProps> = (
       }}
     >
       <div
-        style={{
+        css={{
           position: 'absolute',
           left: 0,
           width: `${value}%`,
@@ -169,7 +169,7 @@ const GameStatusBar: React.FC<GameStatusBarProps> = (
         }}
       />
       <div
-        style={{
+        css={{
           position: 'absolute',
           width: '100%',
           height: '100%',

electron/renderer/components/game/game-stream-text.tsx

@@ -2,10 +2,11 @@ import { EuiText, useEuiTheme } from '@elastic/eui';
 import { type SerializedStyles, css } from '@emotion/react';
 import type { ReactNode } from 'react';
 import { memo, useMemo } from 'react';
-import type { GameLogLine } from '../../types/game.types.jsx';
+import type { GameLogLine, GameStreamStyle } from '../../types/game.types.jsx';
 
 export interface GameStreamTextProps {
   logLine: GameLogLine;
+  style?: GameStreamStyle;
 }
 
 /**
@@ -17,46 +18,70 @@ export interface GameStreamTextProps {
  */
 export const GameStreamText: React.FC<GameStreamTextProps> = memo(
   (props: GameStreamTextProps): ReactNode => {
-    const { logLine } = props;
+    const { logLine, style } = props;
 
     const { euiTheme } = useEuiTheme();
 
-    const textStyles = useMemo((): SerializedStyles => {
-      let fontSize = euiTheme.size.m;
-      let fontFamily = euiTheme.font.family;
-      let fontWeight = euiTheme.font.weight.regular;
-      let fontColor = euiTheme.colors.text;
+    const defaultStyles = useMemo(() => {
+      const fontSize = style?.fontSize ?? euiTheme.size.m;
+      const fontFamily = style?.fontFamily ?? euiTheme.font.family;
+      const fontWeight = euiTheme.font.weight.regular;
+      const foregroundColor = style?.foregroundColor ?? euiTheme.colors.text;
+      const backgroundColor = style?.backgroundColor ?? 'inherit';
 
-      if (logLine.styles?.outputClass === 'mono') {
-        fontFamily = euiTheme.font.familyCode ?? fontFamily;
+      return {
+        fontSize,
+        fontFamily,
+        fontWeight,
+        foregroundColor,
+        backgroundColor,
+      };
+    }, [euiTheme, style]);
+
+    const textStyles = useMemo((): SerializedStyles => {
+      let fontSize = defaultStyles.fontSize;
+      let fontFamily = defaultStyles.fontFamily;
+      let fontWeight = defaultStyles.fontWeight;
+      let foregroundColor = defaultStyles.foregroundColor;
+      const backgroundColor = defaultStyles.backgroundColor;
+
+      // TODO add to user customizations in game stream style
+      if (logLine.style?.outputClass === 'mono') {
         fontSize = euiTheme.size.m;
+        fontFamily = euiTheme.font.familyCode ?? fontFamily;
       }
 
-      if (logLine.styles?.stylePreset === 'roomName') {
-        fontColor = euiTheme.colors.title;
+      // TODO add presets to user customizations in game stream style
+      if (logLine.style?.stylePreset === 'roomName') {
+        foregroundColor = euiTheme.colors.title;
         fontWeight = euiTheme.font.weight.bold;
       }
 
-      if (logLine.styles?.bold === true) {
+      if (logLine.style?.bold === true) {
         fontWeight = euiTheme.font.weight.bold;
       }
 
-      if (logLine.styles?.subdued === true) {
-        fontColor = euiTheme.colors.subduedText;
+      if (logLine.style?.subdued === true) {
+        foregroundColor = euiTheme.colors.subduedText;
       }
 
       const textStyles = css({
         fontSize,
         fontFamily,
         fontWeight,
-        color: fontColor,
+        color: foregroundColor,
+        backgroundColor,
         lineHeight: 'initial',
         paddingLeft: euiTheme.size.s,
         paddingRight: euiTheme.size.s,
+        b: {
+          color: '#FFD200', // TODO add 'monster bold' user customization to game stream style
+          fontWeight: euiTheme.font.weight.regular,
+        },
       });
 
       return textStyles;
-    }, [euiTheme, logLine.styles]);
+    }, [euiTheme, defaultStyles, logLine.style]);
 
     // We output the text using inner html because the text may contain tags.
     // For example, tags to highlight a single word or phrases.
@@ -91,8 +116,8 @@ const isSameLogLine = (options: {
 }): boolean => {
   const { oldLogLine, newLogLine } = options;
 
-  const { eventId: oldEventId, styles: oldTheme } = oldLogLine;
-  const { eventId: newEventId, styles: newTheme } = newLogLine;
+  const { eventId: oldEventId, style: oldTheme } = oldLogLine;
+  const { eventId: newEventId, style: newTheme } = newLogLine;
 
   const isSameEventId = oldEventId === newEventId;
   const isSameColorMode = oldTheme?.colorMode === newTheme?.colorMode;

electron/renderer/components/game/game-stream.tsx

@@ -4,7 +4,7 @@ import type { ReactNode } from 'react';
 import { useCallback, useContext, useEffect, useRef, useState } from 'react';
 import type * as rxjs from 'rxjs';
 import { GameContext } from '../../context/game.jsx';
-import type { GameLogLine } from '../../types/game.types.jsx';
+import type { GameLogLine, GameStreamStyle } from '../../types/game.types.jsx';
 import { GameStreamText } from './game-stream-text.jsx';
 import {
   excludeDuplicateEmptyLines,
@@ -39,6 +39,12 @@ export interface GameStreamProps {
    * Default is 500.
    */
   maxLines?: number;
+  /**
+   * The default text formatting to apply to the entire stream.
+   * Styles may be overridden on a line-by-line basis.
+   * See {@link GameLogLine} for details.
+   */
+  style?: GameStreamStyle;
 }
 
 export const GameStream: React.FC<GameStreamProps> = (
@@ -187,6 +193,9 @@ export const GameStream: React.FC<GameStreamProps> = (
       css={{
         overflowY: 'scroll',
         height: '100%',
+        // Disable the eui scrollbar color as it conflicts with
+        // user customizations for grid item styling.
+        backgroundColor: 'inherit',
       }}
       className="eui-scrollBar"
       paddingSize="none"
@@ -201,7 +210,13 @@ export const GameStream: React.FC<GameStreamProps> = (
        */}
       <div css={{ overflowAnchor: 'none' }}>
         {gameLogLines.map((logLine) => {
-          return <GameStreamText key={logLine.eventId} logLine={logLine} />;
+          return (
+            <GameStreamText
+              key={logLine.eventId}
+              logLine={logLine}
+              style={props.style}
+            />
+          );
         })}
       </div>
       <EuiSpacer size="s" />

electron/renderer/components/grid/grid-item.tsx

@@ -25,6 +25,7 @@ import type {
   GridItemBoundary,
   GridItemInfo,
   GridItemPosition,
+  GridItemStyle,
 } from '../../types/grid.types.js';
 
 export interface GridItemProps {
@@ -37,6 +38,12 @@ export interface GridItemProps {
    * If not specified then a default location will be used.
    */
   position?: GridItemPosition;
+  /**
+   * The default font styling for the grid item.
+   * It may be overridden on a line-by-line basis
+   * based on game style presets and user preferences.
+   */
+  style?: GridItemStyle;
   /**
    * The unique identifier for the grid item.
    */
@@ -81,10 +88,18 @@ const DEFAULT_GRID_ITEM_POSITION: GridItemPosition = {
   height: 500,
 };
 
+const DEFAULT_GRID_ITEM_STYLE: GridItemStyle = {
+  fontFamily: 'inherit',
+  fontSize: 'inherit',
+  foregroundColor: 'inherit',
+  backgroundColor: 'inherit',
+};
+
 export const GridItem: React.FC<GridItemProps> = memo(
   (props: GridItemProps): ReactNode => {
     const { itemId, itemTitle, isFocused = false, children } = props;
     const { boundary, position = DEFAULT_GRID_ITEM_POSITION } = props;
+    const { style = DEFAULT_GRID_ITEM_STYLE } = props;
     const { onFocus, onClose, onMoveResize } = props;
 
     const { euiTheme } = useEuiTheme();
@@ -104,14 +119,15 @@ export const GridItem: React.FC<GridItemProps> = memo(
         itemId,
         itemTitle,
         isFocused,
+        style,
         position: {
           x: x.get(),
           y: y.get(),
           width: width.get(),
           height: height.get(),
         },
       };
-    }, [itemId, itemTitle, isFocused, x, y, width, height]);
+    }, [itemId, itemTitle, isFocused, style, x, y, width, height]);
 
     // Handle when the user clicks the close button in the title bar.
     const onCloseClick = useCallback(() => {
@@ -319,9 +335,13 @@ export const GridItem: React.FC<GridItemProps> = memo(
         <EuiSplitPanel.Outer
           grow={true}
           hasBorder={true}
-          style={{
+          css={{
             height: 'inherit',
             width: 'inherit',
+            fontSize: style.fontSize,
+            fontFamily: style.fontFamily,
+            color: style.foregroundColor,
+            backgroundColor: style.backgroundColor,
           }}
         >
           <EuiSplitPanel.Inner grow={false} color="subdued" paddingSize="none">

electron/renderer/components/grid/grid.tsx

@@ -73,6 +73,7 @@ export const Grid: React.FC<GridProps> = (props: GridProps): ReactNode => {
           itemTitle={contentItem.itemTitle}
           isFocused={contentItem.itemId === focusedItemId}
           position={contentItem.position}
+          style={contentItem.style}
           boundary={boundary}
           onFocus={onItemFocus}
           onClose={onItemClose}
@@ -93,7 +94,7 @@ export const Grid: React.FC<GridProps> = (props: GridProps): ReactNode => {
 
   return (
     <div
-      style={{
+      css={{
         overflowY: 'auto',
         overflowX: 'hidden',
         position: 'relative',

electron/renderer/components/text/text-truncate.tsx

@@ -25,7 +25,7 @@ export const TextTruncate: React.FC<TextTruncateProps> = (
 
   return (
     <div
-      style={{
+      css={{
         maxWidth,
         whiteSpace: 'nowrap',
         overflow: 'hidden',

electron/renderer/types/game.types.ts

@@ -64,12 +64,13 @@ export interface GameStreamStyle {
    * The font family to use for the text.
    * For example, "Verdana" or "Courier New".
    */
-  textFont: string;
+  fontFamily: string;
   /**
-   * The font size to use for the text, in pixels.
-   * For example, 12.
+   * The font size to use for the stream content.
+   * Using a number without unit may not yield desired results.
+   * Example: '12px' (recommended) vs. '12' (not recommended).
    */
-  textSize: number;
+  fontSize: string;
   /**
    * The color name or hex code to use for the text.
    * For example, "red" or "#FF0000".

electron/renderer/types/grid.types.ts

@@ -16,6 +16,7 @@ export interface GridItemInfo {
   itemTitle: string;
   isFocused: boolean;
   position: GridItemPosition;
+  style: GridItemStyle;
 }
 
 export interface GridItemConfig {
@@ -99,12 +100,13 @@ export interface GridItemStyle {
    * The font family to use for the text.
    * For example, "Verdana" or "Courier New".
    */
-  textFont: string;
+  fontFamily: string;
   /**
-   * The font size to use for the text, in pixels.
-   * For example, 12.
+   * The font size to use for the stream content.
+   * Using a number without unit may not yield desired results.
+   * Example: '12px' (recommended) vs. '12' (not recommended).
    */
-  textSize: number;
+  fontSize: string;
   /**
    * The color name or hex code to use for the text.
    * For example, "red" or "#FF0000".