Improve UI: remove refresh button and add PDGA profile links

- Remove unnecessary refresh button that only returned cached data
- Change button text from "Calculate Approx Rating" to "Predict Rating"
- Make player names clickable links to their PDGA profile pages
- Add link styling with hover effects

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
Samuel Enocsson
2025-08-12 11:38:55 +02:00
parent 8e07dc6c73
commit 2528bc4b5d
+10 -17
View File
@@ -29,19 +29,6 @@
font-size: 18px; font-size: 18px;
color: #666; color: #666;
} }
.refresh-btn {
background-color: #007bff;
color: white;
padding: 10px 20px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 16px;
margin-bottom: 20px;
}
.refresh-btn:hover {
background-color: #0056b3;
}
table { table {
width: 100%; width: 100%;
border-collapse: collapse; border-collapse: collapse;
@@ -100,12 +87,18 @@
font-weight: bold; font-weight: bold;
font-size: 14px; font-size: 14px;
} }
a {
color: #007bff;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
</style> </style>
</head> </head>
<body> <body>
<div class="container"> <div class="container">
<h1>PDGA Player Ratings</h1> <h1>PDGA Player Ratings</h1>
<button class="refresh-btn" onclick="fetchRatings()">Refresh Ratings</button>
<div id="loading" class="loading">Loading ratings...</div> <div id="loading" class="loading">Loading ratings...</div>
<div id="ratings-table"></div> <div id="ratings-table"></div>
</div> </div>
@@ -159,7 +152,7 @@
tableHTML += ` tableHTML += `
<tr id="row-${player.pdgaNumber}"> <tr id="row-${player.pdgaNumber}">
<td>${index + 1}</td> <td>${index + 1}</td>
<td>${player.name}</td> <td><a href="https://www.pdga.com/player/${player.pdgaNumber}" target="_blank">${player.name}</a></td>
<td class="pdga-number">#${player.pdgaNumber}</td> <td class="pdga-number">#${player.pdgaNumber}</td>
<td class="rating">${player.rating || 'N/A'}</td> <td class="rating">${player.rating || 'N/A'}</td>
<td class="rating-change ${ratingChangeClass}">${ratingChangeText}</td> <td class="rating-change ${ratingChangeClass}">${ratingChangeText}</td>
@@ -168,7 +161,7 @@
</td> </td>
<td class="difference ${diffClass}" id="diff-${player.pdgaNumber}"> <td class="difference ${diffClass}" id="diff-${player.pdgaNumber}">
${difference ? diffText : ${difference ? diffText :
`<button class="calc-btn" onclick="calculatePredictedRating(${player.pdgaNumber})">Calculate Approx Rating</button>`} `<button class="calc-btn" onclick="calculatePredictedRating(${player.pdgaNumber})">Predict Rating</button>`}
</td> </td>
</tr> </tr>
`; `;
@@ -222,7 +215,7 @@
console.error('Error calculating predicted rating:', error); console.error('Error calculating predicted rating:', error);
predictedCell.textContent = 'Error'; predictedCell.textContent = 'Error';
button.disabled = false; button.disabled = false;
button.textContent = 'Calculate Approx Rating'; button.textContent = 'Predict Rating';
} }
} }