some more minor refactors and suggested changes

apps/skillulator/src/components/Navbar.tsx

···
-import { ChangeEvent, useState } from "react";
+import type { ChangeEvent } from "react";
 import { useTranslation } from "react-i18next";
-import { languages } from "../utils";
+import { languages } from "../utils/constants";
 
 export function Navbar() {
-  const { i18n } = useTranslation();
+	const { i18n } = useTranslation();
 
-  const preferredLanguage = i18n.language;
+	const preferredLanguage = i18n.language;
 
-  const handleLanguageChange = (event: ChangeEvent<HTMLSelectElement>) => {
-    const lang = event.target.value;
-    i18n.changeLanguage(lang);
-  };
+	const handleLanguageChange = (event: ChangeEvent<HTMLSelectElement>) => {
+		const lang = event.target.value;
+		i18n.changeLanguage(lang);
+	};
 
-  return (
-    <header className="py-4">
-      <nav className="flex px-5">
-        <label htmlFor="language" className="sr-only">
-          Select a language
-        </label>
-        <select
-          name="language"
-          defaultValue={preferredLanguage}
-          onChange={handleLanguageChange}
-          id="language"
-          className="rounded-md border border-gray-300 px-2 py-1.5 shadow-sm ml-auto w-[100px] absolute right-20 a11y-focus"
-        >
-          {languages.map((lang, index) => (
-            <option value={lang.label} key={JSON.stringify({ lang, index })}>
-              {lang.label.toUpperCase()}
-            </option>
-          ))}
-        </select>
-      </nav>
-    </header>
-  );
+	return (
+		<header className="py-4">
+			<nav className="flex px-5">
+				<label htmlFor="language" className="sr-only">
+					Select a language
+				</label>
+				<select
+					name="language"
+					defaultValue={preferredLanguage}
+					onChange={handleLanguageChange}
+					id="language"
+					className="rounded-md border border-gray-300 px-2 py-1.5 shadow-sm ml-auto w-[100px] absolute right-20 a11y-focus"
+				>
+					{languages.map((lang, index) => (
+						<option value={lang.label} key={JSON.stringify({ lang, index })}>
+							{lang.label.toUpperCase()}
+						</option>
+					))}
+				</select>
+			</nav>
+		</header>
+	);
 }

apps/skillulator/src/components/Skill.tsx

···
-import { getLanguageForSkill } from "../utils";
-import { useTreeStore, State } from "../zustand/treeStore";
+import { getLanguageForSkill } from "../utils/language";
+import { useTreeStore, type State } from "../zustand/treeStore";
 import clsx from "clsx";
