<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Ötzi Game Dashboard</title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css"
integrity="sha512-GQGU0fMMi238uA+a/bdWJfpUGKUkBdgfFdgBm72SUQ6BeyWjoY/ton0tEjH+OSH9iP4Dfh+7HM0I9f5eR0L/4w=="
crossorigin="anonymous" referrerpolicy="no-referrer" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"
integrity="sha512-OvBgP9A2JBgiRad/mM36mkzXSXaJE9BEIENnVEmeZdITvwT09xnxLtT4twkCa8m/loMbPHsvPl0T8lRGVBwjlQ=="
crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.jsdelivr.net/npm/chart.js@3.7.1/dist/chart.min.js"
integrity="sha256-ErZ09KkZnzjpqcane4SCyyHsKAXMvID9/xwbl/Aq1pc=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/moment@2.29.1/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/chartjs-adapter-moment@1.0.0/dist/chartjs-adapter-moment.min.js"
integrity="sha256-sFB24K2xU2EOgWAtb3ySAGjhMqcUvUJGmwjDcTQa04k=" crossorigin="anonymous"></script>
</head>
<body>
<header class="navbar navbar-dark bg-dark p-1">
<a class="navbar-brand px-2" href="#">Ötzi Game Dashboard</a>
<span class="text-light px-2">
<%= appVersion %>
</span>
</header>
<div class="container-fluid">
<div class="row">
<main class="col-lg-8 col-md-10 mx-auto p-md-4">
<h1>Quick facts</h1>
<div class="row">
<div class="col-sm-4">
<div class="card text-dark bg-light m-2">
<div class="card-body">
<h5 class="card-title">
<%= gamesCount %>
</h5>
<h6 class="card-subtitle mb-2 text-muted">Games played</h6>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card text-dark bg-light m-2">
<div class="card-body">
<h5 class="card-title">
<%= cluesCount %>
</h5>
<h6 class="card-subtitle mb-2 text-muted">Clues shown</h6>
</div>
</div>
</div>
<div class="col-sm-4">
<div class="card text-dark bg-light m-2">
<div class="card-body">
<h5 class="card-title">
<%= shotsCount %>
</h5>
<h6 class="card-subtitle mb-2 text-muted">Shots taken</h6>
</div>
</div>
</div>
</div>
<h1>Game count by date</h1>
<script id="gamesByDateData" type="application/json"><%- JSON.stringify(gamesByDate) %></script>
<canvas id="gamesByDateChart"></canvas>
<h1>Shot count by duration [ms]</h1>
<script id="shotsByDurationData" type="application/json"><%- JSON.stringify(shotsByDuration) %></script>
<canvas id="shotsByDurationChart"></canvas>
</main>
</div>
</div>
<script src="/public/dashboard.js"></script>
</body>
</html>