leaderboard

build.sh

@@ -48,7 +48,7 @@ done
 echo "}" >> pengers.h
 
 echo -e "$pengers_html" > pengers_image.html.temp
-sed -e '/Choose your penger:/rpengers_image.html.temp' index.html.template > index.html
+sed -e '/<!-- penger images src -->/rpengers_image.html.temp' index.html.template > index.html
 rm pengers_image.html.temp
 
 ./png2c "hand.png" > hand.c

docker-compose.yml

@@ -3,6 +3,7 @@ version: "3"
 services:
   penger-party:
     container_name: "penger-party"
+    restart: always
     image: "node"
     ports:
       - "6912:6969"

index.html.template

@@ -19,6 +19,20 @@
                 font-size: 1.5em;
                 margin: 0px;
             }
+            h3 {
+                margin-top: 7px;
+            }
+            .info {
+                display: flex;
+                flex-wrap: wrap;
+                justify-content: space-between;
+            }
+            .info > * {
+                margin-right: 1rem;
+            }
+            #chat {
+                width: 69%;
+            }
             @media screen and (min-width: calc(800px + calc(64px * 4))) {
                 #css-bullshit {
                     content: "";
@@ -44,24 +58,42 @@
             <div id="left">
                 <canvas id="demo-canvas"></canvas>
                 <h3>Instructions:</h3>
-                <p>Press q, d or arrow key to move</p>
-                <p>Press shift key to slow down</p>
-                <p>Press space key to jump</p>
-                <p>Penger is afraid of your stinky hand</p>
+                <ul>
+                    <li>Press q, d or arrow key to move</li>
+                    <li>Press shift key to slow down</li>
+                    <li>Press space key to jump</li>
+                    <li>Penger is afraid of your stinky fingers</li>
+                    <li>Choose your username to play online</li>
+                </ul>
             </div>
             <div id="right">
                 <h3>Multiplayer:</h3>
-                <p>
-                    Play online with the pseudo name:
-                    <input id="pseudo" placeholder="Penger Lover" />
-                    <button id="play">Play</button>
-                </p>
-                <p>Players:</p>
-                <ul id="players">Not connected</ul>
-                <p>Playing map : <span id="map-name">Default Map</span></p>
-                <p>Next map in : <span id="map-time">-1</span></p>
-                <p>Coin collected : <span id="nb-coin">0</span></p>
+                <div class="info">
+                    <p>
+                        Play online with the pseudo name :
+                        <input id="pseudo" placeholder="Penger Lover" />
+                        <button id="play">Play</button>
+                    </p>
+                    <p>Playing map : <span id="map-name">Offline Map</span></p>
+                    <p>Next map in : <span id="map-time">-1</span></p>
+                    <p>Coin collected : <span id="nb-coin">0</span></p>
+                </div>
+                <div class="info">
+                    <div>
+                        <h3>Players:</h3>
+                        <ul id="players">Not connected</ul>
+                    </div>
+                    <div>
+                        <h3>Today leaderboard:</h3>
+                        <ul id="leader-today"></ul>
+                    </div>
+                    <div>
+                        <h3>Total leaderboard:</h3>
+                        <ul id="leader-total"></ul>
+                    </div>
+                </div>
                 <h3>Choose your penger:</h3>
+                <!-- penger images src -->
             </div>
         </div>
         <h3>Made by a Penger Entousiast</h3>

leaderboard.json

@@ -0,0 +1,16 @@
+{
+    "today": [
+        {"name": "none", "value": 0},
+        {"name": "none", "value": 0},
+        {"name": "none", "value": 0},
+        {"name": "none", "value": 0},
+        {"name": "none", "value": 0}
+    ],
+    "total": [
+        {"name": "none", "value": 0},
+        {"name": "none", "value": 0},
+        {"name": "none", "value": 0},
+        {"name": "none", "value": 0},
+        {"name": "none", "value": 0}
+    ]
+}

load.js

@@ -27,7 +27,7 @@ window.onload = () => {
             is_connected = false;
             wasm_set_variable('nb_players', 0);
             document.getElementById('players').innerHTML = "Not connected";
-            document.getElementById('map-name').innerText = "Default Map";
+            document.getElementById('map-name').innerText = "Offline Map";
             document.getElementById('map-time').innerText = "-1";
             wasm_function("set_default_map")();
             wasm_function('reset_coins')();
@@ -49,8 +49,8 @@ function wasm_function(name)
     return global_instance.exports[name];
 }
 
-const connection = new WebSocket(document.URL.replace('http', 'ws').replace('6969', '4242'));
-// const connection = new WebSocket('ws://localhost:4242');
+const connection = new WebSocket(document.URL.replace("http", "ws").replace(/(:6969|\/$)/, ":4242") /* get ws url to localhost or server */);
+// const connection = new WebSocket(document.URL.replace("http", "ws"));
 connection.onopen = (e) => { console.log("connection to server opened"); };
 connection.onmessage = (e) => {
     var req = JSON.parse(e.data);
@@ -68,7 +68,6 @@ connection.onmessage = (e) => {
         }
     }
     else if (req.name == "rid") {
-        console.log(req);
         my_rid = req.value;
     }
     else if (req.name == "pos") {
@@ -100,6 +99,20 @@ connection.onmessage = (e) => {
             );
         }
     }
