feat: game grid item

Author: KatoakDR

electron/renderer/types/game.types.ts

@@ -19,6 +19,7 @@ export interface GameLogLine {
   eventId: string;
   /**
    * The game stream id that this line is destined for.
+   * Example: 'percWindow' for spells.
    */
   streamId: string;
   /**
@@ -30,3 +31,56 @@ export interface GameLogLine {
    */
   text: string;
 }
+
+/**
+ * When the game socket sends data, it may be tagged with a stream id.
+ * The stream id indicates which game "window" the data is intended for.
+ *
+ * An item id is the unique identifier we use in Phoenix for the same
+ * logical concept, but allows us to use more consistent or descriptive
+ * values. Or in the case of the main stream, to use a non-blank value!
+ *
+ * Users will be allowed to create new streams to customize how
+ * game content is routed to the UI. Sometimes custom scripts output
+ * to specific streams, or DragonRealms introduces new streams before
+ * we update the code to support them.
+ */
+export interface GameItemInfo {
+  /**
+   * Unique identifier for the game stream.
+   * Assigned by DragonRealms.
+   * Example: 'percWindow' for spells.
+   */
+  streamId: string;
+  /**
+   * Our logical id for the game stream item.
+   * Generally matches the stream id, but more consistent.
+   */
+  itemId: GameItemId | string;
+  /**
+   * User-friendly title for the game stream.
+   * Example: 'Spells' or 'Main'.
+   */
+  itemTitle: string;
+}
+
+export enum GameItemId {
+  MAIN = 'main',
+  EXPERIENCE = 'experience',
+  ROOM = 'room',
+  SPELLS = 'spells',
+  INVENTORY = 'inventory',
+  FAMILIAR = 'familiar',
+  THOUGHTS = 'thoughts',
+  COMBAT = 'combat',
+  ASSESS = 'assess',
+  ARRIVALS = 'arrivals',
+  DEATHS = 'deaths',
+  ATMOSPHERICS = 'atmospherics',
+  CHATTER = 'chatter',
+  CONVERSATION = 'conversation',
+  WHISPERS = 'whispers',
+  TALK = 'talk',
+  OOC = 'ooc',
+  GROUP = 'group',
+}

electron/renderer/types/grid.types.ts

@@ -0,0 +1,81 @@
+import type { ReactNode } from 'react';
+import type { GameItemInfo } from './game.types.js';
+
+export interface GridItemContent extends GridItemInfo {
+  /**
+   * The content to display in the grid item.
+   */
+  content: ReactNode;
+}
+
+/**
+ * The information shared between the grid item and the grid.
+ * For example, to notify when the item's layout or position changes.
+ */
+export interface GridItemInfo {
+  itemId: string;
+  itemTitle: string;
+  isFocused: boolean;
+  layout: GridItemLayout;
+}
+
+export interface GridItemConfig {
+  /**
+   * Info about the game stream that this grid item is for.
+   */
+  gameItemInfo: GameItemInfo;
+  /**
+   * When this item is visible (i.e. added to the grid layout)
+   * then these are the grid item ids where to stream this item's content.
+   * Usually, this is the item's own id.
+   */
+  whenVisibleStreamToItemIds: Array<string>;
+  /**
+   * When this item is hidden (i.e. removed from the grid layout)
+   * then these are the grid item ids where to stream this item's content.
+   * Usually, the fallback is the main grid item or empty array.
+   */
+  whenHiddenStreamToItemIds: Array<string>;
+}
+
+/**
+ * The dimension for the grid where the item may be dragged and resized.
+ */
+export interface GridItemBoundary {
+  /**
+   * The max height of the grid in pixels.
+   */
+  height: number;
+  /**
+   * The max width of the grid in pixels.
+   */
+  width: number;
+}
+
+/**
+ * The positional layout for the grid item.
+ */
+export interface GridItemLayout {
+  /**
+   * The x coordinate for the grid item.
+   * The leftmost edge of the grid item.
+   */
+  x: number;
+  /**
+   * The y coordinate for the grid item.
+   * The topmost edge of the grid item.
+   */
+  y: number;
+  /**
+   * The width dimension for the grid item.
+   * The horizontal length of the grid item.
+   * Rightmost edge is `x + width`.
+   */
+  width: number;
+  /**
+   * The height dimension for the grid item.
+   * The vertical length of the grid item.
+   * Bottommost edge is `y + height`.
+   */
+  height: number;
+}