Skip to content

Commit c9dbe3b

Browse files
CakeLancelotCakeLancelot
committed
Move components to their own folder and add reference path to tsconfig
1 parent 4032fdb commit c9dbe3b

19 files changed

+1496
-1495
lines changed

‎app/AboutModal.tsx ‎app/components/AboutModal.tsx

+38-38
Original file line numberDiff line numberDiff line change
@@ -1,38 +1,38 @@
1-
import Modal from "react-bootstrap/Modal";
2-
3-
import Button from "./Button";
4-
5-
export default function AboutModal({
6-
show,
7-
setShow,
8-
version,
9-
}: {
10-
show: boolean;
11-
setShow: (newShow: boolean) => void;
12-
version: string;
13-
}) {
14-
return (
15-
<Modal show={show} onHide={() => setShow(false)} centered={true}>
16-
<Modal.Header>
17-
<Modal.Title>About OpenFusion Launcher</Modal.Title>
18-
</Modal.Header>
19-
<Modal.Body>
20-
<p className="font-monospace">Version {version}</p>
21-
<p>
22-
©2020-2024 OpenFusion Contributors
23-
<br />
24-
OpenFusion is licensed under MIT.
25-
<br />
26-
</p>
27-
</Modal.Body>
28-
<Modal.Footer>
29-
<Button
30-
onClick={() => setShow(false)}
31-
variant="primary"
32-
text="Close"
33-
enabled={true}
34-
/>
35-
</Modal.Footer>
36-
</Modal>
37-
);
38-
}
1+
import Modal from "react-bootstrap/Modal";
2+
3+
import Button from "./Button";
4+
5+
export default function AboutModal({
6+
show,
7+
setShow,
8+
version,
9+
}: {
10+
show: boolean;
11+
setShow: (newShow: boolean) => void;
12+
version: string;
13+
}) {
14+
return (
15+
<Modal show={show} onHide={() => setShow(false)} centered={true}>
16+
<Modal.Header>
17+
<Modal.Title>About OpenFusion Launcher</Modal.Title>
18+
</Modal.Header>
19+
<Modal.Body>
20+
<p className="font-monospace">Version {version}</p>
21+
<p>
22+
©2020-2024 OpenFusion Contributors
23+
<br />
24+
OpenFusion is licensed under MIT.
25+
<br />
26+
</p>
27+
</Modal.Body>
28+
<Modal.Footer>
29+
<Button
30+
onClick={() => setShow(false)}
31+
variant="primary"
32+
text="Close"
33+
enabled={true}
34+
/>
35+
</Modal.Footer>
36+
</Modal>
37+
);
38+
}

‎app/AlertBox.tsx ‎app/components/AlertBox.tsx

+55-55
Original file line numberDiff line numberDiff line change
@@ -1,55 +1,55 @@
1-
import { useState, useEffect } from "react";
2-
import Alert from "react-bootstrap/Alert";
3-
4-
function variantToLabel(variant: string) {
5-
switch (variant) {
6-
case "success":
7-
return "Success";
8-
case "danger":
9-
return "Error";
10-
case "warning":
11-
return "Warning";
12-
case "primary":
13-
return "Info";
14-
default:
15-
return "";
16-
}
17-
}
18-
19-
export default function AlertBox({
20-
variant,
21-
text,
22-
timeout,
23-
}: {
24-
variant: string;
25-
text: string;
26-
timeout?: number;
27-
}) {
28-
const [show, setShow] = useState(true);
29-
30-
useEffect(() => {
31-
if (timeout) {
32-
const timer = setTimeout(() => {
33-
setShow(false);
34-
}, timeout);
35-
return () => clearTimeout(timer);
36-
}
37-
}, []);
38-
39-
return (
40-
<Alert
41-
variant={variant}
42-
className={"mb-2 pr-0 border border-" + variant + " btn-" + variant}
43-
show={show}
44-
>
45-
<span className="align-middle">
46-
<strong>{variantToLabel(variant)}:</strong> {text}
47-
</span>
48-
<button
49-
type="button"
50-
className="btn shadow-none float-end fas fa-times"
51-
onClick={() => setShow(false)}
52-
></button>
53-
</Alert>
54-
);
55-
}
1+
import { useState, useEffect } from "react";
2+
import Alert from "react-bootstrap/Alert";
3+
4+
function variantToLabel(variant: string) {
5+
switch (variant) {
6+
case "success":
7+
return "Success";
8+
case "danger":
9+
return "Error";
10+
case "warning":
11+
return "Warning";
12+
case "primary":
13+
return "Info";
14+
default:
15+
return "";
16+
}
17+
}
18+
19+
export default function AlertBox({
20+
variant,
21+
text,
22+
timeout,
23+
}: {
24+
variant: string;
25+
text: string;
26+
timeout?: number;
27+
}) {
28+
const [show, setShow] = useState(true);
29+
30+
useEffect(() => {
31+
if (timeout) {
32+
const timer = setTimeout(() => {
33+
setShow(false);
34+
}, timeout);
35+
return () => clearTimeout(timer);
36+
}
37+
}, []);
38+
39+
return (
40+
<Alert
41+
variant={variant}
42+
className={"mb-2 pr-0 border border-" + variant + " btn-" + variant}
43+
show={show}
44+
>
45+
<span className="align-middle">
46+
<strong>{variantToLabel(variant)}:</strong> {text}
47+
</span>
48+
<button
49+
type="button"
50+
className="btn shadow-none float-end fas fa-times"
51+
onClick={() => setShow(false)}
52+
></button>
53+
</Alert>
54+
);
55+
}

