mirror of
https://github.com/MadeBaruna/paimon-moe.git
synced 2025-01-06 02:35:25 +01:00
Update placement
This commit is contained in:
Made Baruna
parent
b8042ca655
commit
f4b9f8bb30
11 changed files with 551 additions and 487 deletions
|
|
@ -2,9 +2,10 @@
|
|||
export let type;
|
||||
export let variant;
|
||||
export let id;
|
||||
export let style;
|
||||
|
||||
let _class = '';
|
||||
export { _class as class };
|
||||
</script>
|
||||
|
||||
<div class={_class} id="nn_{type === 'mobile' ? 'mobile_' : ''}{variant}{id}" />
|
||||
<div {style} class={_class} id="nn_{type === 'mobile' ? 'mobile_' : ''}{variant}{id}" />
|
||||
|
|
|
|||
|
|
@ -11,11 +11,6 @@
|
|||
import SidebarMoreItem from './SidebarMoreItem.svelte';
|
||||
|
||||
import { showSidebar } from '../../stores/sidebar';
|
||||
import Button from '../Button.svelte';
|
||||
|
||||
import DonateModal from '../DonateModal.svelte';
|
||||
|
||||
const { open: openModal } = getContext('simple-modal');
|
||||
|
||||
export let segment;
|
||||
export let mobile = false;
|
||||
|
|
@ -34,17 +29,6 @@
|
|||
$: currentLocale = languages.find((e) => e.id === $locale.substring(0, 2)) || { id: 'en', label: 'English' };
|
||||
$: locales = languages.filter((e) => e.id !== currentLocale.id);
|
||||
|
||||
function openDonationModal() {
|
||||
openModal(
|
||||
DonateModal,
|
||||
{},
|
||||
{
|
||||
closeButton: false,
|
||||
styleWindow: { background: '#25294A', width: '500px' },
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
function close() {
|
||||
showSidebar.set(false);
|
||||
}
|
||||
|
|
@ -159,10 +143,6 @@
|
|||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
<Button on:click={openDonationModal}>
|
||||
<img class="inline w-8 h-8" src="/images/mora.png" alt="donate" />
|
||||
{$t('sidebar.donate')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -32,7 +32,9 @@
|
|||
await checkLocalSave();
|
||||
|
||||
page.subscribe(() => {
|
||||
if (window.reloadAdSlots) window.reloadAdSlots();
|
||||
try {
|
||||
window.reloadAdSlots();
|
||||
} catch (error) {}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
|
@ -57,7 +59,7 @@
|
|||
{#if $preloading && $delayedPreloading}
|
||||
<div transition:fade class="loading-bar" />
|
||||
{/if}
|
||||
<div class="lg:ml-64 px-4 md:px-8 py-8 flex flex-col md:pb-32">
|
||||
<div class="lg:ml-64 px-4 md:px-8 py-8 flex flex-col md:pb-24">
|
||||
<p class="text-gray-400">
|
||||
{$t('footer.affliate')}<br />
|
||||
{$t('footer.copyright')}
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
import Icon from '../../components/Icon.svelte';
|
||||
import Select from '../../components/Select.svelte';
|
||||
import { pushToast } from '../../stores/toast';
|
||||
import Ad from '../../components/Ad.svelte';
|
||||
|
||||
export let data;
|
||||
|
||||
|
|
@ -297,154 +298,165 @@
|
|||
<meta property="og:description" content="Track your Genshin Impact achievement easily" />
|
||||
</svelte:head>
|
||||
|
||||
<div class="lg:ml-64 pt-20 px-4 lg:px-8 lg:pt-8 max-w-screen-xl">
|
||||
<div class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-2 mb-2 md:mb-0">
|
||||
<h1 class="font-display font-black text-3xl md:text-4xl text-white">{$t('achievement.title')}</h1>
|
||||
<div class="flex space-x-2">
|
||||
<p class="text-gray-400 text-xl rounded-xl bg-black bg-opacity-50 px-2 py-1">
|
||||
{finishedAchievement}
|
||||
{$t('achievement.of')}
|
||||
{totalAchievement}
|
||||
</p>
|
||||
<div class="text-gray-400 text-xl rounded-xl bg-black bg-opacity-50 px-2 py-1 flex items-center">
|
||||
<p>{obtainedPrimogem} {$t('achievement.of')} {totalPrimogem}</p>
|
||||
<img src="/images/primogem.png" class="w-4 h-4 ml-1" alt="primogem" />
|
||||
<div class="flex">
|
||||
<div class="lg:ml-64 pt-20 px-4 lg:px-8 lg:pt-8 max-w-screen-xl">
|
||||
<div class="flex flex-col md:flex-row items-center space-y-2 md:space-y-0 md:space-x-2 mb-2 md:mb-0">
|
||||
<h1 class="font-display font-black text-3xl md:text-4xl text-white">{$t('achievement.title')}</h1>
|
||||
<div class="flex space-x-2">
|
||||
<p class="text-gray-400 text-xl rounded-xl bg-black bg-opacity-50 px-2 py-1">
|
||||
{finishedAchievement}
|
||||
{$t('achievement.of')}
|
||||
{totalAchievement}
|
||||
</p>
|
||||
<div class="text-gray-400 text-xl rounded-xl bg-black bg-opacity-50 px-2 py-1 flex items-center">
|
||||
<p>{obtainedPrimogem} {$t('achievement.of')} {totalPrimogem}</p>
|
||||
<img src="/images/primogem.png" class="w-4 h-4 ml-1" alt="primogem" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-2 items-center">
|
||||
<Button
|
||||
size="sm"
|
||||
on:click={() => {
|
||||
showFilter = !showFilter;
|
||||
}}
|
||||
>
|
||||
<Icon path={mdiFilter} color="white" />
|
||||
</Button>
|
||||
<div class="pl-4 text-white">
|
||||
<Checkbox checked={sort} on:change={() => changeSort(!sort)}>{$t('achievement.sort')}</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex space-x-2 items-center">
|
||||
<Button
|
||||
size="sm"
|
||||
on:click={() => {
|
||||
showFilter = !showFilter;
|
||||
}}
|
||||
>
|
||||
<Icon path={mdiFilter} color="white" />
|
||||
</Button>
|
||||
<div class="pl-4 text-white">
|
||||
<Checkbox checked={sort} on:change={() => changeSort(!sort)}>{$t('achievement.sort')}</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{#if showFilter}
|
||||
<div class="mb-2 flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2">
|
||||
<div
|
||||
class="flex flex-1 relative items-center bg-background rounded-2xl h-14
|
||||
{#if showFilter}
|
||||
<div class="mb-2 flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2">
|
||||
<div
|
||||
class="flex flex-1 relative items-center bg-background rounded-2xl h-14
|
||||
focus-within:border-primary border-2 border-transparent ease-in duration-100"
|
||||
style="min-height: 3.5rem;"
|
||||
>
|
||||
<input
|
||||
placeholder={$t('achievement.search')}
|
||||
on:input={search}
|
||||
bind:value={nameFilter}
|
||||
class="pl-4 w-full min-h-full pr-4 text-white placeholder-gray-500 leading-none bg-transparent border-none focus:outline-none"
|
||||
style="min-height: 3.5rem;"
|
||||
>
|
||||
<input
|
||||
placeholder={$t('achievement.search')}
|
||||
on:input={search}
|
||||
bind:value={nameFilter}
|
||||
class="pl-4 w-full min-h-full pr-4 text-white placeholder-gray-500 leading-none bg-transparent border-none focus:outline-none"
|
||||
/>
|
||||
</div>
|
||||
<Select
|
||||
multiselect
|
||||
options={versions}
|
||||
bind:selected={versionFilter}
|
||||
placeholder={$t('achievement.version')}
|
||||
className="w-full md:w-40"
|
||||
on:change={updateSelectFilter}
|
||||
/>
|
||||
<Select
|
||||
multiselect
|
||||
options={types}
|
||||
bind:selected={typeFilter}
|
||||
placeholder={$t('achievement.type')}
|
||||
className="w-full md:w-56"
|
||||
on:change={updateSelectFilter}
|
||||
/>
|
||||
</div>
|
||||
<Select
|
||||
multiselect
|
||||
options={versions}
|
||||
bind:selected={versionFilter}
|
||||
placeholder={$t('achievement.version')}
|
||||
className="w-full md:w-40"
|
||||
on:change={updateSelectFilter}
|
||||
/>
|
||||
<Select
|
||||
multiselect
|
||||
options={types}
|
||||
bind:selected={typeFilter}
|
||||
placeholder={$t('achievement.type')}
|
||||
className="w-full md:w-56"
|
||||
on:change={updateSelectFilter}
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
<div class="flex flex-col lg:flex-row space-y-3 lg:space-y-0 lg:space-x-3">
|
||||
<div class="flex flex-col space-y-2 lg:h-screen lg:overflow-auto lg:sticky lg:pr-1 pb-4 category">
|
||||
{#each categories as category, index (category.id)}
|
||||
<div
|
||||
class="rounded-xl p-2 cursor-pointer flex flex-col {category.id === active ? 'bg-primary' : 'bg-item'}"
|
||||
on:click={() => changeCategory(category.id, index)}
|
||||
>
|
||||
<p class="font-semibold {category.id === active ? 'text-black' : 'text-white'}">{category.name}</p>
|
||||
<div class="flex">
|
||||
<p class="flex-1 {category.id === active ? 'text-gray-900' : 'text-gray-400'}">
|
||||
{category.finished}/{category.total}
|
||||
({((category.finished / category.total) * 100).toFixed(0)}%)
|
||||
</p>
|
||||
<p class={category.id === active ? 'text-gray-900' : 'text-gray-400'}>
|
||||
{category.primogem}
|
||||
</p>
|
||||
<img src="/images/primogem.png" class="w-6 h-6 ml-1" alt="primogem" />
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
<div class="flex flex-col space-y-2 flex-1 pt-20 lg:pt-2" bind:this={achievementContainer}>
|
||||
{#each list as el, index}
|
||||
{#if Array.isArray(el)}
|
||||
<div class="bg-item rounded-xl px-2 py-1 text-white flex flex-col">
|
||||
{#each el as it, i}
|
||||
<div
|
||||
class="flex items-center {i !== 0 ? 'border-t border-gray-700 pt-1' : ''}
|
||||
{i > 0 && el[i - 1].checked !== true ? 'opacity-25' : ''}"
|
||||
>
|
||||
<div class="flex-1 pr-1">
|
||||
<p class="font-semibold">
|
||||
{it.name}
|
||||
<span class="ml-1 rounded-xl bg-background px-2 text-gray-400 text-sm font-normal select-none">
|
||||
{it.ver}
|
||||
</span>
|
||||
{#if it.commissions}
|
||||
<span class="ml-1 rounded-xl bg-background px-2 text-gray-400 text-sm font-normal select-none">
|
||||
{$t('achievement.commissions')}
|
||||
</span>
|
||||
{/if}
|
||||
</p>
|
||||
<p class="text-gray-400">{it.desc}</p>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<p class="mr-1">{it.reward}</p>
|
||||
<img src="/images/primogem.png" class="w-8 h-8" alt="primogem" />
|
||||
</div>
|
||||
<div>
|
||||
<Check
|
||||
checked={list[index][i].checked}
|
||||
on:change={() => toggle({ index, subindex: i, primogem: it.reward })}
|
||||
inverted
|
||||
disabled={i > 0 && !el[i - 1].checked}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="bg-item rounded-xl px-2 py-1 text-white flex items-center">
|
||||
<div class="flex-1 pr-1">
|
||||
<p class="font-semibold">
|
||||
{el.name}
|
||||
<span class="ml-1 rounded-xl bg-background px-2 text-gray-400 text-sm font-normal select-none">
|
||||
{el.ver}
|
||||
</span>
|
||||
{#if el.commissions}
|
||||
<span class="ml-1 rounded-xl bg-background px-2 text-gray-400 text-sm font-normal select-none">
|
||||
{$t('achievement.commissions')}
|
||||
</span>
|
||||
{/if}
|
||||
{/if}
|
||||
<div class="flex flex-col lg:flex-row space-y-3 lg:space-y-0 lg:space-x-3">
|
||||
<div class="flex flex-col space-y-2 lg:h-screen lg:overflow-auto lg:sticky lg:pr-1 pb-4 category">
|
||||
{#each categories as category, index (category.id)}
|
||||
<div
|
||||
class="rounded-xl p-2 cursor-pointer flex flex-col {category.id === active ? 'bg-primary' : 'bg-item'}"
|
||||
on:click={() => changeCategory(category.id, index)}
|
||||
>
|
||||
<p class="font-semibold {category.id === active ? 'text-black' : 'text-white'}">{category.name}</p>
|
||||
<div class="flex">
|
||||
<p class="flex-1 {category.id === active ? 'text-gray-900' : 'text-gray-400'}">
|
||||
{category.finished}/{category.total}
|
||||
({((category.finished / category.total) * 100).toFixed(0)}%)
|
||||
</p>
|
||||
<p class="text-gray-400">{el.desc}</p>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<p class="mr-1">{el.reward}</p>
|
||||
<img src="/images/primogem.png" class="w-8 h-8" alt="primogem" />
|
||||
</div>
|
||||
<div>
|
||||
<Check checked={list[index].checked} on:change={() => toggle({ index, primogem: el.reward })} inverted />
|
||||
<p class={category.id === active ? 'text-gray-900' : 'text-gray-400'}>
|
||||
{category.primogem}
|
||||
</p>
|
||||
<img src="/images/primogem.png" class="w-6 h-6 ml-1" alt="primogem" />
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
{/each}
|
||||
</div>
|
||||
<div class="flex flex-col space-y-2 flex-1 pt-20 lg:pt-2" bind:this={achievementContainer}>
|
||||
{#each list as el, index}
|
||||
{#if Array.isArray(el)}
|
||||
<div class="bg-item rounded-xl px-2 py-1 text-white flex flex-col">
|
||||
{#each el as it, i}
|
||||
<div
|
||||
class="flex items-center {i !== 0 ? 'border-t border-gray-700 pt-1' : ''}
|
||||
{i > 0 && el[i - 1].checked !== true ? 'opacity-25' : ''}"
|
||||
>
|
||||
<div class="flex-1 pr-1">
|
||||
<p class="font-semibold">
|
||||
{it.name}
|
||||
<span class="ml-1 rounded-xl bg-background px-2 text-gray-400 text-sm font-normal select-none">
|
||||
{it.ver}
|
||||
</span>
|
||||
{#if it.commissions}
|
||||
<span class="ml-1 rounded-xl bg-background px-2 text-gray-400 text-sm font-normal select-none">
|
||||
{$t('achievement.commissions')}
|
||||
</span>
|
||||
{/if}
|
||||
</p>
|
||||
<p class="text-gray-400">{it.desc}</p>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<p class="mr-1">{it.reward}</p>
|
||||
<img src="/images/primogem.png" class="w-8 h-8" alt="primogem" />
|
||||
</div>
|
||||
<div>
|
||||
<Check
|
||||
checked={list[index][i].checked}
|
||||
on:change={() => toggle({ index, subindex: i, primogem: it.reward })}
|
||||
inverted
|
||||
disabled={i > 0 && !el[i - 1].checked}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/each}
|
||||
</div>
|
||||
{:else}
|
||||
<div class="bg-item rounded-xl px-2 py-1 text-white flex items-center">
|
||||
<div class="flex-1 pr-1">
|
||||
<p class="font-semibold">
|
||||
{el.name}
|
||||
<span class="ml-1 rounded-xl bg-background px-2 text-gray-400 text-sm font-normal select-none">
|
||||
{el.ver}
|
||||
</span>
|
||||
{#if el.commissions}
|
||||
<span class="ml-1 rounded-xl bg-background px-2 text-gray-400 text-sm font-normal select-none">
|
||||
{$t('achievement.commissions')}
|
||||
</span>
|
||||
{/if}
|
||||
</p>
|
||||
<p class="text-gray-400">{el.desc}</p>
|
||||
</div>
|
||||
<div class="flex items-center">
|
||||
<p class="mr-1">{el.reward}</p>
|
||||
<img src="/images/primogem.png" class="w-8 h-8" alt="primogem" />
|
||||
</div>
|
||||
<div>
|
||||
<Check
|
||||
checked={list[index].checked}
|
||||
on:change={() => toggle({ index, primogem: el.reward })}
|
||||
inverted
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="hidden xl:block">
|
||||
<Ad class="ml-4 mt-8" type="desktop" variant="mpu" id="1" />
|
||||
</div>
|
||||
</div>
|
||||
<Ad type="desktop" variant="lb" id="2" />
|
||||
<Ad type="mobile" variant="lb" id="1" />
|
||||
|
||||
<style>
|
||||
.category {
|
||||
|
|
|
|||
|
|
@ -14,6 +14,7 @@
|
|||
import Button from '../../components/Button.svelte';
|
||||
import Icon from '../../components/Icon.svelte';
|
||||
import HowToModal from '../../components/CalculatorHowToModal.svelte';
|
||||
import Ad from '../../components/Ad.svelte';
|
||||
|
||||
const { open: openModal } = getContext('simple-modal');
|
||||
|
||||
|
|
@ -81,6 +82,8 @@
|
|||
</h1>
|
||||
</div>
|
||||
<WeaponCalculator />
|
||||
<Ad class="flex justify-center mt-8 mb-2" type="desktop" variant="lb" id="1" />
|
||||
<Ad class="flex justify-center my-4" type="mobile" variant="mpu" id="2" />
|
||||
<div
|
||||
id="character"
|
||||
class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mt-8 mb-2"
|
||||
|
|
@ -100,6 +103,8 @@
|
|||
</h1>
|
||||
</div>
|
||||
<CharacterCalculator />
|
||||
<Ad class="flex justify-center mt-8 mb-2" type="desktop" variant="lb" id="3" />
|
||||
<Ad class="flex justify-center my-4" type="mobile" variant="mpu" id="1" />
|
||||
<div
|
||||
id="resin"
|
||||
class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mt-8 mb-2"
|
||||
|
|
|
|||
|
|
@ -30,6 +30,7 @@
|
|||
import { weaponList } from '../../data/weaponList';
|
||||
import artifacts from '../../data/artifacts/en.json';
|
||||
import weapons from '../../data/weapons/en.json';
|
||||
import Ad from '../../components/Ad.svelte';
|
||||
|
||||
const rarityColor = {
|
||||
1: 'text-white',
|
||||
|
|
@ -183,182 +184,186 @@
|
|||
content="Genshin Impact {character.name} build guide, constellation, and skill information"
|
||||
/>
|
||||
</svelte:head>
|
||||
<div class="lg:ml-64 pt-20 lg:pt-8 max-w-screen-xl">
|
||||
<div class="flex flex-col xl:flex-row items-start">
|
||||
<img
|
||||
class="character-image object-cover md:pl-8 self-center xl:self-auto"
|
||||
src="/images/characters/full/{id}.png"
|
||||
alt={character.name}
|
||||
/>
|
||||
<div class="flex flex-col items-start mt-4 xl:mt-0 side-detail pt-4 xl:pt-0">
|
||||
<div class="flex items-center px-4 md:px-8">
|
||||
<h1 class="font-display font-black text-4xl leading-10 md:leading-normal md:text-5xl text-white mr-4 z-0">
|
||||
{character.name}
|
||||
</h1>
|
||||
<img
|
||||
class="h-10 mr-4 z-10 object-contain"
|
||||
src="/images/elements/{character.element.id}.png"
|
||||
alt={character.element.name}
|
||||
/>
|
||||
<div class="lg:ml-64 pt-20 lg:pt-8">
|
||||
<div class="flex">
|
||||
<div class="flex flex-col xl:flex-row items-start max-w-screen-xl">
|
||||
<img
|
||||
class="character-image object-cover md:pl-8 self-center xl:self-auto"
|
||||
src="/images/characters/full/{id}.png"
|
||||
alt={character.name}
|
||||
/>
|
||||
<div class="flex flex-col items-start mt-4 xl:mt-0 side-detail pt-4 xl:pt-0">
|
||||
<div class="flex items-center px-4 md:px-8">
|
||||
<h1 class="font-display font-black text-4xl leading-10 md:leading-normal md:text-5xl text-white mr-4 z-0">
|
||||
{character.name}
|
||||
</h1>
|
||||
<img
|
||||
class="h-10 mr-4 z-10 object-contain"
|
||||
src="/images/elements/{character.element.id}.png"
|
||||
alt={character.element.name}
|
||||
/>
|
||||
<div
|
||||
class="flex space-y-1 lg:space-y-0 lg:space-x-1 {editConstellation
|
||||
? 'flex-col'
|
||||
: ''} md:flex-row items-center"
|
||||
>
|
||||
{#if constellationCountTotal > -1}
|
||||
<p class="text-3xl text-gray-200 bg-black bg-opacity-50 rounded-xl px-2 font-semibold">
|
||||
C{constellationCountTotal}
|
||||
</p>
|
||||
{/if}
|
||||
{#if editConstellation}
|
||||
<div class="flex flex-wrap space-x-1">
|
||||
<Button size="sm" on:click={() => editConstellationCount(1)}>
|
||||
<Icon path={mdiPlus} />
|
||||
</Button>
|
||||
<Button size="sm" on:click={() => editConstellationCount(-1)}>
|
||||
<Icon path={mdiMinus} />
|
||||
</Button>
|
||||
<Button size="sm" on:click={saveConstellationCount}>
|
||||
<Icon path={mdiContentSave} />
|
||||
</Button>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="ml-2 rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2"
|
||||
on:click={() => {
|
||||
editConstellation = true;
|
||||
}}
|
||||
>
|
||||
<Icon path={mdiPencil} className="text-gray-400" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="flex space-y-1 lg:space-y-0 lg:space-x-1 {editConstellation
|
||||
? 'flex-col'
|
||||
: ''} md:flex-row items-center"
|
||||
class="{character.rarity === 5
|
||||
? 'text-legendary-from'
|
||||
: 'text-rare-from'} px-4 md:px-8 text-2xl flex items-center z-0 -mt-2 md:-mt-4"
|
||||
>
|
||||
{#if constellationCountTotal > -1}
|
||||
<p class="text-3xl text-gray-200 bg-black bg-opacity-50 rounded-xl px-2 font-semibold">
|
||||
C{constellationCountTotal}
|
||||
</p>
|
||||
{/if}
|
||||
{#if editConstellation}
|
||||
<div class="flex flex-wrap space-x-1">
|
||||
<Button size="sm" on:click={() => editConstellationCount(1)}>
|
||||
<Icon path={mdiPlus} />
|
||||
</Button>
|
||||
<Button size="sm" on:click={() => editConstellationCount(-1)}>
|
||||
<Icon path={mdiMinus} />
|
||||
</Button>
|
||||
<Button size="sm" on:click={saveConstellationCount}>
|
||||
<Icon path={mdiContentSave} />
|
||||
</Button>
|
||||
</div>
|
||||
{:else}
|
||||
<div
|
||||
class="ml-2 rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2"
|
||||
on:click={() => {
|
||||
editConstellation = true;
|
||||
}}
|
||||
>
|
||||
<Icon path={mdiPencil} className="text-gray-400" />
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="{character.rarity === 5
|
||||
? 'text-legendary-from'
|
||||
: 'text-rare-from'} px-4 md:px-8 text-2xl flex items-center z-0 -mt-2 md:-mt-4"
|
||||
>
|
||||
<Icon path={mdiStar} />
|
||||
<Icon path={mdiStar} />
|
||||
<Icon path={mdiStar} />
|
||||
<Icon path={mdiStar} />
|
||||
{#if character.rarity === 5}
|
||||
<Icon path={mdiStar} />
|
||||
{/if}
|
||||
<Icon path={mdiCircle} size={0.4} className="mx-2 mt-1" color="white" />
|
||||
<p class="text-base text-white font-semibold mt-1">{character.weapon.name}</p>
|
||||
</div>
|
||||
<p class="text-gray-200 px-4 md:px-8">{data.description}</p>
|
||||
<div class="flex flex-col md:flex-row mt-4 space-y-4 md:space-y-0 md:space-x-4 px-4 md:px-8">
|
||||
<div class="text-gray-200 rounded-xl border border-gray-200 border-opacity-25 p-4">
|
||||
<p>{$t('characters.talentBook')}</p>
|
||||
<div class="flex items-center mt-2">
|
||||
<div class="mr-2 h-12 w-12 bg-background rounded-xl p-1">
|
||||
<img src="/images/items/{bookId}.png" alt={book.name} class="h-full max-w-full object-contain" />
|
||||
<Icon path={mdiStar} />
|
||||
<Icon path={mdiStar} />
|
||||
<Icon path={mdiStar} />
|
||||
{#if character.rarity === 5}
|
||||
<Icon path={mdiStar} />
|
||||
{/if}
|
||||
<Icon path={mdiCircle} size={0.4} className="mx-2 mt-1" color="white" />
|
||||
<p class="text-base text-white font-semibold mt-1">{character.weapon.name}</p>
|
||||
</div>
|
||||
<p class="text-gray-200 px-4 md:px-8">{data.description}</p>
|
||||
<div class="flex flex-col md:flex-row mt-4 space-y-4 md:space-y-0 md:space-x-4 px-4 md:px-8">
|
||||
<div class="text-gray-200 rounded-xl border border-gray-200 border-opacity-25 p-4">
|
||||
<p>{$t('characters.talentBook')}</p>
|
||||
<div class="flex items-center mt-2">
|
||||
<div class="mr-2 h-12 w-12 bg-background rounded-xl p-1">
|
||||
<img src="/images/items/{bookId}.png" alt={book.name} class="h-full max-w-full object-contain" />
|
||||
</div>
|
||||
<p class="mb-1 font-semibold">{book.name}</p>
|
||||
</div>
|
||||
<p class="mb-1 font-semibold">{book.name}</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="text-gray-200 rounded-xl border border-gray-200 border-opacity-25 p-4">
|
||||
<p>{$t('characters.ascensionMaterial')}</p>
|
||||
<div class="flex items-center mt-2">
|
||||
{#each materials as material}
|
||||
{#if material.item.id !== 'none'}
|
||||
<div class="mr-2 h-12 w-12 bg-background rounded-xl p-1">
|
||||
<img
|
||||
src="/images/items/{material.item.id}.png"
|
||||
alt={material.item.name}
|
||||
title={material.item.name}
|
||||
class="h-full max-w-full object-contain mx-auto"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:px-4 mt-4 block overflow-x-auto whitespace-no-wrap w-screen md:w-auto">
|
||||
<div class="px-4" style="width: min-content;">
|
||||
<div class="table max-w-full rounded-xl border border-gray-200 border-opacity-25">
|
||||
<table class="text-gray-200 w-full">
|
||||
<tr>
|
||||
<td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
|
||||
{$t('characters.asc')}
|
||||
</td>
|
||||
<td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
|
||||
{$t('characters.lvl')}
|
||||
</td>
|
||||
<td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
|
||||
{$t('characters.hp')}
|
||||
</td>
|
||||
<td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
|
||||
{$t('characters.atk')}
|
||||
</td>
|
||||
<td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
|
||||
{$t('characters.def')}
|
||||
</td>
|
||||
<td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2"
|
||||
>{$t('characters.critRate')}
|
||||
</td>
|
||||
<td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2"
|
||||
>{$t('characters.critDamage')}
|
||||
</td>
|
||||
{#if data.statGrow !== 'critRate' && data.statGrow !== 'critDamage'}
|
||||
<td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
|
||||
{$t(`characters.${data.statGrow}`)}
|
||||
</td>
|
||||
<div class="text-gray-200 rounded-xl border border-gray-200 border-opacity-25 p-4">
|
||||
<p>{$t('characters.ascensionMaterial')}</p>
|
||||
<div class="flex items-center mt-2">
|
||||
{#each materials as material}
|
||||
{#if material.item.id !== 'none'}
|
||||
<div class="mr-2 h-12 w-12 bg-background rounded-xl p-1">
|
||||
<img
|
||||
src="/images/items/{material.item.id}.png"
|
||||
alt={material.item.name}
|
||||
title={material.item.name}
|
||||
class="h-full max-w-full object-contain mx-auto"
|
||||
/>
|
||||
</div>
|
||||
{/if}
|
||||
</tr>
|
||||
{#each showedIndex as index, i}
|
||||
{/each}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="md:px-4 mt-4 block overflow-x-auto whitespace-no-wrap w-screen md:w-auto">
|
||||
<div class="px-4" style="width: min-content;">
|
||||
<div class="table max-w-full rounded-xl border border-gray-200 border-opacity-25">
|
||||
<table class="text-gray-200 w-full">
|
||||
<tr>
|
||||
{#if i % 2 === 0}
|
||||
<td rowspan={2} class="text-center border-t border-gray-700 px-2">{ascen[i]}</td>
|
||||
{/if}
|
||||
<td class="text-center border-t border-gray-700 px-2">{level[i]}</td>
|
||||
<td class="text-center border-t border-gray-700 px-2">{Math.round(data.hp[index])}</td>
|
||||
<td class="text-center border-t border-gray-700 px-2">{Math.round(data.atk[index])}</td>
|
||||
<td class="text-center border-t border-gray-700 px-2">{Math.round(data.def[index])}</td>
|
||||
{#if data.statGrow === 'critRate'}
|
||||
<td class="text-center border-t border-gray-700 px-2">
|
||||
{numberFormat.format(data.critRate[index] * 100)}%
|
||||
</td>
|
||||
{:else}
|
||||
<td class="text-center border-t border-gray-700 px-2">5%</td>
|
||||
{/if}
|
||||
{#if data.statGrow === 'critDamage'}
|
||||
<td class="text-center border-t border-gray-700 px-2">
|
||||
{numberFormat.format(data.critDamage[index] * 100)}%
|
||||
</td>
|
||||
{:else}
|
||||
<td class="text-center border-t border-gray-700 px-2">50%</td>
|
||||
{/if}
|
||||
{#if data.statGrow !== 'critRate' && data.statGrow !== 'critDamage' && data.statGrow !== 'em'}
|
||||
<td class="text-center border-t border-gray-700 px-2">
|
||||
{numberFormat.format(data[data.statGrow][index] * 100)}%
|
||||
</td>
|
||||
{:else if data.statGrow === 'em'}
|
||||
<td class="text-center border-t border-gray-700 px-2">
|
||||
{numberFormat.format(data[data.statGrow][index])}
|
||||
<td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
|
||||
{$t('characters.asc')}
|
||||
</td>
|
||||
<td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
|
||||
{$t('characters.lvl')}
|
||||
</td>
|
||||
<td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
|
||||
{$t('characters.hp')}
|
||||
</td>
|
||||
<td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
|
||||
{$t('characters.atk')}
|
||||
</td>
|
||||
<td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
|
||||
{$t('characters.def')}
|
||||
</td>
|
||||
<td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2"
|
||||
>{$t('characters.critRate')}
|
||||
</td>
|
||||
<td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2"
|
||||
>{$t('characters.critDamage')}
|
||||
</td>
|
||||
{#if data.statGrow !== 'critRate' && data.statGrow !== 'critDamage'}
|
||||
<td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
|
||||
{$t(`characters.${data.statGrow}`)}
|
||||
</td>
|
||||
{/if}
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
{#each showedIndex as index, i}
|
||||
<tr>
|
||||
{#if i % 2 === 0}
|
||||
<td rowspan={2} class="text-center border-t border-gray-700 px-2">{ascen[i]}</td>
|
||||
{/if}
|
||||
<td class="text-center border-t border-gray-700 px-2">{level[i]}</td>
|
||||
<td class="text-center border-t border-gray-700 px-2">{Math.round(data.hp[index])}</td>
|
||||
<td class="text-center border-t border-gray-700 px-2">{Math.round(data.atk[index])}</td>
|
||||
<td class="text-center border-t border-gray-700 px-2">{Math.round(data.def[index])}</td>
|
||||
{#if data.statGrow === 'critRate'}
|
||||
<td class="text-center border-t border-gray-700 px-2">
|
||||
{numberFormat.format(data.critRate[index] * 100)}%
|
||||
</td>
|
||||
{:else}
|
||||
<td class="text-center border-t border-gray-700 px-2">5%</td>
|
||||
{/if}
|
||||
{#if data.statGrow === 'critDamage'}
|
||||
<td class="text-center border-t border-gray-700 px-2">
|
||||
{numberFormat.format(data.critDamage[index] * 100)}%
|
||||
</td>
|
||||
{:else}
|
||||
<td class="text-center border-t border-gray-700 px-2">50%</td>
|
||||
{/if}
|
||||
{#if data.statGrow !== 'critRate' && data.statGrow !== 'critDamage' && data.statGrow !== 'em'}
|
||||
<td class="text-center border-t border-gray-700 px-2">
|
||||
{numberFormat.format(data[data.statGrow][index] * 100)}%
|
||||
</td>
|
||||
{:else if data.statGrow === 'em'}
|
||||
<td class="text-center border-t border-gray-700 px-2">
|
||||
{numberFormat.format(data[data.statGrow][index])}
|
||||
</td>
|
||||
{/if}
|
||||
</tr>
|
||||
{/each}
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex mt-4 mx-4 md:mx-8">
|
||||
<Button className="mr-4" on:click={() => scrollToView(talentDiv)}>
|
||||
{$t('characters.talents')}
|
||||
</Button>
|
||||
<Button on:click={() => scrollToView(constellationDiv)}>
|
||||
{$t('characters.constellations')}
|
||||
</Button>
|
||||
<div class="flex mt-4 mx-4 md:mx-8">
|
||||
<Button className="mr-4" on:click={() => scrollToView(talentDiv)}>
|
||||
{$t('characters.talents')}
|
||||
</Button>
|
||||
<Button on:click={() => scrollToView(constellationDiv)}>
|
||||
{$t('characters.constellations')}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Ad class="ml-4" type="desktop" variant="mpu" id="1" />
|
||||
</div>
|
||||
<div class="flex flex-col mt-4 text-white px-4 md:px-8">
|
||||
<Ad class="flex justify-center my-4" type="mobile" variant="mpu" id="2" />
|
||||
<div class="flex flex-col mt-4 text-white px-4 md:px-8 max-w-screen-xl">
|
||||
{#if builds.length > 1}
|
||||
<div class="flex mt-4 items-center">
|
||||
{#each builds as item, i}
|
||||
|
|
@ -547,7 +552,8 @@
|
|||
>
|
||||
{$t('characters.source')}
|
||||
</a>
|
||||
<div class="flex flex-col mt-4 text-white px-4 md:px-8" bind:this={talentDiv}>
|
||||
<Ad class="ml-8 mt-4 mb-2" type="desktop" variant="lb" id="1" />
|
||||
<div class="flex flex-col mt-4 text-white px-4 md:px-8 max-w-screen-xl" bind:this={talentDiv}>
|
||||
<a href="/characters/{id}/#talents" class="font-black font-display text-2xl mt-4">
|
||||
{$t('characters.talents')}
|
||||
</a>
|
||||
|
|
@ -555,13 +561,15 @@
|
|||
<SkillCard {id} image="talent_2" data={data.elementalSkill} withQuote={true} />
|
||||
<SkillCard {id} image="talent_3" data={data.burst} withQuote={true} />
|
||||
</div>
|
||||
<div class="flex flex-col text-white px-4 md:px-8">
|
||||
<div class="flex flex-col text-white px-4 md:px-8 max-w-screen-xl">
|
||||
<p class="font-black font-display text-2xl mt-4">{$t('characters.passiveTalents')}</p>
|
||||
{#each data.passives as passive, i}
|
||||
<PassiveSkillCard {id} image="talent_{i + 4}" data={passive} />
|
||||
{/each}
|
||||
</div>
|
||||
<div class="flex flex-col text-white px-4 md:px-8" id="constellations" bind:this={constellationDiv}>
|
||||
<Ad class="ml-8 mt-4 mb-2" type="desktop" variant="lb" id="3" />
|
||||
<Ad class="flex justify-center mt-4 mb-2" type="mobile" variant="mpu" id="1" />
|
||||
<div class="flex flex-col text-white px-4 md:px-8 max-w-screen-xl" id="constellations" bind:this={constellationDiv}>
|
||||
<a href="/characters/{id}/#constellations" class="font-black font-display text-2xl mt-4">
|
||||
{$t('characters.constellations')}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -11,6 +11,7 @@
|
|||
import { readSave, updateSave } from '../../stores/saveManager';
|
||||
import Select from '../../components/Select.svelte';
|
||||
import Button from '../../components/Button.svelte';
|
||||
import Ad from '../../components/Ad.svelte';
|
||||
|
||||
const sortOptions = [
|
||||
{ label: $t('characters.name'), value: 'name' },
|
||||
|
|
@ -207,6 +208,13 @@
|
|||
}
|
||||
}
|
||||
|
||||
function changeViewType(val) {
|
||||
type = val;
|
||||
try {
|
||||
window.reloadAdSlots();
|
||||
} catch (error) {}
|
||||
}
|
||||
|
||||
onMount(async () => {
|
||||
await getConstellation();
|
||||
});
|
||||
|
|
@ -229,9 +237,7 @@
|
|||
<div class="flex text-white" style="height: fit-content;">
|
||||
<button
|
||||
class="{type === 'grid' ? 'bg-background' : 'bg-item'} p-2 rounded-l-xl cursor-pointer hover:bg-opacity-75"
|
||||
on:click={() => {
|
||||
type = 'grid';
|
||||
}}
|
||||
on:click={() => changeViewType('grid')}
|
||||
>
|
||||
<Icon path={mdiViewGrid} />
|
||||
</button>
|
||||
|
|
@ -239,9 +245,7 @@
|
|||
class="{type === 'table'
|
||||
? 'bg-background'
|
||||
: 'bg-item'} bg-background p-2 rounded-r-xl cursor-pointer hover:bg-opacity-75"
|
||||
on:click={() => {
|
||||
type = 'table';
|
||||
}}
|
||||
on:click={() => changeViewType('table')}
|
||||
>
|
||||
<Icon path={mdiViewList} />
|
||||
</button>
|
||||
|
|
@ -249,157 +253,166 @@
|
|||
</div>
|
||||
|
||||
{#if type === 'grid'}
|
||||
<div class="flex flex-col lg:flex-row flex-wrap px-4 md:pl-8 md:pr-4 mb-4">
|
||||
<div class="flex mr-2 mb-2 lg:mb-0">
|
||||
<Select
|
||||
bind:selected={sortBySelect}
|
||||
on:change={orderSelectChanged}
|
||||
options={sortOptions}
|
||||
className="w-full md:w-48 mr-2"
|
||||
placeholder={$t('characters.sortBy')}
|
||||
/>
|
||||
<Button on:click={orderGridChange}>
|
||||
<Icon path={sortOrder ? mdiSortAscending : mdiSortDescending} />
|
||||
</Button>
|
||||
</div>
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<div class="flex items-center justify-center md:justify-start md:mr-4">
|
||||
<button
|
||||
on:click={() => toggleElement('pyro')}
|
||||
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.pyro
|
||||
? ''
|
||||
: 'opacity-25'}"
|
||||
>
|
||||
<img src="/images/elements/pyro.png" alt="pyro" class="w-8 h-8" style="min-width: 2rem;" />
|
||||
</button>
|
||||
<button
|
||||
on:click={() => toggleElement('hydro')}
|
||||
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.hydro
|
||||
? ''
|
||||
: 'opacity-25'}"
|
||||
>
|
||||
<img src="/images/elements/hydro.png" alt="hydro" class="w-8 h-8" style="min-width: 2rem;" />
|
||||
</button>
|
||||
<button
|
||||
on:click={() => toggleElement('anemo')}
|
||||
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.anemo
|
||||
? ''
|
||||
: 'opacity-25'}"
|
||||
>
|
||||
<img src="/images/elements/anemo.png" alt="anemo" class="w-8 h-8" style="min-width: 2rem;" />
|
||||
</button>
|
||||
<button
|
||||
on:click={() => toggleElement('electro')}
|
||||
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.electro
|
||||
? ''
|
||||
: 'opacity-25'}"
|
||||
>
|
||||
<img src="/images/elements/electro.png" alt="electro" class="w-8 h-8" style="min-width: 2rem;" />
|
||||
</button>
|
||||
<button
|
||||
on:click={() => toggleElement('cryo')}
|
||||
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.cryo
|
||||
? ''
|
||||
: 'opacity-25'}"
|
||||
>
|
||||
<img src="/images/elements/cryo.png" alt="cryo" class="w-8 h-8" style="min-width: 2rem;" />
|
||||
</button>
|
||||
<button
|
||||
on:click={() => toggleElement('geo')}
|
||||
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.geo
|
||||
? ''
|
||||
: 'opacity-25'}"
|
||||
>
|
||||
<img src="/images/elements/geo.png" alt="geo" class="w-8 h-8" style="min-width: 2rem;" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center justify-center md:justify-start">
|
||||
<button
|
||||
on:click={() => toggleWeapon('sword')}
|
||||
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.sword
|
||||
? ''
|
||||
: 'opacity-25'}"
|
||||
>
|
||||
<img src="/images/weapons/sword.png" alt="sword" class="w-8 h-8" style="min-width: 2rem;" />
|
||||
</button>
|
||||
<button
|
||||
on:click={() => toggleWeapon('claymore')}
|
||||
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.claymore
|
||||
? ''
|
||||
: 'opacity-25'}"
|
||||
>
|
||||
<img src="/images/weapons/claymore.png" alt="claymore" class="w-8 h-8" style="min-width: 2rem;" />
|
||||
</button>
|
||||
<button
|
||||
on:click={() => toggleWeapon('polearm')}
|
||||
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.polearm
|
||||
? ''
|
||||
: 'opacity-25'}"
|
||||
>
|
||||
<img src="/images/weapons/polearm.png" alt="polearm" class="w-8 h-8" style="min-width: 2rem;" />
|
||||
</button>
|
||||
<button
|
||||
on:click={() => toggleWeapon('catalyst')}
|
||||
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.catalyst
|
||||
? ''
|
||||
: 'opacity-25'}"
|
||||
>
|
||||
<img src="/images/weapons/catalyst.png" alt="catalyst" class="w-8 h-8" style="min-width: 2rem;" />
|
||||
</button>
|
||||
<button
|
||||
on:click={() => toggleWeapon('bow')}
|
||||
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.bow
|
||||
? ''
|
||||
: 'opacity-25'}"
|
||||
>
|
||||
<img src="/images/weapons/bow.png" alt="bow" class="w-8 h-8" style="min-width: 2rem;" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="px-4 md:pl-6 md:pr-4 flex flex-wrap max-w-screen-xl mt-2">
|
||||
{#each chars as [id, char] (id)}
|
||||
<a
|
||||
href="/characters/{id}"
|
||||
class="m-2 cell relative cursor-pointer transition duration-100 hover:opacity-100 hover:shadow-xl rounded-xl {!showConstellation ||
|
||||
constellation[id]
|
||||
? ''
|
||||
: 'opacity-50'}"
|
||||
>
|
||||
<div
|
||||
class="w-full rounded-t-xl bg-opacity-50 overflow-hidden {char.rarity === 5
|
||||
? 'bg-legendary-from'
|
||||
: 'bg-rare-from'}"
|
||||
>
|
||||
<img class="w-full h-full" src={`/images/characters/${id}.png`} alt={char.name} />
|
||||
<div class="flex">
|
||||
<div>
|
||||
<div class="flex flex-col lg:flex-row flex-wrap px-4 md:pl-8 md:pr-4 mb-4">
|
||||
<div class="flex mr-2 mb-2 lg:mb-0">
|
||||
<Select
|
||||
bind:selected={sortBySelect}
|
||||
on:change={orderSelectChanged}
|
||||
options={sortOptions}
|
||||
className="w-full md:w-48 mr-2"
|
||||
placeholder={$t('characters.sortBy')}
|
||||
/>
|
||||
<Button on:click={orderGridChange}>
|
||||
<Icon path={sortOrder ? mdiSortAscending : mdiSortDescending} />
|
||||
</Button>
|
||||
</div>
|
||||
<div
|
||||
class="absolute top-0 right-0 bg-black bg-opacity-75 rounded-full flex items-center shadow-md"
|
||||
style="padding: 4px; margin: -10px;"
|
||||
>
|
||||
{#if constellation[id]}
|
||||
<span class="mx-1 text-white text-xs font-semibold">
|
||||
C{Math.max(0, constellation[id].default + constellation[id].wish + constellation[id].manual - 1)}
|
||||
</span>
|
||||
{/if}
|
||||
<img class="w-4 h-4" src={`/images/elements/${char.element.id}.png`} alt={char.element.name} />
|
||||
</div>
|
||||
<div class="relative overflow-hidden bg-item rounded-b-xl" style="height: 29px">
|
||||
<div class="w-full overflow-hidden absolute bottom-0">
|
||||
<p class="text-white p-1 text-center text-sm">
|
||||
{char.name}
|
||||
</p>
|
||||
<div class="flex flex-col md:flex-row">
|
||||
<div class="flex items-center justify-center md:justify-start md:mr-4">
|
||||
<button
|
||||
on:click={() => toggleElement('pyro')}
|
||||
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.pyro
|
||||
? ''
|
||||
: 'opacity-25'}"
|
||||
>
|
||||
<img src="/images/elements/pyro.png" alt="pyro" class="w-8 h-8" style="min-width: 2rem;" />
|
||||
</button>
|
||||
<button
|
||||
on:click={() => toggleElement('hydro')}
|
||||
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.hydro
|
||||
? ''
|
||||
: 'opacity-25'}"
|
||||
>
|
||||
<img src="/images/elements/hydro.png" alt="hydro" class="w-8 h-8" style="min-width: 2rem;" />
|
||||
</button>
|
||||
<button
|
||||
on:click={() => toggleElement('anemo')}
|
||||
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.anemo
|
||||
? ''
|
||||
: 'opacity-25'}"
|
||||
>
|
||||
<img src="/images/elements/anemo.png" alt="anemo" class="w-8 h-8" style="min-width: 2rem;" />
|
||||
</button>
|
||||
<button
|
||||
on:click={() => toggleElement('electro')}
|
||||
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.electro
|
||||
? ''
|
||||
: 'opacity-25'}"
|
||||
>
|
||||
<img src="/images/elements/electro.png" alt="electro" class="w-8 h-8" style="min-width: 2rem;" />
|
||||
</button>
|
||||
<button
|
||||
on:click={() => toggleElement('cryo')}
|
||||
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.cryo
|
||||
? ''
|
||||
: 'opacity-25'}"
|
||||
>
|
||||
<img src="/images/elements/cryo.png" alt="cryo" class="w-8 h-8" style="min-width: 2rem;" />
|
||||
</button>
|
||||
<button
|
||||
on:click={() => toggleElement('geo')}
|
||||
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.geo
|
||||
? ''
|
||||
: 'opacity-25'}"
|
||||
>
|
||||
<img src="/images/elements/geo.png" alt="geo" class="w-8 h-8" style="min-width: 2rem;" />
|
||||
</button>
|
||||
</div>
|
||||
<div class="flex items-center justify-center md:justify-start">
|
||||
<button
|
||||
on:click={() => toggleWeapon('sword')}
|
||||
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.sword
|
||||
? ''
|
||||
: 'opacity-25'}"
|
||||
>
|
||||
<img src="/images/weapons/sword.png" alt="sword" class="w-8 h-8" style="min-width: 2rem;" />
|
||||
</button>
|
||||
<button
|
||||
on:click={() => toggleWeapon('claymore')}
|
||||
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.claymore
|
||||
? ''
|
||||
: 'opacity-25'}"
|
||||
>
|
||||
<img src="/images/weapons/claymore.png" alt="claymore" class="w-8 h-8" style="min-width: 2rem;" />
|
||||
</button>
|
||||
<button
|
||||
on:click={() => toggleWeapon('polearm')}
|
||||
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.polearm
|
||||
? ''
|
||||
: 'opacity-25'}"
|
||||
>
|
||||
<img src="/images/weapons/polearm.png" alt="polearm" class="w-8 h-8" style="min-width: 2rem;" />
|
||||
</button>
|
||||
<button
|
||||
on:click={() => toggleWeapon('catalyst')}
|
||||
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.catalyst
|
||||
? ''
|
||||
: 'opacity-25'}"
|
||||
>
|
||||
<img src="/images/weapons/catalyst.png" alt="catalyst" class="w-8 h-8" style="min-width: 2rem;" />
|
||||
</button>
|
||||
<button
|
||||
on:click={() => toggleWeapon('bow')}
|
||||
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {weaponFilter.bow
|
||||
? ''
|
||||
: 'opacity-25'}"
|
||||
>
|
||||
<img src="/images/weapons/bow.png" alt="bow" class="w-8 h-8" style="min-width: 2rem;" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{#if showConstellation}
|
||||
<div class="mt-12 mb-4 mx-4 md:mx-8 max-w-screen-xl md:flex items-center bg-background rounded-xl p-4">
|
||||
<img class="h-16 float-left md:float-none mr-2 md:mr-0" src="/images/paimon_faq.png" alt="Paimon" />
|
||||
<p class="md:ml-4 text-gray-200 ">{$t('characters.faq')}</p>
|
||||
</div>
|
||||
<div class="px-4 md:pl-6 md:pr-4 flex flex-wrap max-w-screen-xl mt-2">
|
||||
{#each chars as [id, char] (id)}
|
||||
<a
|
||||
href="/characters/{id}"
|
||||
class="m-2 cell relative cursor-pointer transition duration-100 hover:opacity-100 hover:shadow-xl rounded-xl {!showConstellation ||
|
||||
constellation[id]
|
||||
? ''
|
||||
: 'opacity-50'}"
|
||||
>
|
||||
<div
|
||||
class="w-full rounded-t-xl bg-opacity-50 overflow-hidden {char.rarity === 5
|
||||
? 'bg-legendary-from'
|
||||
: 'bg-rare-from'}"
|
||||
>
|
||||
<img class="w-full h-full" src={`/images/characters/${id}.png`} alt={char.name} />
|
||||
</div>
|
||||
<div
|
||||
class="absolute top-0 right-0 bg-black bg-opacity-75 rounded-full flex items-center shadow-md"
|
||||
style="padding: 4px; margin: -10px;"
|
||||
>
|
||||
{#if constellation[id]}
|
||||
<span class="mx-1 text-white text-xs font-semibold">
|
||||
C{Math.max(0, constellation[id].default + constellation[id].wish + constellation[id].manual - 1)}
|
||||
</span>
|
||||
{/if}
|
||||
<img class="w-4 h-4" src={`/images/elements/${char.element.id}.png`} alt={char.element.name} />
|
||||
</div>
|
||||
<div class="relative overflow-hidden bg-item rounded-b-xl" style="height: 29px">
|
||||
<div class="w-full overflow-hidden absolute bottom-0">
|
||||
<p class="text-white p-1 text-center text-sm">
|
||||
{char.name}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</a>
|
||||
{/each}
|
||||
</div>
|
||||
{#if showConstellation}
|
||||
<div
|
||||
class="mt-12 mb-4 ml-4 mr-4 md:ml-8 md:mr-0 max-w-screen-xl md:flex items-center bg-background rounded-xl p-4"
|
||||
>
|
||||
<img class="h-16 float-left md:float-none mr-2 md:mr-0" src="/images/paimon_faq.png" alt="Paimon" />
|
||||
<p class="md:ml-4 text-gray-200 ">{$t('characters.faq')}</p>
|
||||
</div>
|
||||
{/if}
|
||||
</div>
|
||||
{/if}
|
||||
<div class="hidden xl:block">
|
||||
<Ad class="ml-4" type="desktop" variant="mpu" id="1" />
|
||||
</div>
|
||||
</div>
|
||||
{:else}
|
||||
<p class="text-gray-400 px-4 md:px-8 font-medium pb-2 mt-4">
|
||||
※ {$t('characters.subtitle')}
|
||||
|
|
|
|||
|
|
@ -17,14 +17,20 @@
|
|||
import Achievement from './_index/achievement.svelte';
|
||||
import Furnishing from './_index/furnishing.svelte';
|
||||
import Build from './_index/build.svelte';
|
||||
import Ad from '../components/Ad.svelte';
|
||||
|
||||
let refreshLayout;
|
||||
let isMobile = false;
|
||||
|
||||
const onDone = debounce(() => {
|
||||
refreshLayout();
|
||||
}, 100);
|
||||
|
||||
onMount(() => {
|
||||
if (window.innerWidth < 500) {
|
||||
isMobile = true;
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
refreshLayout();
|
||||
}, 1000);
|
||||
|
|
@ -53,16 +59,27 @@
|
|||
<Welcome on:done={onDone} />
|
||||
<Wish on:done={onDone} />
|
||||
<Banner on:done={onDone} />
|
||||
{#if isMobile}
|
||||
<div class="flex justify-center">
|
||||
<Ad type="mobile" variant="mpu" id="1" />
|
||||
</div>
|
||||
{/if}
|
||||
<Build on:done={onDone} />
|
||||
<Event on:done={onDone} />
|
||||
<Item on:done={onDone} />
|
||||
<Discord on:done={onDone} />
|
||||
<Calculator on:done={onDone} />
|
||||
<Reminder on:done={onDone} />
|
||||
{#if isMobile}
|
||||
<div class="flex justify-center">
|
||||
<Ad type="mobile" variant="mpu" id="2" />
|
||||
</div>
|
||||
{/if}
|
||||
<Achievement on:done={onDone} />
|
||||
<Furnishing on:done={onDone} />
|
||||
<Twitter on:done={onDone} />
|
||||
<!-- <div class="flex flex-col space-y-4">
|
||||
</div> -->
|
||||
</Masonry>
|
||||
<Ad class="ml-4 mt-2" type="desktop" variant="lb" id="1" />
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,7 @@
|
|||
import Input from '../../components/Input.svelte';
|
||||
import DeleteAccountModal from './_deleteAccount.svelte';
|
||||
import ResetAccountModal from './_resetAccount.svelte';
|
||||
import DonateModal from '../../components/DonateModal.svelte';
|
||||
|
||||
import { driveSignedIn, driveError, driveLoading, synced, localModified, lastSyncTime } from '../../stores/dataSync';
|
||||
import { server, ar, wl } from '../../stores/server';
|
||||
|
|
@ -234,6 +235,17 @@
|
|||
);
|
||||
}
|
||||
|
||||
function openDonationModal() {
|
||||
openModal(
|
||||
DonateModal,
|
||||
{},
|
||||
{
|
||||
closeButton: false,
|
||||
styleWindow: { background: '#25294A', width: '500px' },
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
onMount(() => {
|
||||
mounted = true;
|
||||
});
|
||||
|
|
@ -250,7 +262,7 @@
|
|||
<title>Settings - Paimon.moe</title>
|
||||
</svelte:head>
|
||||
|
||||
<div class="lg:ml-64 pt-20 px-4 md:px-8 lg:pt-8">
|
||||
<div class="lg:ml-64 pt-20 px-4 md:px-8 lg:pt-8 max-w-screen-xl">
|
||||
<div class="bg-item rounded-xl mb-4 p-4">
|
||||
<p class="text-white">{$t('settings.version')} <b>2.1</b></p>
|
||||
</div>
|
||||
|
|
@ -344,6 +356,11 @@
|
|||
><Icon path={mdiGithub} /> Github Issues</a
|
||||
>
|
||||
{$t('settings.thanks')}
|
||||
<br />
|
||||
<Button on:click={openDonationModal}>
|
||||
<img class="inline w-8 h-8" src="/images/mora.png" alt="donate" />
|
||||
{$t('sidebar.donate')}
|
||||
</Button>
|
||||
</div>
|
||||
<div class="bg-item rounded-xl mb-4 p-4 text-white">
|
||||
<p class="font-semibold">Credits</p>
|
||||
|
|
|
|||
|
|
@ -16,6 +16,7 @@
|
|||
import DetailModal from './_detail.svelte';
|
||||
import { getAccountPrefix } from '../../stores/account';
|
||||
import { readSave } from '../../stores/saveManager';
|
||||
import Ad from '../../components/Ad.svelte';
|
||||
|
||||
const { open: openModal } = getContext('simple-modal');
|
||||
|
||||
|
|
@ -223,7 +224,6 @@
|
|||
|
||||
$: todayOffset = Math.abs(firstDay.diff(today, 'day', true));
|
||||
$: showAsLocalTime, onCheckLocalTime();
|
||||
|
||||
</script>
|
||||
|
||||
<svelte:head>
|
||||
|
|
@ -239,13 +239,19 @@
|
|||
</svelte:head>
|
||||
|
||||
<div class="lg:ml-64 pt-20 lg:pt-8">
|
||||
<h1 class="font-display px-4 md:px-8 font-black text-5xl text-white">{$t('timeline.title')}</h1>
|
||||
{#if !loading}
|
||||
<div class="px-4 md:px-8 text-white select-none">
|
||||
<Checkbox bind:checked={showAsLocalTime}>
|
||||
{$t('timeline.localTime')} ({browserTimeZone} - {$server} Server)
|
||||
</Checkbox>
|
||||
<div class="flex">
|
||||
<div>
|
||||
<h1 class="font-display px-4 md:px-8 font-black text-5xl text-white">{$t('timeline.title')}</h1>
|
||||
<div class="px-4 md:px-8 text-white select-none">
|
||||
<Checkbox bind:checked={showAsLocalTime}>
|
||||
{$t('timeline.localTime')} ({browserTimeZone} - {$server} Server)
|
||||
</Checkbox>
|
||||
</div>
|
||||
</div>
|
||||
<Ad class="flex flex-1 justify-center" type="desktop" variant="lb" id="1" />
|
||||
</div>
|
||||
<Ad type="mobile" variant="lb" id="1" />
|
||||
{#if !loading}
|
||||
<div class="w-full overflow-x-auto px-4 md:px-8" bind:this={timelineContainer} on:wheel={transformScroll}>
|
||||
<div
|
||||
style={`padding-top: 50px; width: min-content; padding-right: ${2 * padding * dayWidth}px; height: ${
|
||||
|
|
@ -337,5 +343,4 @@
|
|||
background: rgba(0, 0, 0, 0.35);
|
||||
@apply rounded-xl;
|
||||
}
|
||||
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script>
|
||||
import { t } from 'svelte-i18n';
|
||||
import Ad from '../../../components/Ad.svelte';
|
||||
import Button from '../../../components/Button.svelte';
|
||||
import { banners } from '../../../data/banners';
|
||||
import Item from './_item.svelte';
|
||||
|
|
@ -23,15 +24,18 @@
|
|||
<p class="text-gray-400 px-4 md:px-8 font-medium pb-4" style="margin-top: -1rem;">
|
||||
※ {$t('wish.tally.subtitle')}
|
||||
</p>
|
||||
|
||||
<div class="px-4 md:px-8">
|
||||
<Ad class="my-4" type="desktop" variant="lb" id="1" />
|
||||
<ItemNew
|
||||
type="character"
|
||||
banner={banners.characters[18]}
|
||||
id={300019}
|
||||
featured={banners.characters[18].featured}
|
||||
/>
|
||||
<Ad class="my-4 flex justify-center" type="mobile" variant="mpu" id="2" />
|
||||
<Ad type="mobile" variant="lb" id="1" />
|
||||
<ItemNew type="weapon" banner={banners.weapons[17]} id={400018} featured={banners.weapons[17].featured} />
|
||||
<Ad class="my-4" type="desktop" variant="lb" id="3" />
|
||||
<ItemNew
|
||||
type="character"
|
||||
banner={banners.characters[17]}
|
||||
|
|
|
|||
Loading…
Reference in a new issue