a collection of tools for fly for fun universe
skillulator.lol
besaid.zone
1import type { RefObject } from "react";
2import { IncreaseSkillToMaxButton, SkillIconButton } from "./action-buttons";
3import { Requirement } from "./Requirement";
4import type { Language, Skill as SkillType } from "@/types";
5
6export function MasterSkillVariationDialog(props: {
7 ref: RefObject<HTMLDialogElement | null>;
8 masterVariations: SkillType["masterVariations"];
9 skill: SkillType;
10 jobId: number | undefined;
11 skillId: number;
12 hasMinLevelRequirements: boolean;
13 isMaxed: boolean;
14 lang: Language;
15}) {
16 const skillName = props.skill.name.en
17 .replaceAll(" ", "")
18 .replace(/'/, "")
19 .replace(/[\[\]()]/g, "")
20 .replace(":", "");
21 return (
22 <dialog
23 ref={props.ref}
24 className="border border-gray-300 shadow-sm rounded-md p-5 w-1/2 xl:w-[60%] mx-auto my-auto"
25 >
26 <div className="flex justify-between mb-4">
27 <h2 className="font-bold">
28 Select a Master Variation (you can only choose one)
29 </h2>
30 <button
31 type="button"
32 onClick={() => props?.ref?.current?.close()}
33 className="text-sm bg-red-500 text-white py-1 px-2 rounded-md cursor-pointer"
34 >
35 Close Dialog
36 </button>
37 </div>
38 <div className="flex gap-4">
39 {props?.masterVariations?.map((variation, index) => {
40 const selectedMasterVariation = props?.masterVariations?.some(
41 (s) => s.isSelected === true,
42 )
43 ? props?.masterVariations?.filter((s) => s.isSelected === true)
44 : props.masterVariations;
45
46 const isSelectedMasterVariation =
47 !selectedMasterVariation?.every((v) => v.id === variation.id) &&
48 selectedMasterVariation?.length === 1;
49
50 return (
51 <div
52 key={JSON.stringify({ id: variation.id, index })}
53 data-skill={skillName}
54 className="relative flex flex-col items-center flex-1 py-2 bg-white border border-gray-300 rounded-md basis-1/2 min-content"
55 >
56 <SkillIconButton
57 locale={props.lang}
58 skill={{
59 ...variation,
60 id: props.skill.id,
61 masterVariations: props.masterVariations,
62 }}
63 masterVariationSkillId={variation?.id}
64 isSelectedMasterVariation={isSelectedMasterVariation}
65 jobId={props.jobId}
66 hasMinLevelRequirements={variation?.hasMinLevelRequirements}
67 isMaxed={variation?.isMaxed}
68 />
69 <div>
70 {variation.requirements.map((variation, index: number) => (
71 <Requirement
72 key={JSON.stringify({ variation, index })}
73 hasMinLevelRequirements={variation.hasMinLevel}
74 skill={{ level: variation.level, name: variation.name }}
75 />
76 ))}
77 </div>
78 <IncreaseSkillToMaxButton
79 skillId={props.skill.id}
80 jobId={props.jobId}
81 isSelectedMasterVariation={isSelectedMasterVariation}
82 masterVariationSkillId={variation.id}
83 hasMinLevelRequirements={variation?.hasMinLevelRequirements}
84 isMaxed={variation?.isMaxed}
85 />
86 </div>
87 );
88 })}
89 </div>
90 </dialog>
91 );
92}