mirror of
https://github.com/MadeBaruna/paimon-moe.git
synced 2025-03-26 08:22:56 +01:00
Increase parity between character and weapon edit modals
This commit is contained in:
ehnba
parent
882177fb82
commit
e9c83cff55
2 changed files with 112 additions and 125 deletions
|
|
@ -1,7 +1,6 @@
|
||||||
<script>
|
<script>
|
||||||
import { t } from 'svelte-i18n';
|
import { t } from 'svelte-i18n';
|
||||||
|
|
||||||
import { onMount } from 'svelte';
|
|
||||||
import { fade } from 'svelte/transition';
|
import { fade } from 'svelte/transition';
|
||||||
import { mdiCheckCircleOutline, mdiClose, mdiInformationOutline } from '@mdi/js';
|
import { mdiCheckCircleOutline, mdiClose, mdiInformationOutline } from '@mdi/js';
|
||||||
|
|
||||||
|
|
@ -14,7 +13,6 @@
|
||||||
|
|
||||||
import { characterExp } from '../data/characterExp';
|
import { characterExp } from '../data/characterExp';
|
||||||
import { characters, isTravelerId, minCharacterLevel, maxCharacterLevel } from '../data/characters';
|
import { characters, isTravelerId, minCharacterLevel, maxCharacterLevel } from '../data/characters';
|
||||||
import { talent } from '../data/talent';
|
|
||||||
import { updateTodo } from '../stores/todo';
|
import { updateTodo } from '../stores/todo';
|
||||||
import { itemList } from '../data/itemList';
|
import { itemList } from '../data/itemList';
|
||||||
import * as calculator from '../functions/resourceCalculator';
|
import * as calculator from '../functions/resourceCalculator';
|
||||||
|
|
|
||||||
|
|
@ -4,10 +4,8 @@
|
||||||
import { fade } from 'svelte/transition';
|
import { fade } from 'svelte/transition';
|
||||||
import { mdiStar, mdiClose, mdiInformationOutline, mdiCheckCircleOutline } from '@mdi/js';
|
import { mdiStar, mdiClose, mdiInformationOutline, mdiCheckCircleOutline } from '@mdi/js';
|
||||||
|
|
||||||
import Select from './Select.svelte';
|
|
||||||
import Input from './Input.svelte';
|
import Input from './Input.svelte';
|
||||||
import AscensionSelector from './AscensionSelector.svelte';
|
import AscensionSelector from './AscensionSelector.svelte';
|
||||||
import WeaponSelect from './WeaponSelect.svelte';
|
|
||||||
import Checkbox from './Checkbox.svelte';
|
import Checkbox from './Checkbox.svelte';
|
||||||
import Check from './Check.svelte';
|
import Check from './Check.svelte';
|
||||||
import Button from './Button.svelte';
|
import Button from './Button.svelte';
|
||||||
|
|
@ -200,66 +198,65 @@
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<div class="modal bg-item rounded-xl p-4">
|
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4 bg-item rounded-xl px-4 py-8">
|
||||||
<div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-2 xl:grid-cols-3 gap-4">
|
<div>
|
||||||
<div>
|
<!-- Todo item banner -->
|
||||||
<!-- Todo item banner -->
|
<div class="flex items-center mb-4 p-3 rounded-md text-white bg-item">
|
||||||
<div class="flex items-center mb-4 p-3 rounded-md text-white bg-item">
|
<img
|
||||||
<img
|
class="h-8 inline-block mr-2"
|
||||||
class="h-8 inline-block mr-2"
|
src={`/images/weapons/${todo.weapon ? todo.weapon.id : 'any_weapon_1'}.png`}
|
||||||
src={`/images/weapons/${todo.weapon ? todo.weapon.id : 'any_weapon_1'}.png`}
|
alt={todo.weapon ? todo.weapon.name : `Unknown Weapon`} />
|
||||||
alt={todo.weapon ? todo.weapon.name : `Unknown Weapon`} />
|
<div class="flex-1">
|
||||||
<div class="flex-1">
|
<p class="font-bold">{todo.weapon ? $t(todo.weapon.name) : 'Weapon'}</p>
|
||||||
<p class="font-bold">{todo.weapon ? $t(todo.weapon.name) : 'Weapon'}</p>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<div>
|
|
||||||
<p class="text-white text-center mt-3 mb-2">{$t('calculator.weapon.current')}</p>
|
|
||||||
<Input
|
|
||||||
className="mb-2"
|
|
||||||
on:change={onChange}
|
|
||||||
type="number"
|
|
||||||
min={1}
|
|
||||||
max={80}
|
|
||||||
bind:value={currentLevel}
|
|
||||||
placeholder={$t('calculator.weapon.inputCurrentLevel')}
|
|
||||||
/>
|
|
||||||
<Input
|
|
||||||
className="mb-2"
|
|
||||||
on:change={onChange}
|
|
||||||
type="number"
|
|
||||||
min={0}
|
|
||||||
bind:value={currentExp}
|
|
||||||
placeholder={$t('calculator.weapon.inputCurrentExp')}
|
|
||||||
/>
|
|
||||||
{#if withAscension}
|
|
||||||
<AscensionSelector min={minAscension} bind:value={currentAscension} on:change={onChange} />
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
<div>
|
|
||||||
<p class="text-white text-center mt-3 mb-2">{$t('calculator.weapon.intended')}</p>
|
|
||||||
<Input
|
|
||||||
className="mb-2"
|
|
||||||
on:change={onChange}
|
|
||||||
type="number"
|
|
||||||
min={currentLevel}
|
|
||||||
max={80}
|
|
||||||
bind:value={intendedLevel}
|
|
||||||
placeholder={$t('calculator.weapon.inputIntendedLevel')}
|
|
||||||
/>
|
|
||||||
{#if withAscension}
|
|
||||||
<AscensionSelector
|
|
||||||
min={Math.max(currentAscension, minIntendedAscension)}
|
|
||||||
bind:value={intendedAscension}
|
|
||||||
on:change={onChange}
|
|
||||||
/>
|
|
||||||
{/if}
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="flex flex-col pl-1">
|
<div>
|
||||||
<p class="text-white text-center md:text-left mb-1">{$t('calculator.weapon.resource')}</p>
|
<div>
|
||||||
|
<p class="text-white text-center mt-3 mb-2">{$t('calculator.weapon.current')}</p>
|
||||||
|
<Input
|
||||||
|
className="mb-2"
|
||||||
|
on:change={onChange}
|
||||||
|
type="number"
|
||||||
|
min={1}
|
||||||
|
max={80}
|
||||||
|
bind:value={currentLevel}
|
||||||
|
placeholder={$t('calculator.weapon.inputCurrentLevel')}
|
||||||
|
/>
|
||||||
|
<Input
|
||||||
|
className="mb-2"
|
||||||
|
on:change={onChange}
|
||||||
|
type="number"
|
||||||
|
min={0}
|
||||||
|
bind:value={currentExp}
|
||||||
|
placeholder={$t('calculator.weapon.inputCurrentExp')}
|
||||||
|
/>
|
||||||
|
{#if withAscension}
|
||||||
|
<AscensionSelector min={minAscension} bind:value={currentAscension} on:change={onChange} />
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<p class="text-white text-center mt-3 mb-2">{$t('calculator.weapon.intended')}</p>
|
||||||
|
<Input
|
||||||
|
className="mb-2"
|
||||||
|
on:change={onChange}
|
||||||
|
type="number"
|
||||||
|
min={currentLevel}
|
||||||
|
max={80}
|
||||||
|
bind:value={intendedLevel}
|
||||||
|
placeholder={$t('calculator.weapon.inputIntendedLevel')}
|
||||||
|
/>
|
||||||
|
{#if withAscension}
|
||||||
|
<AscensionSelector
|
||||||
|
min={Math.max(currentAscension, minIntendedAscension)}
|
||||||
|
bind:value={intendedAscension}
|
||||||
|
on:change={onChange}
|
||||||
|
/>
|
||||||
|
{/if}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="flex flex-col pl-1">
|
||||||
|
<p class="text-white text-center md:text-left mb-1">{$t('calculator.weapon.resource')}</p>
|
||||||
{#each selectableExpItems as item}
|
{#each selectableExpItems as item}
|
||||||
<div class="mb-1">
|
<div class="mb-1">
|
||||||
<Checkbox disabled={item.disabled} bind:checked={item.selected} on:change={onChange}>
|
<Checkbox disabled={item.disabled} bind:checked={item.selected} on:change={onChange}>
|
||||||
|
|
@ -294,77 +291,76 @@
|
||||||
{/each}
|
{/each}
|
||||||
</div>
|
</div>
|
||||||
{/if}
|
{/if}
|
||||||
<div transition:fade={{ duration: 100 }} class="wrap-table bg-background rounded-xl p-4 mt-2 block md:inline-block">
|
{/if}
|
||||||
<table>
|
<div transition:fade={{ duration: 100 }} class="wrap-table bg-background rounded-xl p-4 mt-2 block md:inline-block">
|
||||||
|
<table>
|
||||||
|
{#if calculated}
|
||||||
|
<tr>
|
||||||
|
<td class="text-right border-b border-gray-700 py-1">
|
||||||
|
<span class="text-white mr-2 whitespace-nowrap">
|
||||||
|
{numberFormat.format(moraNeeded)}
|
||||||
|
<Icon size={0.5} path={mdiClose} />
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
<td class="border-b border-gray-700 py-1">
|
||||||
|
<span class="text-white">
|
||||||
|
<span class="w-6 inline-block">
|
||||||
|
<img class="h-6 inline-block mr-1" src="/images/mora.png" alt="Mora" />
|
||||||
|
</span>
|
||||||
|
{$t('calculator.weapon.mora')}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{#each levelMaterials as stack, i}
|
||||||
<tr>
|
<tr>
|
||||||
<td class="text-right border-b border-gray-700 py-1">
|
<td class="text-right border-b border-gray-700 py-1">
|
||||||
<span class="text-white mr-2 whitespace-nowrap">
|
<span class="text-white mr-2 whitespace-nowrap">
|
||||||
{numberFormat.format(moraNeeded)}
|
{stack.amount}
|
||||||
<Icon size={0.5} path={mdiClose} />
|
<Icon size={0.5} path={mdiClose} />
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
<td class="border-b border-gray-700 py-1">
|
<td class="border-b border-gray-700 py-1">
|
||||||
<span class="text-white">
|
<span class="text-white">
|
||||||
<span class="w-6 inline-block">
|
<span class="w-6 inline-block">
|
||||||
<img class="h-6 inline-block mr-1" src="/images/mora.png" alt="Mora" />
|
<img class="h-6 inline-block mr-1" src={`/images/items/${stack.material.id}.png`} alt={stack.material.name} />
|
||||||
</span>
|
</span>
|
||||||
{$t('calculator.weapon.mora')}
|
{$t(stack.material.name)}
|
||||||
</span>
|
</span>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
{#each levelMaterials as stack, i}
|
{/each}
|
||||||
<tr>
|
{#if ascensionMaterials != null}
|
||||||
<td class="text-right border-b border-gray-700 py-1">
|
{#each ascensionMaterials as [id, stack]}
|
||||||
<span class="text-white mr-2 whitespace-nowrap">
|
{#if stack.amount > 0}
|
||||||
{stack.amount}
|
<tr>
|
||||||
<Icon size={0.5} path={mdiClose} />
|
<td class="text-right border-b border-gray-700 py-1">
|
||||||
</span>
|
<span class="text-white mr-2 whitespace-nowrap">
|
||||||
</td>
|
{stack.amount}
|
||||||
<td class="border-b border-gray-700 py-1">
|
<Icon size={0.5} path={mdiClose} />
|
||||||
<span class="text-white">
|
|
||||||
<span class="w-6 inline-block">
|
|
||||||
<img class="h-6 inline-block mr-1" src={`/images/items/${stack.material.id}.png`} alt={stack.material.name} />
|
|
||||||
</span>
|
</span>
|
||||||
{$t(stack.material.name)}
|
</td>
|
||||||
</span>
|
<td class="border-b border-gray-700 py-1">
|
||||||
</td>
|
<span class="text-white">
|
||||||
</tr>
|
<span class="w-6 inline-block">
|
||||||
|
<img class="h-6 inline-block mr-1" src={`/images/items/${id}.png`} alt={stack.item.name} />
|
||||||
|
</span>
|
||||||
|
{$t(stack.item.name)}
|
||||||
|
</span>
|
||||||
|
</td>
|
||||||
|
</tr>
|
||||||
|
{/if}
|
||||||
{/each}
|
{/each}
|
||||||
{#if ascensionMaterials != null}
|
{/if}
|
||||||
{#each ascensionMaterials as [id, stack]}
|
{#if expWasted > 0}
|
||||||
{#if stack.amount > 0}
|
<tr>
|
||||||
<tr>
|
<td />
|
||||||
<td class="text-right border-b border-gray-700 py-1">
|
<td class="text-red-400 py-1">{expWasted} {$t('calculator.weapon.expWasted')}</td>
|
||||||
<span class="text-white mr-2 whitespace-nowrap">
|
</tr>
|
||||||
{stack.amount}
|
{/if}
|
||||||
<Icon size={0.5} path={mdiClose} />
|
{/if}
|
||||||
</span>
|
</table>
|
||||||
</td>
|
</div>
|
||||||
<td class="border-b border-gray-700 py-1">
|
<div class="flex gap-2">
|
||||||
<span class="text-white">
|
|
||||||
<span class="w-6 inline-block">
|
|
||||||
<img class="h-6 inline-block mr-1" src={`/images/items/${id}.png`} alt={stack.item.name} />
|
|
||||||
</span>
|
|
||||||
{$t(stack.item.name)}
|
|
||||||
</span>
|
|
||||||
</td>
|
|
||||||
</tr>
|
|
||||||
{/if}
|
|
||||||
{/each}
|
|
||||||
{/if}
|
|
||||||
{#if expWasted > 0}
|
|
||||||
<tr>
|
|
||||||
<td />
|
|
||||||
<td class="text-red-400 py-1">{expWasted} {$t('calculator.weapon.expWasted')}</td>
|
|
||||||
</tr>
|
|
||||||
{/if}
|
|
||||||
</table>
|
|
||||||
</div>
|
|
||||||
{:else}
|
|
||||||
<!-- Placeholder for calculation results. Also fills space so confirm and cancel buttons will always be at the bottom. -->
|
|
||||||
<div class="bg-background-secondary grow mt-2 rounded-xl"></div>
|
|
||||||
{/if}
|
|
||||||
<div class="flex gap-2">
|
|
||||||
<Button className="mt-2 w-min grow" on:click={cancel}>
|
<Button className="mt-2 w-min grow" on:click={cancel}>
|
||||||
{$t('todo.edit.cancel')}
|
{$t('todo.edit.cancel')}
|
||||||
</Button>
|
</Button>
|
||||||
|
|
@ -379,18 +375,11 @@
|
||||||
<span in:fade={{ duration: 100 }}>{$t('todo.edit.confirm')}</span>
|
<span in:fade={{ duration: 100 }}>{$t('todo.edit.confirm')}</span>
|
||||||
{/if}
|
{/if}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<style lang="postcss">
|
<style lang="postcss">
|
||||||
.modal {
|
|
||||||
@apply bg-item;
|
|
||||||
@apply px-4;
|
|
||||||
@apply py-8;
|
|
||||||
}
|
|
||||||
|
|
||||||
.wrap-table {
|
.wrap-table {
|
||||||
overflow: hidden scroll;
|
overflow: hidden scroll;
|
||||||
flex-basis: 20vh;
|
flex-basis: 20vh;
|
||||||
|
|
|
||||||
Loading…
Add table
Reference in a new issue