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:
+10
-17
@@ -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';
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user