-import { languages } from "../utils/index";
+import { languages } from "../utils/constants";
 
 interface SkillProps {
 	skill: State["jobTree"][0]["skills"][0];

apps/skillulator/src/routes/index.lazy.tsx

···
 						{JOBS.map((job) => (
 							<Link
 								aria-label={`Go to the ${job.name} skill tree`}
-								to={`/c/${job.name}`}
+								params={{ class: job.name }}
+								to="/c/$class"
 								key={job.name}
 								className="flex flex-col items-center justify-center px-1 py-2 duration-150 bg-white border border-gray-300 rounded-md hover:bg-gray-100 lg:px-5 a11y-focus"
 							>

apps/skillulator/src/utils/skill-tree-helpers.ts

···
 	return skills.filter((skill) => skill.id === skillId).at(0);
 }
 
+export interface SkillRequirement {
+	skill: number;
+	level: number;
+	hasMinLevel: boolean;
+}
+
+export function updateSkillRequirements(
+	job: Jobs[0],
+	skillId: number,
+	newSkillLevel: number,
+): void {
+	if (!job) return;
+
+	for (const skill of job.skills) {
+		const requirement = skill.requirements.find((req) => req.skill === skillId);
+		if (!requirement) continue;
+
+		const requirementIndex = skill.requirements.findIndex(
+			(req) => req.skill === skillId,
+		);
+
+		const meetsRequirement = newSkillLevel >= requirement.level;
+		skill.requirements[requirementIndex].hasMinLevel = meetsRequirement;
+	}
+}
+
+export function checkSkillRequirements(skill: Skills[0]): boolean {
+	return skill.requirements.every((req) => req.hasMinLevel);
+}
+
+export function isSkillMaxed(skill: Skills[0]): boolean {
+	return skill.skillLevel === skill.levels;
+}
+
 export function getJobByName(jobName: string, jobs: Jobs) {
 	return jobs.find(
 		(job) => job.name.en.toLowerCase() === jobName.toLowerCase(),

apps/skillulator/src/zustand/treeStore.ts

···
 import { create } from "zustand";
 import { tree as jobTree } from "../../data/tree";
 import {
-	classSkillPoints,
 	getJobById,
 	getJobTotalSkillPoints,
 	getSkillById,
-} from "../utils";
+	updateSkillRequirements,
+} from "../utils/skill-tree-helpers";
+import { JOB_SKILLPOINTS } from "../utils/constants";
 
 export type State = {
 	jobTree: typeof jobTree;
 	skillPoints: number;
-	classSkillPoints: typeof classSkillPoints;
+	JOB_SKILLPOINTS: typeof JOB_SKILLPOINTS;
 };
 
 type Actions = {
···
 
 const initialState: State = {
 	jobTree,
-	classSkillPoints,
+	JOB_SKILLPOINTS,
 	skillPoints: 0,
 };
 
 export const useTreeStore = create<State & Actions>()((set, _) => ({
 	jobTree,
-	classSkillPoints,
+	JOB_SKILLPOINTS,
 	skillPoints: 0,
 	initSkillPoints: (jobId: number, characterLevel: number) =>
 		set(
 			produce((state: State) => {
 				// need to figure out how many skill points are already spent and subtract it
-				const skillPoints = getJobTotalSkillPoints(
-					state.classSkillPoints,
+				const totalSkillPoints = getJobTotalSkillPoints(
+					state.JOB_SKILLPOINTS,
 					jobId,
 					characterLevel,
 				);
 
-				let skillPointsToSubtract = 0;
 				const job = getJobById(jobId, state.jobTree);
+				if (!job) return state;
 
-				if (job) {
-					for (const skill of job.skills) {
-						skillPointsToSubtract += skill.skillLevel * skill.points;
-					}
-				}
+				const spentSkillPoints = job.skills.reduce(
+					(total, skill) => total + skill.skillLevel * skill.points,
+					0,
+				);
 
-				const remainingSkillPoints = skillPoints - skillPointsToSubtract;
+				const remainingSkillPoints = totalSkillPoints - spentSkillPoints;
 
 				state.skillPoints = remainingSkillPoints;
 				return state;
···
 		set(
 			produce((state: State) => {
 				const job = getJobById(jobId, state.jobTree);
-				if (job) {
-					const skill = getSkillById(skillId, job?.skills);
-					if (skill) {
-						if (skill.skillLevel === skill.levels) return state;
-						if (skill.points > state.skillPoints) return state;
-						skill.skillLevel += 1;
-						state.skillPoints -= skill.points;
-					}
+				if (!job) return state;
+
+				const skill = getSkillById(skillId, job.skills);
+				if (!skill) return state;
+
+				if (skill.skillLevel === skill.levels) return state;
+				if (skill.points > state.skillPoints) return state;
 
-					// find all required skills
-					// if it's the min level, switch hasMinLevel to true
-					for (const skill of job.skills) {
-						const requiredSkill = skill.requirements.find(
-							(required) => required.skill === skillId,
-						);
-						const requiredSkillIndex = skill.requirements.findIndex(
-							(required) => required.skill === skillId,
-						);
-						if (
-							typeof requiredSkill !== "undefined" &&
-							requiredSkill.level === skill.skillLevel
-						) {
-							skill.requirements[requiredSkillIndex].hasMinLevel = true;
-						}
-					}
-				}
+				skill.skillLevel += 1;
+				state.skillPoints -= skill.points;
 
+				updateSkillRequirements(job, skillId, skill.skillLevel);
 				return state;
 			}),
 		),
···
 		set(
 			produce((state: State) => {
 				const job = getJobById(jobId, state.jobTree);
-				if (job) {
-					const skill = getSkillById(skillId, job.skills);
-					if (skill) {
-						if (skill.skillLevel === 0) return state;
-						skill.skillLevel -= 1;
-						state.skillPoints += skill.points;
-					}
+				if (!job) return state;
+
+				const skill = getSkillById(skillId, job.skills);
+				if (!skill || skill.skillLevel === 0) return state;
+
+				skill.skillLevel -= 1;
+				state.skillPoints += skill.points;
 
-					// find all required skills
-					// if the skillLevel is less than the required skills required level switch to false
-					for (const skill of job.skills) {
-						const requiredSkill = skill.requirements.find(
-							(required) => required.skill === skillId,
-						);
-						const requiredSkillIndex = skill.requirements.findIndex(
-							(required) => required.skill === skillId,
-						);
-						if (
-							typeof requiredSkill !== "undefined" &&
-							skill.skillLevel < requiredSkill.level
-						) {
-							skill.requirements[requiredSkillIndex].hasMinLevel = false;
-						}
-					}
-				}
+				updateSkillRequirements(job, skillId, skill.skillLevel);
+				return state;
 			}),
 		),
 	createPreloadedSkillTree: (
···
 				// we check the skill id and level and update the skillLevel accordingly
 				// we also need to do the check to see if the skill is the min level
 				const job = getJobById(jobId, state.jobTree);
-				if (job) {
-					for (const originalTreeSkill of job.skills) {
-						for (const preloadedSkill of predefinedSkills) {
-							if (originalTreeSkill.id === preloadedSkill.skill) {
-								originalTreeSkill.skillLevel = preloadedSkill.level;
-							}
+				if (!job) return state;
+
+				for (const originalTreeSkill of job.skills) {
+					for (const predefinedTreeSkill of predefinedSkills) {
+						if (originalTreeSkill.id === predefinedTreeSkill.skill) {
+							originalTreeSkill.skillLevel = predefinedTreeSkill.level;
 						}
-						const skill = getSkillById(originalTreeSkill.id, job.skills);
+					}
 
-						if (skill) {
-							for (const s of job.skills) {
-								const requiredSkill = s.requirements.find(
-									(required) => required.skill === originalTreeSkill.id,
-								);
-								const requiredSkillIndex = s.requirements.findIndex(
-									(required) => required.skill === originalTreeSkill.id,
-								);
-								if (
-									typeof requiredSkill !== "undefined" &&
-									requiredSkill.level <= skill.skillLevel
-								) {
-									s.requirements[requiredSkillIndex].hasMinLevel = true;
-								}
-							}
-						}
+					const skill = getSkillById(originalTreeSkill.id, job.skills);
+					if (skill) {
+						updateSkillRequirements(
+							job,
+							originalTreeSkill.id,
+							skill.skillLevel,
+						);
 					}
 				}
+				return state;
 			}),
 		),
 	increaseSkillToMax: (skillId: number, jobId: number) =>
 		set(
 			produce((state: State) => {
 				const job = getJobById(jobId, state.jobTree);
-				if (job) {
-					const skill = getSkillById(skillId, job.skills);
+				if (!job) return state;
 
-					if (skill) {
-						if (skill.levels === skill.skillLevel) return state;
-						if (skill.levels * skill.skillLevel < state.skillPoints) {
-							skill.skillLevel =
-								state.skillPoints / skill.points > skill.levels
-									? skill.levels
-									: Math.floor(+(state.skillPoints / skill.points));
-							state.skillPoints -= skill.skillLevel * skill.points;
-						}
-					}
+				const skill = getSkillById(skillId, job.skills);
+				if (!skill) return state;
+
+				if (skill.levels === skill.skillLevel) return state;
+
+				const maxPossibleLevel = Math.min(
+					skill.levels,
+					Math.floor(state.skillPoints / skill.points),
+				);
 
-					// refactor this block of code
-					for (const s of job.skills) {
-						const requiredSkill = s.requirements.find(
-							(required) => required.skill === skillId,
-						);
-						const requiredSkillIndex = s.requirements.findIndex(
-							(required) => required.skill === skillId,
-						);
-						if (
-							typeof requiredSkill !== "undefined" &&
-							(requiredSkill.level < s.skillLevel ||
-								requiredSkill.level === s.skillLevel)
-						) {
-							s.requirements[requiredSkillIndex].hasMinLevel = true;
-						}
-					}
+				if (maxPossibleLevel > skill.skillLevel) {
+					const levelsToAdd = maxPossibleLevel - skill.skillLevel;
+					skill.skillLevel = maxPossibleLevel;
+					state.skillPoints -= levelsToAdd * skill.points;
 				}
+
+				updateSkillRequirements(job, skillId, skill.skillLevel);
+				return state;
 			}),
 		),
 	resetSkillTree: (jobId: number) =>
 		set((state: State) => {
 			const skillPoints = getJobTotalSkillPoints(
-				state.classSkillPoints,
+				state.JOB_SKILLPOINTS,
 				jobId,
 				15,
 			);