1 files changed, 96 insertions, 0 deletions
diff --git a/rushs/eplace/src/rooms/canvas/index.js b/rushs/eplace/src/rooms/canvas/index.js
new file mode 100644
index 0000000..440e0d3
--- /dev/null
+++ b/rushs/eplace/src/rooms/canvas/index.js
@@ -0,0 +1,96 @@
+// FIXME: This file should handle the room canvas API
+// Link buttons to their respective functions
+// Functions may include:
+
+import { getStudent } from "../../students";
+import { authedAPIRequest } from "../../utils/auth";
+import { getPlacementData } from "./utils";
+
+// - getCanvas (get the canvas of a room and deserialize it)
+export async function getCanvas(slug) {
+    const config = {
+        method: "get",
+    };
+
+    return authedAPIRequest(`/rooms/${slug}/canvas`, config)
+        .then(async (res) => {
+            if (!res) {
+                return null;
+            }
+
+            const response = await res.json();
+
+            const pixels = response.pixels
+                .split("")
+                .map((c) => c.charCodeAt(0).toString(2).padStart(8, "0"))
+                .join("")
+                .match(/.{5}/g)
+                .map((b) => parseInt(b, 2));
+
+            return pixels;
+        })
+        .catch((error) => {
+            console.log(error);
+            return null;
+        });
+}
+// - subscribeToRoom (subscribe to the stream of a room)
+// - getPixelInfo (get the pixel info of a room)
+export async function getPixelInfo() {
+    const info = getPlacementData();
+
+    const response = await authedAPIRequest(
+        `/rooms/epi-place/canvas/pixels?posX=${info.posX}&posY=${info.posY}`,
+        { method: "get" },
+    );
+
+    if (!response) {
+        return null;
+    } else {
+        return response.json();
+    }
+}
+
+// - placePixel (place a pixel in a room)
+export async function placePixel() {
+    const info = getPlacementData();
+
+    const res = await authedAPIRequest(`/rooms/epi-place/canvas/pixels`, {
+        method: "POST",
+        headers: {
+            Accept: "application/json",
+            "Content-Type": "application/json",
+        },
+        body: JSON.stringify({
+            posX: info.posX,
+            posY: info.posY,
+            color: info.color,
+        }),
+    });
+
+    if (!res) {
+        return;
+    }
+
+    const response = await res.json();
+
+    const placeDate = new Date(response.timestamp);
+    const studentInfo = await getStudent(response.placedByUid);
+
+    if (!studentInfo) {
+        return;
+    }
+
+    document.getElementById("tooltip-time").innerHTML =
+        placeDate.toLocaleTimeString();
+    document.getElementById("tooltip-date").innerHTML =
+        placeDate.toLocaleDateString();
+    document
+        .getElementById("tooltip-info-avatar")
+        .setAttribute("src", studentInfo.avatarURL ?? "/default-avatar.png");
+    document.getElementById("tooltip-info-quote").innerHTML = studentInfo.quote;
+    document.getElementById("tooltip-info-login").innerHTML = studentInfo.login;
+}
+document
+    .getElementById("color-place-button")
+    .addEventListener("click", placePixel);