{"id":50816948,"url":"https://github.com/doughknee/ncpa-ticker","last_synced_at":"2026-06-13T10:05:09.817Z","repository":{"id":317410203,"uuid":"1067297641","full_name":"doughknee/ncpa-ticker","owner":"doughknee","description":"Ticker project for NCPA-related scores or updates.","archived":false,"fork":false,"pushed_at":"2026-02-16T22:54:56.000Z","size":847,"stargazers_count":1,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2026-06-06T01:18:51.747Z","etag":null,"topics":["javascript","sports","ticker","web-app"],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mpl-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/doughknee.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"AGENTS.md","dco":null,"cla":null}},"created_at":"2025-09-30T16:51:06.000Z","updated_at":"2026-05-10T19:43:53.000Z","dependencies_parsed_at":"2025-09-30T18:31:06.726Z","dependency_job_id":null,"html_url":"https://github.com/doughknee/ncpa-ticker","commit_stats":null,"previous_names":["brandon-relentnet/ncpa-ticker","doughknee/ncpa-ticker"],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/doughknee/ncpa-ticker","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doughknee%2Fncpa-ticker","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doughknee%2Fncpa-ticker/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doughknee%2Fncpa-ticker/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doughknee%2Fncpa-ticker/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/doughknee","download_url":"https://codeload.github.com/doughknee/ncpa-ticker/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/doughknee%2Fncpa-ticker/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":34279899,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-26T15:22:16.424Z","status":"online","status_checked_at":"2026-06-13T02:00:06.617Z","response_time":62,"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":["javascript","sports","ticker","web-app"],"created_at":"2026-06-13T10:05:09.001Z","updated_at":"2026-06-13T10:05:09.810Z","avatar_url":"https://github.com/doughknee.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Pickleball Ticker\n\nPickleball Ticker is a small React + Vite application for operators who need to style and broadcast a live pickleball scoreboard. The app pulls match details from the National College Pickleball Association (NCPA) API, lets you tune the color palette and overlay a custom logo, then mirrors the configured layout on a dedicated ticker route for capture cards or stream overlays.\n\n## Highlights\n- **Live theme controls** – Adjust header, badge, body, score column, and ticker background colors with HSL pickers while previewing accessible text contrast in real time.\n- **NCPA match data** – Fetches game results, teams, and player rosters by match ID using the official API and summarizes the current series status.\n- **Live scoring push** – Subscribes to the NCPA websocket feed per match ID and applies `updateGames` events as soon as referees post them.\n- **Layout-ready ticker view** – `/ticker` renders the Scoreboard component full screen with the latest settings, ideal for OBS or browser sources.\n- **Cross-tab sync** – Theme selections, match state, and ticker payload broadcast between browser tabs via `localStorage`, making it easy to keep the ticker window up to date.\n- **Logo overlay tools** – Upload a badge, toggle transparency, hide the built-in NCPA text, and drag to reposition the image directly in the preview.\n\n## Getting Started\n### Prerequisites\n- Node.js 18.0 or newer (Vite 7 requires modern Node versions)\n- npm 9+\n\n### Install dependencies\n```bash\nnpm install\n```\n\n### Configure environment\nCreate a `.env.local` file in the project root with your NCPA credentials:\n```bash\nVITE_NCPA_API_KEY=your-api-key\n# Optional overrides\nVITE_NCPA_API_BASE=https://tournaments.ncpaofficial.com\nVITE_NCPA_SOCKET_URL=https://tournaments.ncpaofficial.com\nVITE_DEFAULT_MATCH_ID=5092\n```\nThe API key is required for match lookups; provide the host root for `VITE_NCPA_API_BASE` and the app will append `/api` automatically. The default match ID seeds the Settings view on first load.\n\nMirror required variables in `.env.example` if you plan to share setup expectations with collaborators; never commit real secrets.\n\n### Run the app\n```bash\nnpm run dev\n```\nThe development server runs on \u003chttp://localhost:5173\u003e. Navigate to `/settings` to control the display. Opening `/ticker` in a separate tab or browser source will reflect the latest synced configuration.\n\n## Usage Notes\n- **Loading matches** – Enter a numeric match ID and click **Load**. The app snapshots `get-games`/`get-match` once for context, then joins the `match-\u003cid\u003e` websocket room and listens for `updateGames` pushes from the live scoring table.\n- **Active game selector** – Use **Prev/Next** to select which game in the series the scoreboard highlights. The footer displays match rules and status such as `Game 2 of 3 / First to 11 (win by 2)`.\n- **Text color handling** – Automatic contrast picks black/white for header, badge, body, and score cells. Enabling Manual mode lets you dial an HSL value that applies across the board.\n- **Logo adjustments** – After uploading, drag the badge in the preview (Settings view only). Position, transparency, text toggles, and zoom level (up to 1000%) are stored with the theme.\n- **Team logo scale** – Use the slider in Design controls to resize team crests as much as 10× without affecting the rest of the layout.\n- **Badge background** – Tune the NCPA badge color independently to match your broadcast palette without affecting the header strip.\n- **Content overrides** – Use the Content Overrides accordion to replace any header, player name, score, or footer while the rest of the ticker continues to sync from the API.\n- **Apply Update To Ticker** – Broadcasts the latest match payload and theme settings to other tabs. Automatic syncing also happens whenever state changes, unless a tab is mid-update.\n\n## Project Structure\n```\nsrc/\n  App.jsx              # Top-level router, theme state, match loading, sync\n  main.jsx             # React entry point\n  components/\n    Scoreboard.jsx     # Presentation for the ticker/preview\n  pages/\n    Settings.jsx       # Control panel UI and preview\n    Ticker.jsx         # Full-screen scoreboard output\n  utils/\n    colors.js          # HSL helpers and contrast utilities\n    logo.js            # Logo default + normalization helpers\n    matchService.js    # Fetches match data from the NCPA API\n    matchState.js      # Derives active game metadata for views\n    officialAdapter.js # Normalizes official API payloads\n```\nTailwind CSS utilities are available via `@import \"tailwindcss\";` in `src/App.css`. Static assets ship from `public/`, including the default NCPA mark.\n\n## Development Workflow\nCommon npm scripts:\n- `npm run dev` – Start the Vite development server with HMR.\n- `npm run build` – Produce a production build in `dist/`.\n- `npm run preview` – Preview the production bundle locally.\n- `npm run lint` – Run ESLint with the project rules (`eslint.config.js`).\n\nBefore committing, run linting and, once tests exist, ensure the Vitest suite passes. Keep feature-specific utilities close to their consumers and co-locate future tests as `*.test.jsx` files.\n\n## Data \u0026 Persistence Details\n- **API endpoints** – Managed in `src/utils/matchService.js`; change `VITE_NCPA_API_BASE` to point at staging environments (supply the host root and the client adds `/api` automatically).\n- **Websocket feed** – Configured via `VITE_NCPA_SOCKET_URL` (defaults to the production host). Each ticker tab maintains its own connection and rejoins on match switches.\n- **Theme persistence** – Saved to `localStorage` under `pickleball-ticker-theme` so color choices and logo settings survive reloads.\n- **Cross-tab sync** – Broadcasts via `pickleball-ticker-sync`. When a message comes from another tab, the receiving tab temporarily suppresses responding to avoid loops.\n- **Fallback content** – If a match has no active game, the scoreboard displays a neutral “No game data available” message.\n\n## Troubleshooting\n- **Missing API key** – The Settings view will surface “Failed to load match data” if `VITE_NCPA_API_KEY` is absent or incorrect; check network calls in DevTools for details.\n- **Blocked remote calls** – When running offline or behind a firewall, mock `fetchMatchBundle` or inject local JSON to keep developing UI changes.\n- **Layout capture** – For streaming setups, open `/ticker` in a new browser window, set the background color to match your scene, and use a window capture or browser source.\n\n## Roadmap Ideas\n- Add Vitest + Testing Library specs covering loading, success, and error states for `SettingsPage` and `Scoreboard`.\n- Support manual entry overrides when the API is unavailable.\n- Expose additional branding controls (fonts, gradients, or per-team colors).\n\n## License\nCopyright © 2024. See project owners for licensing details.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoughknee%2Fncpa-ticker","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdoughknee%2Fncpa-ticker","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdoughknee%2Fncpa-ticker/lists"}