DataDrivenHockey

<!– wp:html –>
<style>
.player-card-container {
padding: 15px;
font-family: ‘Roboto’, -apple-system, BlinkMacSystemFont, ‘Segoe UI’, sans-serif;
max-width: 700px;
margin: 0 auto;
}

.page-title {
font-size: 28px;
text-align: center;
font-weight: 700;
color: #000;
margin-bottom: 25px;
}

/* Timeframe Selector Styles */
.timeframe-selector {
margin-bottom: 20px;
}

.timeframe-selector label {
display: block;
font-size: 15px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
}

.timeframe-selector select {
width: 100%;
padding: 12px 16px;
font-size: 16px;
border: 2px solid #e5e7eb;
border-radius: 8px;
background: white;
color: #1f2937;
cursor: pointer;
transition: border-color 0.2s;
box-sizing: border-box;
}

.timeframe-selector select:hover {
border-color: #00D9FF;
}

.timeframe-selector select:focus {
outline: none;
border-color: #00D9FF;
box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1);
}

/* GOA Type Selector Styles */
.goa-type-selector {
margin-bottom: 20px;
}

.goa-type-selector label {
display: block;
font-size: 15px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
}

.goa-type-selector select {
width: 100%;
padding: 12px 16px;
font-size: 16px;
border: 2px solid #e5e7eb;
border-radius: 8px;
background: white;
color: #1f2937;
cursor: pointer;
transition: border-color 0.2s;
box-sizing: border-box;
}

.goa-type-selector select:hover {
border-color: #00D9FF;
}

.goa-type-selector select:focus {
outline: none;
border-color: #00D9FF;
box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1);
}

/* Player Selector Styles */
.player-selector {
margin-bottom: 25px;
position: relative;
}

.player-selector label {
display: block;
font-size: 15px;
font-weight: 600;
color: #374151;
margin-bottom: 8px;
}

.search-wrapper {
position: relative;
}

.player-selector input {
width: 100%;
padding: 12px 16px;
font-size: 16px;
border: 2px solid #e5e7eb;
border-radius: 8px;
background: white;
color: #1f2937;
cursor: text;
transition: border-color 0.2s;
box-sizing: border-box;
}

.player-selector input:hover {
border-color: #00D9FF;
}

.player-selector input:focus {
outline: none;
border-color: #00D9FF;
box-shadow: 0 0 0 3px rgba(0, 217, 255, 0.1);
}

/* Dropdown Styles */
.dropdown-list {
position: absolute;
top: 100%;
left: 0;
right: 0;
background: white;
border: 2px solid #00D9FF;
border-top: none;
border-radius: 0 0 8px 8px;
max-height: 300px;
overflow-y: auto;
z-index: 1000;
display: none;
}

.dropdown-list.show {
display: block;
}

.dropdown-item {
padding: 12px 16px;
cursor: pointer;
transition: background-color 0.15s;
border-bottom: 1px solid #f3f4f6;
}

.dropdown-item:last-child {
border-bottom: none;
}

.dropdown-item:hover {
background-color: #fef2f2;
}

.dropdown-item.selected {
background-color: #fee2e2;
}

.no-results {
padding: 12px 16px;
color: #9ca3af;
font-style: italic;
}

/* Card Styles */
.card-scale-frame {
width: 100%;
display: flex;
justify-content: center;
overflow: hidden;
}

.skater-card {
background: white;
border-radius: 8px;
overflow: hidden;
animation: fadeIn 0.3s ease;
width: 100%;
max-width: 900px;
}

@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}

/* Card Header */
.card-header {
background: #f5f5f5;
padding: 15px;
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
flex-wrap: wrap;
min-height: 115px;
}

.card-header-left {
display: flex;
align-items: center;
gap: 10px;
flex: 1;
min-width: 200px;
align-self: flex-start;
}

.team-logo-small {
width: 85px;
height: 85px;
flex-shrink: 0;
}

.player-name-header {
font-size: 30px;
font-weight: 700;
color: #000;
line-height: 1.2;
}

