serveur: list of player

.gitignore

@@ -6,3 +6,4 @@ hand.c
 index.html
 museum.c
 pengers.h
+node_modules/

README.md

@@ -1,10 +1,3 @@
-# WASM test
+# PENGER PARTY
 
-this is a test to understand how wasm work, this repo contains exemple of :
-
-- compiling wasm module from c
-- loading wasm module in js
-- importing / exporting symbol
-- PENGER
-
-it's also a 'template' for copy pasting js boilerplate.
+Let's penger together

docker-compose.yml

@@ -3,8 +3,10 @@ version: "3"
 services:
   web:
     container_name: "web"
-    image: "httpd"
+    image: "node"
     ports:
       - "6969:80"
+      - "8080:8080"
     volumes:
-      - ".:/usr/local/apache2/htdocs/"
+      - ".:/app"
+    command: "node /app/server.js"

index.html.template

@@ -11,6 +11,9 @@
                 width: 64px;
                 image-rendering: pixelated;
             }
+            .players-img {
+                margin-right: 10px;
+            }
             h1 {
                 text-align: center;
                 font-size: 1.5em;
@@ -47,6 +50,14 @@
                 <p>Penger is afraid of your stinky hand</p>
             </div>
             <div id="right">
+                <h3>Multiplayer:</h3>
+                <p>
+                    play with the pseudo name:
+                    <input id="pseudo" placeholder="Penger Lover" />
+                    <button id="play">Play</button>
+                </p>
+                <p>Players:</p>
+                <ul id="players"></ul>
                 <h3>Choose your penger:</h3>
             </div>
         </div>

load.js

@@ -1,8 +1,46 @@
-var scale = 2;
+const connection = new WebSocket('ws://localhost:8080');
+connection.onmessage = (e) => {
+    var req = JSON.parse(e.data);
+    if (req.name == 'pseudo') {
+        document.getElementById('players').innerHTML = req.value;
+        var pengers_img = document.getElementsByClassName('penger-img');
+        var list = [];
+        for (var i = 0; i < pengers_img.length; i++) {
+            list[list.length] = pengers_img[i].src;
+        }
+        var players_img = document.getElementsByClassName('players-img');
+        for (var i = 0; i < players_img.length; i++) {
+            players_img[i].src = list[players_img[i].getAttribute('penger-id')];
+        }
+    }
+};
 
 var global_instance;
 var global_memory;
 
+var scale = 2;
+
+window.onload = () => {
+    var canvas = document.getElementById("demo-canvas");
+    canvas.onmousemove = (e) => {
+        var r = canvas.getBoundingClientRect();
+        wasm_function('set_mouse')(e.clientX - r.x, e.clientY - r.y);
+    }
+    var pengers_img = document.getElementsByClassName('penger-img');
+    for (var i = 0; i < pengers_img.length; i++) {
+        pengers_img[i].onclick = (e) => {
+            var id = e.target.getAttribute('penger-id');
+            wasm_set_variable('id', id)
+            connection.send('{"name": "id", "value": "'+id+'"}');
+        };
+    }
+    var play = document.getElementById('play');
+    play.onclick = () => {
+        var pseudo = document.getElementById('pseudo').value;
+        connection.send('{"name": "pseudo", "value": "'+pseudo+'"}');
+    };
+};
+
 function wasm_variable(name)
 {
     return global_memory[global_instance.exports[name].value / 4];
@@ -16,18 +54,6 @@ function wasm_function(name)
     return global_instance.exports[name];
 }
 
-window.onload = () => {
-    var canvas = document.getElementById("demo-canvas");
-    var pengers_img = document.getElementsByClassName('penger-img');
-    canvas.onmousemove = (e) => {
-        var r = canvas.getBoundingClientRect();
-        wasm_function('set_mouse')(e.clientX - r.x, e.clientY - r.y);
-    }
-    for (var i = 0; i < pengers_img.length; i++) {
-        pengers_img[i].onclick = (e) => {wasm_set_variable('id', e.target.getAttribute('penger-id'))}
-    }
-};
-
 (async() => {
 
 // jsp, je l'ai pris de la: https://github.com/tsoding/olive.c
@@ -82,7 +108,9 @@ wasm_function('init')();
 
 let prev = null;
 function first(timestamp) {
-    wasm_set_variable('id', Math.random() * document.getElementsByClassName('penger-img').length);
+    var id = Math.floor(Math.random() * document.getElementsByClassName('penger-img').length);
+    wasm_set_variable('id', id);
+    connection.send('{"name": "id", "value": "'+id+'"}');
     prev = timestamp;
     wasm_function('draw')(0.16);
     window.requestAnimationFrame(loop);
@@ -97,7 +125,12 @@ function loop(timestamp) {
 }
 window.requestAnimationFrame(first);
 
+var is_on_canva = false;
+document.getElementById("demo-canvas").addEventListener("mouseenter", () => {is_on_canva = true;});
+document.getElementById("demo-canvas").addEventListener("mouseout", () => {is_on_canva = false;});
+
 addEventListener('keydown', (e) => {
+    if (!is_on_canva) return;
     wasm_function('key_pressed')(e.keyCode);
     if(["Space","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
         e.preventDefault();

package-lock.json

@@ -0,0 +1,36 @@
+{
+  "name": "webassembly",
+  "version": "1.0.0",
+  "lockfileVersion": 3,
+  "requires": true,
+  "packages": {
+    "": {
+      "name": "webassembly",
+      "version": "1.0.0",
+      "license": "ISC",
+      "dependencies": {
+        "ws": "^8.18.0"
+      }
+    },
+    "node_modules/ws": {
+      "version": "8.18.0",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-8.18.0.tgz",
+      "integrity": "sha512-8VbfWfHLbbwu3+N6OKsOMpBdT4kXPDDB9cJk2bJ6mh9ucxdlnNvH1e+roYkKmN9Nxw2yjz7VzeO9oOz2zJ04Pw==",
+      "engines": {
+        "node": ">=10.0.0"
+      },
+      "peerDependencies": {
+        "bufferutil": "^4.0.1",
+        "utf-8-validate": ">=5.0.2"
+      },
+      "peerDependenciesMeta": {
+        "bufferutil": {
+          "optional": true
+        },
+        "utf-8-validate": {
+          "optional": true
+        }
+      }
+    }
+  }
+}

package.json

@@ -0,0 +1,23 @@
+{
+  "name": "webassembly",
+  "version": "1.0.0",
+  "description": "",
+  "main": "load.js",
+  "scripts": {
+    "start": "node server.js"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/CaptainBoulbi/wasm-test.git"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/CaptainBoulbi/wasm-test/issues"
+  },
+  "homepage": "https://github.com/CaptainBoulbi/wasm-test#readme",
+  "dependencies": {
+    "ws": "^8.18.0"
+  }
+}

server.js

@@ -0,0 +1,78 @@
+const fs = require('fs');
+const http = require("http");
+const ws = require('ws');
+
+const HTTP_PORT = 80;
+const WS_PORT = 8080;
+const DIR = "/app";
+
+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>"; });
+    sockets.forEach((s) => { s.send('{"name": "pseudo", "value": "'+list+'"}'); });
+}
+
+const requestListener = function (req, res) {
+    var url = req.url;
+
+    if (url == "/" || url == "/index.html") {
+        res.setHeader("Content-Type", "text/html");
+        res.writeHead(200);
+        res.end(fs.readFileSync(DIR + "/index.html"));
+        return;
+    }
+
+    if (url == "/app.wasm") {
+        res.setHeader("Content-Type", "application/wasm");
+        res.writeHead(200);
+        res.end(fs.readFileSync(DIR + url));
+        return;
+    }
+
+    if (url == "/load.js") {
+	    res.setHeader("Content-Type", "text/javascript");
+        res.writeHead(200);
+        res.end(fs.readFileSync(DIR + url));
+        return;
+    }
+
+    if (url.startsWith("/museum/")) {
+	    res.setHeader("Content-Type", "image/png");
+        res.writeHead(200);
+        res.end(fs.readFileSync(DIR + url));
+        return;
+    }
+
+    res.setHeader("Content-Type", "text/html");
+    res.writeHead(404);
+    res.end(`Page not found`);
+};
+
+const http_server = http.createServer(requestListener);
+http_server.listen(HTTP_PORT, () => {
+    console.log(`Server is running on port ${HTTP_PORT}`);
+});
+
+const ws_server = new ws.Server({ port: WS_PORT });
+
+var sockets = [];
+ws_server.on('connection', (socket) => {
+    socket.game = {};
+    sockets.push(socket);
+    console.log("connect: ", sockets.length );
+
+    socket.on('message', (msg) => {
+        var msg_str = Buffer.from(msg).toString('latin1');
+        var req = JSON.parse(msg_str);
+        socket.game[req.name] = req.value;
+        update_player_list();
+        console.log(socket.game);
+    });
+
+    socket.on('close', () => {
+        sockets = sockets.filter(s => s !== socket);
+        console.log("close: ", sockets.length);
+        update_player_list();
+    });
+});