eplace/src/rooms/canvas/index.js

import { authedAPIRequest } from "../../utils/auth";

/**
 * @param {string} room
 * @return {Promise<Object?>} The response Json object
 */
async function fetchCanvas(room) {
    if (!room) {
        console.error("Cannot fetch canvas of an undefined room");
        return null;
    }

    const response = await authedAPIRequest("/rooms/" + room + "/canvas", {
        method: "GET",
    });

    if (!response || !response.ok) {
        console.error(
            "Could not retrieve room canvas: " + response
                ? response.statusText
                : "null",
        );
        console.debug(await response.text());
        return null;
    }

    const res = await response.json();

    console.debug(`Retrieved canvas for room ${room}:`);
    // console.debug(res);

    return res;
}

// Splits a string into fixed length substrings
String.prototype.chunk = function (size) {
    return [].concat.apply(
        [],
        this.split("").map(function (x, i) {
            return i % size ? [] : this.slice(i, i + size);
        }, this),
    );
};

// get the canvas of a room and deserialize it
async function getCanvas(room) {
    const raw_pixels = await fetchCanvas(room);

    if (!raw_pixels || !raw_pixels.pixels) {
        console.error("Aborting canvas deserialization");
        return null;
    }

    // Convert to a an array of strings representing binary (beurk)
    let raw_binary_str = "";

    for (let i = 0; i < raw_pixels.pixels.length; i++) {
        raw_binary_str = raw_binary_str.concat(
            raw_pixels.pixels.charCodeAt(i).toString(2).padStart(8, "0"),
        );
    }
    // console.debug(raw_binary_str)

    // Chunk it to an array of fixed-length string (5)
    let pixel_array = raw_binary_str.chunk(5);

    if (pixel_array[pixel_array.length - 1].length < 5) {
        pixel_array.pop();
    }
    // console.debug(pixel_array)

    // Convert into numbers
    pixel_array = pixel_array.map((pixel) => parseInt(pixel, 2));
    // console.debug(pixel_array)

    return pixel_array;
}

// subscribe to the stream of a room
function subscribeToRoom() {}

// get the pixel info of a room
function getPixelInfo() {}

// place a pixel in a room
function placePixel() {}

export { getCanvas, subscribeToRoom, getPixelInfo, placePixel };