100 lines
2.8 KiB
TypeScript
100 lines
2.8 KiB
TypeScript
import { useEffect, useState } from "preact/hooks";
|
|
import { useNavigate } from "react-router-dom";
|
|
|
|
export function Home() {
|
|
const [loading, setLoading] = useState(true);
|
|
const [mcPath, setMcPath] = useState("");
|
|
const [worlds, setWorlds] = useState<{
|
|
world: string;
|
|
icon: string;
|
|
path: string;
|
|
}[]>([]);
|
|
|
|
const fetchWorlds = async () => {
|
|
const res = await fetch("/api/dir");
|
|
const json = await res.json();
|
|
setMcPath(json.mcPath);
|
|
setWorlds(json.worlds);
|
|
setLoading(false);
|
|
};
|
|
|
|
useEffect(() => {
|
|
document.title = "BearMetal Packer";
|
|
fetchWorlds();
|
|
}, []);
|
|
|
|
const submitMcPath = async (event: SubmitEvent) => {
|
|
setLoading(true);
|
|
event.preventDefault();
|
|
const form = new FormData(event.target as HTMLFormElement);
|
|
const res = await fetch("/api/dir", {
|
|
method: "POST",
|
|
body: form,
|
|
});
|
|
if (res.status === 200) {
|
|
fetchWorlds();
|
|
} else setLoading(false);
|
|
};
|
|
|
|
const nav = useNavigate();
|
|
|
|
const setWorld = async (worldPath: string) => {
|
|
setLoading(true);
|
|
const res = await fetch("/api/world", {
|
|
method: "POST",
|
|
body: worldPath,
|
|
});
|
|
|
|
if (res.status === 200) {
|
|
nav("/editor");
|
|
} else setLoading(false);
|
|
};
|
|
|
|
return (
|
|
<div class="grid h-full">
|
|
<div class="place-self-center text-center max-h-96 bg-primary-400 rounded-lg p-4 overflow-scroll">
|
|
<h1 class="text-3xl">Welcome BearMetal Packer</h1>
|
|
<p>An all in one toolkit to build datapacks for Minecraft.</p>
|
|
{loading ? <p>Hold tight, we're doing some heavy lifting.</p> : (
|
|
<>
|
|
{mcPath
|
|
? (
|
|
<>
|
|
<p>Minecraft directory set to {mcPath}</p>
|
|
<p>Worlds:</p>
|
|
<ul class="w-full even:bg-black/5">
|
|
{worlds.map((world) => (
|
|
<li
|
|
class="flex gap-4 items-center cursor-pointer"
|
|
onClick={() => setWorld(world.path)}
|
|
>
|
|
<img
|
|
src={"/images?location=" + world.icon}
|
|
class="w-16 h-16"
|
|
/>
|
|
{world.world}
|
|
</li>
|
|
))}
|
|
</ul>
|
|
</>
|
|
)
|
|
: (
|
|
<>
|
|
<p>No Minecraft directory set, please set now:</p>
|
|
<form method="POST" onSubmit={submitMcPath}>
|
|
<input
|
|
type="text"
|
|
name="mcPath"
|
|
placeholder="Minecraft directory"
|
|
/>
|
|
<button type="submit">Set</button>
|
|
</form>
|
|
</>
|
|
)}
|
|
</>
|
|
)}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|