6 favorite character hotswaps (beta quality)

public/index.html

@@ -1619,6 +1619,26 @@
                             <div class="fa-solid checked  fa-lock" alt=""></div>
                         </label>
                     </div>
+                    <div class="hotswap flex-container justifyCenter">
+                        <div id="hotswap1" class="hotswapAvatar">
+                            <img src="/img/ai4.png">
+                        </div>
+                        <div id="hotswap2" class="hotswapAvatar">
+                            <img src="/img/ai4.png">
+                        </div>
+                        <div id="hotswap3" class="hotswapAvatar">
+                            <img src="/img/ai4.png">
+                        </div>
+                        <div id="hotswap4" class="hotswapAvatar">
+                            <img src="/img/ai4.png">
+                        </div>
+                        <div id="hotswap5" class="hotswapAvatar">
+                            <img src="/img/ai4.png">
+                        </div>
+                        <div id="hotswap6" class="hotswapAvatar">
+                            <img src="/img/ai4.png">
+                        </div>
+                    </div>
                     <div id="right-nav-panel-tabs">
                         <div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters"></div>
                         <div class="right_menu_button" id="rm_button_selected_ch">

public/script.js

@@ -1,4 +1,4 @@
-import { humanizedDateTime } from "./scripts/RossAscends-mods.js";
+import { humanizedDateTime, favsToHotswap } from "./scripts/RossAscends-mods.js";
 import { encode } from "../scripts/gpt-2-3-tokenizer/mod.js";
 import { GPT3BrowserTokenizer } from "../scripts/gpt-3-tokenizer/gpt3-tokenizer.js";
 import {
@@ -735,9 +735,12 @@ function printCharacters() {
         $("#rm_print_characters_block").append(template);
     });
     $("#rm_print_characters_block").prepend(`<hr>`);
+
     printTags();
     printGroups();
     sortCharactersList();
+    favsToHotswap();
+
 }
 
 async function getCharacters() {
@@ -1356,6 +1359,8 @@ function applyFavFilter(enabled) {
     }
 }
 
