210 lines
12 KiB
HTML
210 lines
12 KiB
HTML
<!doctype html>
|
|
<html lang="en">
|
|
<head>
|
|
<!-- Required meta tags -->
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
|
|
<!-- Bootstrap CSS -->
|
|
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
|
|
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
|
|
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-serialize-object/2.5.0/jquery.serialize-object.min.js" integrity="sha256-E8KRdFk/LTaaCBoQIV/rFNc0s3ICQQiOHFT4Cioifa8=" crossorigin="anonymous"></script>
|
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.16.0/d3.min.js" integrity="sha256-Xb6SSzhH3wEPC4Vy3W70Lqh9Y3Du/3KxPqI2JHQSpTw=" crossorigin="anonymous"></script>
|
|
<script src="https://cdn.plot.ly/plotly-latest.min.js" charset="utf-8"></script>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
|
|
<style>
|
|
.pageContainer {
|
|
margin: 20%;
|
|
}
|
|
@media (max-width: 1100px) {
|
|
.pageContainer {
|
|
margin: 2%;
|
|
}
|
|
}
|
|
h1 {
|
|
/*margin: 20%;*/
|
|
margin-bottom: 5%;
|
|
}
|
|
.linkGroup {
|
|
/*margin: 20%;*/
|
|
margin-bottom: 5%;
|
|
margin-top: 5%;
|
|
}
|
|
.linkForm {
|
|
/*margin: 20%;*/
|
|
margin-top: 5%;
|
|
margin-bottom: 5%;
|
|
}
|
|
.contactBox {
|
|
/*margin: 20%;*/
|
|
margin-top: 5%;
|
|
color: grey;
|
|
}
|
|
.fa-clipboard {
|
|
color: grey;
|
|
}
|
|
.fa-clipboard:hover {
|
|
color: black;
|
|
}
|
|
</style>
|
|
<title>Speedrun Timeline</title>
|
|
</head>
|
|
<body>
|
|
<div class="pageContainer">
|
|
<h1>Speedrun Timeline</h1>
|
|
This tool allow you to see how speedrun times have progressed since a game's initial release. All data from <a href="https://speedrun.com">speedrun.com</a>.
|
|
<div class="card bg-light mb-3">
|
|
<div class="card-header">Choose a game</div>
|
|
<div class="card-body">
|
|
<label for="game_name">Game Name</label>
|
|
<div class="input-group mb-3">
|
|
<input type="text" class="form-control" id="game_name" placeholder="Portal 2">
|
|
<div class="btn-group" role="group" style="margin-left: 1rem;">
|
|
<button type="button" class="btn btn-primary" id="search_button">Search</button>
|
|
</div>
|
|
</div>
|
|
<div class="mb-3" id="resultsArea">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-light mb-3 collapse" id="cat_card">
|
|
<div class="card-header">Choose a category</div>
|
|
<div class="card-body container">
|
|
<div class="row">
|
|
<div class="col-sm">
|
|
<div class="card-text">NOTE: Currently only supports per-game categories.</div>
|
|
<div id="catArea"></div>
|
|
</div>
|
|
<div class="col-sm d-flex align-self-center" id="loading_box"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="card bg-light mb-3 collapse" id="graph_card">
|
|
<div class="card-header">Graph</div>
|
|
<div class="card-body" id="graph_body"></div>
|
|
</div>
|
|
</div>
|
|
<script>
|
|
var game_name = '';
|
|
var game_category = '';
|
|
document.getElementById('search_button').onclick = function () {
|
|
var search_button = document.getElementById('search_button');
|
|
search_button.disabled = true;
|
|
if (search_button.classList.contains('btn-danger')) {
|
|
search_button.classList.remove('btn-danger');
|
|
search_button.classList.add('btn-primary');
|
|
}
|
|
search_button.innerHTML =
|
|
'<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true" style="margin-right: 0.5rem;"></span>' +
|
|
'Loading...';
|
|
var send = {};
|
|
send['name'] = document.getElementById('game_name').value;
|
|
var area = document.getElementById('resultsArea');
|
|
area.textContent = '';
|
|
$.ajax('/search', {
|
|
data : JSON.stringify(send),
|
|
type : 'POST',
|
|
contentType : 'application/json',
|
|
complete : function(response) {
|
|
var games = response['responseJSON']['games'];
|
|
if (games.length != 0) {
|
|
search_button.textContent = 'Search';
|
|
search_button.disabled = false;
|
|
area.textContent = '';
|
|
var group = document.createElement('div');
|
|
group.classList.add('list-group');
|
|
group.id = 'resultsList';
|
|
for (var i = 0; i < games.length; i++) {
|
|
var button = document.createElement('button');
|
|
button.setAttribute('type', 'button');
|
|
button.classList.add('list-group-item', 'list-group-item-action');
|
|
button.textContent = games[i];
|
|
button.id = games[i];
|
|
button.onclick = function () {
|
|
var catArea = document.getElementById('catArea');
|
|
catArea.textContent = '';
|
|
game_name = this.id;
|
|
var child = this.parentNode.getElementsByClassName('active')[0];
|
|
if (typeof child != "undefined") {
|
|
child.classList.remove('active');
|
|
}
|
|
this.classList.add('active')
|
|
var send = {}
|
|
send['name'] = game_name
|
|
$.ajax('/categories', {
|
|
data : JSON.stringify(send),
|
|
type : 'POST',
|
|
contentType : 'application/json',
|
|
complete : function(response) {
|
|
var categories = response['responseJSON']['categories'];
|
|
if (categories.length != 0) {
|
|
var catGroup = document.createElement('div');
|
|
catGroup.classList.add('list-group');
|
|
catGroup.id = 'catList';
|
|
for (var i = 0; i < categories.length; i++) {
|
|
var button = document.createElement('button');
|
|
button.setAttribute('type', 'button');
|
|
button.classList.add('list-group-item', 'list-group-item-action');
|
|
button.textContent = categories[i];
|
|
button.id = categories[i];
|
|
button.onclick = function () {
|
|
game_category = this.id;
|
|
var child = this.parentNode.getElementsByClassName('active')[0];
|
|
if (typeof child != "undefined") {
|
|
child.classList.remove('active');
|
|
};
|
|
var graphArea = document.getElementById('graph_body');
|
|
var loadArea = document.getElementById('loading_box');
|
|
var spinner = document.createElement('div');
|
|
spinner.classList.add('spinner-border', 'd-flex', 'align-self-center');
|
|
spinner.setAttribute('style', 'width: 3rem; height: 3rem; margin-left: 2rem;');
|
|
spinner.setAttribute('role', 'status');
|
|
spinner.innerHTML = '<span class="sr-only">Loading graph...</span>';
|
|
loadArea.appendChild(document.createTextNode('Loading graph...'));
|
|
loadArea.appendChild(spinner)
|
|
var send = {}
|
|
send['name'] = game_name;
|
|
send['category'] = game_category;
|
|
$.ajax('/graph', {
|
|
data : JSON.stringify(send),
|
|
type : 'POST',
|
|
contentType : 'application/json',
|
|
complete : function(response) {
|
|
loadArea.textContent = '';
|
|
var graph_data = response['responseJSON'];
|
|
Plotly.react('graph_body',graph_data['data'],graph_data['layout']);
|
|
$('#graph_card').collapse('show');
|
|
},
|
|
});
|
|
this.classList.add('active');
|
|
};
|
|
catGroup.appendChild(button);
|
|
};
|
|
catArea.appendChild(catGroup);
|
|
$('#cat_card').collapse('show');
|
|
};
|
|
},
|
|
});
|
|
};
|
|
group.appendChild(button);
|
|
};
|
|
area.appendChild(group);
|
|
} else {
|
|
search_button.classList.remove('btn-primary');
|
|
search_button.classList.add('btn-danger');
|
|
search_button.textContent = 'No results';
|
|
search_button.disabled = false;
|
|
}
|
|
|
|
}
|
|
});
|
|
}
|
|
</script>
|
|
|
|
|
|
</body>
|
|
</html>
|