@pretty-chitty/core 1.1.1

package/src/library/components/TokenizedMessage.tsx

@@ -0,0 +1,206 @@
+import React from "react";
+import { Box } from "@mui/material";
+import Color from "color";
+import { ImageSpec } from "../utilities/CanvasStack/CanvasOperations";
+import { UpdatingCanvasImage } from "./UpdatingCanvasImage";
+import { StaticImage } from "../utilities/StaticImage";
+
+export interface TokenDefinition {
+  image?: string | ImageSpec;
+  label?: string;
+  color?: string;
+}
+
+export interface TokenizedMessageProps {
+  message: string;
+  fontSize: number;
+  tokenMap?: Record<string, TokenDefinition>;
+}
+
+// Token parsing types
+interface ParsedToken {
+  type: "token";
+  name: string;
+  definition?: TokenDefinition;
+  key: string;
+}
+
+interface ParsedText {
+  type: "text";
+  content: string;
+  key: string;
+}
+
+type ParsedElement = ParsedToken | ParsedText;
+
+// Color utility function
+function calculateBackgroundColor(textColor: string): string {
+  const color = Color(textColor);
+  const lightness = color.lightness();
+  return lightness > 45
+    ? color.lightness(5).hex() // 5% brightness for light colors
+    : color.lightness(95).hex(); // 95% brightness for dark colors
+}
+
+// Token Image Component
+interface TokenImageProps {
+  src: string | ImageSpec;
+  alt: string;
+  fontSize: number;
+  hasLabel: boolean;
+}
+
+function TokenImage({ src, alt, fontSize, hasLabel }: TokenImageProps) {
+  if (typeof src !== "string") {
+    const updatingCanvas = new StaticImage(src).get();
+    return (
+      <UpdatingCanvasImage
+        image={updatingCanvas}
+        style={{
+          height: `${fontSize - 4}px`,
+          marginRight: "4px",
+          transform: `scale(1.4)`,
+          position: "relative",
+          marginLeft: "2px",
+        }}
+      />
+    );
+  } else {
+    return (
+      <Box
+        component="img"
+        src={src}
+        alt={alt}
+        sx={{
+          height: `${fontSize - 4}px`,
+          marginRight: "4px",
+          transform: `scale(1.4)`,
+          position: "relative",
+          marginLeft: "2px",
+        }}
+      />
+    );
+  }
+}
+
+// Token Label Component
+interface TokenLabelProps {
+  label: string;
+  color?: string;
+  fontSize: number;
+}
+
+function TokenLabel({ label, color, fontSize }: TokenLabelProps) {
+  return (
+    <Box
+      component="strong"
+      sx={{
+        color,
+        fontSize: `${fontSize}px`,
+        lineHeight: 1,
+      }}
+    >
+      {label}
+    </Box>
+  );
+}
+
+// Token Component
+interface TokenProps {
+  name: string;
+  definition?: TokenDefinition;
+  fontSize: number;
+}
+
+function Token({ name, definition, fontSize }: TokenProps) {
+  if (!definition) {
+    return <>{`:${name}:`}</>;
+  }
+
+  const backgroundColor = definition.color ? calculateBackgroundColor(definition.color) : undefined;
+
+  return (
+    <Box
+      component="span"
+      sx={{
+        display: "inline-flex",
+        alignItems: "center",
+        whiteSpace: "nowrap",
+        verticalAlign: "baseline",
+        backgroundColor,
+        padding: backgroundColor ? "1px 2px" : 0,
+        margin: backgroundColor ? "-1px 0" : 0,
+        borderRadius: "4px",
+      }}
+    >
+      {definition.image && (
+        <TokenImage src={definition.image} alt={name} fontSize={fontSize} hasLabel={!!definition.label} />
+      )}
+      {definition.label && <TokenLabel label={definition.label} color={definition.color} fontSize={fontSize} />}
+    </Box>
+  );
+}
+
+// Parser function
+function parseMessageTokens(message: string, tokenMap: Record<string, TokenDefinition>): ParsedElement[] {
+  const elements: ParsedElement[] = [];
+  const tokenRegex = /:([a-zA-Z0-9_-]+):/g;
+  let lastIndex = 0;
+  let match;
+
+  while ((match = tokenRegex.exec(message)) !== null) {
+    const tokenName = match[1];
+
+    // Add text before the token
+    if (match.index > lastIndex) {
+      elements.push({
+        type: "text",
+        content: message.substring(lastIndex, match.index),
+        key: `text-${lastIndex}`,
+      });
+    }
+
+    // Add the token
+    elements.push({
+      type: "token",
+      name: tokenName,
+      definition: tokenMap[tokenName],
+      key: `token-${match.index}`,
+    });
+
+    lastIndex = match.index + match[0].length;
+  }
+
+  // Add remaining text after last token
+  if (lastIndex < message.length) {
+    elements.push({
+      type: "text",
+      content: message.substring(lastIndex),
+      key: `text-${lastIndex}`,
+    });
+  }
+
+  return elements;
+}
+
+// Main Component
+export function TokenizedMessage({ message, fontSize, tokenMap = {} }: TokenizedMessageProps) {
+  const elements = parseMessageTokens(message, tokenMap);
+
+  return (
+    <Box
+      sx={{
+        fontSize: `${fontSize}px`,
+        lineHeight: `${fontSize * 1.1}px`,
+      }}
+    >
+      {elements.map((element) =>
+        element.type === "token" ? (
+          <Token key={element.key} name={element.name} definition={element.definition} fontSize={fontSize} />
+        ) : (
+          <React.Fragment key={element.key}>{element.content}</React.Fragment>
+        ),
+      )}
+    </Box>
+  );
+}

