🏓 Desk Pong

Boring meeting? Endless spreadsheets? Meet your ultimate stealth desk escape.

A lightweight, zero-asset browser extension that renders an authentic, live-animated Table Tennis tournament match at the bottom of any webpage — completely silent, non-intrusive, and hypnotic.

Supports Google Chrome, Mozilla Firefox, Microsoft Edge, Brave, and all Chromium-based browsers.

---

✨ Features

• Procedural Canvas Graphics (Zero External Assets):
  • Authentic ITTF tournament rackets with multi-ply wood core, protective edge tape, orange sponge underlayer, and matte rubber faces (Red & Black).
  • Centered flared wooden handles with grip stripes.
  • Realistic 3D shaded tournament ball with motion trails and collision particle sparks.
• Physical Table Tennis Mechanics:
  • Open-Air Gravity Physics: Parabolic ball arcs with no artificial ceiling bounces.
  • Center Table Net Barrier: Authentic 18px net with net post, clamp, and top tape. Low shots strike the net, trigger wobble physics, and award points to the opponent.
  • Strict Table Tennis Rules:
    • Zero bounces on hitter's side.
    • Exactly 1 bounce on receiver's table before striking (volleys and double-bounces cause immediate faults).
  • 2D Dynamic Footwork: Bats step forward towards the table and backward in X, as well as adjusting Y, to return balls at the peak of their bounce.
• Tournament Match Rules & Scoring:
  • 21 Points (Classic): Win by 2 points with 5-serve rotation.
  • 11 Points (Olympic): Modern Olympic rules with 2-serve rotation.
  • Endless: Continuous rally counter.
  • Official Deuce & Advantage: At 20–20 (or 10–10), the game enters DEUCE, with 1-point alternating serves and live HUD indicators (DEUCE, ADVANTAGE P1, ADVANTAGE P2, GAME POINT, ⚡ GOLDEN POINT).
  • Server Indicator: Live orange dot indicating the player currently serving.
  • Match Winner Celebration: Victory banner and celebratory fireworks.
• Unified Skill Levels:
  • Beginner: Casual pace, gentle arcs, lively rallies.
  • Intermediate: Balanced footwork and steady back-and-forth rallies.
  • Professional: Agile footwork, extended rallies, and 1.45x top-spin smashes.
• Non-Intrusive Web Surfing:
  • pointer-events: none on canvas allows full clicking through to web links beneath.
  • Minimal toolbar with settings popover (⚙️), stop/reset (⏹), and stealth pause/toggle (⏸/🏓).

---

📁 Project Structure

PingPongExtension/
├── src/                          # Shared extension source code
│   ├── content.js                # Core game physics & rendering engine
│   ├── styles.css                # Fixed bottom overlay & toolbar styles
│   └── icons/                    # Extension icons (16px, 48px, 128px, SVG)
├── manifests/                    # Browser-specific manifests
│   ├── manifest.chrome.json      # Manifest V3 for Chrome, Edge, Brave
│   └── manifest.firefox.json     # Manifest V3 for Mozilla Firefox (Gecko)
├── dist/                         # Compiled ready-to-load extension builds
│   ├── chrome/                   # Unpacked folder for Chrome / Edge
│   ├── firefox/                  # Unpacked folder for Firefox
│   ├── desk-pong-chrome.zip      # Packaged Chrome Web Store zip
│   └── desk-pong-firefox.zip     # Packaged Firefox AMO zip
├── scripts/
│   ├── build.js                  # Multi-browser build & packaging pipeline
│   └── generate-icons.js         # Zero-dependency icon generator
├── package.json                  # NPM scripts
├── .gitignore                    # Git ignore rules
└── README.md

---

🚀 Installation & Loading

🌐 Google Chrome / Microsoft Edge / Brave / Opera

1. Clone or download this repository.
2. Build the project (or load directly from dist/chrome):

   npm run build

3. Open your browser and navigate to:
   • Chrome: chrome://extensions
   • Edge: edge://extensions
   • Brave: brave://extensions
4. Toggle on Developer mode (top-right corner).
5. Click Load unpacked and select the dist/chrome folder (or the project root).
6. Open any website to see the Ping Pong court in action!

---

🦊 Mozilla Firefox

1. Open Firefox and navigate to about:debugging#/runtime/this-firefox.
2. Click Load Temporary Add-on....
3. Select dist/firefox/manifest.json.
4. Open any webpage to enjoy the table tennis overlay in Firefox!

---

🛠️ Development & Build Commands

# Install dependencies (none required for runtime)
npm install

# Build both Chrome & Firefox extensions into dist/
npm run build

# Build only Chrome target
npm run build:chrome

# Build only Firefox target
npm run build:firefox

# Build and generate publishable ZIP packages for Chrome Web Store & Firefox AMO
npm run package

# Re-generate icon assets
npm run icons

---

🐙 Publishing to GitHub

To push this repository to your GitHub account:

# 1. Initialize git and stage files
git init
git add .
git commit -m "feat: initial commit for multi-browser PingPongExtension"

# 2. Create and push to your GitHub repository
# (Using GitHub CLI:)
gh repo create PingPongExtension --public --source=. --push

# (Or using standard Git remote:)
git remote add origin https://github.com/<YOUR_USERNAME>/PingPongExtension.git
git branch -M main
git push -u origin main

---

📜 License

MIT License. Open source and free to use or modify.