Cleaned up markup

.prettierrc

@@ -0,0 +1,13 @@
+{
+	"useTabs": true,
+	"tabWidth": 4,
+	"singleQuote": false,
+	"semi": false,
+	"printWidth": 100,
+	"trailingComma": "none",
+
+	"svelteStrictMode": true,
+
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
+	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
+}

.vscode/settings.json

@@ -17,14 +17,10 @@
 	"json.format.keepLines": true,
 	"git.enableSmartCommit": true,
 
-	"prettier.useTabs": true,
-	"prettier.tabWidth": 4,
-	"prettier.singleQuote": false,
-	"prettier.semi": false,
-	"prettier.printWidth": 100,
+	"prettier.documentSelectors": [ "**/*.svelte" ],
 
 	"[jsonc][json]": {
-		"editor.defaultFormatter": "vscode.json-language-features"
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 
 	"javascript.updateImportsOnFileMove.enabled": "always",
@@ -34,7 +30,7 @@
 	},
 
 	"[svelte]": {
-		"editor.defaultFormatter": "svelte.svelte-vscode"
+		"editor.defaultFormatter": "esbenp.prettier-vscode"
 	},
 
 	"svelte.enable-ts-plugin": true

package.json

@@ -2,6 +2,11 @@
 	"name": "rhodesdb",
 	"version": "0.2.0",
 	"devDependencies": {
+		"prettier": "^3.3.3",
+		"prettier-plugin-svelte": "^3.2.6",
+		"prettier-plugin-tailwindcss": "^0.6.5"
+	},
+	"dependencies": {
 		"@sveltejs/adapter-static": "^3.0.2",
 		"@sveltejs/kit": "^2.5.18",
 		"@sveltejs/vite-plugin-svelte": "^3.1.1",

src/components/Richtext.svelte

@@ -5,7 +5,7 @@
 	import { page } from "$app/stores" // do not ever use this component outside of [region] layout
 
 	import type { BlackboardEntry } from "$lib/types"
-	
+
 	const ColorRegex = /<color=(.*?)>\{0}/gm
 	const BlackboardVarRegex = /{(.+)}/gm
 
@@ -28,7 +28,7 @@
 				style: "",
 				title: "",
 				isGlossary: false,
-				effectKey: "",
+				effectKey: ""
 			}
 			let text = rawNode.text
 
@@ -73,7 +73,7 @@
 							text = text.replace(
 								entireMatch,
 								value.toLocaleString(undefined, {
-									style: "percent",
+									style: "percent"
 								})
 							)
 						} else if (varFormat === "0.0%") {
@@ -82,7 +82,7 @@
 								entireMatch,
 								value.toLocaleString(undefined, {
 									style: "percent",
-									minimumFractionDigits: 1,
+									minimumFractionDigits: 1
 								})
 							)
 						}

src/components/operators/Skill.svelte

@@ -15,21 +15,21 @@
 	const { skillData, strings }: Props = $props()
 </script>
 
-<div class="w-full center-children flex-col bg-black/40 mb-2 p-1 rounded-sm">
+<div class="center-children mb-2 w-full flex-col rounded-sm bg-black/40 p-1">
 	<!-- header, includes skill icon and name -->
-	<div class="w-full h-16 flex mb-2">
+	<div class="mb-2 flex h-16 w-full">
 		<img
 			src="{IMAGE_CDN}{ASSETS_BASE}/arts/skills/{skillData.iconPath}"
 			alt="Icon of skill {skillData.name}"
-			class="aspect-square mr-3"
+			class="mr-3 aspect-square"
 		/>
 
 		<p class="font-bold">{skillData.name}</p>
 	</div>
 
 	<!-- body, includes levels -->
 	<details class="w-full bg-black/50">
-		<summary class="pl-2 pr-2 p-1">{strings.level_plural}</summary>
+		<summary class="p-1 pl-2 pr-2">{strings.level_plural}</summary>
 		<table class="mt-2 w-full">
 			<thead>
 				<tr>
