modmapper-web/pages/index.tsx

import { useEffect, useCallback, 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";
import { useAppDispatch } from "../lib/hooks";
import { setPluginsTxtAndApplyLoadOrder } from "../slices/pluginsTxt";
import { WorkerPool, WorkerPoolContext } from "../lib/WorkerPool";

const Home: NextPage = () => {
  const [workerPool, setWorkerPool] = useState<WorkerPool | null>(null);
  const dispatch = useAppDispatch();

  const createWorkerPool = useCallback(async () => {
    setWorkerPool(
      await new WorkerPool().init(window.navigator.hardwareConcurrency)
    );
  }, []);

  useEffect(() => {
    return () => {
      if (workerPool) {
        workerPool.terminateAll();
      }
    };
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [dispatch]);

  useEffect(() => {
    createWorkerPool();
  }, [createWorkerPool]);

  return (
    <>
      <Head>
        <meta charSet="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <title key="title">Modmapper</title>
        <link rel="icon" href="/favicon.ico" />

        <meta
          key="description"
          name="description"
          content="Map of Skyrim mods"
        />
        <meta key="og:title" property="og:title" content="Modmapper" />
        <meta property="og:site_name" content="Modmapper"></meta>
        <meta
          key="og:description"
          property="og:description"
          content="Map of Skyrim mods"
        />
        <meta property="og:type" content="website" />
        <meta key="og:url" property="og:url" content="https://modmapper.com" />
        <meta
          property="og:image"
          content="https://modmapper.com/img/screenshot.jpg"
        />
        <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"
        />
        <meta
          name="twitter:image"
          content="https://modmapper.com/img/screenshot.jpg"
        />
        <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" />
      </Head>
      <WorkerPoolContext.Provider value={workerPool}>
        <div
          style={{
            margin: 0,
            padding: 0,
            width: "100%",
            height: "100%",
          }}
          onDragOver={(evt) => {
            evt.preventDefault();
          }}
          onDrop={async (evt) => {
            evt.preventDefault();

            if (evt.dataTransfer.items && evt.dataTransfer.items.length > 0) {
              const file = evt.dataTransfer.items[0].getAsFile();
              if (file) {
                dispatch(setPluginsTxtAndApplyLoadOrder(await file.text()));
              }
            }
          }}
        >
          <Map />
        </div>
      </WorkerPoolContext.Provider>
    </>
  );
};

export default Home;
Move WorkerPoolContext into WorkerPool.ts 2022-03-05 04:53:36 +00:00			`import { useEffect, useCallback, useState } from "react";`
Map with heaptmap overlay and layer toggles 2022-01-15 03:46:39 +00:00			`import type { NextPage } from "next";`
			`import Head from "next/head";`
			`import "mapbox-gl/dist/mapbox-gl.css";`

			`import Map from "../components/Map";`
Implement WorkerPool, use webkitdirectory input WorkerPool speeds up processing of plugins by using more cores on separate threads. It terminates and recreates a worker after it finishes a task since web assembly seems to slow down a ton when a worker is reused (maybe memory becomes to large / unfragmented, idk). I switched to the deprecated input tag with webkitdirectory since it is the only way to load a folder under the program files folder. Drag and drop might be another alternative, but I'd rather have a picker. 2022-03-05 04:49:14 +00:00			`import { useAppDispatch } from "../lib/hooks";`
Fix load order re-applying and transition between sidebar pages 2022-03-03 04:23:06 +00:00			`import { setPluginsTxtAndApplyLoadOrder } from "../slices/pluginsTxt";`
Move WorkerPoolContext into WorkerPool.ts 2022-03-05 04:53:36 +00:00			`import { WorkerPool, WorkerPoolContext } from "../lib/WorkerPool";`
Move worker init to index page 2022-03-03 04:53:20 +00:00
Initial commit from Create Next App 2022-01-14 04:24:18 +00:00			`const Home: NextPage = () => {`
Implement WorkerPool, use webkitdirectory input WorkerPool speeds up processing of plugins by using more cores on separate threads. It terminates and recreates a worker after it finishes a task since web assembly seems to slow down a ton when a worker is reused (maybe memory becomes to large / unfragmented, idk). I switched to the deprecated input tag with webkitdirectory since it is the only way to load a folder under the program files folder. Drag and drop might be another alternative, but I'd rather have a picker. 2022-03-05 04:49:14 +00:00			`const [workerPool, setWorkerPool] = useState<WorkerPool \| null>(null);`
Default sidebar and WIP PluginLoader 2022-02-27 06:17:52 +00:00			`const dispatch = useAppDispatch();`
Move worker init to index page 2022-03-03 04:53:20 +00:00
Implement WorkerPool, use webkitdirectory input WorkerPool speeds up processing of plugins by using more cores on separate threads. It terminates and recreates a worker after it finishes a task since web assembly seems to slow down a ton when a worker is reused (maybe memory becomes to large / unfragmented, idk). I switched to the deprecated input tag with webkitdirectory since it is the only way to load a folder under the program files folder. Drag and drop might be another alternative, but I'd rather have a picker. 2022-03-05 04:49:14 +00:00			`const createWorkerPool = useCallback(async () => {`
			`setWorkerPool(`
			`await new WorkerPool().init(window.navigator.hardwareConcurrency)`
			`);`
			`}, []);`

Move worker init to index page 2022-03-03 04:53:20 +00:00			`useEffect(() => {`
			`return () => {`
Implement WorkerPool, use webkitdirectory input WorkerPool speeds up processing of plugins by using more cores on separate threads. It terminates and recreates a worker after it finishes a task since web assembly seems to slow down a ton when a worker is reused (maybe memory becomes to large / unfragmented, idk). I switched to the deprecated input tag with webkitdirectory since it is the only way to load a folder under the program files folder. Drag and drop might be another alternative, but I'd rather have a picker. 2022-03-05 04:49:14 +00:00			`if (workerPool) {`
			`workerPool.terminateAll();`
Move worker init to index page 2022-03-03 04:53:20 +00:00			`}`
			`};`
			`// eslint-disable-next-line react-hooks/exhaustive-deps`
			`}, [dispatch]);`

Implement WorkerPool, use webkitdirectory input WorkerPool speeds up processing of plugins by using more cores on separate threads. It terminates and recreates a worker after it finishes a task since web assembly seems to slow down a ton when a worker is reused (maybe memory becomes to large / unfragmented, idk). I switched to the deprecated input tag with webkitdirectory since it is the only way to load a folder under the program files folder. Drag and drop might be another alternative, but I'd rather have a picker. 2022-03-05 04:49:14 +00:00			`useEffect(() => {`
			`createWorkerPool();`
			`}, [createWorkerPool]);`

Initial commit from Create Next App 2022-01-14 04:24:18 +00:00			`return (`
Map with heaptmap overlay and layer toggles 2022-01-15 03:46:39 +00:00			`<>`
Initial commit from Create Next App 2022-01-14 04:24:18 +00:00			`<Head>`
Fix types and lints 2022-01-15 04:27:29 +00:00			`<meta charSet="utf-8" />`
Map with heaptmap overlay and layer toggles 2022-01-15 03:46:39 +00:00			`<meta name="viewport" content="width=device-width, initial-scale=1" />`
Change title & meta tags on cell/mod selection 2022-02-14 05:38:21 +00:00			`<title key="title">Modmapper</title>`
Initial commit from Create Next App 2022-01-14 04:24:18 +00:00			`<link rel="icon" href="/favicon.ico" />`
Add meta tags to header 2022-02-13 01:40:55 +00:00
Change title & meta tags on cell/mod selection 2022-02-14 05:38:21 +00:00			`<meta`
			`key="description"`
			`name="description"`
			`content="Map of Skyrim mods"`
			`/>`
			`<meta key="og:title" property="og:title" content="Modmapper" />`
Add meta tags to header 2022-02-13 01:40:55 +00:00			`<meta property="og:site_name" content="Modmapper"></meta>`
Change title & meta tags on cell/mod selection 2022-02-14 05:38:21 +00:00			`<meta`
			`key="og:description"`
			`property="og:description"`
			`content="Map of Skyrim mods"`
			`/>`
Add meta tags to header 2022-02-13 01:40:55 +00:00			`<meta property="og:type" content="website" />`
Change title & meta tags on cell/mod selection 2022-02-14 05:38:21 +00:00			`<meta key="og:url" property="og:url" content="https://modmapper.com" />`
Use absolute urls for meta tag images 2022-02-13 01:48:22 +00:00			`<meta`
			`property="og:image"`
			`content="https://modmapper.com/img/screenshot.jpg"`
			`/>`
Add meta tags to header 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"`
			`/>`
Change title & meta tags on cell/mod selection 2022-02-14 05:38:21 +00:00			`<meta key="twitter:title" name="twitter:title" content="Modmapper" />`
			`<meta`
			`key="twitter:description"`
			`name="twitter:description"`
			`content="Map of Skyrim mods"`
			`/>`
Use absolute urls for meta tag images 2022-02-13 01:48:22 +00:00			`<meta`
			`name="twitter:image"`
			`content="https://modmapper.com/img/screenshot.jpg"`
			`/>`
Add meta tags to header 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" />`
Initial commit from Create Next App 2022-01-14 04:24:18 +00:00			`</Head>`
Implement WorkerPool, use webkitdirectory input WorkerPool speeds up processing of plugins by using more cores on separate threads. It terminates and recreates a worker after it finishes a task since web assembly seems to slow down a ton when a worker is reused (maybe memory becomes to large / unfragmented, idk). I switched to the deprecated input tag with webkitdirectory since it is the only way to load a folder under the program files folder. Drag and drop might be another alternative, but I'd rather have a picker. 2022-03-05 04:49:14 +00:00			`<WorkerPoolContext.Provider value={workerPool}>`
Move worker init to index page 2022-03-03 04:53:20 +00:00			`<div`
			`style={{`
			`margin: 0,`
			`padding: 0,`
			`width: "100%",`
			`height: "100%",`
			`}}`
			`onDragOver={(evt) => {`
			`evt.preventDefault();`
			`}}`
			`onDrop={async (evt) => {`
			`evt.preventDefault();`
Default sidebar and WIP PluginLoader 2022-02-27 06:17:52 +00:00
Move worker init to index page 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()));`
			`}`
Default sidebar and WIP PluginLoader 2022-02-27 06:17:52 +00:00			`}`
Move worker init to index page 2022-03-03 04:53:20 +00:00			`}}`
			`>`
			`<Map />`
			`</div>`
Implement WorkerPool, use webkitdirectory input WorkerPool speeds up processing of plugins by using more cores on separate threads. It terminates and recreates a worker after it finishes a task since web assembly seems to slow down a ton when a worker is reused (maybe memory becomes to large / unfragmented, idk). I switched to the deprecated input tag with webkitdirectory since it is the only way to load a folder under the program files folder. Drag and drop might be another alternative, but I'd rather have a picker. 2022-03-05 04:49:14 +00:00			`</WorkerPoolContext.Provider>`
Map with heaptmap overlay and layer toggles 2022-01-15 03:46:39 +00:00			`</>`
			`);`
			`};`
Initial commit from Create Next App 2022-01-14 04:24:18 +00:00
Map with heaptmap overlay and layer toggles 2022-01-15 03:46:39 +00:00			`export default Home;`