thallada/modmapper-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Move worker init to index page

Browse Source
This commit is contained in:
Tyler Hallada 2022-03-02 23:53:20 -05:00
parent 96599cb2c8
commit 5144f8d6e1
3 changed files with 63 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
components/DataDirPicker.tsx
View File

@ -1,5 +1,6 @@
import React, { useEffect, useRef } from "react";
import React, { useContext, useEffect, useRef } from "react";
import { WorkerContext } from "../pages/index";
import { useAppSelector, useAppDispatch } from "../lib/hooks";
import {
addPluginInOrder,
@ -21,35 +22,12 @@ export const excludedPlugins = [
type Props = {};
const DataDirPicker: React.FC<Props> = () => {
const workerRef = useRef<Worker>();
const worker = useContext(WorkerContext);
const dispatch = useAppDispatch();
const plugins = useAppSelector((state) => state.plugins.plugins);
useEffect(() => {
async function loadWorker() {
const { default: Worker } = await import(
"worker-loader?filename=static/[fullhash].worker.js!../workers/PluginsLoader.worker"
);
console.log(Worker);
workerRef.current = new Worker();
workerRef.current.onmessage = (evt: { data: PluginFile }) => {
const { data } = evt;
console.log(`WebWorker Response =>`);
dispatch(decrementPending(1));
console.log(data.parsed);
dispatch(addPluginInOrder(data));
};
}
loadWorker();
return () => {
if (workerRef.current) {
workerRef.current.terminate();
}
};
}, [dispatch]);
const onDataDirButtonClick = async () => {
if (!workerRef.current) {
if (!worker) {
return alert("Worker not loaded yet");
}
const dirHandle = await (
@ -81,7 +59,7 @@ const DataDirPicker: React.FC<Props> = () => {
console.log(file.lastModifiedDate);
const contents = new Uint8Array(await file.arrayBuffer());
try {
workerRef.current.postMessage(
worker.postMessage(
{
skipParsing: excludedPlugins.includes(plugin.name),
filename: plugin.name,
@ -102,7 +80,7 @@ const DataDirPicker: React.FC<Props> = () => {
To see all of the cell edits and conflicts for your current mod load
order select your <code>Data</code> directory below to load the plugins.
</p>
<button onClick={onDataDirButtonClick}>
<button onClick={onDataDirButtonClick} disabled={!worker}>
{plugins.length === 0 ? "Open" : "Reload"} Skyrim Data directory
</button>
</>

37
pages/index.tsx
View File

@ -1,13 +1,46 @@
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";
import { useAppDispatch } from "../lib/hooks";
import {
addPluginInOrder,
decrementPending,
PluginFile,
} from "../slices/plugins";
import { setPluginsTxtAndApplyLoadOrder } from "../slices/pluginsTxt";
export const WorkerContext = createContext<Worker | null>(null);
const Home: NextPage = () => {
const [worker, setWorker] = useState<Worker | null>(null);
const dispatch = useAppDispatch();
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]);
return (
<>
<Head>
@ -56,6 +89,7 @@ const Home: NextPage = () => {
<meta name="twitter:site" content="@tyhallada" />
<meta name="twitter:creator" content="@tyhallada" />
</Head>
<WorkerContext.Provider value={worker}>
<div
style={{
margin: 0,
@ -64,11 +98,9 @@ const Home: NextPage = () => {
height: "100%",
}}
onDragOver={(evt) => {
console.log("drag over!");
evt.preventDefault();
}}
onDrop={async (evt) => {
console.log("drop!");
evt.preventDefault();
if (evt.dataTransfer.items && evt.dataTransfer.items.length > 0) {
@ -81,6 +113,7 @@ const Home: NextPage = () => {
>
<Map />
</div>
</WorkerContext.Provider>
</>
);
};

2
slices/plugins.ts
View File

@ -66,7 +66,7 @@ export const selectPlugins = (state: AppState) => state.plugins
export const applyLoadOrder = (): AppThunk => (dispatch, getState) => {
const { plugins, pluginsTxt } = getState();
console.log("applying load order!", pluginsTxt);
console.log("applying load order!");
const originalPlugins = [...plugins.plugins];
console.log(originalPlugins);
console.log(originalPlugins[0] && originalPlugins[0].filename);