assets/javascript/index.js

@@ -1,38 +1,10 @@
 const url = new URL(window.location.toLocaleString());
-const sectionList = document.getElementsByClassName("section");
 
-const nnRuler = "cool_tellow";
+const pageList = document.getElementsByClassName("page");
-const nnCoRuler = "ColoradoCrusade";
+const loaded = [];
-const electionDate = "June 30 2025";
+var currentPage;
 
-const constitutionSections = ["MAIN", "DISTRICTS", "DISCORD"];
+let splashes = ["Totally not rigged!!!", "New Lameful", "What's Uptown?", */"♫I've been workin' on the railroad♫", "Also visit CalvinTown", "Also visit IkeaLand", "Also visit Matsunoki", "Also visit MillField", "Also visit Jurcgrad", "Also visit Spawn 2025", "Brought to you by the NNNNNNNNNN", "<b><i>Dig the Cube</i></b>", "Urban Sprawl!", "Invest in WormzyCoin!", "New and Improved!", "Omtegu!", "do /pay new_nameful 20 for good luck", "my asshole hurts", "The most extravagant group project", "That damn cube…", "what the nameful", "Vote Karma!", "Cobble ceiling has been removed.", "railroad fetish", "ColoradoCrusade!", "MississipiMuslim!!", "PennsylvaniaPacifist!", "Haiiiii Lkarchhhh :3", "23% approved!", "67% approved!", "71% approved!", "Now updated to 1.21.5", "hardly know her", "Praise be thine", "Beware the NBP", "/lmk NewNameful", "Coded by Lkarch", "Just one more rail line…", "I think I get why they call it Minecraft", "Why isn't there a New Nameful 2?", "The townsfolk get a little quirky at night.", "/pay keyboardan 100", "Cube 3 coming soon!", "\"Mildly funny splash text here\"", "Also try Old Nameful"];
-const constitutionPreambles = ["To be followed by every leader of New Nameful. Breaking of this constitution can and will result in expulsion of ownership. In such an event, ownership will be given to a co-owner. If no line of command exists, elections will once more be held. The constitution may be amended and changed if each amendment / change gets a 70% “yae” approval on a poll conducted in the Nameful Discord. Any poll conducted by the ruler is not to be answered by the Ruler aside from an Electoral poll."];
-const constitutionAmendments = [
-  [
-    "A term is 2 months long. Approval ratings run 1 month into a term. A player is good to rule for at most 2 terms in a row before they must take a mandatory offterm. Once an off term is taken, their slate is clean and the player may run again with the same limitation as listed before.",
-    "New Nameful is its own identity, and cannot be conglomerated into any other town or nation. Membership status with the United Cities is to be maintained.",
-    "History is to be recorded to the best of the Ruler and their cabinets’ abilities. History is to be recorded in the New Nameful Museum, found in the Town Hall.",
-    "Departments carry over into the next term, regardless of who the Ruler is. The ruler may create and delete Departments as well as hire and fire heads of departments. No department is to be without a head.",
-    "Anyone may run for Ruler, and anyone may win. Unless serious, condemning evidence of fraud or other foul play is found, no one is to be denied their electoral victory and rulership status. Rulers may both vote in and endorse candidates in elections.",
-    "The Co-Ruler has the same power of the Ruler, except they must achieve the permission of the Ruler for any major action or legislation.",
-    "Legislation passed through a poll that is not an amendment can be decided upon by a majority vote if a leader decides. If said legislation is found to conflict with what is stated in the constitution, then it is put up to 70% yae."
-  ],
-  [
-    "The Ruler must take control of the District Direct and check it appropriately.",
-    "Any player may manage up to 4 districts",
-    "The government may manage a district if there is no manager for said district.",
-    "If a district has rules that differ from rules of greater New Nameful, they must be recorded down in an area that players may easily see.",
-    "Districts may break from greater New Nameful. Decisions to break off are to be decided on a poll conducted by the Ruler. The poll must get 80% agreement for the district to break off. A district may not be sold off or bought."
-  ],
-  ["Every person who possesses moderation powers is only permitted to exercise disciplinary actions if a rule has been broken. Deleting a message, issuing a timeout, kicking, and banning for personal reasons in an attempt to censor someone without justification is unconstitutional and will be punished.", "The Ruler may not add mods to the discord without consulting the current mods and conducting a private poll with a majority vote.", "The Ruler may not remove mods from the discord without evidence of unconstitutional action and consulting the current mods."]
-];
-
-const memberList = ["<span class='&b'>Om<span class='&5'>te<span class='&7'>gu</span></span></span>", "pupik923", "<span class='&6'>Tellow</span>", "JoeTheDauntless", "black_frieza", "Jinx64_", "<span class='&9'>el<span class='&e'>diego</span></span>", "Gero06", "Spencer1019", "mrcreeperg4", "<span class='&6'>Tired<span class='&5'>Toonz</span></span>", "idan1503", "<span class='&d'>Wormzy<span class='&5'>333</span></span>", "<span class='&1'>Colorado<span class='&4'>Crusade</span></span>", "spenten", "Geogaddiiii", "Austcd30", "MyNameIsRasheed", "MrSteam84", "TwoGoodFiveme", "ara2009", "Ransterr", "ItzFriez6312", "ArzoAblaze", "jssjsjjssj", "toiletteeth", "B8arn", "FredDerp", "Georgequank", "hunterg2i", "<span class='&1'>Karma<span class='&9'>Is<span class='&3'>D<span class='&8'>epressed</span></span></span></span>", "Mini", "ChilliChillt", "ServerLite", "proper_cat", "Master__Kief", "ItzBiblcle", "MrAss_asd", "Burningskull562", "se2p", "mindlord", "ItIsYeFish", "pivozavr2004", "latcyy", "LuckKir", "oggghrkwneh", "MiHoub", "David", "<span class='&b'>lkarch</span>", "MegaByteX", "ScaryCowCow4", "Glanthrial", "Deskfan45", "nielubiecie321", "BoomFox_Official", "DrDews", "DrNubXP", "hagluciak19", "<span class='&8'>SavageUser</span>", "Fireballiceball", "JakeRedstone", "kaiookk1", "My_ChairSlipped", "j63k", "<span class='color:&f'>jurc<span class='&e'>kurc</span></span>", "workingontrying", "KevinDurantgoat", "Creeperpaste", "Islando_Commando", "Migzotic", "Teasoup", "F8fnir", "JorgenMister", "isnikoda", "TrustedHawk1855", "<span class='&4'>Re<span class='&6'>viv<span class='&4'>ey</span></span></span>", "BleonIlazi", "AgentTammy", "Losangelesquest", "jeorm", "CrafterSteve98", "ilikemacandcheez", "NotRawZach", "herrydicc", "Hendway", "Pugino", "TeeDoesStuff", "TomAndBon", "SJET_Inc", "Urogalo", "arrochista", "JakePaulcraft", "WetBed43", "grammarissue", "pappoy76", "BurgerMan_27", "ilhanerdem2015", "BashurverseMC", "Batteryacids", "freddyw", "Acid0verl0ad", "CerealBoiz", "Q_QIndustries", "minerkat2011", "Capital3", "Assult_penguin", "NexSol", "DrWild", "nnnnn", "Jerry_juju", "hanxing", "Juasonxd", "Mikey_herobrine", "FluffyFoxFae", "Karmatical0", "ItsMxt", "Yen45", "Olat", "FredMCGamer", "capitanatomico", "DanielRobert15", "Hefeng_Song", "Leozero_", "MyGmail", "SkyNotBlue", "<span class='&9'>el<span class='&e'>diegoat</span></span>", "huntermkk", "<span class='&b'>Its<span class='&a'>Vollx</span></span>", "sonictank1", "Miyazaki", "Beanzo0", "VolxyzMC", "tvoreal", "sushi_king86", "KAMILE33", "pascal_machet", "barton1357TF2", "Yungyoungin1", "kleeorg", "SnailRibs", "<span class='&4'>yours<span class='&5'>truly<span class='&6'>71</span></span></span>", "Csorroflegma", "ahhhhhhhh1587", "Lofeee", "mmakart", "adebuilder", "Jetteriter", "mud4dum", "Jesper2011", "GREENAPPLE", "<span class='&4'>guinea_<span class='&1'>rat</span></span>", "CreeperX200", "<span class='&6'>audemusjura</span>", "cutekttn", "bartur4", "Feruxia", "Kurzov", "MONKEYMAN346776", "breadcool", "Zaku1626", "<span class='&3'>keyboardan</span>", "tetunnel", "ItTommy22Toad", "<span class='&a'>Fulgencio</span>", "inoxisane", "q0iat", "<span class='&2'>Levinder</span>", "aidenjamesmcl", "BastianSeb", "Nathan20093420", "Cowcreeper", "Gow_", "charlie_keogh", "non_oggi", "Bartur4", "CookiezWithCream"];
-
-const colorCodes = ["&0", "&1", "&2", "&3", "&4", "&5", "&6", "&7", "&8", "&9", "&a", "&b", "&c", "&d", "&e", "&f"]
-const colorCodeColors = ["#000000", "#0000AA", "#00AA00", "#00AAAA", "#AA0000", "#AA00AA", "#FFAA00", "#AAAAAA", "#555555", "#5555FF", "#55FF55", "#55FFFF", "#FF5555", "#FF55FF", "#FFFF55", "#FFFFFF"]
-
-let splashes = ["Totally not rigged!!!", "New Lameful", "What's Uptown?", nnRuler + " approves!", "♫I've been workin' on the railroad♫", "Also visit CalvinTown", "Also visit IkeaLand", "Also visit Matsunoki", "Also visit MillField", "Also visit Jurcgrad", "Also visit Spawn 2025", "Brought to you by the NNNNNNNNNN", "<b><i>Dig the Cube</i></b>", "Featured Players: " + keyboardanTroll() + " and " + keyboardanTroll(), "Urban Sprawl!", "Invest in WormzyCoin!", "New and Improved!", "Omtegu!", "do /pay new_nameful 20 for good luck", "my asshole hurts", "The most extravagant group project", "That damn cube…", "what the nameful", "Vote Karma!", "Cobble ceiling has been removed.", "railroad fetish", "ColoradoCrusade!", "MississipiMuslim!!", "PennsylvaniaPacifist!", "Haiiiii Lkarchhhh :3", "23% approved!", "67% approved!", "71% approved!", "Now updated to 1.21.5", "hardly know her", "Praise be thine", "Beware the NBP", "/lmk NewNameful", "Coded by Lkarch", "Just one more rail line…", "I think I get why they call it Minecraft", "Why isn’t there a New Nameful 2?", "The townsfolk get a little quirky at night.", "/pay keyboardan 100", "Cube 3 coming soon!", "\"Mildly funny splash text here\"", "Also try Old Nameful"];
 
 function getCookie(cookieName) {
   let name = cookieName + "=";
@@ -73,52 +45,38 @@ function randomizeUser() {
   return randomUser;
 }
 
-function processColorCodes() {
-  for (let colorCode = 0; colorCode < colorCodes.length; colorCode++) {
-    for (let colorCodeClass = 0; colorCodeClass < document.getElementsByClassName(colorCodes[colorCode]).length; colorCodeClass++) {
-      document.getElementsByClassName(colorCodes[colorCode])[colorCodeClass].style = "color: " + colorCodeColors[colorCode] + ";"
-    }
-  }
-  console.log("Processed color codes!")
-}
 
-function switchSection(sectionName, button) {
+function switchPage(pageName, button) {
-  for (let i = 0; i < sectionList.length; i++) {
+  currentPage = pageName;
-    sectionList[i].style.display = "none";
+
+  for (let page = 0; page < pageList.length; page++) {
+    pageList[page].style.display = "none";
   }
 
-  let navButton = document.getElementsByClassName("navButton");
+  let navButtons = document.getElementsByClassName("nav-button");
-  for (let i = 0; i < navButton.length; i++) {
+  for (let navButton = 0; navButton < navButtons.length; navButton++) {
-    navButton[i].style.backgroundColor = "black";
+    navButtons[navButton].style.backgroundColor = "black";
-    navButton[i].style.color = "white";
+    navButtons[navButton].style.color = "white";
   }
   
   document.title = button.innerText;
-  document.cookie = "section=" + sectionName;
+  document.cookie = "page=" + pageName;
 
-  document.getElementById(sectionName).style.display = "block";
+  document.getElementById(pageName).style.display = "block";
 
   button.style.backgroundColor = "white";
   button.style.color = "black";
+
+  for (let page = 0; page <= loaded.length; page++) {
+    if (! loaded.includes(pageName)) {
+      loaded.push(pageName);
+      window[pageName + "Load"]();
+    }
+  }
 }
 
-function loadRulersAndElectionCountdown() {
+function infoLoad() {
-  console.log("Ruler found: \"" + nnRuler + "\"");
+  randomizeSplash();
-  document.getElementById("ruler").innerText = nnRuler;
-  document.getElementById("rulerAttachment").src = "https://minotar.net/armor/body/" + nnRuler + "/100.png";
-
-  console.log("Co-ruler found: \"" + nnCoRuler + "\"");
-  document.getElementById("coRuler").innerText = nnCoRuler;
-  document.getElementById("coRulerAttachment").src = "https://minotar.net/armor/body/" + nnCoRuler + "/100.png";
-
-  console.log("Next election occurs in " + calculateCountdown(electionDate) + " days");
-
-
-  if (Math.ceil(calculateCountdown(electionDate)) <= 0) {
-    document.getElementById("electionCountdown").innerText = "The next election is RIGHT NOW!!!";
-  } else {
-    document.getElementById("electionCountdown").innerText = "The next election is in " + Math.ceil(calculateCountdown(electionDate)) + " days!";
-  }
 }
 
 function randomizeSplash() {
@@ -128,132 +86,24 @@ function randomizeSplash() {
   document.getElementById("splash").innerHTML = randomSplash;
 }
 
-function loadConstitution() {
+function announcementsLoad() {
-  for (let constitutionSection = 0; constitutionSection < constitutionSections.length; constitutionSection++) {
+  addDiscordCards(window[currentPage + "CurrentIndex"], "announcements", true, true, "embed");
-    let constitutionSectionName = constitutionSections[constitutionSection].toLowerCase();
-    let constitutionSectionContainer = document.createElement("div");
-    let constitutionSectionTitle = document.createElement("p");
-    let constitutionLine = document.createElement("hr");
-
-    constitutionSectionContainer.className = "card";
-    constitutionSectionContainer.id = constitutionSectionName + "ConstitutionSection";
-    constitutionSectionTitle.innerText = constitutionSections[constitutionSection];
-
-    document.getElementById("constitution").append(constitutionSectionContainer);
-    document.getElementById(constitutionSectionContainer.id).append(constitutionSectionTitle,constitutionLine);
-
-    if (typeof (constitutionPreambles[constitutionSection]) !== "undefined") {
-      let sectionPreamble = document.createElement("div");
-
-      sectionPreamble.id = constitutionSectionName + "Preamble";
-      sectionPreamble.innerText = constitutionPreambles[constitutionSection];
-
-      document.getElementById(constitutionSectionContainer.id).append(sectionPreamble);
-    }
-
-    for (let amendment = 0; amendment < constitutionAmendments[constitutionSection].length; amendment++) {
-      let amendmentContent = document.createElement("p");
-
-      amendmentContent.class = "amendment";
-      amendmentContent.id = constitutionSections[constitutionSection] + "Amendment" + amendment;
-      amendmentContent.innerText = amendment + 1 + ") " + constitutionAmendments[constitutionSection][amendment];
-
-
-      document.getElementById(constitutionSectionContainer.id).append(amendmentContent);
-    }
-  }
 }
 
-function loadMemberList() {
+function newnamefulnewsnoticeLoad() {
-  for (let member = 0; member < memberList.length; member++) {
+  addDiscordCards(window[currentPage + "CurrentIndex"], "newnamefulnewsnotice", false, true, "embed");
-    let memberListItem = document.createElement("p");
+  window.addEventListener("scroll", handleInfiniteScroll);
-    memberListItem.innerHTML = memberList[member];
-
-    document.getElementById("memberCount").innerText = "Member Count: " + memberList.length;
-    document.getElementById("memberList").append(memberListItem);
-  }
-}
-
-function loadDiscordMessagesFromJson(jsonName, addMessageContent, addAttachments, attachmentLinkOrEmbed) {
-  fetch("/assets/json/" + jsonName + "/" + jsonName + ".json")
-  .then(response => response.json())
-  .then(json => {
-    json.messages.reverse();
-    for (let message = 0; message < json.messages.length; message++) {
-      let messageContainer = document.createElement("div");
-      let messageTitle = document.createElement("p");
-      let messageDate = new Date(json.messages[message].timestamp);
-      let messageLine = document.createElement("hr");
-
-      messageContainer.className = "card";
-      messageContainer.id = jsonName + message;
-      messageContainer.style = "overflow: hidden;";
-      messageTitle.innerText = json.messages[message].author.nickname + " | " + messageDate.toLocaleDateString();
-
-      document.getElementById(jsonName).append(messageContainer);
-      document.getElementById(messageContainer.id).append(messageTitle, messageLine);
-
-      if (addMessageContent == true) {
-        let messageContent = document.createElement("p");
-
-        messageContent.innerText = json.messages[message].content;
-
-        document.getElementById(messageContainer.id).append(messageContent);
-      }
-
-      if (addAttachments == true) {
-        for (let attachment = 0; attachment < json.messages[message].attachments.length; attachment++) {
-          if (attachmentLinkOrEmbed === "link") {
-            let messageAttachment = document.createElement("a");
-            
-            messageAttachment.className = "messageAttachment";
-            messageAttachment.href = json.messages[message].attachments[attachment].url;
-            messageAttachment.innerText = json.messages[message].attachments[attachment].url;
-            
-            document.getElementById(messageContainer.id).append(messageAttachment);
-          } else if (attachmentLinkOrEmbed === "embed") {
-            let messageAttachment = document.createElement("img");
-
-            messageAttachment.className = "messageAttachment";
-            messageAttachment.src = json.messages[message].attachments[attachment].url;
-
-            document.getElementById(messageContainer.id).append(messageAttachment);
-          }
-        }
-      }
-    }
-  });
 }
 
 function onPageLoad() {
-  if (url.searchParams.has("section")) {
+  if (url.searchParams.has("page")) {
-    console.log("URL parameter found, forcing section to \"" + url.searchParams.get("section") + "\"");
+    console.log("URL parameter found, forcing page to \"" + url.searchParams.get("page") + "\"");
-    document.getElementById(url.searchParams.get("section") + "Button").click();
+    document.getElementById(url.searchParams.get("page") + "-button").click();
-  } else if (getCookie("section") === "") {
+  } else if (getCookie("page") === "") {
-    console.log("A wild user appears! Defaulting to first section, \"" + sectionList[0].id + "\"");
+    console.log("A wild user appears! Defaulting to first page, \"" + pageList[0].id + "\"");
-    document.getElementById(sectionList[0].id + "Button").click();
+    document.getElementById(pageList[0].id + "-button").click();
   } else {
-    console.log("Section cookie found, restoring section to \"" + getCookie("section") + "\"");
+    console.log("Page cookie found, restoring page to \"" + getCookie("page") + "\"");
-    document.getElementById(getCookie("section") + "Button").click();
+    document.getElementById(getCookie("page") + "-button").click();
-  }
-
-  loadRulersAndElectionCountdown();
-  loadConstitution();
-  loadMemberList();
-  loadDiscordMessagesFromJson("announcements", true, true, "embed");
-  loadDiscordMessagesFromJson("newnamefulnewsnotice", false, true, "embed");
-  processColorCodes();
-  randomizeSplash();
-}
-
-function loadArchive() {
-  for (let archive = 0; archive < 3; archive++) {
-    let archiveAttachment = document.createElement("img");
-
-
-    archiveAttachment.className = "archiveAttachment";
-    archiveAttachment.src = "/archive/archive-" + archive;
-
-    document.body.append(archiveAttachment);
   }
 }

assets/javascript/load-data.js

@@ -0,0 +1,111 @@
+function createCard(page, index, style) {
+  let card = document.createElement("div");
+  let cardTitle = document.createElement("div");
+  let cardLine = document.createElement("hr");
+  let cardContent = document.createElement("div")
+
+  card.className = "card";
+  card.id = page + "-" + index;
+  card.style = style
+  cardTitle.id = page + "Title-" + index;
+  cardContent.id = page + "Content-" + index;
+
+  document.getElementById(page).append(card);
+  document.getElementById(card.id).append(cardTitle, cardLine, cardContent);
+}
+
+async function electionLoad() {
+  const response = await fetch("/assets/json/data/data.json");  
+  const jsonData = await response.json();
+
+  let election = jsonData.election
+
+  for (let govPosition = 0; govPosition < election.leaders.length; govPosition++) {
+    window["position-" + govPosition] = document.createElement("p")
+    window["username-" + govPosition] = document.createElement("p")
+    window["avatar-" + govPosition] = document.createElement("img")
+    
+    window["position-" + govPosition].innerText = election.leaders[govPosition].title
+    window["username-" + govPosition].innerText = election.leaders[govPosition].username
+    window["avatar-" + govPosition].src = "https://minotar.net/armor/body/" + election.leaders[govPosition].username + "/100.png"
+
+    createCard("election", govPosition, "height: 340px;width: 370px;")
+
+    document.getElementById("electionTitle-" + govPosition).append(window["position-" + govPosition]);
+    document.getElementById("electionContent-" + govPosition).append(window["username-" + govPosition], window["avatar-" + govPosition]);
+  }
+
+  let countdown = document.createElement("p")
+  
+  if (Math.ceil(calculateCountdown(electionDate)) <= 0) {
+    countdown.innerText = "The next election is RIGHT NOW!!!";
+  } else {
+    countdown.innerText = "The next election is in " + Math.ceil(calculateCountdown(election.electionDate)) + " days!";
+  }
+
+  console.log("Next election occurs in " + calculateCountdown(electionDate) + " days");
+  document.getElementById("election").append(countdown);
+
+}
+
+async function constitutionLoad() {
+  const response = await fetch("/assets/json/data/data.json");  
+  const jsonData = await response.json();
+
+  let constitution = jsonData.constitution
+
+  for (let constitutionSection = 0; constitutionSection < constitution.sections.length; constitutionSection++) {
+    window["title-" + constitutionSection] = document.createElement("p")
+    window["preamble-" + constitutionSection] = document.createElement("p")
+    window["amendments-" + constitutionSection] = document.createElement("div")
+    
+    window["title-" + constitutionSection].innerText = constitution.sections[constitutionSection].title
+    window["preamble-" + constitutionSection].innerText = constitution.sections[constitutionSection].preamble
+    window["amendments-" + constitutionSection].id = "amendments-" + constitutionSection
+
+    createCard("constitution", constitutionSection, "")
+
+    document.getElementById("constitutionTitle-" + constitutionSection).append(window["title-" + constitutionSection]);
+    document.getElementById("constitutionContent-" + constitutionSection).append(window["preamble-" + constitutionSection], window["amendments-" + constitutionSection]);
+
+    for (let amendment = 0; amendment < constitution.sections[constitutionSection].amendments.length; amendment++) {
+      window["amendment-" + constitutionSection + "-" + amendment] = document.createElement("p")
+
+      window["amendment-" + constitutionSection + "-" + amendment].innerText = amendment + 1 + ") " + constitution.sections[constitutionSection].amendments[amendment].amendment
+
+      document.getElementById("amendments-" + constitutionSection).append(window["amendment-" + constitutionSection + "-" + amendment]);
+    }
+  }
+}
+
+async function membersLoad() {
+  const response = await fetch("/assets/json/data/data.json");  
+  const jsonData = await response.json();
+
+  let memberList = jsonData.memberList
+  let memberCount = document.createElement("p")
+
+  memberCount.innerText = memberList.title + memberList.members.length
+
+  createCard("members", "0", "width: 370px;")
+
+  document.getElementById("membersTitle-0").append(memberCount)
+
+  for (let member = 0; member < memberList.members.length; member++) {
+    window["member-" + member] = document.createElement("div")
+
+    window["member-" + member].id = "member-" + member
+    window["member-" + member].style = "width: fit-content; margin: auto;"
+
+    document.getElementById("membersContent-0").append(window["member-" + member])
+
+    for (let memberSection = 0; memberSection < memberList.members[member].username.length; memberSection++) {
+      window["memberSection-" + member + "-" + "memberSection"] = document.createElement("p")
+
+      window["memberSection-" + member + "-" + "memberSection"].style = "float: left;"
+      window["memberSection-" + member + "-" + "memberSection"].innerText = memberList.members[member].username[memberSection]
+
+      document.getElementById("member-" + member).append(window["memberSection-" + member + "-" + "memberSection"])
+    }
+  }
+}

assets/javascript/load-discord-messages.js

@@ -0,0 +1,103 @@
+const cardIncrease = 10;
+
+var announcementsCardLimit;
+var announcementsCurrentIndex = 0;
+
+var newnamefulnewsnoticeCardLimit;
+var newnamefulnewsnoticeCurrentIndex = 0;
+
+var throttleTimer;
+
+const throttle = (callback, time) => {
+  if (throttleTimer) return;
+  throttleTimer = true;
+
+  setTimeout(() => {
+    callback();
+    throttleTimer = false;
+  }, time);
+};
+
+function createCardFromDiscordMessage(index, json, jsonName, addMessageContent, addAttachments, attachmentLinkOrEmbed) {
+  let messageContainer = document.createElement("div");
+  let messageAuthorAvatar = document.createElement("img");
+  let messageTitle = document.createElement("p");
+  let messageDate = new Date(json.messages[index].timestamp);
+  let messageLine = document.createElement("hr");
+
+  messageContainer.className = "card";
+  messageContainer.id = jsonName + "-" + index;
+  messageAuthorAvatar.className = "message-author-avatar";
+  messageAuthorAvatar.src = "/assets/json/" + jsonName + "/" + json.messages[index].author.avatarUrl;
+  messageTitle.style = "margin-top: 5px;"
+  messageTitle.innerHTML = "<span style='color: " + json.messages[index].author.color + ";'>" + json.messages[index].author.nickname + "</span>" + " | " + messageDate.toLocaleDateString();
+
+  document.getElementById(jsonName).append(messageContainer);
+  document.getElementById(messageContainer.id).append(messageAuthorAvatar, messageTitle, messageLine);
+
+  if (addMessageContent == true) {
+    let messageContent = document.createElement("p");
+
+    messageContent.innerText = json.messages[index].content;
+
+    document.getElementById(messageContainer.id).append(messageContent);
+  }
+
+  if (addAttachments == true) {
+    let messageAttachment;
+    for (let attachment = 0; attachment < json.messages[index].attachments.length; attachment++) {
+      if (attachmentLinkOrEmbed === "link") {
+        messageAttachment = document.createElement("a");
+            
+        messageAttachment.href = "/assets/json/" + jsonName + json.messages[index].attachments[attachment].url;
+        messageAttachment.innerText = json.messages[index].attachments[attachment].fileName;
+      } else if (attachmentLinkOrEmbed === "embed") {
+        messageAttachment = document.createElement("img");
+
+        messageAttachment.src = "/assets/json/" + jsonName + "/" + json.messages[index].attachments[attachment].url;
+
+        document.getElementById(messageContainer.id).append(messageAttachment);
+      }
+      messageAttachment.className = "message-attachment";
+
+      document.getElementById(messageContainer.id).append(messageAttachment);
+    }
+  }
+}
+
+async function addDiscordCards(cardIndex, jsonName, addMessageContent, addAttachments, attachmentLinkOrEmbed) {
+  const response = await fetch("/assets/json/" + jsonName + "/" + jsonName + ".json");  
+  const jsonData = await response.json();
+  jsonData.messages.reverse();
+
+  window[currentPage + "CardLimit"] = jsonData.messages.length;
+  window[currentPage + "CurrentIndex"]  =  cardIndex
+  window[currentPage + "EndIndex"] = window[currentPage + "CurrentIndex"] == window[currentPage + "CardLimit"] ? window[currentPage + "CardLimit"] : window[currentPage + "CurrentIndex"] + cardIncrease;
+
+
+  for (let i = window[currentPage + "CurrentIndex"]; i < window[currentPage + "EndIndex"]; i++) {
+    createCardFromDiscordMessage(i, jsonData, jsonName, addMessageContent, addAttachments, attachmentLinkOrEmbed);
+    console.log("Added card " + i)
+  }
+  console.log(window[currentPage + "CurrentIndex"] + " " + window[currentPage + "CardLimit"]);
+};
+
+function handleInfiniteScroll() {
+  throttle(() => {
+    const endOfPage = Math.ceil(window.innerHeight + window.pageYOffset + 10) >= document.body.offsetHeight;
+    console.log(endOfPage)
+    if (endOfPage && currentPage === "newnamefulnewsnotice") {
+      console.log("Adding cards")
+      addDiscordCards(window[currentPage + "CurrentIndex"] + cardIncrease, "newnamefulnewsnotice", false, true, "embed")
+    }
+    if (window[currentPage + "CurrentIndex"] + cardIncrease === window[currentPage + "CardLimit"]) {
+      console.log("Removing Handler")
+      removeInfiniteScroll(handleInfiniteScroll);
+    }
+  }, 1500);
+}
+
+function removeInfiniteScroll(name) {
+  window.removeEventListener("scroll", name);
+  console.log("removed " + name)
+}

assets/stylesheets/index.css

@@ -55,6 +55,7 @@ body {
   margin-bottom: 20px;
   box-shadow: 2px 2px 8px rgba(0,0,0,0.1);
   width: 90%;
+  overflow: hidden;
 }
 
 .card p {
@@ -66,14 +67,6 @@ body {
   margin: auto;
 }
 
-.cardContainer {
-  margin: auto;
-  padding: 15px;
-  margin-bottom: 20px;
-  width: 90%;
-  height: 220;
-}
-
 #splash {
     color: #FFFF00;
     font-size: 1.5em;
@@ -83,6 +76,7 @@ body {
     text-align: center;
     left: 440px;
     top: 80px;
+    z-index: 1;
 }
 
 .tilt {
@@ -93,29 +87,29 @@ body {
     animation: pop 0.58s infinite;
 }
 
-.section {
+.page {
   display: none;
   padding: 95px 20px 20px;
 }
 
 #navbar {
   position: fixed;
+  z-index: 2;
   width: 100%;
   background-color: black;
 }
 
-.navButton {
+.nav-button {
   float: left;
   padding: 10px 20px;
   border: none;
-  border-top: 3px solid black;
   cursor: pointer;
   font-size: 1.8vw;
   background-color: black;
   color: white;
 }
 
-.navButton:hover {
+.nav-button:hover {
   background-color: white !important;
   color: black !important;
 }
@@ -128,20 +122,20 @@ body {
 
 #footer a {
   color: white;
+  font-size: 15px;
 }
 
-.infoAttachment {
+.info-attachment {
   padding: 10px;
   width: 75%;
 }
 
-.messageAttachment {
+.message-attachment {
   padding: 10px;
   width: 75%;
 }
 
-
+.message-author-avatar {
-.archiveAttachment {
+  width: 64px;
-  padding: 10px;
+  border-radius: 100%;
-  width: 75%;
 }

index.html

@@ -12,89 +12,76 @@
   </head>
   <body onload="onPageLoad()">
     <div id="navbar">
-      <button class="navButton" id="infoButton" onclick="switchSection('info', this)">Info</button>
+      <button class="nav-button" id="info-button" onclick="switchPage('info', this)">Info</button>
-      <button class="navButton" id="electionButton" onclick="switchSection('election', this)">Election</button>
+      <button class="nav-button" id="election-button" onclick="switchPage('election', this)">Election</button>
-      <button class="navButton" id="constitutionButton" onclick="switchSection('constitution', this)">Constitution</button>
+      <button class="nav-button" id="constitution-button" onclick="switchPage('constitution', this)">Constitution</button>
-      <button class="navButton" id="membersButton" onclick="switchSection('members', this)">Members</button>
+      <button class="nav-button" id="members-button" onclick="switchPage('members', this)">Members</button>
-      <button class="navButton" id="announcementsButton" onclick="switchSection('announcements', this)">Announcements</button>
+      <button class="nav-button" id="announcements-button" onclick="switchPage('announcements', this)">Announcements</button>
-      <button class="navButton" id="newnamefulnewsnoticeButton" onclick="switchSection('newnamefulnewsnotice', this)">News</button>
+      <button class="nav-button" id="newnamefulnewsnotice-button" onclick="switchPage('newnamefulnewsnotice', this)">News</button>
-      <!-- <button class="navButton" id="historyButton" onclick="switchSection('history', this)">History</button> -->
+      <!-- <button class="nav-button" id="history-button" onclick="switchPage('history', this)">History</button> -->
-      <button class="navButton" id="discordButton" onclick="window.location.href = 'https://discord.newnameful.com'">Discord</button>
+      <button class="nav-button" id="discord-button" onclick="window.location.href = 'https://discord.newnameful.com'">Discord</button>
     </div>
-    <div class="section" id="info">
+    <div class="page" id="info">
-      <img src="/assets/images/info/NamefulLogo.png" alt="">
+      <img src="/assets/images/info/new-nameful-logo.png" alt="">
       <div class="tilt">
         <div id="splash" class="pop"></div>
       </div>
-      <div class="card" id="infoIntroduction">
+      <div class="card" id="info-introduction">
         <p>Introduction</p>
         <hr>
         <p>A large, populous town with great infrastructure, a good community, grand opportunities, and influence! New Nameful holds branches along other notable towns, being part of the United Cities and URO as well as the town spearheading the Nether Transit Coalition.</p>
       </div>
-      <div class="card" id="infoDistricts">
+      <div class="card" id="info-districts">
         <p>Districts</p>
         <hr>
         <p>The town is split into a district system, meaning different areas of the town may be managed by different players (and may have different rules, though this is rarely the case. Some noticeable districts include North Nameful, East Nameful, Nameful Bay, and Uptown Nameful.</p>
       </div>
-      <div class="card" id="infoLeadership">
+      <div class="card" id="info-leadership">
         <p>Leadership</p>
         <hr>
         <p>The town is run under a democratic structure of government, with bi-monthly elections to decide who leads the town. A rulership term is 2 months long, and a ruler is good to serve for at max 2 terms in a row before needing to take a mandatory off term. Political parties help group similarly minded individuals.</p>
       </div>
-      <div class="card" id="infoJoinToday">
+      <div class="card" id="info-join-today">
         <p>Join Today!</p>
         <hr>
         <p>New Nameful is FREE TO BUILD, meaning you do not need permission (save for specific districts). Just be respectful of other peoples builds and property. Take part of the community today!</p>
       </div>
-      <div class="card" id="infoAttachments">
+      <div class="card" id="info-attachments">
         <p>Images</p>
         <hr>
-        <img class="infoAttachment" src="assets/images/info/ss-25_05_2025-01-53-13.png" alt="">
+        <img class="info-attachment" src="/assets/images/info/screenshot-1.jpg" alt="">
-        <img class="infoAttachment" src="assets/images/info/ss-25_05_2025-01-53-25.png" alt="">
+        <img class="info-attachment" src="/assets/images/info/screenshot-2.jpg" alt="">
-        <img class="infoAttachment" src="assets/images/info/ss-25_05_2025-01-53-48.png" alt="">
+        <img class="info-attachment" src="/assets/images/info/screenshot-3.jpg" alt="">
-        <img class="infoAttachment" src="assets/images/info/ss-25_05_2025-01-53-58.png" alt="">
+        <img class="info-attachment" src="/assets/images/info/screenshot-4.jpg" alt="">
-        <img class="infoAttachment" src="assets/images/info/ss-25_05_2025-01-54-19.png" alt="">
+        <img class="info-attachment" src="/assets/images/info/screenshot-5.jpg" alt="">
+        <img class="info-attachment" src="/assets/images/info/screenshot-6.jpg" alt="">
+        <img class="info-attachment" src="/assets/images/info/screenshot-7.jpg" alt="">
+        <img class="info-attachment" src="/assets/images/info/screenshot-8.jpg" alt="">
       </div>
     </div>
-    <div class="section" id="election">
+    <div class="page" id="election">
       <p><b>Currently Elected Leaders</b></p>
-      <div class="card" style="height: 340px;width: 370px;">
-        <p>Ruler</p>
-        <hr>
-        <p id="ruler">Steve</p>
-        <img id="rulerAttachment" src="https://minotar.net/body/MHF_Steve/100.png" alt="Player Render">
-      </div>
-      <div class="card" style="height: 340px;width: 370px;">
-        <p>Co-Ruler</p>
-        <hr>
-        <p id="coRuler">Steve</p>
-        <img id="coRulerAttachment" src="https://minotar.net/body/MHF_Steve/100.png" alt="Player Render">
-      </div>
-      <br>
-      <p id="electionCountdown">Election Countdown</p>
     </div>
-    <div class="section" id="constitution">
+    <div class="page" id="constitution">
       <p><b>Constitution</b></p>
     </div>
-    <div class="section" id="members">
+    <div class="page" id="members">
       <p><b>Member List</b></p>
-      <div class="card" id="memberList" style="width: 370px;">
-        <p id="memberCount">Member Count: 0</p>
-        <hr>
-      </div>
     </div>
-    <div class="section" id="announcements">
+    <div class="page" id="announcements">
-      <p><b>Announcements</b></p>
+      <p><b>Recent Announcements</b></p>
     </div>
-    <div class="section" id="newnamefulnewsnotice">
+    <div class="page" id="newnamefulnewsnotice">
       <p><b>New Nameful News Nexus News Network News Notice Noticeboard News</b></p>
     </div>
-    <!-- <div class="section" id="history"> -->
+    <!-- <div class="page" id="history"> -->
     <!--   <p>History</p> -->
     <!-- </div> -->
     <div id="footer">
       <a href="https://git.lkarch.org/lkarch/newnameful.com">Source</a><br>
     </div>
-    <script src="assets/javascript/index.js"></script>
+    <script src="/assets/javascript/load-discord-messages.js"></script>
+    <script src="/assets/javascript/index.js"></script>
+    <script src="/assets/javascript/load-data.js"></script>
   </body>
 </html>