// ==UserScript==
// @name         Facepunch: Click To Show Post Background
// @namespace    Alice
// @version      1.1
// @description  Makes it so you have to click post info to show backgrounds
// @author       Alice
// @match        https://forum.facepunch.com/f/*
// @grant        none
// ==/UserScript==

const css = document.createElement("style"),
      posts = document.querySelectorAll(".postuser"),
      bgimg = document.querySelectorAll(".background-image"),
      avatars = document.querySelectorAll(".postavatar"),
      cards = document.querySelectorAll(".user-card");

css.innerHTML = `.postuser:hover .user-card {
    display: none;
}
.user-card {
    display: none;
    opacity: 1.0;
}`;
document.body.appendChild(css);

for (let i = 0; i < posts.length; i++) {
    bgimg[i].dataset.alcnum = i;
    posts[i].dataset.alcnum = i;
    cards[i].dataset.alcnum = i;
    avatars[i].dataset.alcnum = i;

    posts[i].addEventListener("click", function(e) {
        cards[e.target.dataset.alcnum].style.display = "block";
    });
    cards[i].addEventListener("mouseleave", function(e) {
        e.target.style.display = "none";
    });
    posts[i].addEventListener("mouseleave", function(e) {
        cards[e.target.dataset.alcnum].style.display = "none";
    });
}