Jcink Auto Claim Generator

This is a script that can pull information from the memberlist to use as an auto claim list. The example I am going to use here is Occupation, but this script is set up in a way that you can have multiple "categories" to create different lists. Like Clubs or Schools or Factions or whatever.

HTML Structure

Add the structure to your memberlist. This should be added to the memberlist row HTML template. You can put it at the bottom and add a display:none; to .autoclaim and it will still work fine.

<div class="autoclaim"> <div class="autocat CategoryName"> <div class="autohead"><!-- |field_#| --></div> <div class="autosub"><!-- |field_#| --></div> <div class="autopost"><!-- |field_#| --></div> <div class="autoname"><!-- |name| --></div> </div> <div class="autocat CategoryName2"> <div class="autohead"><!-- |field_#| --></div> <div class="autosub"><!-- |field_#| --></div> <div class="autopost"><!-- |field_#| --></div> <div class="autoname"><!-- |name| --></div> </div> <div class="autocat CategoryName3"> <div class="autohead"><!-- |field_#| --></div> <div class="autosub"><!-- |field_#| --></div> <div class="autopost"><!-- |field_#| --></div> <div class="autoname"><!-- |name| --></div> </div> </div> Copy CodeReset CodeContent Locked

The script will pull the CategoryName and where ever you want that category to show up, you can just put the following and the script will do the rest:

<div id="CategoryName"> </div> Copy CodeReset CodeContent Locked

This allows you to put them on different pages if you like, or call specific categories to a particular tab in a guidebook for example. I would recommend putting the script only on the pages you want to use it and not in your wrapper or on every page so that members don't accidentally call it for some reason.

This script will pull everything from a category and sort it alphabetically first by the Header, then the Subheader, followed by the character's name. In the script, there is an option for you to select a special position to show above the others, for example if you want the Owner tag to be the top and THEN alphabetize the rest by name. This is the sample loaded into the script. You can see that it is set so that the CategoryName Occupation will prioritize the Owner position first.

// Define the important position per category const importantPositions = { "Occupation": "Owner", "Clubs": "Leader", "School": "Principal" // Add more categories and their important positions as needed }; Copy CodeReset CodeContent Locked

Using the example of Occupation, the memberlist code might look like:

<div class="autoclaim"> <div class="autocat Occupation"> <div class="autohead"><!-- |field_#| --></div> (Area/Location) <div class="autosub"><!-- |field_#| --></div> (Name of Business) <div class="autopost"><!-- |field_#| --></div> (Position at Business) <div class="autoname"><!-- |name| --></div> </div> </div> Copy CodeReset CodeContent Locked

Then, you could have a webpage setup that just has div id="Occupation" and the script on it.

The HTML that will appear on the page automatically is:

<div id="Occupation"> <div class="autosect CategoryName"> <h3>Header</h3> <div class="autocomp"> <h4>Subheader</h4> <div class="autochar"> <span class="autochar post">Position</span> <span class="autochar name">Character Name</span> </div> </div> </div> </div> Copy CodeReset CodeContent Locked

Please note: The Name field is the only one that will bring HTML over from the memberlist. The styling was intended to be done off of the above structure. You can change it if you match the other fields to let name = nameElement but I'm not going to go over that.

Please be sure to include jquery if it doesn't work:

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> Copy CodeReset CodeContent Locked

The Script

