OpenSource/paimon-moe
OpenSource/paimon-moe
1
0
Fork 0
mirror of https://github.com/MadeBaruna/paimon-moe.git synced 2024-12-12 09:51:08 +01:00
Code Issues Projects Releases Packages Wiki Activity

Adjust character detail page

Browse source
This commit is contained in:
Made Baruna 2022-07-27 20:08:46 +07:00
parent c99642f421
commit 35b14b297b
2 changed files with 73 additions and 33 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -18,7 +18,7 @@
import { onMount } from 'svelte'; import { onMount } from 'svelte';
import { t, locale } from 'svelte-i18n'; import { t, locale } from 'svelte-i18n';
import { mdiChevronRight, mdiCircle, mdiContentSave, mdiMinus, mdiPencil, mdiPlus, mdiStar } from '@mdi/js'; import { mdiChevronRight, mdiCircle, mdiClose, mdiContentSave, mdiMinus, mdiPencil, mdiPlus, mdiStar } from '@mdi/js';
import Icon from '../../components/Icon.svelte'; import Icon from '../../components/Icon.svelte';
import Button from '../../components/Button.svelte'; import Button from '../../components/Button.svelte';
import Tooltip from '../../components/TooltipRelative.svelte'; import Tooltip from '../../components/TooltipRelative.svelte';
@ -99,6 +99,7 @@
const book = itemGroup[bookId]; const book = itemGroup[bookId];
const materials = character.ascension[1].items; const materials = character.ascension[1].items;
const bossItem = character.material.boss; const bossItem = character.material.boss;
const ascMaterials = character.ascension;
let chars = {}; let chars = {};
let constellationCount = -1; let constellationCount = -1;
@ -228,13 +229,13 @@
</svelte:head> </svelte:head>
<div class="lg:ml-64 pt-20 lg:pt-8"> <div class="lg:ml-64 pt-20 lg:pt-8">
<div class="flex"> <div class="flex">
<div class="flex flex-col xl:flex-row items-start max-w-screen-xl"> <div class="flex flex-col xl:flex-row items-start max-w-screen-2xl w-[calc(100%-1rem)]">
<img <img
class="character-image object-cover md:pl-8 self-center xl:self-auto" class="character-image object-cover md:pl-8 self-center xl:self-auto"
src="/images/characters/full/{id}.png" src="/images/characters/full/{id}.png"
alt={character.name} 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 flex-col items-start mt-4 xl:mt-0 flex-1 side-detail pt-4 xl:pt-0 min-w-0">
<div class="flex items-center px-4 md:px-8"> <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"> <h1 class="font-display font-black text-4xl leading-10 md:leading-normal md:text-5xl text-white mr-4 z-0">
{$t(character.name)} {$t(character.name)}
@ -337,70 +338,97 @@
</div> </div>
</div> </div>
</div> </div>
<div class="md:px-4 mt-4 block overflow-x-auto whitespace-nowrap w-screen md:w-auto"> <div class="md:ml-4 mt-4 block overflow-x-auto whitespace-nowrap w-screen 2xl:w-auto max-w-full">
<div class="px-4" style="width: min-content;"> <div class="px-4" style="width: min-content;">
<div class="table max-w-full rounded-xl border border-gray-200 border-opacity-25"> <div class="table max-w-full rounded-xl border border-gray-200 border-opacity-25">
<table class="text-gray-200 w-full"> <table class="text-gray-200 w-full">
<tr> <tr>
<td class="text-center whitespace-nowrap border-gray-700 font-semibold px-2"> <td class="text-center whitespace-nowrap border-gray-700 border-r font-semibold px-2">
{$t('characters.asc')} {$t('characters.asc')}
</td> </td>
<td class="text-center whitespace-nowrap border-gray-700 font-semibold px-2"> <td class="text-center whitespace-nowrap border-gray-700 border-r font-semibold px-2">
{$t('characters.lvl')} {$t('characters.lvl')}
</td> </td>
<td class="text-center whitespace-nowrap border-gray-700 font-semibold px-2"> <td class="text-center whitespace-nowrap border-gray-700 border-r font-semibold px-2">
{$t('characters.hp')} {$t('characters.hp')}
</td> </td>
<td class="text-center whitespace-nowrap border-gray-700 font-semibold px-2"> <td class="text-center whitespace-nowrap border-gray-700 border-r font-semibold px-2">
{$t('characters.atk')} {$t('characters.atk')}
</td> </td>
<td class="text-center whitespace-nowrap border-gray-700 font-semibold px-2"> <td class="text-center whitespace-nowrap border-gray-700 border-r font-semibold px-2">
{$t('characters.def')} {$t('characters.def')}
</td> </td>
<td class="text-center whitespace-nowrap border-gray-700 font-semibold px-2" <td class="text-center whitespace-nowrap border-gray-700 border-r font-semibold px-2">
>{$t('characters.critRate')} {$t('characters.critRate')}
</td> </td>
<td class="text-center whitespace-nowrap border-gray-700 font-semibold px-2" <td class="text-center whitespace-nowrap border-gray-700 border-r font-semibold px-2">
>{$t('characters.critDamage')} {$t('characters.critDamage')}
</td> </td>
{#if data.statGrow !== 'critRate' && data.statGrow !== 'critDamage'} {#if data.statGrow !== 'critRate' && data.statGrow !== 'critDamage'}
<td class="text-center whitespace-nowrap border-gray-700 font-semibold px-2"> <td class="text-center whitespace-nowrap border-gray-700 border-r font-semibold px-2">
{$t(`characters.${data.statGrow}`)} {$t(`characters.${data.statGrow}`)}
</td> </td>
{/if} {/if}
<td class="text-center whitespace-nowrap border-gray-700 font-semibold px-2">
{$t('characters.ascensionMaterial')}
</td>
</tr> </tr>
{#each showedIndex as index, i} {#each showedIndex as index, i}
<tr> <tr>
{#if i % 2 === 0} {#if i % 2 === 0}
<td rowspan={2} class="text-center border-t border-gray-700 px-2">{ascen[i]}</td> <td rowspan={2} class="text-center border-t border-gray-700 border-r px-2">{ascen[i]}</td>
{/if} {/if}
<td class="text-center border-t border-gray-700 px-2">{level[i]}</td> <td class="text-center border-t border-gray-700 border-r 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 border-r 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 border-r 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> <td class="text-center border-t border-gray-700 border-r px-2">{Math.round(data.def[index])}</td>
{#if data.statGrow === 'critRate'} {#if data.statGrow === 'critRate'}
<td class="text-center border-t border-gray-700 px-2"> <td class="text-center border-t border-gray-700 border-r px-2">
{numberFormat.format(data.critRate[index] * 100)}% {numberFormat.format(data.critRate[index] * 100)}%
</td> </td>
{:else} {:else}
<td class="text-center border-t border-gray-700 px-2">5%</td> <td class="text-center border-t border-gray-700 border-r px-2">5%</td>
{/if} {/if}
{#if data.statGrow === 'critDamage'} {#if data.statGrow === 'critDamage'}
<td class="text-center border-t border-gray-700 px-2"> <td class="text-center border-t border-gray-700 border-r px-2">
{numberFormat.format(data.critDamage[index] * 100)}% {numberFormat.format(data.critDamage[index] * 100)}%
</td> </td>
{:else} {:else}
<td class="text-center border-t border-gray-700 px-2">50%</td> <td class="text-center border-t border-gray-700 border-r px-2">50%</td>
{/if} {/if}
{#if data.statGrow !== 'critRate' && data.statGrow !== 'critDamage' && data.statGrow !== 'em'} {#if data.statGrow !== 'critRate' && data.statGrow !== 'critDamage' && data.statGrow !== 'em'}
<td class="text-center border-t border-gray-700 px-2"> <td class="text-center border-t border-gray-700 border-r px-2">
{numberFormat.format(data[data.statGrow][index] * 100)}% {numberFormat.format(data[data.statGrow][index] * 100)}%
</td> </td>
{:else if data.statGrow === 'em'} {:else if data.statGrow === 'em'}
<td class="text-center border-t border-gray-700 px-2"> <td class="text-center border-t border-gray-700 border-r px-2">
{numberFormat.format(data[data.statGrow][index])} {numberFormat.format(data[data.statGrow][index])}
</td> </td>
{/if} {/if}
{#if i % 2 === 0}
<td rowspan={2} class="text-center border-t border-gray-700 px-2">
<span class="w-max inline-block h-16">
{#if ascen[i] > 0}
{#each ascMaterials[ascen[i - 1]].items as obj}
{#if obj.item.id !== 'none'}
<Tooltip title={$t(obj.item.name)}>
<span class="mr-2 bg-background rounded-xl">
<span class="w-8 h-8 inline-block">
<img src="/images/items/{obj.item.id}.png" alt={obj.item} class="inline h-full" />
</span>
<Icon size={0.5} path={mdiClose} /><span>{obj.amount}</span>
</span>
</Tooltip>
{/if}
{/each}
<span class="pt-1 block">
<img src="/images/mora.png" alt="mora" class="inline w-6 h-6" />
<span>{numberFormat.format(ascMaterials[ascen[i - 1]].mora)}</span>
</span>
{/if}
</span>
</td>
{/if}
</tr> </tr>
{/each} {/each}
</table> </table>
@ -420,7 +448,7 @@
<Ad class="ml-4" type="desktop" variant="mpu" id="1" /> <Ad class="ml-4" type="desktop" variant="mpu" id="1" />
</div> </div>
<Ad class="flex justify-center my-4" type="mobile" variant="mpu" id="2" /> <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"> <div class="flex flex-col mt-4 text-white px-4 md:px-8 max-w-screen-2xl">
{#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}
@ -700,7 +728,7 @@
</a> </a>
<Ad class="ml-8 mt-4 mb-2" type="desktop" variant="lb" id="1" /> <Ad class="ml-8 mt-4 mb-2" type="desktop" variant="lb" id="1" />
<Ad type="desktop" variant="lb" id="2" /> <Ad type="desktop" variant="lb" id="2" />
<div class="flex flex-col mt-4 text-white px-4 md:px-8 max-w-screen-xl" bind:this={talentDiv}> <div class="flex flex-col mt-4 text-white px-4 md:px-8 max-w-screen-2xl" 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>
@ -708,7 +736,7 @@
<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 max-w-screen-xl"> <div class="flex flex-col text-white px-4 md:px-8 max-w-screen-2xl">
<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} />
@ -717,7 +745,7 @@
<Ad class="ml-8 mt-4 mb-2" type="desktop" variant="lb" id="3" /> <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" /> <Ad class="flex justify-center mt-4 mb-2" type="mobile" variant="mpu" id="1" />
<Ad type="mobile" variant="lb" id="1" /> <Ad type="mobile" variant="lb" id="1" />
<div class="flex flex-col text-white px-4 md:px-8 max-w-screen-xl" id="constellations" bind:this={constellationDiv}> <div class="flex flex-col text-white px-4 md:px-8 max-w-screen-2xl" 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>
@ -790,10 +818,6 @@
} }
} }
td:not(:last-child) {
@apply border-r;
}
.popup { .popup {
@apply relative; @apply relative;
@ -815,4 +839,19 @@
} }
} }
} }
@screen lg {
::-webkit-scrollbar {
height: 8px;
}
::-webkit-scrollbar-track {
@apply bg-transparent;
}
::-webkit-scrollbar-thumb {
background: rgba(0, 0, 0, 0.35);
@apply rounded-xl;
}
}
</style> </style>

1
tailwind.config.cjs
View file

@ -7,6 +7,7 @@ module.exports = {
md: '768px', md: '768px',
lg: '1024px', lg: '1024px',
xl: '1280px', xl: '1280px',
'2xl': '1536px',
}, },
fontFamily: { fontFamily: {
display: ['Catamaran', 'sans-serif'], display: ['Catamaran', 'sans-serif'],