Merge pull request #1 from FruitPassion/master

Code refactor

.gitignore

@@ -1,10 +1,3 @@
-app.wasm
-app.wat
-png2c
-penger.c
-hand.c
-index.html
-museum.c
-pengers.h
 node_modules/
-coin.c
+out/*
+!out/.gitkeep

app.c

@@ -1,6 +1,6 @@
-#include "pengers.h"
-#include "hand.c"
-#include "coin.c"
+#include "out/pengers.h"
+#include "out/hand.c"
+#include "out/coin.c"
 
 #define GREEN 0xff00ff00
 #define RED 0xff0000ff

build.sh

@@ -1,7 +1,8 @@
 #!/bin/bash
 
 if [[ "$1" == "clear" ]]; then
-    rm -vfr museum.c pengers.h hand.c app.wasm png2c app.wat index.html
+    rm -vfr out/*
+    touch out/.gitkeep
     exit
 fi;
 
@@ -21,39 +22,39 @@ fi
 
 #set -xe
 
-clang png2c.c -o png2c -lm
-mkdir -p museum.c
-rm -f museum.c/*
+clang png2c.c -o out/png2c -lm
+mkdir -p out/museum.c
+rm -f out/museum.c/*
 
 pengers_html=$'\n'
 pengers_include=$'\n'
 id=0
-for p in $(ls museum); do
+for p in $(ls static/museum/); do
     file=$(echo $p | sed "s/\.png$//g")
-    ./png2c "museum/"$p $id > museum.c/$file.c
-    pengers_html+=$'                <img src="museum/'$p'" class="penger-img" penger-id="'$id'"></img>\n'
+    ./out/png2c "static/museum/"$p $id > out/museum.c/$file.c
+    pengers_html+=$'                <img src="static/museum/'$p'" class="penger-img" penger-id="'$id'"></img>\n'
     pengers_include+='#include "museum.c/'$file$'.c"\n'
     ((id=id+1))
 done
 
-echo "int pengers_height[$id];" > pengers.h
-echo "int pengers_width[$id];" >> pengers.h
-echo "unsigned int *pengers_img[$id];" >> pengers.h
-echo "$pengers_include" >> pengers.h
-echo "void pengers_init(void) {" >> pengers.h
+echo "int pengers_height[$id];" > out/pengers.h
+echo "int pengers_width[$id];" >> out/pengers.h
+echo "unsigned int *pengers_img[$id];" >> out/pengers.h
+echo "$pengers_include" >> out/pengers.h
+echo "void pengers_init(void) {" >> out/pengers.h
 ((id=id-1))
 for i in $(seq 0 $id); do
-    echo "    penger_init_$i();" >> pengers.h;
+    echo "    penger_init_$i();" >> out/pengers.h;
 done
-echo "}" >> pengers.h
+echo "}" >> out/pengers.h
 
 echo -e "$pengers_html" > pengers_image.html.temp
-sed -e '/<!-- penger images src -->/rpengers_image.html.temp' index.html.template > index.html
+sed -e '/<!-- penger images src -->/rpengers_image.html.temp' templates/index.html.template > out/index.html
 rm pengers_image.html.temp
 
-./png2c "hand.png" > hand.c
-./png2c "coin.png" > coin.c
+./out/png2c "static/assets/hand.png" > out/hand.c
+./out/png2c "static/assets/coin.png" > out/coin.c
 
-clang -O3 --target=wasm32 -fno-builtin -nostdlib --no-standard-libraries -Wl,--no-entry $export_cmd -Wl,--allow-undefined -o $f.wasm $a
+clang -O3 --target=wasm32 -fno-builtin -nostdlib --no-standard-libraries -Wl,--no-entry $export_cmd -Wl,--allow-undefined -o out/$f.wasm $a
 
-wasm2wat $f.wasm > $f.wat
+wasm2wat out/$f.wasm > out/$f.wat

docker-compose.yml

@@ -1,5 +1,3 @@
-version: "3"
-
 services:
   penger-party:
     container_name: "penger-party"

load.js

@@ -175,7 +175,7 @@ function make_environment(...envs) {
     });
 }
 
-const { instance } = await WebAssembly.instantiateStreaming(fetch("./app.wasm"), {
+const { instance } = await WebAssembly.instantiateStreaming(fetch("./out/app.wasm"), {
     "env": make_environment({
         // importer les fonctions dans le wasm
         'random': Math.random,

png2c.c

@@ -20,11 +20,23 @@ int main(int argc, const char *argv[])
     }
 
     if (argc < 3) { // no id provided
-        int file_name_len = strlen(img_path) - strlen(".png");
+        char *last_slash = strrchr(img_path, '/');
+        char extracted[50];
 
-        printf("int %.*s_height = %d;\n", file_name_len, img_path, height);
-        printf("int %.*s_width = %d;\n", file_name_len, img_path, width);
-        printf("unsigned int %.*s_img[%d][%d] = {\n", file_name_len, img_path, height, width);
+        if (last_slash != NULL) {
+            // Extract the part after the last '/'
+            strcpy(extracted, last_slash + 1);
+            
+            // Remove the '.png' extension
+            char *dot = strrchr(extracted, '.');
+            if (dot != NULL) {
+                *dot = '\0'; // Null-terminate the string at the '.'
+            }
+        }
+
+        printf("int %s_height = %d;\n", extracted, height);
+        printf("int %s_width = %d;\n", extracted, width);
+        printf("unsigned int %s_img[%d][%d] = {\n", extracted, height, width);
 
         for (int y = 0; y < height; y++) {
             printf("    ");

server.js

@@ -46,6 +46,7 @@ function send_new_map()
     });
     setTimeout(send_new_map, map_every_ms);
 }
+
 setTimeout(send_new_map, map_every_ms);
 function send_map(socket)
 {
@@ -55,14 +56,14 @@ function send_map(socket)
 const requestListener = function (req, res) {
     var url = req.url;
 
-    if (url == "/" || url == "/index.html") {
+    if (url == "/") {
         res.setHeader("Content-Type", "text/html");
         res.writeHead(200);
-        res.end(fs.readFileSync("./index.html"));
+        res.end(fs.readFileSync("./out/index.html"));
         return;
     }
 
-    if (url == "/app.wasm") {
+    if (url == "/out/app.wasm") {
         res.setHeader("Content-Type", "application/wasm");
         res.writeHead(200);
         res.end(fs.readFileSync("." + url));
@@ -76,12 +77,20 @@ const requestListener = function (req, res) {
         return;
     }
 
-    if (url.startsWith("/museum/")) {
+    if (url.startsWith("/static/museum/")) {
 	    res.setHeader("Content-Type", "image/png");
         res.writeHead(200);
         res.end(fs.readFileSync("." + url));
         return;
     }
+
+    if (url.startsWith("/static/css/")) {
+	    res.setHeader("Content-Type", "text/css");
+        res.writeHead(200);
+        res.end(fs.readFileSync("." + url));
+        return;
+    }
+
     if (url == "/create-map") {
         res.setHeader("Content-Type", "text/html");
         res.writeHead(200);

static/css/base.css

@@ -0,0 +1,55 @@
+#demo-canvas:hover {
+    cursor: none
+}
+.penger-img {
+    width: 64px;
+    height: 64px;
+    image-rendering: pixelated;
+    object-fit: contain;
+    transition: transform 0.2s;
+}
+.penger-img:hover {
+    cursor: pointer;
+    transform: scale(1.1);
+}
+.players-img {
+    margin-right: 10px;
+}
+h1 {
+    text-align: center;
+    font-size: 3.5em;
+    margin: 0px;
+    margin-bottom: 20px;
+    font-family: "Comic Sans MS", "Comic Sans", cursive;
+}
+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: "";
+        display: table;
+        clear: both;
+    }
+    #left {
+        float: left;
+        width: 50%;
+    }
+    #right {
+        float: right;
+        width: calc(100% - 800px - 25px);
+        position: absolute;
+        right: 0px;
+    }
+}

static/css/rainbow.css

@@ -0,0 +1,46 @@
+.rainbow{
+    animation: rainbow 2.5s linear;
+    animation-iteration-count: infinite;
+}
+@keyframes rainbow{
+        100%,0%{
+            color: rgb(255,0,0);
+        }
+        8%{
+            color: rgb(255,127,0);
+        }
+        16%{
+            color: rgb(255,255,0);
+        }
+        25%{
+            color: rgb(127,255,0);
+        }
+        33%{
+            color: rgb(0,255,0);
+        }
+        41%{
+            color: rgb(0,255,127);
+        }
+        50%{
+            color: rgb(0,255,255);
+        }
+        58%{
+            color: rgb(0,127,255);
+        }
+        66%{
+            color: rgb(0,0,255);
+        }
+        75%{
+            color: rgb(127,0,255);
+        }
+        83%{
+            color: rgb(255,0,255);
+        }
+        91%{
+            color: rgb(255,0,127);
+        }
+}
+
+
+
+