.card-header-right {
display: flex;
align-items: center;
gap: 25px;
min-width: 65px;
align-self: flex-start;
}

.card-type-wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 2px;
}

.season-text {
font-size: 12px;
font-weight: 600;
color: #666;
}

.card-type {
font-size: 14px;
font-weight: 600;
color: #444;
font-style: italic;
}

/* Card Body */
.card-body {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
}

.left-section,
.right-section {
flex: 1;
min-width: 0;
background: #f5f5f5;
padding: 15px;
}

/* Player Image Section */
.player-image-section {
display: flex;
gap: 15px;
align-items: flex-end;
margin-bottom: 15px;
flex-wrap: wrap;
}

.player-image {
width: 140px;
height: 140px;
object-fit: cover;
flex-shrink: 0;
}

.main-stat-box-container {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 10px;
min-width: 0;
}

.main-stat-box {
flex: 1;
min-width: 0;
text-align: center;
padding: 12px;
box-sizing: border-box;
}

.stat-label-small {
font-size: 18px;
font-weight: 700;
color: #000;
margin-bottom: 11px;
}

.stat-value-huge {
font-size: 42px;
font-weight: 700;
color: #000;
line-height: 1;
}

.player-meta {
display: flex;
justify-content: space-between;
font-size: 14px;
font-weight: 600;
color: #000;
margin-bottom: 15px;
flex-wrap: wrap;
gap: 8px;
width: 100%;
}

/* Section Titles */
.section-title {
font-size: 16px;
font-weight: 700;
color: #000;
margin-top: 10px;
text-align: center;
}

.skill-chart-title {
font-size: 18px;
font-weight: 700;
color: #000;
margin-bottom: 1px;
margin-top: 12px;
text-align: center;
}

.skill-chart-description {
font-size: 12px;
font-weight: 700;
color: #444;
font-style: italic;
text-align: center;
}

/* Stat Grid */
.stat-grid-3 {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
margin-bottom: 0px;
}

.stat-box-container {
display: flex;
flex-direction: column;
gap: 5px;
}

.stat-box-label {
font-size: 12px;
font-weight: 700;
color: #000;
text-align: center;
min-height: 14px;
}

.stat-box {
text-align: center;
padding: 2px;
display: flex;
align-items: center;
justify-content: center;
min-height: 20px;
}

.stat-box-value {
font-size: 30px;
font-weight: 700;
color: #000;
}

/* Right Section (Radar Chart) */
.right-section {
flex-direction: column;
align-items: center;
}

.radar-section {
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-start;
}

.radar-chart-wrapper {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
margin: 0 auto 14px;
border: 1px solid #000;
border-radius: 4px;
}

.radar-chart {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
max-width: 222px;
min-width: 0px;
}

#radarCanvas {
width: 100%;
height: auto;
max-width: 222px;
}

/* Footer */
.footer-note {
font-size: 10px;
color: #333;
text-align: center;
padding: 10px 15px;
line-height: 1.4;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
background: #f5f5f5;
}

.footer-logo {
height: 30px;
width: auto;
}

.header-logo {
height: 55px;
width: auto;
}

.all-situations-section {
margin-top: 21px;
}

