mincomk/risuai
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Migrate to svelte 5

Browse Source
This commit is contained in:
kwaroran
2024-10-23 02:31:37 +09:00
parent e434c7ab96
commit c7330719ad
120 changed files with 2398 additions and 2033 deletions
Download Patch File Download Diff File Expand all files Collapse all files

20
src/lib/UI/Realm/RealmFrame.svelte
View File

@@ -2,17 +2,17 @@
import { alertMd } from "src/ts/alert";
import { shareRealmCardData } from "src/ts/realm";
import { DataBase, downloadPreset } from "src/ts/storage/database";
import { CurrentCharacter, ShowRealmFrameStore } from "src/ts/stores";
import { selectedCharID, ShowRealmFrameStore } from "src/ts/stores";
import { sleep } from "src/ts/util";
import { onDestroy, onMount } from "svelte";
const close = () => {
$ShowRealmFrameStore = ''
}
let iframe: HTMLIFrameElement = null
let iframe: HTMLIFrameElement = $state(null)
const tk = $DataBase?.account?.token;
const id = $DataBase?.account?.id
let loadingStage = 0
let loadingStage = $state(0)
let pongGot = false
const pmfunc = (e:MessageEvent) => {
@@ -30,9 +30,9 @@
if($ShowRealmFrameStore.startsWith('preset') || $ShowRealmFrameStore.startsWith('module')){
//TODO, add preset edit
}
else if($CurrentCharacter.type === 'character'){
else if($DataBase.characters[$selectedCharID].type === 'character'){
loadingStage = 0
$CurrentCharacter.realmId = e.data.id
$DataBase.characters[$selectedCharID].realmId = e.data.id
}
close()
}
@@ -96,8 +96,8 @@
if($ShowRealmFrameStore.startsWith('preset') || $ShowRealmFrameStore.startsWith('module')){
//TODO, add preset edit
}
else if($CurrentCharacter.type === 'character' && $CurrentCharacter.realmId){
url += `&edit=${$CurrentCharacter.realmId}&edit-type=normal`
else if($DataBase.characters[$selectedCharID].type === 'character' && $DataBase.characters[$selectedCharID].realmId){
url += `&edit=${$DataBase.characters[$selectedCharID].realmId}&edit-type=normal`
}
url += '#noLayout'
return url
@@ -111,15 +111,15 @@
<div class="top-0 left-0 z-50 fixed w-full h-full flex flex-col justify-center items-center text-textcolor bg-white">
<div class="bg-darkbg border-b border-b-darkborderc w-full flex p-2">
<h1 class="text-2xl font-bold max-w-full overflow-hidden whitespace-nowrap text-ellipsis">Upload to Realm</h1>
<button class="text-textcolor text-lg hover:text-red-500 ml-auto" on:click={close}>&times;</button>
<button class="text-textcolor text-lg hover:text-red-500 ml-auto" onclick={close}>&times;</button>
</div>
{#if loadingStage < 1}
<div class="w-full flex justify-center items-center p-4 flex-1">
<div class="loadmove"/>
<div class="loadmove"></div>
</div>
{/if}
<iframe bind:this={iframe}
src={getUrl()}
title="upload" class="w-full flex-1" class:hidden={loadingStage < 1}
/>
></iframe>
</div>

18
src/lib/UI/Realm/RealmHubIcon.svelte
View File

@@ -1,17 +1,23 @@
<script lang="ts">
import { stopPropagation } from 'svelte/legacy';
import { BookIcon, ImageIcon, SmileIcon } from "lucide-svelte";
import { alertNormal } from "src/ts/alert";
import { hubURL, type hubType } from "src/ts/characterCards";
import { trimNonLatin } from "src/ts/storage/globalApi";
import { parseMultilangString } from "src/ts/util";
export let onClick = () => {}
export let chara:hubType
interface Props {
onClick?: any;
chara: hubType;
}
let { onClick = () => {}, chara }: Props = $props();
</script>
<button class="bg-darkbg rounded-lg p-4 flex flex-col hover:bg-selected transition-colors relative lg:w-96 w-full items-start" on:click={onClick}>
<button class="bg-darkbg rounded-lg p-4 flex flex-col hover:bg-selected transition-colors relative lg:w-96 w-full items-start" onclick={onClick}>
<div class="flex gap-2 w-full">
<img class="w-20 min-w-20 h-20 sm:h-28 sm:w-28 rounded-md object-top object-cover" alt={chara.name} src={`${hubURL}/resource/` + chara.img}>
<div class="flex flex-col flex-grow min-w-0">
@@ -29,13 +35,13 @@
<div class="flex-grow"></div>
<div class="flex flex-wrap w-full flex-row-reverse gap-1">
{#if chara.hasEmotion}
<button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes emotion images")}}><SmileIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={stopPropagation(() => {alertNormal("This character includes emotion images")})}><SmileIcon /></button>
{/if}
{#if chara.hasAsset}
<button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes additional assets")}}><ImageIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={stopPropagation(() => {alertNormal("This character includes additional assets")})}><ImageIcon /></button>
{/if}
{#if chara.hasLore}
<button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes lorebook")}}><BookIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={stopPropagation(() => {alertNormal("This character includes lorebook")})}><BookIcon /></button>
{/if}
</div>
</div>

14
src/lib/UI/Realm/RealmLicense.svelte
View File

@@ -1,17 +1,23 @@
<script lang="ts">
import { stopPropagation } from 'svelte/legacy';
import { CCLicenseData } from "src/ts/creation/license";
import { tooltip } from "src/ts/gui/tooltip";
import { openURL } from "src/ts/storage/globalApi";
export let license = ""
interface Props {
license?: string;
}
let { license = "" }: Props = $props();
</script>
{#if Object.keys(CCLicenseData).includes(license)}
<div class="w-full flex flex-row">
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="flex flex-wrap flex-row gap-1 mt-2 items-center cursor-pointer" use:tooltip={CCLicenseData[license][1] + ". The License only applys to the text."} on:click|stopPropagation={() => {
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div class="flex flex-wrap flex-row gap-1 mt-2 items-center cursor-pointer" use:tooltip={CCLicenseData[license][1] + ". The License only applys to the text."} onclick={stopPropagation(() => {
openURL(`https://creativecommons.org/licenses/${CCLicenseData[license][0]}/4.0/`)
}}>
})}>
<img alt="creative commons" class="cc" src="https://i.creativecommons.org/l/{CCLicenseData[license][0]}/4.0/88x31.png" />
<span class="text-textcolor2">
Licensed with {CCLicenseData[license][2]}

48
src/lib/UI/Realm/RealmMain.svelte
View File

@@ -1,4 +1,6 @@
<script lang="ts">
import { stopPropagation } from 'svelte/legacy';
import { downloadRisuHub, getRisuHub, hubAdditionalHTML, type hubType } from "src/ts/characterCards";
import { ArrowLeft, ArrowRight, MenuIcon, SearchIcon, XIcon } from "lucide-svelte";
import { alertInput } from "src/ts/alert";
@@ -11,16 +13,16 @@
import { googleBuild } from "src/ts/storage/globalApi";
import { split } from "lodash";
let openedData:null|hubType = null
let openedData:null|hubType = $state(null)
let charas:hubType[] = []
let charas:hubType[] = $state([])
let page = 0
let sort = ''
let page = $state(0)
let sort = $state('')
let search = ''
let menuOpen = false
let nsfw = false
let search = $state('')
let menuOpen = $state(false)
let nsfw = $state(false)
async function getHub(){
charas = await getRisuHub({
@@ -39,7 +41,7 @@
<div class="flex items-stretch w-2xl max-w-full">
<input bind:value={search} class="peer focus:border-textcolor transition-colors outline-none text-textcolor p-2 min-w-0 border border-r-0 bg-transparent rounded-md rounded-r-none input-text text-xl flex-grow ml-4 border-darkborderc resize-none overflow-y-hidden overflow-x-hidden max-w-full">
<button
on:click={() => {
onclick={() => {
page = 0
getHub()
}}
@@ -48,7 +50,7 @@
<SearchIcon />
</button>
<button
on:click={(e) => {
onclick={(e) => {
menuOpen = true
}}
class="peer-focus:border-textcolor mr-2 flex border-y border-r border-darkborderc justify-center items-center text-gray-100 p-3 rounded-r-md hover:bg-blue-500 transition-colors"
@@ -60,14 +62,14 @@
{#if $MobileGUI}
<div class="ml-4 flex items-start ">
<div class="p-2 flex mb-3 overflow-x-auto rounded-lg border-darkborderc border gap-2">
<button on:click={() => {
<button onclick={() => {
nsfw = !nsfw
getHub()
}}>
{nsfw ? 'NSFW' : 'SFW'}
</button>
<div class="h-full border-r border-r-selected"></div>
<button on:click={() => {
<button onclick={() => {
switch(sort){
case '':
sort = 'trending'
@@ -95,32 +97,32 @@
</div>
{:else}
<div class="w-full p-1 flex mb-3 overflow-x-auto sm:justify-center">
<button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={nsfw} on:click={() => {
<button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={nsfw} onclick={() => {
nsfw = !nsfw
getHub()
}}>
NSFW
</button>
<div class="ml-2 mr-2 h-full border-r border-r-selected"></div>
<button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === ''} on:click={() => {
<button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === ''} onclick={() => {
sort = ''
getHub()
}}>
{language.recent}
</button>
<button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === 'trending'} on:click={() => {
<button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === 'trending'} onclick={() => {
sort = 'trending'
getHub()
}}>
{language.trending}
</button>
<button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === 'downloads'} on:click={() => {
<button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow" class:ring={sort === 'downloads'} onclick={() => {
sort = 'downloads'
getHub()
}}>
{language.downloads}
</button>
<button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow min-w-0 max-w-full" class:ring={sort === 'random'} on:click={() => {
<button class="bg-darkbg p-2 rounded-lg ml-2 flex justify-center items-center hover:bg-selected transition-shadow min-w-0 max-w-full" class:ring={sort === 'random'} onclick={() => {
sort = 'random'
getHub()
}}>
@@ -139,7 +141,7 @@
{#if sort !== 'random'}
<div class="w-full flex justify-center">
<div class="flex">
<button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg flex justify-center items-center hover:ring transition-shadow" on:click={() => {
<button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg flex justify-center items-center hover:ring transition-shadow" onclick={() => {
if(page > 0){
page -= 1
getHub()
@@ -150,7 +152,7 @@
<button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center transition-shadow">
<span>{page + 1}</span>
</button>
<button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" on:click={() => {
<button class="bg-darkbg h-14 w-14 min-w-14 rounded-lg ml-2 flex justify-center items-center hover:ring transition-shadow" onclick={() => {
page += 1
getHub()
}}>
@@ -166,8 +168,8 @@
{#if menuOpen}
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="top-0 left-0 z-50 fixed w-full h-full bg-black bg-opacity-50 flex justify-center items-center" on:click={() => {
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div class="top-0 left-0 z-50 fixed w-full h-full bg-black bg-opacity-50 flex justify-center items-center" onclick={() => {
menuOpen = false
}}>
<div class="max-w-full bg-darkbg rounded-md flex flex-col gap-4 overflow-y-auto p-4">
@@ -175,12 +177,12 @@
<span>
Menu
</span>
<button class="float-right text-textcolor2 hover:text-green-500" on:click={() => {menuOpen = false}}>
<button class="float-right text-textcolor2 hover:text-green-500" onclick={() => {menuOpen = false}}>
<XIcon />
</button>
</h1>
<div class=" mt-2 w-full border-t-2 border-t-bgcolor"></div>
<button class="w-full hover:bg-selected p-4" on:click|stopPropagation={async () => {
<button class="w-full hover:bg-selected p-4" onclick={stopPropagation(async () => {
menuOpen = false
const input = await alertInput('Input URL or ID')
if(input.startsWith("http")){
@@ -194,7 +196,7 @@
const id = input.split("?").at(-1)
downloadRisuHub(id)
}}>Import Character from URL or ID</button>
})}>Import Character from URL or ID</button>
</div>
</div>
{/if}

34
src/lib/UI/Realm/RealmPopUp.svelte
View File

@@ -1,4 +1,6 @@
<script lang="ts">
import { stopPropagation } from 'svelte/legacy';
import { BookIcon, FlagIcon, ImageIcon, PaperclipIcon, SmileIcon, TrashIcon } from "lucide-svelte";
import { language } from "src/lang";
import { alertConfirm, alertInput, alertNormal } from "src/ts/alert";
@@ -9,13 +11,17 @@
import MultiLangDisplay from "../GUI/MultiLangDisplay.svelte";
import { tooltip } from "src/ts/gui/tooltip";
export let openedData:hubType
interface Props {
openedData: hubType;
}
let { openedData = $bindable() }: Props = $props();
</script>
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="top-0 left-0 z-50 fixed w-full h-full bg-black bg-opacity-50 flex justify-center items-center text-textcolor" on:click={() => {
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div class="top-0 left-0 z-50 fixed w-full h-full bg-black bg-opacity-50 flex justify-center items-center text-textcolor" onclick={() => {
openedData = null
}}>
<div class="p-6 max-w-full bg-darkbg rounded-md flex flex-col gap-4 w-2xl overflow-y-auto max-h-full">
@@ -25,7 +31,7 @@
<span class="text-borderc">Made by {openedData.authorname}</span>
{/if}
{#if openedData.original}
<button class="text-blue-400 text-start" on:click={() => {
<button class="text-blue-400 text-start" onclick={() => {
const original = openedData.original
openedData = null
getRealmInfo(original)
@@ -48,19 +54,19 @@
</span>
<div class="border-l-selected border-l ml-1 mr-1"></div>
{#if openedData.hasEmotion}
<button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes emotion images")}}><SmileIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={stopPropagation(() => {alertNormal("This character includes emotion images")})}><SmileIcon /></button>
{/if}
{#if openedData.hasAsset}
<button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes additional Assets")}}><ImageIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={stopPropagation(() => {alertNormal("This character includes additional Assets")})}><ImageIcon /></button>
{/if}
{#if openedData.hasLore}
<button class="text-textcolor2 hover:text-green-500 transition-colors" on:click|stopPropagation={() => {alertNormal("This character includes lorebook")}}><BookIcon /></button>
<button class="text-textcolor2 hover:text-green-500 transition-colors" onclick={stopPropagation(() => {alertNormal("This character includes lorebook")})}><BookIcon /></button>
{/if}
</div>
</div>
<div class="flex flex-row-reverse gap-2">
<button class="text-textcolor2 hover:text-red-500" on:click|stopPropagation={async () => {
<button class="text-textcolor2 hover:text-red-500" onclick={stopPropagation(async () => {
const conf = await alertConfirm('Report this character?')
if(conf){
const report = await alertInput('Write a report text that would be sent to the admin (for copywrite issues, use email)')
@@ -73,11 +79,11 @@
})
alertNormal(await da.text())
}
}}>
})}>
<FlagIcon />
</button>
{#if ($DataBase.account?.token?.split('-') ?? [])[1] === openedData.creator}
<button class="text-textcolor2 hover:text-red-500" on:click|stopPropagation={async () => {
<button class="text-textcolor2 hover:text-red-500" onclick={stopPropagation(async () => {
const conf = await alertConfirm('Do you want to remove this character from Realm?')
if(conf){
const da = await fetch(hubURL + '/hub/remove', {
@@ -89,17 +95,17 @@
})
alertNormal(await da.text())
}
}}>
})}>
<TrashIcon />
</button>
{/if}
<button class="text-textcolor2 hover:text-green-500" on:click|stopPropagation={async () => {
<button class="text-textcolor2 hover:text-green-500" onclick={stopPropagation(async () => {
await navigator.clipboard.writeText(`https://realm.risuai.net/character/${openedData.id}`)
alertNormal(language.clipboardSuccess)
}}>
})}>
<PaperclipIcon />
</button>
<button class="bg-selected hover:ring flex-grow p-2 font-bold rounded-md mr-2" on:click={() => {
<button class="bg-selected hover:ring flex-grow p-2 font-bold rounded-md mr-2" onclick={() => {
downloadRisuHub(openedData.id)
openedData = null
}}>

50
src/lib/UI/Realm/RealmUpload.svelte
View File

@@ -1,11 +1,14 @@
<!-- svelte-ignore a11y-click-events-have-key-events -->
<div class="fixed top-0 left-0 h-full w-full bg-black bg-opacity-50 flex flex-col z-50 items-center justify-center" on:click={close}>
<div class="bg-darkbg rounded-md p-4 max-w-full flex flex-col w-2xl max-h-full overflow-y-auto" on:click|stopPropagation>
<!-- svelte-ignore a11y_click_events_have_key_events -->
<div class="fixed top-0 left-0 h-full w-full bg-black bg-opacity-50 flex flex-col z-50 items-center justify-center" role="button" tabindex="0" onclick={close}>
<div class="bg-darkbg rounded-md p-4 max-w-full flex flex-col w-2xl max-h-full overflow-y-auto" role="button" tabindex="0" onclick={(e)=>{
e.stopPropagation()
onclick?.(e)
}}>
{#if !$DataBase.account}
<span class="font-bold text-2xl w-full">You must login to Risu Account upload to RisuRealm</span>
<span class="text-textcolor2">You can login in app settings 🡲 account</span>
<button on:click={async () => {
<button onclick={async () => {
close()
}} class="text-textcolor mt-2 text-lg bg-transparent border-solid border-1 border-borderc p-4 hover:bg-green-800 transition-colors cursor-pointer">OK</button>
@@ -14,7 +17,7 @@
<span>
Share {char.name} to {language.hub}
</span>
<button class="float-right text-textcolor2 hover:text-green-500" on:click={close}>
<button class="float-right text-textcolor2 hover:text-green-500" onclick={close}>
<XIcon />
</button>
</h1>
@@ -28,13 +31,13 @@
<MultiLangInput bind:value={char.creatorNotes} />
<span class="text-textcolor">{language.tags}</span>
<span class="text-textcolor2 text-sm">Tags to search your character easily. latin alphabets only. seperate by comma.</span>
<TextInput placeholder="" bind:value={tags} on:input={() => {
<TextInput placeholder="" bind:value={tags} oninput={() => {
tags = tags.replace(/[^a-zA-Z,\-]/g, '').toLocaleLowerCase().replace(/ /g, '')
}} />
<div class="peer-focus:block hidden hover:block flex-wrap">
{#each searchTagList(tags) as tag}
<button class="text-textcolor2 text-sm p-2 border border-bgcolor" on:click={() => {
<button class="text-textcolor2 text-sm p-2 border border-bgcolor" onclick={() => {
const splited = tags.split(',').map(e => e.trim())
splited[splited.length - 1] = tag
tags = splited.join(',') + ','
@@ -56,23 +59,23 @@
{/if}
{#if !char.realmId}
<div class="flex items-center flex-wrap mt-4">
<button class="bg-bgcolor p-2 rounded-lg" class:ring-1={!privateMode} on:click={() => {privateMode = false}}>🌏 Show Author ID</button>
<button class="bg-bgcolor p-2 rounded-lg ml-2" class:ring-1={privateMode} on:click={() => {privateMode = true}}>🔒 Anonymized</button>
<button class="bg-bgcolor p-2 rounded-lg" class:ring-1={!privateMode} onclick={() => {privateMode = false}}>🌏 Show Author ID</button>
<button class="bg-bgcolor p-2 rounded-lg ml-2" class:ring-1={privateMode} onclick={() => {privateMode = true}}>🔒 Anonymized</button>
</div>
<div class="flex items-center flex-wrap mt-2">
<button class="bg-bgcolor p-2 rounded-lg" class:ring-1={!nsfwMode} on:click={() => {nsfwMode = false}}>🎖️ Safe</button>
<button class="bg-bgcolor p-2 rounded-lg ml-2" class:ring-1={nsfwMode} on:click={() => {nsfwMode = true}}>🔞 NSFW</button>
<button class="bg-bgcolor p-2 rounded-lg" class:ring-1={!nsfwMode} onclick={() => {nsfwMode = false}}>🎖️ Safe</button>
<button class="bg-bgcolor p-2 rounded-lg ml-2" class:ring-1={nsfwMode} onclick={() => {nsfwMode = true}}>🔞 NSFW</button>
</div>
{:else}
<div class="flex items-center flex-wrap mt-2">
<button class="bg-bgcolor p-2 rounded-lg" class:ring-1={!update} on:click={() => {nsfwMode = false}}>🚀 Update</button>
<button class="bg-bgcolor p-2 rounded-lg ml-2" class:ring-1={update} on:click={() => {nsfwMode = true}}>⭐ Upload Newly</button>
<button class="bg-bgcolor p-2 rounded-lg" class:ring-1={!update} onclick={() => {nsfwMode = false}}>🚀 Update</button>
<button class="bg-bgcolor p-2 rounded-lg ml-2" class:ring-1={update} onclick={() => {nsfwMode = true}}>⭐ Upload Newly</button>
</div>
{/if}
{#if nsfwMode}
<span class="text-textcolor2 text-sm">Grotesque Contents and non-adult characters with NSFW would be banned.</span>
{/if}
<Button on:click={async () => {
<Button onclick={async () => {
await sleep(1) // wait for the input to be updated
const enNotes = creatorNotes.en
const latin1 = /^[\x00-\xFF]*$/
@@ -116,12 +119,19 @@
import OptionInput from "../GUI/OptionInput.svelte";
import { TagList, parseMultilangString, searchTagList, sleep } from "src/ts/util";
import MultiLangInput from "../GUI/MultiLangInput.svelte";
export let close = () => {}
export let char:character
let tags=""
let privateMode = false
let nsfwMode = false
let license = ""
interface Props {
close?: any;
char: character;
onclick?: (event: MouseEvent & {
currentTarget: EventTarget & HTMLDivElement;
}) => any
}
let { close = () => {}, char = $bindable(), onclick }: Props = $props();
let tags=$state("")
let privateMode = $state(false)
let nsfwMode = $state(false)
let license = $state("")
let creatorNotes: {[code:string]:string} = parseMultilangString(char.creatorNotes)
let update = false