diff --git a/.gitignore b/.gitignore index 3af53d7..f163d7c 100644 --- a/.gitignore +++ b/.gitignore @@ -6,3 +6,4 @@ hand.c index.html museum.c pengers.h +node_modules/ diff --git a/README.md b/README.md index 638ebeb..5617fba 100644 --- a/README.md +++ b/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 diff --git a/docker-compose.yml b/docker-compose.yml index d617474..974225f 100644 --- a/docker-compose.yml +++ b/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" diff --git a/index.html.template b/index.html.template index 3f20d8e..a24967f 100644 --- a/index.html.template +++ b/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 @@

Penger is afraid of your stinky hand

diff --git a/load.js b/load.js index cee4076..edef881 100644 --- a/load.js +++ b/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(); diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..ff81560 --- /dev/null +++ b/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 + } + } + } + } +} diff --git a/package.json b/package.json new file mode 100644 index 0000000..2b7dfaa --- /dev/null +++ b/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" + } +} diff --git a/server.js b/server.js new file mode 100644 index 0000000..6b5fdb3 --- /dev/null +++ b/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 += "
  • " + s.game.pseudo + "
    • "; }); + 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(); + }); +});