package/src/library/components/TopBar.tsx

@@ -0,0 +1,90 @@
+import React, { ReactNode, useState } from "react";
+import { Box, IconButton, Stack } from "@mui/material";
+import { useGameTheme } from "../hooks/useGameTheme";
+import TopBarDropdown from "./TopBarDropdown";
+import BottomBarBreak from "./BottomBarBreak";
+import TopBarPlayers from "./TopBarPlayers";
+import { useTimeController } from "../hooks/useTimeController";
+import { useChit } from "../hooks/useChits";
+import { RootChit } from "../game/RootChit";
+import { DropdownChit } from "../game/DropdownChit";
+import { ArrowBack } from "@material-ui/icons";
+import { ZINDEX_TOP_BAR_HEADER } from "../utilities/zIndex";
+import { usePlayerId } from "../hooks/usePlayer";
+
+function BaseTopBar({ children }: { children: ReactNode | ReactNode[] }) {
+  const theme = useGameTheme();
+  return (
+    <Box
+      sx={{
+        position: "relative",
+        background: theme.barColor,
+        height: theme.topBarHeight,
+      }}
+    >
+      {children}
+    </Box>
+  );
+}
+
+function DropdownChitWrapper({ chitId }: { chitId: string | undefined }) {
+  const chit = useChit<DropdownChit>(chitId ?? "");
+  const playerId = usePlayerId();
+
+  if (!chitId) {
+    return null;
+  }
+
+  if (chit) {
+    return <TopBarDropdown label={chit.renderLabel(playerId)}>{chit.renderBody(playerId)}</TopBarDropdown>;
+  }
+  return null;
+}
+
+export default function TopBar({ onBack }: { onBack?: () => void }) {
+  const theme = useGameTheme();
+  const rootChit = useChit<RootChit<any>>("root");
+  const dropdowns = rootChit?.getDropdowns() ?? [];
+
+  const barWidth = `${(1 / (dropdowns.length + 1)) * 100}%`;
+  const BUTTON_WIDTH = theme.topBarHeight - theme.spacing * 2;
+
+  return (
+    <BaseTopBar>
+      <Stack direction="row" sx={{ width: "100%", height: "100%" }}>
+        {onBack && (
+          <Box
+            sx={{
+              height: "100%",
+              width: BUTTON_WIDTH,
+              position: "relative",
+              background: theme.barColor,
+              zIndex: ZINDEX_TOP_BAR_HEADER,
+            }}
+          >
+            <IconButton
+              sx={{
+                width: BUTTON_WIDTH,
+                color: theme.barTextColor,
+                height: "100%",
+              }}
+              onClick={onBack}
+            >
+              <ArrowBack />
+            </IconButton>
+          </Box>
+        )}
+        <Stack direction="row" flex={1} sx={{ width: `calc(100% - ${BUTTON_WIDTH}px)` }}>
+          <Box sx={{ width: barWidth }}>
+            <TopBarPlayers />
+          </Box>
+          {dropdowns.map((dropdown) => (
+            <Box key={dropdown.id} sx={{ width: barWidth, borderLeft: `1px solid ${theme.barBreak}` }}>
+              <DropdownChitWrapper chitId={dropdown.id} />
+            </Box>
+          ))}
+        </Stack>
+      </Stack>
+    </BaseTopBar>
+  );
+}

