63 lines
2.5 KiB
JavaScript
63 lines
2.5 KiB
JavaScript
let teamContainer = document.getElementById("teamContainer");
|
|
|
|
function ucFirst(string) {
|
|
return string.charAt(0).toUpperCase() + string.slice(1);
|
|
}
|
|
|
|
fetch('/json/team.json')
|
|
.then((response) => response.json())
|
|
.then((json) => {
|
|
json.ranks.forEach((rank) => {
|
|
const rankTitle = document.createElement("h2");
|
|
rankTitle.innerHTML = ucFirst(rank.name);
|
|
teamContainer.appendChild(rankTitle);
|
|
|
|
const membersContainer = document.createElement("div");
|
|
membersContainer.classList.add("flex", "flex-row", "ranks", "-"+rank.name+"");
|
|
rank.members.forEach((member) => {
|
|
const memberContainer = document.createElement("div");
|
|
memberContainer.id = member.uid
|
|
memberContainer.classList.add("flex", "flex-row", "playerbox", "ml-4", "pr-5", "pt-4");
|
|
|
|
const memberImageContainer = document.createElement("div");
|
|
memberImageContainer.classList.add("mx-6");
|
|
|
|
const memberImage = document.createElement("img");
|
|
memberImage.src = "https://crafatar.com/renders/body/"+member.uid+"?overlay&scale=5";
|
|
memberImage.alt = member.name;
|
|
memberImage.classList.add("playerimage", "w-16");
|
|
|
|
memberImageContainer.appendChild(memberImage);
|
|
|
|
const descriptionContainer = document.createElement("div");
|
|
descriptionContainer.id = "description";
|
|
descriptionContainer.classList.add("flex", "flex-col", "text-center");
|
|
|
|
const memberName = document.createElement("p");
|
|
memberName.innerHTML = "<b>"+member.name+"</b>"
|
|
|
|
const memberLocation = document.createElement("p");
|
|
memberLocation.innerHTML = "<b>Location: </b><img src='https://flagsapi.com/"+member.loc+"/flat/32.png' alt=''></img>"
|
|
|
|
const memberLanguages = document.createElement("p")
|
|
memberLanguages.innerHTML = "<b>Languages: </b>"
|
|
|
|
member.lang.forEach((spokenLang) => {
|
|
const memberLang = document.createElement("img");
|
|
memberLang.src = "https://flagsapi.com/"+spokenLang+"/flat/32.png";
|
|
memberLang.alt = "";
|
|
memberLanguages.appendChild(memberLang);
|
|
});
|
|
|
|
descriptionContainer.appendChild(memberName);
|
|
descriptionContainer.appendChild(memberLocation);
|
|
descriptionContainer.appendChild(memberLanguages);
|
|
|
|
memberContainer.appendChild(memberImageContainer);
|
|
memberContainer.appendChild(descriptionContainer);
|
|
|
|
membersContainer.appendChild(memberContainer);
|
|
});
|
|
teamContainer.appendChild(membersContainer);
|
|
});
|
|
});
|