Stylings / Restructuring
This commit is contained in:
@@ -1,8 +1,9 @@
|
||||
import '../styles/globals.css'
|
||||
import type { AppProps } from 'next/app'
|
||||
import {GroupProvider} from "../components/contexts/GroupProvider";
|
||||
import {FC} from "react";
|
||||
|
||||
function MyApp({ Component, pageProps }: AppProps) {
|
||||
const MyApp: FC<AppProps> = ({ Component, pageProps }) => {
|
||||
return <GroupProvider>
|
||||
<Component {...pageProps} />
|
||||
</GroupProvider>
|
||||
|
||||
17
pages/_document.tsx
Normal file
17
pages/_document.tsx
Normal file
@@ -0,0 +1,17 @@
|
||||
import {Html, Main, NextScript, DocumentProps, Head} from 'next/document';
|
||||
import {FC} from "react";
|
||||
|
||||
const MyDocument: FC<DocumentProps> = ({ __NEXT_DATA__ }) => {
|
||||
const pageProps: Record<string, unknown>|undefined = __NEXT_DATA__?.props?.pageProps;
|
||||
return (
|
||||
<Html>
|
||||
<Head />
|
||||
<body className={pageProps?.bodyClassName as string}>
|
||||
<Main />
|
||||
<NextScript />
|
||||
</body>
|
||||
</Html>
|
||||
);
|
||||
}
|
||||
|
||||
export default MyDocument
|
||||
@@ -1,17 +1,22 @@
|
||||
import type { NextPage } from 'next'
|
||||
import Head from 'next/head'
|
||||
import {Home} from "../components/home/Home";
|
||||
import {useEffect} from "react";
|
||||
|
||||
const Page: NextPage = () => {
|
||||
useEffect(() =>
|
||||
{
|
||||
document.body.classList.add("scroll");
|
||||
});
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Head>
|
||||
<title>Factorio Microservices</title>
|
||||
<meta name="description" content="Create Factorio microservices" />
|
||||
<link rel="icon" href="/favicon.ico" />
|
||||
</Head>
|
||||
<Home/>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
|
||||
@@ -2,12 +2,15 @@ import type { NextPage } from 'next'
|
||||
import Head from 'next/head'
|
||||
import {useGroups} from "../../components/contexts/GroupProvider";
|
||||
import {useFactories} from "../../src/hooks/useFactories";
|
||||
import {ProducingGraph, ProducingNode} from "../../components/shared/ProducingGraph";
|
||||
import {GraphNode, ProducingGraph} from "../../components/shared/ProducingGraph/ProducingGraph";
|
||||
import {useMemo} from "react";
|
||||
import {calculateInputs} from "../../src/calculateInputs";
|
||||
import {useRouter} from "next/router";
|
||||
import {isNonNullable} from "../../src/utils";
|
||||
import {EnrichedEntity} from "../../src/types";
|
||||
import {groupBy, isNonNullable} from "../../src/utils";
|
||||
import {EnrichedEntity, Recipe} from "../../src/types";
|
||||
import {DetailGraphNode, NodeDetails} from "../../components/visualize/NodeDetails/NodeDetails";
|
||||
|
||||
|
||||
|
||||
const Page: NextPage = () => {
|
||||
const {query: {name}} = useRouter()
|
||||
@@ -34,21 +37,29 @@ const Page: NextPage = () => {
|
||||
)
|
||||
}, [baseFactories, exportedFactories, findFactory, group, ignoredFactories])
|
||||
|
||||
const producingNodes: ProducingNode[] = useMemo(() => {
|
||||
const producingNodes: DetailGraphNode[] = useMemo(() => {
|
||||
if (!group) return []
|
||||
return Array.from(new Set([...intermediateFactories, ...group.exports, ...group.malls]))
|
||||
const nodes = Array.from(new Set([...intermediateFactories, ...group.exports, ...group.malls]))
|
||||
.map(findFactory)
|
||||
.filter(isNonNullable)
|
||||
.map((factory: EnrichedEntity) => ({
|
||||
inputs: Object.keys(factory.recipe?.prerequisites ?? {}).sort((a, b) => a.localeCompare(b)),
|
||||
outputs: Object.keys(factory.recipe?.output ?? {}).sort((a, b) => a.localeCompare(b)),
|
||||
name: factory.name,
|
||||
recipe: factory.recipe
|
||||
}))
|
||||
recipes: [factory.recipe]
|
||||
} as DetailGraphNode))
|
||||
return Object
|
||||
.values(groupBy(nodes, node => node.inputs.join()))
|
||||
.map(nodesOfInput => ({
|
||||
inputs: nodesOfInput[0].inputs,
|
||||
outputs: Array.from(new Set(nodesOfInput.flatMap(node => node.outputs))),
|
||||
name: nodesOfInput.map(node => node.name).join(', '),
|
||||
recipes: nodesOfInput.flatMap(node => node.recipes)
|
||||
} as DetailGraphNode))
|
||||
}, [findFactory, group, intermediateFactories])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Head>
|
||||
<title>Factorio Microservices</title>
|
||||
<meta name="description" content="Create Factorio microservices" />
|
||||
@@ -56,10 +67,19 @@ const Page: NextPage = () => {
|
||||
</Head>
|
||||
<main>
|
||||
<h1>Factorio Microservices</h1>
|
||||
<ProducingGraph nodes={producingNodes} inputs={inputFactories}></ProducingGraph>
|
||||
<ProducingGraph
|
||||
nodes={producingNodes}
|
||||
inputs={inputFactories}
|
||||
outputs={group?.exports}
|
||||
childType={NodeDetails}
|
||||
/>
|
||||
</main>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export async function getServerSideProps() {
|
||||
return { props: { bodyClassName: 'scroll' } };
|
||||
}
|
||||
|
||||
export default Page
|
||||
|
||||
@@ -2,9 +2,10 @@ import type { NextPage } from 'next'
|
||||
import Head from 'next/head'
|
||||
import {useGroups} from "../../components/contexts/GroupProvider";
|
||||
import {useFactories} from "../../src/hooks/useFactories";
|
||||
import {ProducingGraph, ProducingNode} from "../../components/shared/ProducingGraph";
|
||||
import {GraphNode, ProducingGraph} from "../../components/shared/ProducingGraph/ProducingGraph";
|
||||
import {useMemo} from "react";
|
||||
import {calculateInputs} from "../../src/calculateInputs";
|
||||
import {NodeOverview, OverviewGraphNode} from "../../components/visualize/NodeOverview/NodeOverview";
|
||||
|
||||
const Page: NextPage = () => {
|
||||
const {
|
||||
@@ -17,7 +18,7 @@ const Page: NextPage = () => {
|
||||
findFactory
|
||||
} = useFactories()
|
||||
|
||||
const producingNodes: ProducingNode[] = useMemo(() => {
|
||||
const producingNodes: OverviewGraphNode[] = useMemo(() => {
|
||||
return Object.values(groups).map(group => ({
|
||||
inputs: calculateInputs(
|
||||
[...group.exports, ...group.malls],
|
||||
@@ -34,7 +35,7 @@ const Page: NextPage = () => {
|
||||
}, [baseFactories, exportedFactories, findFactory, groups, ignoredFactories])
|
||||
|
||||
return (
|
||||
<div>
|
||||
<>
|
||||
<Head>
|
||||
<title>Factorio Microservices</title>
|
||||
<meta name="description" content="Create Factorio microservices" />
|
||||
@@ -42,12 +43,16 @@ const Page: NextPage = () => {
|
||||
</Head>
|
||||
<main>
|
||||
<h1>Factorio Microservices</h1>
|
||||
<ProducingGraph nodes={producingNodes} inputs={baseFactories}></ProducingGraph>
|
||||
<ProducingGraph nodes={producingNodes} inputs={baseFactories} childType={NodeOverview}></ProducingGraph>
|
||||
</main>
|
||||
</div>
|
||||
</>
|
||||
)
|
||||
}
|
||||
|
||||
export async function getStaticProps() {
|
||||
return { props: { bodyClassName: 'scroll' } };
|
||||
}
|
||||
|
||||
function fixedEncodeURIComponent(str: string): string {
|
||||
return encodeURIComponent(str).replace(/[!'()*]/g, c => '%' + c.charCodeAt(0).toString(16));
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user