add disable logic when master skill is selected to master variation skills

apps/skillulator/src/routes/c/$class/components/Skill.tsx

···
 				</button>
 			</div>
 			<div className="flex gap-4">
-				{props?.masterVariations?.map((variation) => (
-					<div
-						key={variation.id}
-						data-skill={props.skill.name}
-						className="relative flex flex-col items-center flex-1 py-2 bg-white border border-gray-300 rounded-md basis-1/2 min-content"
-					>
-						<SkillIconButton
-							locale={props.lang}
-							skill={{ ...variation, id: props.skill.id }}
-							variations={props?.masterVariations}
-							masterVariationSkillId={variation?.id}
-							jobId={props.jobId}
-							hasMinLevelRequirements={variation?.hasMinLevelRequirements}
-							isMaxed={variation?.isMaxed}
-						/>
-						<div>
-							{variation.requirements.map((variation, index: number) => (
-								<Requirement
-									key={JSON.stringify({ variation, index })}
-									hasMinLevelRequirements={variation.hasMinLevel}
-									skill={{ level: variation.level, name: variation.name }}
-								/>
-							))}
+				{props?.masterVariations?.map((variation, index) => {
+					const selectedMasterVariation = props?.masterVariations?.some(
+						(s) => s.isSelected === true,
+					)
+						? props?.masterVariations?.filter((s) => s.isSelected === true)
+						: props.masterVariations;
+
+					const isSelectedMasterVariation =
+						!selectedMasterVariation?.every((v) => v.id === variation.id) &&
+						selectedMasterVariation?.length === 1;
+
+					return (
+						<div
+							key={JSON.stringify({ id: variation.id, index })}
+							data-skill={props.skill.name}
+							className="relative flex flex-col items-center flex-1 py-2 bg-white border border-gray-300 rounded-md basis-1/2 min-content"
+						>
+							<SkillIconButton
+								locale={props.lang}
+								skill={{ ...variation, id: props.skill.id }}
+								masterVariationSkillId={variation?.id}
+								isSelectedMasterVariation={isSelectedMasterVariation}
+								jobId={props.jobId}
+								hasMinLevelRequirements={variation?.hasMinLevelRequirements}
+								isMaxed={variation?.isMaxed}
+							/>
+							<div>
+								{variation.requirements.map((variation, index: number) => (
+									<Requirement
+										key={JSON.stringify({ variation, index })}
+										hasMinLevelRequirements={variation.hasMinLevel}
+										skill={{ level: variation.level, name: variation.name }}
+									/>
+								))}
+							</div>
+							{/* <DecreaseSkillPointButton {...props} /> */}
+							<IncreaseSkillToMaxButton
+								skillId={variation.id}
+								jobId={props.jobId}
+								isSelectedMasterVariation={isSelectedMasterVariation}
+								hasMinLevelRequirements={variation?.hasMinLevelRequirements}
+								isMaxed={variation?.isMaxed}
+							/>
 						</div>
-						{/* <DecreaseSkillPointButton {...props} /> */}
-						<IncreaseSkillToMaxButton
-							skillId={variation.id}
-							jobId={props.jobId}
-							hasMinLevelRequirements={variation?.hasMinLevelRequirements}
-							isMaxed={variation?.isMaxed}
-						/>
-					</div>
-				))}
+					);
+				})}
 			</div>
 		</dialog>
 	);

apps/skillulator/src/routes/c/$class/components/action-buttons.tsx

···
 import { useTreeStore } from "@/zustand/treeStore";
 import type { Skill } from "@/types";
 import { t } from "i18next";
