From bbe08ece84143f4a163cfdae37938d4482e8ea14 Mon Sep 17 00:00:00 2001
From: BlipRanger <1860540+BlipRanger@users.noreply.github.com>
Date: Thu, 6 Jul 2023 00:42:04 -0400
Subject: [PATCH] Display total and dynamic character count

---
 public/index.html      |  4 ++++
 public/script.js       | 12 ++++++++++++
 public/scripts/tags.js |  4 ++++
 public/style.css       |  9 ++++++++-
 4 files changed, 28 insertions(+), 1 deletion(-)

diff --git a/public/index.html b/public/index.html
index 6a1d9f37b..736b9f158 100644
--- a/public/index.html
+++ b/public/index.html
@@ -2803,7 +2803,11 @@
                         <div class="rm_tag_controls">
                             <div class="tags rm_tag_filter"></div>
                         </div>
+                        <!-- a div containing a dynamically updated count of characters currently displayed -->
+                        <div id="rm_character_count" ></div>
+                        <hr>
                     </div>
+
                     <div id="rm_print_characters_block"></div>
                 </div>
 
diff --git a/public/script.js b/public/script.js
index ec4e48755..e13890bdc 100644
--- a/public/script.js
+++ b/public/script.js
@@ -942,6 +942,7 @@ async function getCharacters() {
         }
         await getGroups();
         await printCharacters();
+        updateCharacterCount('#rm_print_characters_block > div');
     }
 }
 
@@ -6458,6 +6459,15 @@ const swipe_right = () => {
     }
 }
 
+export function updateCharacterCount(characterSelector) {
+    const visibleCharacters = $(characterSelector).not('.hiddenBySearch').not('.hiddenByTag').not('.hiddenByGroup').not('.hiddenByGroupMember').not('.hiddenByFav');
+    const visibleCharacterCount = visibleCharacters.length;
+    const totalCharacterCount = $(characterSelector).length;
+
+    $('#rm_character_count').text(`(${visibleCharacters.length} / ${totalCharacterCount}) Characters`);
+    console.log('visibleCharacters.length: ' + visibleCharacters.length);
+}
+
 function updateVisibleDivs(containerSelector, resizecontainer) {
     var $container = $(containerSelector);
     var $children = $container.children();
@@ -6712,6 +6722,8 @@ $(document).ready(function () {
             });
             updateVisibleDivs('#rm_print_characters_block', true);
         }
+        updateCharacterCount(selector);
+
 
     });
 
diff --git a/public/scripts/tags.js b/public/scripts/tags.js
index c13bceb76..9492da4d1 100644
--- a/public/scripts/tags.js
+++ b/public/scripts/tags.js
@@ -6,6 +6,7 @@ import {
     menu_type,
     updateVisibleDivs,
     getCharacters,
+    updateCharacterCount,
 } from "../script.js";
 
 import { selected_group } from "./group-chats.js";
@@ -82,6 +83,7 @@ function applyFavFilter(characterSelector) {
         }
 
     });
+    updateCharacterCount(characterSelector);
     updateVisibleDivs('#rm_print_characters_block', true);
 }
 
@@ -94,6 +96,7 @@ function filterByGroups(characterSelector) {
     $(characterSelector).each((_, element) => {
         $(element).toggleClass('hiddenByGroup', displayGroupsOnly && !$(element).hasClass('group_select'));
     });
+    updateCharacterCount(characterSelector);
     updateVisibleDivs('#rm_print_characters_block', true);
 }
 
@@ -355,6 +358,7 @@ function onTagFilterClick(listElement, characterSelector) {
     const tagIds = [...($(listElement).find(".tag.selected:not(.actionable)").map((_, el) => $(el).attr("id")))];
     const excludedTagIds = [...($(listElement).find(".tag.excluded:not(.actionable)").map((_, el) => $(el).attr("id")))];
     $(characterSelector).each((_, element) => applyFilterToElement(tagIds, excludedTagIds, element));
+    updateCharacterCount(characterSelector);
     updateVisibleDivs('#rm_print_characters_block', true);
 }
 
diff --git a/public/style.css b/public/style.css
index 0cd0e3cd8..64a7a27ec 100644
--- a/public/style.css
+++ b/public/style.css
@@ -1159,6 +1159,12 @@ input[type="file"] {
     filter: brightness(150%);
 }
 
+#rm_character_count {
+    padding: 5px;
+    font-size: 14px;
+    font-weight: bold;
+}
+
 #rm_print_characters_block {
     /* padding: 5px 0; */
     overflow-y: auto;
@@ -5086,4 +5092,5 @@ body.waifuMode .zoomed_avatar {
     background-color: var(--SmartThemeBlurTintColor);
     text-align: center;
     line-height: 14px;
-}
\ No newline at end of file
+}
+