Skip to content

Commit b54a600

Browse files
genericnessgenericness
committed
shortcuts
1 parent df47338 commit b54a600

File tree

5 files changed

+414
-15
lines changed

5 files changed

+414
-15
lines changed

‎src/components/Header.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -26,10 +26,10 @@ const path = Astro.url.pathname;
2626
<button id="prl" class="font-medium h-10 w-10 rounded-lg hover:bg-(--accent) inline-flex items-center justify-center transition-colors cursor-pointer">
2727
<Icon name="lucide:rotate-cw" class="h-6 w-6" />
2828
</button>
29-
{/** <button id="psc" class="font-medium h-10 w-10 rounded-lg hover:bg-(--accent) inline-flex items-center justify-center transition-colors cursor-pointer">
29+
<button id="psc" class="font-medium h-10 w-10 rounded-lg hover:bg-(--accent) inline-flex items-center justify-center transition-colors cursor-pointer" aria-label="Save shortcut" aria-pressed="false">
3030
<Icon name="material-symbols:star-outline-rounded" class="h-8 w-8" id="noShortcut" />
3131
<Icon name="material-symbols:star-rounded" class="h-8 w-8 hidden" id="shortcut" />
32-
</button> */}
32+
</button>
3333
</div>
3434
</div>
3535
</div>

‎src/components/ui/Card.astro‎

