Skip to content

Commit

Permalink
feat: karma, character stories, tierlists tooltip on costume
Browse files Browse the repository at this point in the history
  • Loading branch information
@KeziahMoselle
KeziahMoselle committed Jan 2, 2024
1 parent 2ce94fb commit 0702b9b
Show file tree
Hide file tree
Showing 10 changed files with 326 additions and 176 deletions.
Binary file added public/icons/attribute_none.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/icons/costume_lottery_effect_icon_3.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/icons/lottery_effect_thumbnail_bg_gold.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/icons/lottery_effect_thumbnail_bg_rainbow.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/icons/lottery_effect_thumbnail_bg_silver.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added public/icons/weapon_awaken_icon.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
183 changes: 97 additions & 86 deletions src/components/CharacterInfo.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -67,14 +67,17 @@ import { chaptersIcons } from "@utils/chaptersIcons";
import { LimitedCostume } from "./LimitedCostume";
import { SingleWeapon } from "./WeaponInfo";
import Element from "./Element";
import { CharacterStory } from "pages/database/stories/characters";
import { ExCharacterStory } from "pages/database/stories/ex-characters";
import { RodCharacterStory } from "pages/database/stories/rod-characters";

const ModelWithNoSSR = dynamic(() => import("@components/Model"), {
ssr: false,
});

export const KARMA_ICONS_PATHS = {
RARE: "lottery_effect_thumbnail_bg_silver",
S_RARE: "lottery_effect_thumbnail_bg_gold",
SS_RARE: "lottery_effect_thumbnail_bg_rainbow",
};

