84 lines
3.2 KiB
Svelte
84 lines
3.2 KiB
Svelte
<script lang="ts">
|
|
|
|
import { DBState } from 'src/ts/stores.svelte';
|
|
import { getFileSrc } from "src/ts/globalApi.svelte";
|
|
import { selectedCharID } from "src/ts/stores.svelte";
|
|
import { sleep } from "src/ts/util";
|
|
import { onDestroy, onMount } from "svelte";
|
|
|
|
const style:number = 1
|
|
interface Props {
|
|
text?: string;
|
|
}
|
|
|
|
let { text = "Hello World, this is a test, so I can see if this works. I hope it does, because I don't want to have to rewrite this. I hope this is long enough to test the text wrapping. Lonnnnnng String " }: Props = $props();
|
|
let renderedText = $state('')
|
|
let alive = true
|
|
|
|
const forceRender = () => {
|
|
renderedText = text
|
|
}
|
|
|
|
onMount(async () => {
|
|
while(alive){
|
|
if(renderedText.length >= text.length){
|
|
if(renderedText !== text){
|
|
renderedText = ''
|
|
}
|
|
else{
|
|
renderedText = text
|
|
}
|
|
}
|
|
if(renderedText.length < text.length){
|
|
renderedText += text[renderedText.length]
|
|
}
|
|
await sleep(10)
|
|
}
|
|
})
|
|
|
|
onDestroy(() => {
|
|
renderedText = ''
|
|
alive = false
|
|
})
|
|
</script>
|
|
|
|
{#if DBState.db.characters[$selectedCharID].type === 'character' && DBState.db.characters[$selectedCharID].emotionImages[0]}
|
|
{#await getFileSrc(DBState.db.characters[$selectedCharID].emotionImages[0][1]) then imglink}
|
|
<div class="w-full absolute top-0 h-full bottom-0 justify-center flex">
|
|
<img src={imglink} alt="character">
|
|
</div>
|
|
{/await}
|
|
{/if}
|
|
{#if style === 0}
|
|
<div class="w-full flex justify-center absolute bottom-5">
|
|
<div class="w-3xl max-w-full flex flex-col">
|
|
|
|
<div class="bg-slate-700 h-12 rounded-lg border-slate-500 border-1 w-40 mb-2 bg-opacity-90 text-center flex items-center justify-center">
|
|
<span class="font-bold p-2">{DBState.db.characters[$selectedCharID].name}</span>
|
|
</div>
|
|
<div class="bg-slate-700 h-40 rounded-lg border-slate-500 border-1 w-full bg-opacity-90 text-justify p-4">
|
|
Test
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{:else}
|
|
<div class="w-full flex justify-center absolute bottom-5">
|
|
<div class="w-3xl max-w-full flex flex-col text-black">
|
|
|
|
<div class="bg-neutral-200 h-12 rounded-lg border-pink-900 border-1 w-48 mb-2 text-center relative top-6 left-4 text-lg">
|
|
<div class="border-pink-300 border-4 h-full rounded-lg">
|
|
<div class="border-pink-900 border-1 text-justify h-full rounded-lg flex items-center justify-center">
|
|
<span class="font-bold p-2">{DBState.db.characters[$selectedCharID].name}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="bg-neutral-200 h-40 rounded-lg border-pink-900 border-1 w-full">
|
|
<div class="border-pink-300 border-4 h-full rounded-lg">
|
|
<div class="border-pink-900 border-1 px-4 pt-6 pb-4 h-full rounded-lg tracking-normal text-clip">
|
|
{renderedText}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{/if} |