New feature: enlarge character pictures on click (#4654)

js/main.js

@@ -312,6 +312,10 @@ document.addEventListener("click", function (event) {
   if (!isMouseOverButtonOrMenu() && menu.style.display === "flex") {
     hideMenu();
   }
+
+  if (event.target.classList.contains("pfp_character")) {
+    toggleBigPicture();
+  }
 });
 
 //------------------------------------------------
@@ -335,3 +339,38 @@ document.getElementById("show-controls").parentNode.style.bottom = "0px";
 // Focus on the chat input
 //------------------------------------------------
 document.querySelector("#chat-input textarea").focus();
+
+//------------------------------------------------
+// Show enlarged character picture when the profile
+// picture is clicked on
+//------------------------------------------------
+let bigPictureVisible = false;
+
+function addBigPicture() {
+  var imgElement = document.createElement("img");
+  var timestamp = new Date().getTime();
+  imgElement.src = "/file/cache/pfp_character.png?time=" + timestamp;
+  imgElement.classList.add("bigProfilePicture");
+
+  var imgElementParent = document.getElementById("chat").parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
+  imgElementParent.appendChild(imgElement);
+}
+
+function deleteBigPicture() {
+  var bigProfilePictures = document.querySelectorAll('.bigProfilePicture');
+  bigProfilePictures.forEach(function (element) {
+    element.parentNode.removeChild(element);
+  });
+}
+
+function toggleBigPicture() {
+  if(bigPictureVisible) {
+    deleteBigPicture();
+    bigPictureVisible = false;
+  } else {
+    addBigPicture();
+    bigPictureVisible = true;
+  }
+}
+
+showBigPicture();

js/update_big_picture.js

@@ -0,0 +1,7 @@
+function updateBigPicture() {
+  var existingElement = document.querySelector('.bigProfilePicture');
+  if (existingElement) {
+    var timestamp = new Date().getTime();
+    existingElement.src = "/file/cache/pfp_character.png?time=" + timestamp;
+  }
+}