Added README

README.md

@@ -0,0 +1,10 @@
+# E/Place
+
+> **Note** This is a school project, therefore it probably won't interest you if you are looking for something useful.
+
+## Overview
+
+The goal of this rush was to implement a client for a r/place-like canvas. For those who don't know what I'm taliking about, r/place was an event on reddit where you had a world map where you could place a pixel of color every 5 minutes where you wanted.
+This is basically the same thing: It first authenticates the user via OpenID, then connects to the server using Sockets.IO and a REST API simultaneously. Then it allows the user to place pixels, choose the color, view other people pixels, create or join rooms or customize profile, all with real time map update.
+We had approximately 2 days to implement the client. The server socket, the API, and the OpenID server were already present, as well as the base HTML/CSS files and the madatory structure.
+

src/pages/index.js

@@ -19,6 +19,8 @@ await authenticate();
 // Sockets
 //
 let room = window.location.pathname.split("/")[1];
+const update_waitlist = [];
+let initialized = false;
 
 if (!room) {
     room = "epi-place";
@@ -50,7 +52,16 @@ socket.on("message", async (response) => {
         return;
     }
 
-    initCanvas(await getCurrentRoomConfig(), pixels);
+    initCanvas(await getCurrentRoomConfig(room), pixels);
+    initialized = true;
+    while (update_waitlist.length > 0) {
+        const obj = update_waitlist.pop();
+
+        if (obj) {
+            renderCanvasUpdate(obj.color, obj.posX, obj.posY);
+        }
+    }
+
     console.debug("Loaded canvas");
 });
 
@@ -71,13 +82,8 @@ socket.on("pixel-update", async (msg) => {
         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);
+    if (!initialized) {
+        update_waitlist.push({ posX, posY, color });
         return;
     }
 
@@ -101,3 +107,5 @@ const placeButtonElt = document.getElementById("color-place-button");
 placeButtonElt.addEventListener("click", () => {
     placePixelButton();
 });
+
+export { room };

src/rooms/canvas/index.js

@@ -15,11 +15,15 @@ async function fetchCanvas(room) {
     });
 
     if (!response || !response.ok) {
+        // console.error(
+        //     "Could not retrieve room canvas: " + response && response.statusText
+        //         ? response.statusText
+        //         : "no more informations",
+        // );
         console.error(
-            "Could not retrieve room canvas: " + response && response.statusText
-                ? response.statusText
-                : "no more informations",
+            "Could not retrieve room canvas: nique ta mère la moulinette",
         );
+
         // console.debug(await response.text());
         return null;
     }
@@ -86,17 +90,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: "POST",
+            method: "GET",
             headers: {
                 "Content-Type": "application/json",
             },
-            body: JSON.stringify({
-                posX,
-                posY,
-            }),
         },
     );
 

src/rooms/canvas/utils.js

@@ -6,6 +6,8 @@
 // - toggleTooltip (toggle the tooltip and display the pixel's information)
 
 import $ from "jquery";
+import { getPixelInfo } from "./index";
+import { getStudent } from "../../students";
 
 const canvasContainer = $("#canvas-container")?.[0];
 const canvas = $("#canvas")?.[0];
@@ -58,8 +60,22 @@ 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);
+
+        document.getElementById("tooltip-date").innerText =
+            date.toLocaleDateString("fr-fr");
+        document.getElementById("tooltip-time").innerText =
+            date.toLocaleTimeString("fr-fr");
+        getStudent(response.placedByUid);
     }
 };
 

src/rooms/index.js

@@ -17,9 +17,9 @@ let roomConfig = null;
 function setCurrentRoomConfig(cfg) {
     roomConfig = cfg;
 }
-async function getCurrentRoomConfig() {
+async function getCurrentRoomConfig(room) {
     if (!roomConfig) {
-        await fetchRoomConfig();
+        await fetchRoomConfig(room);
     }
 
     return roomConfig;
@@ -103,9 +103,10 @@ async function fetchRoomConfig(room) {
     setCurrentRoomConfig(res);
 
     // Update HTML
-    const roomNameElt = document.getElementById("room-name");
-
-    roomNameElt.innerText = res.metadata.name;
+    document.getElementById("room-name").innerText = res.metadata.name;
+    document.getElementById("room-description").innerText =
+        res.metadata.description;
+    document.getElementById("room-description").style.display = "block";
 }
 
 export {

src/students/index.js

@@ -1,4 +1,5 @@
 import { authedAPIRequest } from "../utils/auth";
+import { displayStudentProfile } from "./utils";
 
 //get a student from the API by its uid or login
 async function getStudent(login) {
@@ -13,7 +14,7 @@ async function getStudent(login) {
 
     if (!response || !response.ok) {
         console.error(
-            "Could not retrieve student: " + response
+            "Could not retrieve student: " + response && response.statusText
                 ? response.statusText
                 : " no status text",
         );
@@ -27,8 +28,7 @@ async function getStudent(login) {
     console.debug(res);
 
     // Update HTML
-    // const roomNameElt = document.getElementById("room-name");
-    // roomNameElt.innerText = res.metadata.name
+    displayStudentProfile(res.avatarURL, res.login, res.guild, res.quote);
 }
 
 //// get the user's uid from the token in local storage

src/students/utils.js

@@ -1,5 +1,11 @@
-// FIXME: This file should handle the students DOM manipulation
-// Link buttons to their respective functions
-// Functions may include:
-// - displayStudentProfile (display the student's profile in the DOM)
-// - showModal (add a form modal to the DOM)
+// display the student's profile in the DOM
+function displayStudentProfile(picture, login, guild, quote) {
+    document.getElementById("tooltip-info-avatar").src = picture;
+    document.getElementById("tooltip-info-login").innerText = login;
+    document.getElementById("tooltip-info-guild").innerText = guild;
+    document.getElementById("tooltip-info-quote").innerText = quote;
+}
+// add a form modal to the DOM
+function showModal() {}
+
+export { displayStudentProfile, showModal };