Display top List

game/src/gui.ts

@@ -9,7 +9,8 @@ declare global {
       record?: String | null,
     }
     freezeGui: Function,
-    unfreezeGui: Function
+    unfreezeGui: Function,
+    updateTopList: Function
   }
 }
 
@@ -26,6 +27,7 @@ declare global {
     },
     name: document.getElementById("name"),
     key: document.getElementById("key"),
+    top: document.getElementById("top"),
   }
 
   window.freezeGui = () => {
@@ -40,6 +42,14 @@ declare global {
     (elements.buttons.signup as HTMLButtonElement).disabled = false;
   }
 
+  window.updateTopList = async () => {
+    elements.top!.innerText = "";
+    const records = await API.top()
+    records.records.forEach(rec => {
+      elements.top!.innerHTML += `<li>${rec.name} ${rec.record}pts</li>\n`
+    });
+  }
+
   function readDataFromToken(token) {
     return JSON.parse(
       atob(token.split('.')[1])
@@ -152,7 +162,7 @@ declare global {
     elements.buttons.logout!.addEventListener("click", logout)
     elements.buttons.signup!.addEventListener("click", signup)
 
-    console.log(await API.top())
+    await window.updateTopList()
 
     checkIfLogged()
   }

game/src/index.html

@@ -18,6 +18,13 @@
 			<button id="signup">Sign up</button>
 		</div>
 	</div>
+	<div id="gameBox">
+		<div class="records">
+			<h4>TOP 15</h4>
+			<ol id="top">
+			</ol>
+		</div>
+	</div>
 	<script src="main.ts"></script>
 	<script src="gui.ts"></script>
 </body>

game/src/main.ts

@@ -10,6 +10,8 @@ const config: Phaser.Types.Core.GameConfig = {
 	width: 800,
 	height: 600,
 
+	parent: "gameBox",
+
 	physics: {
 		default: 'arcade',
 		arcade: {

game/src/scenes/GameOverScene.ts

@@ -42,8 +42,10 @@ export default class PlayScene extends Phaser.Scene {
       color: 'cyan'
     }).setOrigin(0.5, 0.5)
 
-    if (window.myStuff.token)
+    if (window.myStuff.token) {
       await API.record(pts, shts, time)
+      await window.updateTopList()
+    }
     window.unfreezeGui()
   }
 }

game/src/style.css

@@ -1,3 +1,7 @@
+* {
+  box-sizing: border-box;
+}
+
 html,body{
   padding: 0;
   margin: 0;
@@ -23,9 +27,25 @@ body {
   font-family: 'Courier New', Courier, monospace;
 }
 
-canvas {
+#gameBox {
   display: block;
   width: 800px;
   margin: auto;
   box-shadow: 0 0 35px rgba(0,255,255,0.3);
+  position: relative;
+}
+
+.records {
+  display: block;
+  position: absolute;
+  background-color: yellow;
+  width: 250px;
+  right: -270px;
+  padding: 20px;
+}
+
+h4 {
+  margin: 0;
+  margin-bottom: 10px;
+  text-align: center;
 }