🏒 ShotMat --- Hockey Shot Map

---

📍 Live Demo

👉 https://dkranzmat.github.io/shotmat/

---

🏒 Overview

ShotMat is an interactive hockey analytics tool that plots shot events on a full NHL-regulation rink.
It uses React, TypeScript, Tailwind CSS, and SVG to create a fast, clean, and fully static tool that works for youth teams, NHL teams, or custom rosters.

---

🧠 Features

🎯 Shot Tracking & Visualization

• Precise x/y coordinate plotting
• SVG-based rink for crisp rendering
• Color-coded shot results:
  • 🟦 Shot\
  • 🟨 Miss\
  • 🟥 Goal\
  • ⬛ Blocked

🧬 Smart Filtering

• Filter by team, period, shot result
• Home/Away auto-detected from CSV
• Clean 3-column filter UI

👤 Player Tracking

• Select a player to isolate only their shots
• Auto-matching via playerNumber
• Dynamic header: "Tracking shots for #67"

🔎 Search & Roster Integration

• Supports live search + fuzzy search (MiniSearch ready)
• Simple player model with name + jersey number

🎨 Theme Modes

• Sabres Mode (navy + gold)
• Ice Mode (light/neutral)

📦 CSV Pipeline

• Load structured hockey shot CSVs
• Auto-parse periods, teams, results, coordinates
• Optional fields: playerNumber, xg, shot_type, handed

⚡ Performance & Deployment

• Vite-powered development
• Zero backend
• GitHub Action automatically rebuilds & deploys to Pages

---

⚙️ Tech Stack

• React + TypeScript
• Vite
• Tailwind CSS
• SVG Rink Rendering
• GitHub Pages (static hosting)
• GitHub Actions (auto deploy)
• Optional search powered by MiniSearch

---

🚀 Getting Started

git clone https://github.com/DKranzMAT/shotmat.git
cd shotmat
npm install
npm run dev
npm run build

Deployment happens automatically when you push to main.

---

🖼️ App Preview (v2.0)

---

🧑‍💻 Author

David Kranz
Front-End Developer • UI Engineer
Portfolio: https://davidkranzwordpress.com GitHub: https://github.com/DKranzMAT