Skip to content

Commit ed5ceaa

Browse files
PrecontationPrecontation
committed
Some changes to make tab control better
1 parent be2bf42 commit ed5ceaa

6 files changed

Lines changed: 72 additions & 53 deletions

File tree

‎src/app/about/actual/page.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -21,9 +21,11 @@ export default function ActualAbout() {
2121
</li>
2222
</ul>
2323
<h2 className="justify-center text-3xl w-fit text-secondary overflow-hidden"></h2>
24-
<Link href={"/about"}>
25-
<button className="rounded-full bg-primary p-2">Back</button>
26-
</Link>
24+
<nav>
25+
<Link draggable={false} tabIndex={-1} href={"/about"}>
26+
<button className="rounded-full bg-primary p-2">Back</button>
27+
</Link>
28+
</nav>
2729
</div>
2830
);
2931
}

‎src/app/about/page.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,14 +9,14 @@ export default function About() {
99
<h2 className="justify-center text-3xl w-fit text-secondary overflow-hidden">
1010
i am probably a human person
1111
</h2>
12-
<div className="flex flex-row items-center gap-5">
13-
<Link href={"/"}>
12+
<nav className="flex flex-row items-center gap-5">
13+
<Link draggable={false} tabIndex={-1} href={"/"}>
1414
<button className="rounded-full bg-primary p-2">Back</button>
1515
</Link>
16-
<Link href={"/about/actual"}>
16+
<Link draggable={false} tabIndex={-1} href={"/about/actual"}>
1717
<button className="rounded-full bg-primary p-2">No but really</button>
1818
</Link>
19-
</div>
19+
</nav>
2020
<div className="flex flex-col items-center">
2121
<em>{"I\'m not that special"}</em>
2222
<em>-me, 2026</em>

‎src/app/games/GamesClient.tsx‎

Lines changed: 14 additions & 28 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
"use client";
22

3-
import Link from "next/link";
3+
import GamesButton from "@/components/GamesButton";
44
import { useSearchParams } from "next/navigation";
55

66
export default function GamesClient() {
@@ -19,33 +19,19 @@ export default function GamesClient() {
1919
<h2 className="justify-center text-3xl w-fit text-secondary overflow-hidden">
2020
Some (very unfinished) games by yours truly!
2121
</h2>
22-
<div className=" grid grid-cols-3 gap-10">
23-
<Link href="/games?g=br2">
24-
<button className="rounded-2xl bg-primary w-50 h-50">
25-
Banana run 2
26-
</button>
27-
</Link>
28-
<Link href="/games?g=br3">
29-
<button className="rounded-2xl bg-primary w-50 h-50">
30-
Banana run 3
31-
</button>
32-
</Link>
33-
<Link href="/games?g=cfp">
34-
<button className="rounded-2xl bg-primary w-50 h-50">
35-
Click For Points (web edition)
36-
</button>
37-
</Link>
38-
<Link href="/games?g=clicks_and_points">
39-
<button className="rounded-2xl bg-primary w-50 h-50">
40-
Clicks & Points (VERY VERY EARLY DEVELOPEMENT)
41-
</button>
42-
</Link>
43-
<Link href="/games?g=plat">
44-
<button className="rounded-2xl bg-primary w-50 h-50">
45-
Unnamed platformer game
46-
</button>
47-
</Link>
48-
</div>
22+
<nav className=" grid grid-cols-3 gap-10">
23+
<GamesButton to="br2" name="Banana Run 2"></GamesButton>
24+
<GamesButton to="br3" name="Banana Run 3"></GamesButton>
25+
<GamesButton
26+
to="cfp"
27+
name="Click For Points (web edition)"
28+
></GamesButton>
29+
<GamesButton
30+
to="clicks_and_points"
31+
name="Clicks & Points (VERY VERY EARLY DEVELOPEMENT)"
32+
></GamesButton>
33+
<GamesButton to="plat" name="Unnamed platformer game"></GamesButton>
34+
</nav>
4935
</div>
5036
);
5137
}

‎src/app/page.tsx‎

Lines changed: 26 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -66,8 +66,6 @@ const dialogueArray: Array<string> = [
6666

6767
export default function Home() {
6868
function removeMyGithubYeaaaaaaa() {
69-
if (!githubButtonRef.current) return;
70-
7169
if (removedGithub) {
7270
if (dialogueArray.indexOf(currentDialogue) == dialogueArray.length - 1) {
7371
open("https://store.steampowered.com/app/2159370/Click_For_Points/");
@@ -80,11 +78,10 @@ export default function Home() {
8078
return;
8179
}
8280

83-
setIsRemovingGithub(true);
81+
setRemovedGithub(true);
8482
}
8583

8684
const githubButtonRef = useRef<HTMLButtonElement>(null);
87-
const [isRemovingGithub, setIsRemovingGithub] = useState<boolean>(false);
8885
const [removedGithub, setRemovedGithub] = useState<boolean>(false);
8986

9087
const [currentSplash, setCurrentSplash] = useState<string>("‎ "); // Invisible character because idk man i hate next.js
@@ -111,17 +108,31 @@ export default function Home() {
111108
</h2>
112109
<br />
113110
<div className="flex items-center gap-5 w-[50vw]">
114-
<button
115-
onAnimationEnd={() => {
116-
setRemovedGithub(true);
117-
setCurrentDialogue(dialogueArray[1]); // Call this here just for next dialogue
118-
}}
119-
className={`rounded-full bg-primary w-dvw p-2 ${isRemovingGithub && "slump-animation"}`}
120-
ref={githubButtonRef}
121-
onClick={() => open("https://github.com/Precontation")}
122-
>
123-
View my GitHub
124-
</button>
111+
{removedGithub ? (
112+
<button
113+
onAnimationEnd={() => {
114+
setRemovedGithub(true);
115+
setCurrentDialogue(dialogueArray[1]); // Call this here just for next dialogue
116+
}}
117+
className="rounded-full bg-primary w-dvw p-2 slump-animation"
118+
tabIndex={-1}
119+
>
120+
View my GitHub
121+
</button>
122+
) : (
123+
<button
124+
onAnimationEnd={() => {
125+
setRemovedGithub(true);
126+
setCurrentDialogue(dialogueArray[1]); // Call this here just for next dialogue
127+
}}
128+
className="rounded-full bg-primary w-dvw p-2"
129+
ref={githubButtonRef}
130+
onClick={() => open("https://github.com/Precontation")}
131+
>
132+
View my GitHub
133+
</button>
134+
)}
135+
125136
<button
126137
className="rounded-full bg-primary w-dvw p-2"
127138
onClick={removeMyGithubYeaaaaaaa}

‎src/components/GamesButton.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
"use client";
2+
3+
import Link from "next/link";
4+
5+
export default function GamesButton({
6+
to,
7+
name,
8+
}: {
9+
to: string;
10+
name: string;
11+
}) {
12+
return (
13+
<Link draggable={false} tabIndex={-1} href={`/games?g=${to}`}>
14+
<button className="rounded-2xl bg-primary w-50 h-50">{name}</button>
15+
</Link>
16+
);
17+
}

‎src/components/SwitcherLink.tsx‎

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -12,15 +12,18 @@ export default function SwitcherLink({
1212
}) {
1313
const [isMouseOver, setIsMouseOver] = useState<boolean>(false);
1414
return (
15-
<nav
15+
<div
1616
className="self-center flex flex-col"
1717
onMouseEnter={() => setIsMouseOver(true)}
1818
onMouseLeave={() => setIsMouseOver(false)}
19+
tabIndex={-1}
1920
>
2021
<Link href={`/${to}`} className="font-semifancy">
2122
{name}
2223
</Link>
23-
{isMouseOver && <span className="bg-secondary min-w-1 min-h-0.5"></span>}
24-
</nav>
24+
{isMouseOver && (
25+
<span className="bg-secondary min-w-1 min-h-0.5" tabIndex={-1}></span>
26+
)}
27+
</div>
2528
);
2629
}

0 commit comments

Comments
 (0)