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.ok) {
        console.error("Could not retrieve room canvas: " + response.statusText);
        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 };