casino-ui 0.1.0

package/src/components/chip-rack.tsx

@@ -0,0 +1,55 @@
+import { forwardRef } from "react";
+import { cn } from "../lib/utils";
+import Chip, { CHIP_DENOMINATIONS } from "./chip";
+
+const ROW_MARGINS = ["mt-[15px]", "mt-[10px]", "mt-[5px]", "mt-0"];
+const NUM_ROWS = 4;
+
+interface ChipRackProps {
+  className?: string;
+}
+
+export const ChipRack = forwardRef<HTMLDivElement, ChipRackProps>(
+  function ChipRack({ className }, ref) {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "relative bg-card-shoe-bg border-3 w-76 h-20 border-card-shoe-border rounded-lg shadow-[0px_2.392px_0px_0px_#333] pt-4 pb-2.5 px-1.5",
+          className,
+        )}
+      >
+        {/* Chip grid — all 4 rows overlap in same grid cell, margin increases for depth */}
+        <div className="inline-grid">
+          {Array.from({ length: NUM_ROWS }).map((_, rowIdx) => (
+            <div
+              key={rowIdx}
+              data-row={rowIdx}
+              className={cn("flex gap-2 [grid-area:1/1]", ROW_MARGINS[rowIdx])}
+            >
+              {CHIP_DENOMINATIONS.map((denom) => (
+                <div key={denom} data-denomination={denom}>
+                  <Chip
+                    denomination={denom}
+                    wrapperClass={`w-8.5 h-8.5 p-0`}
+                    chipClass={`w-full h-full`}
+                    showText={false}
+                  />
+                </div>
+              ))}
+            </div>
+          ))}
+        </div>
+
+        {/* Top bar overlay — semi-transparent lip of the tray */}
+        <div
+          className="absolute -top-[3px] left-[-3px] w-76 h-11 bg-card-shoe-bg/60 border-3 border-card-shoe-border rounded-lg z-10 backdrop-blur-[3px]"
+          style={{
+            backdropFilter: "blur(3px)",
+            WebkitBackdropFilter: "blur(3px)",
+          }}
+        />
+      </div>
+    );
+  },
+);

package/src/components/chip.tsx

