Added trait and talents

src/components/operators/Skill.svelte

@@ -44,21 +44,21 @@
 			<tbody>
 				{#each skillData.levels as levelData, idx}
 					<tr>
-						<td>{idx}</td>
+						<td>{idx + 1}</td>
 						<td class="desc">
 							<Richtext
 								text={levelData.description}
 								blackboard={levelData.blackboard}
 							/>
 						</td>
-						<td>{levelData.spData.initSp}</td>
-						<td>{levelData.spData.spCost}</td>
+						<td>{levelData.spData.initSp > 0 ? levelData.spData.initSp : "-"}</td>
+						<td>{levelData.spData.spCost > 0 ? levelData.spData.spCost : "-"}</td>
 						<td>{levelData.duration > 0 ? `${levelData.duration}s` : "-"}</td>
 					</tr>
 
 					<!-- blackboard for this skill level -->
 					<tr>
-						<td colspan="5" class="bg-neutral-700">
+						<td colspan="5" class="bg-gray-300/10">
 							<details>
 								<summary class="desc">{strings.blackboard}</summary>
 								<Blackboard data={levelData.blackboard} />

src/lib/logic/operators.ts

@@ -30,7 +30,23 @@ type RawCharSkill = {
 	levelUpCostCond: RawSkillMasteryData[]
 }
 
-type RawCharTrait = {}
+type RawCharTrait = {
+	unlockCondition: PhaseData
+	requiredPotentialRank: number
+	blackboard: BlackboardEntry[] | undefined
+	overrideDescripton: string | undefined // true HG fashion typo
+}
+
+type RawCharTalent = {
+	name: string
+	description: string
+
+	unlockCondition: PhaseData
+	requiredPotentialRank: number
+
+	blackboard: BlackboardEntry[] | undefined
+	isHideTalent: boolean
+}
 
 type RawCharacter = {
 	rarity: string
@@ -47,7 +63,8 @@ type RawCharacter = {
 	subProfessionId: string
 
 	skills: RawCharSkill[]
-	trait: RawCharTrait[] | undefined
+	trait: { candidates: RawCharTrait[] } | undefined
+	talents: { candidates: RawCharTalent[] }[] | undefined
 }
 
 type RawCharacterTable = { [id: string]: RawCharacter }
@@ -82,12 +99,23 @@ export type ParsedSkill = {
 	masteryCosts: RawSkillMasteryData[]
 }
 
+type ParsedTrait = {
+	unlockCondition: PhaseData
+	requiredPotentialRank: number
+	blackboard: BlackboardEntry[] | undefined
+	description: string
+}
+
+type ParsedTalent = {
+	name: string
+	candidates: RawCharTalent[]
+}
+
 type ParsedCharacter = {
 	charId: string
 	rarity: string
 
 	name: string
-	trait: string
 	appellation: string
 
 	code: string
@@ -98,6 +126,8 @@ type ParsedCharacter = {
 	subProfession: string
 
 	skills: ParsedSkill[]
+	traits: ParsedTrait[]
+	talents: ParsedTalent[]
 }
 
 type CharacterTable = { [id: string]: ParsedCharacter }
@@ -151,12 +181,58 @@ for (const region of SERVERS) {
 			}
 		}
 
+		// parse traits
+		const traits: ParsedTrait[] = []
+
+		{
+			if (rawChar.trait) {
+				for (const candidate of rawChar.trait.candidates) {
+					const parsedTrait: ParsedTrait = {
+						description: candidate.overrideDescripton || rawChar.description || "",
+						blackboard: candidate.blackboard,
+						requiredPotentialRank: candidate.requiredPotentialRank,
+						unlockCondition: candidate.unlockCondition
+					}
+
+					traits.push(parsedTrait)
+				}
+			} else {
+				traits.push({
+					description: rawChar.description || "",
+					blackboard: undefined,
+					requiredPotentialRank: 0,
+					unlockCondition: {
+						phase: "PHASE_0",
+						level: 1
+					}
+				})
+			}
+		}
+
+		// parse talents
+		let talents: ParsedTalent[] = []
+
+		{
+			if (rawChar.talents) {
+				for (const rawTalent of rawChar.talents) {
+					// why does Ulpianus have an invalid talent...
+					if (rawTalent.candidates[0].isHideTalent) {
+						continue
+					}
+
+					talents.push({
+						name: rawTalent.candidates[0].name,
+						candidates: rawTalent.candidates
+					})
+				}
+			}
+		}
+
 		const parsedChar: ParsedCharacter = {
 			charId: charId,
 			rarity: rawChar.rarity,
 
 			name: rawChar.name || "",
-			trait: rawChar.description || "",
 			appellation: rawChar.appellation || "",
 
 			code: rawChar.displayNumber || "",
@@ -166,7 +242,9 @@ for (const region of SERVERS) {
 			profession: rawChar.profession,
 			subProfession: rawChar.subProfessionId,
 
-			skills: skills
+			skills: skills,
+			traits: traits,
+			talents: talents
 		}
 
 		Data[region][charId] = parsedChar

src/lib/logic/richtext.ts

@@ -28,7 +28,11 @@ export function ParseRichtextToNodes(text: string): RichtextNode[] {
 	})
 
 	const nodes: RichtextNode[] = []
-	const obj = parser.parse(`<root>${EscapeNonHTMLRichtext(text)}</root>`)
+
+	// EXPERIMENTAL: some CN data has an escaped linebreak (ie. \\n), which will result in invalid
+	// HTML rendering (no linebreaks, just a literal \n character)
+	// we escape those \\n here, but I can't foresee if this would break anything...
+	const obj = parser.parse(`<root>${EscapeNonHTMLRichtext(text.replaceAll("\\n", "\n"))}</root>`)
 
 	// biome-ignore lint/suspicious/noExplicitAny: too lazy to type lol
 	function parseNode(root: any, parentNodeData: RichtextNode | undefined) {

src/routes/[region]/operators/[charId]/+page.svelte

@@ -1,10 +1,18 @@
-<script>
+<script lang="ts">
 	import { ASSETS_BASE, IMAGE_CDN } from "$lib/constants"
 
 	import Skill from "$src/components/operators/Skill.svelte"
+	import Richtext from "$src/components/Richtext.svelte"
+	import Blackboard from "$src/components/Blackboard.svelte"
 
 	const { data } = $props()
 	const charData = data.charData
+
+	const PhaseToEliteIcon: { [k: string]: String } = {
+		PHASE_0: "elite_0",
+		PHASE_1: "elite_1",
+		PHASE_2: "elite_2"
+	}
 </script>
 
 <svelte:head>
@@ -43,9 +51,94 @@
 		</div>
 	</div>
 
-	<div class="mb-5 w-full bg-black/40"></div>
+	<div class="mb-5 flex w-full flex-col gap-1 bg-black/40 p-1">
+		{#each charData.traits as traitData}
+			<div class="bg-black/30 p-2">
+				<div class="mb-2 flex h-8 place-items-center gap-2">
+					<img
+						src="{IMAGE_CDN}{ASSETS_BASE}/arts/elite_hub/{PhaseToEliteIcon[
+							traitData.unlockCondition.phase
+						]}.png"
+						alt="Icon of elite phase"
+					/>
+
+					<p>Lv. {traitData.unlockCondition.level}</p>
+				</div>
+
+				<Richtext text={traitData.description} blackboard={traitData.blackboard} />
+
+				{#if traitData.blackboard}
+					<details class="mt-2 bg-gray-300/10 p-1">
+						<summary class="desc">{data.strings.blackboard}</summary>
+						<Blackboard data={traitData.blackboard} />
+					</details>
+				{/if}
+			</div>
+		{/each}
+	</div>
+
+	<div class="mb-5 flex w-full flex-col gap-1 bg-black/40 p-1">
+		{#each charData.talents as talentData}
+			<table class="bg-black/30">
+				<tbody>
+					<tr class="bg-gray-600/30">
+						<th colspan="2">{talentData.name}</th>
+					</tr>
+
+					{#each talentData.candidates as candidate}
+						<tr>
+							<td class="desc">
+								<div class="center-children flex-col md:flex-row">
+									<img
+										src="{IMAGE_CDN}{ASSETS_BASE}/arts/elite_hub/{PhaseToEliteIcon[
+											candidate.unlockCondition.phase
+										]}.png"
+										alt="Icon of elite phase"
+									/>
+
+									{#if candidate.requiredPotentialRank > 0}
+										<img
+											src="{IMAGE_CDN}{ASSETS_BASE}/arts/potential_hub/potential_{candidate.requiredPotentialRank}_small.png"
+											alt="Icon of potential"
+										/>
+									{/if}
+
+									{#if candidate.unlockCondition.level > 1}
+										<p>Lv. {candidate.unlockCondition.level}</p>
+									{/if}
+								</div>
+							</td>
+							<td>
+								<Richtext
+									text={candidate.description}
+									blackboard={candidate.blackboard}
+								/>
+							</td>
+						</tr>
+					{/each}
+				</tbody>
+			</table>
+		{/each}
+	</div>
 
 	{#each charData.skills as skillData}
 		<Skill {skillData} strings={data.strings} />
 	{/each}
 </main>
+
+<style lang="postcss">
+	td,
+	th {
+		@apply border border-neutral-200/50;
+		@apply p-1;
+		@apply text-left;
+	}
+
+	img {
+		@apply max-h-full max-w-full;
+	}
+
+	.desc {
+		@apply p-0 pl-4 pr-4;
+	}
+</style>