-import { useState } from "react";
 
 export function DecreaseSkillPointButton(props: {
 	skill: Skill;
···
 	isMaxed: boolean;
 	jobId: number | undefined;
 	skillId: number;
+	isSelectedMasterVariation?: boolean;
 }) {
 	const { increaseSkillToMax } = useTreeStore();
 	return (
 		<button
 			type="button"
-			disabled={!props.hasMinLevelRequirements || props.isMaxed}
+			disabled={
+				!props.hasMinLevelRequirements ||
+				props.isMaxed ||
+				props.isSelectedMasterVariation
+			}
 			className={clsx(
 				"absolute px-4 py-1 text-xs font-bold text-indigo-900 uppercase bg-indigo-100 border border-indigo-200 rounded-sm right-2 top-2 disabled:cursor-not-allowed a11y-focus",
-				props.hasMinLevelRequirements && !props.isMaxed
+				props.hasMinLevelRequirements &&
+					!props.isMaxed &&
+					!props.isSelectedMasterVariation
 					? "grayscale-0"
 					: "grayscale",
 			)}
···
 	isMaxed: boolean;
 	locale: string;
 	masterVariationSkillId?: number;
-	variations?: Skill["masterVariations"];
+	isSelectedMasterVariation?: boolean;
 }) {
 	const { decreaseSkillPoint, increaseSkillPoint } = useTreeStore();
 
-	const selectedMasterVariation = props?.variations?.some(
-		(s) => s.isSelected === true,
-	)
-		? props?.variations?.filter((s) => s.isSelected === true)
-		: props.variations;
-
-	const isSelectedMasterVariation =
-		!selectedMasterVariation?.every(
-			(variation) => variation.id === props.masterVariationSkillId,
-		) && selectedMasterVariation?.length === 1;
-
 	return (
 		<button
 			type="button"
···
 				});
 			}}
 			// disable also if any other master variation skill has been picked (isSelected === true)
-			disabled={!props.hasMinLevelRequirements || isSelectedMasterVariation}
+			disabled={
+				!props.hasMinLevelRequirements || props.isSelectedMasterVariation
+			}
 			className="flex flex-col items-center disabled:cursor-not-allowed"
 		>
-			{/* <span
-				className={clsx(
-					"font-bold block uppercase",
-					props.hasMinLevelRequirements ? "text-gray-900" : "text-gray-300",
-				)}
-			>
-				{props.isMaxed ? "max" : `${props.skill.skillLevel}`}
-			</span> */}
 			<div className="relative">
 				<img
 					alt=""
 					className={clsx(
 						"h-12 w-12",
-						props.hasMinLevelRequirements && !isSelectedMasterVariation
+						props.hasMinLevelRequirements && !props.isSelectedMasterVariation
 							? "grayscale-0"
 							: "grayscale",
 					)}

apps/skillulator/src/zustand/treeStore.ts

···
 import { produce } from "immer";
 import { create } from "zustand";
+import { immer } from "zustand/middleware/immer";
 import { tree as jobTree } from "@/data/tree";
 import {
 	getJobById,
···
 	skillPoints: 0,
 };
 