<script> document.addEventListener("DOMContentLoaded", function() { const membersUrl = "?act=Members&max_results=1000"; // Define the important position per category const importantPositions = { "Occupation": "Owner", "Clubs": "Leader", "School": "Principal" // Add more categories and their important positions as needed }; function fetchAndProcessClaims() { $.get(membersUrl, function(data) { let tempDiv = document.createElement("div"); tempDiv.innerHTML = data; let memberList = tempDiv.querySelector("#member-list"); if (!memberList) return; let autoclaims = memberList.querySelectorAll(".autoclaim"); if (autoclaims.length === 0) return; const structuredData = {}; autoclaims.forEach(memberBlock => { memberBlock.querySelectorAll("[class^='autocat']").forEach(categoryDiv => { let categoryClassList = Array.from(categoryDiv.classList); let category = categoryClassList.find(cls => cls !== "autocat")?.trim(); if (!category) return; if (!structuredData[category]) structuredData[category] = {}; const header = cleanText(categoryDiv.querySelector(".autohead")?.textContent); const subheader = cleanText(categoryDiv.querySelector(".autosub")?.textContent); const position = cleanText(categoryDiv.querySelector(".autopost")?.textContent); const nameElement = categoryDiv.querySelector(".autoname"); let name = nameElement ? nameElement.innerHTML.trim() : null; if (header && subheader && position && name) { if (!structuredData[category][header]) structuredData[category][header] = {}; if (!structuredData[category][header][subheader]) structuredData[category][header][subheader] = []; structuredData[category][header][subheader].push({ position, name }); } }); }); localStorage.setItem("claimCache", JSON.stringify(structuredData)); renderAutoClaims(structuredData); }); } function cleanText(text) { return text && text.trim() !== "" ? text.trim() : null; } function sortAutoClaimData(data) { const sortedData = {}; // Sort categories (e.g., "Occupation") Object.keys(data).sort().forEach(category => { sortedData[category] = {}; // Sort headers (e.g., "Oklahoma") Object.keys(data[category]).sort().forEach(header => { sortedData[category][header] = {}; // Sort subheaders (e.g., "Pine Springs Hotel") Object.keys(data[category][header]).sort().forEach(subheader => { let members = data[category][header][subheader]; // Get the priority position for this category, if set const priorityPosition = importantPositions[category] || null; members.sort((a, b) => { if (priorityPosition) { // If one is the priority position, put it first if (a.position === priorityPosition && b.position !== priorityPosition) return -1; if (b.position === priorityPosition && a.position !== priorityPosition) return 1; } // Otherwise, alphabetize by name return a.name.localeCompare(b.name); }); sortedData[category][header][subheader] = members; }); }); }); return sortedData; } window.renderAutoClaims = function(data) { data = sortAutoClaimData(data); Object.keys(data).forEach(category => { const targetDiv = document.getElementById(category); if (targetDiv) { let outputHtml = ""; Object.entries(data[category]).forEach(([header, subheaders]) => { outputHtml += `<div class="autosect ${header.replace(/\s+/g, '-')}"><h3>${header}</h3>`; Object.entries(subheaders).forEach(([subheader, members]) => { outputHtml += `<div class="autocomp"><h4>${subheader}</h4>`; members.forEach(member => { outputHtml += `<div class="autochar"> <span class="autochar post">${member.position}</span> <span class="autochar name">${member.name}</span> </div>`; }); outputHtml += `</div>`; // Close subheader }); outputHtml += `</div>`; // Close header }); targetDiv.innerHTML = outputHtml; } }); }; // Load Cached Data Instantly const cachedData = JSON.parse(localStorage.getItem("claimCache")); if (cachedData) { renderAutoClaims(cachedData); } // Fetch Fresh Data in the Background window.addEventListener("load", function() { fetchAndProcessClaims(); }); }); </script> Copy CodeReset CodeContent Locked

Using a dropdown for users to select options can help make sure there aren't duplicate sections from spelling differences. You can also use fields that can show on the profile but only be changed by admin if you want to have full control over it, but that means you updating their profile as needed.

The reason only the name field includes the HTML is to prevent people from messing it up too bad on their end but also so it will pull the link to the profile as well as the prefix/suffix, eliminating the need to make another function just to pull the member group. Which is the fancy way of saying I was too lazy to use the script to recreate the link and usergroup. Haha!

If you want to add it to a post but don't want to have the script on every page, open the script in notepad, remove the script tags, save as autoclaim.js, upload to the file manager and add script src="https://files.jcink.net/uploads/YOURSITE/autoclaim.js as a macro and then put that macro into a custom bbcode. Use custom bbcode on post you want to use. Or you could just make it so the script only loads on certain pages, but that will be up to you to work out. 😄

If you want an uncategorized section, I would give it a name and have then have members add that to the autohead field you have set up, aka company name as like "Unemployed" and/or "Freelance" in the occupation example and then it would work.

Sort by Position Too

If you want it to sort by position and then name, then... I didn't do that.

Find:

members.sort((a, b) => { if (priorityPosition) { if (a.position === priorityPosition && b.position !== priorityPosition) return -1; if (b.position === priorityPosition && a.position !== priorityPosition) return 1; } return a.name.localeCompare(b.name); }); Copy CodeReset CodeContent Locked

And replace with:

members.sort((a, b) => { if (priorityPosition) { if (a.position === priorityPosition && b.position !== priorityPosition) return -1; if (b.position === priorityPosition && a.position !== priorityPosition) return 1; } return a.position.localeCompare(b.position) || a.name.localeCompare(b.name); }); Copy CodeReset CodeContent Locked

Add the answer as a class

If you want to have a little more style control and you want to be able to include the person's answer in the html for CSS targeting, for example div class="autopost Owner" or div class="autopost Cashier" you can use the following code. I did not include this because if people use special characters it could mess things up.

You can also look at this area to make changes to the way the HTML is spat out by the script as well, if you want. *This code will not pull for the name field. Only the Header, Subheader, and Position fields, but you could probably figure it out.*

Header

Find:

outputHtml += `<div class="autosect ${header.replace(/\s+/g, '-')}"><h3>${header}</h3>`; Copy CodeReset CodeContent Locked

Replace with:

outputHtml += `<div class="autosect ${header.replace(/\s+/g, '-')}"> <h3 class="autohead ${header.replace(/\s+/g, '-')}">${header}</h3>`; Copy CodeReset CodeContent Locked

Subheader

Find:

outputHtml += `<div class="autocomp"><h4>${subheader}</h4>`; Copy CodeReset CodeContent Locked

Replace with:

outputHtml += `<div class="autocomp"> <h4 class="autosub ${subheader.replace(/\s+/g, '-')}">${subheader}</h4>`; Copy CodeReset CodeContent Locked

Position

Find:

outputHtml += `<div class="autochar"> <span class="autochar post">${member.position}</span> <span class="autochar name">${member.name}</span> <!-- Preserves HTML --> </div>`; Copy CodeReset CodeContent Locked

Replace with:

outputHtml += `<div class="autochar"> <span class="autochar post ${member.position.replace(/\s+/g, '-')}">${member.position}</span> <span class="autochar name">${member.name}</span> <!-- Preserves HTML --> </div>`; Copy CodeReset CodeContent Locked

More than 1000 accounts

If you have more than 1k accounts, please use the following script instead. I would not use this unless you need it just to eliminate the extra scripting:

<script> document.addEventListener("DOMContentLoaded", function() { const baseMembersUrl = "?act=Members&max_results=1000&page="; const importantPositions = { "Occupation": "Owner", "Clubs": "Leader", "School": "Principal" }; function fetchAllPages() { return new Promise((resolve) => { let allData = []; let totalPages = 1; let currentPage = 1; function fetchPage(page) { $.get(baseMembersUrl + page, function(data) { let tempDiv = document.createElement("div"); tempDiv.innerHTML = data; let memberList = tempDiv.querySelector("#member-list"); if (!memberList) return; allData.push(...memberList.querySelectorAll(".autoclaim")); // Find total pages if it's the first fetch if (page === 1) { let paginationLinks = tempDiv.querySelectorAll(".pagination a"); let pageNumbers = Array.from(paginationLinks).map(link => { let match = link.href.match(/page=(\d+)/); return match ? parseInt(match[1]) : null; }).filter(num => num !== null); totalPages = Math.max(...pageNumbers, 1); } if (page < totalPages) { fetchPage(page + 1); } else { resolve(allData); } }); } fetchPage(currentPage); }); } function processClaims(autoclaims) { const structuredData = {}; autoclaims.forEach(memberBlock => { memberBlock.querySelectorAll("[class^='autocat']").forEach(categoryDiv => { let categoryClassList = Array.from(categoryDiv.classList); let category = categoryClassList.find(cls => cls !== "autocat")?.trim(); if (!category) return; if (!structuredData[category]) structuredData[category] = {}; const header = cleanText(categoryDiv.querySelector(".autohead")?.textContent); const subheader = cleanText(categoryDiv.querySelector(".autosub")?.textContent); const position = cleanText(categoryDiv.querySelector(".autopost")?.textContent); const nameElement = categoryDiv.querySelector(".autoname"); let name = nameElement ? nameElement.innerHTML.trim() : null; if (header && subheader && position && name) { if (!structuredData[category][header]) structuredData[category][header] = {}; if (!structuredData[category][header][subheader]) structuredData[category][header][subheader] = []; structuredData[category][header][subheader].push({ position, name }); } }); }); localStorage.setItem("claimCache", JSON.stringify(structuredData)); renderAutoClaims(structuredData); } function cleanText(text) { return text && text.trim() !== "" ? text.trim() : null; } function sortAutoClaimData(data) { const sortedData = {}; Object.keys(data).sort().forEach(category => { sortedData[category] = {}; Object.keys(data[category]).sort().forEach(header => { sortedData[category][header] = {}; Object.keys(data[category][header]).sort().forEach(subheader => { let members = data[category][header][subheader]; const priorityPosition = importantPositions[category] || null; members.sort((a, b) => { if (priorityPosition) { if (a.position === priorityPosition && b.position !== priorityPosition) return -1; if (b.position === priorityPosition && a.position !== priorityPosition) return 1; } return a.name.localeCompare(b.name); }); sortedData[category][header][subheader] = members; }); }); }); return sortedData; } window.renderAutoClaims = function(data) { data = sortAutoClaimData(data); Object.keys(data).forEach(category => { const targetDiv = document.getElementById(category); if (targetDiv) { let outputHtml = ""; Object.entries(data[category]).forEach(([header, subheaders]) => { outputHtml += `<div class="autosect ${header.replace(/\s+/g, '-')}"><h3>${header}</h3>`; Object.entries(subheaders).forEach(([subheader, members]) => { outputHtml += `<div class="autocomp"><h4>${subheader}</h4>`; members.forEach(member => { outputHtml += `<div class="autochar"> <span class="autochar post">${member.position}</span> <span class="autochar name">${member.name}</span> <!-- Preserves HTML --> </div>`; }); outputHtml += `</div>`; // Close subheader }); outputHtml += `</div>`; // Close header }); targetDiv.innerHTML = outputHtml; } }); }; const cachedData = JSON.parse(localStorage.getItem("claimCache")); if (cachedData) { renderAutoClaims(cachedData); } window.addEventListener("load", function() { fetchAllPages().then(processClaims); }); }); </script> Copy CodeReset CodeContent Locked