Consolidate shared formatters and court constants in court.js

Author: Lysandre Costes

website/js/clutch.js

@@ -10,7 +10,7 @@
   const playerSel = document.getElementById('clutch-player');
   const tipEl = document.getElementById('clutch-tooltip');
 
-  const { W, H, toX, toY, drawCourt } = Court;
+  const { W, H, toX, toY, drawCourt, pct } = Court;
   const GRID = 25;
   const HEX_W = 50 / GRID;
   const HEX_H = HEX_W * Math.sqrt(3) / 2;
@@ -51,8 +51,6 @@
     .interpolator(t => d3.interpolateRdBu(1 - t))
     .clamp(true);
 
-  function pct(v) { return `${(v * 100).toFixed(1)}%`; }
-
   function showTip(event, html, containerSvg = svg.node()) {
     const rect = containerSvg.closest('.section-viz').getBoundingClientRect();
     tipEl.style.left = `${event.clientX - rect.left + 12}px`;

website/js/court.js

@@ -85,5 +85,32 @@ const Court = (() => {
     return g;
   }
 
-  return { SCALE, W, H, BX, BY, toX, toY, drawCourt };
+  const pct = v => `${(v * 100).toFixed(1)}%`;
+
+  const TEAM_SHORT_NAMES = {
+    'Golden State Warriors': 'Warriors',
+    'Los Angeles Lakers':    'Lakers',
+    'Los Angeles Clippers':  'Clippers',
+    'Oklahoma City Thunder': 'Thunder',
+    'Cleveland Cavaliers':   'Cavaliers',
+    'Houston Rockets':       'Rockets',
+    'Brooklyn Nets':         'Nets',
+    'Philadelphia 76ers':    '76ers',
+    'Washington Wizards':    'Wizards',
+    'San Antonio Spurs':     'Spurs',
+    'Boston Celtics':        'Celtics',
+    'Denver Nuggets':        'Nuggets',
+    'Miami Heat':            'Heat',
+    'Milwaukee Bucks':       'Bucks',
+    'Phoenix Suns':          'Suns',
+    'Dallas Mavericks':      'Mavs',
+    'New York Knicks':       'Knicks',
+  };
+  const shortTeam = name => TEAM_SHORT_NAMES[name] || name;
+
+  return {
+    SCALE, W, H, BX, BY,
+    CORNER_Y_DATA, CORNER_SVG_Y, CORNER_SVG_XL, CORNER_SVG_XR, R3, FT_SVG_Y,
+    toX, toY, drawCourt, pct, shortTeam,
+  };
 })();

website/js/fingerprint.js

@@ -7,12 +7,11 @@
   const wrapEl = document.querySelector('.fingerprint-wrap');
 
   const C = Court;
-  const CORNER_Y_DATA = 5.25 + Math.sqrt(23.75 ** 2 - 22 ** 2);
-  const CORNER_SVG_Y = C.toY(CORNER_Y_DATA);
-  const CORNER_XL = C.toX(-22);
-  const CORNER_XR = C.toX(22);
-  const FT_Y = C.toY(19);
-  const R3_PX = 23.75 * C.SCALE;
+  const CORNER_SVG_Y = C.CORNER_SVG_Y;
+  const CORNER_XL = C.CORNER_SVG_XL;
+  const CORNER_XR = C.CORNER_SVG_XR;
+  const FT_Y = C.FT_SVG_Y;
+  const R3_PX = C.R3;
   const RESTRICTED_R = 40;
   const restrictedCircle = `M ${C.BX},${C.BY} m -${RESTRICTED_R},0 a ${RESTRICTED_R},${RESTRICTED_R} 0 1,0 ${RESTRICTED_R * 2},0 a ${RESTRICTED_R},${RESTRICTED_R} 0 1,0 -${RESTRICTED_R * 2},0`;
   const paintRect = `M ${C.toX(-8)},${C.H} L ${C.toX(8)},${C.H} L ${C.toX(8)},${FT_Y} L ${C.toX(-8)},${FT_Y} Z`;
