From 14ba7fc646fe3c8b2600c1e00e07eae067141116 Mon Sep 17 00:00:00 2001
From: Cohee <18619528+Cohee1207@users.noreply.github.com>
Date: Mon, 13 May 2024 00:05:32 +0300
Subject: [PATCH] Split downloadables list into sections

---
 .../scripts/extensions/assets/character.html  |  2 +-
 public/scripts/extensions/assets/index.js     | 13 +++++++++----
 public/scripts/extensions/assets/market.html  | 19 +++++++++++++++++++
 public/scripts/extensions/assets/window.html  |  4 ++++
 4 files changed, 33 insertions(+), 5 deletions(-)
 create mode 100644 public/scripts/extensions/assets/market.html

diff --git a/public/scripts/extensions/assets/character.html b/public/scripts/extensions/assets/character.html
index 152aeb9c0..e59889161 100644
--- a/public/scripts/extensions/assets/character.html
+++ b/public/scripts/extensions/assets/character.html
@@ -1,7 +1,7 @@
 <div class="characterAsset">
     <div class="characterAssetName">{{name}}</div>
     <img class="characterAssetImage" alt="{{name}}" src="{{url}}" />
-    <div class="characterAssetDescription">{{description}}</div>
+    <div class="characterAssetDescription" title="{{description}}">{{description}}</div>
     <div class="characterAssetButtons flex-container">
         <div class="characterAssetDownloadButton right_menu_button fa-fw fa-solid fa-download" title="Download"></div>
         <div class="characterAssetCheckMark right_menu_button fa-fw fa-solid fa-check" title="Installed"></div>
diff --git a/public/scripts/extensions/assets/index.js b/public/scripts/extensions/assets/index.js
index 97377a0bd..50bad2479 100644
--- a/public/scripts/extensions/assets/index.js
+++ b/public/scripts/extensions/assets/index.js
@@ -340,10 +340,10 @@ async function openCharacterBrowser(forceDefault) {
         return;
     }
 
-    const listElement = $(document.createElement('div'));
-    listElement.addClass('characterAssetList');
+    const template = $(await renderExtensionTemplateAsync(MODULE_NAME, 'market', {}));
 
-    for (const character of characters) {
+    for (const character of characters.sort((a, b) => a.name.localeCompare(b.name))) {
+        const listElement = template.find(character.highlight ? '.contestWinnersList' : '.featuredCharactersList');
         const characterElement = $(await renderExtensionTemplateAsync(MODULE_NAME, 'character', character));
         const downloadButton  = characterElement.find('.characterAssetDownloadButton');
         const checkMark = characterElement.find('.characterAssetCheckMark');
@@ -361,7 +361,7 @@ async function openCharacterBrowser(forceDefault) {
         listElement.append(characterElement);
     }
 
-    callGenericPopup(listElement, POPUP_TYPE.TEXT, '', { okButton: 'Close', wide: true, large: true, allowVerticalScrolling: true, allowHorizontalScrolling: false });
+    callGenericPopup(template, POPUP_TYPE.TEXT, '', { okButton: 'Close', wide: true, large: true, allowVerticalScrolling: true, allowHorizontalScrolling: false });
 }
 
 //#############################//
@@ -397,6 +397,11 @@ jQuery(async () => {
     const assetsJsonUrl = windowHtml.find('#assets-json-url-field');
     assetsJsonUrl.val(ASSETS_JSON_URL);
 
+    const charactersButton = windowHtml.find('#assets-characters-button');
+    charactersButton.on('click', async function () {
+        openCharacterBrowser(false);
+    });
+
     const connectButton = windowHtml.find('#assets-connect-button');
     connectButton.on('click', async function () {
         const url = String(assetsJsonUrl.val());
diff --git a/public/scripts/extensions/assets/market.html b/public/scripts/extensions/assets/market.html
new file mode 100644
index 000000000..26422d758
--- /dev/null
+++ b/public/scripts/extensions/assets/market.html
@@ -0,0 +1,19 @@
+<div class="flex-container flexFlowColumn padding5">
+    <div class="contestWinners flex-container flexFlowColumn">
+        <h3 class="flex-container alignItemsBaseline justifyCenter" title="These characters are the winners of character design contests and have outstandable quality.">
+            <span data-i18n="Contest Winners">Contest Winners</span>
+            <i class="fa-solid fa-star"></i>
+        </h3>
+        <div class="contestWinnersList characterAssetList">
+        </div>
+    </div>
+    <hr>
+    <div class="featuredCharacters flex-container flexFlowColumn">
+        <h3 class="flex-container alignItemsBaseline justifyCenter" title="These characters are the finalists of character design contests and have remarkable quality.">
+            <span data-i18n="Featured Characters">Featured Characters</span>
+            <i class="fa-solid fa-thumbs-up"></i>
+        </h3>
+        <div class="featuredCharactersList characterAssetList">
+        </div>
+    </div>
+</div>
diff --git a/public/scripts/extensions/assets/window.html b/public/scripts/extensions/assets/window.html
index 2f1f9f280..cc01add17 100644
--- a/public/scripts/extensions/assets/window.html
+++ b/public/scripts/extensions/assets/window.html
@@ -14,6 +14,10 @@
                 <select id="assets_type_select" class="text_pole flex1">
                 </select>
                 <input id="assets_search" class="text_pole flex1" placeholder="Search" type="search">
+                <div id="assets-characters-button" class="menu_button menu_button_icon">
+                    <i class="fa-solid fa-image-portrait"></i>
+                    Characters
+                </div>
             </div>
             <div class="inline-drawer-content" id="assets_menu">
             </div>