besaid.zone
+78
-78
apps/skillulator/src/routes/c/$class/route.tsx
+78
-78
apps/skillulator/src/routes/c/$class/route.tsx
···
7
import { CopyButton, ResetButton } from "./components/action-buttons";
8
9
export const Route = createFileRoute("/c/$class")({
10
-
component: SkillTree,
11
});
12
13
function SkillTree() {
14
-
const {
15
-
job,
16
-
skills,
17
-
level,
18
-
skillPoints,
19
-
copied,
20
-
language,
21
-
handleLevelChange,
22
-
copyToClipboard,
23
-
handleReset,
24
-
} = useSkillTree();
25
26
-
const params = useParams({ from: "/c/$class" });
27
28
-
return (
29
-
<>
30
-
<Suspense>
31
-
<div className="px-5 2xl:px-0 my-10">
32
-
<div className="flex flex-col justify-between mb-10 md:flex-row max-w-[1440px] mx-auto">
33
-
<div className="flex flex-col-reverse">
34
-
<h1 className="text-2xl font-bold capitalize">{params.class}</h1>
35
-
<Link
36
-
to="/"
37
-
className="mb-2 text-indigo-600 hover:underline md:mb-4 a11y-focus"
38
-
>
39
-
{" "}
40
-
← {t("classSelectionLink")}
41
-
</Link>
42
-
</div>
43
-
<div className="flex flex-col gap-2 md:flex-row">
44
-
<div className="flex justify-between gap-2">
45
-
<div className="self-end h-min">
46
-
<p>{t("availSkillPoints")}</p>
47
-
<span className="font-bold">{skillPoints}</span>
48
-
</div>
49
-
<div className="flex flex-col self-end h-min">
50
-
<label htmlFor="characterLevel" className="text-sm">
51
-
{t("charLevel")}
52
-
</label>
53
-
<input
54
-
type="number"
55
-
className="rounded-md border border-gray-300 px-4 py-1.5 a11y-focus"
56
-
inputMode="numeric"
57
-
pattern="[0-9]*"
58
-
value={level}
59
-
onChange={handleLevelChange}
60
-
min={15}
61
-
max={165}
62
-
/>
63
-
</div>
64
-
</div>
65
-
<CopyButton copied={copied} copyToClipboard={copyToClipboard} />
66
-
<ResetButton handleReset={handleReset} />
67
-
</div>
68
-
</div>
69
-
<div
70
-
className={clsx(
71
-
"xl:grid max-w-[1440px] mx-auto gap-0.5",
72
-
params.class,
73
-
)}
74
-
>
75
-
{skills?.map((skill, index: number) => {
76
-
return (
77
-
<Skill
78
-
lang={language}
79
-
key={JSON.stringify({ name: skill.name, index })}
80
-
hasMinLevelRequirements={skill.hasMinLevelRequirements}
81
-
isMaxed={skill.isMaxed}
82
-
skill={skill}
83
-
skillId={skill.id}
84
-
jobId={job?.id}
85
-
/>
86
-
);
87
-
})}
88
-
</div>
89
-
</div>
90
-
</Suspense>
91
-
</>
92
-
);
93
}
···
7
import { CopyButton, ResetButton } from "./components/action-buttons";
8
9
export const Route = createFileRoute("/c/$class")({
10
+
component: SkillTree,
11
});
12
13
function SkillTree() {
14
+
const {
15
+
job,
16
+
skills,
17
+
level,
18
+
skillPoints,
19
+
copied,
20
+
language,
21
+
handleLevelChange,
22
+
copyToClipboard,
23
+
handleReset,
24
+
} = useSkillTree();
25
26
+
const params = useParams({ from: "/c/$class" });
27
28
+
return (
29
+
<>
30
+
<Suspense>
31
+
<div className="px-5 2xl:px-0 my-10">
32
+
<div className="flex flex-col justify-between mb-10 md:flex-row max-w-[1440px] mx-auto">
33
+
<div className="flex flex-col-reverse">
34
+
<h1 className="text-2xl font-bold capitalize">{params.class}</h1>
35
+
<Link
36
+
to="/"
37
+
className="mb-2 text-indigo-600 hover:underline md:mb-4 a11y-focus"
38
+
>
39
+
{" "}
40
+
← {t("classSelectionLink")}
41
+
</Link>
42
+
</div>
43
+
<div className="flex flex-col gap-2 md:flex-row">
44
+
<div className="flex justify-between gap-2">
45
+
<div className="self-end h-min">
46
+
<p>{t("availSkillPoints")}</p>
47
+
<span className="font-bold">{skillPoints}</span>
48
+
</div>
49
+
<div className="flex flex-col self-end h-min">
50
+
<label htmlFor="characterLevel" className="text-sm">
51
+
{t("charLevel")}
52
+
</label>
53
+
<input
54
+
type="number"
55
+
className="rounded-md border border-gray-300 px-4 py-1.5 a11y-focus"
56
+
inputMode="numeric"
57
+
pattern="[0-9]*"
58
+
value={level}
59
+
onChange={handleLevelChange}
60
+
min={15}
61
+
max={190}
62
+
/>
63
+
</div>
64
+
</div>
65
+
<CopyButton copied={copied} copyToClipboard={copyToClipboard} />
66
+
<ResetButton handleReset={handleReset} />
67
+
</div>
68
+
</div>
69
+
<div
70
+
className={clsx(
71
+
"xl:grid max-w-[1440px] mx-auto gap-0.5",
72
+
params.class,
73
+
)}
74
+
>
75
+
{skills?.map((skill, index: number) => {
76
+
return (
77
+
<Skill
78
+
lang={language}
79
+
key={JSON.stringify({ name: skill.name, index })}
80
+
hasMinLevelRequirements={skill.hasMinLevelRequirements}
81
+
isMaxed={skill.isMaxed}
82
+
skill={skill}
83
+
skillId={skill.id}
84
+
jobId={job?.id}
85
+
/>
86
+
);
87
+
})}
88
+
</div>
89
+
</div>
90
+
</Suspense>
91
+
</>
92
+
);
93
}