/* Mobile Responsive Styles */
@media (max-width: 768px) {
.player-card-container {
padding: 10px;
max-width: 100%;
}

.page-title {
font-size: 22px;
margin-bottom: 20px;
}

.card-header {
padding: 8px 10px;
gap: 8px;
}

.card-header-left,
.card-header-right {
min-width: 0;
gap: 8px;
}

.team-logo-small {
width: 60px;
height: 60px;
}

.player-name-header {
font-size: 24px;
}

.card-header-right {
justify-content: center;
}

.header-logo {
height: 45px;
}

.card-type {
font-size: 12px;
}

.card-body {
flex-direction: column;
}

.left-section,
.right-section {
padding: 12px;
}

.player-image-section {
gap: 12px;
flex-wrap: nowrap;
align-items: flex-end;
}

.player-image {
width: 140px;
height: 140px;
}

.stat-label-small {
font-size: 16px;
margin-bottom: 8px;
}

.stat-value-huge {
font-size: 36px;
}

.player-meta {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 4px;
margin-bottom: 0;
font-size: 11px;
width: auto;
flex-shrink: 0;
}

.section-title {
font-size: 14px;
margin-bottom: 8px;
}

.skill-chart-title {
font-size: 16px;
margin-top: 0;
}

.skill-chart-description {
font-size: 11px;
}

.stat-box-value {
font-size: 24px;
}

.stat-box-label {
font-size: 11px;
}

.right-section {
display: flex;
flex-direction: row;
gap: 15px;
padding-top: 12px;
align-items: flex-start;
}

.radar-section {
flex: 2;
display: flex;
flex-direction: column;
}

.all-situations-section {
flex: 1;
display: flex;
flex-direction: column;
margin-top: 0px;
}

.all-situations-section .stat-grid-3 {
grid-template-columns: 1fr;
gap: 8px;
}

.radar-chart {
max-width: 200px;
}

#radarCanvas {
max-width: 200px;
}

.footer-note {
font-size: 9px;
padding: 8px 10px;
gap: 10px;
}

.footer-logo {
height: 25px;
}
}

@media (max-width: 480px) {
.player-name-header {
font-size: 20px;
}

.team-logo-small {
width: 50px;
height: 50px;
}

.header-logo {
height: 40px;
}

.player-image {
width: 120px;
height: 120px;
}

.stat-value-huge {
font-size: 42px;
}

.stat-box-value {
font-size: 20px;
}

.stat-grid-3 {
gap: 8px;
}
}
</style>

<div class=”player-card-container”>
<h1 class=”page-title”>NHL Skater Season Cards</h1>

<div class=”timeframe-selector”>
<label for=”timeframeSelect”>Select Season:</label>
<select id=”timeframeSelect”>
<!– Options will be populated by JavaScript –>
</select>
</div>

<div class=”goa-type-selector”>
<label for=”goaTypeSelect”>GOA Type:</label>
<select id=”goaTypeSelect”>
<option value=”cumulative”>Cumulative GOA</option>
<option value=”perGame”>GOA per Game</option>
</select>
</div>

<div class=”player-selector”>
<label for=”playerSearch”>Select a Player:</label>
<div class=”search-wrapper”>
<input
type=”text”
id=”playerSearch”
placeholder=”Search for a player…”
autocomplete=”off”
>
<div id=”dropdownList” class=”dropdown-list”></div>
</div>
</div>

let selectedPlayerIndex = null;
let selectedTimeframe = null;
let selectedGoaType = ‘cumulative’;
let filteredPlayers = [];

const searchInput = document.getElementById(‘playerSearch’);
const dropdownList = document.getElementById(‘dropdownList’);
const timeframeSelect = document.getElementById(‘timeframeSelect’);
const goaTypeSelect = document.getElementById(‘goaTypeSelect’);

// Initialize timeframes and populate dropdown
function initializeTimeframes() {
const timeframes = […new Set(playersData.map(p => p.season))];

// Sort timeframes – most recent first
timeframes.sort((a, b) => b.localeCompare(a));

timeframeSelect.innerHTML = timeframes
.map(tf => `<option value=”${tf}”>${tf}</option>`)
.join(”);

selectedTimeframe = timeframes[0];
}

// Player filtering by timeframe and search term
function filterPlayers(searchTerm) {
// First filter by timeframe
let timeframeFiltered = playersData.filter(p => p.season === selectedTimeframe);

// Then filter by search term if provided
if (!searchTerm) {
filteredPlayers = […timeframeFiltered].sort((a, b) => a.name.localeCompare(b.name));
} else {
const term = searchTerm.toLowerCase();
filteredPlayers = timeframeFiltered
.filter(player => player.name.toLowerCase().includes(term))
.sort((a, b) => a.name.localeCompare(b.name));
}
renderDropdown();
}

