Soccer Team Management

A browser-only web app for managing youth soccer rotations during live games. It tracks who is on the field, who is on the bench, playing time by player, time by position, goals, game history, and season totals.

The app is a vanilla HTML/CSS/JavaScript app with browser-native ES modules. There is no build system, backend, or account requirement.

What the App Does

Team setup

• Set the team name.
• Add, rename, and remove roster players.
• Add optional player photos.
• Import players from a league CSV using player_first_name and player_last_name columns.
• Use Backup Team to download a full team JSON backup, and Restore Backup to import it later.
• Clear all locally stored data and reset the app.

Game day setup

• Select which roster players are attending a game.
• Enter the opponent name.
• Set the game date.
• Adjust minutes per half.
• Assign a starting lineup on the same visual field used during live gameplay.
• Start with any number of assigned field players, including short-handed games with fewer than 9 players.
• Pick separate first-half and second-half goalkeepers manually, by spinner, or by explicitly reusing the first-half goalkeeper.
• The goalie spinner avoids players who have already logged GK time in saved season history when possible.
• Plan Lineup in Advance — optionally plan the whole game ahead of kickoff in four "quarters" on the same field diagram: Q1 (start of Half 1), Q2 (mid Half 1), Q3 (start of Half 2) and Q4 (mid Half 2). Q2 and Q4 open pre-filled from the quarter before, so you only move the players who change. Q1 pre-fills the starting lineup, Q3 is offered as a one-tap "Use Planned Half 2 Lineup" at halftime, and the Q2/Q4 changes are loaded into the sub tray by the in-game Planned Subs button when you choose; nothing is substituted automatically. Skipping this leaves the normal live/manual flow unchanged. The plan is saved locally until the game is played or the plan is cleared.

Live game tracking

• Countdown clock for each half.
• Pause and resume the game timer.
• Show the compact game header with half, clock, score, goal button, and controls on one row when space allows.
• Show actual team and opponent names in the score area.
• Track field players, bench players, and active goalkeeper.
• Track total playing time per player.
• Track position-specific time for LF, CF, RF, LM, CM, RM, LD, RD, and GK.
• Pair a bench player with a field spot (tap them in either order) into a sub tray, then make every pair at once with Sub Now.
• Remove any single pending pair with its ✕, and undo the last Sub Now or send-to-bench with ↶ Undo last sub.
• Move a field player directly to the bench.
• Add late-arriving roster players during a game.
• Mark players as removed from the current game.
• Sort the bench by name, playing time, or substitution priority.
• Use color-coded cards to identify players who are under-played, balanced, or over-played.
• Record goals for either team, with optional scorer attribution for your team.
• Minimum play time floor — Set a per-game minimum minutes target; bench cards for players at risk of not meeting it (given remaining game time) are highlighted with an amber border and ⚠ indicator.
• Bench streak timer — Each bench card shows how long that player has been sitting in their current stint (⏳ X:XX), so you can prioritize who goes in next.
• Undo last goal — A single tap reverses the most recently recorded goal (ours or theirs) without leaving the game screen.

Summaries and history

• Show a post-game summary with first-half, second-half, and total time.
• Show position breakdown chips for each player.
• Save completed games into local season history.
• Show a season summary with wins, losses, draws, goals for, goals against, games played, player goals, and total playing time.
• Import a previously exported JSON file through Review Game to view a saved game summary, including a glove marker beside players who played GK.

Other features

• Dark/light theme toggle.
• Local active-game recovery after an interrupted session.
• Player avatar generation when no photo is set.
• Player photo resize/crop before saving.
• PWA metadata through manifest.json.
• Service worker registration through sw.js when served from a supported browser context.

Running the App

Serve the folder locally. Browser-native ES modules and service workers should be tested over HTTP rather than by opening index.html directly:

python -m http.server 8000

Then open:

http://localhost:8000

On some systems the command may be:

python3 -m http.server 8000

Basic Usage

1. Open the app.
2. If no team is configured, choose Set Up My Team.
3. Add the team name and roster.
4. Return to the main game-day screen.
5. Select the players who showed up.
6. Enter the opponent and game date.
7. Set the half length.
8. Choose Set Starting Lineup.
9. Assign players to positions on the field diagram. Assign all players who should start; the app no longer requires a full 9-player lineup.
10. Pick or spin for the first-half and second-half goalkeepers.
11. Start the game.
12. Use the field and bench panels to plan subs, execute subs, record goals, and track playing time.
13. End the game to save it to local game history and view the summary.
14. Use Export Game JSON to download the completed game summary, or Backup Team to download a full team backup.

Data Storage and Privacy

All app data is stored locally in the browser using localStorage.

The main storage keys are:

This is the beginning of the README. Read the rest at the original. Read the full README ↗