Add locale on character and weapon dropdown
Made Baruna
parent
8c8738777d
commit
21b7928dce
|
|
@ -1,4 +1,5 @@
|
|||
<script>
|
||||
import { t } from 'svelte-i18n';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import VirtualList from './VirtualList.svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
|
@ -104,6 +105,67 @@
|
|||
$: iconClasses = focused ? 'transform rotate-180' : '';
|
||||
</script>
|
||||
|
||||
<svelte:window on:click={onWindowClick} on:keydown={onKeyDown} />
|
||||
|
||||
<div class="select-none relative" bind:this={container}>
|
||||
<div
|
||||
class={`flex w-full relative items-center px-4 bg-background rounded-2xl h-14 focus-within:outline-none
|
||||
focus-within:border-primary border-2 border-transparent ease-in duration-100 ${classes}`}
|
||||
on:click={toggleOptions}
|
||||
>
|
||||
{#if !nothingSelected}
|
||||
<img class="w-6 h-6 mr-2" src={`/images/characters/${selected.id}.png`} alt={selected.name} />
|
||||
{/if}
|
||||
<input
|
||||
bind:this={input}
|
||||
class={`bg-transparent focus:outline-none h-full max-w-full ${nothingSelected ? 'text-gray-500' : 'text-white'}`}
|
||||
{placeholder}
|
||||
value={nothingSelected || focused ? search : label}
|
||||
on:input={onInput}
|
||||
/>
|
||||
{#if selected}
|
||||
<div class="absolute right-0 mr-4 cursor-pointer" on:click|stopPropagation={() => select(null)}>
|
||||
<Icon path={mdiCloseCircle} color="white" className={`${iconClasses}`} />
|
||||
</div>
|
||||
{:else}
|
||||
<Icon
|
||||
path={mdiChevronDown}
|
||||
color="white"
|
||||
className={`absolute right-0 mr-4 duration-100 ease-in ${iconClasses}`}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{#if focused}
|
||||
<div
|
||||
transition:fade={{ duration: 100 }}
|
||||
class="options bg-item rounded-2xl absolute mt-2 pl-2 w-full min-h-full z-50 flex flex-col text-white shadow-xl border border-background"
|
||||
>
|
||||
{#if filteredCharacter.length}
|
||||
<VirtualList
|
||||
itemHeight={48}
|
||||
height={`${maxItemRow * 48 + 16}px`}
|
||||
items={filteredCharacter}
|
||||
let:item={[id, character]}
|
||||
let:index
|
||||
>
|
||||
<span
|
||||
on:click={() => select(character)}
|
||||
on:mouseenter={() => onHover(index)}
|
||||
class={`p-3 rounded-xl cursor-pointer flex mr-2
|
||||
${index === 0 ? 'mt-2' : ''}
|
||||
${index === characters.length ? 'mb-2' : ''}
|
||||
${!nothingSelected && selected.id === id ? 'text-primary font-semibold' : ''}
|
||||
${hoveredIndex === index ? 'hovered' : ''}`}
|
||||
>
|
||||
<img class="w-6 h-6 mr-2" src={`/images/characters/${id}.png`} alt={character.name} />
|
||||
<span class="flex-1">{$t(character.name)}</span>
|
||||
</span>
|
||||
</VirtualList>
|
||||
{:else}<span class="p-3 rounded-xl cursor-pointer flex mr-2 my-2"> Character not found </span>{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.hovered {
|
||||
@apply text-white !important;
|
||||
|
|
@ -115,61 +177,3 @@
|
|||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:window on:click={onWindowClick} on:keydown={onKeyDown} />
|
||||
|
||||
<div class="select-none relative" bind:this={container}>
|
||||
<div
|
||||
class={`flex w-full relative items-center px-4 bg-background rounded-2xl h-14 focus-within:outline-none
|
||||
focus-within:border-primary border-2 border-transparent ease-in duration-100 ${classes}`}
|
||||
on:click={toggleOptions}>
|
||||
{#if !nothingSelected}
|
||||
<img class="w-6 h-6 mr-2" src={`/images/characters/${selected.id}.png`} alt={selected.name} />
|
||||
{/if}
|
||||
<input
|
||||
bind:this={input}
|
||||
class={`bg-transparent focus:outline-none h-full max-w-full ${nothingSelected ? 'text-gray-500' : 'text-white'}`}
|
||||
{placeholder}
|
||||
value={nothingSelected || focused ? search : label}
|
||||
on:input={onInput} />
|
||||
{#if selected}
|
||||
<div class="absolute right-0 mr-4 cursor-pointer" on:click|stopPropagation={() => select(null)}>
|
||||
<Icon
|
||||
path={mdiCloseCircle}
|
||||
color="white"
|
||||
className={`${iconClasses}`} />
|
||||
</div>
|
||||
{:else}
|
||||
<Icon
|
||||
path={mdiChevronDown}
|
||||
color="white"
|
||||
className={`absolute right-0 mr-4 duration-100 ease-in ${iconClasses}`} />
|
||||
{/if}
|
||||
</div>
|
||||
{#if focused}
|
||||
<div
|
||||
transition:fade={{ duration: 100 }}
|
||||
class="options bg-item rounded-2xl absolute mt-2 pl-2 w-full min-h-full z-50 flex flex-col text-white shadow-xl border border-background">
|
||||
{#if filteredCharacter.length}
|
||||
<VirtualList
|
||||
itemHeight={48}
|
||||
height={`${maxItemRow * 48 + 16}px`}
|
||||
items={filteredCharacter}
|
||||
let:item={[id, character]}
|
||||
let:index>
|
||||
<span
|
||||
on:click={() => select(character)}
|
||||
on:mouseenter={() => onHover(index)}
|
||||
class={`p-3 rounded-xl cursor-pointer flex mr-2
|
||||
${index === 0 ? 'mt-2' : ''}
|
||||
${index === characters.length ? 'mb-2' : ''}
|
||||
${!nothingSelected && selected.id === id ? 'text-primary font-semibold' : ''}
|
||||
${hoveredIndex === index ? 'hovered' : ''}`}>
|
||||
<img class="w-6 h-6 mr-2" src={`/images/characters/${id}.png`} alt={character.name} />
|
||||
<span class="flex-1">{character.name}</span>
|
||||
</span>
|
||||
</VirtualList>
|
||||
{:else}<span class="p-3 rounded-xl cursor-pointer flex mr-2 my-2"> Character not found </span>{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
<script>
|
||||
import { t } from 'svelte-i18n';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import VirtualList from './VirtualList.svelte';
|
||||
import { fade } from 'svelte/transition';
|
||||
|
|
@ -106,6 +107,67 @@
|
|||
$: iconClasses = focused ? 'transform rotate-180' : '';
|
||||
</script>
|
||||
|
||||
<svelte:window on:click={onWindowClick} on:keydown={onKeyDown} />
|
||||
|
||||
<div class="select-none relative" bind:this={container}>
|
||||
<div
|
||||
class={`flex w-full relative items-center px-4 bg-background rounded-2xl h-14 focus-within:outline-none
|
||||
focus-within:border-primary border-2 border-transparent ease-in duration-100 ${classes}`}
|
||||
on:click={toggleOptions}
|
||||
>
|
||||
{#if !nothingSelected}
|
||||
<img class="w-6 h-6 mr-2" src={`/images/weapons/${selected.id}.png`} alt={selected.name} />
|
||||
{/if}
|
||||
<input
|
||||
bind:this={input}
|
||||
class={`bg-transparent focus:outline-none h-full max-w-full ${nothingSelected ? 'text-gray-500' : 'text-white'}`}
|
||||
{placeholder}
|
||||
value={nothingSelected || focused ? search : label}
|
||||
on:input={onInput}
|
||||
/>
|
||||
{#if selected}
|
||||
<div class="absolute right-0 mr-4 cursor-pointer" on:click|stopPropagation={() => select(null)}>
|
||||
<Icon path={mdiCloseCircle} color="white" className={`${iconClasses}`} />
|
||||
</div>
|
||||
{:else}
|
||||
<Icon
|
||||
path={mdiChevronDown}
|
||||
color="white"
|
||||
className={`absolute right-0 mr-4 duration-100 ease-in ${iconClasses}`}
|
||||
/>
|
||||
{/if}
|
||||
</div>
|
||||
{#if focused}
|
||||
<div
|
||||
transition:fade={{ duration: 100 }}
|
||||
class="options bg-item rounded-2xl absolute mt-2 pl-2 w-full min-h-full z-50 flex flex-col text-white shadow-xl border border-background"
|
||||
>
|
||||
{#if filteredWeapons.length}
|
||||
<VirtualList
|
||||
itemHeight={48}
|
||||
height={`${maxItemRow * 48 + 16}px`}
|
||||
items={filteredWeapons}
|
||||
let:item={[id, weapon]}
|
||||
let:index
|
||||
>
|
||||
<span
|
||||
on:click={() => select(weapon)}
|
||||
on:mouseenter={() => onHover(index)}
|
||||
class={`p-3 rounded-xl cursor-pointer flex mr-2
|
||||
${index === 0 ? 'mt-2' : ''}
|
||||
${index === weapons.length ? 'mb-2' : ''}
|
||||
${!nothingSelected && selected.id === id ? 'text-primary font-semibold' : ''}
|
||||
${hoveredIndex === index ? 'hovered' : ''}`}
|
||||
>
|
||||
<img class="w-6 h-6 mr-2" src={`/images/weapons/${id}.png`} alt={weapon.name} />
|
||||
<span class="flex-1">{$t(weapon.name)}</span>
|
||||
</span>
|
||||
</VirtualList>
|
||||
{:else}<span class="p-3 rounded-xl cursor-pointer flex mr-2 my-2"> Weapon not found </span>{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
||||
<style>
|
||||
.hovered {
|
||||
@apply text-white !important;
|
||||
|
|
@ -117,58 +179,3 @@
|
|||
overflow-y: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
<svelte:window on:click={onWindowClick} on:keydown={onKeyDown} />
|
||||
|
||||
<div class="select-none relative" bind:this={container}>
|
||||
<div
|
||||
class={`flex w-full relative items-center px-4 bg-background rounded-2xl h-14 focus-within:outline-none
|
||||
focus-within:border-primary border-2 border-transparent ease-in duration-100 ${classes}`}
|
||||
on:click={toggleOptions}>
|
||||
{#if !nothingSelected}
|
||||
<img class="w-6 h-6 mr-2" src={`/images/weapons/${selected.id}.png`} alt={selected.name} />
|
||||
{/if}
|
||||
<input
|
||||
bind:this={input}
|
||||
class={`bg-transparent focus:outline-none h-full max-w-full ${nothingSelected ? 'text-gray-500' : 'text-white'}`}
|
||||
{placeholder}
|
||||
value={nothingSelected || focused ? search : label}
|
||||
on:input={onInput} />
|
||||
{#if selected}
|
||||
<div class="absolute right-0 mr-4 cursor-pointer" on:click|stopPropagation={() => select(null)}>
|
||||
<Icon path={mdiCloseCircle} color="white" className={`${iconClasses}`} />
|
||||
</div>
|
||||
{:else}
|
||||
<Icon
|
||||
path={mdiChevronDown}
|
||||
color="white"
|
||||
className={`absolute right-0 mr-4 duration-100 ease-in ${iconClasses}`} />
|
||||
{/if}
|
||||
</div>
|
||||
{#if focused}
|
||||
<div
|
||||
transition:fade={{ duration: 100 }}
|
||||
class="options bg-item rounded-2xl absolute mt-2 pl-2 w-full min-h-full z-50 flex flex-col text-white shadow-xl border border-background">
|
||||
{#if filteredWeapons.length}
|
||||
<VirtualList
|
||||
itemHeight={48}
|
||||
height={`${maxItemRow * 48 + 16}px`}
|
||||
items={filteredWeapons}
|
||||
let:item={[id, weapon]}
|
||||
let:index>
|
||||
<span
|
||||
on:click={() => select(weapon)}
|
||||
on:mouseenter={() => onHover(index)}
|
||||
class={`p-3 rounded-xl cursor-pointer flex mr-2
|
||||
${index === 0 ? 'mt-2' : ''}
|
||||
${index === weapons.length ? 'mb-2' : ''}
|
||||
${!nothingSelected && selected.id === id ? 'text-primary font-semibold' : ''}
|
||||
${hoveredIndex === index ? 'hovered' : ''}`}>
|
||||
<img class="w-6 h-6 mr-2" src={`/images/weapons/${id}.png`} alt={weapon.name} />
|
||||
<span class="flex-1">{weapon.name}</span>
|
||||
</span>
|
||||
</VirtualList>
|
||||
{:else}<span class="p-3 rounded-xl cursor-pointer flex mr-2 my-2"> Weapon not found </span>{/if}
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -445,7 +445,8 @@
|
|||
"percent": "Percent",
|
||||
"pityAverage": "Pity AVG",
|
||||
"character": "Character",
|
||||
"weapon": "Weapon"
|
||||
"weapon": "Weapon",
|
||||
"winRateOff": "Win 50:50"
|
||||
},
|
||||
"note": [
|
||||
"Wish history is not updated automatically, please import again to update your history!",
|
||||
|
|
@ -939,4 +940,4 @@
|
|||
"dataSynced": "Data has been synced!",
|
||||
"driveError": "Drive sync not available right now 😔"
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -673,9 +673,12 @@
|
|||
class="bg-background px-4 py-2 rounded-xl flex flex-col items-center justify-center mr-4"
|
||||
style="height: 200px;"
|
||||
>
|
||||
<p class="text-gray-400 font-body">Total</p>
|
||||
<p class="text-gray-400 font-body">{$t('wish.summary.total')}</p>
|
||||
<p class="text-gray-400 font-body text-xl font-bold">{total}</p>
|
||||
<p class="text-gray-400 font-body mt-2 flex items-center">5<Icon size={0.7} path={mdiStar} /> Pity</p>
|
||||
<p class="text-gray-400 font-body mt-2 flex items-center">
|
||||
5<Icon size={0.7} path={mdiStar} />
|
||||
{$t('wish.detail.pity')}
|
||||
</p>
|
||||
<p class="text-legendary-from font-body text-xl font-bold flex items-center">
|
||||
{legendary}
|
||||
{#if nextRateUp}
|
||||
|
|
@ -685,7 +688,10 @@
|
|||
</span>
|
||||
{/if}
|
||||
</p>
|
||||
<p class="text-gray-400 font-body mt-2 flex items-center">4<Icon size={0.7} path={mdiStar} /> Pity</p>
|
||||
<p class="text-gray-400 font-body mt-2 flex items-center">
|
||||
4<Icon size={0.7} path={mdiStar} />
|
||||
{$t('wish.detail.pity')}
|
||||
</p>
|
||||
<p class="text-rare-from font-body text-xl font-bold">{rare}</p>
|
||||
</div>
|
||||
<div class="bg-background rounded-xl inline-block mb-4 p-2 pie-chart mr-4">
|
||||
|
|
|
|||
|
|
@ -77,7 +77,9 @@
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-rare-from font-semibold pl-4 md:pl-4 pr-2 md:pr-4 border-t border-gray-700"> └ {$t('wish.summary.character')} </td>
|
||||
<td class="text-rare-from font-semibold pl-4 md:pl-4 pr-2 md:pr-4 border-t border-gray-700">
|
||||
└ {$t('wish.summary.character')}
|
||||
</td>
|
||||
<td class="text-rare-from font-semibold pr-2 md:pr-4 text-right border-t border-gray-700">
|
||||
{numberFormat.format(avg.rare.character.total)}
|
||||
</td>
|
||||
|
|
@ -89,7 +91,9 @@
|
|||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td class="text-rare-from font-semibold pl-4 md:pl-4 pr-2 md:pr-4 border-t border-gray-700"> └ {$t('wish.summary.weapon')} </td>
|
||||
<td class="text-rare-from font-semibold pl-4 md:pl-4 pr-2 md:pr-4 border-t border-gray-700">
|
||||
└ {$t('wish.summary.weapon')}
|
||||
</td>
|
||||
<td class="text-rare-from font-semibold pr-2 md:pr-4 text-right border-t border-gray-700">
|
||||
{numberFormat.format(avg.rare.weapon.total)}
|
||||
</td>
|
||||
|
|
@ -102,7 +106,9 @@
|
|||
</tr>
|
||||
{#if avg.rare.rateOff !== undefined}
|
||||
<tr>
|
||||
<td class="text-rare-from font-semibold pl-4 md:pl-4 pr-2 md:pr-4 border-t border-gray-700"> └ Win 50:50 </td>
|
||||
<td class="text-rare-from font-semibold pl-4 md:pl-4 pr-2 md:pr-4 border-t border-gray-700">
|
||||
└ {$t('wish.summary.winRateOff')}
|
||||
</td>
|
||||
<td class="text-rare-from font-semibold pr-2 md:pr-4 text-right border-t border-gray-700">
|
||||
{numberFormat.format(avg.rare.rateOff.total)}
|
||||
</td>
|
||||
|
|
|
|||
Loading…
Reference in New Issue