@pretty-chitty/core 1.1.1

package/src/library/components/SettingsDisplay.tsx

@@ -0,0 +1,142 @@
+import React, { useEffect, useMemo, useState } from "react";
+import { Box, Stack, Slider, Typography, Button, Checkbox, FormControlLabel } from "@mui/material";
+import { GameModalDialog } from "./GameModalDialog";
+import { useModalState } from "../hooks/useModalState";
+import { useEventChannelState } from "../hooks/useEventChannelState";
+import { useGameTheme } from "../hooks/useGameTheme";
+import { useTimeState } from "../hooks/useTimeController";
+import { usePanelScale, usePanelSetScale } from "../hooks/usePanelScale";
+
+interface SettingSliderProps {
+  label: string;
+  value: number;
+  onChange: (value: number) => void;
+  min: number;
+  max: number;
+}
+
+function SettingSlider({ label, value, onChange, min, max }: SettingSliderProps) {
+  const theme = useGameTheme();
+
+  return (
+    <Box>
+      <Stack direction="row" spacing={2} alignItems="center" sx={{ mb: 1 }}>
+        <Typography sx={{ color: theme.actionLogTextColor, fontWeight: "bold", minWidth: 120 }}>{label}</Typography>
+        <Typography sx={{ color: theme.actionLogTextColor, minWidth: 40, textAlign: "right" }}>
+          {value.toFixed(2)}
+        </Typography>
+        <Button
+          variant="outlined"
+          size="small"
+          onClick={() => onChange(1)}
+          sx={{
+            color: theme.actionLogTextColor,
+            borderColor: theme.actionLogTextColor,
+            "&:hover": {
+              borderColor: theme.actionLogTextColor,
+              backgroundColor: "rgba(255,255,255,0.1)",
+            },
+          }}
+        >
+          Reset
+        </Button>
+      </Stack>
+      <Slider
+        value={value}
+        onChange={(_, value) => onChange(value as number)}
+        min={min}
+        max={max}
+        step={0.01}
+        sx={{
+          color: theme.actionLogTextColor,
+          "& .MuiSlider-thumb": {
+            backgroundColor: theme.actionLogTextColor,
+          },
+          "& .MuiSlider-track": {
+            backgroundColor: theme.actionLogTextColor,
+          },
+          "& .MuiSlider-rail": {
+            backgroundColor: "rgba(255,255,255,0.3)",
+          },
+        }}
+      />
+    </Box>
+  );
+}
+
+export function SettingsDisplay() {
+  const modalState = useModalState();
+  const theme = useGameTheme();
+
+  const scale = usePanelScale();
+  const setScale = usePanelSetScale();
+
+  const [adjustingScale, setAdjustingScale] = useState(false);
+
+  useEffect(() => {
+    setAdjustingScale(true);
+    const to = setTimeout(() => {
+      setAdjustingScale(false);
+    }, 2000);
+    return () => clearTimeout(to);
+  }, [scale]);
+
+  const timeState = useTimeState();
+  const [speed, setSpeed] = useEventChannelState(timeState.animationSpeedMultiplier);
+  const [skipReplay, setSkipReplay] = useEventChannelState(timeState.skipReplay);
+  const [showLog, setShowLog] = useEventChannelState(timeState.showLog);
+
+  const [visible, setVisible] = useEventChannelState(modalState.settingsVisible);
+
+  return (
+    <GameModalDialog
+      visible={visible}
+      opacity={adjustingScale ? 0.3 : 1}
+      onClose={() => setVisible(false)}
+      title="Settings"
+    >
+      <Box sx={{ p: 3, overflowY: "auto" }}>
+        <Stack spacing={4}>
+          <SettingSlider label="Scale" value={scale} onChange={setScale} min={0.5} max={3} />
+          <SettingSlider
+            label="Animation Speed"
+            value={1 / speed}
+            onChange={(value) => setSpeed(1 / value)}
+            min={0.25}
+            max={8}
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={skipReplay}
+                onChange={(e) => setSkipReplay(e.target.checked)}
+                sx={{
+                  color: theme.actionLogTextColor,
+                  "&.Mui-checked": {
+                    color: theme.actionLogTextColor,
+                  },
+                }}
+              />
+            }
+            label={<Typography sx={{ color: theme.actionLogTextColor }}>Skip Replay</Typography>}
+          />
+          <FormControlLabel
+            control={
+              <Checkbox
+                checked={showLog}
+                onChange={(e) => setShowLog(e.target.checked)}
+                sx={{
+                  color: theme.actionLogTextColor,
+                  "&.Mui-checked": {
+                    color: theme.actionLogTextColor,
+                  },
+                }}
+              />
+            }
+            label={<Typography sx={{ color: theme.actionLogTextColor }}>Show Log (on larger screens)</Typography>}
+          />
+        </Stack>
+      </Box>
+    </GameModalDialog>
+  );
+}

