shcizo/pdga-rating
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Modernize UI design with new color system, typography and layout

Browse Source 
- Add sticky dark header with nav replacing inline text links
- Introduce CSS custom properties design system (colors, spacing, shadows)
- Use DM Sans + JetBrains Mono fonts replacing Arial
- Modernize tables with uppercase headers and subtle hover states
- Add gradient fill and rounded line to rating chart
- Unify card sections across players and courses pages
- Add backdrop blur to modals
- Clean up inline styles to use CSS variables
This commit is contained in:
Samuel Enocsson
2026-02-19 09:11:52 +01:00
parent 2f73dddbd8
commit 371a398446
10 changed files with 777 additions and 489 deletions
Download Patch File Download Diff File Expand all files Collapse all files
public/js/chart.js
+118 -89
View File
@@ -1,121 +1,150 @@
function createRatingChart(container, history) {
const width = container.clientWidth - 40;
const height = 250;
const margin = { top: 20, right: 30, bottom: 40, left: 60 };
const width = container.clientWidth;
const height = 280;
const margin = { top: 24, right: 20, bottom: 44, left: 56 };
const chartWidth = width - margin.left - margin.right;
const chartHeight = height - margin.top - margin.bottom;
const pdgaNumber = container.id.replace('chart-', '');
const tooltip = document.getElementById(`tooltip-${pdgaNumber}`);
const ratings = history.map(h => h.rating);
const minRating = Math.min(...ratings) - 10;
const maxRating = Math.max(...ratings) + 10;
const xStep = chartWidth / (history.length - 1 || 1);
const yScale = chartHeight / (maxRating - minRating);
let svg = `<svg width="${width}" height="${height}" style="font-family: Arial, sans-serif;" id="svg-${pdgaNumber}">`;
svg += `<rect x="0" y="0" width="${width}" height="${height}" fill="white" stroke="#ddd"/>`;
svg += `<rect x="${margin.left}" y="${margin.top}" width="${chartWidth}" height="${chartHeight}" fill="#f9f9f9" stroke="#ccc"/>`;
for (let i = 0; i <= 5; i++) {
const y = margin.top + (i * chartHeight / 5);
const rating = Math.round(maxRating - (i * (maxRating - minRating) / 5));
svg += `<line x1="${margin.left}" y1="${y}" x2="${margin.left + chartWidth}" y2="${y}" stroke="#e0e0e0"/>`;
svg += `<text x="${margin.left - 5}" y="${y + 4}" text-anchor="end" font-size="12" fill="#666">${rating}</text>`;
}
let pathData = '';
// Build points array
const points = [];
let pathData = '';
history.forEach((point, i) => {
const x = margin.left + (i * xStep);
const y = margin.top + ((maxRating - point.rating) * yScale);
points.push({ x, y, rating: point.rating, date: point.displayDate });
if (i === 0) {
pathData += `M ${x} ${y}`;
} else {
pathData += ` L ${x} ${y}`;
}
pathData += i === 0 ? `M ${x} ${y}` : ` L ${x} ${y}`;
});
svg += `<path d="${pathData}" stroke="#007bff" stroke-width="2" fill="none"/>`;
// Area fill path (close to bottom)
const areaPath = pathData +
` L ${points[points.length - 1].x} ${margin.top + chartHeight}` +
` L ${points[0].x} ${margin.top + chartHeight} Z`;
let svg = `<svg width="${width}" height="${height}" viewBox="0 0 ${width} ${height}" style="display: block;">`;
// Defs: gradient + glow
svg += `<defs>
<linearGradient id="areaGrad-${pdgaNumber}" x1="0" y1="0" x2="0" y2="1">
<stop offset="0%" stop-color="#3b82f6" stop-opacity="0.15"/>
<stop offset="100%" stop-color="#3b82f6" stop-opacity="0.01"/>
</linearGradient>
<linearGradient id="lineGrad-${pdgaNumber}" x1="0" y1="0" x2="1" y2="0">
<stop offset="0%" stop-color="#3b82f6"/>
<stop offset="100%" stop-color="#2563eb"/>
</linearGradient>
</defs>`;
// Background
svg += `<rect x="0" y="0" width="${width}" height="${height}" fill="white" rx="10"/>`;
// Grid lines
const gridCount = 5;
for (let i = 0; i <= gridCount; i++) {
const y = margin.top + (i * chartHeight / gridCount);
const rating = Math.round(maxRating - (i * (maxRating - minRating) / gridCount));
svg += `<line x1="${margin.left}" y1="${y}" x2="${margin.left + chartWidth}" y2="${y}" stroke="#f1f5f9" stroke-width="1"/>`;
svg += `<text x="${margin.left - 10}" y="${y + 4}" text-anchor="end" font-size="11" font-family="'DM Sans', sans-serif" fill="#94a3b8" font-weight="500">${rating}</text>`;
}
// Area fill
svg += `<path d="${areaPath}" fill="url(#areaGrad-${pdgaNumber})"/>`;
// Line
svg += `<path d="${pathData}" stroke="url(#lineGrad-${pdgaNumber})" stroke-width="2.5" fill="none" stroke-linejoin="round" stroke-linecap="round"/>`;
// Data points
points.forEach((point, i) => {
svg += `<circle cx="${point.x}" cy="${point.y}" r="12" fill="transparent" class="hover-area" data-index="${i}" style="cursor: pointer;"/>`;
svg += `<circle cx="${point.x}" cy="${point.y}" r="4" fill="#007bff" stroke="white" stroke-width="2" class="data-point" data-index="${i}" style="pointer-events: none;"/>`;
svg += `<circle cx="${point.x}" cy="${point.y}" r="14" fill="transparent" class="hover-area" data-index="${i}" style="cursor: pointer;"/>`;
svg += `<circle cx="${point.x}" cy="${point.y}" r="3.5" fill="#3b82f6" stroke="white" stroke-width="2" class="data-point" data-index="${i}" style="pointer-events: none;"/>`;
});
// X-axis labels
const labelStep = Math.max(1, Math.floor(history.length / 6));
history.forEach((point, i) => {
if (i % labelStep === 0 || i === history.length - 1) {
const x = margin.left + (i * xStep);
const date = new Date(point.date).toLocaleDateString('en-US', { month: 'short', year: '2-digit' });
svg += `<text x="${x}" y="${height - 10}" text-anchor="middle" font-size="11" fill="#666">${date}</text>`;
svg += `<text x="${x}" y="${height - 12}" text-anchor="middle" font-size="11" font-family="'DM Sans', sans-serif" fill="#94a3b8" font-weight="500">${date}</text>`;
}
});
svg += `<text x="20" y="${height/2}" text-anchor="middle" font-size="12" fill="#333" transform="rotate(-90, 20, ${height/2})">Rating</text>`;
// Y-axis label
svg += `<text x="16" y="${height / 2}" text-anchor="middle" font-size="11" font-family="'DM Sans', sans-serif" fill="#94a3b8" font-weight="500" transform="rotate(-90, 16, ${height / 2})">Rating</text>`;
svg += '</svg>';
container.innerHTML = svg;
container.textContent = '';
container.insertAdjacentHTML('beforeend', svg);
setTimeout(() => {
const svgElement = document.getElementById(`svg-${pdgaNumber}`);
if (svgElement) {
const hoverAreas = svgElement.querySelectorAll('.hover-area');
const dataPoints = svgElement.querySelectorAll('.data-point');
let currentTooltip = null;
let tooltipTimeout = null;
hoverAreas.forEach((area, i) => {
area.addEventListener('mouseenter', (e) => {
if (tooltipTimeout) {
clearTimeout(tooltipTimeout);
tooltipTimeout = null;
}
if (currentTooltip !== null && currentTooltip !== i) {
dataPoints[currentTooltip].setAttribute('r', '4');
dataPoints[currentTooltip].setAttribute('fill', '#007bff');
}
currentTooltip = i;
const point = points[i];
tooltip.innerHTML = `<strong>${point.date}</strong><br>Rating: ${point.rating}`;
tooltip.style.display = 'block';
const svgElement = document.getElementById(`svg-${pdgaNumber}`) || container.querySelector('svg');
if (!svgElement) return;
const hoverAreas = svgElement.querySelectorAll('.hover-area');
const dataPoints = svgElement.querySelectorAll('.data-point');
let currentTooltip = null;
let tooltipTimeout = null;
hoverAreas.forEach((area, i) => {
area.addEventListener('mouseenter', (e) => {
if (tooltipTimeout) {
clearTimeout(tooltipTimeout);
tooltipTimeout = null;
}
if (currentTooltip !== null && currentTooltip !== i) {
dataPoints[currentTooltip].setAttribute('r', '3.5');
dataPoints[currentTooltip].setAttribute('fill', '#3b82f6');
}
currentTooltip = i;
const point = points[i];
tooltip.textContent = '';
const strong = document.createElement('strong');
strong.textContent = point.date;
tooltip.appendChild(strong);
tooltip.appendChild(document.createElement('br'));
tooltip.appendChild(document.createTextNode('Rating: ' + point.rating));
tooltip.style.display = 'block';
tooltip.style.left = `${e.clientX + 15}px`;
tooltip.style.top = `${e.clientY - 35}px`;
dataPoints[i].setAttribute('r', '6');
dataPoints[i].setAttribute('fill', '#2563eb');
});
area.addEventListener('mousemove', (e) => {
if (currentTooltip === i) {
tooltip.style.left = `${e.clientX + 15}px`;
tooltip.style.top = `${e.clientY - 35}px`;
dataPoints[i].setAttribute('r', '6');
dataPoints[i].setAttribute('fill', '#0056b3');
});
area.addEventListener('mousemove', (e) => {
if (currentTooltip === i) {
tooltip.style.left = `${e.clientX + 15}px`;
tooltip.style.top = `${e.clientY - 35}px`;
}
});
area.addEventListener('mouseleave', () => {
if (currentTooltip === i) {
tooltipTimeout = setTimeout(() => {
tooltip.style.display = 'none';
dataPoints[i].setAttribute('r', '4');
dataPoints[i].setAttribute('fill', '#007bff');
currentTooltip = null;
}, 100);
}
});
}
});
}
area.addEventListener('mouseleave', () => {
if (currentTooltip === i) {
tooltipTimeout = setTimeout(() => {
tooltip.style.display = 'none';
dataPoints[i].setAttribute('r', '3.5');
dataPoints[i].setAttribute('fill', '#3b82f6');
currentTooltip = null;
}, 100);
}
});
});
}, 100);
}