@@ -83,7 +83,7 @@
 	}
 
 	img {
-		@apply max-w-full max-h-full;
+		@apply max-h-full max-w-full;
 	}
 
 	.desc {

src/lib/logic/operators.ts

@@ -30,6 +30,8 @@ type RawCharSkill = {
 	levelUpCostCond: RawSkillMasteryData[]
 }
 
+type RawCharTrait = {}
+
 type RawCharacter = {
 	rarity: string
 
@@ -45,6 +47,7 @@ type RawCharacter = {
 	subProfessionId: string
 
 	skills: RawCharSkill[]
+	trait: RawCharTrait[] | undefined
 }
 
 type RawCharacterTable = { [id: string]: RawCharacter }
@@ -110,13 +113,13 @@ for (const region of SERVERS) {
 	const rawCharTable = JSON.parse(
 		(
 			await fs.readFile(`${GAMEDATA_PATH}/${langCode}/gamedata/excel/character_table.json`)
-		).toString()
+		).toString(),
 	) as RawCharacterTable
 
 	const RawSkillTable = JSON.parse(
 		(
 			await fs.readFile(`${GAMEDATA_PATH}/${langCode}/gamedata/excel/skill_table.json`)
-		).toString()
+		).toString(),
 	) as RawSkillTable
 
 	for (const [charId, rawChar] of Object.entries(rawCharTable)) {

src/routes/+layout.svelte

@@ -1,7 +1,7 @@
 <script>
-    import "$src/app.css"
+	import "$src/app.css"
 
-    const { children } = $props()
+	const { children } = $props()
 </script>
 
-{@render children()}
+{@render children()}

src/routes/[region]/+layout.svelte

@@ -1,27 +1,27 @@
 <script>
-    import { base } from "$app/paths"
+	import { base } from "$app/paths"
 
-    const { children, data } = $props()
+	const { children, data } = $props()
 </script>
 
 {#snippet link(text, destination)}
-    <a 
-        href="{base}/{data.region}/{destination}"
-        class="grow h-full center-children odd:bg-slate-600 hover:bg-slate-800"
-    >
-        <p>{text}</p>
-    </a>
+	<a
+		href="{base}/{data.region}/{destination}"
+		class="center-children h-full grow odd:bg-slate-600 hover:bg-slate-800"
+	>
+		<p>{text}</p>
+	</a>
 {/snippet}
 
-<div class="h-10 bg-slate-700 text-gray-200 w-full fixed z-10">
-    <div class="w-full md:w-[50%] xl:w-[30%] h-full center-children m-auto">
-        {@render link(data.strings.depot, "depot")}
-        {@render link(data.strings.enemies, "enemies")}
-        {@render link(data.strings.operators, "operators")}
-        {@render link(data.strings.glossary, "glossary")}
-    </div>
+<div class="fixed z-10 h-10 w-full bg-slate-700 text-gray-200">
+	<div class="center-children m-auto h-full w-full md:w-[50%] xl:w-[30%]">
+		{@render link(data.strings.depot, "depot")}
+		{@render link(data.strings.enemies, "enemies")}
+		{@render link(data.strings.operators, "operators")}
+		{@render link(data.strings.glossary, "glossary")}
+	</div>
 </div>
 
-<div class="min-w-dvw min-h-dvh bg-gray-800 text-gray-200 pt-10">
-    {@render children()}
+<div class="min-w-dvw min-h-dvh bg-gray-800 pt-10 text-gray-200">
+	{@render children()}
 </div>

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

@@ -1,5 +1,5 @@
-<div class="w-full h-full center-children">
-    <p class="text-3xl font-bold">
-        Build time: {new Date().toUTCString()}
-    </p>
+<div class="center-children h-full w-full">
+	<p class="text-3xl font-bold">
+		Build time: {new Date().toUTCString()}
+	</p>
 </div>

src/routes/[region]/depot/+page.svelte

@@ -14,15 +14,15 @@
 </svelte:head>
 
 <main
-	class="max-w-3xl m-auto p-2 gap-1 grid grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7"
+	class="m-auto grid max-w-3xl grid-cols-4 gap-1 p-2 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7"
 >
 	{#each itemTable as [itemId, item] (itemId)}
 		{@const iconPath = data.iconPaths[item.iconId]}
 		{@const url = iconPath ? `${IMAGE_CDN}${ASSETS_BASE}/${iconPath}` : "/missing.png"}
 
 		<a
 			href="{base}/{data.region}/depot/{itemId}"
-			class="aspect-square relative center-children hover:scale-110"
+			class="center-children relative aspect-square hover:scale-110"
 			title={item.name}
 		>
 			<img
@@ -38,6 +38,6 @@
 
 <style lang="postcss">
 	img {
-		@apply absolute max-w-full max-h-full;
+		@apply absolute max-h-full max-w-full;
 	}
 </style>

src/routes/[region]/depot/[itemId]/+page.svelte

@@ -6,9 +6,9 @@
 	<title>{data.name}</title>
 </svelte:head>
 
-<div class="max-w-3xl min-h-dvh m-auto p-2 center-children">
-	<main class="center-children w-full h-fit flex-col gap-3 sm:flex-row;">
-		<div class="relative sm:w-[30%] h-fit pr-4 center-children">
+<div class="center-children m-auto min-h-dvh max-w-3xl p-2">
+	<main class="center-children sm:flex-row; h-fit w-full flex-col gap-3">
+		<div class="center-children relative h-fit pr-4 sm:w-[30%]">
 			<img src={data.iconUrl} alt="Icon of {data.name}" loading="lazy" class="absolute" />
 
 			<img
@@ -18,7 +18,7 @@
 			/>
 		</div>
 
-		<div class="sm:w-[70%] h-fit">
+		<div class="h-fit sm:w-[70%]">
 			<p class="text-2xl font-bold">
 				{data.name}
 			</p>
@@ -32,6 +32,6 @@
 
 <style lang="postcss">
 	img {
-		@apply w-auto h-full max-w-full max-h-full object-contain;
+		@apply h-full max-h-full w-auto max-w-full object-contain;
 	}
 </style>

src/routes/[region]/enemies/+page.svelte

@@ -1,39 +1,35 @@
 <script>
-    import { base } from "$app/paths"
-    import { IMAGE_CDN, ASSETS_BASE } from "$lib/constants"
+	import { base } from "$app/paths"
+	import { IMAGE_CDN, ASSETS_BASE } from "$lib/constants"
 
-    const { data } = $props()
+	const { data } = $props()
 
-    const displayedEnemies = Object.values(data.enemiesTable).toSorted(
-        (a, b) => a.sortId - b.sortId,
-    )
+	const displayedEnemies = Object.values(data.enemiesTable).toSorted(
+		(a, b) => a.sortId - b.sortId
+	)
 </script>
 
 <svelte:head>
-    <title>{data.strings.enemies}</title>
+	<title>{data.strings.enemies}</title>
 </svelte:head>
 
-<main
-    class="max-w-3xl m-auto p-2 grid grid-cols-4 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7"
->
-    {#each displayedEnemies as enemy (enemy.enemyId)}
-        {@const iconPath = data.iconPaths[enemy.enemyId]}
-        {@const url = iconPath
-            ? `${IMAGE_CDN}${ASSETS_BASE}/${iconPath}`
-            : "/missing.png"}
+<main class="m-auto grid max-w-3xl grid-cols-4 p-2 md:grid-cols-5 lg:grid-cols-6 xl:grid-cols-7">
+	{#each displayedEnemies as enemy (enemy.enemyId)}
+		{@const iconPath = data.iconPaths[enemy.enemyId]}
+		{@const url = iconPath ? `${IMAGE_CDN}${ASSETS_BASE}/${iconPath}` : "/missing.png"}
 
-        <a
-            href="{base}/{data.region}/enemies/{enemy.enemyId}"
-            class="relative hover:scale-110"
-            title={enemy.name}
-        >
-            <div class="min-w-[30%] text-center absolute right-0 bg-black p-1">
-                <p>{enemy.code}</p>
-            </div>
+		<a
+			href="{base}/{data.region}/enemies/{enemy.enemyId}"
+			class="relative hover:scale-110"
+			title={enemy.name}
+		>
+			<div class="absolute right-0 min-w-[30%] bg-black p-1 text-center">
+				<p>{enemy.code}</p>
+			</div>
 
-            <div class="aspect-square">
-                <img src={url} alt="Icon of {enemy.name}" />
-            </div>
-        </a>
-    {/each}
+			<div class="aspect-square">
+				<img src={url} alt="Icon of {enemy.name}" />
+			</div>
+		</a>
+	{/each}
 </main>