casino-ui 0.1.0

package/src/components/result-badge.tsx

@@ -0,0 +1,157 @@
+import { cn } from "../lib/utils";
+
+export type ResultType =
+  | "win"
+  | "lose"
+  | "bust"
+  | "push"
+  | "blackjack"
+  | "even"
+  | "surrender";
+
+interface ResultBadgeProps {
+  type: ResultType;
+  amount?: string;
+  showPayout?: boolean;
+  assetIconUrl?: string | React.ReactNode;
+  isUSD?: boolean;
+  className?: string;
+  isMobile?: boolean;
+  isMobileSeat?: boolean;
+}
+
+const BADGE_STYLES: Record<
+  ResultType,
+  { border: string; text: string; bg: string; shadow?: string }
+> = {
+  win: {
+    border: "border-[#8BB339]",
+    text: "text-[#8BB339]",
+    bg: "bg-[rgba(199,254,81,0.08)]",
+  },
+  lose: {
+    border: "border-[#DB375E]",
+    text: "text-[#DB375E]",
+    bg: "bg-[rgba(219,55,94,0.08)]",
+  },
+  bust: {
+    border: "border-[#DB375E]",
+    text: "text-[#DB375E]",
+    bg: "bg-[rgba(219,55,94,0.08)]",
+  },
+  push: {
+    border: "border-[#7454F0]",
+    text: "text-[#7454F0]",
+    bg: "bg-[#7454F0]/12",
+  },
+  blackjack: {
+    border: "border-[#FF5C05]",
+    text: "text-[#FF5C05]",
+    bg: "bg-[rgba(255,92,5,0.08)]",
+    shadow: "shadow-[0_0_5px_2px_rgba(255,92,5,0.6)]",
+  },
+  even: {
+    border: "border-[#7454F0]",
+    text: "text-[#7454F0]",
+    bg: "bg-[#7454F0]/12",
+  },
+  surrender: {
+    border: "border-[#8A8A8A]",
+    text: "text-[#8A8A8A]",
+    bg: "bg-[rgba(138,138,138,0.08)]",
+  },
+};
+
+const PAYOUT_TEXT_COLORS: Record<ResultType, string> = {
+  win: "text-[#8BB339]",
+  lose: "text-[#DB375E]",
+  bust: "text-[#DB375E]",
+  push: "text-[#BFBFBF]",
+  blackjack: "text-brand",
+  even: "text-[#7454F0]",
+  surrender: "text-[#BFBFBF]",
+};
+
+const LABELS: Record<ResultType, string> = {
+  win: "Win",
+  lose: "Lose",
+  bust: "Bust",
+  push: "Push",
+  blackjack: "Blackjack",
+  even: "Break Even",
+  surrender: "Surrender",
+};
+
+export function ResultBadge({
+  type,
+  amount = "0",
+  showPayout = false,
+  assetIconUrl,
+  isUSD = false,
+  className,
+  isMobile = false,
+  isMobileSeat = false,
+}: ResultBadgeProps) {
+  const style = BADGE_STYLES[type];
+
+  return (
+    <div
+      className={cn(
+        "flex items-center justify-center border",
+        isMobile
+          ? isMobileSeat
+            ? "w-18.5 h-4.5 rounded-sm p-1"
+            : "w-18.5 h-5.5 rounded-sm px-1 py-1.5"
+          : "w-25 h-6.5 rounded-md p-1",
+        style.border,
+        style.bg,
+        style.shadow,
+        className,
+      )}
+    >
+      {showPayout ? (
+        <div className="flex items-center gap-1">
+          {isUSD ? (
+            <span
+              className={cn(
+                "text-xs ",
+                isMobile
+                  ? "leading-2.5 font-semibold"
+                  : "leading-3.5 font-bold",
+                PAYOUT_TEXT_COLORS[type],
+              )}
+            >
+              $
+            </span>
+          ) : assetIconUrl ? (
+            typeof assetIconUrl === "string" ? (
+              <img src={assetIconUrl} alt="" className="w-4 h-4" />
+            ) : (
+              <div className="w-4 h-4">{assetIconUrl}</div>
+            )
+          ) : null}
+          <span
+            className={cn(
+              "text-xs",
+              isMobile ? "leading-2.5 font-semibold" : "leading-3.5  font-bold",
+              PAYOUT_TEXT_COLORS[type],
+            )}
+          >
+            {amount}
+          </span>
+        </div>
+      ) : (
+        <span
+          className={cn(
+            isMobile
+              ? "text-xs leading-2.5"
+              : "text-sm leading-3.5 font-semibold",
+            style.text,
+          )}
+        >
+          {LABELS[type]}
+        </span>
+      )}
+    </div>
+  );
+}

