g3.2

lib/basic.js

@@ -65,6 +65,18 @@ function hideOverlay(id) {
 	for (var i of elms) _onOverlayDestroy(i);
 }
 
+function refreshOverlays() {
+	const elms = document.getElementsByClassName("overlay");
+	for (var i of elms) {
+		const id = i.getAttribute("name");
+		hideOverlay(id);
+		showOverlay(id);
+	}
+}
+
+
+//----------------------------------//
+
 function _main_events() {
 	const header_bar_1 = document.querySelector(".header_bar_1");
 	if (header_bar_1 != null) {
@@ -359,6 +371,8 @@ async function getUserData(couchDB) {
 }
 
 var userData = null;
+const userDataListener = [];
+
 async function setUserData(couchDB) {
 	const res = await getUserData(couchDB);
 	if (res == null) {
@@ -367,9 +381,17 @@ async function setUserData(couchDB) {
 	}
 	userData = res;
 	updateAllProfiles(res);
+	_constructProfile(res);
+	
+	while (userDataListener.length > 0) {
+		const call = userDataListener[userDataListener.length - 1];
+		userDataListener.pop();
+		try { call(); } catch(err) { console.error(err); }
+	}
+	
 	return true;
 }
-async function updateUserData(couchDB, user) {
+async function updateUserData(couchDB, user = userData) {
 	const res = await couchDB.get("users");
 	if (res == null) return {"type":"error", "message": "CouchDB failed"};
 	
@@ -385,9 +407,15 @@ async function updateUserData(couchDB, user) {
 
 
 function updateAllProfiles(user) {
+	const hasProfilAbility = user.enabled_abilities.includes("profile_pic");
+	
 	const profiles = document.getElementsByClassName("profile");
 	for (var i of profiles) {
-		i.style.backgroundImage = `url("${user.avatar}")`;
+		if (hasProfilAbility) {
+			i.style.backgroundImage = `url("${user.avatar}")`;
+		} else {
+			i.style.removeProperty("backgroundImage");
+		}
 		i.onclick = _onProfileClick;
 	}
 }
@@ -412,6 +440,7 @@ function _onProfileClick(event) {
 	div.innerHTML = `
 <label><b>${form1(userData.name)}</b></label>
 <button onclick='_onProfilClickOnProfil()'>Profil</button>
+<button onclick='showSkillTree()'>Skill-Tree</button>
 <button onclick='location.href = "../login.html";'>Abmelden</button>
 	`;
 	dropdown.appendChild(div);
@@ -425,28 +454,45 @@ function _onProfilClickOnProfil() {
 		_showProfile(userData);
 	}
 }
-function _showProfile(user) {
-	let elm = getId("profile_overlay");
-	if (!elm) {
-		elm = document.createElement("overlay");
-		elm.setAttribute("id", "profile_overlay");
-		document.body.appendChild(elm);
-	}
+function _constructProfile(user) {
+	const elm = document.createElement("overlay");
+	elm.setAttribute("id", "profile_overlay");
+	document.body.appendChild(elm);
 	elm.innerHTML = `
 <div class="overlay_title">Profil-Übersicht</div>
 <span style="display: inline-block; width: 100%; text-align: center;">
-<div style="border-radius: 50%; width: 80px; height: 80px; display: inline-block; margin-bottom: 10px; background-color: var(--accent_color_bg); background-size: 80px 80px; background-image: url('${user.avatar}');"></div>
+<div style="border-radius: 50%; width: 140px; height: 140px; display: inline-block; margin-bottom: 10px; background-color: var(--accent_color_bg); background-size: 140px 140px; background-image: url('');" id="profile-pic" class="profile-pic"></div>
 <br>
-<u>${!user.title ? "": user.title+" "}${form1(user.name)}</u>
+<u style="font-size: 22px;"></u>
 <br><br>
 </span>
 <span class="selectable">
-Level: ${user.level ?? 0}<br>
-Rolle: ${form1(user.role ?? "Student")}
+Level: <label></label><br>
+Rolle: <label></label>
 </span><br>
-Avatar: <input style="" value="${user.avatar}"><br><br>
-<button style="font-size: 18px; width: 100%; border-radius: var(--border-radius); font-weight: normal;" onclick="_showProfileSave(this);">Speichern</button>
+<span class="avatar-inp">Avatar: <input style="" value=""><br></span><br>
+<button style="font-size: 18px; width: 100%; border-radius: var(--border-radius); font-weight: normal; color: black; padding: 5px; background: rgba(255,255,255,0.5);" onclick="_showProfileSave(this);">Speichern</button>
 	`;
+}
+function _showProfile(user) {
+	let elm = getId("profile_overlay");
+	
+	const hasProfilAbility = user.enabled_abilities.includes("profile_pic");
+	
+	const avatarInp = elm.querySelector(".avatar-inp");
+	if (hasProfilAbility) {
+		elm.querySelector(".profile-pic").style.setProperty("background-image", `url('${user.avatar}')`);
+		elm.querySelector("input").setAttribute("value", user.avatar);
+		avatarInp.style.display = "unset";
+	} else {
+		avatarInp.style.display = "none";
+	}
+	elm.querySelector("u").innerText = getUserDisplayName(user);
+	
+	const labels = elm.getElementsByTagName("label");
+	labels[0].innerText = user.level ?? 0;
+	labels[1].innerText = form1(user.role ?? "Student");
+	
 	showOverlay("profile_overlay");
 }
 async function _showProfileSave(elm) {
@@ -480,4 +526,20 @@ async function playSound(src) {
 	} catch(err) {
 		console.log("Error playing audio:", err);
 	}
+}
+
+function hexToRGBA(hex) {
+	let r = 0, g = 0, b = 0;
+	if (hex.length === 7) {
+		r = parseInt(hex.slice(1, 3), 16);
+		g = parseInt(hex.slice(3, 5), 16);
+		b = parseInt(hex.slice(5, 7), 16);
+	}
+	return [r, g, b];
+}
+
+function getUserDisplayName(user) {
+	const hasHonor = (user.enabled_abilities ??= []).includes("title_of_honor");
+	const title_of_honor = hasHonor ? "(Sir) " : "";
+	return `${title_of_honor}${ !user.title ? "" : user.title + " " }${ form1(user.name) }`;
 }