Refactor PluginsLoader into separate components
This commit is contained in:
parent
f6d02c6d33
commit
de445627bf
112
components/DataDirPicker.tsx
Normal file
112
components/DataDirPicker.tsx
Normal file
@ -0,0 +1,112 @@
|
||||
import React, { useEffect, useRef } from "react";
|
||||
|
||||
import { useAppSelector, useAppDispatch } from "../lib/hooks";
|
||||
import {
|
||||
addPluginInOrder,
|
||||
clearPlugins,
|
||||
setPending,
|
||||
decrementPending,
|
||||
PluginFile,
|
||||
} from "../slices/plugins";
|
||||
import styles from "../styles/DataDirPicker.module.css";
|
||||
|
||||
export const excludedPlugins = [
|
||||
"Skyrim.esm",
|
||||
"Update.esm",
|
||||
"Dawnguard.esm",
|
||||
"HearthFires.esm",
|
||||
"Dragonborn.esm",
|
||||
];
|
||||
|
||||
type Props = {};
|
||||
|
||||
const DataDirPicker: React.FC<Props> = () => {
|
||||
const workerRef = useRef<Worker>();
|
||||
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) {
|
||||
return alert("Worker not loaded yet");
|
||||
}
|
||||
const dirHandle = await (
|
||||
window as Window & typeof globalThis & { showDirectoryPicker: () => any }
|
||||
).showDirectoryPicker();
|
||||
dispatch(clearPlugins());
|
||||
const values = dirHandle.values();
|
||||
const plugins = [];
|
||||
while (true) {
|
||||
const next = await values.next();
|
||||
if (next.done) {
|
||||
break;
|
||||
}
|
||||
if (
|
||||
next.value.kind == "file" &&
|
||||
(next.value.name.endsWith(".esp") ||
|
||||
next.value.name.endsWith(".esm") ||
|
||||
next.value.name.endsWith(".esl"))
|
||||
) {
|
||||
console.log(next.value);
|
||||
plugins.push(next.value);
|
||||
}
|
||||
}
|
||||
dispatch(setPending(plugins.length));
|
||||
|
||||
for (const plugin of plugins) {
|
||||
const file = await plugin.getFile();
|
||||
console.log(file.lastModified);
|
||||
console.log(file.lastModifiedDate);
|
||||
const contents = new Uint8Array(await file.arrayBuffer());
|
||||
try {
|
||||
workerRef.current.postMessage(
|
||||
{
|
||||
skipParsing: excludedPlugins.includes(plugin.name),
|
||||
filename: plugin.name,
|
||||
lastModified: file.lastModified,
|
||||
contents,
|
||||
},
|
||||
[contents.buffer]
|
||||
);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<p className={styles["no-top-margin"]}>
|
||||
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}>
|
||||
{plugins.length === 0 ? "Open" : "Reload"} Skyrim Data directory
|
||||
</button>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default DataDirPicker;
|
||||
88
components/PluginTxtEditor.tsx
Normal file
88
components/PluginTxtEditor.tsx
Normal file
@ -0,0 +1,88 @@
|
||||
import { createPortal } from "react-dom";
|
||||
import React, { useEffect, useState } from "react";
|
||||
|
||||
import { useAppSelector, useAppDispatch } from "../lib/hooks";
|
||||
import { setPluginsTxt } from "../slices/pluginsTxt";
|
||||
import { applyLoadOrder } from "../slices/plugins";
|
||||
import styles from "../styles/PluginTxtEditor.module.css";
|
||||
|
||||
export const excludedPlugins = [
|
||||
"Skyrim.esm",
|
||||
"Update.esm",
|
||||
"Dawnguard.esm",
|
||||
"HearthFires.esm",
|
||||
"Dragonborn.esm",
|
||||
];
|
||||
|
||||
type Props = {};
|
||||
|
||||
const PluginsLoader: React.FC<Props> = () => {
|
||||
const [editPluginsTxt, setEditPluginsTxt] = useState<string | null>(null);
|
||||
const [pluginsTxtShown, setPluginsTxtShown] = useState(false);
|
||||
const dispatch = useAppDispatch();
|
||||
const pluginsTxt = useAppSelector((state) => state.pluginsTxt);
|
||||
|
||||
useEffect(() => {
|
||||
setPluginsTxtShown(false);
|
||||
console.log("going to apply!");
|
||||
dispatch(applyLoadOrder());
|
||||
}, [dispatch, pluginsTxt]);
|
||||
|
||||
const onPluginsTxtButtonClick = async () => {
|
||||
setEditPluginsTxt(pluginsTxt);
|
||||
setPluginsTxtShown(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<p>
|
||||
Paste or drag-and-drop your <code>plugins.txt</code> below to sort and
|
||||
enable the loaded plugins by your current load order.
|
||||
</p>
|
||||
<button onClick={onPluginsTxtButtonClick}>
|
||||
{!pluginsTxt ? "Paste" : "Edit"} Skyrim plugins.txt file
|
||||
</button>
|
||||
{process.browser &&
|
||||
createPortal(
|
||||
<dialog open={pluginsTxtShown} className={styles.dialog}>
|
||||
<h3>Paste plugins.txt</h3>
|
||||
<p>
|
||||
The plugins.txt file is typically found at{" "}
|
||||
<code>
|
||||
C:\Users\username\AppData\Local\Skyrim Special Edition
|
||||
</code>
|
||||
. You can also drag-and-drop the file anywhere on the window to
|
||||
load the file.
|
||||
</p>
|
||||
<textarea
|
||||
value={editPluginsTxt ?? undefined}
|
||||
onChange={(e) => setEditPluginsTxt(e.target.value)}
|
||||
/>
|
||||
<menu>
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditPluginsTxt(null);
|
||||
setPluginsTxtShown(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
dispatch(setPluginsTxt(editPluginsTxt ?? ""));
|
||||
setPluginsTxtShown(false);
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</menu>
|
||||
</dialog>,
|
||||
document.body
|
||||
)}
|
||||
{process.browser &&
|
||||
createPortal(<div className={styles["drop-area"]} />, document.body)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PluginsLoader;
|
||||
56
components/PluginsList.tsx
Normal file
56
components/PluginsList.tsx
Normal file
@ -0,0 +1,56 @@
|
||||
import Link from "next/link";
|
||||
import React from "react";
|
||||
|
||||
import { useAppSelector, useAppDispatch } from "../lib/hooks";
|
||||
import { togglePlugin } from "../slices/plugins";
|
||||
import styles from "../styles/PluginList.module.css";
|
||||
import { excludedPlugins } from "./DataDirPicker";
|
||||
|
||||
type Props = {};
|
||||
|
||||
const PluginsList: React.FC<Props> = () => {
|
||||
const dispatch = useAppDispatch();
|
||||
const plugins = useAppSelector((state) => state.plugins.plugins);
|
||||
const pluginsPending = useAppSelector((state) => state.plugins.pending);
|
||||
|
||||
return (
|
||||
<>
|
||||
<ol className={styles["plugin-list"]}>
|
||||
{plugins.map((plugin) => (
|
||||
<li key={plugin.filename} title={plugin.filename}>
|
||||
<input
|
||||
id={plugin.filename}
|
||||
type="checkbox"
|
||||
disabled={
|
||||
excludedPlugins.includes(plugin.filename) || !!plugin.parseError
|
||||
}
|
||||
checked={plugin.enabled}
|
||||
onChange={() => dispatch(togglePlugin(plugin.filename))}
|
||||
/>
|
||||
<label htmlFor={plugin.filename} className={styles["plugin-label"]}>
|
||||
{excludedPlugins.includes(plugin.filename) ? (
|
||||
<span>{plugin.filename}</span>
|
||||
) : (
|
||||
<Link href={`/?plugin=${plugin.hash}`}>
|
||||
<a
|
||||
className={plugin.parseError ? styles["plugin-error"] : ""}
|
||||
>
|
||||
{plugin.filename}
|
||||
</a>
|
||||
</Link>
|
||||
)}
|
||||
</label>
|
||||
{/* <p>{plugin.parsed && plugin.parsed.header.description}</p> */}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
{pluginsPending > 0 && (
|
||||
<span className={styles.loading}>
|
||||
Loading {pluginsPending} plugin{pluginsPending === 1 ? "" : "s"}
|
||||
</span>
|
||||
)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PluginsList;
|
||||
@ -1,218 +0,0 @@
|
||||
import Link from "next/link";
|
||||
import { createPortal } from "react-dom";
|
||||
import React, { useEffect, useRef, useState } from "react";
|
||||
|
||||
import { useAppSelector, useAppDispatch } from "../lib/hooks";
|
||||
import { setPluginsTxt } from "../slices/pluginsTxt";
|
||||
import {
|
||||
addPluginInOrder,
|
||||
applyLoadOrder,
|
||||
clearPlugins,
|
||||
setPending,
|
||||
decrementPending,
|
||||
togglePlugin,
|
||||
PluginFile,
|
||||
} from "../slices/plugins";
|
||||
import styles from "../styles/PluginLoader.module.css";
|
||||
|
||||
const excludedPlugins = [
|
||||
"Skyrim.esm",
|
||||
"Update.esm",
|
||||
"Dawnguard.esm",
|
||||
"HearthFires.esm",
|
||||
"Dragonborn.esm",
|
||||
];
|
||||
|
||||
type Props = {};
|
||||
|
||||
const PluginsLoader: React.FC<Props> = () => {
|
||||
const workerRef = useRef<Worker>();
|
||||
const [editPluginsTxt, setEditPluginsTxt] = useState<string | null>(null);
|
||||
const [pluginsTxtShown, setPluginsTxtShown] = useState(false);
|
||||
const dispatch = useAppDispatch();
|
||||
const plugins = useAppSelector((state) => state.plugins.plugins);
|
||||
const pluginsPending = useAppSelector((state) => state.plugins.pending);
|
||||
const pluginsTxt = useAppSelector((state) => state.pluginsTxt);
|
||||
|
||||
useEffect(() => {
|
||||
setPluginsTxtShown(false);
|
||||
console.log("going to apply!");
|
||||
dispatch(applyLoadOrder());
|
||||
}, [dispatch, pluginsTxt]);
|
||||
|
||||
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) {
|
||||
return alert("Worker not loaded yet");
|
||||
}
|
||||
const dirHandle = await (
|
||||
window as Window & typeof globalThis & { showDirectoryPicker: () => any }
|
||||
).showDirectoryPicker();
|
||||
dispatch(clearPlugins());
|
||||
const values = dirHandle.values();
|
||||
const plugins = [];
|
||||
while (true) {
|
||||
const next = await values.next();
|
||||
if (next.done) {
|
||||
break;
|
||||
}
|
||||
if (
|
||||
next.value.kind == "file" &&
|
||||
(next.value.name.endsWith(".esp") ||
|
||||
next.value.name.endsWith(".esm") ||
|
||||
next.value.name.endsWith(".esl"))
|
||||
) {
|
||||
console.log(next.value);
|
||||
plugins.push(next.value);
|
||||
}
|
||||
}
|
||||
dispatch(setPending(plugins.length));
|
||||
|
||||
for (const plugin of plugins) {
|
||||
const file = await plugin.getFile();
|
||||
console.log(file.lastModified);
|
||||
console.log(file.lastModifiedDate);
|
||||
const contents = new Uint8Array(await file.arrayBuffer());
|
||||
try {
|
||||
workerRef.current.postMessage(
|
||||
{
|
||||
skipParsing: excludedPlugins.includes(plugin.name),
|
||||
filename: plugin.name,
|
||||
lastModified: file.lastModified,
|
||||
contents,
|
||||
},
|
||||
[contents.buffer]
|
||||
);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const onPluginsTxtButtonClick = async () => {
|
||||
setEditPluginsTxt(pluginsTxt);
|
||||
setPluginsTxtShown(true);
|
||||
};
|
||||
|
||||
return (
|
||||
<>
|
||||
<p className={styles["no-top-margin"]}>
|
||||
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}>
|
||||
{plugins.length === 0 ? "Open" : "Reload"} Skyrim Data directory
|
||||
</button>
|
||||
<p>
|
||||
Paste or drag-and-drop your <code>plugins.txt</code> below to sort and
|
||||
enable the loaded plugins by your current load order.
|
||||
</p>
|
||||
<button
|
||||
onClick={onPluginsTxtButtonClick}
|
||||
className={styles["plugins-txt-button"]}
|
||||
>
|
||||
{!pluginsTxt ? "Paste" : "Edit"} Skyrim plugins.txt file
|
||||
</button>
|
||||
<ol className={styles["plugin-list"]}>
|
||||
{plugins.map((plugin) => (
|
||||
<li key={plugin.filename} title={plugin.filename}>
|
||||
<input
|
||||
id={plugin.filename}
|
||||
type="checkbox"
|
||||
disabled={
|
||||
excludedPlugins.includes(plugin.filename) || !!plugin.parseError
|
||||
}
|
||||
checked={plugin.enabled}
|
||||
onChange={() => dispatch(togglePlugin(plugin.filename))}
|
||||
/>
|
||||
<label htmlFor={plugin.filename} className={styles["plugin-label"]}>
|
||||
{excludedPlugins.includes(plugin.filename) ? (
|
||||
<span>{plugin.filename}</span>
|
||||
) : (
|
||||
<Link href={`/?plugin=${plugin.hash}`}>
|
||||
<a
|
||||
className={plugin.parseError ? styles["plugin-error"] : ""}
|
||||
>
|
||||
{plugin.filename}
|
||||
</a>
|
||||
</Link>
|
||||
)}
|
||||
</label>
|
||||
{/* <p>{plugin.parsed && plugin.parsed.header.description}</p> */}
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
{pluginsPending > 0 && (
|
||||
<span className={styles.processing}>
|
||||
Loading {pluginsPending} plugin{pluginsPending === 1 ? "" : "s"}
|
||||
</span>
|
||||
)}
|
||||
{process.browser &&
|
||||
createPortal(
|
||||
<dialog
|
||||
open={pluginsTxtShown}
|
||||
className={styles["plugins-txt-dialog"]}
|
||||
>
|
||||
<h3>Paste plugins.txt</h3>
|
||||
<p>
|
||||
The plugins.txt file is typically found at{" "}
|
||||
<code>
|
||||
C:\Users\username\AppData\Local\Skyrim Special Edition
|
||||
</code>
|
||||
. You can also drag-and-drop the file anywhere on the window to
|
||||
load the file.
|
||||
</p>
|
||||
<textarea
|
||||
value={editPluginsTxt ?? undefined}
|
||||
onChange={(e) => setEditPluginsTxt(e.target.value)}
|
||||
/>
|
||||
<menu>
|
||||
<button
|
||||
onClick={() => {
|
||||
setEditPluginsTxt(null);
|
||||
setPluginsTxtShown(false);
|
||||
}}
|
||||
>
|
||||
Cancel
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
dispatch(setPluginsTxt(editPluginsTxt ?? ""));
|
||||
setPluginsTxtShown(false);
|
||||
}}
|
||||
>
|
||||
Save
|
||||
</button>
|
||||
</menu>
|
||||
</dialog>,
|
||||
document.body
|
||||
)}
|
||||
{process.browser &&
|
||||
createPortal(<div className={styles["drop-area"]} />, document.body)}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default PluginsLoader;
|
||||
@ -5,7 +5,9 @@ import { formatRelative } from "date-fns";
|
||||
import CellData from "./CellData";
|
||||
import ModData from "./ModData";
|
||||
import PluginData from "./PluginData";
|
||||
import PluginsLoader from "./PluginsLoader";
|
||||
import DataDirPicker from "./DataDirPicker";
|
||||
import PluginTxtEditor from "./PluginTxtEditor";
|
||||
import PluginsList from "./PluginsList";
|
||||
import styles from "../styles/Sidebar.module.css";
|
||||
|
||||
type Props = {
|
||||
@ -126,7 +128,9 @@ const Sidebar: React.FC<Props> = ({
|
||||
<p className={styles.subheader}>
|
||||
An interactive map of Skyrim mods.
|
||||
</p>
|
||||
<PluginsLoader />
|
||||
<DataDirPicker />
|
||||
<PluginTxtEditor />
|
||||
<PluginsList />
|
||||
{lastModified && (
|
||||
<div className={styles["sidebar-modified-date"]}>
|
||||
<strong>Last updated:</strong>{" "}
|
||||
|
||||
3
styles/DataDirPicker.module.css
Normal file
3
styles/DataDirPicker.module.css
Normal file
@ -0,0 +1,3 @@
|
||||
.no-top-margin {
|
||||
margin-top: 0;
|
||||
}
|
||||
@ -1,7 +1,3 @@
|
||||
.no-top-margin {
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.plugin-list {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
@ -22,7 +18,7 @@
|
||||
}
|
||||
|
||||
/* From: https://stackoverflow.com/a/28074607/6620612 */
|
||||
.processing:after {
|
||||
.loading:after {
|
||||
overflow: hidden;
|
||||
display: inline-block;
|
||||
vertical-align: bottom;
|
||||
@ -43,35 +39,3 @@
|
||||
width: 1.25em;
|
||||
}
|
||||
}
|
||||
|
||||
.plugins-txt-dialog {
|
||||
top: 12px;
|
||||
z-index: 4;
|
||||
background-color: #fbefd5;
|
||||
box-shadow: 0 0 1em black;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.plugins-txt-dialog h3 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.plugins-txt-dialog textarea {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.plugins-txt-dialog menu {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.drop-area {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
31
styles/PluginTxtEditor.module.css
Normal file
31
styles/PluginTxtEditor.module.css
Normal file
@ -0,0 +1,31 @@
|
||||
.dialog {
|
||||
top: 12px;
|
||||
z-index: 4;
|
||||
background-color: #fbefd5;
|
||||
box-shadow: 0 0 1em black;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.dialog h3 {
|
||||
margin-top: 0px;
|
||||
}
|
||||
|
||||
.dialog textarea {
|
||||
width: 100%;
|
||||
min-height: 100px;
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.dialog menu {
|
||||
padding: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.drop-area {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user