function CostumeDetails({
costume,
abilities,
Expand Down Expand Up @@ -186,7 +189,6 @@ function CostumeDetails({

return isPve || isPvp;
});
console.log(costume);

const { maxNoAsc, maxWithAsc } = getCostumeLevelsByRarity(costume.rarity);

Expand Down Expand Up @@ -558,41 +560,75 @@ function CostumeDetails({

{/* Tier lists */}
{officialTiers?.length > 0 && (
<ul className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 mt-4 mb-8">
{officialTiers.map((item) => {
const isPvp = FEATURED_TIERLISTS.pvp.includes(
item.tiers.tierslists.tierlist_id
);

return (
<li
key={item.id}
className="relative flex flex-col bg-grey-dark bordered px-2 py-4 transform transition-transform hover:scale-95 ease-out-cubic"
>
<h4 className="text-2xl text-beige text-center mb-2">
{isPvp ? "PvP" : ""} {item.tiers.tierslists.title}
</h4>
<div className="flex flex-1 items-center justify-center text-center">
<TierLogo tier={item.tiers.tier} />
</div>
{item.tooltip && (
<div
className="p-4"
dangerouslySetInnerHTML={{ __html: item.tooltip }}
></div>
)}
<Link
href={`/tierlist/${item.tiers.tierslists.slug}?highlight=${costume.costume_id}`}
passHref
title="View tierlist"
className="absolute inset-0"
>
<span className="sr-only">View tierlist</span>
</Link>
</li>
);
})}
</ul>
<div>
<ul className="grid grid-cols-1 mb-8">
{officialTiers
.filter((item) => item.tooltip)
.map((item) => {
const isPvp = FEATURED_TIERLISTS.pvp.includes(
item.tiers.tierslists.tierlist_id
);

return (
<li key={item.id} className="grid grid-cols-12 gap-4">
<div className="col-span-4 relative flex flex-col bg-grey-dark bordered px-2 py-4 transform transition-transform hover:scale-95 ease-out-cubic">
<h4 className="text-2xl text-beige text-center mb-2">
{isPvp ? "PvP" : ""} {item.tiers.tierslists.title}
</h4>
<div className="flex flex-1 items-center justify-center text-center">
<TierLogo tier={item.tiers.tier} />
</div>
<Link
href={`/tierlist/${item.tiers.tierslists.slug}?highlight=${costume.costume_id}`}
passHref
title="View tierlist"
className="absolute inset-0"
>
<span className="sr-only">View tierlist</span>
</Link>
</div>
{item.tooltip && (
<div
className="p-4 col-span-8"
dangerouslySetInnerHTML={{ __html: item.tooltip }}
></div>
)}
</li>
);
})}
</ul>
<ul className="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-4 mt-4 mb-8">
{officialTiers
.filter((item) => !item.tooltip)
.map((item) => {
const isPvp = FEATURED_TIERLISTS.pvp.includes(
item.tiers.tierslists.tierlist_id
);

return (
<li
key={item.id}
className="relative flex flex-col bg-grey-dark bordered px-2 py-4 transform transition-transform hover:scale-95 ease-out-cubic"
>
<h4 className="text-2xl text-beige text-center mb-2">
{isPvp ? "PvP" : ""} {item.tiers.tierslists.title}
</h4>
<div className="flex flex-1 items-center justify-center text-center">
<TierLogo tier={item.tiers.tier} />
</div>
<Link
href={`/tierlist/${item.tiers.tierslists.slug}?highlight=${costume.costume_id}`}
passHref
title="View tierlist"
className="absolute inset-0"
>
<span className="sr-only">View tierlist</span>
</Link>
</li>
);
})}
</ul>
</div>
)}

<div className="relative mt-12">
Expand Down Expand Up @@ -757,28 +793,39 @@ function CostumeDetails({
<HR className="my-8" />
</div>

<div className="flex overflow-x-auto md:grid md:grid-cols-3 mt-8 gap-6">
<div className="grid overflow-x-auto grid-cols-1 md:grid-cols-3 mt-8 gap-6">
{costume.costume_karma_slot
.sort((a, b) => a.order - b.order)
.map((slot) => (
<div
key={`karma-slot-${slot.order}`}
className="relative bordered p-4"
className="karma-list text-center"
>
<ul>
<h4 className="mb-4 text-xl">Slot n°{slot.order}</h4>
<ul className="flex flex-col gap-2 relative bordered p-4">
{slot.karma_items
.sort((a, b) => a.order - b.order)
.map((item) => (
.map((item, index) => (

Check warning on line 808 in src/components/CharacterInfo.tsx

View workflow job for this annotation

GitHub Actions / sanity-check 

'index' is defined but never used
<li
key={`karma-ability-${item.order}`}
className="flex items-center gap-4"
>
<img
src={`${CDN_URL}${item.image_path}`}
alt=""
/>
{item.rarity}
{item.text}({item.order})
<div className="relative h-16 w-16">
<img
src={`/icons/${
KARMA_ICONS_PATHS[item.rarity]
}.png`}
alt=""
loading="lazy"
/>
<img
className="absolute z-10 left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2 w-8 h-auto"
src={`${CDN_URL}${item.image_path}`}
alt=""
loading="lazy"
/>
</div>
<p className="flex-1 text-sm">{item.text}</p>
</li>
))}
</ul>
Expand All @@ -790,38 +837,6 @@ function CostumeDetails({
</div>
)}

<div key={costume.costume_id}>
<Lines
className="mb-2"
containerClass="justify-center"
svgClass="w-96 xl:w-42"
>
<h2 className="text-2xl text-center">
Character Exalt Debris (Lv.100)
</h2>
</Lines>
<div className="flex gap-4 bg-grey-dark p-4 relative bordered">
<div className="flex items-center">
<div className="relative mr-4">
<DebrisThumbnail
sizeClasses="h-16 w-16"
{...costume.character.debris}
/>
</div>
<div className="flex flex-col items-start">
<strong className="font-display text-2xl text-beige">
{costume.character.debris?.name ?? "WIP"}
</strong>
<p className="text-beige-text">
<span>
{costume.character.debris?.description_long ?? "WIP"}
</span>
</p>
</div>
</div>
</div>
</div>

{/* Source */}
<div className="relative">
<div className="mt-12">
Expand Down Expand Up @@ -868,7 +883,7 @@ function CostumeDetails({
<div id="sources" className="relative">
<div className="mt-12">
<h2 className="text-3xl absolute -top-8 md:-top-6 left-1/2 transform -translate-x-1/2">
Stories
Costume story
</h2>
<HR className="my-8" />
</div>
Expand All @@ -890,10 +905,6 @@ function CostumeDetails({
></p>
</div>
</div>

<CharacterStory character={character} />
<ExCharacterStory character={character} />
<RodCharacterStory character={character} />
</div>
</div>
</div>
Expand Down
Loading

0 comments on commit 0702b9b

Please sign in to comment.