Character grid improvement
parent
1443ce1954
commit
9b56fa836c
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
@ -43,9 +43,16 @@
|
||||||
catalyst: true,
|
catalyst: true,
|
||||||
bow: true,
|
bow: true,
|
||||||
};
|
};
|
||||||
|
let rarityFilter = {
|
||||||
|
4: true,
|
||||||
|
5: true,
|
||||||
|
};
|
||||||
|
let firstClickElement = true;
|
||||||
|
let firstClickWeapon = true;
|
||||||
|
let firstClicRarity = true;
|
||||||
|
|
||||||
$: chars = Object.entries(characters)
|
$: chars = Object.entries(characters)
|
||||||
.filter((e) => elementFilter[e[1].element.id] && weaponFilter[e[1].weapon.id])
|
.filter((e) => elementFilter[e[1].element.id] && weaponFilter[e[1].weapon.id] && rarityFilter[e[1].rarity])
|
||||||
.sort((a, b) => {
|
.sort((a, b) => {
|
||||||
switch (sortBy) {
|
switch (sortBy) {
|
||||||
case 'name':
|
case 'name':
|
||||||
|
@ -122,13 +129,49 @@
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleElement(element) {
|
function toggleElement(element) {
|
||||||
|
if (firstClickElement) {
|
||||||
|
firstClickElement = false;
|
||||||
|
elementFilter = {
|
||||||
|
pyro: false,
|
||||||
|
hydro: false,
|
||||||
|
anemo: false,
|
||||||
|
electro: false,
|
||||||
|
cryo: false,
|
||||||
|
dendro: false,
|
||||||
|
geo: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
elementFilter[element] = !elementFilter[element];
|
elementFilter[element] = !elementFilter[element];
|
||||||
}
|
}
|
||||||
|
|
||||||
function toggleWeapon(weapon) {
|
function toggleWeapon(weapon) {
|
||||||
|
if (firstClickWeapon) {
|
||||||
|
firstClickWeapon = false;
|
||||||
|
weaponFilter = {
|
||||||
|
sword: false,
|
||||||
|
claymore: false,
|
||||||
|
polearm: false,
|
||||||
|
catalyst: false,
|
||||||
|
bow: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
weaponFilter[weapon] = !weaponFilter[weapon];
|
weaponFilter[weapon] = !weaponFilter[weapon];
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function toggleRarity(rarity) {
|
||||||
|
if (firstClicRarity) {
|
||||||
|
firstClicRarity = false;
|
||||||
|
rarityFilter = {
|
||||||
|
4: false,
|
||||||
|
5: false,
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
rarityFilter[rarity] = !rarityFilter[rarity];
|
||||||
|
}
|
||||||
|
|
||||||
async function processWishes() {
|
async function processWishes() {
|
||||||
const chars = {
|
const chars = {
|
||||||
amber: {
|
amber: {
|
||||||
|
@ -215,6 +258,13 @@
|
||||||
} catch (error) {}
|
} catch (error) {}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
function getNameStyle(name) {
|
||||||
|
if (name.length > 11) {
|
||||||
|
return 'font-size: 12px; line-height: 1; word-spacing: 200px; padding-bottom: 3px;';
|
||||||
|
}
|
||||||
|
return '';
|
||||||
|
}
|
||||||
|
|
||||||
onMount(async () => {
|
onMount(async () => {
|
||||||
await getConstellation();
|
await getConstellation();
|
||||||
});
|
});
|
||||||
|
@ -360,6 +410,24 @@
|
||||||
>
|
>
|
||||||
<img src="/images/weapons/bow.png" alt="bow" class="w-8 h-8" style="min-width: 2rem;" />
|
<img src="/images/weapons/bow.png" alt="bow" class="w-8 h-8" style="min-width: 2rem;" />
|
||||||
</button>
|
</button>
|
||||||
|
<button
|
||||||
|
on:click={() => toggleRarity(5)}
|
||||||
|
style="line-height: 0.9;"
|
||||||
|
class="lg:ml-2 rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none text-4xl text-legendary-from {rarityFilter[5]
|
||||||
|
? ''
|
||||||
|
: 'opacity-25'}"
|
||||||
|
>
|
||||||
|
★
|
||||||
|
</button>
|
||||||
|
<button
|
||||||
|
on:click={() => toggleRarity(4)}
|
||||||
|
style="line-height: 0.9;"
|
||||||
|
class="rounded-xl hover:bg-black hover:bg-opacity-25 cursor-pointer p-2 focus:outline-none text-4xl text-rare-from {rarityFilter[4]
|
||||||
|
? ''
|
||||||
|
: 'opacity-25'}"
|
||||||
|
>
|
||||||
|
★
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -399,7 +467,7 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="relative overflow-hidden bg-item rounded-b-xl" style="height: 29px">
|
<div class="relative overflow-hidden bg-item rounded-b-xl" style="height: 29px">
|
||||||
<div class="w-full overflow-hidden absolute bottom-0">
|
<div class="w-full overflow-hidden absolute bottom-0">
|
||||||
<p class="text-white p-1 text-center text-sm">
|
<p class="text-white p-1 text-center text-sm" style={getNameStyle($t(char.name))}>
|
||||||
{$t(char.name)}
|
{$t(char.name)}
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue