Implement SetMouseCursor for PLATFORM_WEB

[BeardedBread]

Use EM_ASM to set the cursor element in CSS.
CSS cursor reference: link

Fix #3368

Build tested on Linux Mint 21.2, kernel 5.15.0-86-generic x86_64. May need help test build on Windows and MacOS.

Test Program (compiles for both DESKTOP and WEB):

#include "raylib.h"
#include <stdio.h>

#if defined(PLATFORM_WEB)
#include <emscripten/emscripten.h>
#endif

// Window size
static const int width = 800;
static const int height = 600;

// Grid sizes
const float grid_width = 200.0f;
const float grid_height = 200.0f;
const int grid_w = 4;

// Display name for cursor
static const char* CURSOR_NAMES[11] = 
{
    "default", "arrow", "text", "crosshair",
    "pointer", "ew-resize", "ns-resize", "nwse-resize",
    "nesw-resize", "move", "not-allowed"
};

void update_step(void)
{
    // Set the cursor based on mouse position in the grid
    Vector2 mouse_pos = GetMousePosition();
    int mouse_idx = (int)(mouse_pos.x / grid_width) + (int)(mouse_pos.y / grid_height) * grid_w;
    mouse_idx = (mouse_idx < 0)  ? 0: mouse_idx;
    mouse_idx = (mouse_idx > 10) ? 10: mouse_idx;
    MouseCursor cursor = (MouseCursor)mouse_idx;
    SetMouseCursor(cursor);

    static char buffer[64];
    snprintf(buffer, 64, "x: %.2f, y: %.2f, idx: %d", mouse_pos.x, mouse_pos.y, mouse_idx);
    buffer[63] = '\0';

    BeginDrawing();
        ClearBackground(LIGHTGRAY);
        for (int i = 0; i < grid_width; ++i)
        {
            DrawLine(grid_width*i, 0, grid_width*i, height, BLACK);
        }
        for (int i = 0; i < grid_height; ++i)
        {
            DrawLine(0, grid_height*i, width, grid_height*i, BLACK);
        }
        for (int i = 0; i < 11; i++)
        {
            int x = (i % grid_w) * grid_width + grid_width / 2;
            int y = (i / grid_w) * grid_height + grid_height / 2;
            DrawText(CURSOR_NAMES[i], x, y, 12, BLACK);
        }
        DrawText(buffer, 20, 20, 12, BLACK);
    EndDrawing();
}

int main(void)
{
    InitWindow(width, height, "raylib");
    SetTargetFPS(60);

    #if defined(PLATFORM_WEB)
        puts("Setting emscripten main loop");
        emscripten_set_main_loop(update_step, 0, 1);
    #else
        puts("Regular main loop");
        while(true)
        {
            update_step();
            if (WindowShouldClose()) break;
        }
    #endif
    CloseWindow();

}

Tested on Firefox 118.0.2 and Brave Browser Version 1.59.117 Chromium: 118.0.5993.70

[ghost]

Tested successfully with Firefox 118.0.1 64-bit and Chromium 117.0.5938.149 64-bit on Linux Mint 21.1 64-bit.
Excellent PR, great job!

Edit: @BeardedBread found a small problem. Since it's bounded to document.body it's applied to the entire web page. If the canvas is smaller than the web page, then the cursor also gets applied outside it, to all the page. IMHO, it should be restricted to the canvas.

[raysan5]

@BeardedBread thanks for this nice addition! Please, could you take a look to @ubkp comment?

[BeardedBread]

@ubkp Thank you! I see the problem.

This should be achievable if the EM_ASM line is changed to be

EM_ASM({document.getElementById("canvas").style.cursor = UTF8ToString($0);}, cursorName);

I've just tested with this change, and it is working as expected. I do wonder if this is the best way to go about it.