feat(CharacterSlot): remove touch from characters
This commit is contained in:
@@ -3,8 +3,6 @@
|
|||||||
Renders a character with particular styling based on proximity, isPast, weight, fontAName, and fontBName.
|
Renders a character with particular styling based on proximity, isPast, weight, fontAName, and fontBName.
|
||||||
-->
|
-->
|
||||||
<script lang="ts">
|
<script lang="ts">
|
||||||
import { appliedFontsManager } from '$entities/Font';
|
|
||||||
import { getFontUrl } from '$entities/Font/lib';
|
|
||||||
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
import { cn } from '$shared/shadcn/utils/shadcn-utils';
|
||||||
import { comparisonStore } from '../../../model';
|
import { comparisonStore } from '../../../model';
|
||||||
|
|
||||||
@@ -28,33 +26,6 @@ let { char, proximity, isPast }: Props = $props();
|
|||||||
const fontA = $derived(comparisonStore.fontA);
|
const fontA = $derived(comparisonStore.fontA);
|
||||||
const fontB = $derived(comparisonStore.fontB);
|
const fontB = $derived(comparisonStore.fontB);
|
||||||
const typography = $derived(comparisonStore.typography);
|
const typography = $derived(comparisonStore.typography);
|
||||||
|
|
||||||
$effect(() => {
|
|
||||||
if (!fontA || !fontB) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const urlA = getFontUrl(fontA, typography.weight);
|
|
||||||
const urlB = getFontUrl(fontB, typography.weight);
|
|
||||||
|
|
||||||
if (!urlA || !urlB) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
appliedFontsManager.touch([{
|
|
||||||
id: fontA.id,
|
|
||||||
weight: typography.weight,
|
|
||||||
name: fontA.name,
|
|
||||||
url: urlA,
|
|
||||||
isVariable: fontA.features.isVariable,
|
|
||||||
}, {
|
|
||||||
id: fontB.id,
|
|
||||||
weight: typography.weight,
|
|
||||||
name: fontB.name,
|
|
||||||
url: urlB,
|
|
||||||
isVariable: fontB.features.isVariable,
|
|
||||||
}]);
|
|
||||||
});
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
{#if fontA && fontB}
|
{#if fontA && fontB}
|
||||||
@@ -67,13 +38,18 @@ $effect(() => {
|
|||||||
style:font-weight={typography.weight}
|
style:font-weight={typography.weight}
|
||||||
style:font-size={`${typography.renderedSize}px`}
|
style:font-size={`${typography.renderedSize}px`}
|
||||||
style:transform="
|
style:transform="
|
||||||
scale({1 + proximity * 0.3})
|
scale({1 + proximity * 0.3}) translateY({-proximity * 12}px) rotateY({proximity *
|
||||||
translateY({-proximity * 12}px)
|
25 *
|
||||||
rotateY({proximity * 25 * (isPast ? -1 : 1)}deg)
|
(isPast ? -1 : 1)}deg)
|
||||||
"
|
"
|
||||||
style:filter="brightness({1 + proximity * 0.2}) contrast({1 + proximity * 0.1})"
|
style:filter="brightness({1 + proximity * 0.2}) contrast({1 +
|
||||||
style:text-shadow={proximity > 0.5 ? '0 0 15px rgba(99,102,241,0.3)' : 'none'}
|
proximity * 0.1})"
|
||||||
style:will-change={proximity > 0 ? 'transform, font-family, color' : 'auto'}
|
style:text-shadow={proximity > 0.5
|
||||||
|
? '0 0 15px rgba(99,102,241,0.3)'
|
||||||
|
: 'none'}
|
||||||
|
style:will-change={proximity > 0
|
||||||
|
? 'transform, font-family, color'
|
||||||
|
: 'auto'}
|
||||||
>
|
>
|
||||||
{char === ' ' ? '\u00A0' : char}
|
{char === ' ' ? '\u00A0' : char}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user