Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix:shadows #11

Open
wants to merge 3 commits into
base: aivo
Choose a base branch
from
Open

fix:shadows #11

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
da3d805
fix:shadows
gflechsig Apr 20, 2023
9d61f60
fix: styling & responsive bugs
gflechsig Apr 23, 2023
9e9a238
fix: redoshadow and admin buttons
gflechsig Apr 23, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 15 additions & 17 deletions web/pages/Character/CharacterList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,25 +93,23 @@ const Character: Component<{
const iconSize = { size: 'lg', corners: 'circle' };
return (
<div class="w-full">

<div class="conic h-72 md:h-[18.5rem] xl:h-96 2xl:h-80 hover:before:content-[''] hover:before:absolute hover:before:-z-20 hover:before:-left-1/2 hover:before:-top-1/2 hover:before:w-[200%] hover:before:h-[200%] hover:before:bg-[var(--bg-800)] hover:before:bg-no-repeat
hover:before:bg-left-top hover:before:bg-[conic-gradient(transparent,var(--hl-900),transparent_30%)] hover:before:animate-[rotate_3s_linear_infinite]
hover:after:content-[''] hover:after:absolute hover:after:-z-10 hover:after:left-1 hover:after:top-1 hover:after:w-[calc(100%-8px)] hover:after:h-[calc(100%-8px)] bg hover:after:bg-[var(--bg-800)] hover:after:rounded-md
relative z-0 overflow-hidden min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-[var(--bg-800)] border-[var(--hl-900)] text-900 max-w-[210px] sm:max-w-[250px] xl:max-w-[93%] ">
<a href={`/character/${props.character._id}/chats`}>
<img alt="..." src={getAssetUrl(props.character.avatar)} class="w-full align-middle rounded-t-lg min-h-[30px] p-1 object-contain max-h-[13rem] xl:max-h-[19rem] 2xl:max-h-[15rem] "/>
<div class="z-10 w-full text-right relative md:-mt-12 -mt-12 p-2 text-2xl md:text-3xl text-white text-shadow -bottom-6 right-0 md:right-1">
<span class=" font-black ">{props.character?.name}</span> {((props.character.persona?.attributes?.age) ? props.character?.persona?.attributes?.age[0].split(" ")[0] : '')}
</div>
<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 583 95" class="left-0 w-full block h-24 mt-[-96px] top-[-96px] p-1 z-0">
<polygon points="-30,95 583,95 583,65" class="text-[var(--bg-800)] fill-current"></polygon>
</svg>
</a>
<blockquote class="relative pt-8 p-1 md:px-4 mb-8">
<div class={`${props.user?.admin ? "2xl:h-[21rem] h-80 md:h-[19.5rem]" : "2xl:h-80 h-72 md:h-[18.5rem]" } conic xl:h-96 hover:before:content-[''] hover:before:absolute hover:before:-z-20 hover:before:-left-1/2 hover:before:-top-1/2 hover:before:w-[200%] hover:before:h-[200%] hover:before:bg-[var(--bg-800)] hover:before:bg-no-repeat
hover:before:bg-left-top hover:before:bg-[conic-gradient(transparent,var(--hl-900),transparent_30%)] hover:before:animate-[rotate_3s_linear_infinite]
hover:after:content-[''] hover:after:absolute hover:after:-z-10 hover:after:left-1 hover:after:top-1 hover:after:w-[calc(100%-8px)] hover:after:h-[calc(100%-8px)] bg hover:after:bg-[var(--bg-800)] hover:after:rounded-md
relative z-0 overflow-hidden min-w-0 break-words w-full mb-6 shadow-lg rounded-lg bg-[var(--bg-800)] border-[var(--hl-900)] text-900 max-w-[210px] sm:max-w-[250px] xl:max-w-[93%] `}>
<a href={`/character/${props.character._id}/chats`}>
<img alt="..." src={getAssetUrl(props.character.avatar)} class="w-full align-middle rounded-t-lg min-h-[30px] p-1 object-contain max-h-[13rem] xl:max-h-[19rem] 2xl:max-h-[15rem] "/>
<div class=" h-14 -mt-14 z-10 bg-gradient-to-b from-transparent to-[var(--bg-800)] relative bg-cover max-w-full max-h-full w-full " >
</div>
<div class="z-10 w-full text-right relative p-2 text-2xl -mt-8 md:text-3xl text-white text-shadow -bottom-6 right-0 md:right-1">
<span class=" font-black ">{props.character?.name}</span> {((props.character.persona?.attributes?.age) ? props.character?.persona?.attributes?.age[0].split(" ")[0] : '')}
</div>
</a>
<blockquote class="relative pt-6 p-1 md:px-4 mb-8">
<Show when={props.character.name!=="Aiva"}>
<div><Gauge currentXP={props.character.xp} /></div>
<div class={props.user?.admin ? "mt-4" : ""} ><Gauge currentXP={props.character.xp} /></div>
</Show>
<div class="flex flex-row items-end justify-end gap-2 -mt-10 w-full" style="justify-content:right">
<div class={`${props.user?.admin ? (props.character.name=="Aiva" ? "mt-5" : "-mt-16") : "mt-10" } flex flex-row items-end justify-end gap-2 w-full `} style="justify-content:right">
<Show when={props.user?.admin}>
<a onClick={props.download}>
<Download class="icon-button" />
Expand Down
2 changes: 2 additions & 0 deletions web/pages/Character/ImportCharacter.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,6 +26,7 @@ const ImportCharacterModal: Component<{
importJson(json)
toastStore.success('Character file accepted')
} catch (ex) {
console.log(ex);
toastStore.warn(
'Invalid file format. Supported formats: Agnaistic, CAI, TavernAI, TextGen, Pygmalion'
)
Expand All @@ -38,6 +39,7 @@ const ImportCharacterModal: Component<{

setJson(char)
} catch (ex) {
console.log(ex);
toastStore.warn(
'Invalid file format. Supported formats: Agnaistic, CAI, Tavern JSON/Cards, TextGen, Pygmalion'
)
Expand Down
57 changes: 34 additions & 23 deletions web/pages/Match/MatchSwipe.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,11 +8,10 @@ import { A,useNavigate } from '@solidjs/router'
import AvatarIcon from '../../shared/AvatarIcon'
import { matchStore,userStore, swipeStore } from '../../store'

import { getAssetUrl } from '../../shared/util'
import {SwipeCard} from '../../shared/Swipe'
import type { SwipeCardRef} from '../../shared/Swipe'

import { getAssetUrl } from '../../shared/util'

const MatchList: Component = () => {
const swipeCount = swipeStore();
let curApiref;
Expand All @@ -38,7 +37,7 @@ const MatchList: Component = () => {
left: ' text-red-500 fill-red-500 ',
right: ' text-emerald-400 fill-emerald-400',
up: ' text-cyan-300 fill-cyan-300',
down: ' text-orange-300 '
down: ' '
}
);

Expand Down Expand Up @@ -96,47 +95,53 @@ const MatchList: Component = () => {
}
}
}

let timerBounce;
function debounce(func, timeout = 10){
return (...args) => {
clearTimeout(timerBounce);
timerBounce = setTimeout(() => { func.apply(this, args); }, timeout);
};
}
function swipeMovement (a){
switch (a) {
case 'left':
setSwipeMove({
left: 'bg-red-500 text-white scale-100',
right: ' text-emerald-400 fill-emerald-400 scale-80',
up: ' text-cyan-300 fill-cyan-300 scale-100',
down: ' text-orange-300 '
down: ' '
});
break;
case 'right':
setSwipeMove({
left: ' text-red-500 fill-red-800 scale-80',
right: 'bg-emerald-400 text-white scale-100',
up: ' text-cyan-300 fill-cyan-300 scale-100',
down: ' text-orange-300 '
down: ' '
});
break;
case 'up':
setSwipeMove({
left: ' text-red-500 fill-red-800',
right: ' text-emerald-400 fill-emerald-400 scale-100',
up: 'bg-cyan-400 text-white scale-100',
down: ' text-orange-300 '
down: ' '
});
break;
case 'down':
setSwipeMove({
left: 'bg-red-500 text-white scale-100',
right: ' text-emerald-400 fill-emerald-400 scale-80',
up: ' text-cyan-300 fill-cyan-300 scale-100',
down: ' text-orange-300 '
down: ' '
});
break;
case 'restore':
setSwipeMove({
left: ' text-red-500 fill-red-800',
right: ' text-emerald-400 fill-emerald-400 scale-100',
up: ' text-cyan-300 fill-cyan-300 scale-100',
down: ' text-orange-300 '
down: ' '
});
break;
}
Expand Down Expand Up @@ -183,21 +188,23 @@ const MatchList: Component = () => {
<Show when={charsList().loaded && swipeCount.loaded} >
<div class="flex w-full flex-col gap-2 ">
<For each={charsList().list}>{(char, i) =>
<DSwipeCard character={char} match={createMatch} totalSwipes={totalSwipes} swipeAction={swipeAction} swipeMovement={swipeMovement} swipeCount={swipeCount} showZindex={i} />
<DSwipeCard character={char} match={createMatch} totalSwipes={totalSwipes} swipeAction={swipeAction} swipeMovement={debounce(swipeMovement)} swipeCount={swipeCount} showZindex={i} />
}</For>
</div>
<div class=" sm:mt-[36em] pl-6 md:pl-1 mx-auto m-[26em] mb-4 w-96 max-w-5xl md:w-[26rem] pb-2">
<button onclick={()=>buttonSwipe("left")} class={`${colorSwipeMove().left} " w-16 h-16 md:w-20 md:h-20 p-2 rounded-full font-bold text-white md:hover:scale-125 duration-200 shadow-lg mx-3 border-red-500 border-solid border-2 "`}>
<X size={40} class={`${colorSwipeMove().left} " icon-button inline-block "`}/>
<div zindex="5" class=" opacity-0 max-h-[calc(100%-10em)] bg-[var(--bg-800)] border-[var(--bg-800)] w-96 h-96 right-[5%] left-[5%] md:right-[10%] md:left-[10%] sm:w-9/12 sm:h-3/4 sm:max-w-[550px] sm:max-h-[550px] lg:right-[calc(14%-18.5rem)] m-auto shadow-lg max-w-[90%] border-solid border-[10px] md:border-[20px] rounded-lg "> </div>

<div class=" mt-4 mx-auto mb-4 pb-2 text-center">
<button onclick={()=>buttonSwipe("left")} class={`${colorSwipeMove().left} w-16 h-16 md:w-20 md:h-20 p-2 rounded-full font-bold text-white md:hover:scale-125 duration-200 shadow-lg mr-3 md:ml-3 border-red-500 border-solid border-2 `}>
<X size={40} class={`${colorSwipeMove().left} icon-button inline-block `}/>
</button>
<button onclick={()=>showProfile()} class={`${colorSwipeMove().up} " w-14 h-14 md:w-16 md:h-16 disabled:opacity-10 border-cyan-300 border-solid border-2 p-2 rounded-full font-bold text-white md:hover:scale-125 duration-200 shadow-lg mx-3 align-bottom "`}>
<AlignLeft size={30} class={`${colorSwipeMove().up} " icon-button w-6 inline-block"`}/>
<button onclick={()=>showProfile()} class={`${colorSwipeMove().up} w-14 h-14 md:w-16 md:h-16 disabled:opacity-10 border-cyan-300 border-solid border-2 p-2 rounded-full font-bold text-white md:hover:scale-125 duration-200 shadow-lg mr-3 md:ml-3 align-bottom `}>
<AlignLeft size={30} class={`${colorSwipeMove().up} icon-button w-6 inline-block `}/>
</button>
<button disabled={undoDisabled()} onclick={()=>SwipeUndo()} class={`${colorSwipeMove().down} " w-14 h-14 md:w-16 md:h-16 disabled:opacity-10 disabled:hover:scale-100 border-orange-300 border-solid border-2 p-2 rounded-full font-bold text-white md:hover:scale-125 duration-200 shadow-lg mx-3 align-bottom "`}>
<Undo2 size={30} class={`${colorSwipeMove().down} " icon-button w-6 inline-block"`}/>
<button disabled={undoDisabled()} onclick={()=>SwipeUndo()} class={`${colorSwipeMove().down} w-14 h-14 md:w-16 md:h-16 disabled:opacity-60 disabled:hover:scale-100 disabled:border-gray-500 disabled:text-gray-500 text-orange-300 border-orange-300 border-solid border-2 p-2 rounded-full font-bold md:hover:scale-125 duration-200 shadow-lg mr-3 md:ml-3 align-bottom `}>
<Undo2 size={30} class={`${colorSwipeMove().down} w-6 inline-block `}/>
</button>
<button onclick={()=>buttonSwipe("right")} class={`${colorSwipeMove().right} " w-16 h-16 md:w-20 md:h-20 p-2 rounded-full font-bold text-white md:hover:scale-125 duration-200 shadow-lg mx-3 border-emerald-400 border-solid border-2 "`}>
<Heart size={40} class={`${colorSwipeMove().right} " icon-button inline-block fill-emerald-400 "`}/>
<button onclick={()=>buttonSwipe("right")} class={`${colorSwipeMove().right} w-16 h-16 md:w-20 md:h-20 p-2 rounded-full font-bold text-white md:hover:scale-125 duration-200 shadow-lg mr-3 md:ml-3 border-emerald-400 border-solid border-2 `}>
<Heart size={40} class={`${colorSwipeMove().right} icon-button inline-block fill-emerald-400 `}/>
</button>
</div>
{charsList().list?.length === 0 ? <NoMatches /> : null}
Expand All @@ -214,12 +221,16 @@ const DSwipeCard: Component<{ character: AppSchema.Character;match: Any }> = (p
const age = (props.character.persona.attributes.age) ? props.character.persona.attributes.age[0].split(" ")[0] : '';
return (
<div class="absolute w-full max-w-5xl">
<SwipeCard zindex="5" class="bg-[var(--bg-800)] border-[var(--bg-800)] fixed w-96 h-96 right-[5%] left-[5%] md:right-[10%] md:left-[10%] sm:w-9/12 sm:h-3/4 sm:max-w-[550px] sm:max-h-[550px] lg:right-[calc(14%-18.5rem)] m-auto shadow-lg max-w-[90%] max-h-[90%] border-solid border-[10px] md:border-[20px] rounded-lg"
<SwipeCard zindex="5" class=" max-h-[calc(100%-14em)] bg-[var(--bg-800)] border-[var(--bg-800)] fixed w-96 h-96 right-[5%] left-[5%] md:right-[10%] md:left-[10%] sm:w-9/12 sm:h-3/4 sm:max-w-[550px] sm:max-h-[550px] lg:right-[calc(14%-18.5rem)] m-auto shadow-lg max-w-[90%] border-solid border-[10px] md:border-[20px] rounded-lg"
threshold="300" rotationmultiplier="7.5" maxrotation="90" snapbackduration="300" bouncepower="0.1" id={props.character._id} apiRef={apiRef} onSwipe={props.swipeAction} onMove={props.swipeMovement}>
<div class="absolute bg-cover max-w-full max-h-full w-full h-full" style={{ "background-image": `url(${getAssetUrl(props.character.avatar)})` }} >
<div class="w-full absolute size bottom-4 sm:bottom-10 sm:text-5xl p-2 text-3xl text-white text-shadow"><span class=" font-black ">{props.character.name}</span> {age}</div>
<div class=" h-28 bottom-0 z-10 bg-gradient-to-b from-transparent to-[var(--bg-800)] absolute bg-cover max-w-full max-h-full w-full " >

</div>
<div class=" absolute bg-cover max-w-full max-h-full w-full h-full" style={{ "background-image": `url(${getAssetUrl(props.character.avatar)})` }} >

<div class="z-20 w-full absolute size bottom-4 sm:bottom-10 sm:text-5xl p-2 text-3xl text-white text-shadow"><span class=" font-black ">{props.character.name}</span> {age}</div>
<Suspense>
<div class="absolute bottom-1 h-6 overflow-hidden sm:h-10">
<div class="absolute z-20 bottom-2 h-6 overflow-hidden sm:h-10">
<For each={props.character.persona.attributes.likes}>
{(attr) => <div class=" border capitalize float-left px-2 py-1 rounded-md bg-[var(--hl-900)] bg-opacity-80 m-1 text-[8px] sm:text-[12px] sm:py-2">{attr}</div>}
</For>
Expand Down
2 changes: 1 addition & 1 deletion web/shared/ProfileCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -73,7 +73,7 @@ const ProfileCard: Component<{ character: AppSchema.Character; href: string }> =
<hr class=" mt-8 opacity-40 w-[calc(100%-5rem)] ml-24"/>
<div class=" relative -ml-3 -top-4 text-shadow inline-block mr-3"><Globe2 class="inline mr-1 w-10 text-[var(--hl-200)]"/>Country</div>
<div class=" w-full">
<div class="first-letter:capitalize mx-1 border text-xs inline-block mb-3 p-1 px-2 rounded-xl bg-[var(--hl-900)]" >{props.character.persona?.attributes?.country2||""}</div>
<div class="first-letter:capitalize mx-1 border text-xs inline-block mb-3 p-1 px-2 rounded-xl bg-[var(--hl-900)]" >{props.character.persona?.attributes?.country||""}</div>
</div>
</Show>
</blockquote>
Expand Down