-export const useTreeStore = create<State & Actions>()((set, get) => ({
-	jobTree,
-	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 totalSkillPoints = getJobTotalSkillPoints(
-					state.JOB_SKILLPOINTS,
-					jobId,
-					characterLevel,
-				);
-
-				const job = getJobById(jobId, state.jobTree);
-				if (!job) return state;
-
-				const spentSkillPoints = job.skills.reduce(
-					(total, skill) => total + skill.skillLevel * skill.points,
-					0,
-				);
-
-				const remainingSkillPoints = totalSkillPoints - spentSkillPoints;
-
-				state.skillPoints = remainingSkillPoints;
-				return state;
-			}),
-		),
-	increaseSkillPoint: ({
-		jobId,
-		skillId,
-		masterVariationSkillId,
-	}: { jobId: number; skillId: number; masterVariationSkillId?: number }) =>
-		set(
-			produce((state: State) => {
-				const job = getJobById(jobId, state.jobTree);
-				if (!job) return state;
-
-				/**
-				 * Master variation skills don't live in the outer skill array, only within the skill they are variations of...
-				 */
-				const skill = getSkillById(skillId, job.skills);
-				if (
-					skill?.masterVariations?.length &&
-					typeof masterVariationSkillId !== "undefined"
-				) {
-					if (!masterVariationSkillId) return state;
-					const masterVariationSkill = getSkillById(
-						masterVariationSkillId,
-						skill.masterVariations,
+export const useTreeStore = create<State & Actions>()(
+	immer((set) => ({
+		jobTree,
+		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 totalSkillPoints = getJobTotalSkillPoints(
+						state.JOB_SKILLPOINTS,
+						jobId,
+						characterLevel,
 					);
 
-					if (!masterVariationSkill) return state;
+					const job = getJobById(jobId, state.jobTree);
+					if (!job) return state;
 
-					if (masterVariationSkill.skillLevel === masterVariationSkill.levels)
-						return state;
-					if (masterVariationSkill.points > state.skillPoints) return state;
+					const spentSkillPoints = job.skills.reduce(
+						(total, skill) => total + skill.skillLevel * skill.points,
+						0,
+					);
 
-					masterVariationSkill.skillLevel += 1;
-					state.skillPoints -= masterVariationSkill.points;
+					const remainingSkillPoints = totalSkillPoints - spentSkillPoints;
 
-					updateSkillRequirements(
-						job,
-						masterVariationSkillId,
-						masterVariationSkill.skillLevel,
-					);
+					state.skillPoints = remainingSkillPoints;
 					return state;
-				}
+				}),
+			),
+		increaseSkillPoint: ({
+			jobId,
+			skillId,
+			masterVariationSkillId,
+		}: {
+			jobId: number;
+			skillId: number;
+			masterVariationSkillId?: number;
+		}) =>
+			set(
+				produce((state: State) => {
+					const job = getJobById(jobId, state.jobTree);
+					if (!job) return state;
 
-				if (!skill) return state;
+					/**
+					 * Master variation skills don't live in the outer skill array, only within the skill they are variations of...
+					 */
+					const skill = getSkillById(skillId, job.skills);
 
-				if (skill.skillLevel === skill.levels) return state;
-				if (skill.points > state.skillPoints) return state;
+					if (
+						skill?.masterVariations?.length &&
+						typeof masterVariationSkillId !== "undefined"
+					) {
+						if (!masterVariationSkillId) return state;
+						const masterVariationSkill = getSkillById(
+							masterVariationSkillId,
+							skill.masterVariations,
+						);
 
-				skill.skillLevel += 1;
-				state.skillPoints -= skill.points;
+						if (!masterVariationSkill) return state;
 
-				updateSkillRequirements(job, skillId, skill.skillLevel);
-				return state;
-			}),
-		),
-	decreaseSkillPoint: ({
-		jobId,
-		skillId,
-		masterVariationSkillId,
-	}: { jobId: number; skillId: number; masterVariationSkillId?: number }) =>
-		set(
-			produce((state: State) => {
-				const job = getJobById(jobId, state.jobTree);
-				if (!job) return state;
+						if (masterVariationSkill.skillLevel === masterVariationSkill.levels)
+							return state;
+						if (masterVariationSkill.points > state.skillPoints) return state;
 
-				const skill = getSkillById(skillId, job.skills);
-				if (
-					skill?.masterVariations?.length &&
-					typeof masterVariationSkillId !== "undefined"
-				) {
-					if (!masterVariationSkillId) return state;
-					const masterVariationSkill = getSkillById(
-						masterVariationSkillId,
-						skill.masterVariations,
-					);
+						masterVariationSkill.skillLevel += 1;
+						state.skillPoints -= masterVariationSkill.points;
 
-					if (!masterVariationSkill) return state;
-					if (masterVariationSkill.skillLevel === 0) {
+						updateSkillRequirements(
+							job,
+							masterVariationSkillId,
+							masterVariationSkill.skillLevel,
+						);
 						return state;
 					}
 
-					masterVariationSkill.skillLevel -= 1;
-					state.skillPoints += masterVariationSkill.points;
+					if (!skill) return state;
 
-					updateSkillRequirements(
-						job,
-						masterVariationSkillId,
-						masterVariationSkill.skillLevel,
-					);
-					return state;
-				}
+					if (skill.skillLevel === skill.levels) return state;
+					if (skill.points > state.skillPoints) return state;
 
-				if (!skill || skill.skillLevel === 0) return state;
+					skill.skillLevel += 1;
+					state.skillPoints -= skill.points;
 
-				skill.skillLevel -= 1;
-				state.skillPoints += skill.points;
+					updateSkillRequirements(job, skillId, skill.skillLevel);
+					return state;
+				}),
+			),
+		decreaseSkillPoint: ({
+			jobId,
+			skillId,
+			masterVariationSkillId,
+		}: {
+			jobId: number;
+			skillId: number;
+			masterVariationSkillId?: number;
+		}) =>
+			set(
+				produce((state: State) => {
+					const job = getJobById(jobId, state.jobTree);
+					if (!job) return state;
 
-				updateSkillRequirements(job, skillId, skill.skillLevel);
-				return state;
-			}),
-		),
-	createPreloadedSkillTree: (
-		jobId: number,
-		predefinedSkills: Array<Record<string, number>>,
-	) =>
-		set(
-			produce((state: State) => {
-				// we map over the pre-defined skills
-				// 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) return state;
+					const skill = getSkillById(skillId, job.skills);
+					if (
+						skill?.masterVariations?.length &&
+						typeof masterVariationSkillId !== "undefined"
+					) {
+						if (!masterVariationSkillId) return state;
+						const masterVariationSkill = getSkillById(
+							masterVariationSkillId,
+							skill.masterVariations,
+						);
 
-				for (const originalTreeSkill of job.skills) {
-					for (const predefinedTreeSkill of predefinedSkills) {
-						if (originalTreeSkill.id === predefinedTreeSkill.skill) {
-							originalTreeSkill.skillLevel = predefinedTreeSkill.level;
+						if (!masterVariationSkill) return state;
+						if (masterVariationSkill.skillLevel === 0) {
+							return state;
 						}
-					}
+
+						masterVariationSkill.skillLevel -= 1;
+						state.skillPoints += masterVariationSkill.points;
 
-					const skill = getSkillById(originalTreeSkill.id, job.skills);
-					if (skill) {
 						updateSkillRequirements(
 							job,
-							originalTreeSkill.id,
-							skill.skillLevel,
+							masterVariationSkillId,
+							masterVariationSkill.skillLevel,
 						);
+						return state;
 					}
-				}
-				return state;
-			}),
-		),
-	increaseSkillToMax: (skillId: number, jobId: number) =>
-		set(
-			produce((state: State) => {
-				const job = getJobById(jobId, state.jobTree);
-				if (!job) return state;
 
-				const skill = getSkillById(skillId, job.skills);
-				if (!skill) return state;
+					if (!skill || skill.skillLevel === 0) return state;
 
-				if (skill.levels === skill.skillLevel) return state;
+					skill.skillLevel -= 1;
+					state.skillPoints += skill.points;
 
-				const maxPossibleLevel = Math.min(
-					skill.levels,
-					Math.floor(state.skillPoints / skill.points),
-				);
+					updateSkillRequirements(job, skillId, skill.skillLevel);
+					return state;
+				}),
+			),
+		createPreloadedSkillTree: (
+			jobId: number,
+			predefinedSkills: Array<Record<string, number>>,
+		) =>
+			set(
+				produce((state: State) => {
+					// we map over the pre-defined skills
+					// 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) return state;
 
-				if (maxPossibleLevel > skill.skillLevel) {
-					const levelsToAdd = maxPossibleLevel - skill.skillLevel;
-					skill.skillLevel = maxPossibleLevel;
-					state.skillPoints -= levelsToAdd * skill.points;
-				}
+					for (const originalTreeSkill of job.skills) {
+						for (const predefinedTreeSkill of predefinedSkills) {
+							if (originalTreeSkill.id === predefinedTreeSkill.skill) {
+								originalTreeSkill.skillLevel = predefinedTreeSkill.level;
+							}
+						}
 
-				updateSkillRequirements(job, skillId, skill.skillLevel);
-				return state;
-			}),
-		),
-	resetSkillTree: (jobId: number) =>
-		set((state: State) => {
-			const skillPoints = getJobTotalSkillPoints(
-				state.JOB_SKILLPOINTS,
-				jobId,
-				15,
-			);
+						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) return state;
 
-			return {
-				...initialState,
-				skillPoints,
-			};
-		}),
-}));
+					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),
+					);
+
+					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.JOB_SKILLPOINTS,
+					jobId,
+					15,
+				);
+
+				return {
+					...initialState,
+					skillPoints,
+				};
+			}),
+	})),
+);