package/src/components/switch-table-dialog.tsx

@@ -0,0 +1,211 @@
+import { useState, useCallback } from "react";
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "./ui/dialog";
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+} from "./ui/drawer";
+import { Icon } from "./icon";
+import { Button } from "./button";
+import { toast } from "./toast-helpers";
+
+interface SwitchTableDialogProps {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  currentTableId: string;
+  onJoin: (tableIdOrLink: string) => void;
+  isMobile?: boolean;
+}
+
+function SwitchTableBody({
+  currentTableId,
+  inputValue,
+  onInputChange,
+}: {
+  currentTableId: string;
+  inputValue: string;
+  onInputChange: (value: string) => void;
+}) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(currentTableId);
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    } catch {
+      toast.status.error("Failed to copy table ID");
+    }
+  }, [currentTableId]);
+
+  return (
+    <div className="w-full flex flex-col gap-3 px-5">
+      <div className="w-full flex items-center gap-2">
+        <span className="text-text-secondary text-sm">Current table ID:</span>
+        <span className="font-semibold text-white truncate w-40 text-sm">
+          {currentTableId}
+        </span>
+        <button
+          type="button"
+          onClick={handleCopy}
+          className="min-w-4 cursor-pointer text-text-secondary transition-colors hover:text-white"
+        >
+          {copied ? (
+            <Icon icon="check" className="size-4 text-accent-success" />
+          ) : (
+            <Icon icon="copy" className="size-4" />
+          )}
+        </button>
+      </div>
+
+      <input
+        type="text"
+        value={inputValue}
+        onChange={(e) => onInputChange(e.target.value)}
+        placeholder="Enter a table ID"
+        className="w-full rounded-xl border border-button-grey bg-surface-500 p-3 text-sm text-white placeholder:text-text-secondary outline-none focus:border-surface-200 ease-in-out duration-300"
+      />
+
+      <div className="flex items-center gap-2 text-xs text-text-secondary">
+        <Icon icon="info" className="size-4 shrink-0" />
+        <span>Leaving this table will end the current game.</span>
+      </div>
+    </div>
+  );
+}
+
+function SwitchTableFooter({
+  inputValue,
+  onCancel,
+  onJoin,
+}: {
+  inputValue: string;
+  onCancel: () => void;
+  onJoin: () => void;
+}) {
+  return (
+    <div className="w-full flex items-center gap-3">
+      <Button
+        variant="tertiary"
+        type="button"
+        onClick={onCancel}
+        className="w-full flex-1 min-w-0 h-10 rounded-xl"
+      >
+        Cancel
+      </Button>
+      <Button
+        variant="primary"
+        type="button"
+        onClick={onJoin}
+        disabled={!inputValue.trim()}
+        className="w-full flex-1 min-w-0 h-10 rounded-xl"
+      >
+        Join
+      </Button>
+    </div>
+  );
+}
+
+function SwitchTableDialog({
+  open,
+  onOpenChange,
+  currentTableId,
+  onJoin,
+  isMobile = false,
+}: SwitchTableDialogProps) {
+  const [inputValue, setInputValue] = useState("");
+
+  const handleJoin = useCallback(() => {
+    const trimmed = inputValue.trim();
+
+    if (!trimmed) return;
+
+    const uuidRegex =
+      /^[0-9a-f]{8}-[0-9a-f]{4}-[1-5][0-9a-f]{3}-[89ab][0-9a-f]{3}-[0-9a-f]{12}$/i;
+    const isUuid = uuidRegex.test(trimmed);
+
+    if (!isUuid) {
+      toast.status.error("Invalid table ID");
+      return;
+    }
+
+    setInputValue("");
+    onOpenChange(false);
+    onJoin(trimmed);
+  }, [inputValue, onOpenChange, onJoin]);
+
+  const handleCancel = useCallback(() => {
+    setInputValue("");
+    onOpenChange(false);
+  }, [onOpenChange]);
+
+  if (isMobile) {
+    return (
+      <Drawer open={open} onOpenChange={onOpenChange}>
+        <DrawerContent className="rounded-t-xl overflow-clip bg-surface-400 border-none">
+          <DrawerHeader className="flex items-start justify-between p-5">
+            <DrawerTitle className="text-2xl font-bold text-left">
+              Switch Table
+            </DrawerTitle>
+            <DrawerClose className="min-w-6 cursor-pointer opacity-70 transition-opacity hover:opacity-100">
+              <Icon icon="x" className="size-6" />
+            </DrawerClose>
+          </DrawerHeader>
+
+          <SwitchTableBody
+            currentTableId={currentTableId}
+            inputValue={inputValue}
+            onInputChange={setInputValue}
+          />
+
+          <DrawerFooter className="border-t border-surface-300 bg-surface-450 px-5 pt-5 pb-6 mt-5">
+            <SwitchTableFooter
+              inputValue={inputValue}
+              onCancel={handleCancel}
+              onJoin={handleJoin}
+            />
+          </DrawerFooter>
+        </DrawerContent>
+      </Drawer>
+    );
+  }
+
+  return (
+    <Dialog open={open} onOpenChange={onOpenChange}>
+      <DialogContent className="w-100 rounded-xl overflow-clip bg-surface-400 gap-5">
+        <DialogHeader className="flex items-start justify-between px-5 pt-5">
+          <DialogTitle className="text-2xl font-bold">Switch Table</DialogTitle>
+          <DialogClose className="min-w-6 cursor-pointer opacity-70 transition-opacity hover:opacity-100">
+            <Icon icon="x" className="size-6" />
+          </DialogClose>
+        </DialogHeader>
+
+        <SwitchTableBody
+          currentTableId={currentTableId}
+          inputValue={inputValue}
+          onInputChange={setInputValue}
+        />
+
+        <DialogFooter className="border-t border-surface-300 bg-surface-450 px-5 pt-5 pb-6">
+          <SwitchTableFooter
+            inputValue={inputValue}
+            onCancel={handleCancel}
+            onJoin={handleJoin}
+          />
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+export default SwitchTableDialog;

package/src/components/toast-container.tsx

@@ -0,0 +1,25 @@
+import { ToastContainer, Zoom, type ToastPosition } from "react-toastify";
+import "react-toastify/dist/ReactToastify.css";
+import "../styles/toast.css";
+
+export function CasinoToastContainer({
+  limit = 5,
+  position = "bottom-left",
+}: {
+  limit?: number;
+  position?: ToastPosition;
+} = {}) {
+  return (
+    <div className="casino-toast">
+      <ToastContainer
+        position={position}
+        limit={limit}
+        newestOnTop
+        pauseOnFocusLoss={false}
+        transition={Zoom}
+        draggable={false}
+        hideProgressBar
+      />
+    </div>
+  );
+}

package/src/components/toast-helpers.ts

@@ -0,0 +1,79 @@
+import { toast as toastify } from "react-toastify";
+import {
+  EphemeralToast,
+  StatusToast,
+  ActionToast,
+  type ToastAction,
+  type EphemeralVariant,
+  type StatusVariant,
+} from "./toast";
+import React from "react";
+
+function renderEphemeral(message: string, variant: EphemeralVariant) {
+  toastify(React.createElement(EphemeralToast, { message, variant }), {
+    autoClose: 2500,
+    closeButton: false,
+    closeOnClick: true,
+  });
+}
+
+function renderStatus(
+  message: string,
+  variant: StatusVariant,
+  opts?: { title?: string },
+) {
+  const toastId = toastify(
+    ({ closeToast }) =>
+      React.createElement(StatusToast, {
+        message,
+        variant,
+        title: opts?.title,
+        onClose: () => closeToast?.(),
+      }),
+    {
+      autoClose: 5000,
+      closeButton: false,
+      closeOnClick: false,
+    },
+  );
+  return toastId;
+}
+
+function renderAction(opts: {
+  title?: string;
+  message: string;
+  actions: ToastAction[];
+}) {
+  const toastId = toastify(
+    ({ closeToast }) =>
+      React.createElement(ActionToast, {
+        message: opts.message,
+        title: opts.title,
+        actions: opts.actions,
+        onClose: () => closeToast?.(),
+      }),
+    {
+      autoClose: false,
+      closeButton: false,
+      closeOnClick: false,
+    },
+  );
+  return toastId;
+}
+
+export const toast = {
+  info: (message: string) => renderEphemeral(message, "info"),
+  success: (message: string) => renderEphemeral(message, "success"),
+
+  status: {
+    info: (message: string, opts?: { title?: string }) =>
+      renderStatus(message, "info", opts),
+    success: (message: string, opts?: { title?: string }) =>
+      renderStatus(message, "success", opts),
+    error: (message: string, opts?: { title?: string }) =>
+      renderStatus(message, "error", opts),
+  },
+
+  action: (opts: { title?: string; message: string; actions: ToastAction[] }) =>
+    renderAction(opts),
+} as const;