Merge branch 'main' into core_input_mouse_wheel

build.sh

@@ -7,11 +7,13 @@ mkdir -p build/
 clang -I./include/ -o build/core_basic_window ./examples/core_basic_window.c -L./lib/ -lraylib -lm
 clang -I./include/ -o build/core_basic_screen_manager ./examples/core_basic_screen_manager.c -L./lib/ -lraylib -lm
 clang -I./include/ -o build/core_input_keys ./examples/core_input_keys.c -L./lib/ -lraylib -lm
+clang -I./include/ -o build/shapes_colors_palette ./examples/shapes_colors_palette.c -L./lib/ -lraylib -lm
 clang -I./include/ -o build/game ./game.c -L./lib/ -lraylib -lm
 clang -I./include/ -o ./build/core_input_mouse_wheel ./examples/core_input_mouse_wheel.c -L./lib/ -lraylib -lm
 
 clang --target=wasm32 -I./include --no-standard-libraries -Wl,--export-table -Wl,--no-entry -Wl,--allow-undefined -Wl,--export=main -o wasm/core_basic_window.wasm ./examples/core_basic_window.c -DPLATFORM_WEB
 clang --target=wasm32 -I./include --no-standard-libraries -Wl,--export-table -Wl,--no-entry -Wl,--allow-undefined -Wl,--export=main -o wasm/core_basic_screen_manager.wasm ./examples/core_basic_screen_manager.c -DPLATFORM_WEB
 clang --target=wasm32 -I./include --no-standard-libraries -Wl,--export-table -Wl,--no-entry -Wl,--allow-undefined -Wl,--export=main -o wasm/core_input_keys.wasm ./examples/core_input_keys.c -DPLATFORM_WEB
+clang --target=wasm32 -I./include --no-standard-libraries -Wl,--export-table -Wl,--no-entry -Wl,--allow-undefined -Wl,--export=main -o wasm/shapes_colors_palette.wasm ./examples/shapes_colors_palette.c -DPLATFORM_WEB
 clang --target=wasm32 -I./include --no-standard-libraries -Wl,--export-table -Wl,--no-entry -Wl,--allow-undefined -Wl,--export=main -o wasm/game.wasm game.c -DPLATFORM_WEB
 clang --target=wasm32 -I./include --no-standard-libraries -Wl,--export-table -Wl,--no-entry -Wl,--allow-undefined -Wl,--export=main -o wasm/core_input_mouse_wheel.wasm ./examples/core_input_mouse_wheel.c -DPLATFORM_WEB

examples/shapes_colors_palette.c