+    else if (req.name == "leaderboard") {
+        var tod = req.value.today;
+        var tot = req.value.total;
+        var el_tod = document.getElementById("leader-today");
+        var el_tot = document.getElementById("leader-total");
+        el_tod.innerHTML = "";
+        el_tot.innerHTML = "";
+        for (var i = 0; i < tod.length; i++) {
+            el_tod.innerHTML += "<li>"+tod[i].name+": "+tod[i].value+" coins </li>";
+        }
+        for (var i = 0; i < tot.length; i++) {
+            el_tot.innerHTML += "<li>"+tot[i].name+": "+tot[i].value+" coins </li>";
+        }
+    }
     else if (req.name == "disconnect") {
         wasm_function('deco_player')(req.value);
     }

server.js

@@ -10,7 +10,7 @@ function update_player_list()
     var list = "";
     sockets.forEach((s) => {
         if (s.game.pseudo == undefined || s.game.pseudo == "") return;
-        list += "<li><img class='players-img' penger-id='"+s.game.id+"' src='museum/Penger.png'>" + s.game.pseudo + "</li>";
+        list += "<li><img class='players-img' penger-id='"+s.game.id+"' src='museum/Penger.png'>" + s.game.pseudo + ": " + s.game.coin + " coins</li>";
     });
     sockets.forEach((s) => {
         if (s.game.pseudo == undefined || s.game.pseudo == "") return;
@@ -94,6 +94,7 @@ http_server.listen(HTTP_PORT, () => {
 });
 
 var maps = JSON.parse(fs.readFileSync("maps.json"));
+var leaderboard = JSON.parse(fs.readFileSync("leaderboard.json"));
 
 const ws_server = new ws.Server({ port: WS_PORT });
 
@@ -106,6 +107,7 @@ ws_server.on('connection', (socket) => {
     socket.game.rid = global_id++;
 
     socket.send('{"name": "rid", "value": '+socket.game.rid+'}');
+    socket.send('{"name": "leaderboard", "value": '+JSON.stringify(leaderboard)+'}');
 
     sockets.push(socket);
     console.log("[", sockets.length, "] connect");
@@ -130,6 +132,38 @@ ws_server.on('connection', (socket) => {
         }
         else if (req.name == "coin") {
             socket.game.coin++;
+            update_player_list();
+            var update_leaderboard = false;
+            if (leaderboard.today[leaderboard.today.length-1].value < socket.game.coin) {
+                update_leaderboard = true;
+                var already_exist = leaderboard.today.find((e) => {return e.name == socket.game.pseudo});
+                if (already_exist != undefined) {
+                    already_exist.value++;
+                    leaderboard.today.sort((a, b) => {return a.value <= b.value ? 1 : -1;});
+                } else {
+                    leaderboard.today[leaderboard.today.length] = {name: socket.game.pseudo, value: socket.game.coin};
+                    leaderboard.today.sort((a, b) => {return a.value <= b.value ? 1 : -1;});
+                    leaderboard.today.pop();
+                }
+            }
+            if (leaderboard.total[leaderboard.total.length-1].value < socket.game.coin) {
+                update_leaderboard = true;
+                var already_exist = leaderboard.total.find((e) => {return e.name == socket.game.pseudo});
+                if (already_exist != undefined) {
+                    already_exist.value++;
+                    leaderboard.total.sort((a, b) => {return a.value <= b.value ? 1 : -1;});
+                } else {
+                    leaderboard.total[leaderboard.total.length] = {name: socket.game.pseudo, value: socket.game.coin};
+                    leaderboard.total.sort((a, b) => {return a.value <= b.value ? 1 : -1;});
+                    leaderboard.total.pop();
+                }
+            }
+            if (update_leaderboard) {
+                fs.writeFile('leaderboard.json', JSON.stringify(leaderboard), ()=>{});
+                sockets.forEach((s) => {
+                    s.send('{"name": "leaderboard", "value": '+JSON.stringify(leaderboard)+'}');
+                });
+            }
         }
     });