ux

.gitignore

@@ -3,3 +3,6 @@ app.wat
 png2c
 penger.c
 hand.c
+index.html
+museum.c
+pengers.h

app.c

@@ -1,4 +1,4 @@
-#include "penger.c"
+#include "pengers.h"
 #include "hand.c"
 
 #define GREEN 0xff00ff00
@@ -11,6 +11,7 @@
 const unsigned int width = 800;
 const unsigned int height = 600;
 unsigned int BUFFER[width * height];
+int id = 0;
 
 // importer depuis js
 int get_scale(void);
@@ -97,20 +98,20 @@ int rand(int min, int max)
 void rebondi(v2 *pos, int scale)
 {
     float div = -1.5;
-    if (pos->x - penger_width*scale/2 < 0) {
+    if (pos->x - pengers_width[id]*scale/2 < 0) {
-        pos->x = penger_width*scale/2;
+        pos->x = pengers_width[id]*scale/2;
         velocity.x /= div;
     }
-    if (pos->y - penger_height*scale/2 < 0) {
+    if (pos->y - pengers_height[id]*scale/2 < 0) {
-        pos->y = penger_height*scale/2;
+        pos->y = pengers_height[id]*scale/2;
         velocity.y /= div;
     }
-    if (pos->x + penger_width*scale/2 >= width) {
+    if (pos->x + pengers_width[id]*scale/2 >= width) {
-        pos->x = width - penger_width*scale/2;
+        pos->x = width - pengers_width[id]*scale/2;
         velocity.x /= div;
     }
-    if (pos->y + penger_height*scale/2 >= height) {
+    if (pos->y + pengers_height[id]*scale/2 >= height) {
-        pos->y = height - penger_height*scale/2;
+        pos->y = height - pengers_height[id]*scale/2;
         velocity.y /= div;
     }
 }
@@ -123,6 +124,7 @@ int collision(v2 point, int x, int y, int w, int h)
 
 void init()
 {
+    pengers_init();
 }
 
 void draw(float dt)
@@ -131,8 +133,8 @@ void draw(float dt)
 
     // position du penger en haut a gauche de l'image
     v2 penger_origin = {0};
-    penger_origin.x = penger_pos.x - penger_width*scale/2;
+    penger_origin.x = penger_pos.x - pengers_width[id]*scale/2;
-    penger_origin.y = penger_pos.y - penger_height*scale/2;
+    penger_origin.y = penger_pos.y - pengers_height[id]*scale/2;
 
     // jump
     if (keys[SPACE]) {
@@ -141,7 +143,7 @@ void draw(float dt)
     }
 
     // mouse push
-    if (collision(mouse, penger_origin.x, penger_origin.y, penger_width*scale, penger_height*scale)) {
+    if (collision(mouse, penger_origin.x, penger_origin.y, pengers_width[id]*scale, pengers_height[id]*scale)) {
         v2 force = v2_diff(penger_pos, mouse);
         force = v2_normalize(force);
         force = v2_scale(force, 5);
@@ -185,9 +187,9 @@ void draw(float dt)
     rebondi(&penger_pos, scale);
 
     // dessine le penger sur le canva
-    for (int y = 0; y < penger_height; y++) {
+    for (int y = 0; y < pengers_height[id]; y++) {
-        for (int i = 0; i < penger_width; i++) {
+        for (int i = 0; i < pengers_width[id]; i++) {
-            if (penger_img[y][i] <= 0x00FFFFFF) // pixel transparant
+            if (pengers_img[id][y*pengers_width[id] + i] <= 0x00FFFFFF) // pixel transparant
                 continue;
             for (int s1 = 0; s1 < scale; s1++) {
                 for (int s2 = 0; s2 < scale; s2++) {
@@ -195,7 +197,7 @@ void draw(float dt)
                     int idx_y = penger_origin.y + y*scale+s2;
                     if (idx_x < 0 || idx_x >= width || idx_y < 0 || idx_y >= height)
                         continue;
-                    BUFFER[idx_y*width + idx_x] = penger_img[y][i];
+                    BUFFER[idx_y*width + idx_x] = pengers_img[id][y*pengers_width[id] + i];
                 }
             }
         }

build.sh

@@ -1,6 +1,6 @@
 #!/bin/bash
 
-export_sym="init draw key_pressed key_released set_velocity set_mouse BUFFER width height"
+export_sym="init draw key_pressed key_released set_velocity set_mouse BUFFER width height id"
 export_cmd=""
 for e in $export_sym; do
     export_cmd="$export_cmd -Wl,--export=$e";
@@ -14,10 +14,38 @@ else
     a=$1
 fi
 
-set -xe
+#set -xe
 
 clang png2c.c -o png2c -lm
-./png2c "penger.png" > penger.c
+mkdir -p museum.c
+rm -f museum.c/*
+
+pengers_html=$'\n'
+pengers_include=$'\n'
+id=0
+for p in $(ls 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'
+    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
+((id=id-1))
+for i in $(seq 0 $id); do
+    echo "    penger_init_$i();" >> pengers.h;
+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
+rm pengers_image.html.temp
+
 ./png2c "hand.png" > hand.c
 
 clang -O2 --target=wasm32 -fno-builtin -nostdlib --no-standard-libraries -Wl,--no-entry $export_cmd -Wl,--allow-undefined -o $f.wasm $a

index.html

@@ -1,23 +0,0 @@
-<!DOCTYPE html>
-<html>
-    <head>
-        <script src="load.js"></script>
-        <style>
-            #demo-canvas:hover {
-                cursor: none
-            };
-        </style>
-    </head>
-    <body>
-        <canvas id="demo-canvas"></canvas>
-        <br>
-        <p id='scale'></p>
-        <button id='descaling'>scale - 1</button>
-        <button id='scaling'>scale + 1</button>
-        <button id='reset'>reset velocity</button>
-        <br>
-        <p>Press arrow key to move</p>
-        <p>Press space key to jump</p>
-        <p>Penger is afraid of your stinky hand</p>
-    </body>
-</html>

index.html.template

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <script src="load.js"></script>
+        <style>
+            #demo-canvas:hover {
+                cursor: none
+            }
+            .penger-img {
+                width: 64px;
+                image-rendering: pixelated;
+            }
+            @media screen and (min-width: calc(800px + calc(64px * 4))) {
+                body {
+                    content: "";
+                    display: table;
+                    clear: both;
+                }
+                #left {
+                    float: left;
+                    width: 50%;
+                }
+                #right {
+                    float: right;
+                    width: calc(100% - 800px - 25px);
+                    position: absolute;
+                    top: 0px;
+                    right: 0px;
+                }
+            }
+        </style>
+    </head>
+    <body>
+        <div id="left">
+            <canvas id="demo-canvas"></canvas>
+            <br>
+            <button id='descaling'>scale - 1</button>
+            <button id='scaling'>scale + 1</button>
+            <button id='reset'>reset velocity</button>
+            <br>
+            <p id='scale'></p>
+            <p>Press arrow key to move</p>
+            <p>Press space key to jump</p>
+            <p>Penger is afraid of your stinky hand</p>
+        </div>
+        <div id="right">
+            <h3>Choose your penger:</h3>
+        </div>
+    </body>
+</html>

load.js

@@ -7,6 +7,10 @@ function wasm_variable(name)
 {
     return global_memory[global_instance.exports[name].value / 4];
 }
+function wasm_set_variable(name, val)
+{
+    return global_memory[global_instance.exports[name].value / 4] = val;
+}
 function wasm_function(name)
 {
     return global_instance.exports[name];
@@ -18,6 +22,7 @@ window.onload = () => {
     var scale_p = document.getElementById("scale");
     var reset_but = document.getElementById("reset");
     var canvas = document.getElementById("demo-canvas");
+    var pengers_img = document.getElementsByClassName('penger-img');
     scale_p.innerText = "scale: " + scale;
     scale_but.onclick = () => {
         scale++;
@@ -34,6 +39,9 @@ window.onload = () => {
         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() => {
@@ -90,6 +98,7 @@ wasm_function('init')();
 
 let prev = null;
 function first(timestamp) {
+    wasm_set_variable('id', Math.random() * document.getElementsByClassName('penger-img').length);
     prev = timestamp;
     wasm_function('draw')(0.16);
     window.requestAnimationFrame(loop);
@@ -106,6 +115,9 @@ window.requestAnimationFrame(first);
 
 addEventListener('keydown', (e) => {
     wasm_function('key_pressed')(e.keyCode);
+    if(["Space","ArrowUp","ArrowDown","ArrowLeft","ArrowRight"].indexOf(e.code) > -1) {
+        e.preventDefault();
+    }
 });
 
 addEventListener('keyup', (e) => {