@@ -0,0 +1,117 @@
+/*******************************************************************************************
+*
+*   raylib [shapes] example - Colors palette
+*
+*   Example originally created with raylib 1.0, last time updated with raylib 2.5
+*
+*   Example licensed under an unmodified zlib/libpng license, which is an OSI-certified,
+*   BSD-like license that allows static linking with closed source software
+*
+*   Copyright (c) 2014-2024 Ramon Santamaria (@raysan5)
+*
+********************************************************************************************/
+
+#include "raylib.h"
+#define MAX_COLORS_COUNT    21          // Number of colors available
+
+void raylib_js_set_entry(void (*entry)(void));
+
+Color colors[MAX_COLORS_COUNT] = {
+    DARKGRAY, MAROON, ORANGE, DARKGREEN, DARKBLUE, DARKPURPLE, DARKBROWN,
+    GRAY, RED, GOLD, LIME, BLUE, VIOLET, BROWN, LIGHTGRAY, PINK, YELLOW,
+    GREEN, SKYBLUE, PURPLE, BEIGE };
+
+const char *colorNames[MAX_COLORS_COUNT] = {
+    "DARKGRAY", "MAROON", "ORANGE", "DARKGREEN", "DARKBLUE", "DARKPURPLE",
+    "DARKBROWN", "GRAY", "RED", "GOLD", "LIME", "BLUE", "VIOLET", "BROWN",
+    "LIGHTGRAY", "PINK", "YELLOW", "GREEN", "SKYBLUE", "PURPLE", "BEIGE" };
+
+Rectangle colorsRecs[MAX_COLORS_COUNT] = { 0 };     // Rectangles array
+
+int colorState[MAX_COLORS_COUNT] = { 0 };           // Color state: 0-DEFAULT, 1-MOUSE_HOVER
+
+Vector2 mousePoint = { 0.0f, 0.0f };
+
+
+void GameFrame()
+{
+    // Update
+    //----------------------------------------------------------------------------------
+    mousePoint = GetMousePosition();
+
+    for (int i = 0; i < MAX_COLORS_COUNT; i++)
+    {
+        if (CheckCollisionPointRec(mousePoint, colorsRecs[i])) colorState[i] = 1;
+        else colorState[i] = 0;
+    }
+    //----------------------------------------------------------------------------------
+
+    // Draw
+    //----------------------------------------------------------------------------------
+    BeginDrawing();
+
+        ClearBackground(RAYWHITE);
+
+        DrawText("raylib colors palette", 28, 42, 20, BLACK);
+        DrawText("press SPACE to see all colors", GetScreenWidth() - 180, GetScreenHeight() - 40, 10, GRAY);
+
+        for (int i = 0; i < MAX_COLORS_COUNT; i++)    // Draw all rectangles
+        {
+            DrawRectangleRec(colorsRecs[i], Fade(colors[i], colorState[i]? 0.6f : 1.0f));
+
+            if (IsKeyDown(KEY_SPACE) || colorState[i])
+            {
+                DrawRectangle((int)colorsRecs[i].x, (int)(colorsRecs[i].y + colorsRecs[i].height - 26), (int)colorsRecs[i].width, 20, BLACK);
+                DrawRectangleLinesEx(colorsRecs[i], 6, Fade(BLACK, 0.3f));
+                DrawText(colorNames[i], (int)(colorsRecs[i].x + colorsRecs[i].width - MeasureText(colorNames[i], 10) - 12),
+                    (int)(colorsRecs[i].y + colorsRecs[i].height - 20), 10, colors[i]);
+            }
+        }
+
+    EndDrawing();
+    //----------------------------------------------------------------------------------
+}
+
+
+//------------------------------------------------------------------------------------
+// Program main entry point
+//------------------------------------------------------------------------------------
+int main(void)
+{
+    // Initialization
+    //--------------------------------------------------------------------------------------
+    const int screenWidth = 800;
+    const int screenHeight = 450;
+
+    InitWindow(screenWidth, screenHeight, "raylib [shapes] example - colors palette");
+
+
+    // Fills colorsRecs data (for every rectangle)
+    for (int i = 0; i < MAX_COLORS_COUNT; i++)
+    {
+        colorsRecs[i].x = 20.0f + 100.0f *(i%7) + 10.0f *(i%7);
+        colorsRecs[i].y = 80.0f + 100.0f *(i/7) + 10.0f *(i/7);
+        colorsRecs[i].width = 100.0f;
+        colorsRecs[i].height = 100.0f;
+    }
+
+
+
+    SetTargetFPS(60);               // Set our game to run at 60 frames-per-second
+    //--------------------------------------------------------------------------------------
+
+#ifdef PLATFORM_WEB
+    raylib_js_set_entry(GameFrame);
+#else
+    // Main game loop
+    while (!WindowShouldClose())    // Detect window close button or ESC key
+    {
+        GameFrame();
+    }
+    // De-Initialization
+    //--------------------------------------------------------------------------------------
+    CloseWindow();                // Close window and OpenGL context
+    //--------------------------------------------------------------------------------------
+#endif
+    return 0;
+}

index.html

@@ -10,7 +10,7 @@
             transform: translate(-50%, -50%);
             border: 1px solid black
         }
-        
+
         #raylib-example-select {
             display: block;
             max-width: 8rem;
@@ -46,8 +46,9 @@
         const wasmPaths = {
             "tsoding": ["game",],
             "core": ["core_basic_window", "core_basic_screen_manager", "core_input_keys", "core_input_mouse_wheel",],
+            "shapes": ["shapes_colors_palette"]
         }
-        
+
         const raylibExampleSelect = document.getElementById("raylib-example-select");
 
         for (const exampleCategory in wasmPaths){
@@ -57,7 +58,7 @@
             }
             raylibExampleSelect.innerHTML += "</optgroup>"
         }
-        
+
         const { protocol } = window.location;
         const isHosted = protocol !== "file:";
         let raylibJs = undefined;
