react-spin-prize 2.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2024 Joshua
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,132 @@
+# react-spin-prize
+
+🎡 Modern, fully customizable prize wheel spinner component for React with TypeScript support.
+
+[![npm version](https://img.shields.io/npm/v/react-spin-prize.svg)](https://www.npmjs.com/package/react-spin-prize)
+[![npm downloads](https://img.shields.io/npm/dm/react-spin-prize.svg)](https://www.npmjs.com/package/react-spin-prize)
+[![license](https://img.shields.io/npm/l/react-spin-prize.svg)](https://github.com/joshuaolusayo/react-spin-prize/blob/main/LICENSE)
+
+## 🎮 Live Demo
+
+- **GitHub Pages**: [https://joshuaolusayo.github.io/react-spin-prize/](https://joshuaolusayo.github.io/react-spin-prize/)
+- **CodeSandbox**: [Try it online](https://codesandbox.io/s/react-spin-prize)
+- **StackBlitz**: [Edit in browser](https://stackblitz.com/edit/react-spin-prize)
+
+## Features
+
+- 🎨 Fully customizable colors and styles
+- 🎯 Precise winner selection
+- 🎭 Smooth animations with easing
+- 📱 Responsive and accessible
+- 🔧 TypeScript support
+- 🎪 Modern design with "SPIN" button in the center
+
+## Installation
+
+```bash
+npm install react-spin-prize
+# or
+yarn add react-spin-prize
+# or
+pnpm add react-spin-prize
+```
+
+## Usage
+
+```tsx
+import { SpinnerWheel } from 'react-spin-prize';
+
+const items = [
+  { id: 1, label: 'Prize 1', color: '#FF6B6B' },
+  { id: 2, label: 'Prize 2', color: '#4ECDC4' },
+  { id: 3, label: 'Prize 3', color: '#45B7D1' },
+  { id: 4, label: 'Prize 4', color: '#FFA07A' },
+];
+
+function App() {
+  const handleSpinComplete = (item) => {
+    console.log('Winner:', item);
+  };
+
+  return (
+    <SpinnerWheel
+      items={items}
+      onSpinComplete={handleSpinComplete}
+      size={500}
+      duration={5000}
+    />
+  );
+}
+```
+
+## Props
+
+| Prop | Type | Default | Description |
+|------|------|---------|-------------|
+| `items` | `SpinnerWheelItem[]` | required | Array of items to display on the wheel |
+| `onSpinComplete` | `(item: SpinnerWheelItem) => void` | - | Callback when spin completes |
+| `onButtonClick` | `() => void \| Promise<void>` | - | Callback when center button is clicked |
+| `spinning` | `boolean` | - | External control of spinning state |
+| `duration` | `number` | 5000 | Duration of spin animation in ms |
+| `size` | `number` | 500 | Size of the wheel in pixels |
+| `fontSize` | `number` | 16 | Font size for item labels |
+| `borderWidth` | `number` | 8 | Width of the outer border |
+| `borderColor` | `string` | '#333' | Color of the border |
+| `buttonText` | `string` | 'SPIN' | Text on the center button |
+| `buttonColor` | `string` | '#333' | Background color of the button |
+| `buttonTextColor` | `string` | '#fff' | Text color of the button |
+| `disabled` | `boolean` | false | Disable the spin button |
+| `winningIndex` | `number` | - | Force a specific winner (for testing) |
+| `autoSpinTrigger` | `string \| number \| boolean \| null` | - | Change this value to trigger a programmatic spin |
+
+## SpinnerWheelItem
+
+```typescript
+interface SpinnerWheelItem {
+  id: string | number;
+  label: string;
+  color?: string;        // Background color of the segment
+  textColor?: string;    // Text color (defaults to white)
+}
+```
+
+## Advanced Usage
+
+### Customization Examples
+
+```tsx
+// Custom colors and icon
+<SpinnerWheel
+  items={items}
+  buttonColor="#FF6B6B"
+  buttonTextColor="#FFFFFF"
+  buttonBorderColor="#FFD700"
+  buttonBorderWidth={6}
+  borderColor="#4ECDC4"
+  buttonIcon={<span style={{ fontSize: "48px" }}>🎰</span>}
+/>
+
+// Custom size
+<SpinnerWheel
+  items={items}
+  size={600}
+  buttonSize={100}
+  duration={8000}
+/>
+
+// With button click callback (e.g., for API calls before spinning)
+<SpinnerWheel
+  items={items}
+  onButtonClick={async () => {
+    // Make API call or perform any action when button is clicked
+    await fetchSpinData();
+  }}
+  onSpinComplete={(item) => {
+    console.log('Winner:', item);
+  }}
+/>
+```
+
+## License
+
+MIT

package/dist/SpinnerWheel.d.ts

@@ -0,0 +1,4 @@
+import React from "react";
+import type { SpinnerWheelProps } from "./types";
+export declare const SpinnerWheel: React.FC<SpinnerWheelProps>;
+//# sourceMappingURL=SpinnerWheel.d.ts.map

package/dist/SpinnerWheel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SpinnerWheel.d.ts","sourceRoot":"","sources":["../src/SpinnerWheel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AACxE,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,SAAS,CAAC;AAQjD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwSpD,CAAC"}

package/dist/SpinnerWheel.js

@@ -0,0 +1,184 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from "react";
+const DEFAULT_COLORS = [
+    "#FF6B6B", "#4ECDC4", "#45B7D1", "#FFA07A",
+    "#98D8C8", "#F7DC6F", "#BB8FCE", "#85C1E2",
+    "#F8B739", "#52B788", "#E76F51", "#2A9D8F",
+];
+export const SpinnerWheel = ({ items, onSpinComplete, onButtonClick, spinning: externalSpinning, duration = 5000, size = 500, fontSize = 16, borderWidth = 8, borderColor = "#333", buttonText = "SPIN", buttonColor = "#333", buttonTextColor = "#fff", buttonIcon, buttonSize, buttonBorderColor = "#333", buttonBorderWidth = 4, disabled = false, winningIndex, autoSpinTrigger, }) => {
+    const [rotation, setRotation] = useState(0);
+    const [spinning, setSpinning] = useState(false);
+    const animationRef = useRef();
+    const startTimeRef = useRef();
+    const isSpinning = externalSpinning !== undefined ? externalSpinning : spinning;
+    const radius = size / 2;
+    const centerX = radius;
+    const centerY = radius;
+    const wheelRadius = radius - borderWidth;
+    const buttonRadius = buttonSize !== undefined ? buttonSize : radius * 0.25;
+    const segmentAngle = 360 / items.length;
+    // Clean up animation on unmount
+    useEffect(() => {
+        return () => {
+            if (animationRef.current) {
+                cancelAnimationFrame(animationRef.current);
+            }
+        };
+    }, []);
+    const spin = useCallback(() => {
+        if (spinning || items.length === 0)
+            return;
+        setSpinning(true);
+        const targetIdx = winningIndex !== undefined ? winningIndex : Math.floor(Math.random() * items.length);
+        // FIXED CALCULATION:
+        // The wheel has segments starting at 0° (right/3 o'clock) going counter-clockwise
+        // But we draw them starting at -90° (top/12 o'clock) going clockwise
+        // The pointer is at the top (-90° in drawing space, which is 12 o'clock)
+        //
+        // At rotation = 0:
+        //   - Segment 0 spans from -90° to -90° + segmentAngle
+        //   - Segment 0's center is at: -90° + segmentAngle/2
+        //   - Pointer is at: -90°
+        //   - Offset between them: segmentAngle/2
+        //
+        // To align segment i with pointer:
+        //   - Segment i's center is at: -90° + i * segmentAngle + segmentAngle/2
+        //   - Need to rotate so this equals -90° (pointer position)
+        //   - Rotation needed: -90° - (-90° + i * segmentAngle + segmentAngle/2)
+        //   - Simplifies to: -(i * segmentAngle + segmentAngle/2)
+        //   - = -(i + 0.5) * segmentAngle
+        const rotations = 20 + Math.floor(Math.random() * 10); // 20-30 full rotations for much faster spinning
+        const targetRotation = -(targetIdx + 0.5) * segmentAngle;
+        const startRotation = rotation;
+        const currentNormalized = ((startRotation % 360) + 360) % 360;
+        const targetNormalized = ((targetRotation % 360) + 360) % 360;
+        const deltaRotation = targetNormalized - currentNormalized;
+        const totalRotation = 360 * rotations + deltaRotation;
+        const endRotation = startRotation + totalRotation;
+        startTimeRef.current = performance.now();
+        const animate = (currentTime) => {
+            const elapsed = currentTime - startTimeRef.current;
+            const progress = Math.min(elapsed / duration, 1);
+            // Ease out cubic
+            const eased = 1 - Math.pow(1 - progress, 3);
+            const currentRotation = startRotation + totalRotation * eased;
+            setRotation(currentRotation);
+            if (progress < 1) {
+                animationRef.current = requestAnimationFrame(animate);
+            }
+            else {
+                setSpinning(false);
+                if (onSpinComplete) {
+                    onSpinComplete(items[targetIdx]);
+                }
+            }
+        };
+        animationRef.current = requestAnimationFrame(animate);
+    }, [spinning, items, winningIndex, segmentAngle, rotation, duration, onSpinComplete]);
+    const autoSpinTriggerRef = useRef();
+    const isInitialMount = useRef(true);
+    useEffect(() => {
+        if (autoSpinTrigger === undefined) {
+            autoSpinTriggerRef.current = autoSpinTrigger;
+            return;
+        }
+        // Skip initial mount - don't spin when component first renders
+        if (isInitialMount.current) {
+            isInitialMount.current = false;
+            autoSpinTriggerRef.current = autoSpinTrigger;
+            return;
+        }
+        if (autoSpinTriggerRef.current === autoSpinTrigger) {
+            return;
+        }
+        autoSpinTriggerRef.current = autoSpinTrigger;
+        spin();
+    }, [autoSpinTrigger]);
+    const getColor = (index) => {
+        return items[index].color || DEFAULT_COLORS[index % DEFAULT_COLORS.length];
+    };
+    const getTextColor = (index) => {
+        return items[index].textColor || "#fff";
+    };
+    // Dynamic font size for many items
+    const dynamicFontSize = items.length > 20
+        ? Math.max(8, fontSize - Math.floor((items.length - 20) / 10) * 2)
+        : items.length > 12
+            ? Math.max(10, fontSize - 2)
+            : fontSize;
+    const renderSegments = () => {
+        return items.map((item, index) => {
+            // Draw segments starting from top (-90°) going clockwise
+            const startAngle = (index * segmentAngle - 90) * (Math.PI / 180);
+            const endAngle = ((index + 1) * segmentAngle - 90) * (Math.PI / 180);
+            const midAngle = (startAngle + endAngle) / 2;
+            const x1 = centerX + wheelRadius * Math.cos(startAngle);
+            const y1 = centerY + wheelRadius * Math.sin(startAngle);
+            const x2 = centerX + wheelRadius * Math.cos(endAngle);
+            const y2 = centerY + wheelRadius * Math.sin(endAngle);
+            const pathData = [
+                `M ${centerX} ${centerY}`,
+                `L ${x1} ${y1}`,
+                `A ${wheelRadius} ${wheelRadius} 0 0 1 ${x2} ${y2}`,
+                "Z",
+            ].join(" ");
+            // Text position
+            const textRadius = items.length > 30 ? wheelRadius * 0.65
+                : items.length > 20 ? wheelRadius * 0.68
+                    : wheelRadius * 0.7;
+            const textX = centerX + textRadius * Math.cos(midAngle);
+            const textY = centerY + textRadius * Math.sin(midAngle);
+            const textAngle = (midAngle * 180) / Math.PI + 90;
+            // Truncate long labels
+            let displayLabel = item.label;
+            if (items.length > 30 && displayLabel.length > 8) {
+                displayLabel = displayLabel.substring(0, 7) + "...";
+            }
+            else if (items.length > 20 && displayLabel.length > 12) {
+                displayLabel = displayLabel.substring(0, 11) + "...";
+            }
+            else if (items.length > 12 && displayLabel.length > 15) {
+                displayLabel = displayLabel.substring(0, 14) + "...";
+            }
+            return (_jsxs("g", { children: [_jsx("path", { d: pathData, fill: getColor(index), stroke: borderColor, strokeWidth: 1 }), _jsx("text", { x: textX, y: textY, fill: getTextColor(index), fontSize: dynamicFontSize, fontWeight: "bold", textAnchor: "middle", dominantBaseline: "middle", transform: `rotate(${textAngle} ${textX} ${textY})`, style: { userSelect: "none", pointerEvents: "none" }, children: displayLabel })] }, item.id));
+        });
+    };
+    return (_jsxs("div", { style: { position: "relative", width: size, height: size, margin: "0 auto" }, children: [_jsxs("svg", { width: size, height: size, style: {
+                    transform: `rotate(${rotation}deg)`,
+                    transition: isSpinning ? "none" : "transform 0.3s ease-out",
+                }, children: [_jsx("circle", { cx: centerX, cy: centerY, r: radius - borderWidth / 2, fill: "none", stroke: borderColor, strokeWidth: borderWidth }), renderSegments(), buttonBorderWidth > 0 && (_jsx("circle", { cx: centerX, cy: centerY, r: buttonRadius + buttonBorderWidth / 2, fill: "none", stroke: buttonBorderColor, strokeWidth: buttonBorderWidth })), _jsx("circle", { cx: centerX, cy: centerY, r: buttonRadius, fill: buttonColor })] }), _jsx("svg", { width: size, height: size, style: { position: "absolute", top: 0, left: 0, pointerEvents: "none" }, children: _jsx("polygon", { points: `${centerX},${borderWidth + 30} ${centerX - 15},${borderWidth} ${centerX + 15},${borderWidth}`, fill: "#FF3B3B", stroke: "#fff", strokeWidth: 2, style: { filter: "drop-shadow(0 2px 4px rgba(0,0,0,0.3))" } }) }), _jsx("button", { onClick: () => {
+                    if (onButtonClick) {
+                        onButtonClick();
+                    }
+                    else {
+                        spin();
+                    }
+                }, disabled: disabled || isSpinning, style: {
+                    position: "absolute",
+                    top: "50%",
+                    left: "50%",
+                    transform: "translate(-50%, -50%)",
+                    width: buttonRadius * 2,
+                    height: buttonRadius * 2,
+                    borderRadius: "50%",
+                    backgroundColor: buttonColor,
+                    color: buttonTextColor,
+                    border: "none",
+                    fontSize: buttonIcon ? "inherit" : fontSize * 1.2,
+                    fontWeight: buttonIcon ? "normal" : "bold",
+                    cursor: disabled || isSpinning ? "not-allowed" : "pointer",
+                    opacity: disabled || isSpinning ? 0.6 : 1,
+                    transition: "all 0.2s ease",
+                    boxShadow: "0 4px 8px rgba(0,0,0,0.2)",
+                    zIndex: 10,
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                }, onMouseEnter: (e) => {
+                    if (!disabled && !isSpinning) {
+                        e.currentTarget.style.transform = "translate(-50%, -50%) scale(1.05)";
+                    }
+                }, onMouseLeave: (e) => {
+                    e.currentTarget.style.transform = "translate(-50%, -50%) scale(1)";
+                }, children: buttonIcon || buttonText })] }));
+};

package/dist/index.d.ts

@@ -0,0 +1,3 @@
+export { SpinnerWheel } from "./SpinnerWheel";
+export type { SpinnerWheelProps, SpinnerWheelItem } from "./types";
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,YAAY,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC"}

package/dist/index.js

@@ -0,0 +1 @@
+export { SpinnerWheel } from "./SpinnerWheel";

package/dist/types.d.ts

@@ -0,0 +1,28 @@
+export interface SpinnerWheelItem {
+    id: string | number;
+    label: string;
+    color?: string;
+    textColor?: string;
+}
+export interface SpinnerWheelProps {
+    items: SpinnerWheelItem[];
+    onSpinComplete?: (item: SpinnerWheelItem) => void;
+    onButtonClick?: () => void | Promise<void>;
+    spinning?: boolean;
+    duration?: number;
+    size?: number;
+    fontSize?: number;
+    borderWidth?: number;
+    borderColor?: string;
+    buttonText?: string;
+    buttonColor?: string;
+    buttonTextColor?: string;
+    buttonIcon?: React.ReactNode;
+    buttonSize?: number;
+    buttonBorderColor?: string;
+    buttonBorderWidth?: number;
+    disabled?: boolean;
+    winningIndex?: number;
+    autoSpinTrigger?: string | number | boolean | null;
+}
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAC/B,EAAE,EAAE,MAAM,GAAG,MAAM,CAAC;IACpB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,gBAAgB,EAAE,CAAC;IAC1B,cAAc,CAAC,EAAE,CAAC,IAAI,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAClD,aAAa,CAAC,EAAE,MAAM,IAAI,GAAG,OAAO,CAAC,IAAI,CAAC,CAAC;IAC3C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAC3B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,eAAe,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,OAAO,GAAG,IAAI,CAAC;CACpD"}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,50 @@
+{
+  "name": "react-spin-prize",
+  "version": "2.0.0",
+  "description": "Modern, customizable prize wheel spinner component for React with TypeScript support",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "files": [
+    "dist",
+    "README.md",
+    "LICENSE"
+  ],
+  "scripts": {
+    "build": "tsc",
+    "dev": "tsc --watch",
+    "prepublishOnly": "npm run build"
+  },
+  "keywords": [
+    "react",
+    "spinner",
+    "wheel",
+    "prize",
+    "prize-wheel",
+    "spin-wheel",
+    "component",
+    "typescript",
+    "customizable",
+    "game",
+    "lottery",
+    "roulette"
+  ],
+  "author": "Joshua (https://github.com/joshuaolusayo)",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/joshuaolusayo/react-spin-prize"
+  },
+  "bugs": {
+    "url": "https://github.com/joshuaolusayo/react-spin-prize/issues"
+  },
+  "homepage": "https://joshuaolusayo.github.io/react-spin-prize",
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0",
+    "react-dom": "^18.0.0 || ^19.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "typescript": "^5.0.0"
+  }
+}