PES — Player Evaluation Suite · Developer Handoff

Everything you need to replicate these tools from your own (similarly-shaped, differently-named) data: how the system is built, a complete field-by-field data dictionary for every app, and a live "Source mode" overlay that shows where each on-screen number comes from.

Architecture in one paragraph

PES is 100% static — HTML + JavaScript, no backend and no database. Each app is a single HTML file that loads one or more *_data.js files (a COLS array naming every column + a ROWS array of value arrays) and computes everything client-side in the browser. The five apps are stitched together by a tiny hub (pes.html) that iframes each one under a path prefix and bridges player selection between them. Hosting is therefore just a CDN + auth problem — the live site runs on Cloudflare Pages behind Cloudflare Access.

The data pipeline (and its two provenance layers)

Excel workbook
scores, evals, PVM, WAR, percentiles computed here

→

gen/export .ps1
renames columns → emits *_data.js

→

*_data.js
COLS + ROWS arrays

→

profile .html
reads by key, renders, derives display calcs

Replicating PES means understanding two mappings, and the dictionary documents both:

Excel → JS — the gen_*.ps1 / export_*.ps1 scripts are literally sourceHeader → outputKey column maps. Most heavy math (scores, WAR, PVM, percentiles, eval grades) is computed upstream in the workbook and just passed through. The dictionary's Source column is this layer.
JS → screen — the HTML reads values by key (e.g. g(row,'NFLScore2Y')) and does the client-side work: eval ladders, percentile bars, nearest-neighbor comps, tier outlooks, formatting. The dictionary's Calc and Shown in columns plus each app's Client calcs list cover this layer.

Because your data is the same shape with different names, the fastest path is: open the Field Dictionary, and for each field map your column name to the Source header / key. Once the COLS array matches, the entire render layer works unchanged.

What's in this package

index.html — this site (architecture + searchable dictionary + guide).
dict/*.json + dict_data.js — the raw field dictionaries (data you can diff/import).
overlay/nfl_profiles_sourcemode.html — the NFL app with a live Source mode toggle (the template pattern).
Live mockup: pes-5xd.pages.dev (Cloudflare Access login required — ask the owner to allowlist your email).

Field Dictionary

Every column in every app: its key, where it comes from upstream, its type, how it's computed, and where it appears in the UI. Search and filter freely.

Source Overlay — "Source mode"

The clearest way to convey what each number means: a toggle baked into the live app. Turn it on and every instrumented value gets a dotted underline — hover it to see the field key, upstream source (sheet · header), type, and how it's computed, pulled straight from the dictionary.

Open the NFL Source-mode overlay ↗

Pick any player in the left list, then click 🔍 Source in the top-left. This is built as a copy-paste template on one app (NFL); the same ~30-line pattern (a SV(key, html) wrapper + a tooltip reading NFL_PROV) drops into the other apps. See "Replicate guide" for the snippet.

How it works (so you can extend it)

A small SV(key, html) helper wraps each emitted value in <span class="srcval" data-k="key"> when Source mode is on.
overlay/nfl_prov.js exposes window.NFL_PROV (the NFL dictionary); a single mousemove handler looks up data-k and renders the tooltip.
Nothing else in the app changes — values render and format exactly as before when the toggle is off.

Replicate guide

A practical order of operations to stand up an equivalent app from your own data.

Map your columns to the dictionary. For your target app, open the Field Dictionary and, for each field, find the matching Source header / key. Produce your own name → key crosswalk. This is the whole job — the names differ, the concepts don't.
Emit the data file. Generate a *_data.js with a COLS array of those exact keys (order doesn't matter — code resolves by name) and a ROWS array of value arrays. Match the encodings noted per app (e.g. scores/percent as 0–1, HT as ft*100+in, blanks as ""). Mirror the gen_*.ps1 pattern.
Confirm calc ownership. Fields marked upstream (computed in workbook) must already be computed in your source — the UI only displays them. Fields marked client are derived in-browser (see each app's Client calcs) and you get them for free once inputs exist.
Reuse the render layer. Point the app HTML at your data file. Because it reads by key, it renders unchanged once COLS matches. Keep the eval-ladder order identical (below) so colors/tiers line up.
Verify with Source mode. Add the SV() wrapper + tooltip (snippet below) to spot-check that each on-screen number traces back to the field you intended.