+
+
 class StreamingProcessor {
     showStopButton(messageId) {
         if (messageId == -1) {
@@ -3554,6 +3559,7 @@ function updateFavButtonState(state) {
     $("#fav_checkbox").val(fav_ch_checked);
     $("#favorite_button").toggleClass('fav_on', fav_ch_checked);
     $("#favorite_button").toggleClass('fav_off', !fav_ch_checked);
+
 }
 
 function callPopup(text, type, inputValue = '') {
@@ -3818,8 +3824,11 @@ window["SillyTavern"].getContext = function () {
     };
 };
 
+
+
 $(document).ready(function () {
 
+
     //////////INPUT BAR FOCUS-KEEPING LOGIC/////////////
 
     let S_TAFocused = false;
@@ -4704,6 +4713,7 @@ $(document).ready(function () {
         updateFavButtonState(!fav_ch_checked);
         if (menu_type != "create") {
             saveCharacterDebounced();
+
         }
     });
 

public/scripts/RossAscends-mods.js

@@ -277,11 +277,51 @@ async function RA_autoloadchat() {
             console.log(CharToAutoLoad + ' ActiveChar local var - not found: ' + LoadLocal('ActiveChar'));
         }
         RestoreNavTab();
+
     } else {
         //console.log('no char list yet..');
         setTimeout(RA_autoloadchat, 100);            // if the charcter list hadn't been loaded yet, try again. 
     }
 }
+
+export async function favsToHotswap() {
+
+    const selector = ['#rm_print_characters_block .character_select', '#rm_print_characters_block .group_select'].join(',');
+    let count = 0;
+    $(selector).each(function () {
+        if ($(this).hasClass('is_fav') && count < 6) {
+            //console.log(count + 1);
+            let hotswapChId = $(this).attr('id');
+            let thisHotswapImgURL = $(this).find('.avatar img').attr('src');
+            let thisHotSwapSlot = `#hotswap${count + 1}`
+            $(thisHotSwapSlot).find('img').attr('src', thisHotswapImgURL);
+            $(thisHotSwapSlot).css('cursor', 'pointer');
+            $(thisHotSwapSlot).on('click', function () {
+                $("#rm_button_characters").click();
+                $(`#${hotswapChId}`).click();
+            });
+            count = count + 1;
+        }
+    });
+    console.log('about to check for leftover selectors...')
+    // there are 6 slots in total,
+    if (count < 6) { //if any are left over
+        let leftOverSlots = 6 - count;
+        for (let i = 1; i <= leftOverSlots; i++) {
+            let thisLeftOverSlotNumber = 6 - leftOverSlots + i;
+            //console.log(`Not fav for slot ${thisLeftOverSlotNumber}`);
+            let thisLeftOverSlot = `#hotswap${thisLeftOverSlotNumber}`;
+            $(thisLeftOverSlot).off();
+            $(thisLeftOverSlot).css('cursor', 'unset');
+            $(thisLeftOverSlot).find('img').attr('src', 'img/ai4.png'); //replace with blank ai avatar
+        }
+    } else {
+        //console.log(`count was ${count} so no need to knock off any selectors!`);
+    }
+}
+
+
+
 //only triggers when AutoLoadChat is enabled, consider adding this as an independent feature later. 
 function RestoreNavTab() {
     if ($('#rm_button_selected_ch').children("h2").text() !== '') {        //check for a change in the character edit tab name
@@ -550,6 +590,7 @@ $("document").ready(function () {
 
     // initial status check
     setTimeout(RA_checkOnlineStatus, 100);
+    //setTimeout(favsToHotswap, 500);
 
     // read the state of AutoConnect and AutoLoadChat.
     $(AutoConnectCheckbox).prop("checked", LoadLocalBool("AutoConnectEnabled"));
@@ -568,10 +609,10 @@ $("document").ready(function () {
     $(RPanelPin).on("click", function () {
         SaveLocal("NavLockOn", $(RPanelPin).prop("checked"));
         if ($(RPanelPin).prop("checked") == true) {
-            console.log('adding pin class to right nav');
+            //console.log('adding pin class to right nav');
             $(RightNavPanel).addClass('pinnedOpen');
         } else {
-            console.log('removing pin class from right nav');
+            //console.log('removing pin class from right nav');
             $(RightNavPanel).removeClass('pinnedOpen');
 
             if ($(RightNavPanel).hasClass('openDrawer') && $('.openDrawer').length > 1) {
@@ -584,10 +625,10 @@ $("document").ready(function () {
     $(LPanelPin).on("click", function () {
         SaveLocal("LNavLockOn", $(LPanelPin).prop("checked"));
         if ($(LPanelPin).prop("checked") == true) {
-            console.log('adding pin class to Left nav');
+            //console.log('adding pin class to Left nav');
             $(LeftNavPanel).addClass('pinnedOpen');
         } else {
-            console.log('removing pin class from Left nav');
+            //console.log('removing pin class from Left nav');
             $(LeftNavPanel).removeClass('pinnedOpen');
 
             if ($(LeftNavPanel).hasClass('openDrawer') && $('.openDrawer').length > 1) {

public/style.css

@@ -558,12 +558,33 @@ code {
     gap: 5px;
 }
 
+.hotswap {
+    top: -5px;
+}
+
+.hotswapAvatar,
 .avatar {
     width: 50px;
     height: 50px;
     border-style: none;
 }
 
+.mes .avatar {
+    cursor: pointer;
+
+}
+
+.hotswapAvatar {
+    opacity: 0.5;
+    transition: 250ms;
+}
+
+.hotswapAvatar:hover {
+    opacity: 1;
+    cursor: pointer;
+}
+
+.hotswapAvatar img,
 .avatar img {
     width: 50px;
     height: 50px;