pieds

src/pages/index.js

@@ -19,6 +19,8 @@ await authenticate();
 // Sockets
 //
 let room = window.location.pathname.split("/")[1];
+const update_waitlist = [];
+const initialized = false;
 
 if (!room) {
     room = "epi-place";
@@ -50,7 +52,15 @@ socket.on("message", async (response) => {
         return;
     }
 
-    initCanvas(await getCurrentRoomConfig(), pixels);
+    initCanvas(await getCurrentRoomConfig(room), pixels);
+    while (update_waitlist.length > 0) {
+        const obj = update_waitlist.pop();
+
+        if (obj) {
+            renderCanvasUpdate(obj.color, obj.posX, obj.posY);
+        }
+    }
+
     console.debug("Loaded canvas");
 });
 
@@ -71,7 +81,7 @@ socket.on("pixel-update", async (msg) => {
         color,
     } = msg.result.data.json;
 
-    const cfg = await getCurrentRoomConfig();
+    const cfg = await getCurrentRoomConfig(room);
 
     if (!cfg || !cfg.settings || !cfg.settings.roomColors) {
         console.error(
@@ -81,6 +91,11 @@ socket.on("pixel-update", async (msg) => {
         return;
     }
 
+    if (!initialized) {
+        update_waitlist.push({ posX, posY, color });
+        return;
+    }
+
     renderCanvasUpdate(color, posX, posY);
 });
 
@@ -102,6 +117,4 @@ placeButtonElt.addEventListener("click", () => {
     placePixelButton();
 });
 
-export {
-    room
-}
+export { room };

src/rooms/canvas/index.js

@@ -86,17 +86,17 @@ async function getPixelInfo(room, posX, posY) {
         return null;
     }
 
+    const params = new URLSearchParams({
+        posX,
+        posY,
+    });
     const response = await authedAPIRequest(
-        "/rooms/" + room + "/canvas/pixels",
+        "/rooms/" + room + "/canvas/pixels" + "?" + params,
         {
             method: "GET",
             headers: {
                 "Content-Type": "application/json",
             },
-            body: JSON.stringify({
-                posX,
-                posY,
-            }),
         },
     );
 

src/rooms/canvas/utils.js

@@ -7,7 +7,6 @@
 
 import $ from "jquery";
 import { getPixelInfo } from "./index";
-import { room } from "../../pages/index";
 
 const canvasContainer = $("#canvas-container")?.[0];
 const canvas = $("#canvas")?.[0];
@@ -60,12 +59,21 @@ export const toggleTooltip = async (state = false) => {
     tooltip.style.display = state ? "flex" : "none";
 
     if (state) {
-        // FIXME: You should implement or call a function to get the pixel's information
-        // and display it. Make use of target.x and target.y to get the pixel's position.
+        // Get pixel
+        const room = window.location.pathname.split("/")[1] || "epi-place";
         const response = await getPixelInfo(room, target.x, target.y);
+
         if (!response) {
             return;
         }
+
+        // Display
+        const date = new Date(response.timestamp * 1000);
+
+        document.getElementById("tooltip-date").innerText =
+            date.toLocaleDateString();
+        document.getElementById("tooltip-time").innerText =
+            date.toLocaleTimeString();
     }
 };
 

src/rooms/index.js

@@ -1,7 +1,6 @@
 import { authedAPIRequest } from "../utils/auth";
 import { subscribe } from "../utils/streams";
 import { resetValues } from "./canvas/utils";
-import { room } from "../pages/index"
 // FIXME: This file should handle the rooms API
 // Functions may include:
 // - fetchRoomConfig (get the configuration of a room)
@@ -18,7 +17,7 @@ let roomConfig = null;
 function setCurrentRoomConfig(cfg) {
     roomConfig = cfg;
 }
-async function getCurrentRoomConfig() {
+async function getCurrentRoomConfig(room) {
     if (!roomConfig) {
         await fetchRoomConfig(room);
     }