🏀 Basketball Graphics

Interactive NBA scorebug editor with real-time validation and demo playback
View Live Demo · Report Bug

Table of Contents

About | Screenshots | Key Features | Built With | Local Project Setup | Running the Project | Project Structure | Contact

About

Basketball Graphics is a web-based scorebug editor designed for NBA game graphics. It provides an interactive interface for managing and displaying real-time game information including scores, team data, game clock, shot clock, and quarter information.

The application features three distinct modes:

• View Mode: Display the current scorebug state
• Edit Mode: Modify all scorebug fields with real-time validation
• Demo Mode: Watch synchronized video playback with live scorebug updates

Perfect for graphics operators, broadcast professionals, or developers building sports visualization tools.

Back to Top

Screenshots

Back to Top

Key Features

🎛️ Edit Mode

• Click any field on the scorebug to edit inline
• Team selection dropdown with search functionality
• Quarter selection dropdown
• Inline score, clock, and record editing

✅ Real-Time Validation

• Game Clock: MM:SS format, max 12:00
• Shot Clock: 0-24 seconds
• Scores: 0-999 range
• Team Records: (X-X) or (XX-XX) format, wins + losses ≤ 82
• Quarters: 1st, 2nd, 3rd, 4th, OT, OT1-OT5

🎬 Demo Playback

• Synchronized video playback with scorebug updates
• Game clock countdown synced to video timeline
• Score updates triggered at specific video timestamps
• Play/pause and seek controls

🏀 NBA Team Integration

• All 30 NBA teams included
• Official team colors and logos
• Searchable team selector with keyboard navigation

⌨️ Keyboard Shortcuts

Key	Action
E	Enter Edit Mode
D	Enter Demo Mode
S	Save Changes (in Edit Mode)
Esc	Cancel/Exit Current Mode

Back to Top

Built With

Back to Top

Local Project Setup

Git and Node.js are required to run this project locally.

Clone the repo

git clone https://github.com/AlexVCS/basketball-graphics.git
cd basketball-graphics
npm install

No environment variables are required for local development.

Back to Top

Running the Project

Development

Start the development server with hot module replacement:

npm run dev

The app will be available at http://localhost:5173

Production Build

Build the project for production:

npm run build

Preview the production build locally:

npm run preview

Linting

Run ESLint to check for code issues:

npm run lint

Back to Top

Project Structure

src/
├── components/         # React components
│   ├── Scorebug.tsx   # Main scorebug display
│   ├── EditControls.tsx # Mode switching controls
│   ├── GraphicsLayout.tsx # Main layout and state
│   ├── TeamSelector.tsx # Team dropdown selector
│   └── DemoPlayground.tsx # Video playback component
├── hooks/             # Custom React hooks
│   └── useDemoPlayback.ts # Video sync hook
├── types/             # TypeScript definitions
│   └── scorebug.ts    # Core interfaces
├── data/              # Static data
│   ├── nbaTeams.ts    # NBA team information
│   └── demoScenarios.ts # Demo configurations
├── utils/             # Utility functions
│   └── validationUtils.ts # Field validation
└── styles/            # Global styles

Back to Top

Contact

Alex Curtis-Slep

Back to Top