1 files changed, 51 insertions, 0 deletions
diff --git a/src/scores.html b/src/scores.html
new file mode 100644
index 0000000..f3b1050
--- /dev/null
+++ b/src/scores.html
@@ -0,0 +1,51 @@
+<!doctype html>
+<html lang="en">
+
+<head>
+    <title>High Scores</title>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
+    <!-- <link rel="stylesheet" type="text/css" href="/css/styles.css"> -->
+    <!-- <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script> -->
+    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
+</head>
+
+<body>
+    <script>
+        window.onload = function () {
+            var transactionData = new Vue({
+                el: '#main',
+                data: {
+                    scores: [],
+                },
+                created() {
+                    fetch(new Request(`/scores`)).then(response => response.json())
+                        .then(response => this.scores = response);
+
+                },
+            });
+        }
+    </script>
+    <div id="main">
+        <h1>High Scores</h1>
+        <div v-for="game in Object.keys(scores)">
+            <h2>{{game}}</h2>
+            <table class="table">
+                <tr>
+                    <th>Rank</th>
+                    <th>Score</th>
+                    <th>Username</th>
+                    <th>Date</th>
+                </tr>
+                <tr v-for="(item, i) in scores[game]">
+                    <td>{{i+1}}</td>
+                    <td>{{item.score}}</td>
+                    <td>{{item.username}}</td>
+                    <td>{{item.createdAt.substring(0, 16).replace("T", " ")}}</td>
+                </tr>
+            </table>
+        </div>
+    </div>
+</body>
+
+</html>
+\ No newline at end of file