modmapper-web/pages/index.tsx

122 lines
3.8 KiB
TypeScript
Raw Normal View History

2022-03-03 04:53:20 +00:00
import { createContext, useEffect, useRef, useState } from "react";
import type { NextPage } from "next";
import Head from "next/head";
import "mapbox-gl/dist/mapbox-gl.css";
import Map from "../components/Map";
2022-02-27 06:17:52 +00:00
import { useAppDispatch } from "../lib/hooks";
2022-03-03 04:53:20 +00:00
import {
addPluginInOrder,
decrementPending,
PluginFile,
} from "../slices/plugins";
import { setPluginsTxtAndApplyLoadOrder } from "../slices/pluginsTxt";
2022-01-14 04:24:18 +00:00
2022-03-03 04:53:20 +00:00
export const WorkerContext = createContext<Worker | null>(null);
2022-01-14 04:24:18 +00:00
const Home: NextPage = () => {
2022-03-03 04:53:20 +00:00
const [worker, setWorker] = useState<Worker | null>(null);
2022-02-27 06:17:52 +00:00
const dispatch = useAppDispatch();
2022-03-03 04:53:20 +00:00
useEffect(() => {
async function loadWorker() {
const { default: Worker } = await import(
"worker-loader?filename=static/[fullhash].worker.js!../workers/PluginsLoader.worker"
);
const newWorker = new Worker();
newWorker.onmessage = (evt: { data: PluginFile }) => {
const { data } = evt;
dispatch(decrementPending(1));
console.log(data.parsed);
dispatch(addPluginInOrder(data));
};
setWorker(newWorker);
}
loadWorker();
return () => {
if (worker) {
worker.terminate();
}
};
// eslint-disable-next-line react-hooks/exhaustive-deps
}, [dispatch]);
2022-01-14 04:24:18 +00:00
return (
<>
2022-01-14 04:24:18 +00:00
<Head>
2022-01-15 04:27:29 +00:00
<meta charSet="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title key="title">Modmapper</title>
2022-01-14 04:24:18 +00:00
<link rel="icon" href="/favicon.ico" />
2022-02-13 01:40:55 +00:00
<meta
key="description"
name="description"
content="Map of Skyrim mods"
/>
<meta key="og:title" property="og:title" content="Modmapper" />
2022-02-13 01:40:55 +00:00
<meta property="og:site_name" content="Modmapper"></meta>
<meta
key="og:description"
property="og:description"
content="Map of Skyrim mods"
/>
2022-02-13 01:40:55 +00:00
<meta property="og:type" content="website" />
<meta key="og:url" property="og:url" content="https://modmapper.com" />
2022-02-13 01:48:22 +00:00
<meta
property="og:image"
content="https://modmapper.com/img/screenshot.jpg"
/>
2022-02-13 01:40:55 +00:00
<meta
property="og:image:alt"
content="A screenshot of Modmapper displaying a map of Skyrim with a grid of cells overlayed colored green to red indicating how many mods edited each cell"
/>
<meta key="twitter:title" name="twitter:title" content="Modmapper" />
<meta
key="twitter:description"
name="twitter:description"
content="Map of Skyrim mods"
/>
2022-02-13 01:48:22 +00:00
<meta
name="twitter:image"
content="https://modmapper.com/img/screenshot.jpg"
/>
2022-02-13 01:40:55 +00:00
<meta
name="twitter:image:alt"
content="A screenshot of Modmapper displaying a map of Skyrim with a grid of cells overlayed colored green to red indicating how many mods edited each cell"
/>
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@tyhallada" />
<meta name="twitter:creator" content="@tyhallada" />
2022-01-14 04:24:18 +00:00
</Head>
2022-03-03 04:53:20 +00:00
<WorkerContext.Provider value={worker}>
<div
style={{
margin: 0,
padding: 0,
width: "100%",
height: "100%",
}}
onDragOver={(evt) => {
evt.preventDefault();
}}
onDrop={async (evt) => {
evt.preventDefault();
2022-02-27 06:17:52 +00:00
2022-03-03 04:53:20 +00:00
if (evt.dataTransfer.items && evt.dataTransfer.items.length > 0) {
const file = evt.dataTransfer.items[0].getAsFile();
if (file) {
dispatch(setPluginsTxtAndApplyLoadOrder(await file.text()));
}
2022-02-27 06:17:52 +00:00
}
2022-03-03 04:53:20 +00:00
}}
>
<Map />
</div>
</WorkerContext.Provider>
</>
);
};
2022-01-14 04:24:18 +00:00
export default Home;