[feat] added features in spec v2
This commit is contained in:
kwaroran
@@ -10,13 +10,14 @@
|
||||
import { replacePlaceholders } from "../../ts/util";
|
||||
export let message = ''
|
||||
export let name = ''
|
||||
export let img = ''
|
||||
export let img:string|Promise<string> = ''
|
||||
export let idx = -1
|
||||
export let rerollIcon = false
|
||||
export let onReroll = () => {}
|
||||
export let unReroll = () => {}
|
||||
let translating = false
|
||||
let editMode = false
|
||||
export let altGreeting = false
|
||||
|
||||
let msgDisplay = ''
|
||||
|
||||
@@ -60,15 +61,13 @@
|
||||
|
||||
$: displaya(message)
|
||||
</script>
|
||||
<div class="flex">
|
||||
<div class="flex max-w-full">
|
||||
<div class="text-neutral-200 mt-2 p-2 bg-transparent flex-grow ml-4 mr-4 border-t-gray-900 border-opacity-30 border-transparent flexium items-start">
|
||||
{#if img === ''}
|
||||
<div class="rounded-md shadow-lg bg-gray-500 mt-2" style={`height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem`}>
|
||||
|
||||
</div>
|
||||
{:else}
|
||||
<div class="rounded-md shadow-lg bg-gray-500 mt-2" style={img + `height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem`} />
|
||||
{/if}
|
||||
{#await img}
|
||||
<div class="rounded-md shadow-lg bg-gray-500 mt-2" style={`height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem`} />
|
||||
{:then m}
|
||||
<div class="rounded-md shadow-lg bg-gray-500 mt-2" style={m + `height:${$DataBase.iconsize * 3.5 / 100}rem;width:${$DataBase.iconsize * 3.5 / 100}rem`} />
|
||||
{/await}
|
||||
<span class="flex flex-col ml-4 w-full">
|
||||
<div class="flexium items-center chat">
|
||||
<span class="chat text-xl unmargin">{name}</span>
|
||||
@@ -106,8 +105,8 @@
|
||||
<LanguagesIcon />
|
||||
</button>
|
||||
{/if}
|
||||
{#if rerollIcon}
|
||||
{#if $DataBase.swipe}
|
||||
{#if rerollIcon || altGreeting}
|
||||
{#if $DataBase.swipe || altGreeting}
|
||||
<button class="ml-2 hover:text-green-500 transition-colors" on:click={unReroll}>
|
||||
<ArrowLeft size={22}/>
|
||||
</button>
|
||||
|
||||
19
src/lib/ChatScreens/CreatorQuote.svelte
Normal file
19
src/lib/ChatScreens/CreatorQuote.svelte
Normal file
@@ -0,0 +1,19 @@
|
||||
<div class="flex w-full justify-center">
|
||||
<div class="w-3xl max-w-80p bg-darkbg rounded-md p-3 text-white text-sm">
|
||||
<h1 class="text-xl font-bold mb-2">Creator's Quote
|
||||
<button class="float-right" on:click={onRemove}>
|
||||
<XIcon />
|
||||
</button>
|
||||
</h1>
|
||||
<div class="ml-2 max-w-full break-words text chat chattext prose prose-invert">
|
||||
{@html ParseMarkdown(quote)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<script lang="ts">
|
||||
import { XIcon } from "lucide-svelte";
|
||||
import { ParseMarkdown } from "src/ts/parser";
|
||||
|
||||
export let onRemove: () => void
|
||||
export let quote:string
|
||||
</script>
|
||||
@@ -13,6 +13,7 @@
|
||||
import {cloneDeep} from 'lodash'
|
||||
import { processScript } from "src/ts/process/scripts";
|
||||
import GithubStars from "../Others/GithubStars.svelte";
|
||||
import CreatorQuote from "./CreatorQuote.svelte";
|
||||
|
||||
let messageInput = ''
|
||||
let openMenu = false
|
||||
@@ -237,88 +238,81 @@
|
||||
{#each messageForm($DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message, loadPages) as chat, i}
|
||||
{#if chat.role === 'char'}
|
||||
{#if $DataBase.characters[$selectedCharID].type !== 'group'}
|
||||
{#await getCharImage($DataBase.characters[$selectedCharID].image, 'css')}
|
||||
<Chat
|
||||
idx={chat.index}
|
||||
name={$DataBase.characters[$selectedCharID].name}
|
||||
message={chat.data}
|
||||
img={''}
|
||||
rerollIcon={i === 0}
|
||||
onReroll={reroll}
|
||||
unReroll={unReroll}
|
||||
/>
|
||||
{:then im}
|
||||
<Chat
|
||||
idx={chat.index}
|
||||
name={$DataBase.characters[$selectedCharID].name}
|
||||
message={chat.data}
|
||||
img={im}
|
||||
rerollIcon={i === 0}
|
||||
onReroll={reroll}
|
||||
unReroll={unReroll}
|
||||
|
||||
/>
|
||||
{/await}
|
||||
<Chat
|
||||
idx={chat.index}
|
||||
name={$DataBase.characters[$selectedCharID].name}
|
||||
message={chat.data}
|
||||
img={getCharImage($DataBase.characters[$selectedCharID].image, 'css')}
|
||||
rerollIcon={i === 0}
|
||||
onReroll={reroll}
|
||||
unReroll={unReroll}
|
||||
/>
|
||||
{:else}
|
||||
{#await getCharImage(findCharacterbyId(chat.saying).image, 'css')}
|
||||
<Chat
|
||||
idx={chat.index}
|
||||
name={findCharacterbyId(chat.saying).name}
|
||||
message={chat.data}
|
||||
rerollIcon={i === 0}
|
||||
onReroll={reroll}
|
||||
unReroll={unReroll}
|
||||
img={''}
|
||||
/>
|
||||
{:then im}
|
||||
<Chat
|
||||
idx={chat.index}
|
||||
name={findCharacterbyId(chat.saying).name}
|
||||
rerollIcon={i === 0}
|
||||
message={chat.data}
|
||||
onReroll={reroll}
|
||||
unReroll={unReroll}
|
||||
img={im}
|
||||
/>
|
||||
{/await}
|
||||
<Chat
|
||||
idx={chat.index}
|
||||
name={findCharacterbyId(chat.saying).name}
|
||||
rerollIcon={i === 0}
|
||||
message={chat.data}
|
||||
onReroll={reroll}
|
||||
unReroll={unReroll}
|
||||
img={getCharImage(findCharacterbyId(chat.saying).image, 'css')}
|
||||
/>
|
||||
{/if}
|
||||
{:else}
|
||||
{#await getCharImage($DataBase.userIcon, 'css')}
|
||||
<Chat
|
||||
idx={chat.index}
|
||||
name={$DataBase.username}
|
||||
message={chat.data}
|
||||
img={''}
|
||||
/>
|
||||
{:then im}
|
||||
<Chat
|
||||
idx={chat.index}
|
||||
name={$DataBase.username}
|
||||
message={chat.data}
|
||||
img={im}
|
||||
/>
|
||||
{/await}
|
||||
<Chat
|
||||
idx={chat.index}
|
||||
name={$DataBase.username}
|
||||
message={chat.data}
|
||||
img={getCharImage($DataBase.userIcon, 'css')}
|
||||
/>
|
||||
{/if}
|
||||
{/each}
|
||||
{#if $DataBase.characters[$selectedCharID].chats[$DataBase.characters[$selectedCharID].chatPage].message.length <= loadPages}
|
||||
{#if $DataBase.characters[$selectedCharID].type !== 'group'}
|
||||
{#await getCharImage($DataBase.characters[$selectedCharID].image, 'css')}
|
||||
<Chat
|
||||
name={$DataBase.characters[$selectedCharID].name}
|
||||
message={ $DataBase.characters[$selectedCharID].firstMessage}
|
||||
img={''}
|
||||
idx={-1}
|
||||
/>
|
||||
{:then im}
|
||||
<Chat
|
||||
name={$DataBase.characters[$selectedCharID].name}
|
||||
message={ $DataBase.characters[$selectedCharID].firstMessage}
|
||||
img={im}
|
||||
idx={-1}
|
||||
/>
|
||||
{/await}
|
||||
<Chat
|
||||
name={$DataBase.characters[$selectedCharID].name}
|
||||
message={$DataBase.characters[$selectedCharID].firstMsgIndex === -1 ? $DataBase.characters[$selectedCharID].firstMessage :
|
||||
$DataBase.characters[$selectedCharID].alternateGreetings[$DataBase.characters[$selectedCharID].firstMsgIndex]}
|
||||
img={getCharImage($DataBase.characters[$selectedCharID].image, 'css')}
|
||||
idx={-1}
|
||||
altGreeting={$DataBase.characters[$selectedCharID].alternateGreetings.length > 0}
|
||||
onReroll={() => {
|
||||
const cha = $DataBase.characters[$selectedCharID]
|
||||
if(cha.type !== 'group'){
|
||||
if (cha.firstMsgIndex >= (cha.alternateGreetings.length - 1)){
|
||||
cha.firstMsgIndex = -1
|
||||
}
|
||||
else{
|
||||
cha.firstMsgIndex += 1
|
||||
}
|
||||
}
|
||||
$DataBase.characters[$selectedCharID] = cha
|
||||
}}
|
||||
unReroll={() => {
|
||||
const cha = $DataBase.characters[$selectedCharID]
|
||||
if(cha.type !== 'group'){
|
||||
if (cha.firstMsgIndex === -1){
|
||||
cha.firstMsgIndex = (cha.alternateGreetings.length - 1)
|
||||
}
|
||||
else{
|
||||
cha.firstMsgIndex -= 1
|
||||
}
|
||||
}
|
||||
$DataBase.characters[$selectedCharID] = cha
|
||||
}}
|
||||
/>
|
||||
{#if !$DataBase.characters[$selectedCharID].removedQuotes && $DataBase.characters[$selectedCharID].creatorNotes.length >= 2}
|
||||
<CreatorQuote quote={$DataBase.characters[$selectedCharID].creatorNotes} onRemove={() => {
|
||||
const cha = $DataBase.characters[$selectedCharID]
|
||||
if(cha.type !== 'group'){
|
||||
cha.removedQuotes = true
|
||||
}
|
||||
$DataBase.characters[$selectedCharID] = cha
|
||||
}} />
|
||||
{/if}
|
||||
{/if}
|
||||
{/if}
|
||||
|
||||
{#if openMenu}
|
||||
<div class="absolute right-2 bottom-16 p-5 bg-darkbg flex flex-col gap-3 text-gray-200" on:click={(e) => {
|
||||
e.stopPropagation()
|
||||
|
||||
Reference in New Issue
Block a user