{"id":31919499,"url":"https://github.com/techwithty/wheel-spinner","last_synced_at":"2025-10-13T21:44:59.659Z","repository":{"id":312585618,"uuid":"1047983075","full_name":"TechWithTy/wheel-spinner","owner":"TechWithTy","description":"SVG-based Prize Wheel for React/Next.js with icons, adjustable spin timing, modal popup, and cadence lock.","archived":false,"fork":false,"pushed_at":"2025-09-19T17:14:17.000Z","size":34,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"master","last_synced_at":"2025-09-19T19:52:04.801Z","etag":null,"topics":["animation","component","gamification","nextjs","prize-wheel","react","svg","typescript","ui"],"latest_commit_sha":null,"homepage":"https://www.cyebrshoptehc.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/TechWithTy.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-31T16:59:06.000Z","updated_at":"2025-09-19T17:14:20.000Z","dependencies_parsed_at":"2025-08-31T18:36:58.395Z","dependency_job_id":"8d3edc28-c107-428a-8f5e-78273286525c","html_url":"https://github.com/TechWithTy/wheel-spinner","commit_stats":null,"previous_names":["techwithty/wheel-spinner"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/TechWithTy/wheel-spinner","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechWithTy%2Fwheel-spinner","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechWithTy%2Fwheel-spinner/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechWithTy%2Fwheel-spinner/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechWithTy%2Fwheel-spinner/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/TechWithTy","download_url":"https://codeload.github.com/TechWithTy/wheel-spinner/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/TechWithTy%2Fwheel-spinner/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":279017053,"owners_count":26085951,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-10-13T02:00:06.723Z","response_time":61,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["animation","component","gamification","nextjs","prize-wheel","react","svg","typescript","ui"],"created_at":"2025-10-13T21:44:55.155Z","updated_at":"2025-10-13T21:44:59.647Z","avatar_url":"https://github.com/TechWithTy.png","language":"TypeScript","readme":"# PrizeWheel Component\n\nReusable daily/weekly/monthly prize spinner with a custom SVG wheel, modal popup, cadence locking, and local persistence.\n\n- Entry: `external/wheel-spinner/PrizeWheel.tsx`\n- Core: `external/wheel-spinner/components/internal/PrizeWheelCore.tsx`\n- Types: `external/wheel-spinner/types.ts`\n\n## Install\n\nNo extra install required; this package is in-repo and uses plain React + SVG.\n\n## Props\n\n- `cadence`: \"daily\" | \"weekly\" | \"monthly\"\n- `prizes`: Array\u003c{ id: string; label: string; weight?: number; color?: string; icon?: string }\u003e\n- `onWin`: (payload: { prizeId: string; label: string; at: string }) =\u003e void\n- `userId`: string\n- `storageKeyBase?`: string (default: \"prize-wheel\")\n- `disabled?`: boolean\n- `showCountdown?`: boolean (default: true)\n- `autoSpin?`: boolean — auto triggers a spin on mount when eligible\n- `showResultModal?`: boolean — show a simple text result modal after spin\n- `showWheelPopup?`: boolean — show the graphical wheel inside a modal popup\n- `persistence?`: Partial\u003c{\n    getLastSpinAt(userId: string, cadence: Cadence): Promise\u003cstring | null\u003e;\n    setSpinResult(userId: string, cadence: Cadence, result: SpinResult): Promise\u003cvoid\u003e;\n  }\u003e\n- `theme?`: { accentColor?: string; textColor?: string; size?: number; spinUpMs?: number; spinDownMs?: number; textVisibleWithIcons?: boolean }\n- `ariaLabel?`: string\n- `allowAdminOverride?`: boolean — adds a Reset button to clear lock\n\n## Behavior\n\n- Locks after a win until next eligible window by `cadence` (daily/weekly/monthly).\n- Displays countdown until eligible if `showCountdown`.\n- Persists last spin with localStorage by default, or via provided `persistence` hooks.\n- In popup mode (`showWheelPopup`), the modal stays open after spin with a Close button.\n- The wheel supports per-slice `color` and `icon` (emoji or short text) and label rendering.\n- Spin animation time is adjustable via `theme.spinUpMs` and `theme.spinDownMs`.\n\n## Example\n\n```tsx\nimport PrizeWheel from \"@/external/wheel-spinner/PrizeWheel\";\nimport type { Prize } from \"@/external/wheel-spinner/types\";\n\nconst prizes: Prize[] = [\n  { id: \"credits5\", label: \"5 Credits\", weight: 5, color: \"#22c55e\", icon: \"⭐\" },\n  { id: \"credits1\", label: \"1 Credit\", weight: 1, color: \"#f97316\", icon: \"💎\" },\n];\n\nexport default function DemoWheel() {\n  return (\n    \u003cdiv className=\"p-4\"\u003e\n      \u003cPrizeWheel\n        cadence=\"daily\"\n        prizes={prizes}\n        userId=\"user-123\"\n        onWin={(r) =\u003e console.log(\"Won:\", r)}\n        theme={{ accentColor: \"#0ea5e9\", textColor: \"#fff\", size: 240, spinUpMs: 250, spinDownMs: 1400 }}\n        showWheelPopup\n        allowAdminOverride\n      /\u003e\n    \u003c/div\u003e\n  );\n}\n```\n\n## Notes\n\n- Ensure all buttons specify `type=\"button\"` per a11y/biome.\n- Prefer `import type { X }` for type-only imports (Biome).\n- No template literals unless interpolating.\n- When icons are provided, text labels can render too (default). Control with `theme.textVisibleWithIcons`.\n- Lower-level: `SimpleWheel` exposes `textVisible` and also supports `segmentIconNodes` for custom React/SVG icons (e.g., Lucide) per slice.\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechwithty%2Fwheel-spinner","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftechwithty%2Fwheel-spinner","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechwithty%2Fwheel-spinner/lists"}