const buttonroll = document.getElementById("buttonroll");
const buttons = [
{
href: "https://jaiden.sh/",
img: "/assets/88x31/jaiden_sh.png",
alt: "jaiden.sh",
},
{
href: "https://owenzimmerman.com/",
img: "/assets/88x31/owenzimmerman_com.png",
alt: "owenzimmerman.com",
},
{
href: "https://acidicalchemist.neocities.org/",
img: "/assets/88x31/acidicalchemist_neocities_org.gif",
alt: "acidicalchemist.neocities.org",
},
{
href: "https://arimelody.me/",
img: "/assets/88x31/arimelody_me.gif",
alt: "arimelody.me",
},
{
href: "https://freeplay.floof.company/",
img: "/assets/88x31/freeplay_floof_company.png",
alt: "freeplay.floof.company",
},
{
href: "https://invoxiplaygames.uk/",
img: "/assets/88x31/invoxiplaygames_uk.png",
alt: "invoxiplaygames.uk",
},
{
href: "https://ioletsgo.gay/",
img: "/assets/88x31/ioletsgo_gay.gif",
alt: "ioletsgo.gay",
},
{
href: "https://mae.wtf/",
img: "/assets/88x31/mae_wtf.png",
alt: "mae.wtf",
},
{
href: "https://micro.pages.gay/",
img: "/assets/88x31/micro_pages_gay.png",
alt: "micro.pages.gay",
},
{
href: "https://sneexy.pages.gay/",
img: "/assets/88x31/sneexy_pages_gay.gif",
alt: "sneexy.pages.gay",
},
{
href: "https://whois.slipfox.xyz/",
img: "/assets/88x31/whois_slipfox_xyz.png",
alt: "whois.slipfox.xyz",
},
{
href: "https://moth.monster/",
img: "/assets/88x31/moth_monster.png",
alt: "moth.monster",
},
{
href: "https://translunar.academy/",
img: "/assets/88x31/translunar_academy.png",
alt: "translunar.academy",
},
{
href: "https://ultramarine-linux.org/",
img: "/assets/88x31/esoteric/gnu-linux.gif",
alt: "Made on GNU/Linux",
},
{
href: "https://abtmtr.link/projects/item/normalize",
img: "/assets/88x31/esoteric/html.gif",
alt: " - Learn it today!",
},
{
href: "https://vivaldi.com",
img: "/assets/88x31/esoteric/vivaldi.gif",
alt: "I use Vivaldi",
},
{
href: "https://ublockorigin.com",
img: "/assets/88x31/esoteric/ublock.png",
alt: "uBlock Origin Now!",
},
{
href: "https://channelstore.roku.com/details/7da3fa0c2209746730df8a4e21e83b02",
img: "/assets/88x31/esoteric/xkcd.gif",
alt: "xkcd",
},
];
function initializeButtons() {
buttonroll.innerHTML += buttons.reduce(
(pv, cv) =>
pv +
`
`,
""
);
}
buttonroll.hidden = false;
overflowButtons();
initializeButtons();
overflowButtons();
overflowButtons();
function overflowButtons() {
buttonroll.innerHTML += buttons.reduce(
(pv, cv) =>
pv +
``,
""
);
}
let isHovering = false;
buttonroll.addEventListener("mouseenter", () => (isHovering = true));
buttonroll.addEventListener("mouseleave", () => (isHovering = false));
let curAnim;
let endTime = performance.now();
let unit = 88;
let gap = 8;
let scrollX = (unit + gap) * buttons.length * 2;
let speed = 25;
let max = (unit + gap) * buttons.length;
function scrollButtons(startTime) {
let deltaTime = (startTime - endTime) / 1000;
if (!isHovering) {
scrollX += speed * deltaTime;
} else scrollX = buttonroll.scrollLeft;
buttonroll.scrollLeft = (scrollX % max) + max;
endTime = startTime;
curAnim = window.requestAnimationFrame(scrollButtons);
}
curAnim = window.requestAnimationFrame(scrollButtons);