Basketball Scoreboard Usage and Build Guide

This document provides an overview of how to use the Basketball Scoreboard Electron application and how to build installers for different platforms.

---

Table of Contents

1. Introduction

2. Prerequisites

3. Installation & Development

4. Application Usage

   • Main Menu
   • Timer
   • Score Entry
   • Data Receiver

5. Building Installers

   • Windows
   • macOS
   • Linux

6. Directory Structure

7. Configuration Files

---

Introduction

The Basketball Scoreboard is a cross‑platform desktop application built with Vite, Vue 3, and Electron. It supports:

• Game timer with NBA (12') or FIBA (10') options and shot clock controls.
• Manual score entry and foul tracking.
• Real‑time data reception via WebSocket.
• Internationalization (i18n) support. (English, Simplified Chinese, Traditional Chinese, Japanese)

---

Prerequisites

• Node.js v22+ (LTS recommended)
• npm or pnpm
• Git (optional)

---

Installation & Development

1. Clone the repository

   git clone https://github.com/sdy623/basketball‑scoreboard.git
   cd basketball‑scoreboard

2. Install dependencies

   npm install
   # or
   pnpm install

3. Start in development mode

   npm run dev

   This will launch the Electron app with hot‑reload for both the main process and renderer.

---

Application Usage

Below are the primary screens and their controls.

Main Menu

• Timer: Navigate to the game timer view.
• Data Entry: Navigate to manual score and foul entry.
• Receiver: Navigate to WebSocket data receiver.
• Language Selector: Switch between supported languages.

---

Timer

• Period Selector: Choose NBA (12′) or FIBA (10′).

• Game Clock: Displays minutes, seconds, and tenths.

• Shot Clock: Displays shot clock (24 or 14 seconds).

• Controls:

  • Start: Begin or resume the timer.

  • Stop: Pause the timer.

    Hint: You can also press Space key to control the start or puase the timer.

  • Preset: Instantly set the shot clock to 24 or 14 seconds.

• Connection Panel:

  • IP Address & Port: Configure WebSocket server for broadcasting clock updates.
  • Connect: Connect to the specified address.

---

Score Data Entry

• Home / Visitor Names: Input team names (lock icon to fix names).

• Scoreboard: Manual buttons to add or subtract points (+1, +2, +3, -1).

• Fouls: Buttons to track fouls for each team per period.

• Period Buttons: Mark end of period (Q1–Q4, OT).

• Totals Table: Displays cumulative and per‑period statistics.

• Local WebSocket:

  • IP / Port: Bind server for external data clients.
  • Start / Stop: Begin or end broadcasting score data.

• Clocks: Mini clock and shot‑clock display replicate timer view.

---

Score Data Receiver

• Receiver IP & Port: Connect to an existing data source.

• Connection Status: Red dot indicates disconnected, green for connected.

• Live Display:

  • Current Period
  • Quarter Clock
  • Shot Clock

• Statistics Table: Read‑only display of home/visitor scores, fouls, and period breakdown.

---

Development Mode

Install dependencies

npm install 

Run in dev mode

npm run dev

Building Installers

The project uses electron-builder for creating native installers.

Windows

npm run build:win

• Generates an NSIS installer in dist_electron/.
• Installer executable: Basketball Scoreboard Setup {version}.exe.

macOS

npm run build:mac

• Generates a .dmg and .app bundle in dist_electron/.

Linux

npm run build:linux

• Generates AppImage, Snap, and Deb packages in dist_electron/.

---

Directory Structure

basketball‑scoreboard/
├─ src/
│  ├─ main/        # Electron main process (JS)
│  ├─ preload/     # Preload script (TS)
│  └─ renderer/    # Vue front-end (TS + Vue SFC)
│     ├─ assets/   # Images, icons, etc.
│     └─ src/      # Vue components & entry
├─ build/          # Electron-builder resources (icons, plist)
├─ dist_electron/  # Output installers and packaged app
├─ electron.vite.config.ts
├─ vite.config.ts  # Vite + Electron config
├─ package.json
└─ README.md       # This guide

---

Configuration Files

• electron.vite.config.ts: Defines Electron-Vite bundling for main, preload, and renderer.
• vite.config.ts: Additional Vite configuration for renderer.
• package.json#build: Electron-builder options (appId, productName, icons, targets, directories).

---