Select file and plugin, add to new plugins state
This commit is contained in:
parent
a067f21f15
commit
2065b5fa3a
@ -1,79 +1,105 @@
|
||||
import { format } from "date-fns";
|
||||
import React from "react";
|
||||
import React, { useCallback, useState } from "react";
|
||||
import useSWRImmutable from "swr/immutable";
|
||||
|
||||
import { Mod, NEXUS_MODS_URL } from "./ModData";
|
||||
import { Mod, File, NEXUS_MODS_URL } from "./ModData";
|
||||
import styles from "../styles/AddModData.module.css";
|
||||
import { jsonFetcher } from "../lib/api";
|
||||
|
||||
type Props = {
|
||||
selectedMod: number;
|
||||
selectedPlugin: string | null;
|
||||
setSelectedPlugin: (plugin: string) => void;
|
||||
counts: Record<number, [number, number, number]> | null;
|
||||
};
|
||||
|
||||
const AddModData: React.FC<Props> = ({ selectedMod, counts }) => {
|
||||
const { data, error } = useSWRImmutable(
|
||||
`https://mods.modmapper.com/${selectedMod}.json`,
|
||||
const AddModData: React.FC<Props> = ({
|
||||
selectedMod,
|
||||
selectedPlugin,
|
||||
setSelectedPlugin,
|
||||
counts,
|
||||
}) => {
|
||||
const [selectedFile, setSelectedFile] = useState<number | null>(null);
|
||||
|
||||
const { data: modData, error: modError } = useSWRImmutable(
|
||||
selectedMod ? `https://mods.modmapper.com/${selectedMod}.json` : null,
|
||||
(_) => jsonFetcher<Mod>(_)
|
||||
);
|
||||
const { data: fileData, error: fileError } = useSWRImmutable(
|
||||
selectedFile ? `https://files.modmapper.com/${selectedFile}.json` : null,
|
||||
(_) => jsonFetcher<File>(_)
|
||||
);
|
||||
|
||||
if (error && error.status === 404) {
|
||||
const handleFileChange = useCallback(
|
||||
(event) => {
|
||||
setSelectedFile(event.target.value);
|
||||
},
|
||||
[setSelectedFile]
|
||||
);
|
||||
const handlePluginChange = useCallback(
|
||||
(event) => {
|
||||
setSelectedPlugin(event.target.value);
|
||||
},
|
||||
[setSelectedPlugin]
|
||||
);
|
||||
|
||||
if (modError && modError.status === 404) {
|
||||
return <div>Mod could not be found.</div>;
|
||||
} else if (error) {
|
||||
return <div>{`Error loading mod data: ${error.message}`}</div>;
|
||||
} else if (modError) {
|
||||
return <div>{`Error loading mod data: ${modError.message}`}</div>;
|
||||
}
|
||||
if (data === undefined)
|
||||
if (modData === undefined)
|
||||
return <div className={styles.status}>Loading...</div>;
|
||||
if (data === null)
|
||||
if (modData === null)
|
||||
return <div className={styles.status}>Mod could not be found.</div>;
|
||||
|
||||
let numberFmt = new Intl.NumberFormat("en-US");
|
||||
const modCounts = counts && counts[data.nexus_mod_id];
|
||||
const modCounts = counts && counts[modData.nexus_mod_id];
|
||||
const total_downloads = modCounts ? modCounts[0] : 0;
|
||||
const unique_downloads = modCounts ? modCounts[1] : 0;
|
||||
const views = modCounts ? modCounts[2] : 0;
|
||||
|
||||
if (selectedMod && data) {
|
||||
if (selectedMod && modData) {
|
||||
return (
|
||||
<div className={styles.wrapper}>
|
||||
<h3>
|
||||
<a
|
||||
href={`${NEXUS_MODS_URL}/mods/${data.nexus_mod_id}`}
|
||||
href={`${NEXUS_MODS_URL}/mods/${modData.nexus_mod_id}`}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
className={styles.name}
|
||||
>
|
||||
{data.name}
|
||||
{modData.name}
|
||||
</a>
|
||||
</h3>
|
||||
<div>
|
||||
<strong>Category: </strong>
|
||||
<a
|
||||
href={`${NEXUS_MODS_URL}/mods/categories/${data.category_id}`}
|
||||
href={`${NEXUS_MODS_URL}/mods/categories/${modData.category_id}`}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
{data.category_name}
|
||||
{modData.category_name}
|
||||
</a>
|
||||
{data.is_translation && <strong> (translation)</strong>}
|
||||
{modData.is_translation && <strong> (translation)</strong>}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Author: </strong>
|
||||
<a
|
||||
href={`${NEXUS_MODS_URL}/users/${data.author_id}`}
|
||||
href={`${NEXUS_MODS_URL}/users/${modData.author_id}`}
|
||||
target="_blank"
|
||||
rel="noreferrer noopener"
|
||||
>
|
||||
{data.author_name}
|
||||
{modData.author_name}
|
||||
</a>
|
||||
</div>
|
||||
<div>
|
||||
<strong>Uploaded:</strong>{" "}
|
||||
{format(new Date(data.first_upload_at), "d MMM y")}
|
||||
{format(new Date(modData.first_upload_at), "d MMM y")}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Last Update:</strong>{" "}
|
||||
{format(new Date(data.last_update_at), "d MMM y")}
|
||||
{format(new Date(modData.last_update_at), "d MMM y")}
|
||||
</div>
|
||||
<div>
|
||||
<strong>Total Downloads:</strong> {numberFmt.format(total_downloads)}
|
||||
@ -82,6 +108,44 @@ const AddModData: React.FC<Props> = ({ selectedMod, counts }) => {
|
||||
<strong>Unique Downloads:</strong>{" "}
|
||||
{numberFmt.format(unique_downloads)}
|
||||
</div>
|
||||
<div className={styles["select-container"]}>
|
||||
<label htmlFor="mod-file-select" className={styles.label}>
|
||||
Select file:
|
||||
</label>
|
||||
<select
|
||||
name="file"
|
||||
id="mod-file-select"
|
||||
className={styles.select}
|
||||
onChange={handleFileChange}
|
||||
>
|
||||
<option value="">--Select file--</option>
|
||||
{[...modData.files].reverse().map((file) => (
|
||||
<option key={file.nexus_file_id} value={file.nexus_file_id}>
|
||||
{file.name} (v{file.version}) ({file.category})
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
{fileData && (
|
||||
<div className={styles["select-container"]}>
|
||||
<label htmlFor="file-plugin-select" className={styles.label}>
|
||||
Select plugin:
|
||||
</label>
|
||||
<select
|
||||
name="plugin"
|
||||
id="file-plugin-select"
|
||||
className={styles.select}
|
||||
onChange={handlePluginChange}
|
||||
>
|
||||
<option value="">--Select plugin--</option>
|
||||
{fileData.plugins.map((plugin) => (
|
||||
<option key={plugin.hash} value={plugin.hash}>
|
||||
{plugin.file_path}
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -1,8 +1,12 @@
|
||||
import { createPortal } from "react-dom";
|
||||
import React, { useState, useRef } from "react";
|
||||
import React, { useCallback, useState, useRef } from "react";
|
||||
import { useDispatch } from "react-redux";
|
||||
import useSWRImmutable from "swr/immutable";
|
||||
|
||||
import AddModData from "./AddModData";
|
||||
import SearchBar from "./SearchBar";
|
||||
import { jsonFetcher } from "../lib/api";
|
||||
import { updateFetchedPlugin, PluginsByHashWithMods } from "../slices/plugins";
|
||||
import styles from "../styles/AddModDialog.module.css";
|
||||
|
||||
type Props = {
|
||||
@ -11,16 +15,25 @@ type Props = {
|
||||
|
||||
const AddModDialog: React.FC<Props> = ({ counts }) => {
|
||||
const [selectedMod, setSelectedMod] = useState<number | null>(null);
|
||||
const [selectedPlugin, setSelectedPlugin] = useState<string | null>(null);
|
||||
const [dialogShown, setDialogShown] = useState(false);
|
||||
const searchInput = useRef<HTMLInputElement | null>(null);
|
||||
const dispatch = useDispatch();
|
||||
|
||||
const onAddModButtonClick = async () => {
|
||||
const { data, error } = useSWRImmutable(
|
||||
selectedPlugin
|
||||
? `https://plugins.modmapper.com/${selectedPlugin}.json`
|
||||
: null,
|
||||
(_) => jsonFetcher<PluginsByHashWithMods>(_)
|
||||
);
|
||||
|
||||
const onAddModButtonClick = useCallback(async () => {
|
||||
setSelectedMod(null);
|
||||
setDialogShown(true);
|
||||
requestAnimationFrame(() => {
|
||||
if (searchInput.current) searchInput.current.focus();
|
||||
});
|
||||
};
|
||||
}, [setSelectedMod, setDialogShown]);
|
||||
|
||||
return (
|
||||
<>
|
||||
@ -41,7 +54,12 @@ const AddModDialog: React.FC<Props> = ({ counts }) => {
|
||||
inputRef={searchInput}
|
||||
/>
|
||||
{selectedMod && (
|
||||
<AddModData selectedMod={selectedMod} counts={counts} />
|
||||
<AddModData
|
||||
selectedMod={selectedMod}
|
||||
selectedPlugin={selectedPlugin}
|
||||
setSelectedPlugin={setSelectedPlugin}
|
||||
counts={counts}
|
||||
/>
|
||||
)}
|
||||
<menu>
|
||||
<button
|
||||
@ -55,10 +73,11 @@ const AddModDialog: React.FC<Props> = ({ counts }) => {
|
||||
</button>
|
||||
<button
|
||||
onClick={() => {
|
||||
console.log(`Adding mod ${selectedMod}`);
|
||||
console.log(`Adding mod ${selectedMod} ${selectedPlugin}`);
|
||||
if (data) dispatch(updateFetchedPlugin(data));
|
||||
setDialogShown(false);
|
||||
}}
|
||||
disabled={!selectedMod}
|
||||
disabled={!selectedMod || !selectedPlugin || !data}
|
||||
>
|
||||
Add
|
||||
</button>
|
||||
|
||||
@ -4,7 +4,7 @@ import useSWRImmutable from "swr/immutable";
|
||||
|
||||
import styles from "../styles/CellData.module.css";
|
||||
import ModList from "./ModList";
|
||||
import PluginList from "./PluginsList";
|
||||
import PluginList from "./ParsedPluginsList";
|
||||
import { jsonFetcher } from "../lib/api";
|
||||
|
||||
export interface Mod {
|
||||
|
||||
@ -12,7 +12,7 @@ type Props = {};
|
||||
const DataDirPicker: React.FC<Props> = () => {
|
||||
const workerPool = useContext(WorkerPoolContext);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
const plugins = useAppSelector((state) => state.plugins.plugins);
|
||||
const plugins = useAppSelector((state) => state.plugins.parsedPlugins);
|
||||
const pluginsPending = useAppSelector((state) => state.plugins.pending);
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [uploadNoticeShown, setUploadNoticeShown] = useState(false);
|
||||
|
||||
68
components/FetchedPluginsList.tsx
Normal file
68
components/FetchedPluginsList.tsx
Normal file
@ -0,0 +1,68 @@
|
||||
import Link from "next/link";
|
||||
import React from "react";
|
||||
|
||||
import { useAppSelector, useAppDispatch } from "../lib/hooks";
|
||||
import {
|
||||
disableAllFetchedPlugins,
|
||||
enableAllFetchedPlugins,
|
||||
toggleFetchedPlugin,
|
||||
} from "../slices/plugins";
|
||||
import styles from "../styles/FetchedPluginList.module.css";
|
||||
|
||||
type Props = {
|
||||
selectedCell?: { x: number; y: number };
|
||||
};
|
||||
|
||||
const FetchedPluginsList: React.FC<Props> = ({ selectedCell }) => {
|
||||
const dispatch = useAppDispatch();
|
||||
const plugins = useAppSelector((state) =>
|
||||
selectedCell
|
||||
? state.plugins.fetchedPlugins.filter((plugin) =>
|
||||
plugin.cells.some(
|
||||
(cell) => cell.x === selectedCell.x && cell.y === selectedCell.y
|
||||
// TODO: support other worlds
|
||||
)
|
||||
)
|
||||
: state.plugins.fetchedPlugins
|
||||
);
|
||||
|
||||
return (
|
||||
<>
|
||||
{plugins.length > 0 && <h2>Added Plugins ({plugins.length})</h2>}
|
||||
{!selectedCell && plugins.length > 0 && (
|
||||
<div className={styles.buttons}>
|
||||
<button onClick={() => dispatch(enableAllFetchedPlugins())}>
|
||||
Enable all
|
||||
</button>
|
||||
<button onClick={() => dispatch(disableAllFetchedPlugins())}>
|
||||
Disable all
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
<ol
|
||||
className={`${styles["plugin-list"]} ${
|
||||
plugins.length > 0 ? styles["bottom-spacing"] : ""
|
||||
}`}
|
||||
>
|
||||
{plugins.map((plugin) => (
|
||||
<li key={plugin.hash} title={plugin.plugins[0].file_name}>
|
||||
<input
|
||||
id={plugin.hash}
|
||||
type="checkbox"
|
||||
checked={plugin.enabled ?? false}
|
||||
value={plugin.enabled ? "on" : "off"}
|
||||
onChange={() => dispatch(toggleFetchedPlugin(plugin.hash))}
|
||||
/>
|
||||
<label htmlFor={plugin.hash} className={styles["plugin-label"]}>
|
||||
<Link href={`/?plugin=${plugin.hash}`}>
|
||||
<a>{plugin.plugins[0].file_name}</a>
|
||||
</Link>
|
||||
</label>
|
||||
</li>
|
||||
))}
|
||||
</ol>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default FetchedPluginsList;
|
||||
@ -5,7 +5,7 @@ import mapboxgl from "mapbox-gl";
|
||||
import useSWRImmutable from "swr/immutable";
|
||||
|
||||
import { useAppDispatch, useAppSelector } from "../lib/hooks";
|
||||
import { setFetchedPlugin, PluginFile } from "../slices/plugins";
|
||||
import { setSelectedFetchedPlugin, PluginFile } from "../slices/plugins";
|
||||
import styles from "../styles/Map.module.css";
|
||||
import Sidebar from "./Sidebar";
|
||||
import ToggleLayersControl from "./ToggleLayersControl";
|
||||
@ -55,9 +55,11 @@ const Map: React.FC = () => {
|
||||
const [sidebarOpen, setSidebarOpen] = useState(true);
|
||||
|
||||
const dispatch = useAppDispatch();
|
||||
const plugins = useAppSelector((state) => state.plugins.plugins);
|
||||
const plugins = useAppSelector((state) => state.plugins.parsedPlugins);
|
||||
const pluginsPending = useAppSelector((state) => state.plugins.pending);
|
||||
const fetchedPlugin = useAppSelector((state) => state.plugins.fetchedPlugin);
|
||||
const selectedFetchedPlugin = useAppSelector(
|
||||
(state) => state.plugins.selectedFetchedPlugin
|
||||
);
|
||||
|
||||
const { data: cellsData, error: cellsError } = useSWRImmutable(
|
||||
"https://cells.modmapper.com/edits.json",
|
||||
@ -243,7 +245,7 @@ const Map: React.FC = () => {
|
||||
|
||||
const clearSelectedCells = useCallback(() => {
|
||||
setSelectedCells(null);
|
||||
dispatch(setFetchedPlugin(undefined));
|
||||
dispatch(setSelectedFetchedPlugin(undefined));
|
||||
if (map.current) {
|
||||
map.current.removeFeatureState({ source: "selected-cells-source" });
|
||||
map.current.removeFeatureState({ source: "conflicted-cell-source" });
|
||||
@ -371,12 +373,12 @@ const Map: React.FC = () => {
|
||||
if (
|
||||
router.query.plugin &&
|
||||
typeof router.query.plugin === "string" &&
|
||||
fetchedPlugin &&
|
||||
fetchedPlugin.cells
|
||||
selectedFetchedPlugin &&
|
||||
selectedFetchedPlugin.cells
|
||||
) {
|
||||
const cells = [];
|
||||
const cellSet = new Set<number>();
|
||||
for (const cell of fetchedPlugin.cells) {
|
||||
for (const cell of selectedFetchedPlugin.cells) {
|
||||
if (
|
||||
cell.x !== undefined &&
|
||||
cell.y !== undefined &&
|
||||
@ -388,7 +390,7 @@ const Map: React.FC = () => {
|
||||
}
|
||||
selectCells(cells);
|
||||
}
|
||||
}, [heatmapLoaded, fetchedPlugin, selectCells, router.query.plugin]);
|
||||
}, [heatmapLoaded, selectedFetchedPlugin, selectCells, router.query.plugin]);
|
||||
|
||||
useEffect(() => {
|
||||
if (!heatmapLoaded) return; // wait for all map layers to load
|
||||
|
||||
@ -12,6 +12,43 @@ export interface CellCoord {
|
||||
y: number;
|
||||
}
|
||||
|
||||
export interface ModFile {
|
||||
name: string;
|
||||
version: string;
|
||||
category: string;
|
||||
nexus_file_id: number;
|
||||
}
|
||||
|
||||
export interface FilePlugin {
|
||||
hash: number;
|
||||
file_path: string;
|
||||
}
|
||||
|
||||
export interface FileCell {
|
||||
x: number;
|
||||
y: number;
|
||||
}
|
||||
|
||||
export interface File {
|
||||
id: number;
|
||||
name: string;
|
||||
file_name: string;
|
||||
nexus_file_id: number;
|
||||
mod_id: number;
|
||||
category: string;
|
||||
version: string;
|
||||
mod_version: string;
|
||||
size: number;
|
||||
uploaded_at: string;
|
||||
created_at: string;
|
||||
downloaded_at: string;
|
||||
has_plugin: boolean;
|
||||
unable_to_extract_plugins: boolean;
|
||||
cells: FileCell[];
|
||||
plugins: FilePlugin[];
|
||||
plugin_count: number;
|
||||
}
|
||||
|
||||
export interface Mod {
|
||||
id: number;
|
||||
name: string;
|
||||
@ -30,6 +67,7 @@ export interface Mod {
|
||||
first_upload_at: string;
|
||||
last_updated_files_at: string;
|
||||
cells: CellCoord[];
|
||||
files: ModFile[];
|
||||
}
|
||||
|
||||
export const NEXUS_MODS_URL = "https://www.nexusmods.com/skyrimspecialedition";
|
||||
|
||||
@ -4,21 +4,21 @@ import React from "react";
|
||||
import { useAppSelector, useAppDispatch } from "../lib/hooks";
|
||||
import { excludedPlugins } from "../lib/plugins";
|
||||
import {
|
||||
enableAllPlugins,
|
||||
disableAllPlugins,
|
||||
togglePlugin,
|
||||
enableAllParsedPlugins,
|
||||
disableAllParsedPlugins,
|
||||
toggleParsedPlugin,
|
||||
} from "../slices/plugins";
|
||||
import styles from "../styles/PluginList.module.css";
|
||||
import styles from "../styles/ParsedPluginList.module.css";
|
||||
|
||||
type Props = {
|
||||
selectedCell?: { x: number; y: number };
|
||||
};
|
||||
|
||||
const PluginsList: React.FC<Props> = ({ selectedCell }) => {
|
||||
const ParsedPluginsList: React.FC<Props> = ({ selectedCell }) => {
|
||||
const dispatch = useAppDispatch();
|
||||
const plugins = useAppSelector((state) =>
|
||||
selectedCell
|
||||
? state.plugins.plugins.filter((plugin) =>
|
||||
? state.plugins.parsedPlugins.filter((plugin) =>
|
||||
plugin.parsed?.cells.some(
|
||||
(cell) =>
|
||||
cell.x === selectedCell.x &&
|
||||
@ -28,7 +28,7 @@ const PluginsList: React.FC<Props> = ({ selectedCell }) => {
|
||||
plugin.parsed?.header.masters[0] === "Skyrim.esm"
|
||||
)
|
||||
)
|
||||
: state.plugins.plugins
|
||||
: state.plugins.parsedPlugins
|
||||
);
|
||||
const pluginsPending = useAppSelector((state) => state.plugins.pending);
|
||||
|
||||
@ -37,10 +37,10 @@ const PluginsList: React.FC<Props> = ({ selectedCell }) => {
|
||||
{plugins.length > 0 && <h2>Loaded Plugins ({plugins.length})</h2>}
|
||||
{!selectedCell && plugins.length > 0 && (
|
||||
<div className={styles.buttons}>
|
||||
<button onClick={() => dispatch(enableAllPlugins())}>
|
||||
<button onClick={() => dispatch(enableAllParsedPlugins())}>
|
||||
Enable all
|
||||
</button>
|
||||
<button onClick={() => dispatch(disableAllPlugins())}>
|
||||
<button onClick={() => dispatch(disableAllParsedPlugins())}>
|
||||
Disable all
|
||||
</button>
|
||||
</div>
|
||||
@ -60,7 +60,7 @@ const PluginsList: React.FC<Props> = ({ selectedCell }) => {
|
||||
}
|
||||
checked={plugin.enabled ?? false}
|
||||
value={plugin.enabled ? "on" : "off"}
|
||||
onChange={() => dispatch(togglePlugin(plugin.filename))}
|
||||
onChange={() => dispatch(toggleParsedPlugin(plugin.filename))}
|
||||
/>
|
||||
<label htmlFor={plugin.filename} className={styles["plugin-label"]}>
|
||||
{excludedPlugins.includes(plugin.filename) ? (
|
||||
@ -87,4 +87,4 @@ const PluginsList: React.FC<Props> = ({ selectedCell }) => {
|
||||
);
|
||||
};
|
||||
|
||||
export default PluginsList;
|
||||
export default ParsedPluginsList;
|
||||
@ -11,7 +11,8 @@ import ModData from "./ModData";
|
||||
import PluginDetail from "./PluginDetail";
|
||||
import DataDirPicker from "./DataDirPicker";
|
||||
import PluginTxtEditor from "./PluginTxtEditor";
|
||||
import PluginsList from "./PluginsList";
|
||||
import ParsedPluginsList from "./ParsedPluginsList";
|
||||
import FetchedPluginsList from "./FetchedPluginsList";
|
||||
import styles from "../styles/Sidebar.module.css";
|
||||
|
||||
type Props = {
|
||||
@ -154,7 +155,8 @@ const Sidebar: React.FC<Props> = ({
|
||||
</p>
|
||||
<DataDirPicker />
|
||||
<PluginTxtEditor />
|
||||
<PluginsList />
|
||||
<ParsedPluginsList />
|
||||
<FetchedPluginsList />
|
||||
<AddModDialog counts={counts} />
|
||||
{renderLastModified(lastModified)}
|
||||
</div>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
import { createContext } from "react";
|
||||
|
||||
import {
|
||||
addPluginInOrder,
|
||||
addParsedPluginInOrder,
|
||||
decrementPending,
|
||||
PluginFile,
|
||||
} from "../slices/plugins";
|
||||
@ -48,7 +48,7 @@ export class WorkerPool {
|
||||
resolve(worker);
|
||||
} else if (typeof data !== "string") {
|
||||
store.dispatch(decrementPending(1));
|
||||
store.dispatch(addPluginInOrder(data));
|
||||
store.dispatch(addParsedPluginInOrder(data));
|
||||
// Since web assembly memory cannot be shrunk, replace worker with a fresh one to avoid slow repeated
|
||||
// invocations on the same worker instance. Repeated invocations are so slow that the delay in creating a
|
||||
// new worker is worth it. In practice, there are usually more workers than tasks, so the delay does not slow
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { WorkerPool } from "./WorkerPool";
|
||||
import store from "./store";
|
||||
import { clearPlugins, setPending } from "../slices/plugins";
|
||||
import { clearParsedPlugins, setPending } from "../slices/plugins";
|
||||
|
||||
export const excludedPlugins = [
|
||||
"Skyrim.esm",
|
||||
@ -28,7 +28,7 @@ export const parsePluginFiles = (pluginFiles: File[], workerPool: WorkerPool) =>
|
||||
alert("Found no plugins in the folder. Please select the Data folder underneath the Skyrim installation folder.");
|
||||
return;
|
||||
}
|
||||
store.dispatch(clearPlugins());
|
||||
store.dispatch(clearParsedPlugins());
|
||||
store.dispatch(setPending(pluginFiles.length));
|
||||
|
||||
pluginFiles.forEach(async (plugin) => {
|
||||
|
||||
@ -27,14 +27,14 @@ export interface World {
|
||||
form_id: number;
|
||||
}
|
||||
|
||||
export interface Plugin {
|
||||
export interface ParsedPlugin {
|
||||
header: Header;
|
||||
cells: Cell[];
|
||||
worlds: World[];
|
||||
}
|
||||
|
||||
export interface PluginFile {
|
||||
parsed?: Plugin;
|
||||
parsed?: ParsedPlugin;
|
||||
filename: string;
|
||||
lastModified: number;
|
||||
hash: string;
|
||||
@ -65,7 +65,7 @@ export interface File {
|
||||
export interface FetchedPlugin {
|
||||
id: number;
|
||||
name: string;
|
||||
hash: bigint;
|
||||
hash: string;
|
||||
file_id: number;
|
||||
mod_id: number;
|
||||
version: number;
|
||||
@ -79,86 +79,125 @@ export interface FetchedPlugin {
|
||||
created_at: Date;
|
||||
}
|
||||
|
||||
export interface FetchedCell {
|
||||
x: 0;
|
||||
y: 0;
|
||||
}
|
||||
|
||||
export interface PluginsByHashWithMods {
|
||||
hash: number;
|
||||
hash: string;
|
||||
plugins: FetchedPlugin[];
|
||||
files: File[];
|
||||
mods: Mod[];
|
||||
cells: Cell[];
|
||||
cells: FetchedCell[];
|
||||
enabled?: boolean;
|
||||
}
|
||||
|
||||
export type PluginsState = {
|
||||
plugins: PluginFile[];
|
||||
fetchedPlugin?: PluginsByHashWithMods;
|
||||
parsedPlugins: PluginFile[];
|
||||
fetchedPlugins: PluginsByHashWithMods[];
|
||||
selectedFetchedPlugin?: PluginsByHashWithMods;
|
||||
pending: number;
|
||||
}
|
||||
|
||||
const initialState: PluginsState = { plugins: [], pending: 0 };
|
||||
const initialState: PluginsState = { parsedPlugins: [], fetchedPlugins: [], pending: 0 };
|
||||
|
||||
export const pluginsSlice = createSlice({
|
||||
name: "plugins",
|
||||
initialState,
|
||||
reducers: {
|
||||
addPlugin: (state, action: PayloadAction<PluginFile>) => ({
|
||||
plugins: [...state.plugins, action.payload],
|
||||
pending: state.pending,
|
||||
fetchedPlugin: state.fetchedPlugin,
|
||||
addParsedPlugin: (state: PluginsState, action: PayloadAction<PluginFile>) => ({
|
||||
...state,
|
||||
parsedPlugins: [...state.parsedPlugins, action.payload],
|
||||
}),
|
||||
updatePlugin: (state, action: PayloadAction<PluginFile>) => ({
|
||||
plugins: [...state.plugins.filter(plugin => plugin.hash !== action.payload.hash), action.payload],
|
||||
pending: state.pending,
|
||||
fetchedPlugin: state.fetchedPlugin,
|
||||
addFetchedPlugin: (state: PluginsState, action: PayloadAction<PluginsByHashWithMods>) => ({
|
||||
...state,
|
||||
fetchedPlugins: [...state.fetchedPlugins, action.payload],
|
||||
}),
|
||||
setPlugins: (state, action: PayloadAction<PluginFile[]>) => ({
|
||||
plugins: action.payload,
|
||||
pending: state.pending,
|
||||
fetchedPlugin: state.fetchedPlugin,
|
||||
updateParsedPlugin: (state: PluginsState, action: PayloadAction<PluginFile>) => ({
|
||||
...state,
|
||||
parsedPlugins: [...state.parsedPlugins.filter(plugin => plugin.hash !== action.payload.hash), action.payload],
|
||||
}),
|
||||
setPending: (state, action: PayloadAction<number>) => ({
|
||||
plugins: state.plugins,
|
||||
updateFetchedPlugin: (state: PluginsState, action: PayloadAction<PluginsByHashWithMods>) => ({
|
||||
...state,
|
||||
fetchedPlugins: [...state.fetchedPlugins.filter(plugin => plugin.hash !== action.payload.hash), action.payload],
|
||||
}),
|
||||
setParsedPlugins: (state: PluginsState, action: PayloadAction<PluginFile[]>) => ({
|
||||
...state,
|
||||
parsedPlugins: action.payload,
|
||||
}),
|
||||
setFetchedPlugins: (state: PluginsState, action: PayloadAction<PluginsByHashWithMods[]>) => ({
|
||||
...state,
|
||||
fetchedPlugins: action.payload,
|
||||
}),
|
||||
setPending: (state: PluginsState, action: PayloadAction<number>) => ({
|
||||
...state,
|
||||
pending: action.payload,
|
||||
fetchedPlugin: state.fetchedPlugin,
|
||||
}),
|
||||
decrementPending: (state, action: PayloadAction<number>) => ({
|
||||
plugins: state.plugins,
|
||||
decrementPending: (state: PluginsState, action: PayloadAction<number>) => ({
|
||||
...state,
|
||||
pending: state.pending - action.payload,
|
||||
fetchedPlugin: state.fetchedPlugin,
|
||||
}),
|
||||
togglePlugin: (state, action: PayloadAction<string>) => ({
|
||||
plugins: state.plugins.map((plugin) => (plugin.filename === action.payload ? { ...plugin, enabled: !plugin.enabled } : plugin)),
|
||||
pending: state.pending,
|
||||
fetchedPlugin: state.fetchedPlugin,
|
||||
toggleParsedPlugin: (state: PluginsState, action: PayloadAction<string>) => ({
|
||||
...state,
|
||||
parsedPlugins: state.parsedPlugins.map((plugin) => (plugin.filename === action.payload ? { ...plugin, enabled: !plugin.enabled } : plugin)),
|
||||
}),
|
||||
enableAllPlugins: (state) => ({
|
||||
plugins: state.plugins.map((plugin) => ({ ...plugin, enabled: !plugin.parseError && !excludedPlugins.includes(plugin.filename) && true })),
|
||||
pending: state.pending,
|
||||
fetchedPlugin: state.fetchedPlugin,
|
||||
toggleFetchedPlugin: (state: PluginsState, action: PayloadAction<string>) => ({
|
||||
...state,
|
||||
fetchedPlugins: state.fetchedPlugins.map((plugin) => (plugin.hash === action.payload ? { ...plugin, enabled: !plugin.enabled } : plugin)),
|
||||
}),
|
||||
disableAllPlugins: (state) => ({
|
||||
plugins: state.plugins.map((plugin) => ({ ...plugin, enabled: false })),
|
||||
pending: state.pending,
|
||||
fetchedPlugin: state.fetchedPlugin,
|
||||
enableAllParsedPlugins: (state: PluginsState) => ({
|
||||
...state,
|
||||
parsedPlugins: state.parsedPlugins.map((plugin) => ({ ...plugin, enabled: !plugin.parseError && !excludedPlugins.includes(plugin.filename) && true })),
|
||||
}),
|
||||
setFetchedPlugin: (state, action: PayloadAction<PluginsByHashWithMods | undefined>) => ({
|
||||
plugins: state.plugins,
|
||||
pending: state.pending,
|
||||
fetchedPlugin: action.payload,
|
||||
enableAllFetchedPlugins: (state: PluginsState) => ({
|
||||
...state,
|
||||
fetchedPlugins: state.fetchedPlugins.map((plugin) => ({ ...plugin, enabled: true })),
|
||||
}),
|
||||
clearPlugins: () => ({
|
||||
plugins: [],
|
||||
disableAllParsedPlugins: (state: PluginsState) => ({
|
||||
...state,
|
||||
parsedPlugins: state.parsedPlugins.map((plugin) => ({ ...plugin, enabled: false })),
|
||||
}),
|
||||
disableAllFetchedPlugins: (state: PluginsState) => ({
|
||||
...state,
|
||||
fetchedPlugins: state.fetchedPlugins.map((plugin) => ({ ...plugin, enabled: false })),
|
||||
}),
|
||||
setSelectedFetchedPlugin: (state: PluginsState, action: PayloadAction<PluginsByHashWithMods | undefined>) => ({
|
||||
...state,
|
||||
selectedFetchedPlugin: action.payload,
|
||||
}),
|
||||
clearParsedPlugins: (state: PluginsState) => ({
|
||||
...state,
|
||||
parsedPlugins: [],
|
||||
pending: 0,
|
||||
loadedPluginCells: [],
|
||||
}),
|
||||
},
|
||||
})
|
||||
|
||||
export const { addPlugin, updatePlugin, setPlugins, setPending, decrementPending, togglePlugin, enableAllPlugins, disableAllPlugins, setFetchedPlugin, clearPlugins } = pluginsSlice.actions
|
||||
export const {
|
||||
addParsedPlugin,
|
||||
addFetchedPlugin,
|
||||
updateParsedPlugin,
|
||||
updateFetchedPlugin,
|
||||
setParsedPlugins,
|
||||
setFetchedPlugins,
|
||||
setPending,
|
||||
decrementPending,
|
||||
toggleParsedPlugin,
|
||||
toggleFetchedPlugin,
|
||||
enableAllParsedPlugins,
|
||||
enableAllFetchedPlugins,
|
||||
disableAllParsedPlugins,
|
||||
disableAllFetchedPlugins,
|
||||
setSelectedFetchedPlugin,
|
||||
clearParsedPlugins,
|
||||
} = pluginsSlice.actions;
|
||||
|
||||
export const selectPlugins = (state: AppState) => state.plugins
|
||||
|
||||
export const applyLoadOrder = (): AppThunk => (dispatch, getState) => {
|
||||
const { plugins, pluginsTxt } = getState();
|
||||
const originalPlugins = [...plugins.plugins];
|
||||
const originalPlugins = [...plugins.parsedPlugins];
|
||||
let newPlugins = [];
|
||||
for (let line of pluginsTxt.split("\n")) {
|
||||
let enabled = false;
|
||||
@ -179,11 +218,11 @@ export const applyLoadOrder = (): AppThunk => (dispatch, getState) => {
|
||||
}
|
||||
}
|
||||
}
|
||||
dispatch(setPlugins([...originalPlugins.sort((a, b) => b.lastModified - a.lastModified), ...newPlugins]));
|
||||
dispatch(setParsedPlugins([...originalPlugins.sort((a, b) => b.lastModified - a.lastModified), ...newPlugins]));
|
||||
}
|
||||
|
||||
export const addPluginInOrder = (plugin: PluginFile): AppThunk => (dispatch) => {
|
||||
dispatch(updatePlugin(plugin));
|
||||
export const addParsedPluginInOrder = (plugin: PluginFile): AppThunk => (dispatch) => {
|
||||
dispatch(updateParsedPlugin(plugin));
|
||||
dispatch(applyLoadOrder());
|
||||
}
|
||||
|
||||
|
||||
@ -7,3 +7,23 @@ a.name {
|
||||
margin-top: 24px;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
|
||||
.select-container {
|
||||
margin-top: 12px;
|
||||
}
|
||||
|
||||
.select {
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.label {
|
||||
white-space: nowrap;
|
||||
margin-right: 12px;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
display: block;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
42
styles/FetchedPluginList.module.css
Normal file
42
styles/FetchedPluginList.module.css
Normal file
@ -0,0 +1,42 @@
|
||||
.plugin-list {
|
||||
list-style-type: none;
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.plugin-list li {
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
.bottom-spacing {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.plugin-error {
|
||||
color: #ff0000;
|
||||
}
|
||||
|
||||
.plugin-label {
|
||||
margin-left: 8px;
|
||||
}
|
||||
|
||||
.loading {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.buttons {
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
padding-right: 12px;
|
||||
padding-left: 12px;
|
||||
justify-content: space-evenly;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.buttons button {
|
||||
flex: 1;
|
||||
margin-right: 12px;
|
||||
margin-right: 12px;
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user