package/src/library/components/SparkLineChart.tsx

@@ -0,0 +1,307 @@
+import React, { useMemo } from "react";
+import { Box, Typography } from "@mui/material";
+import { SparkChit } from "../game/SparkChit";
+import { PlayerChit } from "../game/PlayerChit";
+
+interface ChartDataPoint {
+  clock: number;
+  value: number;
+}
+
+interface ChartLine {
+  id: string;
+  color: string;
+  points: ChartDataPoint[];
+  finalValue: number;
+  icon?: string;
+}
+
+interface SparkLineChartProps {
+  label: string;
+  playerData: {
+    [playerId: string]: { player: PlayerChit; history: { clock: number; chit: SparkChit }[] };
+  };
+  maxClock: number;
+  backgroundColor?: string;
+  height?: number;
+  width?: number;
+}
+
+// Helper function to calculate color contrast
+function getColorLuminance(color: string): number {
+  // Convert hex to RGB
+  const hex = color.replace("#", "");
+  const r = parseInt(hex.substr(0, 2), 16) / 255;
+  const g = parseInt(hex.substr(2, 2), 16) / 255;
+  const b = parseInt(hex.substr(4, 2), 16) / 255;
+
+  // Calculate relative luminance
+  const [rs, gs, bs] = [r, g, b].map((c) => {
+    return c <= 0.03928 ? c / 12.92 : Math.pow((c + 0.055) / 1.055, 2.4);
+  });
+
+  return 0.2126 * rs + 0.7152 * gs + 0.0722 * bs;
+}
+
+// Check if two colors have enough contrast
+function hasGoodContrast(color1: string, color2: string): boolean {
+  const lum1 = getColorLuminance(color1);
+  const lum2 = getColorLuminance(color2);
+  const ratio = (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
+  return ratio >= 3; // WCAG AA for large text
+}
+
+// Get appropriate stroke color for contrast
+function getStrokeColor(lineColor: string, backgroundColor: string): string {
+  const lineLum = getColorLuminance(lineColor);
+  return lineLum > 0.5 ? "#000000" : "#ffffff";
+}
+
+export function SparkLineChart({
+  label,
+  playerData,
+  maxClock: externalMaxClock,
+  backgroundColor = "#ffffff",
+  height = 300,
+  width: containerWidth = 520,
+}: SparkLineChartProps) {
+  const chartData = useMemo(() => {
+    const lines: ChartLine[] = [];
+    let minValue = Infinity;
+    let maxValue = -Infinity;
+
+    // Process each player's data
+    Object.entries(playerData).forEach(([playerId, { player, history }]) => {
+      if (!history || history.length === 0) return;
+
+      const points: ChartDataPoint[] = history.map((entry) => {
+        const sparkChit = entry.chit as SparkChit;
+        const value = sparkChit.value ?? 0;
+
+        minValue = Math.min(minValue, value);
+        maxValue = Math.max(maxValue, value);
+
+        return {
+          clock: entry.clock ?? 0,
+          value,
+        };
+      });
+
+      const lastEntry = history[history.length - 1];
+      const sparkChit = lastEntry.chit as SparkChit;
+
+      lines.push({
+        id: playerId,
+        color: player.color,
+        points,
+        finalValue: sparkChit.value ?? 0,
+        icon: player.imageUrl,
+      });
+    });
+
+    // Handle case where there are no valid data points
+    if (minValue === Infinity || maxValue === -Infinity) {
+      minValue = 0;
+      maxValue = 1;
+    }
+
+    return { lines, minValue, maxValue };
+  }, [playerData]);
+
+  const { lines, minValue, maxValue } = chartData;
+  const maxClock = externalMaxClock || 1;
+
+  const labelAreaWidth = 80; // Space for labels, icons, and numbers on the right
+  const chartWidth = containerWidth;
+  const svgWidth = chartWidth + labelAreaWidth;
+  const chartHeight = height;
+
+  // Add some padding to the value range
+  const valueRange = maxValue - minValue || 1;
+  const valuePadding = valueRange * 0.1;
+  const chartMinValue = minValue - valuePadding;
+  const chartMaxValue = maxValue + valuePadding;
+  const chartValueRange = chartMaxValue - chartMinValue;
+
+  // Calculate adjusted label positions to avoid overlaps
+  const labelHeight = 24;
+  const minLabelSpacing = 4;
+  const iconSize = 20;
+
+  const labelPositions = useMemo(() => {
+    if (lines.length === 0) return {};
+
+    const positions: { lineId: string; y: number; originalY: number }[] = lines.map((line) => {
+      const lastPoint = line.points[line.points.length - 1];
+      const y = chartHeight - ((lastPoint.value - chartMinValue) / chartValueRange) * chartHeight;
+      return { lineId: line.id, y, originalY: y };
+    });
+
+    // Sort by Y position
+    positions.sort((a, b) => a.y - b.y);
+
+    // Adjust positions to avoid overlaps
+    for (let i = 1; i < positions.length; i++) {
+      const prev = positions[i - 1];
+      const current = positions[i];
+      const minY = prev.y + labelHeight + minLabelSpacing;
+
+      if (current.y < minY) {
+        current.y = minY;
+      }
+    }
+
+    // Convert back to a map for easy lookup
+    const positionMap: { [id: string]: number } = {};
+    positions.forEach((pos) => {
+      positionMap[pos.lineId] = pos.y;
+    });
+
+    return positionMap;
+  }, [lines, chartMinValue, chartValueRange, chartHeight, labelHeight, minLabelSpacing]);
+
+  if (lines.length === 0) {
+    return null;
+  }
+
+  // Convert data coordinates to SVG coordinates
+  const getX = (clock: number) => (clock / maxClock) * chartWidth;
+  const getY = (value: number) => chartHeight - ((value - chartMinValue) / chartValueRange) * chartHeight;
+  const chartEndX = chartWidth;
+
+  return (
+    <Box sx={{ display: "flex", flexDirection: "column", alignItems: "center", my: 4 }}>
+      <Typography variant="h6" sx={{ mb: 2 }}>
+        {label}
+      </Typography>
+      <svg
+        width="100%"
+        height="auto"
+        viewBox={`0 0 ${svgWidth} ${height}`}
+        preserveAspectRatio="preserve"
+        style={{ overflow: "visible", maxWidth: "100%" }}
+      >
+        {/* Grid lines */}
+        <g opacity={0.1}>
+          {[0, 0.25, 0.5, 0.75, 1].map((ratio) => {
+            const y = chartHeight * (1 - ratio);
+            return (
+              <line key={`grid-${ratio}`} x1={0} y1={y} x2={chartEndX} y2={y} stroke="currentColor" strokeWidth={1} />
+            );
+          })}
+        </g>
+
+        {/* Draw each line */}
+        {lines.map((line) => {
+          // Create path for the line
+          const pathData = line.points
+            .map((point, index) => {
+              const x = getX(point.clock);
+              const y = getY(point.value);
+              return `${index === 0 ? "M" : "L"} ${x} ${y}`;
+            })
+            .join(" ");
+
+          // Extend line to the end of the chart
+          const lastPoint = line.points[line.points.length - 1];
+          const lastY = getY(lastPoint.value);
+          const extendedPathData = `${pathData} L ${chartEndX} ${lastY}`;
+
+          // Check contrast and add stroke if needed
+          const needsStroke = !hasGoodContrast(line.color, backgroundColor);
+          const strokeColor = needsStroke ? getStrokeColor(line.color, backgroundColor) : undefined;
+
+          const adjustedLabelY = labelPositions[line.id];
+
+          return (
+            <g key={line.id}>
+              {/* Line with optional stroke for contrast */}
+              {needsStroke && (
+                <path
+                  d={extendedPathData}
+                  fill="none"
+                  stroke={strokeColor}
+                  strokeWidth={4.5}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                  opacity={0.8}
+                />
+              )}
+              <path
+                d={extendedPathData}
+                fill="none"
+                stroke={line.color}
+                strokeWidth={2.5}
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+
+              {/* Connector line from end point to label if position was adjusted */}
+              {Math.abs(adjustedLabelY - lastY) > 2 && (
+                <line
+                  x1={chartEndX}
+                  y1={lastY}
+                  x2={chartEndX + 8}
+                  y2={adjustedLabelY}
+                  stroke={line.color}
+                  strokeWidth={1}
+                  strokeDasharray="2,2"
+                  opacity={0.5}
+                />
+              )}
+
+              {/* Icon at the end if available */}
+              {line.icon && (
+                <g transform={`translate(${chartEndX + 10}, ${adjustedLabelY - iconSize / 2})`}>
+                  <foreignObject width={iconSize} height={iconSize}>
+                    <img
+                      src={line.icon}
+                      style={{
+                        width: iconSize,
+                        height: iconSize,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                      }}
+                    />
+                  </foreignObject>
+                </g>
+              )}
+
+              {/* Final value label at the adjusted position */}
+              <g transform={`translate(${chartEndX + (line.icon ? 30 : 10)}, ${adjustedLabelY})`}>
+                {needsStroke && (
+                  <text
+                    fontSize={20}
+                    fontWeight="bold"
+                    dominantBaseline="middle"
+                    fill={strokeColor}
+                    stroke={strokeColor}
+                    strokeWidth={3}
+                  >
+                    {line.finalValue}
+                  </text>
+                )}
+                <text fill={line.color} fontSize={20} fontWeight="bold" dominantBaseline="middle">
+                  {line.finalValue}
+                </text>
+              </g>
+
+              {/* End point marker */}
+              {needsStroke && <circle cx={chartEndX} cy={lastY} r={5} fill={strokeColor} opacity={0.8} />}
+              <circle cx={chartEndX} cy={lastY} r={3} fill={line.color} />
+            </g>
+          );
+        })}
+
+        {/* Axes */}
+        <g opacity={0.3}>
+          {/* Y axis */}
+          <line x1={0} y1={0} x2={0} y2={chartHeight} stroke="currentColor" strokeWidth={1} />
+          {/* X axis */}
+          <line x1={0} y1={chartHeight} x2={chartEndX} y2={chartHeight} stroke="currentColor" strokeWidth={1} />
+        </g>
+      </svg>
+    </Box>
+  );
+}

package/src/library/components/StageAndEditor.tsx

@@ -0,0 +1,28 @@
+import React from "react";
+import { Grid, Paper, Box } from "@mui/material";
+import base64 from "base-64";
+
+const CheckerImg = `data:image/svg+xml;base64,${base64.encode(
+  `<?xml version="1.0" encoding="UTF-8"?>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16">
+    <path d="M0 0h8v16h8V8H0z" opacity=".07"/>
+  </svg>
+  `,
+)}`;
+
+export default function StageAndEditor({ children, editor }: { children: any; editor: any }) {
+  return (
+    <Grid container sx={{ width: "100%", height: "100%" }}>
+      <Grid item xs={9} style={{ height: "100%" }}>
+        <Box sx={{ p: 3, height: "100%", position: "relative", background: `url(${CheckerImg})` }}>{children}</Box>
+      </Grid>
+      <Grid item xs={3} style={{ height: "100%", position: "relative" }}>
+        <Box sx={{ position: "absolute", top: 0, right: 0, bottom: 0, left: 0, overflow: "scroll" }}>
+          <Paper elevation={2} square style={{ background: "#f9f9f9" }}>
+            <Box sx={{ p: 3 }}>{editor}</Box>
+          </Paper>
+        </Box>
+      </Grid>
+    </Grid>
+  );
+}

package/src/library/components/TimeControlBar.tsx

@@ -0,0 +1,71 @@
+import React from "react";
+import { Box, Stack } from "@mui/material";
+import { FastForward, FastRewind, SettingsOutlined } from "@mui/icons-material";
+import { useTimeController, useTimeState } from "../hooks/useTimeController";
+import { useEventChannelState } from "../hooks/useEventChannelState";
+import BottomBarButton from "./BottomBarButton";
+import { useGameTheme } from "../hooks/useGameTheme";
+import LiveButton from "./LiveButton";
+import { useModalState } from "../hooks/useModalState";
+
+export default function TimeControlBar({ autoLive = false }: { autoLive?: boolean; includeGridButton?: boolean }) {
+  const theme = useGameTheme();
+  const timeController = useTimeController();
+  const timeState = useTimeState();
+  const [live, setLive] = useEventChannelState(timeState.live);
+  const [targetClock, setTargetClock] = useEventChannelState(timeState.targetClock);
+  const [maxClock] = useEventChannelState(timeController.maxClock);
+  const modalState = useModalState();
+  const [settingsVisible, setSettingsVisible] = useEventChannelState(modalState.settingsVisible);
+
+  return (
+    <Box sx={{ width: "100%", height: "100%", position: "relative" }}>
+      <Box sx={{ height: "6px", position: "absolute", width: "100%" }}>
+        {targetClock < maxClock.clock && !live && (
+          <Box
+            sx={{
+              width: `${(targetClock / maxClock.clock) * 100}%`,
+              background: theme.barHighlightTextColor,
+              transition: "width linear 0.25s",
+              height: "6px",
+            }}
+          />
+        )}
+      </Box>
+
+      <Stack direction="row" sx={{ width: "100%", height: "100%", pl: 1, pr: 1 }}>
+        <BottomBarButton
+          icon={SettingsOutlined}
+          label={"Menu"}
+          onClick={() => setSettingsVisible(!settingsVisible)}
+          highlight={settingsVisible}
+        />
+        <Box flex={1} />
+        <BottomBarButton
+          icon={FastRewind}
+          label={"Back"}
+          whileHolding={(n: number) => {
+            setLive(false);
+            setTargetClock(targetClock - n);
+          }}
+        />
+        <BottomBarButton
+          disabled={targetClock >= maxClock.clock}
+          icon={FastForward}
+          label={"Forward"}
+          whileHolding={(n: number) => {
+            if (autoLive && targetClock + n >= maxClock.clock) {
+              setLive(true);
+              setTargetClock(targetClock + n);
+            } else {
+              setLive(false);
+              setTargetClock(targetClock + n);
+            }
+          }}
+        />
+        <Box flex={1} />
+        <LiveButton hideIfLive={false} />
+      </Stack>
+    </Box>
+  );
+}