2022-01-25 05:31:25 +00:00
|
|
|
import { format } from "date-fns";
|
2022-02-14 05:38:21 +00:00
|
|
|
import Head from "next/head";
|
2022-03-19 19:38:33 +00:00
|
|
|
import React, { useEffect } from "react";
|
2022-01-25 05:31:25 +00:00
|
|
|
import useSWRImmutable from "swr/immutable";
|
|
|
|
|
|
2022-03-15 01:55:52 +00:00
|
|
|
import CellList from "./CellList";
|
2022-01-25 05:31:25 +00:00
|
|
|
import styles from "../styles/ModData.module.css";
|
2022-03-18 05:06:20 +00:00
|
|
|
import { jsonFetcher } from "../lib/api";
|
2022-01-25 05:31:25 +00:00
|
|
|
|
|
|
|
|
export interface CellCoord {
|
|
|
|
|
x: number;
|
|
|
|
|
y: number;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export interface Mod {
|
|
|
|
|
id: number;
|
|
|
|
|
name: string;
|
|
|
|
|
nexus_mod_id: number;
|
|
|
|
|
author_name: string;
|
|
|
|
|
author_id: number;
|
|
|
|
|
category_name: string;
|
|
|
|
|
category_id: number;
|
|
|
|
|
description: string;
|
|
|
|
|
thumbnail_link: string;
|
|
|
|
|
game_id: number;
|
2022-03-16 04:37:08 +00:00
|
|
|
is_translation: boolean;
|
2022-01-25 05:31:25 +00:00
|
|
|
updated_at: string;
|
|
|
|
|
created_at: string;
|
|
|
|
|
last_update_at: string;
|
|
|
|
|
first_upload_at: string;
|
|
|
|
|
last_updated_files_at: string;
|
|
|
|
|
cells: CellCoord[];
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
const NEXUS_MODS_URL = "https://www.nexusmods.com/skyrimspecialedition";
|
|
|
|
|
|
|
|
|
|
type Props = {
|
|
|
|
|
selectedMod: number;
|
2022-01-30 21:55:50 +00:00
|
|
|
counts: Record<number, [number, number, number]> | null;
|
2022-02-07 03:00:14 +00:00
|
|
|
setSelectedCells: (cells: { x: number; y: number }[] | null) => void;
|
2022-01-25 05:31:25 +00:00
|
|
|
};
|
|
|
|
|
|
2022-02-07 03:00:14 +00:00
|
|
|
const ModData: React.FC<Props> = ({
|
|
|
|
|
selectedMod,
|
|
|
|
|
counts,
|
|
|
|
|
setSelectedCells,
|
|
|
|
|
}) => {
|
2022-01-25 05:31:25 +00:00
|
|
|
const { data, error } = useSWRImmutable(
|
|
|
|
|
`https://mods.modmapper.com/${selectedMod}.json`,
|
2022-03-18 05:06:20 +00:00
|
|
|
(_) => jsonFetcher<Mod>(_)
|
2022-01-25 05:31:25 +00:00
|
|
|
);
|
|
|
|
|
|
2022-03-19 19:38:33 +00:00
|
|
|
useEffect(() => {
|
|
|
|
|
if (data) setSelectedCells(data.cells);
|
|
|
|
|
}, [data, setSelectedCells]);
|
|
|
|
|
|
2022-01-25 05:31:25 +00:00
|
|
|
if (error && error.status === 404) {
|
|
|
|
|
return <div>Mod could not be found.</div>;
|
|
|
|
|
} else if (error) {
|
|
|
|
|
return <div>{`Error loading mod data: ${error.message}`}</div>;
|
|
|
|
|
}
|
|
|
|
|
if (data === undefined)
|
|
|
|
|
return <div className={styles.status}>Loading...</div>;
|
|
|
|
|
if (data === null)
|
|
|
|
|
return <div className={styles.status}>Mod could not be found.</div>;
|
|
|
|
|
|
|
|
|
|
let numberFmt = new Intl.NumberFormat("en-US");
|
2022-01-30 21:55:50 +00:00
|
|
|
const modCounts = counts && counts[data.nexus_mod_id];
|
|
|
|
|
const total_downloads = modCounts ? modCounts[0] : 0;
|
|
|
|
|
const unique_downloads = modCounts ? modCounts[1] : 0;
|
|
|
|
|
const views = modCounts ? modCounts[2] : 0;
|
2022-01-25 05:31:25 +00:00
|
|
|
|
|
|
|
|
if (selectedMod && data) {
|
|
|
|
|
return (
|
|
|
|
|
<>
|
2022-02-14 05:38:21 +00:00
|
|
|
<Head>
|
|
|
|
|
<title key="title">{`Modmapper - ${data.name}`}</title>
|
|
|
|
|
<meta
|
|
|
|
|
key="description"
|
|
|
|
|
name="description"
|
|
|
|
|
content={`Map of Skyrim showing ${data.cells.length} cell edits from the mod: ${data.name}`}
|
|
|
|
|
/>
|
|
|
|
|
<meta
|
|
|
|
|
key="og:title"
|
|
|
|
|
property="og:title"
|
|
|
|
|
content={`Modmapper - ${data.name}`}
|
|
|
|
|
/>
|
|
|
|
|
<meta
|
|
|
|
|
key="og:description"
|
|
|
|
|
property="og:description"
|
|
|
|
|
content={`Map of Skyrim showing ${data.cells.length} cell edits from the mod: ${data.name}`}
|
|
|
|
|
/>
|
|
|
|
|
<meta
|
|
|
|
|
key="twitter:title"
|
|
|
|
|
name="twitter:title"
|
|
|
|
|
content={`Modmapper - ${data.name}`}
|
|
|
|
|
/>
|
|
|
|
|
<meta
|
|
|
|
|
key="twitter:description"
|
|
|
|
|
name="twitter:description"
|
|
|
|
|
content={`Map of Skyrim showing ${data.cells.length} cell edits from the mod: ${data.name}`}
|
|
|
|
|
/>
|
|
|
|
|
<meta
|
|
|
|
|
key="og:url"
|
|
|
|
|
property="og:url"
|
|
|
|
|
content={`https://modmapper.com/?mod=${data.nexus_mod_id}`}
|
|
|
|
|
/>
|
|
|
|
|
</Head>
|
2022-01-25 05:31:25 +00:00
|
|
|
<h1>
|
|
|
|
|
<a
|
|
|
|
|
href={`${NEXUS_MODS_URL}/mods/${data.nexus_mod_id}`}
|
2022-02-07 03:00:14 +00:00
|
|
|
target="_blank"
|
|
|
|
|
rel="noreferrer noopener"
|
2022-02-27 06:17:52 +00:00
|
|
|
className={styles.name}
|
2022-01-25 05:31:25 +00:00
|
|
|
>
|
|
|
|
|
{data.name}
|
|
|
|
|
</a>
|
|
|
|
|
</h1>
|
|
|
|
|
<div>
|
|
|
|
|
<strong>Category: </strong>
|
|
|
|
|
<a
|
|
|
|
|
href={`${NEXUS_MODS_URL}/mods/categories/${data.category_id}`}
|
2022-02-07 03:00:14 +00:00
|
|
|
target="_blank"
|
|
|
|
|
rel="noreferrer noopener"
|
2022-01-25 05:31:25 +00:00
|
|
|
>
|
|
|
|
|
{data.category_name}
|
|
|
|
|
</a>
|
2022-03-16 04:37:08 +00:00
|
|
|
{data.is_translation && <strong> (translation)</strong>}
|
2022-01-25 05:31:25 +00:00
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<strong>Author: </strong>
|
|
|
|
|
<a
|
|
|
|
|
href={`${NEXUS_MODS_URL}/users/${data.author_id}`}
|
2022-02-07 03:00:14 +00:00
|
|
|
target="_blank"
|
|
|
|
|
rel="noreferrer noopener"
|
2022-01-25 05:31:25 +00:00
|
|
|
>
|
|
|
|
|
{data.author_name}
|
|
|
|
|
</a>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<strong>Uploaded:</strong>{" "}
|
|
|
|
|
{format(new Date(data.first_upload_at), "d MMM y")}
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<strong>Last Update:</strong>{" "}
|
|
|
|
|
{format(new Date(data.last_update_at), "d MMM y")}
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<strong>Total Downloads:</strong> {numberFmt.format(total_downloads)}
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<strong>Unique Downloads:</strong>{" "}
|
|
|
|
|
{numberFmt.format(unique_downloads)}
|
|
|
|
|
</div>
|
2022-03-15 01:55:52 +00:00
|
|
|
<CellList cells={data.cells} />
|
2022-01-25 05:31:25 +00:00
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
}
|
|
|
|
|
return null;
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
export default ModData;
|
