Badge Guides
Browse, filter and search every Habbo badge guide.
${g.title}
${g.desc}
${timeAgo(g.date)}
♥ ${g.popularity}
No guides match your filters. Try clearing them.
`;
moreBtn.style.display = list.length>state.shown ? "block" : "none";
}
function timeAgo(iso){
const days=Math.round((Date.now()-new Date(iso))/86400000);
if(days<=0) return "today";
if(days===1) return "yesterday";
if(days<7) return days+" days ago";
const w=Math.round(days/7); return w+(w===1?" week ago":" weeks ago");
}
/* filters */
$("#hcgSearch").addEventListener("input",e=>{state.q=e.target.value;state.shown=PAGE;render();});
function pills(id,key){
document.querySelector(id).addEventListener("click",e=>{
const b=e.target.closest(".hcg-pill"); if(!b) return;
document.querySelectorAll(id+" .hcg-pill").forEach(p=>p.classList.remove("active"));
b.classList.add("active"); state[key]=b.dataset.v; state.shown=PAGE; render();
});
}
pills("#hcgDiff","diff"); pills("#hcgAvail","avail");
$("#hcgSort").addEventListener("change",e=>{state.sort=e.target.value;render();});
moreBtn.addEventListener("click",()=>{state.shown+=PAGE;render();});
$("#hcgClear").addEventListener("click",()=>{
state.q="";state.diff="all";state.avail="all";state.sort="recent";state.shown=PAGE;
$("#hcgSearch").value="";$("#hcgSort").value="recent";
document.querySelectorAll(".hcg-pills").forEach(g=>{
g.querySelectorAll(".hcg-pill").forEach((p,i)=>p.classList.toggle("active",i===0));
});
render();
});
/* modal */
const modal=$("#hcgModal"), inner=$("#hcgDialogInner");
grid.addEventListener("click",e=>{
const c=e.target.closest(".hcg-card"); if(!c) return;
openModal(GUIDES[+c.dataset.i]);
});
function openModal(g){
const d=DIFF[g.difficulty];
inner.innerHTML=`
${g.art}
${g.title}
${g.desc}
How to get it
- ${g.steps.map(s=>`
- ${s} `).join("")}