function renderDropdown() {
if (filteredPlayers.length === 0) {
dropdownList.innerHTML = ‘<div class=”no-results”>No players found</div>’;
dropdownList.classList.add(‘show’);
return;
}

dropdownList.innerHTML = filteredPlayers
.map((player, index) => {
const originalIndex = playersData.indexOf(player);
return `<div class=”dropdown-item” data-index=”${originalIndex}”>${player.name}</div>`;
})
.join(”);

dropdownList.classList.add(‘show’);

// Add click handlers
document.querySelectorAll(‘.dropdown-item’).forEach(item => {
item.addEventListener(‘click’, function() {
const index = parseInt(this.dataset.index);
selectPlayer(index);
});
});
}

function selectPlayer(index) {
selectedPlayerIndex = index;
const player = playersData[index];
searchInput.value = player.name;
dropdownList.classList.remove(‘show’);
displayPlayer();
}

// Event listeners
searchInput.addEventListener(‘input’, function() {
filterPlayers(this.value);
});

searchInput.addEventListener(‘focus’, function() {
this.select();
filterPlayers(”);
});

document.addEventListener(‘click’, function(e) {
if (!searchInput.contains(e.target) && !dropdownList.contains(e.target)) {
dropdownList.classList.remove(‘show’);
}
});

// Timeframe change handler
timeframeSelect.addEventListener(‘change’, function() {
selectedTimeframe = this.value;
selectedPlayerIndex = null;
searchInput.value = ”;
document.getElementById(‘playerCardDisplay’).innerHTML = ”;
filterPlayers(”);
});

// GOA type change handler
goaTypeSelect.addEventListener(‘change’, function() {
selectedGoaType = this.value;
if (selectedPlayerIndex !== null) {
displayPlayer();
}
});

// Utility functions
function formatPercent(value) {
if (value === “NA” || value === 0) return “NA”;
return Math.round(value * 100) + ‘%’;
}

function getColor(value) {
if (value === “NA” || value === 0) return ‘#9ca3af’;

const v = Math.max(0, Math.min(1, value));
const green = [20, 200, 71];
const yellow = [255, 255, 185];
const red = [207, 51, 51];

let r, g, b;
if (v >= 0.5) {
const t = (v – 0.5) / 0.5;
r = Math.round(yellow[0] + (green[0] – yellow[0]) * t);
g = Math.round(yellow[1] + (green[1] – yellow[1]) * t);
b = Math.round(yellow[2] + (green[2] – yellow[2]) * t);
} else {
const t = v / 0.5;
r = Math.round(red[0] + (yellow[0] – red[0]) * t);
g = Math.round(red[1] + (yellow[1] – red[1]) * t);
b = Math.round(red[2] + (yellow[2] – red[2]) * t);
}

return `rgb(${r}, ${g}, ${b})`;
}

