den3606/speedrun-com.html

## speedrun-com.html
<html>

<head>
  <meta charset="utf-8">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
    integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
</head>

<body>
  <h1 class="text-center">Speedrun Times</h1>
  <div class="d-flex justify-content-center">
    <table class="table text-center">
      <thead>
        <tr>
          <th>Title</th>
          <th>Categories</th>
          <th>Rank</th>
          <th>Time</th>
        </tr>
      </thead>
      <tbody id="rta-tbody-js"></tbody>
    </table>
    <script type="module">
      import { parse, subMilliseconds, intervalToDuration } from 'https://esm.run/date-fns';

      (async () => {
        // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        // Set your speedrun.com Id at URL<YOUR_ID>
        // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        // !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
        const data = await fetch('https://www.speedrun.com/api/v1/users/<YOUR_ID>/personal-bests');
        const json = await data.json();
        Object.values(json.data).forEach(async (runData) => {

          const rank = runData.place;
          const gameTitle = await fetch('https://www.speedrun.com/api/v1/games/' + runData.run.game).then(data => data.json()).then(json => json.data.names.international);
          const category = await fetch('https://www.speedrun.com/api/v1/categories/' + runData.run.category).then(data => data.json()).then(json => json.data.name);
          const detail = await fetch('https://www.speedrun.com/api/v1/categories/' + runData.run.category + "/variables").then(data => data.json()).then(json => {
            return Object.keys(runData.run.values).flatMap(valueKey => {
              return json.data.map(detail => {
                if (detail.id === valueKey) {
                  const ruleId = runData.run.values[detail.id];
                  return detail.values.choices[ruleId];
                }
                return null;
              }).filter(val => val != null)
            })
          });
          const displayTime = ((time) => {
            const start = new Date();
            const end = subMilliseconds(start, time * 1000);
            const result = intervalToDuration({ start: start, end: end });
            const addZero = time => (String(time).length === 1 ? "0" + time : String(time));
            result.hours = addZero(result.hours);
            result.minutes = addZero(result.minutes);
            result.seconds = addZero(result.seconds);
            return result.hours + ":" + result.minutes + ":" + result.seconds;
          })(runData.run.times.primary_t);

          const showData = [gameTitle, category + " / " + detail.join(" "), rank, displayTime];

          const tbody = document.getElementById("rta-tbody-js");
          const tr = document.createElement("tr");
          showData.map((data) => {
            const td = document.createElement("td");
            td.appendChild(document.createTextNode(data));
            return td;
          }).forEach(td => {
            tr.appendChild(td);
          })

          tbody.appendChild(tr);
        });
      })();
    </script>
</body>

</html>
	<html>

	<head>
	<meta charset="utf-8">
	<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
	integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
	</head>

	<body>
	<h1 class="text-center">Speedrun Times</h1>
	<div class="d-flex justify-content-center">
	<table class="table text-center">
	<thead>
	<tr>
	<th>Title</th>
	<th>Categories</th>
	<th>Rank</th>
	<th>Time</th>
	</tr>
	</thead>
	<tbody id="rta-tbody-js"></tbody>
	</table>
	<script type="module">
	import { parse, subMilliseconds, intervalToDuration } from 'https://esm.run/date-fns';

	(async () => {
	// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
	// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
	// Set your speedrun.com Id at URL<YOUR_ID>
	// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
	// !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!
	const data = await fetch('https://www.speedrun.com/api/v1/users/<YOUR_ID>/personal-bests');
	const json = await data.json();
	Object.values(json.data).forEach(async (runData) => {

	const rank = runData.place;
	const gameTitle = await fetch('https://www.speedrun.com/api/v1/games/' + runData.run.game).then(data => data.json()).then(json => json.data.names.international);
	const category = await fetch('https://www.speedrun.com/api/v1/categories/' + runData.run.category).then(data => data.json()).then(json => json.data.name);
	const detail = await fetch('https://www.speedrun.com/api/v1/categories/' + runData.run.category + "/variables").then(data => data.json()).then(json => {
	return Object.keys(runData.run.values).flatMap(valueKey => {
	return json.data.map(detail => {
	if (detail.id === valueKey) {
	const ruleId = runData.run.values[detail.id];
	return detail.values.choices[ruleId];
	}
	return null;
	}).filter(val => val != null)
	})
	});
	const displayTime = ((time) => {
	const start = new Date();
	const end = subMilliseconds(start, time * 1000);
	const result = intervalToDuration({ start: start, end: end });
	const addZero = time => (String(time).length === 1 ? "0" + time : String(time));
	result.hours = addZero(result.hours);
	result.minutes = addZero(result.minutes);
	result.seconds = addZero(result.seconds);
	return result.hours + ":" + result.minutes + ":" + result.seconds;
	})(runData.run.times.primary_t);

	const showData = [gameTitle, category + " / " + detail.join(" "), rank, displayTime];

	const tbody = document.getElementById("rta-tbody-js");
	const tr = document.createElement("tr");
	showData.map((data) => {
	const td = document.createElement("td");
	td.appendChild(document.createTextNode(data));
	return td;
	}).forEach(td => {
	tr.appendChild(td);
	})

	tbody.appendChild(tr);
	});
	})();
	</script>
	</body>

	</html>