OpenSource/paimon-moe
OpenSource/paimon-moe
1
0
Fork 0
mirror of https://github.com/MadeBaruna/paimon-moe.git synced 2025-03-21 14:28:59 +01:00
Code Issues Projects Releases Packages Wiki Activity

Update placement

Browse source
This commit is contained in:
Made Baruna 2021-09-24 17:26:35 +07:00
parent b8042ca655
commit f4b9f8bb30
No known key found for this signature in database
GPG key ID: 5AA5DA16AA5DCEAD
11 changed files with 551 additions and 487 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
src/components/Ad.svelte
View file

@ -2,9 +2,10 @@
export let type; export let type;
export let variant; export let variant;
export let id; export let id;
export let style;
let _class = ''; let _class = '';
export { _class as class }; export { _class as class };
</script> </script>
<div class={_class} id="nn_{type === 'mobile' ? 'mobile_' : ''}{variant}{id}" /> <div {style} class={_class} id="nn_{type === 'mobile' ? 'mobile_' : ''}{variant}{id}" />

20
src/components/Sidebar/Sidebar.svelte
View file

@ -11,11 +11,6 @@
import SidebarMoreItem from './SidebarMoreItem.svelte'; import SidebarMoreItem from './SidebarMoreItem.svelte';
import { showSidebar } from '../../stores/sidebar'; 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 segment;
export let mobile = false; export let mobile = false;
@ -34,17 +29,6 @@
$: currentLocale = languages.find((e) => e.id === $locale.substring(0, 2)) || { id: 'en', label: 'English' }; $: currentLocale = languages.find((e) => e.id === $locale.substring(0, 2)) || { id: 'en', label: 'English' };
$: locales = languages.filter((e) => e.id !== currentLocale.id); $: locales = languages.filter((e) => e.id !== currentLocale.id);
function openDonationModal() {
openModal(
DonateModal,
{},
{
closeButton: false,
styleWindow: { background: '#25294A', width: '500px' },
},
);
}
function close() { function close() {
showSidebar.set(false); showSidebar.set(false);
} }
@ -159,10 +143,6 @@
{/each} {/each}
</div> </div>
</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>
</div> </div>

6
src/routes/_layout.svelte
View file

