From a2fcbefd74e59fba232e0be2d01ef720804238d1 Mon Sep 17 00:00:00 2001
From: QuickMythril <quickmythril@protonmail.com>
Date: Mon, 13 Jan 2025 21:08:35 -0500
Subject: [PATCH] Show level & adjustment / penalty on minter cards, & show
 user vote & sort by name, newest comments, least or most votes on minter and
 admin cards.

---
 assets/js/AdminBoard.js  | 162 ++++++++++++++++++++++++++--
 assets/js/MinterBoard.js | 224 ++++++++++++++++++++++++++++++++++++---
 2 files changed, 365 insertions(+), 21 deletions(-)

diff --git a/assets/js/AdminBoard.js b/assets/js/AdminBoard.js
index 4dc000d..df0b6e8 100644
--- a/assets/js/AdminBoard.js
+++ b/assets/js/AdminBoard.js
@@ -34,6 +34,13 @@ const loadAdminBoardPage = async () => {
     <p> More functionality will be added over time. One of the first features will be the ability to output the existing card data 'decisions', to a json formatted list in order to allow crowetic to run his script easily until the final Mintership proposal changes are completed, and the MINTER group is transferred to 'null'.</p>
     <button id="publish-card-button" class="publish-card-button" style="margin: 20px; padding: 10px;">Publish Encrypted Card</button>
     <button id="refresh-cards-button" class="refresh-cards-button" style="padding: 10px;">Refresh Cards</button>
+    <select id="sort-select" style="margin-left: 10px; padding: 5px;">
+      <option value="newest" selected>Sort by Date</option>
+      <option value="name">Sort by Name</option>
+      <option value="recent-comments">Newest Comments</option>
+      <option value="least-votes">Least Votes</option>
+      <option value="most-votes">Most Votes</option>
+    </select>
     <div id="encrypted-cards-container" class="cards-container" style="margin-top: 20px;"></div>
     <div id="publish-card-view" class="publish-card-view" style="display: none; text-align: left; padding: 20px;">
         <form id="publish-card-form">
@@ -104,6 +111,10 @@ const loadAdminBoardPage = async () => {
     // Pass that boolean to publishEncryptedCard
     await publishEncryptedCard(isTopicChecked)
   })
+  document.getElementById("sort-select").addEventListener("change", async () => {
+    // Re-load the cards whenever user chooses a new sort option.
+    await fetchAllEncryptedCards()
+  })
   createScrollToTopButton()
   // await fetchAndValidateAllAdminCards()
   await updateOrSaveAdminGroupsDataLocally()
