sidebar: remove unused modification components
This commit is contained in:
parent
a858877545
commit
db5bfe9f7f
3 changed files with 0 additions and 304 deletions
|
|
@ -1,49 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import type { Snippet } from 'svelte'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
title: string
|
|
||||||
visible?: boolean
|
|
||||||
children: Snippet
|
|
||||||
}
|
|
||||||
|
|
||||||
let { title, visible = true, children }: Props = $props()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
{#if visible}
|
|
||||||
<div class="modification-section">
|
|
||||||
<h3>{title}</h3>
|
|
||||||
<div class="modification-content">
|
|
||||||
{@render children()}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@use '$src/themes/colors' as colors;
|
|
||||||
@use '$src/themes/spacing' as spacing;
|
|
||||||
@use '$src/themes/typography' as typography;
|
|
||||||
@use '$src/themes/layout' as layout;
|
|
||||||
|
|
||||||
.modification-section {
|
|
||||||
margin-bottom: spacing.$unit-3x;
|
|
||||||
padding: spacing.$unit-2x;
|
|
||||||
background: colors.$grey-90;
|
|
||||||
border-radius: layout.$item-corner;
|
|
||||||
|
|
||||||
h3 {
|
|
||||||
font-size: typography.$font-regular;
|
|
||||||
font-weight: typography.$medium;
|
|
||||||
color: var(--text-secondary, colors.$grey-40);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
margin: 0 0 spacing.$unit-2x 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
.modification-content {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: spacing.$unit;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,83 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
interface Props {
|
|
||||||
label: string
|
|
||||||
value: string | number
|
|
||||||
suffix?: string
|
|
||||||
icon?: string
|
|
||||||
variant?: 'default' | 'enhanced' | 'max'
|
|
||||||
class?: string
|
|
||||||
}
|
|
||||||
|
|
||||||
let {
|
|
||||||
label,
|
|
||||||
value,
|
|
||||||
suffix = '',
|
|
||||||
icon,
|
|
||||||
variant = 'default',
|
|
||||||
class: className = ''
|
|
||||||
}: Props = $props()
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="stat-modifier {variant} {className}">
|
|
||||||
{#if icon}
|
|
||||||
<img src={icon} alt="" class="stat-icon" />
|
|
||||||
{/if}
|
|
||||||
<span class="label">{label}</span>
|
|
||||||
<span class="value">{value}{suffix}</span>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@use '$src/themes/colors' as colors;
|
|
||||||
@use '$src/themes/spacing' as spacing;
|
|
||||||
@use '$src/themes/typography' as typography;
|
|
||||||
@use '$src/themes/layout' as layout;
|
|
||||||
@use '$src/themes/effects' as effects;
|
|
||||||
|
|
||||||
.stat-modifier {
|
|
||||||
display: flex;
|
|
||||||
justify-content: space-between;
|
|
||||||
align-items: center;
|
|
||||||
padding: spacing.$unit;
|
|
||||||
background: colors.$grey-90;
|
|
||||||
border-radius: layout.$item-corner-small;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
|
|
||||||
.stat-icon {
|
|
||||||
width: spacing.$unit-2x;
|
|
||||||
height: spacing.$unit-2x;
|
|
||||||
margin-right: spacing.$unit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.label {
|
|
||||||
font-size: typography.$font-small;
|
|
||||||
color: var(--text-secondary, colors.$grey-50);
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
|
|
||||||
.value {
|
|
||||||
font-size: typography.$font-regular;
|
|
||||||
font-weight: typography.$medium;
|
|
||||||
color: var(--text-primary, colors.$grey-10);
|
|
||||||
text-align: right;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.enhanced {
|
|
||||||
background: colors.$grey-85;
|
|
||||||
box-shadow: effects.$hover-shadow;
|
|
||||||
|
|
||||||
.value {
|
|
||||||
color: var(--color-success, #4caf50);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
&.max {
|
|
||||||
background: linear-gradient(135deg, colors.$grey-85, colors.$grey-80);
|
|
||||||
box-shadow: effects.$hover-shadow;
|
|
||||||
|
|
||||||
.value {
|
|
||||||
color: #ffd700;
|
|
||||||
font-weight: typography.$bold;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -1,172 +0,0 @@
|
||||||
<script lang="ts">
|
|
||||||
import UncapIndicator from '$lib/components/uncap/UncapIndicator.svelte'
|
|
||||||
import { formatUncapLevel, formatTranscendenceStep } from '$lib/utils/modificationFormatters'
|
|
||||||
import StatModifierItem from './StatModifierItem.svelte'
|
|
||||||
|
|
||||||
interface Props {
|
|
||||||
type: 'character' | 'weapon' | 'summon'
|
|
||||||
uncapLevel?: number | null
|
|
||||||
transcendenceStep?: number | null
|
|
||||||
maxUncap?: number
|
|
||||||
special?: boolean
|
|
||||||
flb?: boolean
|
|
||||||
ulb?: boolean
|
|
||||||
transcendence?: boolean
|
|
||||||
showIndicator?: boolean
|
|
||||||
}
|
|
||||||
|
|
||||||
let {
|
|
||||||
type,
|
|
||||||
uncapLevel = 0,
|
|
||||||
transcendenceStep = 0,
|
|
||||||
maxUncap = 3,
|
|
||||||
special = false,
|
|
||||||
flb = false,
|
|
||||||
ulb = false,
|
|
||||||
transcendence = false,
|
|
||||||
showIndicator = true
|
|
||||||
}: Props = $props()
|
|
||||||
|
|
||||||
function getMaxPossibleUncap(): number {
|
|
||||||
if (transcendence) return 6
|
|
||||||
if (ulb) return 5
|
|
||||||
if (flb) return 4
|
|
||||||
return maxUncap || 3
|
|
||||||
}
|
|
||||||
|
|
||||||
function getUncapStatus(): string {
|
|
||||||
const current = uncapLevel || 0
|
|
||||||
const max = getMaxPossibleUncap()
|
|
||||||
|
|
||||||
if (current >= max) return 'Max'
|
|
||||||
return `${current} / ${max}`
|
|
||||||
}
|
|
||||||
|
|
||||||
function isMaxUncap(): boolean {
|
|
||||||
return (uncapLevel || 0) >= getMaxPossibleUncap()
|
|
||||||
}
|
|
||||||
|
|
||||||
function isMaxTranscendence(): boolean {
|
|
||||||
return transcendenceStep === 5
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<div class="uncap-status-display">
|
|
||||||
{#if showIndicator}
|
|
||||||
<div class="uncap-indicator-wrapper">
|
|
||||||
<UncapIndicator
|
|
||||||
{type}
|
|
||||||
{uncapLevel}
|
|
||||||
transcendenceStage={transcendenceStep}
|
|
||||||
{special}
|
|
||||||
{flb}
|
|
||||||
{ulb}
|
|
||||||
{transcendence}
|
|
||||||
editable={false}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="uncap-details">
|
|
||||||
<StatModifierItem
|
|
||||||
label="Uncap Level"
|
|
||||||
value={formatUncapLevel(uncapLevel)}
|
|
||||||
variant={isMaxUncap() ? 'max' : 'default'}
|
|
||||||
/>
|
|
||||||
|
|
||||||
{#if transcendence && transcendenceStep && transcendenceStep > 0}
|
|
||||||
<StatModifierItem
|
|
||||||
label="Transcendence"
|
|
||||||
value={formatTranscendenceStep(transcendenceStep)}
|
|
||||||
variant={isMaxTranscendence() ? 'max' : 'enhanced'}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
|
|
||||||
<div class="available-uncaps">
|
|
||||||
<span class="label">Available Upgrades</span>
|
|
||||||
<div class="uncap-badges">
|
|
||||||
{#if flb}
|
|
||||||
<span class="badge" class:active={(uncapLevel ?? 0) >= 4}>FLB</span>
|
|
||||||
{/if}
|
|
||||||
{#if ulb}
|
|
||||||
<span class="badge" class:active={(uncapLevel ?? 0) >= 5}>ULB</span>
|
|
||||||
{/if}
|
|
||||||
{#if transcendence}
|
|
||||||
<span class="badge" class:active={(transcendenceStep ?? 0) > 0}>Trans</span>
|
|
||||||
{/if}
|
|
||||||
{#if !flb && !ulb && !transcendence}
|
|
||||||
<span class="badge standard">Standard</span>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<style lang="scss">
|
|
||||||
@use '$src/themes/colors' as colors;
|
|
||||||
@use '$src/themes/spacing' as spacing;
|
|
||||||
@use '$src/themes/typography' as typography;
|
|
||||||
@use '$src/themes/layout' as layout;
|
|
||||||
|
|
||||||
.uncap-status-display {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: spacing.$unit-2x;
|
|
||||||
|
|
||||||
.uncap-indicator-wrapper {
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
padding: spacing.$unit-2x;
|
|
||||||
background: colors.$grey-90;
|
|
||||||
border-radius: layout.$item-corner;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uncap-details {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
gap: spacing.$unit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.available-uncaps {
|
|
||||||
padding: spacing.$unit;
|
|
||||||
background: colors.$grey-90;
|
|
||||||
border-radius: layout.$item-corner-small;
|
|
||||||
|
|
||||||
.label {
|
|
||||||
display: block;
|
|
||||||
font-size: typography.$font-small;
|
|
||||||
color: var(--text-secondary, colors.$grey-50);
|
|
||||||
margin-bottom: spacing.$unit;
|
|
||||||
}
|
|
||||||
|
|
||||||
.uncap-badges {
|
|
||||||
display: flex;
|
|
||||||
gap: spacing.$unit;
|
|
||||||
flex-wrap: wrap;
|
|
||||||
|
|
||||||
.badge {
|
|
||||||
padding: spacing.$unit-half spacing.$unit;
|
|
||||||
background: colors.$grey-85;
|
|
||||||
border-radius: layout.$item-corner-small;
|
|
||||||
font-size: typography.$font-tiny;
|
|
||||||
color: var(--text-tertiary, colors.$grey-60);
|
|
||||||
text-transform: uppercase;
|
|
||||||
letter-spacing: 0.5px;
|
|
||||||
font-weight: typography.$medium;
|
|
||||||
transition: all 0.2s ease;
|
|
||||||
|
|
||||||
&.active {
|
|
||||||
background: var(--color-success-bg, rgba(76, 175, 80, 0.2));
|
|
||||||
color: var(--color-success, #4caf50);
|
|
||||||
border: 1px solid var(--color-success, #4caf50);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.standard {
|
|
||||||
background: colors.$grey-85;
|
|
||||||
color: var(--text-secondary, colors.$grey-50);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
Loading…
Reference in a new issue