2023-02-14 19:32:04 +01:00
|
|
|
<!DOCTYPE html>
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="UTF-8">
|
|
|
|
|
<title>MonkeyType Profile Data</title>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
background-color: #1e1e1e;
|
|
|
|
|
color: #f0f0f0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
table {
|
|
|
|
|
width: 100%;
|
|
|
|
|
border-collapse: collapse;
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
th,
|
|
|
|
|
td {
|
|
|
|
|
padding: 12px;
|
2023-02-14 19:57:29 +01:00
|
|
|
text-align: center;
|
2023-02-14 19:32:04 +01:00
|
|
|
border-bottom: 1px solid #ddd;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
th {
|
|
|
|
|
background-color: #333;
|
|
|
|
|
color: #f0f0f0;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<h1>MonkeyType Profile Data</h1>
|
|
|
|
|
<table id="profileTable">
|
|
|
|
|
<thead>
|
|
|
|
|
<tr>
|
|
|
|
|
<th>Name</th>
|
|
|
|
|
<th>Added At</th>
|
2023-02-14 19:57:29 +01:00
|
|
|
<th>Completed tests</th>
|
|
|
|
|
<th>Started tests</th>
|
2023-02-14 19:32:04 +01:00
|
|
|
<th>Time Typing</th>
|
|
|
|
|
<th>Best 15s</th>
|
|
|
|
|
<th>Best 30s</th>
|
|
|
|
|
<th>Best 60s</th>
|
|
|
|
|
<th>Best 120s</th>
|
|
|
|
|
<th>Best 10w</th>
|
|
|
|
|
<th>Best 25w</th>
|
|
|
|
|
<th>Best 50w</th>
|
|
|
|
|
<th>Best 100w</th>
|
|
|
|
|
</tr>
|
|
|
|
|
</thead>
|
|
|
|
|
<tbody></tbody>
|
|
|
|
|
</table>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
const users = (new URLSearchParams(window.location.search)).get('users');
|
2023-02-14 19:57:29 +01:00
|
|
|
|
2023-02-14 19:32:04 +01:00
|
|
|
// no users passed => ask for them and reload
|
2023-02-14 19:57:29 +01:00
|
|
|
if (users == null || users == '') {
|
2023-02-14 19:32:04 +01:00
|
|
|
var names = prompt('Please provide user names, delimited by \',\'');
|
|
|
|
|
window.location.replace(location.protocol + '//' + location.host + location.pathname + '?users=' + names);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const urls = users.split(",").map(user => 'https://api.monkeytype.com/users/' + user.replace(' ', '') + '/profile');
|
|
|
|
|
|
|
|
|
|
const table = document.querySelector('#profileTable tbody');
|
|
|
|
|
|
|
|
|
|
for (url of urls) {
|
|
|
|
|
fetch(url)
|
|
|
|
|
.then(response => response.json())
|
|
|
|
|
.then(data => {
|
|
|
|
|
const { name, addedAt, typingStats, personalBests } = data.data;
|
|
|
|
|
const { completedTests, startedTests, timeTyping } = typingStats;
|
|
|
|
|
const { time, words } = personalBests;
|
|
|
|
|
|
2023-02-14 19:57:29 +01:00
|
|
|
function maxReducer({ prev_wpm, prev_acc }, { current_wpm, current_acc }) {
|
|
|
|
|
return (prev_wpm > current_wpm) ? { prev_wpm, prev_acc } : { current_wpm, current_acc }
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
function getMaxWpmAcc(stats) {
|
|
|
|
|
var max_acc = 0.0; var max_wpm = 0.0;
|
|
|
|
|
for ({ wpm, acc } of stats) {
|
|
|
|
|
if (wpm > max_wpm) {
|
|
|
|
|
max_wpm = wpm;
|
|
|
|
|
max_acc = acc;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
return max_wpm + ' | ' + max_acc + '%';
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const best15s = getMaxWpmAcc(time['15']);
|
|
|
|
|
|
2023-02-14 19:32:04 +01:00
|
|
|
function maxReducer(prev, current) {
|
|
|
|
|
return (prev > current) ? prev : current
|
|
|
|
|
}
|
|
|
|
|
|
2023-02-14 19:57:29 +01:00
|
|
|
const best30s = getMaxWpmAcc(time['30']);
|
|
|
|
|
const best60s = getMaxWpmAcc(time['60']);
|
|
|
|
|
const best120s = getMaxWpmAcc(time['120']);
|
|
|
|
|
const best10w = getMaxWpmAcc(words['10']);
|
|
|
|
|
const best25w = getMaxWpmAcc(words['25']);
|
|
|
|
|
const best50w = getMaxWpmAcc(words['50']);
|
|
|
|
|
const best100w = getMaxWpmAcc(words['100']);
|
2023-02-14 19:32:04 +01:00
|
|
|
|
|
|
|
|
const row = `
|
|
|
|
|
<tr>
|
|
|
|
|
<td>${name}</td>
|
|
|
|
|
<td>${new Date(addedAt).toLocaleDateString()}</td>
|
|
|
|
|
<td>${completedTests}</td>
|
|
|
|
|
<td>${startedTests}</td>
|
2023-02-14 19:57:29 +01:00
|
|
|
<td>${new Date(timeTyping * 1000).toISOString().substr(11, 8)}</td>
|
2023-02-14 19:32:04 +01:00
|
|
|
<td>${best15s}</td>
|
|
|
|
|
<td>${best30s}</td>
|
|
|
|
|
<td>${best60s}</td>
|
|
|
|
|
<td>${best120s}</td>
|
|
|
|
|
<td>${best10w}</td>
|
|
|
|
|
<td>${best25w}</td>
|
|
|
|
|
<td>${best50w}</td>
|
|
|
|
|
<td>${best100w}</td>
|
|
|
|
|
</tr>
|
|
|
|
|
`;
|
|
|
|
|
|
|
|
|
|
table.insertAdjacentHTML('beforeend', row);
|
|
|
|
|
})
|
|
|
|
|
.catch(error => { alert(error); console.error(error); });
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
|
|
|
|
|
</html>
|
