Add multiple icon support

src/lib/SideBars/CharConfig.svelte

@@ -5,7 +5,7 @@
     import { ShowRealmFrameStore, selectedCharID } from "../../ts/stores";
     import { PlusIcon, SmileIcon, TrashIcon, UserIcon, ActivityIcon, BookIcon, User, CurlyBraces, Volume2Icon } from 'lucide-svelte'
     import Check from "../UI/GUI/CheckInput.svelte";
-    import { addCharEmotion, addingEmotion, getCharImage, rmCharEmotion, selectCharImg, makeGroupImage, removeChar } from "../../ts/characters";
+    import { addCharEmotion, addingEmotion, getCharImage, rmCharEmotion, selectCharImg, makeGroupImage, removeChar, changeCharImage } from "../../ts/characters";
     import LoreBook from "./LoreBook/LoreBookSetting.svelte";
     import { alertConfirm, alertNormal, alertSelectChar, alertTOS, showHypaV2Alert } from "../../ts/alert";
     import BarIcon from "./BarIcon.svelte";
@@ -292,17 +292,43 @@
 {:else if subMenu === 1}
     <h2 class="mb-2 text-2xl font-bold mt-2">{language.characterDisplay}</h2>
     <span class="text-textcolor mt-2 mb-2">{currentChar.type !== 'group' ? language.charIcon : language.groupIcon}</span>
-    <button on:click={async () => {await selectCharImg($selectedCharID);currentChar = currentChar}}>
+    {#if currentChar.type === 'group'}
-        {#if currentChar.data.image === ''}
+        <button on:click={async () => {await selectCharImg($selectedCharID);currentChar = currentChar}}>
-            <div class="rounded-md h-32 w-32 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" />
+            {#await getCharImage(currentChar.data.image, 'css')}
-        {:else}
+                <div class="rounded-md h-24 w-24 shadow-lg bg-textcolor2 cursor-pointer ring"></div>
-            {#await getCharImage(currentChar.data.image, (currentChar.type === 'character' && currentChar.data.largePortrait) ? 'lgcss' : 'css')}
-                <div class="rounded-md h-32 w-32 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500"></div>
             {:then im}
-                <div class="rounded-md h-32 w-32 shadow-lg bg-textcolor2 cursor-pointer hover:text-green-500" style={im} />     
+                <div class="rounded-md h-24 w-24 shadow-lg bg-textcolor2 cursor-pointer ring" style={im} />     
             {/await}
-        {/if}
+        </button>
-    </button>
+    {:else}
+        <div class="p-2 border-darkborderc border rounded-md flex flex-wrap gap-2">
+            {#if currentChar.data.image !== '' && currentChar.data.image}
+                <button>
+                    {#await getCharImage(currentChar.data.image, currentChar.data.largePortrait ? 'lgcss' : 'css')}
+                        <div class="rounded-md h-24 w-24 shadow-lg bg-textcolor2 cursor-pointer ring"></div>
+                    {:then im}
+                        <div class="rounded-md h-24 w-24 shadow-lg bg-textcolor2 cursor-pointer ring" style={im} />     
+                    {/await}
+                </button>
+            {/if}
+            {#if currentChar.data.ccAssets}
+                {#each currentChar.data.ccAssets as assets, i}
+                    <button on:click={async () => {changeCharImage($selectedCharID, i);currentChar = currentChar}}>
+                        {#await getCharImage(assets.uri, currentChar.data.largePortrait ? 'lgcss' : 'css')}
+                            <div class="rounded-md h-24 w-24 shadow-lg bg-textcolor2 cursor-pointer hover:ring transition-shadow"></div>
+                        {:then im}
+                            <div class="rounded-md h-24 w-24 shadow-lg bg-textcolor2 cursor-pointer hover:ring transition-shadow" style={im} />     
+                        {/await}
+                    </button>
+                {/each}
+            {/if}
+            <button on:click={async () => {await selectCharImg($selectedCharID);currentChar = currentChar}}>
+                <div class="rounded-md h-24 w-24 cursor-pointer border-darkborderc border border-dashed flex justify-center items-center hover:border-blue-500">
+                    <PlusIcon />
+                </div>
+            </button>
+        </div>
+    {/if}
 
     {#if currentChar.type === 'character' && currentChar.data.image !== ''}
         <div class="flex items-center mt-4">

src/ts/characters.ts

@@ -72,7 +72,7 @@ export async function getCharImage(loc:string, type:'plain'|'css'|'contain'|'lgc
     }
 }
 
-export async function selectCharImg(charId:number) {
+export async function selectCharImg(charIndex:number) {
     const selected = await selectSingleFile(['png', 'webp', 'gif', 'jpg', 'jpeg'])
     if(!selected){
         return
@@ -80,7 +80,37 @@ export async function selectCharImg(charId:number) {
     const img = selected.data
     let db = get(DataBase)
     const imgp = await saveImage(await reencodeImage(img))
-    db.characters[charId].image = imgp
+    dumpCharImage(charIndex)
+    db.characters[charIndex].image = imgp
+    setDatabase(db)
+}
+
+export function dumpCharImage(charIndex:number) {
+    let db = get(DataBase)
+    const char = db.characters[charIndex] as character
+    if(!char.image || char.image === ''){
+        return
+    }
+    char.ccAssets ??= []
+    char.ccAssets.push({
+        type: 'icon',
+        name: 'iconx',
+        uri: char.image,
+        ext: 'png'
+    })
+    char.image = ''
+    db.characters[charIndex] = char
+    setDatabase(db)
+}
+
+export function changeCharImage(charIndex:number,changeIndex:number) {
+    let db = get(DataBase)
+    const char = db.characters[charIndex] as character
+    const image = char.ccAssets[changeIndex].uri
+    char.ccAssets.splice(changeIndex, 1)
+    dumpCharImage(charIndex)
+    char.image = image
+    db.characters[charIndex] = char
     setDatabase(db)
 }
 

src/ts/storage/globalApi.ts

@@ -807,6 +807,11 @@ export function getUnpargeables(db:Database, uptype:'basename'|'pure' = 'basenam
                     addUnparge(vit)
                 }
             }
+            if(cha.ccAssets){
+                for(const asset of cha.ccAssets){
+                    addUnparge(asset.uri)
+                }
+            }
         }
     }