# Sports-Tagging App: Shot Plotter + Report

The Sports-Tagging App is a lightweight, offline-friendly toolkit for tagging, analyzing, and reporting shots in Hockey and Floorball. It includes two core tools for each sport:

- Shot Plotter: Quickly capture events and shot locations during games.
- Report: Explore, filter, and visualize shots with a Shot Map, heat maps, and summary KPIs.

This guide walks you through how to use both apps, plus tips for power users.

---

## Highlights

- Fast, keyboard-friendly tagging
- Configurable shortcuts and custom event types
- Smart multi-select slicers with Clear All and viewport-aware dropdowns
- Consistent shapes across Shot Plotter and Report → Shot Map
- Offline-first with localStorage persistence

---

## App Structure

Each sport has its own pair of tools:

- Hockey: `hockey/index.html` (Shot Plotter), `hockey/report.html` (Report)
- Floorball: `floorball/index.html` (Shot Plotter), `floorball/report.html` (Report)

Rinks are rendered on canvas for pixel-perfect plotting and fast redraws.

---

## Quick Start

1. Open the app in your browser (e.g., `hockey/index.html`).
2. Set team names in the header if available.
3. Use the Shot details panel to select Event, Team, Period, Strength, and Perspective.
4. Click on the rink to add shots. Undo anytime with the Undo button.
5. Switch to the Report page to analyze using slicers and the Shot Map.

![Hockey Shot Plotter](../hockey/hockey-rink.png)

---

## Shot Plotter: Tagging Shots

### Shot details panel

- Event: Choose from built-in or custom events (add more via Add Option…).
- Team: Tag Home or Away events.
- Period: Select the current period.
- Strength: 5v5, 4v5, PP, PK, etc. (fully customizable)
- Perspective: Event or Goal-based perspective.
- Players: Quick-enter P1/P2(/P3), lines, or full numeric rosters.

### Adding a shot

- Click on the rink to add a shot with current details.
- Coordinates are captured; table logs event with timestamp.
- Use Undo to remove the last shot, or Hide Plots to refresh the canvas without deleting data.

### Aim plotting (optional)

- Toggle “Add Shot Aim” to draw aim points on a reference image.
- Confirm to attach aim coordinates to an Event Number.

![Floorball Rink](../bane.png)

---

## Report: Filter and Explore

Open `hockey/report.html` or `floorball/report.html`.

### Slicers

- Multi-select slicers support Clear All and consistent chevrons.
- Values and dropdown options are 14px and white for readability.
- On-field/On-ice slicer uses AND logic (all selected players must be on); other slicers use OR logic.
- Dropdowns smartly align within the viewport and can overflow the panel when needed.

### Shot Map

- Shapes reflect your event mappings from the Shot Plotter (shared across apps).
- Legends reflect Home/Away color settings.
- Toggle perspective to view shots relative to attacking direction.

### Heat Map and KPIs

- Heat Map shows density of shots.
- KPIs summarize counts by zone, team, event, and period.

![Hockey Net](../hockey/hockeynet.png)

---

## Power Features

### Custom Event Types + Shapes

- Add custom events via the “Add Option…” item in the Event dropdown.
- Choose a glyph for the event (circle, square, triangle, diamond, star, etc.).
- Shapes stay in sync between Shot Plotter and Report → Shot Map.

### Configurable Shortcuts

- Open “Set Shortcuts” to customize keys:
  - Toggle Team, set P1/P2, delete P1/P2, prev/next Event number, play/pause video.
- Shortcuts persist per app.

### “Add Shot details to data” mode

- Enable the checkbox to attach current shot details to an existing Event Number.
- Rink clicks won’t add new events; they won’t clear quick-entry fields while this mode is on.
- Confirm applies only non-empty fields and auto-increments the Event Number.

---

## Data Persistence

- localStorage is used for shots, UI state, shapes, filters, and shortcuts.
- Data auto-refreshes across tabs via storage events.

---

## Tips and Best Practices

- Keep player number lists space-separated (e.g., `13 88 91 4 77 G`).
- Use perspective correctly to maintain consistent left/right mapping in the Shot Map.
- Periodically export CSV for backups and sharing.

---

## Troubleshooting

- If the layout looks off, ensure you didn’t paste blocks into the header area.
- Reset Shot details to defaults from the panel actions if dropdowns feel cluttered.
- Hide plots for a visual refresh without deleting your data.

---

## What’s Next

- Centralized CSS styling for shared components across both apps.
- More glyphs and color palettes for event types.
- Optional cloud sync for rosters and shots.

---

Images used in this guide:

- Hockey rink: `hockey/hockey-rink.png`
- Floorball rink: `bane.png`
- Hockey net: `hockey/hockeynet.png`

These files are part of the repo and referenced using relative paths so they render when viewed in GitHub or a static site.