package/src/library/components/TopBarDropdown.tsx

@@ -0,0 +1,94 @@
+import React, { ReactNode, useEffect, useState } from "react";
+import { useGameTheme } from "../hooks/useGameTheme";
+import { Box, useTheme } from "@mui/material";
+import { ChevronRight } from "@material-ui/icons";
+import { ZINDEX_TOP_BAR_BODY, ZINDEX_TOP_BAR_HEADER } from "../utilities/zIndex";
+
+export default function TopBarDropdown({
+  label,
+  children,
+}: {
+  label: string | ReactNode;
+  children: ReactNode | ReactNode[];
+}) {
+  const [open, setOpen] = useState(false);
+  const theme = useGameTheme();
+  const muiTheme = useTheme();
+
+  useEffect(() => {
+    if (open) {
+      const cb = () => {
+        setOpen(false);
+      };
+      let hasCleared = false;
+      setTimeout(() => {
+        if (!hasCleared) {
+          document.addEventListener("click", cb);
+        }
+      }, 50);
+      return () => {
+        hasCleared = true;
+        document.removeEventListener("click", cb);
+      };
+    }
+  }, [open]);
+
+  return (
+    <Box sx={{ fontFamily: muiTheme.typography.fontFamily }} flex={1}>
+      <Box
+        onClick={() => setOpen(!open)}
+        sx={{
+          userSelect: "none",
+          cursor: "pointer",
+          pl: 2,
+          pr: 4,
+          position: "relative",
+          fontSize: 14,
+          height: "100%",
+          color: theme.barTextColor,
+          background: theme.barColor,
+          zIndex: ZINDEX_TOP_BAR_HEADER,
+          lineHeight: `${theme.topBarHeight}px`,
+          overflow: "hidden",
+          textOverflow: "ellipsis",
+          whiteSpace: "nowrap",
+        }}
+      >
+        {label}
+        <ChevronRight
+          style={{
+            position: "absolute",
+            right: 10,
+            top: "calc(50% - 14px)",
+            fontSize: "25px",
+            transform: open ? "rotate(-90deg)" : "rotate(90deg)",
+            transition: "transform linear 0.15s",
+          }}
+        />
+      </Box>
+
+      <Box
+        sx={{
+          position: "absolute",
+          top: "100%",
+          transform: open ? "translateY(0)" : `translateY(calc(-100% - ${theme.topBarHeight}px - 30px))`,
+          transition: "transform ease-in-out 0.15s",
+          color: theme.barTextColor,
+          left: 0,
+          right: 0,
+          background: theme.barTopDropdownColor,
+          zIndex: ZINDEX_TOP_BAR_BODY,
+          boxShadow: `3px 3px 30px ${theme.topBarDropShadowColor}`,
+          borderBottomRightRadius: 10,
+          borderBottomLeftRadius: 10,
+          maxHeight: `calc(60vh - ${theme.topBarHeight}px - 10px)`,
+          overflow: "auto",
+          fontSize: 14,
+          p: 1,
+        }}
+      >
+        {children}
+      </Box>
+    </Box>
+  );
+}

package/src/library/components/TopBarPlayers.tsx

