casino-ui 0.1.0

package/src/components/bet-panel.tsx

@@ -0,0 +1,275 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+import type { CoinInfo } from "../types";
+/* -------------------------------------------------------------------------- */
+/*  Betting Mode Components                                                   */
+/* -------------------------------------------------------------------------- */
+
+interface BetPanelRootProps extends React.ComponentProps<"div"> {
+  children: React.ReactNode;
+}
+
+function BetPanelRoot({ className, children, ...props }: BetPanelRootProps) {
+  return (
+    <div
+      data-slot="bet-panel"
+      className={cn(
+        "flex flex-col justify-end items-center rounded-xl bg-panel-bg p-3 sm:px-5 sm:py-4 overflow-x-clip",
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+}
+
+interface BetPanelFoldingInfoProps extends React.ComponentProps<"div"> {
+  open: boolean;
+  children: React.ReactNode;
+}
+
+function BetPanelFoldingInfo({
+  className,
+  open,
+  children,
+  ...props
+}: BetPanelFoldingInfoProps) {
+  return (
+    <div
+      className={cn(
+        "w-full grid duration-300 ease-in-out",
+        open ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
+        className,
+      )}
+    >
+      <div className="overflow-hidden">{children}</div>
+    </div>
+  );
+}
+
+interface BetPanelInputProps extends React.ComponentProps<"div"> {
+  label?: string;
+  balance?: string;
+  coinInfo?: CoinInfo;
+  value?: string;
+  setValue: React.Dispatch<React.SetStateAction<string>>;
+  setOriginalBetSize: (size: number | ((prev: number) => number)) => void;
+  getMaxBet: () => number;
+  error?: string;
+  setError: (error?: string) => void;
+  disabled?: boolean;
+}
+
+function BetPanelInput({
+  className,
+  label = "Balance",
+  balance,
+  coinInfo,
+  value,
+  setValue,
+  getMaxBet,
+  setOriginalBetSize,
+  error,
+  setError,
+  disabled,
+  ...props
+}: BetPanelInputProps) {
+  const isUSD = coinInfo?.coinType?.toLowerCase().includes("usd") ?? false;
+  const regex = /^[0-9.]+$/;
+
+  return (
+    <div
+      data-slot="bet-panel-input"
+      className={cn(
+        "relative flex flex-1 sm:flex-none sm:w-[234px] shrink-0 flex-col gap-1",
+        disabled && "opacity-60 pointer-events-none",
+        className,
+      )}
+      {...props}
+    >
+      <div className="hidden sm:flex items-center justify-between leading-4.5 h-4.5 text-sm font-semibold text-[#BFBFBF]">
+        <span>{label}</span>
+        {balance != null && (
+          <div className="flex items-center gap-2">
+            <span>{balance}</span>
+            <span>{coinInfo?.symbol}</span>
+          </div>
+        )}
+      </div>
+
+      <div className="relative flex flex-col items-center">
+        <div
+          className={cn(
+            "flex w-full items-center rounded-lg sm:rounded-xl border bg-surface-600 h-10 sm:h-12 px-3 py-2 transition-colors",
+            error ? "border-accent-error" : "border-button-grey",
+          )}
+        >
+          <div className="flex flex-1 items-center gap-1">
+            {isUSD ? (
+              <span>$</span>
+            ) : coinInfo?.image ? (
+              typeof coinInfo.image === "string" ? (
+                <img
+                  src={coinInfo.image}
+                  alt={coinInfo.symbol}
+                  className="size-4 object-contain"
+                />
+              ) : (
+                <div className="min-w-4 h-4 w-4 object-contain">
+                  {coinInfo.image}
+                </div>
+              )
+            ) : null}
+            <input
+              type="text"
+              inputMode="decimal"
+              value={value ?? ""}
+              onChange={(e) => {
+                if (
+                  regex.test(e.target.value) ||
+                  e.target.value === "" ||
+                  e.target.value === "."
+                ) {
+                  setValue?.(e.target.value);
+                }
+              }}
+              className="w-full min-w-0 bg-transparent text-base font-semibold text-white tracking-tight outline-none placeholder:text-white/30"
+              placeholder="0.00"
+            />
+          </div>
+
+          <div className="flex items-center gap-1 shrink-0">
+            <button
+              type="button"
+              onClick={() => setValue((Number(value) * 2).toString())}
+              className="hidden sm:block rounded-lg bg-surface-300 px-2.5 py-2 text-xs font-semibold text-white transition-colors hover:bg-action-hover active:bg-action-active"
+            >
+              2x
+            </button>
+            <button
+              type="button"
+              onClick={() => setValue(getMaxBet().toString())}
+              className="rounded-md sm:rounded-lg bg-surface-300 px-2 sm:px-2.5 py-1 sm:py-2 text-xs font-semibold text-white transition-colors hover:bg-action-hover active:bg-action-active"
+            >
+              MAX
+            </button>
+          </div>
+        </div>
+
+        <div
+          className={cn(
+            "absolute top-10 sm:top-12 left-1/2 -translate-x-1/2 grid w-full transition-[grid-template-rows] duration-300 ease-out z-30",
+            error ? "grid-rows-[1fr]" : "grid-rows-[0fr]",
+          )}
+        >
+          <div className="overflow-hidden">
+            <div className="mx-auto flex w-[90%] sm:w-[210px] items-center justify-center rounded-b-xl bg-accent-error py-1 px-2.5 sm:py-2">
+              <span className="text-center text-xs font-semibold text-white">
+                {error}
+              </span>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+interface BetPanelChipsProps extends React.ComponentProps<"div"> {
+  disabled?: boolean;
+}
+
+function BetPanelChips({ className, disabled, ...props }: BetPanelChipsProps) {
+  return (
+    <div
+      data-slot="bet-panel-chips"
+      className={cn(
+        "min-w-0 w-full flex h-full items-center justify-between sm:justify-start sm:gap-1 transition-opacity",
+        disabled && "opacity-60 pointer-events-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+interface BetPanelActionsProps extends React.ComponentProps<"div"> {
+  disabled?: boolean;
+}
+
+function BetPanelActions({
+  className,
+  disabled,
+  ...props
+}: BetPanelActionsProps) {
+  return (
+    <div
+      data-slot="bet-panel-actions"
+      className={cn(
+        "flex items-center gap-2 shrink-0 transition-opacity select-none",
+        disabled && "opacity-50 pointer-events-none",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Timer Component (shared by Action & Insurance panels)                     */
+/* -------------------------------------------------------------------------- */
+
+interface BetPanelTimerProps {
+  remainingTime: number;
+  progress: number;
+  isWarning: boolean;
+  isActive: boolean;
+}
+
+function BetPanelTimer({
+  remainingTime,
+  progress,
+  isWarning,
+  isActive,
+}: BetPanelTimerProps) {
+  if (!isActive) return null;
+
+  return (
+    <div className="flex h-6 w-full items-center gap-3 py-1">
+      <span
+        className={cn(
+          "shrink-0 text-xs tabular-nums",
+          isWarning ? "text-red-500 animate-pulse" : "text-accent-success",
+        )}
+        style={{ fontFamily: "var(--font-dm-mono)", fontWeight: 500 }}
+      >
+        {remainingTime}s
+      </span>
+      <div className="relative h-1.5 flex-1 rounded-full bg-surface-650">
+        <div
+          className={cn(
+            "absolute inset-y-0 left-0 rounded-full transition-[width] duration-1000 ease-linear shadow-[inset_0px_1px_2px_0px_rgba(255,255,255,0.15)]",
+            isWarning
+              ? "bg-red-500"
+              : "bg-linear-to-r from-accent-success to-timer-end",
+          )}
+          style={{ width: `${progress}%` }}
+        />
+      </div>
+    </div>
+  );
+}
+
+/* -------------------------------------------------------------------------- */
+/*  Exports                                                                   */
+/* -------------------------------------------------------------------------- */
+
+export {
+  BetPanelTimer,
+  BetPanelInput,
+  BetPanelActions,
+  BetPanelChips,
+  BetPanelRoot,
+  BetPanelFoldingInfo,
+};

package/src/components/button.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+import { Slot } from "@radix-ui/react-slot";
+import { cva, type VariantProps } from "class-variance-authority";
+
+import { cn } from "../lib/utils";
+
+const buttonVariants = cva(
+  "flex h-11 items-center justify-center border-2 rounded-lg cursor-pointer whitespace-nowrap select-none disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        primary:
+          "px-6 py-3 green-action-button text-base font-semibold text-black tracking-tight",
+        secondary:
+          "px-6 py-3 blue-action-button text-base font-semibold text-black tracking-tight",
+        tertiary:
+          "px-3 py-2 grey-action-button text-sm font-semibold text-white",
+        grey_pure:
+          "px-3 py-2 border-button-grey text-sm font-semibold text-white bg-surface-300 hover:bg-action-hover active:bg-action-active",
+      },
+      fullWidth: {
+        true: "w-full",
+        false: "",
+      },
+    },
+    defaultVariants: {
+      variant: "primary",
+    },
+  },
+);
+
+export interface ButtonProps
+  extends
+    React.ButtonHTMLAttributes<HTMLButtonElement>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean;
+  before?: React.ReactNode;
+  loading?: boolean;
+  noLoadingWhenDisabled?: boolean;
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  (
+    {
+      className,
+      variant,
+      fullWidth,
+      asChild = false,
+      disabled,
+      before,
+      children,
+      loading,
+      noLoadingWhenDisabled = false,
+      ...props
+    },
+    ref,
+  ) => {
+    return (
+      <button
+        className={cn(
+          "relative overflow-clip ease-in-out duration-300",
+          buttonVariants({ variant, fullWidth, className }),
+        )}
+        type="button"
+        ref={ref}
+        disabled={disabled || loading}
+        {...props}
+      >
+        {before}
+
+        <div className="inline-flex sm:flex-1 items-center justify-center">
+          {children}
+        </div>
+      </button>
+    );
+  },
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/components/card-score-badge.tsx

@@ -0,0 +1,61 @@
+import { cn } from "../lib/utils";
+
+interface CardScoreBadgeProps {
+  className?: string;
+  type:
+    | "default"
+    | "win"
+    | "lose"
+    | "bust"
+    | "blackjack"
+    | "push"
+    | "even"
+    | "surrender";
+  children?: React.ReactNode;
+  isMobileSmallHeight?: boolean;
+}
+
+const BADGE_COLORS = {
+  default: "bg-surface-300",
+  push: "bg-surface-300",
+  win: "bg-[#8BB339]",
+  lose: "bg-[#DB375E]",
+  bust: "bg-[#DB375E]",
+  blackjack: "bg-[#FF5C05]",
+  even: "bg-card-border",
+  surrender: "bg-[#8A8A8A]",
+};
+
+const CardScoreBadge = ({
+  type = "default",
+  className,
+  children,
+  isMobileSmallHeight = false,
+}: CardScoreBadgeProps) => {
+  const badgeColor = BADGE_COLORS[type];
+
+  return (
+    <div
+      className={cn(
+        "pointer-events-none absolute bottom-1 right-0 z-10 select-none text-center",
+        className,
+        isMobileSmallHeight ? "h-4 min-w-4" : "h-5.5 min-w-5.5",
+      )}
+    >
+      <div
+        className={cn(
+          "relative w-full h-full flex items-center justify-center rounded font-bold",
+          badgeColor,
+          isMobileSmallHeight ? "p-0.5 text-[8px]" : "p-1 text-[10px]",
+        )}
+        style={{
+          boxShadow: "0 2px 0 0 #404040",
+        }}
+      >
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default CardScoreBadge;

package/src/components/card-shoe.tsx

@@ -0,0 +1,52 @@
+import { forwardRef } from "react";
+import { PokerCard } from "./poker-card";
+import cardShoeOverlay from "../assets/card-shoe-overlay.svg";
+import { cn } from "../lib/utils";
+
+interface CardShoeProps {
+  className?: string;
+}
+
+const CARD_COUNT = 4;
+const CARD_OFFSET_Y = 2.5; // px vertical offset between stacked cards
+
+export const CardShoe = forwardRef<HTMLDivElement, CardShoeProps>(
+  ({ className }, ref) => {
+    return (
+      <div
+        className={cn(
+          "relative w-12.5 h-28.5 border-[2.4px] rounded-t-[3.6px] rounded-b-[9.6px] overflow-hidden",
+          "bg-card-shoe-bg border-card-shoe-border shadow-[0px_2px_0px_0px_#122741]",
+          className,
+        )}
+      >
+        {/* Stacked card backs visible through the shoe opening */}
+        <div
+          ref={ref}
+          className="absolute bottom-[4px] left-1/2 -translate-x-1/2"
+        >
+          {Array.from({ length: CARD_COUNT }).map((_, i) => (
+            <div
+              key={i}
+              className="absolute left-1/2 -translate-x-1/2 select-none"
+              style={{
+                bottom: `${i * CARD_OFFSET_Y}px`,
+              }}
+            >
+              <PokerCard side="back" showShadow={false} />
+            </div>
+          ))}
+        </div>
+
+        {/* Shoe overlay with semicircular cutout */}
+        <img
+          src={cardShoeOverlay}
+          alt=""
+          className="absolute top-0 left-0 pointer-events-none w-12.5"
+        />
+      </div>
+    );
+  },
+);
+
+CardShoe.displayName = "CardShoe";

package/src/components/card-table.tsx

@@ -0,0 +1,182 @@
+type DivProps = React.HTMLAttributes<HTMLDivElement>;
+
+interface ICardTableProp {
+  className?: DivProps["className"];
+}
+
+const CardTable = ({ className }: ICardTableProp) => {
+  return (
+    <div className={className}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="1114"
+        height="521"
+        viewBox="0 0 1114 521"
+        fill="none"
+      >
+        <g filter="url(#filter0_din_6221_41932)">
+          <mask id="path-1-inside-1_6221_41932" fill="white">
+            <path d="M4 17C4 7.61116 11.6112 0 21 0H1093C1102.39 0 1110 7.61116 1110 17V113C1110 333.914 930.914 513 710 513H404C183.086 513 4 333.914 4 113V17Z" />
+          </mask>
+          <path
+            d="M4 17C4 7.61116 11.6112 0 21 0H1093C1102.39 0 1110 7.61116 1110 17V113C1110 333.914 930.914 513 710 513H404C183.086 513 4 333.914 4 113V17Z"
+            fill="url(#paint0_linear_6221_41932)"
+          />
+          <path
+            d="M4 17C4 7.61116 11.6112 0 21 0H1093C1102.39 0 1110 7.61116 1110 17V113C1110 333.914 930.914 513 710 513H404C183.086 513 4 333.914 4 113V17Z"
+            stroke="url(#paint1_linear_6221_41932)"
+            strokeWidth="50"
+            mask="url(#path-1-inside-1_6221_41932)"
+          />
+        </g>
+        <defs>
+          <filter
+            id="filter0_din_6221_41932"
+            x="0"
+            y="0"
+            width="1114"
+            height="521"
+            filterUnits="userSpaceOnUse"
+            colorInterpolationFilters="sRGB"
+          >
+            <feFlood floodOpacity="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="4" />
+            <feGaussianBlur stdDeviation="2" />
+            <feComposite in2="hardAlpha" operator="out" />
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"
+            />
+            <feBlend
+              mode="normal"
+              in2="BackgroundImageFix"
+              result="effect1_dropShadow_6221_41932"
+            />
+            <feBlend
+              mode="normal"
+              in="SourceGraphic"
+              in2="BackgroundImageFix"
+              result="shape"
+            />
+            <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"
+            />
+            <feMorphology
+              radius="35"
+              operator="erode"
+              in="SourceAlpha"
+              result="effect2_innerShadow_6221_41932"
+            />
+            <feOffset dy="4" />
+            <feGaussianBlur stdDeviation="5.45" />
+            <feComposite in2="hardAlpha" operator="arithmetic" k2="-1" k3="1" />
+            <feColorMatrix
+              type="matrix"
+              values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.35 0"
+            />
+            <feBlend
+              mode="normal"
+              in2="shape"
+              result="effect2_innerShadow_6221_41932"
+            />
+            <feTurbulence
+              type="fractalNoise"
+              baseFrequency="0.5 0.5"
+              stitchTiles="stitch"
+              numOctaves="3"
+              result="noise"
+              seed="9045"
+            />
+            <feColorMatrix
+              in="noise"
+              type="luminanceToAlpha"
+              result="alphaNoise"
+            />
+            <feComponentTransfer in="alphaNoise" result="coloredNoise1">
+              <feFuncA
+                type="discrete"
+                tableValues="1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 "
+              />
+            </feComponentTransfer>
+            <feComposite
+              operator="in"
+              in2="effect2_innerShadow_6221_41932"
+              in="coloredNoise1"
+              result="noise1Clipped"
+            />
+            <feComponentTransfer in="alphaNoise" result="coloredNoise2">
+              <feFuncA
+                type="discrete"
+                tableValues="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 1 "
+              />
+            </feComponentTransfer>
+            <feComposite
+              operator="in"
+              in2="effect2_innerShadow_6221_41932"
+              in="coloredNoise2"
+              result="noise2Clipped"
+            />
+            <feFlood floodColor="rgba(0, 0, 0, 0.05)" result="color1Flood" />
+            <feComposite
+              operator="in"
+              in2="noise1Clipped"
+              in="color1Flood"
+              result="color1"
+            />
+            <feFlood floodColor="rgba(255, 255, 255, 0)" result="color2Flood" />
+            <feComposite
+              operator="in"
+              in2="noise2Clipped"
+              in="color2Flood"
+              result="color2"
+            />
+            <feMerge result="effect3_noise_6221_41932">
+              <feMergeNode in="effect2_innerShadow_6221_41932" />
+              <feMergeNode in="color1" />
+              <feMergeNode in="color2" />
+            </feMerge>
+            <feBlend
+              mode="normal"
+              in="effect3_noise_6221_41932"
+              in2="effect1_dropShadow_6221_41932"
+              result="effect3_noise_6221_41932"
+            />
+          </filter>
+          <linearGradient
+            id="paint0_linear_6221_41932"
+            x1="557"
+            y1="0"
+            x2="557"
+            y2="513"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#0B3E2C" />
+            <stop offset="1" stopColor="#14945B" />
+          </linearGradient>
+          <linearGradient
+            id="paint1_linear_6221_41932"
+            x1="557"
+            y1="0"
+            x2="557"
+            y2="513"
+            gradientUnits="userSpaceOnUse"
+          >
+            <stop stopColor="#271709" />
+            <stop offset="1" stopColor="#311D0B" />
+          </linearGradient>
+        </defs>
+      </svg>
+    </div>
+  );
+};
+
+export default CardTable;