@@ -86,7 +87,7 @@
                         `;
                 });
             }
-            
+
         }
 
         startRaylib("game");

raylib.js

@@ -12,6 +12,15 @@ function make_environment(env) {
 }
 
 class RaylibJs {
+    // TODO: We stole the font from the website
+    // (https://raylib.com/) and it's slightly different than
+    // the one that is "baked" into Raylib library itself. To
+    // account for the differences we scale the size with a
+    // magical factor.
+    //
+    // It would be nice to have a better approach...
+    #FONT_SCALE_MAGIC = 0.65;
+
     #reset() {
         this.previous = undefined;
         this.wasm = undefined;
@@ -22,6 +31,7 @@ class RaylibJs {
         this.prevPressedKeyState = new Set();
         this.currentPressedKeyState = new Set();
         this.currentMouseWheelMoveState = 0;
+        this.currentMousePosition = {x: 0, y: 0};
         this.quit = false;
     }
 
@@ -58,10 +68,13 @@ class RaylibJs {
         const wheelMove = (e) => {
           this.currentMouseWheelMoveState = Math.sign(-e.deltaY);
         };
-
+        const mouseMove = (e) => {
+            this.currentMousePosition = {x: e.clientX, y: e.clientY};
+        };
         window.addEventListener("keydown", keyDown);
         window.addEventListener("keyup", keyUp);
         window.addEventListener("wheel", wheelMove);
+        window.addEventListener("mousemove", mouseMove);
 
         this.wasm.instance.exports.main();
         const next = (timestamp) => {
@@ -141,14 +154,7 @@ class RaylibJs {
         const buffer = this.wasm.instance.exports.memory.buffer;
         const text = cstr_by_ptr(buffer, text_ptr);
         const color = getColorFromMemory(buffer, color_ptr);
-        // TODO: We stole the font from the website
-        // (https://raylib.com/) and it's slightly different than
-        // the one that is "baked" into Raylib library itself. To
-        // account for the differences we scale the size with a
-        // magical factor.
-        //
-        // It would be nice to have a better approach...
-        fontSize *= 0.65;
+        fontSize *= this.#FONT_SCALE_MAGIC;
         this.ctx.fillStyle = color;
         // TODO: since the default font is part of Raylib the css that defines it should be located in raylib.js and not in index.html
         this.ctx.font = `${fontSize}px grixel`;
@@ -181,6 +187,54 @@ class RaylibJs {
         return args[0];
     }
 
+    GetMousePosition(result_ptr) {
+        const bcrect = this.ctx.canvas.getBoundingClientRect();
+        const x = this.currentMousePosition.x - bcrect.left;
+        const y = this.currentMousePosition.y - bcrect.top;
+
+        const buffer = this.wasm.instance.exports.memory.buffer;
+        new Float32Array(buffer, result_ptr, 2).set([x, y]);
+    }
+
+    CheckCollisionPointRec(point_ptr, rec_ptr) {
+        const buffer = this.wasm.instance.exports.memory.buffer;
+        const [x, y] = new Float32Array(buffer, point_ptr, 2);
+        const [rx, ry, rw, rh] = new Float32Array(buffer, rec_ptr, 4);
+        return ((x >= rx) && x <= (rx + rw) && (y >= ry) && y <= (ry + rh));
+    }
+
+    Fade(result_ptr, color_ptr, alpha) {
+        const buffer = this.wasm.instance.exports.memory.buffer;
+        const [r, g, b, _] = new Uint8Array(buffer, color_ptr, 4);
+        const newA = Math.max(0, Math.min(255, 255.0*alpha));
+        new Uint8Array(buffer, result_ptr, 4).set([r, g, b, newA]);
+    }
+
+    DrawRectangleRec(rec_ptr, color_ptr) {
+        const buffer = this.wasm.instance.exports.memory.buffer;
+        const [x, y, w, h] = new Float32Array(buffer, rec_ptr, 4);
+        const color = getColorFromMemory(buffer, color_ptr);
+        this.ctx.fillStyle = color;
+        this.ctx.fillRect(x, y, w, h);
+    }
+
+    DrawRectangleLinesEx(rec_ptr, lineThick, color_ptr) {
+        const buffer = this.wasm.instance.exports.memory.buffer;
+        const [x, y, w, h] = new Float32Array(buffer, rec_ptr, 4);
+        const color = getColorFromMemory(buffer, color_ptr);
+        this.ctx.strokeStyle = color;
+        this.ctx.lineWidth = lineThick;
+        this.ctx.strokeRect(x + lineThick/2, y + lineThick/2, w - lineThick, h - lineThick);
+    }
+
+    MeasureText(text_ptr, fontSize) {
+        const buffer = this.wasm.instance.exports.memory.buffer;
+        const text = cstr_by_ptr(buffer, text_ptr);
+        fontSize *= this.#FONT_SCALE_MAGIC;
+        this.ctx.font = `${fontSize}px grixel`;
+        return this.ctx.measureText(text).width;
+    }
+
     raylib_js_set_entry(entry) {
         this.entryFunction = this.wasm.instance.exports.__indirect_function_table.get(entry);
     }