diff --git a/README.md b/README.md index e69de29..379fca9 100644 --- a/README.md +++ b/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. + diff --git a/src/pages/index.js b/src/pages/index.js index 403ad60..4172042 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -19,7 +19,7 @@ await authenticate(); // Sockets // let room = window.location.pathname.split("/")[1]; -let update_waitlist = [] +const update_waitlist = []; let initialized = false; if (!room) { @@ -53,11 +53,15 @@ socket.on("message", async (response) => { } 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) + const obj = update_waitlist.pop(); + + if (obj) { + renderCanvasUpdate(obj.color, obj.posX, obj.posY); + } } + console.debug("Loaded canvas"); }); @@ -79,9 +83,10 @@ socket.on("pixel-update", async (msg) => { } = msg.result.data.json; if (!initialized) { - update_waitlist.push({posX, posY, color}) + update_waitlist.push({ posX, posY, color }); return; } + renderCanvasUpdate(color, posX, posY); }); @@ -103,6 +108,4 @@ placeButtonElt.addEventListener("click", () => { placePixelButton(); }); -export { - room -} +export { room }; diff --git a/src/rooms/canvas/utils.js b/src/rooms/canvas/utils.js index 2e5ac33..420688f 100644 --- a/src/rooms/canvas/utils.js +++ b/src/rooms/canvas/utils.js @@ -7,6 +7,7 @@ import $ from "jquery"; import { getPixelInfo } from "./index"; +import { getStudent } from "../../students"; const canvasContainer = $("#canvas-container")?.[0]; const canvas = $("#canvas")?.[0]; @@ -68,12 +69,13 @@ export const toggleTooltip = async (state = false) => { } // Display - const date = new Date(response.timestamp * 1000); + const date = new Date(response.timestamp); document.getElementById("tooltip-date").innerText = - date.toLocaleDateString(); + date.toLocaleDateString("fr-fr"); document.getElementById("tooltip-time").innerText = - date.toLocaleTimeString(); + date.toLocaleTimeString("fr-fr"); + getStudent(response.placedByUid); } }; diff --git a/src/rooms/index.js b/src/rooms/index.js index 1643d41..ddc6e8d 100644 --- a/src/rooms/index.js +++ b/src/rooms/index.js @@ -104,7 +104,8 @@ async function fetchRoomConfig(room) { // Update HTML document.getElementById("room-name").innerText = res.metadata.name; - document.getElementById("room-description").innerText = res.metadata.description; + document.getElementById("room-description").innerText = + res.metadata.description; document.getElementById("room-description").style.display = "block"; } diff --git a/src/students/index.js b/src/students/index.js index 5c84a45..55a6b7d 100644 --- a/src/students/index.js +++ b/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) { @@ -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 diff --git a/src/students/utils.js b/src/students/utils.js index 09bb32e..eb7d2b2 100644 --- a/src/students/utils.js +++ b/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 };