@@ -0,0 +1,163 @@
+import React from "react";
+import { Box, Stack, Typography } from "@mui/material";
+import TopBarDropdown from "./TopBarDropdown";
+import PlayerImage from "./PlayerImage";
+import { useGameTheme } from "../hooks/useGameTheme";
+import { useChit, useChits } from "../hooks/useChits";
+import { PlayerChit } from "../game/PlayerChit";
+import { PlayerPromptStatusChit } from "../game/PlayerPromptStatusChit";
+import { SparkChit } from "../game/SparkChit";
+import { UpdatingCanvasImage } from "./UpdatingCanvasImage";
+import { StaticImage } from "../utilities/StaticImage";
+import { RootChit } from "../game/RootChit";
+import { usePlayerId } from "../hooks/usePlayer";
+import { IUpdatingCanvas } from "../utilities/IUpdatingCanvas";
+import { ImageSpec } from "../utilities/CanvasStack/CanvasOperations";
+
+function PlayerInfoCell({ spark, size }: { size: number; spark: SparkChit }) {
+  const theme = useGameTheme();
+  return (
+    <Box sx={{ width: `${spark.width}px`, pl: 1, pr: 1, borderRight: `1px solid ${theme.barTopLineColor}` }}>
+      <Typography
+        sx={{ fontSize: 14, textOverflow: "ellipsis", overflow: "hidden", textAlign: "right", lineHeight: `${size}px` }}
+      >
+        {spark.value}
+      </Typography>
+    </Box>
+  );
+}
+
+function TextPlayerInfoCell({ text, size, width }: { size: number; text: string; width: number }) {
+  const theme = useGameTheme();
+  return (
+    <Box sx={{ width: `${width}px`, pl: 1, pr: 1, borderRight: `1px solid ${theme.barTopLineColor}` }}>
+      <Typography
+        sx={{
+          fontSize: 14,
+          textOverflow: "ellipsis",
+          overflow: "hidden",
+          whiteSpace: "nowrap",
+          textAlign: "left",
+          lineHeight: `${size}px`,
+        }}
+      >
+        {text}
+      </Typography>
+    </Box>
+  );
+}
+
+function HeaderCell({ spark }: { spark: SparkChit }) {
+  const theme = useGameTheme();
+  if (!spark.headerIcon || spark.headerIcon instanceof PlayerChit) {
+    return <Box sx={{ width: `${spark.width}px`, pl: 1, pr: 1 }} />;
+  }
+
+  const im = spark.headerIcon as IUpdatingCanvas;
+
+  return (
+    <Box sx={{ width: `${spark.width}px`, pl: 1, pr: 1 }}>
+      <UpdatingCanvasImage image={im} style={{ width: `${spark.width - theme.spacing * 2}px` }} />
+    </Box>
+  );
+}
+
+function PlayerInfoRow({ headers, player }: { player: PlayerChit; headers?: boolean }) {
+  const theme = useGameTheme();
+
+  const sparks = useChits<SparkChit>(player.getSparks("dropdown").map((d) => d.id ?? ""));
+
+  const LINE_HEIGHT_RATIO = 0.6;
+  const IMAGE_SIZE_RATIO = 0.75;
+  const size = theme.topBarHeight * LINE_HEIGHT_RATIO;
+  const NAME_WIDTH = 150;
+  const PROMPT_WIDTH = 300;
+  const width =
+    NAME_WIDTH + PROMPT_WIDTH + size + theme.spacing + sparks.reduce((total, spark) => total + spark.width, 0);
+
+  if (headers) {
+    return (
+      <Stack direction="row" sx={{ pl: 1, pr: 0, width }}>
+        {/* Player icon */}
+        <Box sx={{ width: size }} />
+        {sparks.map((spark) => (
+          <HeaderCell key={spark.id} spark={spark} />
+        ))}
+      </Stack>
+    );
+  }
+
+  return (
+    <Stack
+      direction="row"
+      sx={{
+        pl: 1,
+        pr: 0,
+        width,
+      }}
+    >
+      <PlayerImage
+        player={player}
+        size={size * 0.75}
+        sx={{
+          boxShadow: `0 0 ${theme.spacing / 2}px ${theme.spacing / 2}px ${theme.barTopDropdownColor}`,
+          mr: 1,
+          mt: `${size * ((1 - IMAGE_SIZE_RATIO) / 2)}px`,
+          left: 0,
+          position: "sticky",
+        }}
+      />
+      {sparks.map((spark) => (
+        <PlayerInfoCell size={size} key={spark.id} spark={spark} />
+      ))}
+      <TextPlayerInfoCell size={size} width={NAME_WIDTH} text={player.name} />
+      <TextPlayerInfoCell size={size} width={PROMPT_WIDTH} text={player.promptStatus.latestPromptMessage ?? ""} />
+    </Stack>
+  );
+}
+
+export default function TopBarPlayers() {
+  const theme = useGameTheme();
+  const root = useChit<RootChit<PlayerChit>>("root");
+  const playerChits = useChits<PlayerChit>(root?.players.map((p) => p.id ?? "") ?? []);
+
+  useChits<PlayerPromptStatusChit>(playerChits.map((p) => p.promptStatus.id ?? "")); // necessary for side effects so this recomputes when the status or prompt changes
+
+  return (
+    <TopBarDropdown
+      label={
+        <Stack direction={"row"} sx={{ pt: 1, pb: 1, maxWidth: "100%" }}>
+          {playerChits.map((player) => (
+            <PlayerImage
+              sx={{ ml: -1 }}
+              borderColor={player.promptStatus.latestPromptMessage ? theme.chitHighlightColor : undefined}
+              size={theme.topBarHeight - theme.spacing * 2}
+              key={player.id}
+              player={player}
+            />
+          ))}
+          <Typography
+            flex={1}
+            sx={{
+              p: 1,
+              lineHeight: `${theme.topBarHeight - theme.spacing * 4}px`,
+              fontSize: 14,
+              whiteSpace: "nowrap",
+              textOverflow: "ellipsis",
+              overflow: "hidden",
+            }}
+          >
+            Players
+          </Typography>
+        </Stack>
+      }
+    >
+      <Box sx={{ pt: 0.5, pb: 0.5 }}>
+        {playerChits.length && <PlayerInfoRow headers player={playerChits[0]} />}
+        {playerChits.map((p) => (
+          <PlayerInfoRow key={p.id} player={p} />
+        ))}
+      </Box>
+    </TopBarDropdown>
+  );
+}

