add leaderboard

static/index.css

@@ -8,6 +8,7 @@ section {
     width: 800px;
     margin-left: auto;
     margin-right: auto;
+    margin-bottom: 10px;
     background: rgb(255, 255, 255);
     border: solid rgb(200, 200, 200) 2px;
     border-radius: 10px;
@@ -27,7 +28,7 @@ h6 {
     line-height: 40px;
 }
 
-p {
+p, pre, s {
     margin: 10px;
 }
 

static/index.html

@@ -17,6 +17,10 @@
 		<canvas id='canvas'></canvas>
 		</div>
 	</section>
+	<section id='main'>
+		<h1>Leaderboard</h1>
+		<pre class='lb'></pre>
+	</section>
 	<script src='js/index.js' type="module"></script>
 </body>
 

static/js/index.js

@@ -212,7 +212,7 @@ class Game extends GameBasic {
 
         if (this.entities.length == 0) this.entities = [this.player];
     }
-    init() {
+    async init() {
         super.init();
 
         let that = this;
@@ -229,6 +229,19 @@ class Game extends GameBasic {
         setInterval(function () { that.render() }, 1000 / 60);
 
         game.canvas.onclick = () => that.click();
+
+        let jason = await (fetch('/leaderboard').then(x => x.json()))
+
+        let scores = {};
+
+        for (let e of jason) {
+            scores[e.ip] = scores[e.ip] || 0;
+            scores[e.ip] += e.ko ** 2;
+        }
+
+        scores = Object.entries(scores).sort((a,b) => b.ko - a.ko);
+
+        document.querySelector('.lb').textContent = scores.map(x => `${x[0]}: ${x[1]}`).join('\n');
     }
 }