@@ -50,7 +49,7 @@
   Court.drawCourt(miniCourtSvg, { color: '#505070', opacity: 0.7, lw: 1 });
   const MINI_COURT_LINES = miniCourtSvg.select('.court-lines').node().outerHTML;
 
-  function pct(v) { return `${(v * 100).toFixed(1)}%`; }
+  const pct = Court.pct;
 
   function zoneInsight(d, overallFg) {
     if (!d.n) return 'No shots recorded in this zone.';

website/js/player-evolution.js

@@ -36,19 +36,7 @@
   const innerW = W - margin.left - margin.right;
   const innerH = H - margin.top - margin.bottom;
 
-  function pct(v) { return `${(v * 100).toFixed(1)}%`; }
-  function shortTeam(team) {
-    return team
-      .replace('Golden State Warriors', 'Warriors')
-      .replace('Los Angeles Lakers', 'Lakers')
-      .replace('Los Angeles Clippers', 'Clippers')
-      .replace('Oklahoma City Thunder', 'Thunder')
-      .replace('Cleveland Cavaliers', 'Cavaliers')
-      .replace('Houston Rockets', 'Rockets')
-      .replace('Brooklyn Nets', 'Nets')
-      .replace('Philadelphia 76ers', '76ers')
-      .replace('Washington Wizards', 'Wizards');
-  }
+  const { pct, shortTeam } = Court;
 
   function zoneShare(stint, zone) {
     return stint.zones.find(z => z.zone === zone)?.share || 0;

website/js/revolution.js

@@ -10,7 +10,7 @@
   const tipEl = document.getElementById('rev-tooltip');
   const mapWrap = svg.node().closest('.map-wrap');
 
-  const { W, H, toX, toY, drawCourt } = Court;
+  const { W, H, toX, toY, drawCourt, pct } = Court;
   const GRID = 25;
   const HEX_W = 50 / GRID;
   const HEX_H = HEX_W * Math.sqrt(3) / 2;
@@ -28,8 +28,6 @@
     .interpolator(t => d3.interpolateRdBu(1 - t))
     .clamp(true);
 
-  function pct(v) { return `${(v * 100).toFixed(1)}%`; }
-
   function showTip(event, html) {
     if (!tipEl || !mapWrap) return;
     const rect = mapWrap.getBoundingClientRect();

website/js/team.js

@@ -47,34 +47,13 @@
   });
   seasonSel.value = teamsRaw.seasons[teamsRaw.seasons.length - 1];
 
-  function pct(v) { return `${(v * 100).toFixed(1)}%`; }
+  const { pct, shortTeam } = Court;
   function ppDiff(teamShare, leagueShare) {
     const d = (teamShare - leagueShare) * 100;
     const sign = d > 0 ? '+' : '';
     return `${sign}${d.toFixed(1)} pp`;
   }
 
-  function shortTeam(name) {
-    return name
-      .replace('Golden State Warriors', 'Warriors')
-      .replace('Los Angeles Lakers', 'Lakers')
-      .replace('Los Angeles Clippers', 'Clippers')
-      .replace('Oklahoma City Thunder', 'Thunder')
-      .replace('Cleveland Cavaliers', 'Cavaliers')
-      .replace('Houston Rockets', 'Rockets')
-      .replace('Brooklyn Nets', 'Nets')
-      .replace('Philadelphia 76ers', '76ers')
-      .replace('Washington Wizards', 'Wizards')
-      .replace('San Antonio Spurs', 'Spurs')
-      .replace('Boston Celtics', 'Celtics')
-      .replace('Denver Nuggets', 'Nuggets')
-      .replace('Miami Heat', 'Heat')
-      .replace('Milwaukee Bucks', 'Bucks')
-      .replace('Phoenix Suns', 'Suns')
-      .replace('Dallas Mavericks', 'Mavs')
-      .replace('New York Knicks', 'Knicks');
-  }
-
   function populateTeams() {
     const season = seasonSel.value;
     const teams = teamsRaw.teams_by_season[season] || [];