‎app/AlertList.tsx ‎app/components/AlertList.tsx

+18-18
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,18 @@
1-
import Stack from "react-bootstrap/Stack";
2-
import AlertBox from "./AlertBox";
3-
import { Alert } from "./types";
4-
5-
export default function AlertList({ alerts }: { alerts: Alert[] }) {
6-
return (
7-
<Stack id="alerts">
8-
{alerts.map((alert) => (
9-
<AlertBox
10-
key={alert.id}
11-
variant={alert.variant}
12-
text={alert.text}
13-
timeout={(alert.variant == "success") ? 5000 : undefined}
14-
/>
15-
))}
16-
</Stack>
17-
);
18-
}
1+
import Stack from "react-bootstrap/Stack";
2+
import AlertBox from "./AlertBox";
3+
import { Alert } from "@/app/types";
4+
5+
export default function AlertList({ alerts }: { alerts: Alert[] }) {
6+
return (
7+
<Stack id="alerts">
8+
{alerts.map((alert) => (
9+
<AlertBox
10+
key={alert.id}
11+
variant={alert.variant}
12+
text={alert.text}
13+
timeout={(alert.variant == "success") ? 5000 : undefined}
14+
/>
15+
))}
16+
</Stack>
17+
);
18+
}

‎app/BackgroundImages.tsx ‎app/components/BackgroundImages.tsx

+53-53
Original file line numberDiff line numberDiff line change
@@ -1,53 +1,53 @@
1-
import { useEffect } from "react";
2-
import { ServerEntry } from "./types";
3-
import get_seed from "./seed";
4-
5-
const getBackgroundImageUrlForServer = (server?: ServerEntry) => {
6-
if (server?.endpoint) {
7-
// HACK: add the counter to the url as a parameter to prevent caching across launches
8-
return "http://" + server.endpoint + "/launcher/background.png?seed=" + get_seed();
9-
}
10-
return undefined;
11-
};
12-
13-
const OPACITY = 0.25;
14-
15-
const getStyleForServer = (imageUrl: string | undefined, selected: boolean) => {
16-
return {
17-
backgroundImage: imageUrl ? `url(${imageUrl})` : "none",
18-
opacity: selected ? OPACITY : 0,
19-
};
20-
};
21-
22-
export default function BackgroundImages({
23-
servers,
24-
selectedServer,
25-
}: {
26-
servers: ServerEntry[];
27-
selectedServer?: ServerEntry;
28-
}) {
29-
30-
// Preload images
31-
useEffect(() => {
32-
servers.forEach((server) => {
33-
const imageUrl = getBackgroundImageUrlForServer(server);
34-
if (imageUrl) {
35-
const img = new Image();
36-
img.src = imageUrl;
37-
}
38-
});
39-
}, [servers]);
40-
41-
return (
42-
<>
43-
{servers.map((server) => {
44-
const imageUrl = getBackgroundImageUrlForServer(server);
45-
const selected = server.uuid === selectedServer?.uuid;
46-
const style = getStyleForServer(imageUrl, selected);
47-
return (
48-
<div key={server.uuid} className="background-image" style={style} />
49-
);
50-
})}
51-
</>
52-
);
53-
}
1+
import { useEffect } from "react";
2+
import { ServerEntry } from "@/app/types";
3+
import get_seed from "@/app/seed";
4+
5+
const getBackgroundImageUrlForServer = (server?: ServerEntry) => {
6+
if (server?.endpoint) {
7+
// HACK: add the counter to the url as a parameter to prevent caching across launches
8+
return "http://" + server.endpoint + "/launcher/background.png?seed=" + get_seed();
9+
}
10+
return undefined;
11+
};
12+
13+
const OPACITY = 0.25;
14+
15+
const getStyleForServer = (imageUrl: string | undefined, selected: boolean) => {
16+
return {
17+
backgroundImage: imageUrl ? `url(${imageUrl})` : "none",
18+
opacity: selected ? OPACITY : 0,
19+
};
20+
};
21+
22+
export default function BackgroundImages({
23+
servers,
24+
selectedServer,
25+
}: {
26+
servers: ServerEntry[];
27+
selectedServer?: ServerEntry;
28+
}) {
29+
30+
// Preload images
31+
useEffect(() => {
32+
servers.forEach((server) => {
33+
const imageUrl = getBackgroundImageUrlForServer(server);
34+
if (imageUrl) {
35+
const img = new Image();
36+
img.src = imageUrl;
37+
}
38+
});
39+
}, [servers]);
40+
41+
return (
42+
<>
43+
{servers.map((server) => {
44+
const imageUrl = getBackgroundImageUrlForServer(server);
45+
const selected = server.uuid === selectedServer?.uuid;
46+
const style = getStyleForServer(imageUrl, selected);
47+
return (
48+
<div key={server.uuid} className="background-image" style={style} />
49+
);
50+
})}
51+
</>
52+
);
53+
}

‎app/Button.tsx ‎app/components/Button.tsx

File renamed without changes.

0 commit comments

Comments
 (0)