Compare commits

..

No commits in common. "master" and "eplace-step3-bidouche" have entirely different histories.

4 changed files with 10 additions and 28 deletions

View file

@ -1,10 +0,0 @@
# 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.

View file

@ -7,7 +7,6 @@
import $ from "jquery"; import $ from "jquery";
import { getPixelInfo } from "./index"; import { getPixelInfo } from "./index";
import { getStudent } from "../../students";
const canvasContainer = $("#canvas-container")?.[0]; const canvasContainer = $("#canvas-container")?.[0];
const canvas = $("#canvas")?.[0]; const canvas = $("#canvas")?.[0];
@ -69,13 +68,12 @@ export const toggleTooltip = async (state = false) => {
} }
// Display // Display
const date = new Date(response.timestamp); const date = new Date(response.timestamp * 1000);
document.getElementById("tooltip-date").innerText = document.getElementById("tooltip-date").innerText =
date.toLocaleDateString("fr-fr"); date.toLocaleDateString();
document.getElementById("tooltip-time").innerText = document.getElementById("tooltip-time").innerText =
date.toLocaleTimeString("fr-fr"); date.toLocaleTimeString();
getStudent(response.placedByUid);
} }
}; };

View file

@ -1,5 +1,4 @@
import { authedAPIRequest } from "../utils/auth"; import { authedAPIRequest } from "../utils/auth";
import { displayStudentProfile } from "./utils";
//get a student from the API by its uid or login //get a student from the API by its uid or login
async function getStudent(login) { async function getStudent(login) {
@ -28,7 +27,8 @@ async function getStudent(login) {
console.debug(res); console.debug(res);
// Update HTML // Update HTML
displayStudentProfile(res.avatarURL, res.login, res.guild, res.quote); // const roomNameElt = document.getElementById("room-name");
// roomNameElt.innerText = res.metadata.name
} }
//// get the user's uid from the token in local storage //// get the user's uid from the token in local storage

View file

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