@@ -308,12 +319,125 @@ const fetchAllEncryptedCards = async (isRefresh = false) => {
     // Convert the map into an array of final cards
     const finalCards = Array.from(mostRecentCardsMap.values());
 
-    // Sort cards by timestamp (most recent first)
-    finalCards.sort((a, b) => {
-      const timestampA = a.card.updated || a.card.created || 0
-      const timestampB = b.card.updated || b.card.created || 0
-      return timestampB - timestampA;
-    })
+    let selectedSort = 'newest'
+    const sortSelect = document.getElementById('sort-select')
+    if (sortSelect) {
+      selectedSort = sortSelect.value
+    }
+
+    if (selectedSort === 'name') {
+	      // Sort alphabetically by the minter's name
+      finalCards.sort((a, b) => {
+        const nameA = a.decryptedCardData.minterName?.toLowerCase() || ''
+        const nameB = b.decryptedCardData.minterName?.toLowerCase() || ''
+        return nameA.localeCompare(nameB)
+      })
+    } else if (selectedSort === 'recent-comments') {
+	      // We need each card's newest comment timestamp for sorting
+      for (let card of finalCards) {
+        card.newestCommentTimestamp = await getNewestAdminCommentTimestamp(card.card.identifier)
+      }
+      // Then sort descending by newest comment
+      finalCards.sort((a, b) =>
+        (b.newestCommentTimestamp || 0) - (a.newestCommentTimestamp || 0)
+      )
+    } else if (selectedSort === 'least-votes') {
+      // TODO: Add the logic to sort by LEAST total ADMIN votes, then totalYesWeight
+      const minterGroupMembers = await fetchMinterGroupMembers()
+      const minterAdmins = await fetchMinterGroupAdmins()
+      for (const finalCard of finalCards) {
+        try {
+          const pollName = finalCard.decryptedCardData.poll
+          // If card or poll is missing, default to zero
+          if (!pollName) {
+            finalCard._adminTotalVotes = 0
+            finalCard._yesWeight = 0
+            continue
+          }
+          const pollResults = await fetchPollResults(pollName)
+          if (!pollResults || pollResults.error) {
+            finalCard._adminTotalVotes = 0
+            finalCard._yesWeight = 0
+            continue
+          }
+          // Pull only the adminYes/adminNo/totalYesWeight from processPollData
+          const {
+            adminYes,
+            adminNo,
+            totalYesWeight
+          } = await processPollData(
+            pollResults,
+            minterGroupMembers,
+            minterAdmins,
+            finalCard.decryptedCardData.creator,
+            finalCard.card.identifier
+          )
+          finalCard._adminTotalVotes = adminYes + adminNo
+          finalCard._yesWeight = totalYesWeight
+        } catch (error) {
+          console.warn(`Error fetching or processing poll for card ${finalCard.card.identifier}:`, error)
+          finalCard._adminTotalVotes = 0
+          finalCard._yesWeight = 0
+        }
+      }
+      // Sort ascending by (adminYes + adminNo), then descending by totalYesWeight
+      finalCards.sort((a, b) => {
+        const diffAdminTotal = a._adminTotalVotes - b._adminTotalVotes
+        if (diffAdminTotal !== 0) return diffAdminTotal
+        // If there's a tie, show the card with higher yesWeight first
+        return b._yesWeight - a._yesWeight
+      })
+    } else if (selectedSort === 'most-votes') {
+      // TODO: Add the logic to sort by MOST total ADMIN votes, then totalYesWeight
+      const minterGroupMembers = await fetchMinterGroupMembers()
+      const minterAdmins = await fetchMinterGroupAdmins()
+      for (const finalCard of finalCards) {
+        try {
+          const pollName = finalCard.decryptedCardData.poll
+          if (!pollName) {
+            finalCard._adminTotalVotes = 0
+            finalCard._yesWeight = 0
+            continue
+          }
+          const pollResults = await fetchPollResults(pollName)
+          if (!pollResults || pollResults.error) {
+            finalCard._adminTotalVotes = 0
+            finalCard._yesWeight = 0
+            continue
+          }
+          const {
+            adminYes,
+            adminNo,
+            totalYesWeight
+          } = await processPollData(
+            pollResults,
+            minterGroupMembers,
+            minterAdmins,
+            finalCard.decryptedCardData.creator,
+            finalCard.card.identifier
+          )
+          finalCard._adminTotalVotes = adminYes + adminNo
+          finalCard._yesWeight = totalYesWeight
+        } catch (error) {
+          console.warn(`Error fetching or processing poll for card ${finalCard.card.identifier}:`, error)
+          finalCard._adminTotalVotes = 0
+          finalCard._yesWeight = 0
+        }
+      }
+      // Sort descending by (adminYes + adminNo), then descending by totalYesWeight
+      finalCards.sort((a, b) => {
+        const diffAdminTotal = b._adminTotalVotes - a._adminTotalVotes
+        if (diffAdminTotal !== 0) return diffAdminTotal
+        return b._yesWeight - a._yesWeight
+      })
+    } else {
+      // Sort cards by timestamp (most recent first)
+      finalCards.sort((a, b) => {
+        const timestampA = a.card.updated || a.card.created || 0
+        const timestampB = b.card.updated || b.card.created || 0
+        return timestampB - timestampA;
+      })
+    }
 
     encryptedCardsContainer.innerHTML = ""
 
@@ -553,7 +677,7 @@ const publishEncryptedCard = async (isTopicModePassed = false) => {
       publicKeys: verifiedAdminPublicKeys
     })
 
