bouaaaaaaaaaaaah

src/pages/index.js

@@ -1,7 +1,7 @@
 import { initSocket, socket, subscribe } from "../utils/streams";
 import { calculateLayout } from "./utils";
 import { authenticate, refreshToken } from "../utils/auth";
-import { initCanvas } from "../rooms/canvas/utils";
+import { initCanvas, renderCanvasUpdate } from "../rooms/canvas/utils";
 import { getCanvas } from "../rooms/canvas/index";
 import { fetchRoomConfig, getCurrentRoomConfig } from "../rooms/index";
 
@@ -20,7 +20,7 @@ await initSocket();
 await subscribe(room, "pixel-update");
 // Main event
 socket.on("message", async (response) => {
-    console.debug("Received server evemt: ");
+    console.debug("Received server event on message: ");
     console.debug(response);
     if (response.error) {
         console.error("Got server error: " + response.error.json.message);
@@ -36,11 +36,38 @@ socket.on("message", async (response) => {
         await fetchRoomConfig(room);
     }
 
-    const canvasResp = getCanvas(room);
+    const pixels = await getCanvas(room);
-
+    if (!pixels) {
-    if (!canvasResp || canvasResp.pixels) {
         return;
     }
+    
+    initCanvas(await getCurrentRoomConfig(), pixels);
+    console.debug("Loaded canvas")
 
-    initCanvas(getCurrentRoomConfig(), canvasResp.pixels);
 });
+
+socket.on("pixel-update", async (msg) => {
+    // console.debug("Received server event on pixel-update: ");
+    // console.debug(msg);
+    if (msg.error) {
+        console.error("Got server error: " + msg.error.json.message);
+        return;
+    }
+    // console.debug("Here is msg.data")
+    // console.debug(msg.result.data.json)
+    const {
+        roomSlug,
+        posX,
+        posY,
+        color
+    } = msg.result.data.json
+
+    const cfg = await getCurrentRoomConfig()
+    if (!cfg || !cfg.settings || !cfg.settings.roomColors) {
+        console.error("Internal error: Cannot access config after retrieving it")
+        console.debug(cfg)
+        return;
+    }
+    
+    renderCanvasUpdate(color, posX, posY);
+})

src/rooms/canvas/index.js

@@ -1,7 +1,10 @@
 import { authedAPIRequest } from "../../utils/auth";
 
-// get the canvas of a room and deserialize it
+/**
-async function getCanvas(room) {
+ * @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;
@@ -20,15 +23,52 @@ async function getCanvas(room) {
     const res = await response.json();
 
     console.debug(`Retrieved canvas for room ${room}:`);
-    console.debug(res);
+    // 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() {}
 

src/rooms/index.js

@@ -12,13 +12,16 @@ import { resetValues } from "./canvas/utils";
 // - updateRoom (update a room's configuration)
 // - deleteRoom (delete a room)
 
-const roomsConfig = {};
 
-function setCurrentRoomConfig(room, cfg) {
+let roomConfig = null;
-    roomsConfig[room] = cfg;
+
+function setCurrentRoomConfig(cfg) {
+    roomConfig = cfg;
 }
-function getCurrentRoomConfig(room) {
+async function getCurrentRoomConfig() {
-    return roomsConfig[room];
+    if (!roomConfig)
+        await fetchRoomConfig();
+    return roomConfig;
 }
 async function joinRoom(room) {
     // socket.on('connection', (sockett) => {