package/src/library/components/UpdatingCanvasImage.tsx

@@ -0,0 +1,25 @@
+import React from "react";
+import { useEffect, useRef } from "react";
+import { IUpdatingCanvas } from "../utilities/IUpdatingCanvas";
+
+export function UpdatingCanvasImage({ image, style }: { image: IUpdatingCanvas; style?: React.CSSProperties }) {
+  const canvasRef = useRef<HTMLCanvasElement>(null);
+
+  useEffect(() => {
+    if (image) {
+      const update = () => {
+        if (canvasRef.current && image.canvas) {
+          const context = canvasRef.current.getContext("2d");
+          if (context) {
+            context.clearRect(0, 0, image.width, image.height);
+            context.drawImage(image.canvas, 0, 0);
+          }
+        }
+      };
+      update();
+      return image.onUpdate(update);
+    }
+  }, [image, canvasRef.current]);
+
+  return <canvas style={style} ref={canvasRef} width={image.width} height={image.height} />;
+}

package/src/library/components/UpdatingCanvasViewer.tsx

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from "react";
+import { Box } from "@mui/material";
+
+import { IUpdatingCanvas } from "../utilities/IUpdatingCanvas";
+
+export type Size = "actual" | "fill" | "small" | "large" | "tile" | "small_tile";
+
+export default function UpdatingCanvasViewer({
+  updatingCanvas,
+  size,
+}: {
+  size: Size;
+  updatingCanvas: IUpdatingCanvas;
+}) {
+  const [dataUrl, setDataUrl] = useState("");
+
+  let backgroundSize = undefined;
+  let repeat: string | undefined = "no-repeat";
+  let pixelate = false;
+  let scale: number | undefined = undefined;
+  let translate: number | undefined = undefined;
+  if (size === "fill") {
+    backgroundSize = "contain";
+  } else if (size === "small") {
+    scale = 0.25;
+  } else if (size === "large") {
+    scale = 2;
+    translate = 50;
+    pixelate = true;
+  } else if (size === "tile") {
+    repeat = undefined;
+  } else if (size === "small_tile") {
+    repeat = undefined;
+    backgroundSize = "50px";
+  }
+
+  useEffect(() => {
+    setDataUrl(updatingCanvas.canvas!.toDataURL("image/png", 1));
+    return updatingCanvas.onUpdate(() => {
+      setDataUrl(updatingCanvas.canvas!.toDataURL("image/png", 1));
+    });
+  }, [updatingCanvas.canvas, updatingCanvas]);
+
+  // TODO: listen for updates!
+  return (
+    <Box
+      style={{
+        top: 0,
+        left: 0,
+        position: "absolute",
+        width: `${Math.min(100, 100 / (scale ?? 1))}%`,
+        height: `${Math.min(100, 100 / (scale ?? 1))}%`,
+        imageRendering: pixelate ? "pixelated" : undefined,
+        backgroundImage: `url(${dataUrl})`,
+        backgroundRepeat: repeat,
+        backgroundSize: backgroundSize,
+        backgroundPosition: "center",
+        transform: scale ? `translate(${translate ?? 0}%,${translate ?? 0}%) scale(${scale})` : undefined,
+      }}
+    />
+  );
+}