Lines changed: 13 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -10,25 +10,29 @@ interface Props {
1010
imageSrc: string;
1111
text: string;
1212
id: string;
13+
size?: "sm" | "lg";
1314
}
1415
15-
const { imageSrc, text, id, link } = Astro.props;
16+
const { imageSrc, text, id, link, size = "lg" } = Astro.props;
17+
const sizeClass = size === "sm" ? "h-20 w-20" : "h-36 w-36";
18+
const overlayPaddingClass = size === "sm" ? "p-2" : "p-2 px-4";
19+
const textClass = size === "sm" ? "text-xs" : "";
1620
---
1721
{link ?
1822
<a class="p-2" href={link}>
19-
<div id={id} class="rounded-md relative group cursor-pointer h-36 hover:scale-105 duration-100 transition-all">
20-
<Image loading="lazy" src={images[imageSrc]()} class="h-36 w-36 aspect-square object-cover rounded-md" alt={text} />
21-
<div class="absolute inset-0 h-full w-full opacity-0 group-hover:opacity-100 bg-gradient-to-t from-(--accent) to-transparent rounded-b-md duration-100 flex items-end p-2 px-4 font-semibold">
22-
<p> { text } </p>
23+
<div id={id} class={`rounded-md relative group cursor-pointer ${sizeClass} hover:scale-105 duration-100 transition-all`}>
24+
<Image loading="lazy" src={images[imageSrc]()} class={`aspect-square object-cover rounded-md ${sizeClass}`} alt={text} />
25+
<div class={`absolute inset-0 h-full w-full opacity-0 group-hover:opacity-100 bg-gradient-to-t from-(--accent) to-transparent rounded-b-md duration-100 flex items-end ${overlayPaddingClass} font-semibold`}>
26+
<p class={textClass}> { text } </p>
2327
</div>
2428
</div>
2529
</a>
2630
:
2731
<div class="p-2">
28-
<div id={id} class="rounded-md relative group cursor-pointer h-36 hover:scale-105 duration-100 transition-all">
29-
<Image loading="lazy" src={images[imageSrc]()} class="h-36 w-36 aspect-square object-cover rounded-md" alt={text} />
30-
<div class="absolute inset-0 h-full w-full opacity-0 group-hover:opacity-100 bg-gradient-to-t from-(--accent) to-transparent rounded-b-md duration-100 flex items-end p-2 px-4 font-semibold">
31-
<p> { text } </p>
32+
<div id={id} class={`rounded-md relative group cursor-pointer ${sizeClass} hover:scale-105 duration-100 transition-all`}>
33+
<Image loading="lazy" src={images[imageSrc]()} class={`aspect-square object-cover rounded-md ${sizeClass}`} alt={text} />
34+
<div class={`absolute inset-0 h-full w-full opacity-0 group-hover:opacity-100 bg-gradient-to-t from-(--accent) to-transparent rounded-b-md duration-100 flex items-end ${overlayPaddingClass} font-semibold`}>
35+
<p class={textClass}> { text } </p>
3236
</div>
3337
</div>
3438
</div>

‎src/pages/games.astro‎

Lines changed: 33 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,22 @@ const gamesUrl = "https://fern.best/x7k9m2p.html";
1616
import { SW } from "@utils/proxy.ts";
1717
import { Settings } from "@utils/settings.ts";
1818
import { BareClient } from "@mercuryworkshop/bare-mux";
19+
import { isSavedShortcut, toggleSavedShortcut } from "@utils/shortcuts";
20+
21+
let currentProxyUrl = "";
22+
let currentProxyTitle = "";
23+
24+
const updateShortcutButton = (
25+
proxyShortcut: { button: HTMLButtonElement | null; noShortcut: HTMLElement | null; shortcut: HTMLElement | null },
26+
url: string
27+
) => {
28+
if (!proxyShortcut.button || !proxyShortcut.noShortcut || !proxyShortcut.shortcut) return;
29+
const saved = url ? isSavedShortcut(url) : false;
30+
proxyShortcut.noShortcut.classList.toggle("hidden", saved);
31+
proxyShortcut.shortcut.classList.toggle("hidden", !saved);
32+
proxyShortcut.button.setAttribute("aria-pressed", saved ? "true" : "false");
33+
proxyShortcut.button.title = saved ? "Remove shortcut" : "Save shortcut";
34+
};
1935

2036
const init = async () => {
2137
const iframe = document.getElementById("iframe") as HTMLIFrameElement;
@@ -27,6 +43,11 @@ const gamesUrl = "https://fern.best/x7k9m2p.html";
2743
const proxyLeft = document.getElementById("pal") as HTMLButtonElement;
2844
const proxyRight = document.getElementById("par") as HTMLButtonElement;
2945
const proxyReload = document.getElementById("prl") as HTMLButtonElement;
46+
const proxyShortcut = {
47+
button: document.getElementById("psc") as HTMLButtonElement,
48+
noShortcut: document.getElementById("noShortcut") as HTMLElement,
49+
shortcut: document.getElementById("shortcut") as HTMLElement
50+
}
3051
const client = new BareClient();
3152

3253
const getURL = async (): Promise<string> => {
@@ -50,6 +71,14 @@ const gamesUrl = "https://fern.best/x7k9m2p.html";
5071
proxyReload.addEventListener("click", () => {
5172
iframeWin!.location.reload();
5273
});
74+
if (proxyShortcut.button && !proxyShortcut.button.dataset.bound) {
75+
proxyShortcut.button.dataset.bound = "true";
76+
proxyShortcut.button.addEventListener("click", () => {
77+
if (!currentProxyUrl) return;
78+
toggleSavedShortcut(currentProxyUrl, currentProxyTitle);
79+
updateShortcutButton(proxyShortcut, currentProxyUrl);
80+
});
81+
}
5382
}
5483

5584
iframe.addEventListener("load", async () => {
@@ -61,6 +90,9 @@ const gamesUrl = "https://fern.best/x7k9m2p.html";
6190
phlImage.src = object;
6291
bhl.classList.add("hidden");
6392
phl.classList.remove("hidden");
93+
currentProxyUrl = pageURL;
94+
currentProxyTitle = iframeWin!.document.title || pageURL;
95+
updateShortcutButton(proxyShortcut, currentProxyUrl);
6496
});
6597

6698
buttons();
@@ -94,4 +126,4 @@ const gamesUrl = "https://fern.best/x7k9m2p.html";
94126
}
95127
catch (_) {}
96128
});
97-
</script>
129+
</script>

0 commit comments

Comments
 (0)