-    // Possibly create a poll if it’s a brand new card
+    // Possibly create a poll if it's a brand new card
     if (!isUpdateCard) {
       await qortalRequest({
         action: "CREATE_POLL",
@@ -958,6 +1082,23 @@ const handleBanMinter = async (minterName) => {
   }
 }
 
+const getNewestAdminCommentTimestamp = async (cardIdentifier) => {
+  try {
+    const comments = await fetchEncryptedComments(cardIdentifier)
+    if (!comments || comments.length === 0) {
+      return 0
+    }
+    const newestTimestamp = comments.reduce((acc, comment) => {
+      const cTime = comment.updated || comment.created || 0
+      return cTime > acc ? cTime : acc
+    }, 0)
+    return newestTimestamp
+  } catch (err) {
+    console.error('Failed to get newest comment timestamp:', err)
+    return 0
+  }
+}
+
 // Create the overall Minter Card HTML -----------------------------------------------
 const createEncryptedCardHTML = async (cardData, pollResults, cardIdentifier, commentCount) => {
   const { minterName, header, content, links, creator, timestamp, poll, topicMode } = cardData
@@ -997,7 +1138,7 @@ const createEncryptedCardHTML = async (cardData, pollResults, cardIdentifier, co
 
   const minterGroupMembers = await fetchMinterGroupMembers()
   const minterAdmins = await fetchMinterGroupAdmins()
-  const { adminYes = 0, adminNo = 0, minterYes = 0, minterNo = 0, totalYes = 0, totalNo = 0, totalYesWeight = 0, totalNoWeight = 0, detailsHtml } = await processPollData(pollResults, minterGroupMembers, minterAdmins, creator, cardIdentifier)
+  const { adminYes = 0, adminNo = 0, minterYes = 0, minterNo = 0, totalYes = 0, totalNo = 0, totalYesWeight = 0, totalNoWeight = 0, detailsHtml, userVote = null } = await processPollData(pollResults, minterGroupMembers, minterAdmins, creator, cardIdentifier)
 
   createModal('links')
   createModal('poll-details')
@@ -1012,6 +1153,11 @@ const createEncryptedCardHTML = async (cardData, pollResults, cardIdentifier, co
     console.log(`name is validated, utilizing for removal features...${verifiedName}`)
     const removeActionsHtml = await checkAndDisplayRemoveActions(adminYes, verifiedName, cardIdentifier)
     showRemoveHtml = removeActionsHtml
+    if (userVote === 0) {
+      cardColorCode = "rgba(0, 192, 0, 0.3)"; // or any green you want
+    } else if (userVote === 1) {
+      cardColorCode = "rgba(192, 0, 0, 0.3)"; // or any red you want
+    }
     
     if (banTransactions.some((banTx) => banTx.groupId === 694 && banTx.offender === accountAddress)){
       console.warn(`account was already banned, displaying as such...`)
diff --git a/assets/js/MinterBoard.js b/assets/js/MinterBoard.js
index 78285b6..0599c09 100644
--- a/assets/js/MinterBoard.js
+++ b/assets/js/MinterBoard.js
@@ -29,6 +29,13 @@ const loadMinterBoardPage = async () => {
       <p style="font-size: 1.25em;"> Publish a Minter Card with Information, and obtain and view the support of the community. Welcome to the Minter Board!</p>
       <button id="publish-card-button" class="publish-card-button" style="margin: 20px; padding: 10px; background-color: ${publishButtonColor}">Publish Minter Card</button>
       <button id="refresh-cards-button" class="refresh-cards-button" style="padding: 10px;">Refresh Cards</button>
+      <select id="sort-select" style="margin-left: 10px; padding: 5px;">
+        <option value="newest" selected>Sort by Date</option>
+        <option value="name">Sort by Name</option>
+        <option value="recent-comments">Newest Comments</option>
+        <option value="least-votes">Least Votes</option>
+        <option value="most-votes">Most Votes</option>
+      </select>
       <div id="cards-container" class="cards-container" style="margin-top: 20px;"></div>
       <div id="publish-card-view" class="publish-card-view" style="display: none; text-align: left; padding: 20px;">
         <form id="publish-card-form">
@@ -118,6 +125,10 @@ const loadMinterBoardPage = async () => {
     event.preventDefault()
     await publishCard()
   })
+  document.getElementById("sort-select").addEventListener("change", async () => {
+    // Re-load the cards whenever user chooses a new sort option.
+    await loadCards()
+  })
   await featureTriggerCheck()
   await loadCards()
 }
@@ -235,6 +246,159 @@ const loadCards = async () => {
 
     const finalCards = await processMinterCards(validCards)
 
+    // finalCards is already sorted by newest (timestamp) by processMinterCards. 
+    // We'll re-sort if "Name" or "Recent Comments" is selected.
+
+    // Grab the selected sort from the dropdown (if it exists).
+    let selectedSort = 'newest'
+    const sortSelect = document.getElementById('sort-select')
+    if (sortSelect) {
+      selectedSort = sortSelect.value
+    }
+
+    if (selectedSort === 'name') {
+	      // Sort alphabetically by the creator’s name
+      finalCards.sort((a, b) => {
+        const nameA = a.name?.toLowerCase() || ''
+        const nameB = b.name?.toLowerCase() || ''
+        return nameA.localeCompare(nameB)
+      })
+    } else if (selectedSort === 'recent-comments') {
+	      // We need each card’s newest comment timestamp for sorting
+      for (let card of finalCards) {
+        card.newestCommentTimestamp = await getNewestCommentTimestamp(card.identifier)
+      }
+      // Then sort descending by newest comment
+      finalCards.sort((a, b) =>
+        (b.newestCommentTimestamp || 0) - (a.newestCommentTimestamp || 0)
+      )
+    } else if (selectedSort === 'least-votes') {
+      // For each card, fetch its poll data so we know how many admin + minter votes it has.
+      // Store those values on the card object so we can sort on them.
+      // Sort ascending by admin votes; if there's a tie, sort ascending by minter votes.
+      const minterGroupMembers = await fetchMinterGroupMembers()
+      const minterAdmins = await fetchMinterGroupAdmins()
+      // For each card, fetch the poll data & store counts on the card object.
+      for (const card of finalCards) {
+        try {
+          // We must fetch the card data from QDN to get the `poll` name
+          const cardDataResponse = await qortalRequest({
+            action: "FETCH_QDN_RESOURCE",
+            name: card.name,
+            service: "BLOG_POST",
+            identifier: card.identifier,
+          })
+          // If the card or poll is missing, skip
+          if (!cardDataResponse || !cardDataResponse.poll) {
+            card._adminVotes = 0
+            card._adminYes = 0
+            card._minterVotes = 0
+            card._minterYes = 0
+            continue
+          }
+          const pollResults = await fetchPollResults(cardDataResponse.poll)
+          const {
+            adminYes,
+            adminNo,
+            minterYes,
+            minterNo
+          } = await processPollData(
+            pollResults,
+            minterGroupMembers,
+            minterAdmins,
+            cardDataResponse.creator,
+            card.identifier
+          )
+          // Store the totals so we can sort on them
+          card._adminVotes = adminYes + adminNo
+          card._adminYes = adminYes
+          card._minterVotes = minterYes + minterNo
+          card._minterYes = minterYes
+        } catch (error) {
+          console.warn(`Error fetching or processing poll for card ${card.identifier}:`, error)
+          // If something fails, default to zero so it sorts "lowest"
+          card._adminVotes = 0
+          card._adminYes = 0
+          card._minterVotes = 0
+          card._minterYes = 0
+        }
+      }
+      // Now that each card has _adminVotes + _minterVotes, do an ascending sort:
+      finalCards.sort((a, b) => {
+        // admin votes ascending
+        const diffAdminTotal = a._adminVotes - b._adminVotes
+        if (diffAdminTotal !== 0) return diffAdminTotal
+        // admin YES ascending
+        const diffAdminYes = a._adminYes - b._adminYes
+        if (diffAdminYes !== 0) return diffAdminYes
+        // minter votes ascending
+        const diffMinterTotal = a._minterVotes - b._minterVotes
+        if (diffMinterTotal !== 0) return diffMinterTotal
+        // minter YES ascending
+        return a._minterYes - b._minterYes
+      })
+    } else if (selectedSort === 'most-votes') {
+      // Fetch poll data & store admin + minter votes as before.
+      // Sort descending by admin votes; if there's a tie, sort descending by minter votes.
+      const minterGroupMembers = await fetchMinterGroupMembers()
+      const minterAdmins = await fetchMinterGroupAdmins()
+      for (const card of finalCards) {
+        try {
+          const cardDataResponse = await qortalRequest({
+            action: "FETCH_QDN_RESOURCE",
+            name: card.name,
+            service: "BLOG_POST",
+            identifier: card.identifier,
+          })
+          if (!cardDataResponse || !cardDataResponse.poll) {
+            card._adminVotes = 0
+            card._adminYes = 0
+            card._minterVotes = 0
+            card._minterYes = 0
+            continue
+          }
+          const pollResults = await fetchPollResults(cardDataResponse.poll)
+          const {
+            adminYes,
+            adminNo,
+            minterYes,
+            minterNo
+          } = await processPollData(
+            pollResults,
+            minterGroupMembers,
+            minterAdmins,
+            cardDataResponse.creator,
+            card.identifier
+          )
+          card._adminVotes = adminYes + adminNo
+          card._adminYes = adminYes
+          card._minterVotes = minterYes + minterNo
+          card._minterYes = minterYes
+        } catch (error) {
+          console.warn(`Error fetching or processing poll for card ${card.identifier}:`, error)
+          card._adminVotes = 0
+          card._adminYes = 0
+          card._minterVotes = 0
+          card._minterYes = 0
+        }
+      }
+      // Sort descending by admin votes, then minter votes
+      finalCards.sort((a, b) => {
+        // admin votes descending
+        const diffAdminTotal = b._adminVotes - a._adminVotes
+        if (diffAdminTotal !== 0) return diffAdminTotal
+        // admin YES descending
+        const diffAdminYes = b._adminYes - a._adminYes
+        if (diffAdminYes !== 0) return diffAdminYes
+        // minter votes descending
+        const diffMinterTotal = b._minterVotes - a._minterVotes
+        if (diffMinterTotal !== 0) return diffMinterTotal
+        // minter YES descending
+        return b._minterYes - a._minterYes
+      })
+    }
+    // else 'newest' => do nothing, finalCards stays in newest-first order
+
     // Display skeleton cards immediately
     cardsContainer.innerHTML = ""
     finalCards.forEach(card => {
@@ -264,10 +428,12 @@ const loadCards = async () => {
           return
         }
 
-        const pollPublisherPublicKey = await getPollPublisherPublicKey(cardDataResponse.poll)
-        const cardPublisherPublicKey = await getPublicKeyByName(card.name)
+        // Getting the poll owner address uses the same API call as public key, so takes the same time, but address will be needed later.
+        const pollPublisherAddress = await getPollOwnerAddress(cardDataResponse.poll)
+        // Getting the card publisher address to compare instead should cause faster loading, since getting the public key by name first gets the address then converts it
+        const cardPublisherAddress = await fetchOwnerAddressFromName(card.name)
 
-        if (pollPublisherPublicKey != cardPublisherPublicKey) {
+        if (pollPublisherAddress != cardPublisherAddress) {
           console.warn(`not displaying card, QuickMythril pollHijack attack found! Discarding card with identifier: ${card.identifier}`)
           removeSkeleton(card.identifier)
           return
@@ -277,7 +443,7 @@ const loadCards = async () => {
         const bgColor = generateDarkPastelBackgroundBy(card.name)
         const commentCount = await countComments(card.identifier)
         const cardUpdatedTime = card.updated || null
-        const finalCardHTML = await createCardHTML(cardDataResponse, pollResults, card.identifier, commentCount, cardUpdatedTime, bgColor)
+        const finalCardHTML = await createCardHTML(cardDataResponse, pollResults, card.identifier, commentCount, cardUpdatedTime, bgColor, cardPublisherAddress)
         
         replaceSkeleton(card.identifier, finalCardHTML)
       } catch (error) {
@@ -508,7 +674,8 @@ const processPollData= async (pollData, minterGroupMembers, minterAdmins, creato
       totalNo: 0,
       totalYesWeight: 0,
       totalNoWeight: 0,
-      detailsHtml: `<p>Poll data is invalid or missing.</p>`
+      detailsHtml: `<p>Poll data is invalid or missing.</p>`,
+      userVote: null
     }
   }
 
@@ -527,6 +694,7 @@ const processPollData= async (pollData, minterGroupMembers, minterAdmins, creato
   let adminYes = 0, adminNo = 0
   let minterYes = 0, minterNo = 0
   let yesWeight = 0, noWeight = 0
+  let userVote = null
 
   for (const w of pollData.voteWeights) {
     if (w.optionName.toLowerCase() === 'yes') {
@@ -541,6 +709,10 @@ const processPollData= async (pollData, minterGroupMembers, minterAdmins, creato
     const voterPublicKey = vote.voterPublicKey
     const voterAddress = await getAddressFromPublicKey(voterPublicKey)
 
+    if (voterAddress === userState.accountAddress) {
+      userVote = optionIndex
+    }
+
     if (optionIndex === 0) {
       if (adminAddresses.includes(voterAddress)) {
         adminYes++
@@ -635,7 +807,8 @@ const processPollData= async (pollData, minterGroupMembers, minterAdmins, creato
     totalNo,
     totalYesWeight: totalMinterAndAdminYesWeight,
     totalNoWeight: totalMinterAndAdminNoWeight,
-    detailsHtml
+    detailsHtml,
+    userVote
   }
 }
 
@@ -1337,9 +1510,28 @@ const getMinterAvatar = async (minterName) => {
   }
 }
 
+const getNewestCommentTimestamp = async (cardIdentifier) => {
+  try {
+    // fetchCommentsForCard returns resources each with at least 'created' or 'updated'
+    const comments = await fetchCommentsForCard(cardIdentifier)
+    if (!comments || comments.length === 0) {
+	      // No comments => fallback to 0 (or card’s own date, if you like)
+      return 0
+    }
+    // The newest can be determined by comparing 'updated' or 'created'
+    const newestTimestamp = comments.reduce((acc, c) => {
+      const cTime = c.updated || c.created || 0
+      return (cTime > acc) ? cTime : acc
+    }, 0)
+    return newestTimestamp
+  } catch (err) {
+    console.error('Failed to get newest comment timestamp:', err)
+    return 0
+  }
+}
 
 // Create the overall Minter Card HTML -----------------------------------------------
-const createCardHTML = async (cardData, pollResults, cardIdentifier, commentCount, cardUpdatedTime, bgColor) => {
+const createCardHTML = async (cardData, pollResults, cardIdentifier, commentCount, cardUpdatedTime, bgColor, address) => {
   const { header, content, links, creator, timestamp, poll } = cardData
   const formattedDate = cardUpdatedTime ? new Date(cardUpdatedTime).toLocaleString() : new Date(timestamp).toLocaleString()
   const avatarHtml = await getMinterAvatar(creator)
@@ -1351,7 +1543,7 @@ const createCardHTML = async (cardData, pollResults, cardIdentifier, commentCoun
 
   const minterGroupMembers = await fetchMinterGroupMembers()
   const minterAdmins = await fetchMinterGroupAdmins()
-  const { adminYes = 0, adminNo = 0, minterYes = 0, minterNo = 0, totalYes = 0, totalNo = 0, totalYesWeight = 0, totalNoWeight = 0, detailsHtml } = await processPollData(pollResults, minterGroupMembers, minterAdmins, creator, cardIdentifier)
+  const { adminYes = 0, adminNo = 0, minterYes = 0, minterNo = 0, totalYes = 0, totalNo = 0, totalYesWeight = 0, totalNoWeight = 0, detailsHtml, userVote } = await processPollData(pollResults, minterGroupMembers, minterAdmins, creator, cardIdentifier)
   createModal('links')
   createModal('poll-details')
 
@@ -1360,12 +1552,18 @@ const createCardHTML = async (cardData, pollResults, cardIdentifier, commentCoun
 
   let finalBgColor = bgColor
   let invitedText = "" // for "INVITED" label if found
+  const addressInfo = await getAddressInfo(address)
+  const penaltyText = addressInfo.blocksMintedPenalty == 0 ? '' : '<p>(has Blocks Penalty)<p>'
+  const adjustmentText = addressInfo.blocksMintedAdjustment == 0 ? '' : '<p>(has Blocks Adjustment)<p>'
 
   try {
-    const minterAddress = await fetchOwnerAddressFromName(creator)
-    const invites = await fetchGroupInvitesByAddress(minterAddress)
+    const invites = await fetchGroupInvitesByAddress(address)
     const hasMinterInvite = invites.some((invite) => invite.groupId === 694)
-    if (hasMinterInvite) {
+    if (userVote === 0) {
+      finalBgColor = "rgba(0, 192, 0, 0.3)"; // or any green you want
+    } else if (userVote === 1) {
+      finalBgColor = "rgba(192, 0, 0, 0.3)"; // or any red you want
+    } else if (hasMinterInvite) {
       // If so, override background color & add an "INVITED" label
       finalBgColor = "black"; 
       invitedText = `<h4 style="color: gold; margin-bottom: 0.5em;">INVITED</h4>`
@@ -1395,9 +1593,9 @@ const createCardHTML = async (cardData, pollResults, cardIdentifier, commentCoun
   <div class="minter-card" style="background-color: ${finalBgColor}">
     <div class="minter-card-header">
       ${avatarHtml}
-      <h3>${creator}</h3>
+      <h3>${creator} - Level ${addressInfo.level}</h3>
       <p>${header}</p>
-      ${invitedText}
+      ${penaltyText}${adjustmentText}${invitedText}
     </div>
     <div class="support-header"><h5>USER'S POST</h5></div>
     <div class="info">