feat: Aethetic mode group images (after loading a character card)

Author: prima

klite.embd

@@ -5264,6 +5264,43 @@ Current version indicated by LITEVER below.
 				}
 				var decoded = JSON.parse(b64_decode_unicode(b64buf));
 				console.log(decoded);
+				try
+				{
+					// https://stackoverflow.com/questions/12710001/how-to-convert-uint8-array-to-base64-encoded-string
+					async function bufferToBase64(buffer) {
+						// use a FileReader to generate a base64 data URI:
+						const base64url = await new Promise(r => {
+							const reader = new FileReader()
+							reader.onload = () => r(reader.result)
+							reader.readAsDataURL(new Blob([buffer]))
+						});
+						// remove the `data:...;base64,` part from the start
+						return base64url.slice(base64url.indexOf(',') + 1);
+					}
+
+					bufferToBase64(data).then(b64 => {
+						b64Url = `data:image/png;base64,${b64}`
+						let charData = !!decoded?.data ? decoded.data : decoded, charName = charData.name;
+						let dataToSave = {
+							name: charName,
+							data: charData,
+							image: b64Url
+						}
+						indexeddb_save(`character_${charName}`, JSON.stringify(dataToSave)).then(() => {
+							indexeddb_load("characterList", "[]").then(charListJson => {
+								let charList = JSON.parse(charListJson);
+								charList.push(charName);
+								allCharacterNames = charList;
+								indexeddb_save("characterList", JSON.stringify(charList));
+							})
+						})
+					})
+					
+				}
+				catch (e)
+				{
+					console.error(e)
+				}
 				return decoded;
 			} catch (e) {
 				console.log("Error decoding b64 in image: " + e);
@@ -24001,11 +24038,48 @@ Current version indicated by LITEVER below.
 			imageData: "var(--img_worldTree)"
 		}
 	];
+
+	let allCharacterNames = []
+	window.addEventListener("load", async () => {
+		allCharacterNames = JSON.parse(await indexeddb_load("characterList", "[]"))
+	})
 
+	function getImageUrlFromCharacter(characterName)
+	{
+		if (allCharacterNames.includes(characterName))
+		{
+			let charName = characterName.replaceAll(/[^\w]/g, "_"), id = `style_image_${charName}`;
+			let varName = `--img_character_${charName}`
+			if (!document.getElementById(id))
+			{
+				indexeddb_load(`character_${characterName}`, "{}").then(charData => {
+					let image = JSON.parse(charData)?.image;
+					let styleElem = document.createElement("style");
+					styleElem.id = id
+					styleElem.innerHTML = `:root{
+						${varName}:url(${image})
+					}`
+					document.body.appendChild(styleElem)
+				})
+			}
+			return `var(${varName})`
+		}
+		return undefined
+	}
+
 	function getImageForSource(source, name)
 	{
-		let images = sourceImagesForCharacters.filter(imageMeta => imageMeta?.source === source && imageMeta?.name === name);
-		return images.length > 0 ? images[0]?.imageData : undefined;
+		let imageFromIndexDB = getImageUrlFromCharacter(name)
+		if (imageFromIndexDB !== undefined)
+		{
+			return imageFromIndexDB;
+		}
+		if (source !== undefined)
+		{
+			let images = sourceImagesForCharacters.filter(imageMeta => imageMeta?.source === source && imageMeta?.name === name);
+			return images.length > 0 ? images[0]?.imageData : undefined;
+		}
+		return undefined
 	}
 
 	function render_aesthetic_ui(input, isPreview) //class suffix string used to prevent defined styles from leaking into global scope
@@ -24019,7 +24093,7 @@ Current version indicated by LITEVER below.
 			let radius = (as.border_style == 'Circle' ? '1000rem' : (as.border_style == 'Rounded' ? '1.6rem' : '0.1rem'));
 			let width, height;
 			let imgclassname = "";
-			let imageToUse = source !== undefined ? getImageForSource(source, name) : undefined;
+			let imageToUse = getImageForSource(source, name);
 			if (imageToUse !== undefined)
 			{
 				width = as.portrait_width_AI;
@@ -24211,12 +24285,12 @@ Current version indicated by LITEVER below.
 			newbodystr += `<div style='display:flex; align-items:stretch; flex-direction: row;'>`;
 			if(curr.myturn)
 			{
-				newbodystr += `${(showavatar?avatarImage(false, curr?.source, curr?.name):"")}
+				newbodystr += `${(showavatar? avatarImage(false, curr?.source, curr?.name):"")}
 				<div class='aui_myturn_block'`;
 			}
 			else
 			{
-				newbodystr += `${(showavatar?avatarImage(true, curr?.source, curr?.name):"")}
+				newbodystr += `${(showavatar? avatarImage(true, curr?.source, curr?.name):"")}
 				<div class='aui_aiturn_block'`;
 			}
 			newbodystr += ` style='flex: 1; display:flex; padding: ${as.padding()}; margin: ${as.margin()}; min-height:${as.background_minHeight}px;`
@@ -36957,17 +37031,20 @@ flowchart TD\n${treeToViewOutput.outputText.trim()}`
 		let scripts = [...document.querySelectorAll("button.unselectable[title=Copy]")].filter(el => el.checkVisibility() && !el.classList.contains("execScriptAdded")).map(el => extractCodeFromElem(el))
 
 		scripts.forEach(meta => {
-			let elem = meta.elem
-			let button = document.createElement("button")
-			button.title = "Execute code block"
-			button.classList.add("unselectable")
-			button.onclick = () => handleExecCode(meta)
-			button.style.color = "black"
-			button.style.display = "flex"
-			button.style.float = "right"
-			button.innerText = "⚡"
-			elem.classList.add("execScriptAdded")
-			elem.parentElement.prepend(button)
+			let elem = meta?.elem
+			if (!!elem)
+			{
+				let button = document.createElement("button")
+				button.title = "Execute code block"
+				button.classList.add("unselectable")
+				button.onclick = () => handleExecCode(meta)
+				button.style.color = "black"
+				button.style.display = "flex"
+				button.style.float = "right"
+				button.innerText = "⚡"
+				elem.classList.add("execScriptAdded")
+				elem.parentElement.prepend(button)
+			}
 		})
 	}