@ -32,7 +32,9 @@
await checkLocalSave(); await checkLocalSave();
page.subscribe(() => { page.subscribe(() => {
if (window.reloadAdSlots) window.reloadAdSlots(); try {
window.reloadAdSlots();
} catch (error) {}
}); });
}); });
</script> </script>
@ -57,7 +59,7 @@
{#if $preloading && $delayedPreloading} {#if $preloading && $delayedPreloading}
<div transition:fade class="loading-bar" /> <div transition:fade class="loading-bar" />
{/if} {/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"> <p class="text-gray-400">
{$t('footer.affliate')}<br /> {$t('footer.affliate')}<br />
{$t('footer.copyright')} {$t('footer.copyright')}

286
src/routes/achievement/index.svelte
View file

@ -19,6 +19,7 @@
import Icon from '../../components/Icon.svelte'; import Icon from '../../components/Icon.svelte';
import Select from '../../components/Select.svelte'; import Select from '../../components/Select.svelte';
import { pushToast } from '../../stores/toast'; import { pushToast } from '../../stores/toast';
import Ad from '../../components/Ad.svelte';
export let data; export let data;
@ -297,154 +298,165 @@
<meta property="og:description" content="Track your Genshin Impact achievement easily" /> <meta property="og:description" content="Track your Genshin Impact achievement easily" />
</svelte:head> </svelte:head>
<div class="lg:ml-64 pt-20 px-4 lg:px-8 lg:pt-8 max-w-screen-xl"> <div class="flex">
<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"> <div class="lg:ml-64 pt-20 px-4 lg:px-8 lg:pt-8 max-w-screen-xl">
<h1 class="font-display font-black text-3xl md:text-4xl text-white">{$t('achievement.title')}</h1> <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">
<div class="flex space-x-2"> <h1 class="font-display font-black text-3xl md:text-4xl text-white">{$t('achievement.title')}</h1>
<p class="text-gray-400 text-xl rounded-xl bg-black bg-opacity-50 px-2 py-1"> <div class="flex space-x-2">
{finishedAchievement} <p class="text-gray-400 text-xl rounded-xl bg-black bg-opacity-50 px-2 py-1">
{$t('achievement.of')} {finishedAchievement}
{totalAchievement} {$t('achievement.of')}
</p> {totalAchievement}
<div class="text-gray-400 text-xl rounded-xl bg-black bg-opacity-50 px-2 py-1 flex items-center"> </p>
<p>{obtainedPrimogem} {$t('achievement.of')} {totalPrimogem}</p> <div class="text-gray-400 text-xl rounded-xl bg-black bg-opacity-50 px-2 py-1 flex items-center">
<img src="/images/primogem.png" class="w-4 h-4 ml-1" alt="primogem" /> <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> </div>
<div class="flex space-x-2 items-center"> {#if showFilter}
<Button <div class="mb-2 flex flex-col md:flex-row space-y-2 md:space-y-0 md:space-x-2">
size="sm" <div
on:click={() => { class="flex flex-1 relative items-center bg-background rounded-2xl h-14
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
focus-within:border-primary border-2 border-transparent ease-in duration-100" focus-within:border-primary border-2 border-transparent ease-in duration-100"
style="min-height: 3.5rem;" style="min-height: 3.5rem;"
> >
<input <input
placeholder={$t('achievement.search')} placeholder={$t('achievement.search')}
on:input={search} on:input={search}
bind:value={nameFilter} 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" 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> </div>
<Select {/if}
multiselect <div class="flex flex-col lg:flex-row space-y-3 lg:space-y-0 lg:space-x-3">
options={versions} <div class="flex flex-col space-y-2 lg:h-screen lg:overflow-auto lg:sticky lg:pr-1 pb-4 category">
bind:selected={versionFilter} {#each categories as category, index (category.id)}
placeholder={$t('achievement.version')} <div
className="w-full md:w-40" class="rounded-xl p-2 cursor-pointer flex flex-col {category.id === active ? 'bg-primary' : 'bg-item'}"
on:change={updateSelectFilter} on:click={() => changeCategory(category.id, index)}
/> >
<Select <p class="font-semibold {category.id === active ? 'text-black' : 'text-white'}">{category.name}</p>
multiselect <div class="flex">
options={types} <p class="flex-1 {category.id === active ? 'text-gray-900' : 'text-gray-400'}">
bind:selected={typeFilter} {category.finished}/{category.total}
placeholder={$t('achievement.type')} ({((category.finished / category.total) * 100).toFixed(0)}%)
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}
</p> </p>
<p class="text-gray-400">{el.desc}</p> <p class={category.id === active ? 'text-gray-900' : 'text-gray-400'}>
</div> {category.primogem}
<div class="flex items-center"> </p>
<p class="mr-1">{el.reward}</p> <img src="/images/primogem.png" class="w-6 h-6 ml-1" alt="primogem" />
<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>
</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> </div>
<div class="hidden xl:block">
<Ad class="ml-4 mt-8" type="desktop" variant="mpu" id="1" />
</div>
</div> </div>
<Ad type="desktop" variant="lb" id="2" />
<Ad type="mobile" variant="lb" id="1" />
<style> <style>
.category { .category {

5
src/routes/calculator/index.svelte
View file

@ -14,6 +14,7 @@
import Button from '../../components/Button.svelte'; import Button from '../../components/Button.svelte';
import Icon from '../../components/Icon.svelte'; import Icon from '../../components/Icon.svelte';
import HowToModal from '../../components/CalculatorHowToModal.svelte'; import HowToModal from '../../components/CalculatorHowToModal.svelte';
import Ad from '../../components/Ad.svelte';
const { open: openModal } = getContext('simple-modal'); const { open: openModal } = getContext('simple-modal');
@ -81,6 +82,8 @@
</h1> </h1>
</div> </div>
<WeaponCalculator /> <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 <div
id="character" 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" 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> </h1>
</div> </div>
<CharacterCalculator /> <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 <div
id="resin" 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" class="flex flex-col items-center md:flex-row-reverse md:justify-end md:items-start lg:items-center mt-8 mb-2"

336
src/routes/characters/[id].svelte
View file

@ -30,6 +30,7 @@
import { weaponList } from '../../data/weaponList'; import { weaponList } from '../../data/weaponList';
import artifacts from '../../data/artifacts/en.json'; import artifacts from '../../data/artifacts/en.json';
import weapons from '../../data/weapons/en.json'; import weapons from '../../data/weapons/en.json';
import Ad from '../../components/Ad.svelte';
const rarityColor = { const rarityColor = {
1: 'text-white', 1: 'text-white',
@ -183,182 +184,186 @@
content="Genshin Impact {character.name} build guide, constellation, and skill information" content="Genshin Impact {character.name} build guide, constellation, and skill information"
/> />
</svelte:head> </svelte:head>
<div class="lg:ml-64 pt-20 lg:pt-8 max-w-screen-xl"> <div class="lg:ml-64 pt-20 lg:pt-8">
<div class="flex flex-col xl:flex-row items-start"> <div class="flex">
<img <div class="flex flex-col xl:flex-row items-start max-w-screen-xl">
class="character-image object-cover md:pl-8 self-center xl:self-auto" <img
src="/images/characters/full/{id}.png" class="character-image object-cover md:pl-8 self-center xl:self-auto"
alt={character.name} 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"> <div class="flex flex-col items-start mt-4 xl:mt-0 side-detail pt-4 xl:pt-0">
<h1 class="font-display font-black text-4xl leading-10 md:leading-normal md:text-5xl text-white mr-4 z-0"> <div class="flex items-center px-4 md:px-8">
{character.name} <h1 class="font-display font-black text-4xl leading-10 md:leading-normal md:text-5xl text-white mr-4 z-0">
</h1> {character.name}
<img </h1>
class="h-10 mr-4 z-10 object-contain" <img
src="/images/elements/{character.element.id}.png" class="h-10 mr-4 z-10 object-contain"
alt={character.element.name} 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 <div
class="flex space-y-1 lg:space-y-0 lg:space-x-1 {editConstellation class="{character.rarity === 5
? 'flex-col' ? 'text-legendary-from'
: ''} md:flex-row items-center" : '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} /> <Icon path={mdiStar} />
{/if} <Icon path={mdiStar} />
<Icon path={mdiCircle} size={0.4} className="mx-2 mt-1" color="white" /> <Icon path={mdiStar} />
<p class="text-base text-white font-semibold mt-1">{character.weapon.name}</p> <Icon path={mdiStar} />
</div> {#if character.rarity === 5}
<p class="text-gray-200 px-4 md:px-8">{data.description}</p> <Icon path={mdiStar} />
<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"> {/if}
<div class="text-gray-200 rounded-xl border border-gray-200 border-opacity-25 p-4"> <Icon path={mdiCircle} size={0.4} className="mx-2 mt-1" color="white" />
<p>{$t('characters.talentBook')}</p> <p class="text-base text-white font-semibold mt-1">{character.weapon.name}</p>
<div class="flex items-center mt-2"> </div>
<div class="mr-2 h-12 w-12 bg-background rounded-xl p-1"> <p class="text-gray-200 px-4 md:px-8">{data.description}</p>
<img src="/images/items/{bookId}.png" alt={book.name} class="h-full max-w-full object-contain" /> <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> </div>
<p class="mb-1 font-semibold">{book.name}</p>
</div> </div>
</div> <div class="text-gray-200 rounded-xl border border-gray-200 border-opacity-25 p-4">
<div class="text-gray-200 rounded-xl border border-gray-200 border-opacity-25 p-4"> <p>{$t('characters.ascensionMaterial')}</p>
<p>{$t('characters.ascensionMaterial')}</p> <div class="flex items-center mt-2">
<div class="flex items-center mt-2"> {#each materials as material}
{#each materials as material} {#if material.item.id !== 'none'}
{#if material.item.id !== 'none'} <div class="mr-2 h-12 w-12 bg-background rounded-xl p-1">
<div class="mr-2 h-12 w-12 bg-background rounded-xl p-1"> <img
<img src="/images/items/{material.item.id}.png"
src="/images/items/{material.item.id}.png" alt={material.item.name}
alt={material.item.name} title={material.item.name}
title={material.item.name} class="h-full max-w-full object-contain mx-auto"
class="h-full max-w-full object-contain mx-auto" />
/> </div>
</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>
{/if} {/if}
</tr> {/each}
{#each showedIndex as index, i} </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> <tr>
{#if i % 2 === 0} <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
<td rowspan={2} class="text-center border-t border-gray-700 px-2">{ascen[i]}</td> {$t('characters.asc')}
{/if} </td>
<td class="text-center border-t border-gray-700 px-2">{level[i]}</td> <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
<td class="text-center border-t border-gray-700 px-2">{Math.round(data.hp[index])}</td> {$t('characters.lvl')}
<td class="text-center border-t border-gray-700 px-2">{Math.round(data.atk[index])}</td> </td>
<td class="text-center border-t border-gray-700 px-2">{Math.round(data.def[index])}</td> <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
{#if data.statGrow === 'critRate'} {$t('characters.hp')}
<td class="text-center border-t border-gray-700 px-2"> </td>
{numberFormat.format(data.critRate[index] * 100)}% <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
</td> {$t('characters.atk')}
{:else} </td>
<td class="text-center border-t border-gray-700 px-2">5%</td> <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
{/if} {$t('characters.def')}
{#if data.statGrow === 'critDamage'} </td>
<td class="text-center border-t border-gray-700 px-2"> <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2"
{numberFormat.format(data.critDamage[index] * 100)}% >{$t('characters.critRate')}
</td> </td>
{:else} <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2"
<td class="text-center border-t border-gray-700 px-2">50%</td> >{$t('characters.critDamage')}
{/if} </td>
{#if data.statGrow !== 'critRate' && data.statGrow !== 'critDamage' && data.statGrow !== 'em'} {#if data.statGrow !== 'critRate' && data.statGrow !== 'critDamage'}
<td class="text-center border-t border-gray-700 px-2"> <td class="text-center whitespace-no-wrap border-gray-700 font-semibold px-2">
{numberFormat.format(data[data.statGrow][index] * 100)}% {$t(`characters.${data.statGrow}`)}
</td>
{:else if data.statGrow === 'em'}
<td class="text-center border-t border-gray-700 px-2">
{numberFormat.format(data[data.statGrow][index])}
</td> </td>
{/if} {/if}
</tr> </tr>
{/each} {#each showedIndex as index, i}
</table> <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>
</div> <div class="flex mt-4 mx-4 md:mx-8">
<div class="flex mt-4 mx-4 md:mx-8"> <Button className="mr-4" on:click={() => scrollToView(talentDiv)}>
<Button className="mr-4" on:click={() => scrollToView(talentDiv)}> {$t('characters.talents')}
{$t('characters.talents')} </Button>
</Button> <Button on:click={() => scrollToView(constellationDiv)}>
<Button on:click={() => scrollToView(constellationDiv)}> {$t('characters.constellations')}
{$t('characters.constellations')} </Button>
</Button> </div>
</div> </div>
</div> </div>
<Ad class="ml-4" type="desktop" variant="mpu" id="1" />
</div> </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} {#if builds.length > 1}
<div class="flex mt-4 items-center"> <div class="flex mt-4 items-center">
{#each builds as item, i} {#each builds as item, i}
@ -547,7 +552,8 @@
> >
{$t('characters.source')} {$t('characters.source')}
</a> </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"> <a href="/characters/{id}/#talents" class="font-black font-display text-2xl mt-4">
{$t('characters.talents')} {$t('characters.talents')}
</a> </a>
@ -555,13 +561,15 @@
<SkillCard {id} image="talent_2" data={data.elementalSkill} withQuote={true} /> <SkillCard {id} image="talent_2" data={data.elementalSkill} withQuote={true} />
<SkillCard {id} image="talent_3" data={data.burst} withQuote={true} /> <SkillCard {id} image="talent_3" data={data.burst} withQuote={true} />
</div> </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> <p class="font-black font-display text-2xl mt-4">{$t('characters.passiveTalents')}</p>
{#each data.passives as passive, i} {#each data.passives as passive, i}
<PassiveSkillCard {id} image="talent_{i + 4}" data={passive} /> <PassiveSkillCard {id} image="talent_{i + 4}" data={passive} />
{/each} {/each}
</div> </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"> <a href="/characters/{id}/#constellations" class="font-black font-display text-2xl mt-4">
{$t('characters.constellations')} {$t('characters.constellations')}
</a> </a>

319
src/routes/characters/index.svelte
View file

@ -11,6 +11,7 @@
import { readSave, updateSave } from '../../stores/saveManager'; import { readSave, updateSave } from '../../stores/saveManager';
import Select from '../../components/Select.svelte'; import Select from '../../components/Select.svelte';
import Button from '../../components/Button.svelte'; import Button from '../../components/Button.svelte';
import Ad from '../../components/Ad.svelte';
const sortOptions = [ const sortOptions = [
{ label: $t('characters.name'), value: 'name' }, { label: $t('characters.name'), value: 'name' },
@ -207,6 +208,13 @@
} }
} }
function changeViewType(val) {
type = val;
try {
window.reloadAdSlots();
} catch (error) {}
}
onMount(async () => { onMount(async () => {
await getConstellation(); await getConstellation();
}); });
@ -229,9 +237,7 @@
<div class="flex text-white" style="height: fit-content;"> <div class="flex text-white" style="height: fit-content;">
<button <button
class="{type === 'grid' ? 'bg-background' : 'bg-item'} p-2 rounded-l-xl cursor-pointer hover:bg-opacity-75" class="{type === 'grid' ? 'bg-background' : 'bg-item'} p-2 rounded-l-xl cursor-pointer hover:bg-opacity-75"
on:click={() => { on:click={() => changeViewType('grid')}
type = 'grid';
}}
> >
<Icon path={mdiViewGrid} /> <Icon path={mdiViewGrid} />
</button> </button>
@ -239,9 +245,7 @@
class="{type === 'table' class="{type === 'table'
? 'bg-background' ? 'bg-background'
: 'bg-item'} bg-background p-2 rounded-r-xl cursor-pointer hover:bg-opacity-75" : 'bg-item'} bg-background p-2 rounded-r-xl cursor-pointer hover:bg-opacity-75"
on:click={() => { on:click={() => changeViewType('table')}
type = 'table';
}}
> >
<Icon path={mdiViewList} /> <Icon path={mdiViewList} />
</button> </button>
@ -249,157 +253,166 @@
</div> </div>
{#if type === 'grid'} {#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">
<div class="flex mr-2 mb-2 lg:mb-0"> <div>
<Select <div class="flex flex-col lg:flex-row flex-wrap px-4 md:pl-8 md:pr-4 mb-4">
bind:selected={sortBySelect} <div class="flex mr-2 mb-2 lg:mb-0">
on:change={orderSelectChanged} <Select
options={sortOptions} bind:selected={sortBySelect}
className="w-full md:w-48 mr-2" on:change={orderSelectChanged}
placeholder={$t('characters.sortBy')} options={sortOptions}
/> className="w-full md:w-48 mr-2"
<Button on:click={orderGridChange}> placeholder={$t('characters.sortBy')}
<Icon path={sortOrder ? mdiSortAscending : mdiSortDescending} /> />
</Button> <Button on:click={orderGridChange}>
</div> <Icon path={sortOrder ? mdiSortAscending : mdiSortDescending} />
<div class="flex flex-col md:flex-row"> </Button>
<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> </div>
<div <div class="flex flex-col md:flex-row">
class="absolute top-0 right-0 bg-black bg-opacity-75 rounded-full flex items-center shadow-md" <div class="flex items-center justify-center md:justify-start md:mr-4">
style="padding: 4px; margin: -10px;" <button
> on:click={() => toggleElement('pyro')}
{#if constellation[id]} class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.pyro
<span class="mx-1 text-white text-xs font-semibold"> ? ''
C{Math.max(0, constellation[id].default + constellation[id].wish + constellation[id].manual - 1)} : 'opacity-25'}"
</span> >
{/if} <img src="/images/elements/pyro.png" alt="pyro" class="w-8 h-8" style="min-width: 2rem;" />
<img class="w-4 h-4" src={`/images/elements/${char.element.id}.png`} alt={char.element.name} /> </button>
</div> <button
<div class="relative overflow-hidden bg-item rounded-b-xl" style="height: 29px"> on:click={() => toggleElement('hydro')}
<div class="w-full overflow-hidden absolute bottom-0"> class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none {elementFilter.hydro
<p class="text-white p-1 text-center text-sm"> ? ''
{char.name} : 'opacity-25'}"
</p> >
<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>
</a> </div>
{/each} <div class="px-4 md:pl-6 md:pr-4 flex flex-wrap max-w-screen-xl mt-2">
</div> {#each chars as [id, char] (id)}
{#if showConstellation} <a
<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"> href="/characters/{id}"
<img class="h-16 float-left md:float-none mr-2 md:mr-0" src="/images/paimon_faq.png" alt="Paimon" /> class="m-2 cell relative cursor-pointer transition duration-100 hover:opacity-100 hover:shadow-xl rounded-xl {!showConstellation ||
<p class="md:ml-4 text-gray-200 ">{$t('characters.faq')}</p> 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> </div>
{/if} <div class="hidden xl:block">
<Ad class="ml-4" type="desktop" variant="mpu" id="1" />
</div>
</div>
{:else} {:else}
<p class="text-gray-400 px-4 md:px-8 font-medium pb-2 mt-4"> <p class="text-gray-400 px-4 md:px-8 font-medium pb-2 mt-4">
※ {$t('characters.subtitle')} ※ {$t('characters.subtitle')}

17
src/routes/index.svelte
View file

@ -17,14 +17,20 @@
import Achievement from './_index/achievement.svelte'; import Achievement from './_index/achievement.svelte';
import Furnishing from './_index/furnishing.svelte'; import Furnishing from './_index/furnishing.svelte';
import Build from './_index/build.svelte'; import Build from './_index/build.svelte';
import Ad from '../components/Ad.svelte';
let refreshLayout; let refreshLayout;
let isMobile = false;
const onDone = debounce(() => { const onDone = debounce(() => {
refreshLayout(); refreshLayout();
}, 100); }, 100);
onMount(() => { onMount(() => {
if (window.innerWidth < 500) {
isMobile = true;
}
setTimeout(() => { setTimeout(() => {
refreshLayout(); refreshLayout();
}, 1000); }, 1000);
@ -53,16 +59,27 @@
<Welcome on:done={onDone} /> <Welcome on:done={onDone} />
<Wish on:done={onDone} /> <Wish on:done={onDone} />
<Banner 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} /> <Build on:done={onDone} />
<Event on:done={onDone} /> <Event on:done={onDone} />
<Item on:done={onDone} /> <Item on:done={onDone} />
<Discord on:done={onDone} /> <Discord on:done={onDone} />
<Calculator on:done={onDone} /> <Calculator on:done={onDone} />
<Reminder 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} /> <Achievement on:done={onDone} />
<Furnishing on:done={onDone} /> <Furnishing on:done={onDone} />
<Twitter on:done={onDone} /> <Twitter on:done={onDone} />
<!-- <div class="flex flex-col space-y-4"> <!-- <div class="flex flex-col space-y-4">
</div> --> </div> -->
</Masonry> </Masonry>
<Ad class="ml-4 mt-2" type="desktop" variant="lb" id="1" />
</div> </div>

19
src/routes/settings/index.svelte
View file

@ -12,6 +12,7 @@
import Input from '../../components/Input.svelte'; import Input from '../../components/Input.svelte';
import DeleteAccountModal from './_deleteAccount.svelte'; import DeleteAccountModal from './_deleteAccount.svelte';
import ResetAccountModal from './_resetAccount.svelte'; import ResetAccountModal from './_resetAccount.svelte';
import DonateModal from '../../components/DonateModal.svelte';
import { driveSignedIn, driveError, driveLoading, synced, localModified, lastSyncTime } from '../../stores/dataSync'; import { driveSignedIn, driveError, driveLoading, synced, localModified, lastSyncTime } from '../../stores/dataSync';
import { server, ar, wl } from '../../stores/server'; import { server, ar, wl } from '../../stores/server';
@ -234,6 +235,17 @@
); );
} }
function openDonationModal() {
openModal(
DonateModal,
{},
{
closeButton: false,
styleWindow: { background: '#25294A', width: '500px' },
},
);
}
onMount(() => { onMount(() => {
mounted = true; mounted = true;
}); });
@ -250,7 +262,7 @@
<title>Settings - Paimon.moe</title> <title>Settings - Paimon.moe</title>
</svelte:head> </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"> <div class="bg-item rounded-xl mb-4 p-4">
<p class="text-white">{$t('settings.version')} <b>2.1</b></p> <p class="text-white">{$t('settings.version')} <b>2.1</b></p>
</div> </div>
@ -344,6 +356,11 @@
><Icon path={mdiGithub} /> Github Issues</a ><Icon path={mdiGithub} /> Github Issues</a
> >
{$t('settings.thanks')} {$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>
<div class="bg-item rounded-xl mb-4 p-4 text-white"> <div class="bg-item rounded-xl mb-4 p-4 text-white">
<p class="font-semibold">Credits</p> <p class="font-semibold">Credits</p>

21
src/routes/timeline/index.svelte
View file

@ -16,6 +16,7 @@
import DetailModal from './_detail.svelte'; import DetailModal from './_detail.svelte';
import { getAccountPrefix } from '../../stores/account'; import { getAccountPrefix } from '../../stores/account';
import { readSave } from '../../stores/saveManager'; import { readSave } from '../../stores/saveManager';
import Ad from '../../components/Ad.svelte';
const { open: openModal } = getContext('simple-modal'); const { open: openModal } = getContext('simple-modal');
@ -223,7 +224,6 @@
$: todayOffset = Math.abs(firstDay.diff(today, 'day', true)); $: todayOffset = Math.abs(firstDay.diff(today, 'day', true));
$: showAsLocalTime, onCheckLocalTime(); $: showAsLocalTime, onCheckLocalTime();
</script> </script>
<svelte:head> <svelte:head>
@ -239,13 +239,19 @@
</svelte:head> </svelte:head>
<div class="lg:ml-64 pt-20 lg:pt-8"> <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> <div class="flex">
{#if !loading} <div>
<div class="px-4 md:px-8 text-white select-none"> <h1 class="font-display px-4 md:px-8 font-black text-5xl text-white">{$t('timeline.title')}</h1>
<Checkbox bind:checked={showAsLocalTime}> <div class="px-4 md:px-8 text-white select-none">
{$t('timeline.localTime')} ({browserTimeZone} - {$server} Server) <Checkbox bind:checked={showAsLocalTime}>
</Checkbox> {$t('timeline.localTime')} ({browserTimeZone} - {$server} Server)
</Checkbox>
</div>
</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 class="w-full overflow-x-auto px-4 md:px-8" bind:this={timelineContainer} on:wheel={transformScroll}>
<div <div
style={`padding-top: 50px; width: min-content; padding-right: ${2 * padding * dayWidth}px; height: ${ 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); background: rgba(0, 0, 0, 0.35);
@apply rounded-xl; @apply rounded-xl;
} }
</style> </style>

6
src/routes/wish/tally/index.svelte
View file

@ -1,5 +1,6 @@
<script> <script>
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
import Ad from '../../../components/Ad.svelte';
import Button from '../../../components/Button.svelte'; import Button from '../../../components/Button.svelte';
import { banners } from '../../../data/banners'; import { banners } from '../../../data/banners';
import Item from './_item.svelte'; 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;"> <p class="text-gray-400 px-4 md:px-8 font-medium pb-4" style="margin-top: -1rem;">
※ {$t('wish.tally.subtitle')} ※ {$t('wish.tally.subtitle')}
</p> </p>
<div class="px-4 md:px-8"> <div class="px-4 md:px-8">
<Ad class="my-4" type="desktop" variant="lb" id="1" />
<ItemNew <ItemNew
type="character" type="character"
banner={banners.characters[18]} banner={banners.characters[18]}
id={300019} id={300019}
featured={banners.characters[18].featured} 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} /> <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 <ItemNew
type="character" type="character"
banner={banners.characters[17]} banner={banners.characters[17]}