@@ -0,0 +1,203 @@
+import { cn } from "../lib/utils";
+import { formatAmountDirect } from "../utils/format-amount";
+
+type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+
+interface IChipProps {
+  denomination?: number;
+  amount?: number;
+  wrapperClass?: ButtonProps["className"] | DivProps["className"];
+  chipClass?: DivProps["className"];
+  textClass?: React.HTMLAttributes<HTMLSpanElement>["className"];
+  onClick?: () => void;
+  showText?: boolean;
+  isButton?: boolean;
+  selected?: boolean;
+}
+
+const hoverEffect = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 48 49" fill="none">
+  <g filter="url(#filter0_d_6722_40653)">
+    <ellipse cx="24" cy="23" rx="22" ry="23" fill="#C7FE51" fill-opacity="0.4" shape-rendering="crispEdges"/>
+  </g>
+  <defs>
+    <filter id="filter0_d_6722_40653" x="0" y="0" width="48" height="50" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="1"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0.780392 0 0 0 0 0.996078 0 0 0 0 0.317647 0 0 0 0.6 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_6722_40653"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_6722_40653" result="shape"/>
+    </filter>
+  </defs>
+</svg>`;
+
+const selectedEffect = `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 46 48" fill="none">
+  <ellipse cx="23" cy="24" rx="23" ry="24" fill="#C7FE51"/>
+</svg>`;
+
+export const CHIP_PRESETS = {
+  1: { color: "#999999", shadowColor: "#474747" },
+  5: { color: "#DB375E", shadowColor: "#63171D" },
+  10: { color: "#037A4C", shadowColor: "#06503F" },
+  25: { color: "#F57FE0", shadowColor: "#951F9D" },
+  50: { color: "#623CEA", shadowColor: "#2D268B" },
+  100: { color: "#E3B800", shadowColor: "#816B0C" },
+  500: { color: "#9727B0", shadowColor: "#5B187D" },
+} as const;
+
+export type ChipDenomination = keyof typeof CHIP_PRESETS;
+
+export const CHIP_DENOMINATIONS = Object.keys(CHIP_PRESETS).map(
+  Number,
+) as ChipDenomination[];
+
+export function getChipDenominationForAmount(amount: number): ChipDenomination {
+  const absAmount = Math.abs(amount);
+  if (absAmount >= 500) return 500;
+  if (absAmount >= 100) return 100;
+  if (absAmount >= 50) return 50;
+  if (absAmount >= 25) return 25;
+  if (absAmount >= 10) return 10;
+  if (absAmount >= 5) return 5;
+  return 1;
+}
+
+function normalizeDenomination(denomination?: number): ChipDenomination {
+  if (
+    typeof denomination === "number" &&
+    CHIP_DENOMINATIONS.includes(denomination as ChipDenomination)
+  ) {
+    return denomination as ChipDenomination;
+  }
+  return 1;
+}
+
+const ChipBody = ({
+  denomination,
+  amount,
+  chipClass = "w-11 h-11",
+  textClass,
+  showText = true,
+  isButton = false,
+  selected = false,
+}: Omit<IChipProps, "wrapperClass" | "onClick">) => {
+  const resolvedDenomination =
+    typeof amount === "number"
+      ? getChipDenominationForAmount(amount)
+      : normalizeDenomination(denomination);
+  const chipText =
+    typeof amount === "number"
+      ? formatAmountDirect(Math.round(amount * 100) / 100)
+      : resolvedDenomination;
+  const resolvedTextClass =
+    typeof amount === "number"
+      ? "leading-none tracking-tighter text-[10px]"
+      : "leading-5.5 text-[10px] md:leading-7.5 md:text-[12.865px]";
+
+  return (
+    <>
+      <div
+        className={cn(
+          "relative rounded-[50%] aspect-square overflow-clip chip-body p-[4.566px] z-2",
+          chipClass,
+        )}
+        style={{
+          backgroundColor: CHIP_PRESETS[resolvedDenomination].color,
+          boxShadow: `0px 3px 0px 0px ${CHIP_PRESETS[resolvedDenomination].shadowColor}`,
+        }}
+      >
+        <div
+          className="relative z-1 w-full h-full rounded-[50%] flex items-center justify-center select-none"
+          style={{
+            backgroundColor: CHIP_PRESETS[resolvedDenomination].color,
+          }}
+        >
+          {showText && (
+            <span
+              data-slot="chip-text"
+              className={cn(
+                "font-semibold md:font-bold text-center text-white",
+                resolvedTextClass,
+                textClass,
+              )}
+            >
+              {chipText}
+            </span>
+          )}
+        </div>
+      </div>
+
+      {isButton && (
+        <>
+          {/* Hover effect */}
+          <div
+            className={cn(
+              "absolute inset-0 opacity-0 ease-in-out duration-300 w-9 h-9.5 md:w-11.5 md:h-12",
+              !selected && "group-hover:opacity-100",
+            )}
+            dangerouslySetInnerHTML={{ __html: hoverEffect }}
+          />
+          {/* Active/Selected effect */}
+          <div
+            className={cn(
+              "absolute top-0 left-1/2 -translate-x-1/2 ease-in-out duration-300 w-9 h-9.5 md:w-11.5 md:h-12",
+              selected ? "opacity-100" : "group-active:opacity-100 opacity-0",
+            )}
+            dangerouslySetInnerHTML={{ __html: selectedEffect }}
+          />
+        </>
+      )}
+    </>
+  );
+};
+
+const Chip = ({
+  denomination,
+  amount,
+  wrapperClass,
+  chipClass = "w-11 h-11",
+  textClass,
+  onClick,
+  showText = true,
+  isButton = false,
+  selected = false,
+}: IChipProps) => {
+  if (!isButton) {
+    return (
+      <div className={cn("relative px-0.5 pb-1 group", wrapperClass)}>
+        <ChipBody
+          denomination={denomination}
+          amount={amount}
+          chipClass={chipClass}
+          textClass={textClass}
+          showText={showText}
+          isButton={isButton}
+          selected={selected}
+        />
+      </div>
+    );
+  }
+
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className={cn("relative px-0.5 pb-1 group cursor-pointer", wrapperClass)}
+    >
+      <ChipBody
+        denomination={denomination}
+        amount={amount}
+        chipClass={chipClass}
+        textClass={textClass}
+        showText={showText}
+        isButton={isButton}
+        selected={selected}
+      />
+    </button>
+  );
+};
+
+export default Chip;

package/src/components/game-footer.tsx

@@ -0,0 +1,356 @@
+import { useState, useMemo, useCallback, useRef, useEffect } from "react";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuTrigger,
+} from "./ui/dropdown-menu";
+import { Icon } from "./icon";
+import GameInfoDialog from "./game-info-dialog";
+import SwitchTableDialog from "./switch-table-dialog";
+import { Button } from "./button";
+import { cn } from "../lib/utils";
+import type { CoinInfo } from "../types";
+
+interface GameFooterProps {
+  tableId: string;
+  shareBaseUrl: string | null;
+  badges: {
+    houseEdge: string;
+    minBet: string;
+    coinInfo?: CoinInfo;
+  };
+  tabsContents: {
+    table: React.ReactNode;
+    howToPlay: React.ReactNode;
+    balance: React.ReactNode;
+  };
+  volumeSlider: {
+    globalVolume: number;
+    setGlobalVolume: (volume: number) => void;
+    setPrevVolume: (volume: number) => void;
+  };
+  onToggleMute: () => void;
+  onJoin: (tableIdOrLink: string) => void;
+  isMobile?: boolean;
+  gameTitle?: string;
+  gameDescription?: string;
+  centerLogoUrl?: string;
+}
+
+interface VolumeSliderProps {
+  globalVolume: number;
+  setGlobalVolume: (volume: number) => void;
+  setPrevVolume: (volume: number) => void;
+  onToggleMute: () => void;
+}
+
+function VolumeSlider({
+  globalVolume,
+  setGlobalVolume,
+  setPrevVolume,
+  onToggleMute,
+}: VolumeSliderProps) {
+  const sliderRef = useRef<HTMLInputElement>(null);
+
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const val = parseFloat(e.target.value);
+      if (val > 0) setPrevVolume(val);
+      setGlobalVolume(val);
+    },
+    [setGlobalVolume, setPrevVolume],
+  );
+
+  useEffect(() => {
+    const el = sliderRef.current;
+    if (!el) return;
+    const pct = globalVolume * 100;
+    el.style.background = `linear-gradient(to right, var(--color-accent-success) ${pct}%, var(--color-surface-250) ${pct}%)`;
+  }, [globalVolume]);
+
+  return (
+    <div className="flex items-center gap-2 px-2 py-3">
+      <Icon
+        icon="sound"
+        className="size-4 text-text-secondary"
+        onClick={() => onToggleMute()}
+      />
+      <input
+        ref={sliderRef}
+        type="range"
+        min={0}
+        max={1}
+        step={0.01}
+        value={globalVolume}
+        onChange={handleChange}
+        className="volume-slider flex-1"
+      />
+    </div>
+  );
+}
+
+function SettingsDropdown({
+  onJoin,
+  volumeSlider,
+  onToggleMute,
+  isMobile = false,
+  tableId,
+  className,
+}: {
+  onJoin: (tableIdOrLink: string) => void;
+  volumeSlider: {
+    globalVolume: number;
+    setGlobalVolume: (volume: number) => void;
+    setPrevVolume: (volume: number) => void;
+  };
+  onToggleMute: () => void;
+  isMobile?: boolean;
+  tableId: string;
+  className?: string;
+}) {
+  const [switchTableOpen, setSwitchTableOpen] = useState(false);
+
+  return (
+    <>
+      <DropdownMenu>
+        <DropdownMenuTrigger
+          type="button"
+          className={cn(
+            "flex cursor-pointer items-center gap-1 h-5 text-base font-semibold text-text-secondary hover:text-white active:text-white tracking-tight ease-in-out duration-300",
+            className,
+          )}
+        >
+          <Icon icon="settings" className="size-4" />
+          <span className="hidden lg:inline-block">Settings</span>
+        </DropdownMenuTrigger>
+
+        <DropdownMenuContent
+          side="top"
+          align="start"
+          sideOffset={12}
+          className="w-[220px] rounded-lg border border-surface-300 bg-surface-450 p-2 shadow-[0px_6px_22px_0px_rgba(0,0,0,0.3)]"
+          onCloseAutoFocus={(e) => e.preventDefault()}
+        >
+          <VolumeSlider
+            globalVolume={volumeSlider.globalVolume}
+            setGlobalVolume={volumeSlider.setGlobalVolume}
+            setPrevVolume={volumeSlider.setPrevVolume}
+            onToggleMute={onToggleMute}
+          />
+
+          <button
+            type="button"
+            onClick={() => setSwitchTableOpen(true)}
+            className="flex w-full items-center gap-2 rounded-xl px-2 py-3 transition-colors hover:bg-surface-300"
+          >
+            <Icon icon="logout" className="size-4 text-text-secondary" />
+            <span className="text-sm font-semibold text-white">
+              Switch Table
+            </span>
+          </button>
+        </DropdownMenuContent>
+      </DropdownMenu>
+
+      <SwitchTableDialog
+        open={switchTableOpen}
+        onOpenChange={setSwitchTableOpen}
+        currentTableId={tableId}
+        onJoin={onJoin}
+        isMobile={isMobile}
+      />
+    </>
+  );
+}
+
+function InviteFriendsButton({
+  tableId,
+  shareBaseUrl,
+  className,
+}: {
+  tableId: string;
+  shareBaseUrl: string | null;
+  className?: string;
+}) {
+  const [copied, setCopied] = useState(false);
+
+  const shareUrl = useMemo(() => {
+    if (!shareBaseUrl || !tableId) return null;
+    return `${shareBaseUrl}?tableId=${tableId}`;
+  }, [shareBaseUrl, tableId]);
+
+  const roomDisplay = useMemo(() => {
+    if (!shareUrl) return null;
+    try {
+      const url = new URL(shareUrl);
+      return `${url.host}${url.pathname}${url.search}`;
+    } catch {
+      return shareUrl;
+    }
+  }, [shareUrl]);
+
+  const handleCopy = useCallback(async () => {
+    if (!shareUrl) return;
+    try {
+      await navigator.clipboard.writeText(shareUrl);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch (err) {
+      console.error("Failed to copy:", err);
+    }
+  }, [shareUrl]);
+
+  if (!shareBaseUrl) return null;
+
+  return (
+    <div className={cn("flex flex-col lg:items-end", className)}>
+      <button
+        type="button"
+        onClick={handleCopy}
+        className="flex cursor-pointer h-5 items-center gap-1 text-base font-semibold tracking-tight group"
+      >
+        {copied ? (
+          <>
+            <Icon icon="check" className="size-4 text-accent-success" />
+            <span className="text-accent-success">Table Link Copied</span>
+          </>
+        ) : (
+          <>
+            <Icon icon="share" className="size-4" />
+            <span className="text-text-secondary! group-active:text-white">
+              Invite Friends
+            </span>
+          </>
+        )}
+      </button>
+      {roomDisplay && (
+        <p className="text-[10px] leading-3.5 text-text-tertiary h-3.5 truncate lg:w-fit w-50">
+          Table Id: {tableId}
+        </p>
+      )}
+    </div>
+  );
+}
+
+interface GameInfoButtonProps {
+  badges: {
+    houseEdge: string;
+    minBet: string;
+    coinInfo?: CoinInfo;
+  };
+  tabsContents: {
+    table: React.ReactNode;
+    howToPlay: React.ReactNode;
+    balance: React.ReactNode;
+  };
+  isMobile?: boolean;
+  className?: string;
+  gameTitle?: string;
+  gameDescription?: string;
+}
+
+function GameInfoButton({
+  badges,
+  tabsContents,
+  isMobile,
+  className,
+  gameTitle = "Blackjack",
+  gameDescription = "Classic Blackjack. Play solo or join a multiplayer table in real time.",
+}: GameInfoButtonProps) {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <>
+      <button
+        type="button"
+        onClick={() => setOpen(true)}
+        className={cn(
+          "flex cursor-pointer items-center gap-1 text-base font-semibold text-text-secondary hover:text-white active:text-white tracking-tight ease-in-out duration-300",
+          className,
+        )}
+      >
+        <Icon icon="rules" className="size-4" />
+        <span className="hidden lg:inline-block">Game Info</span>
+      </button>
+      <GameInfoDialog
+        open={open}
+        onOpenChange={setOpen}
+        title={gameTitle}
+        description={gameDescription}
+        badges={badges}
+        tabsContents={tabsContents}
+        footer={
+          <Button
+            variant="primary"
+            type="button"
+            onClick={() => setOpen(false)}
+            className="w-full h-10 rounded-xl"
+          >
+            Start Playing
+          </Button>
+        }
+        isMobile={isMobile}
+      />
+    </>
+  );
+}
+
+function GameFooter({
+  tableId,
+  shareBaseUrl,
+  badges,
+  tabsContents,
+  onJoin,
+  onToggleMute,
+  isMobile = false,
+  volumeSlider,
+  gameTitle,
+  gameDescription,
+  centerLogoUrl,
+}: GameFooterProps) {
+  return (
+    <div className="relative w-full h-16.5 overflow-clip rounded-b-xl border-t-[5px] border-surface-450 bg-surface-500 p-4 lg:px-7 lg:py-4 flex items-center justify-between">
+      {/* Left: Settings + Game Info */}
+      <div className="flex items-center gap-7 order-2 lg:order-1">
+        <SettingsDropdown
+          onJoin={onJoin}
+          volumeSlider={volumeSlider}
+          onToggleMute={onToggleMute}
+          isMobile={isMobile}
+          tableId={tableId}
+          className="order-2 lg:order-1"
+        />
+
+        <GameInfoButton
+          badges={badges}
+          tabsContents={tabsContents}
+          isMobile={isMobile}
+          className="order-1 lg:order-2"
+          gameTitle={gameTitle}
+          gameDescription={gameDescription}
+        />
+      </div>
+
+      {/* Center: DU logo */}
+      {centerLogoUrl && (
+        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 hidden lg:block">
+          <img
+            src={centerLogoUrl}
+            alt="Center Logo"
+            className="h-16 w-40 opacity-50"
+            draggable={false}
+          />
+        </div>
+      )}
+
+
+      {/* Right: Invite Friends */}
+      <InviteFriendsButton
+        tableId={tableId}
+        shareBaseUrl={shareBaseUrl}
+        className="order-1 lg:order-2"
+      />
+    </div>
+  );
+}
+
+export { GameFooter };