c trop bieeeen

src/pages/index.js

@@ -1,15 +1,23 @@
 import { initSocket, socket, subscribe } from "../utils/streams";
 import { calculateLayout } from "./utils";
 import { authenticate, refreshToken } from "../utils/auth";
-import { initCanvas, renderCanvasUpdate } from "../rooms/canvas/utils";
+import {
-import { getCanvas } from "../rooms/canvas/index";
+    getPlacementData,
+    initCanvas,
+    renderCanvasUpdate,
+} from "../rooms/canvas/utils";
+import { getCanvas, placePixel } from "../rooms/canvas/index";
 import { fetchRoomConfig, getCurrentRoomConfig } from "../rooms/index";
 
 // Initialize the layout
 calculateLayout();
 
+// Auth
 await authenticate();
 
+////////////////////////////////////
+// Sockets
+//
 let room = window.location.pathname.split("/")[1];
 
 if (!room) {
@@ -75,3 +83,21 @@ socket.on("pixel-update", async (msg) => {
 
     renderCanvasUpdate(color, posX, posY);
 });
+
+////////////////////////////////////
+// Buttons
+//
+async function placePixelButton() {
+    const { posX, posY, color } = getPlacementData();
+
+    await placePixel(room, posX, posY, color);
+}
+
+////////////////////////////////////
+// HTML
+//
+const placeButtonElt = document.getElementById("color-place-button");
+
+placeButtonElt.addEventListener("click", () => {
+    placePixelButton();
+});

src/rooms/canvas/index.js

@@ -16,11 +16,11 @@ async function fetchCanvas(room) {
 
     if (!response || !response.ok) {
         console.error(
-            "Could not retrieve room canvas: " + response
+            "Could not retrieve room canvas: " + response && response.statusText
                 ? response.statusText
-                : "null",
+                : "no more informations",
         );
-        console.debug(await response.text());
+        // console.debug(await response.text());
         return null;
     }
 
@@ -83,6 +83,42 @@ function subscribeToRoom() {}
 function getPixelInfo() {}
 
 // place a pixel in a room
-function placePixel() {}
+async function placePixel(room, posX, posY, color) {
+    if (!room) {
+        console.error("Cannot place pixel on an undefined room");
+        return null;
+    }
+
+    const response = await authedAPIRequest(
+        "/rooms/" + room + "/canvas/pixels",
+        {
+            method: "POST",
+            body: JSON.stringify({
+                posX: posX,
+                posY: posY,
+                color: color,
+            }),
+        },
+    );
+
+    if (!response || !response.ok) {
+        console.error(
+            "Could not place pixel on map: " + response && response.statusText
+                ? response.statusText
+                : "no more informations",
+        );
+        // console.debug(await response.text());
+        return null;
+    }
+
+    const res = await response.json();
+
+    console.debug(
+        `Placed pixel on map at ${posX}:${posY} (${color}) in room ${room}:`,
+    );
+    // console.debug(res);
+
+    return res;
+}
 
 export { getCanvas, subscribeToRoom, getPixelInfo, placePixel };

src/rooms/canvas/utils.js

@@ -39,7 +39,7 @@ let isDrag = false;
  * Get the placement data, i.e. the color the user has selected and the
  * coordinates of the pixel he is focusing on.
  *
- * @returns {{color: number, posX: number, posX: number}} the data
+ * @returns {{color: number, posX: number, posY: number}} the data
  */
 export const getPlacementData = () => ({
     color: selectedColorIdx,

src/rooms/index.js

@@ -48,7 +48,7 @@ async function listRooms() {
 
     if (!response || !response.ok) {
         console.error(
-            "Could not retrieve rooms list: " + response
+            "Could not retrieve rooms list: " + response && response.statusText
                 ? response.statusText
                 : "null",
         );
@@ -87,7 +87,7 @@ async function fetchRoomConfig(room) {
 
     if (!response || !response.ok) {
         console.error(
-            "Could not retrieve room config" + response
+            "Could not retrieve room config" + response && response.statusText
                 ? response.statusText
                 : "null",
         );

src/students/index.js

@@ -11,8 +11,12 @@ async function getStudent(login) {
         method: "GET",
     });
 
-    if (!response.ok) {
+    if (!response || !response.ok) {
-        console.error("Could not retrieve student: " + response.statusText);
+        console.error(
+            "Could not retrieve student: " + response
+                ? response.statusText
+                : " no status text",
+        );
         console.debug(await response.text());
         return;
     }

src/utils/auth.js

@@ -20,8 +20,12 @@ async function sendRequest(endpoint, body) {
 
     try {
         response = await fetch(endpoint, request);
-        if (!response.ok) {
+        if (!response || !response.ok) {
-            throw new Error(response.statusText);
+            if (response && response.statusText) {
+                throw new Error(response.statusText);
+            } else {
+                throw new Error("No status text");
+            }
         }
     } catch (err) {
         console.error(err);