// Radar chart drawing
function drawRadarChart(radarStats) {
const canvas = document.getElementById(‘radarCanvas’);
if (!canvas) return;

const ctx = canvas.getContext(‘2d’);
const size = 248;
canvas.width = size;
canvas.height = size;

const centerX = size / 2;
const centerY = size / 2;
const maxRadius = size * 0.35;

const labels = [‘EV OFF’, ‘PP OFF’, ‘PK DEF’, ‘EV DEF’];
const angles = [0, 90, 180, 270].map(a => (a – 90) * Math.PI / 180);
const data = [
radarStats.evOff,
radarStats.pp,
radarStats.pkDef,
radarStats.evDef
];

function drawBackground() {
ctx.clearRect(0, 0, size, size);

// Draw concentric circles
ctx.lineWidth = 1;
for (let i = 1; i <= 4; i++) {
ctx.beginPath();
ctx.arc(centerX, centerY, (maxRadius / 4) * i, 0, 2 * Math.PI);
ctx.strokeStyle = ‘#515151’;
ctx.stroke();
}

// Draw axes and labels
ctx.strokeStyle = ‘#515151’;
ctx.lineWidth = 1.5;
ctx.font = ‘600 13px Roboto, Arial’;
ctx.fillStyle = ‘#374151’;

labels.forEach((label, i) => {
const angle = angles[i];
const x = centerX + maxRadius * Math.cos(angle);
const y = centerY + maxRadius * Math.sin(angle);

// Draw axis line
ctx.beginPath();
ctx.moveTo(centerX, centerY);
ctx.lineTo(x, y);
ctx.stroke();

// Draw label
const labelDistance = maxRadius + 20;
const labelX = centerX + labelDistance * Math.cos(angle);
const labelY = centerY + labelDistance * Math.sin(angle);

ctx.textAlign = ‘center’;
ctx.textBaseline = ‘middle’;
ctx.fillStyle = ‘#000’;
ctx.font = ‘600 13px Roboto, Arial’;

// Split two-word labels into separate lines
if (label === ‘PP OFF’ || label === ‘EV DEF’) {
const words = label.split(‘ ‘);
words.forEach((word, j) => {
ctx.fillText(word, labelX, labelY + j * 14);
});
} else {
ctx.fillText(label, labelX, labelY);
}
});
}

// Animation
let startTime = null;
const duration = 800;

function animate(timestamp) {
if (!startTime) startTime = timestamp;
const progress = Math.min((timestamp – startTime) / duration, 1);

drawBackground();

// Draw player’s data polygon
ctx.beginPath();
let points = [];

data.forEach((value, i) => {
const angle = angles[i];
const radius = ((value / 100) * maxRadius) * progress;
const x = centerX + radius * Math.cos(angle);
const y = centerY + radius * Math.sin(angle);

points.push([x, y]);

if (i === 0) {
ctx.moveTo(x, y);
} else {
ctx.lineTo(x, y);
}
});
ctx.closePath();

// Fill with gradient
const gradient = ctx.createLinearGradient(
centerX, centerY – maxRadius,
centerX, centerY + maxRadius
);
gradient.addColorStop(0, ‘rgba(34,197,94,0.35)’);
gradient.addColorStop(1, ‘rgba(34,197,94,0.15)’);
ctx.fillStyle = gradient;
ctx.fill();

// Stroke outline
ctx.strokeStyle = ‘#22c55e’;
ctx.lineWidth = 2.5;
ctx.stroke();

// Draw data points
points.forEach(([x, y]) => {
ctx.beginPath();
ctx.arc(x, y, 4, 0, 2 * Math.PI);
ctx.fillStyle = ‘#22c55e’;
ctx.fill();
ctx.strokeStyle = ‘#166534’;
ctx.stroke();
});

if (progress < 1) {
requestAnimationFrame(animate);
}
}

requestAnimationFrame(animate);
}

