From 17a5d629ea06e0275ede3c6cb64f3bcb101e0fe0 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Thu, 14 Sep 2023 15:56:01 +0300
Subject: [PATCH] Auto-set hotswap slot number based on the screen width.

---
 public/index.html                  |  2 +-
 public/script.js                   |  1 +
 public/scripts/RossAscends-mods.js | 28 +++++++++++++++++++++-------
 public/scripts/power-user.js       |  8 ++++++--
 public/style.css                   |  6 +++++-
 5 files changed, 34 insertions(+), 11 deletions(-)

diff --git a/public/index.html b/public/index.html
index 1e8bc6a39..010fb8849 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3229,7 +3229,7 @@
                         </div>
                         <div class="right_menu_button fa-solid fa-list-ul" id="rm_button_characters" title="Select/Create Characters" data-i18n="[title]Select/Create Characters"></div>
                     </div>
-                    <div name="HotSwapWrapper" class="alignitemscenter flex-container margin0auto">
+                    <div id="HotSwapWrapper" class="alignitemscenter flex-container margin0auto width100p">
                         <div class="hotswap flex-container flex1"></div>
                     </div>
 
diff --git a/public/script.js b/public/script.js
index 7fc3e6741..77a27c66e 100644
--- a/public/script.js
+++ b/public/script.js
@@ -8506,6 +8506,7 @@ jQuery(async function () {
                         jQuery(this).css('display', 'flex'); //flex needed to make charlist scroll
                     },
                     complete: async function () {
+                        favsToHotswap();
                         await delay(50);
                         $(this).closest('.drawer-content').removeClass('resizing');
                         $("#rm_print_characters_block").trigger("scroll");
diff --git a/public/scripts/RossAscends-mods.js b/public/scripts/RossAscends-mods.js
index 13cdea5cb..a9ee7ebd1 100644
--- a/public/scripts/RossAscends-mods.js
+++ b/public/scripts/RossAscends-mods.js
@@ -279,10 +279,16 @@ export async function favsToHotswap() {
     const entities = getEntitiesList({ doFilter: false });
     const container = $('#right-nav-panel .hotswap');
     const template = $('#hotswap_template .hotswapAvatar');
-    container.empty();
-    const maxCount = 6;
+    const DEFAULT_COUNT = 6;
+    const WIDTH_PER_ITEM = 60; // 50px + 5px gap + 5px padding
+    const containerWidth = container.outerWidth();
+    const maxCount = containerWidth > 0 ? Math.floor(containerWidth / WIDTH_PER_ITEM) : DEFAULT_COUNT;
     let count = 0;
 
+    const promises = [];
+    const newContainer = container.clone();
+    newContainer.empty();
+
     for (const entity of entities) {
         if (count >= maxCount) {
             break;
@@ -315,13 +321,18 @@ export async function favsToHotswap() {
         }
 
         if (isCharacter) {
-            const avatarUrl = getThumbnailUrl('avatar', entity.item.avatar);
-            $(slot).find('img').attr('src', avatarUrl);
-            $(slot).attr('title', entity.item.avatar);
+            const imgLoadPromise = new Promise((resolve) => {
+                const avatarUrl = getThumbnailUrl('avatar', entity.item.avatar);
+                $(slot).find('img').attr('src', avatarUrl).on('load', resolve);
+                $(slot).attr('title', entity.item.avatar);
+            });
+
+            // if the image doesn't load in 500ms, resolve the promise anyway
+            promises.push(Promise.race([imgLoadPromise, delay(500)]));
         }
 
         $(slot).css('cursor', 'pointer');
-        container.append(slot);
+        newContainer.append(slot);
         count++;
     }
 
@@ -329,9 +340,12 @@ export async function favsToHotswap() {
     if (count < maxCount) { //if any are left over
         let leftOverSlots = maxCount - count;
         for (let i = 1; i <= leftOverSlots; i++) {
-            container.append(template.clone());
+            newContainer.append(template.clone());
         }
     }
+
+    await Promise.allSettled(promises);
+    container.replaceWith(newContainer);
 }
 
 //changes input bar and send button display depending on connection status
diff --git a/public/scripts/power-user.js b/public/scripts/power-user.js
index 946e97b34..320ab92b8 100644
--- a/public/scripts/power-user.js
+++ b/public/scripts/power-user.js
@@ -16,7 +16,7 @@ import {
     setEditedMessageId,
     renderTemplate,
 } from "../script.js";
-import { isMobile, initMovingUI } from "./RossAscends-mods.js";
+import { isMobile, initMovingUI, favsToHotswap } from "./RossAscends-mods.js";
 import {
     groups,
     resetSelectedGroup,
@@ -30,7 +30,7 @@ import {
 import { registerSlashCommand } from "./slash-commands.js";
 import { tokenizers } from "./tokenizers.js";
 
-import { countOccurrences, delay, isOdd, resetScrollHeight, sortMoments, timestampToMoment } from "./utils.js";
+import { countOccurrences, debounce, delay, isOdd, resetScrollHeight, sortMoments, timestampToMoment } from "./utils.js";
 
 export {
     loadPowerUserSettings,
@@ -242,6 +242,8 @@ const storage_keys = {
 let browser_has_focus = true;
 const debug_functions = [];
 
+const setHotswapsDebounced = debounce(favsToHotswap, 500);
+
 export function switchSimpleMode() {
     $('[data-newbie-hidden]').each(function () {
         $(this).toggleClass('displayNone', power_user.ui_mode === ui_mode.SIMPLE);
@@ -1740,6 +1742,7 @@ $(document).ready(() => {
             resetMovablePanels('resize');
         }
         // Adjust layout and styling here
+        setHotswapsDebounced();
     });
 
     // Settings that go to settings.json
@@ -1864,6 +1867,7 @@ $(document).ready(() => {
         power_user.chat_width = Number(e.target.value);
         localStorage.setItem(storage_keys.chat_width, power_user.chat_width);
         applyChatWidth();
+        setHotswapsDebounced();
     });
 
     $(`input[name="font_scale"]`).on('input', async function (e) {
diff --git a/public/style.css b/public/style.css
index 71b0ef5a7..342b13a61 100644
--- a/public/style.css
+++ b/public/style.css
@@ -789,6 +789,10 @@ hr {
     cursor: pointer;
 }
 
+#HotSwapWrapper .hotswap {
+    justify-content: space-evenly;
+}
+
 .hotswapAvatar,
 .hotswapAvatar .avatar {
     width: 50px !important;
@@ -3627,4 +3631,4 @@ a {
         height: 100vh;
         z-index: 9999;
     }
-}
\ No newline at end of file
+}