function displayPlayer() {
const displayDiv = document.getElementById(‘playerCardDisplay’);

if (selectedPlayerIndex === null) {
displayDiv.innerHTML = ”;
return;
}

const player = playersData[selectedPlayerIndex];
const playerImageUrl = `https://assets.nhle.com/mugs/nhl/latest/${player.playerId}.png`;

// Get the appropriate stats based on selection
const stats = selectedGoaType === ‘cumulative’ ? player.cumulative : player.perGame;
const radarStats = selectedGoaType === ‘cumulative’ ? player.radarData.cumulative : player.radarData.perGame;
const goaLabel = selectedGoaType === ‘cumulative’ ? ‘GOA’ : ‘GOA/GP’;

const cardHTML = `
<div class=”card-scale-frame”>
<div class=”skater-card”>
<div class=”card-header”>
<div class=”card-header-left”>
<img src=”${player.teamLogo}” class=”team-logo-small” alt=”${player.team}”>
<div class=”card-type-wrapper”>
<div class=”season-text”>${player.season}</div>
<div class=”player-name-header”>${player.name}</div>
<div class=”card-type”>NHL Skater Season Card</div>
</div>
</div>

<div class=”card-body”>
<div class=”left-section”>
<div class=”player-image-section”>
<img src=”${playerImageUrl}” class=”player-image” alt=”${player.name}”>
<div class=”main-stat-box-container”>
<div class=”stat-label-small”>${goaLabel}</div>
<div class=”main-stat-box” style=”background-color: ${getColor(stats.goa)};”>
<div class=”stat-value-huge”>${formatPercent(stats.goa)}</div>
</div>
</div>
<div class=”player-meta”>
<span><strong>Age:</strong> ${player.age}</span>
<span><strong>Pos:</strong> ${player.position}</span>
<span><strong>EV TOI:</strong> ${player.evToi}</span>
</div>
</div>

<div class=”section-title”>Even Strength</div>
<div class=”stat-grid-3″>
<div class=”stat-box-container”>
<div class=”stat-box-label”>EV OFF</div>
<div class=”stat-box” style=”background-color: ${getColor(stats.evOff)};”>
<div class=”stat-box-value”>${formatPercent(stats.evOff)}</div>
</div>
</div>
<div class=”stat-box-container”>
<div class=”stat-box-label”>EV DEF</div>
<div class=”stat-box” style=”background-color: ${getColor(stats.evDef)};”>
<div class=”stat-box-value”>${formatPercent(stats.evDef)}</div>
</div>
</div>
<div class=”stat-box-container”>
<div class=”stat-box-label”>EV +/-</div>
<div class=”stat-box” style=”background-color: ${getColor(stats.evPlusMinus)};”>
<div class=”stat-box-value”>${formatPercent(stats.evPlusMinus)}</div>
</div>
</div>
</div>

<div class=”section-title”>Special Teams</div>
<div class=”stat-grid-3″>
<div class=”stat-box-container”>
<div class=”stat-box-label”>PP OFF</div>
<div class=”stat-box” style=”background-color: ${getColor(stats.ppOff)};”>
<div class=”stat-box-value”>${formatPercent(stats.ppOff)}</div>
</div>
</div>
<div class=”stat-box-container”>
<div class=”stat-box-label”>PK DEF</div>
<div class=”stat-box” style=”background-color: ${getColor(stats.pkDef)};”>
<div class=”stat-box-value”>${formatPercent(stats.pkDef)}</div>
</div>
</div>
<div class=”stat-box-container”>
<div class=”stat-box-label”>TOTAL OFF</div>
<div class=”stat-box” style=”background-color: ${getColor(stats.totalOff)};”>
<div class=”stat-box-value”>${formatPercent(stats.totalOff)}</div>
</div>
</div>
</div>
</div>

<div class=”right-section”>
<div class=”radar-section”>
<div class=”skill-chart-title”>Relative Skill Chart</div>
<div class=”skill-chart-description”>Larger Enclosed Area = More Versatile Player</div>
<div class=”radar-chart-wrapper”>
<div class=”radar-chart”>
<canvas id=”radarCanvas”></canvas>
</div>
</div>
</div>

<div class=”all-situations-section”>
<div class=”section-title”>All Situations</div>
<div class=”stat-grid-3″>
<div class=”stat-box-container”>
<div class=”stat-box-label”>FINISH</div>
<div class=”stat-box” style=”background-color: ${getColor(stats.finish)};”>
<div class=”stat-box-value”>${formatPercent(stats.finish)}</div>
</div>
</div>
<div class=”stat-box-container”>
<div class=”stat-box-label”>PENALTY</div>
<div class=”stat-box” style=”background-color: ${getColor(stats.penalty)};”>
<div class=”stat-box-value”>${formatPercent(stats.penalty)}</div>
</div>
</div>
<div class=”stat-box-container”>
<div class=”stat-box-label”>VSTLTY</div>
<div class=”stat-box” style=”background-color: ${getColor(stats.vstlty)};”>
<div class=”stat-box-value”>${formatPercent(stats.vstlty)}</div>
</div>
</div>
</div>
</div>
</div>
</div>

<div class=”footer-note”>
<div>
<strong>GOA</strong> = Goals Over Average (@datadrivenhockey)<br>
GOA reported as percentile ranking among NHL ${player.position === ‘D’ ? ‘defensemen’ : ‘forwards’}
</div>
</div>
</div>
</div>
`;

displayDiv.innerHTML = cardHTML;
setTimeout(() => drawRadarChart(radarStats), 10);
}

// Initialize timeframes and show all players
initializeTimeframes();
filterPlayers(”);
</script>
<!– /wp:html –>