diff --git a/apps/blueprints/src/components/CopyButtonDropdown.tsx b/apps/blueprints/src/components/CopyButtonDropdown.tsx index 87b90fd..650336f 100644 --- a/apps/blueprints/src/components/CopyButtonDropdown.tsx +++ b/apps/blueprints/src/components/CopyButtonDropdown.tsx @@ -14,7 +14,6 @@ const DropdownBox = styled(Box)` transform: translateY(100%); bottom: -0.5rem; right: 40px; - z-index: 3; `; export const CopyButtonDropdown: React.FC = (props) => { diff --git a/apps/blueprints/src/components/FullscreenImage.tsx b/apps/blueprints/src/components/FullscreenImage.tsx index 4deee4d..b5d26ba 100644 --- a/apps/blueprints/src/components/FullscreenImage.tsx +++ b/apps/blueprints/src/components/FullscreenImage.tsx @@ -1,6 +1,24 @@ import React, { useState } from "react"; import { css } from "@emotion/react"; import { MapInteractionCSS } from "react-map-interaction"; +import { Image } from "@chakra-ui/image"; +import styled from "@emotion/styled"; +import { Box } from "@chakra-ui/react"; + +const StyledImage = styled(Box)` + display: flex; + justify-content: center; + + img { + max-width: 100%; + max-height: 500px; + object-fit: contain; + } + + img:hover { + cursor: pointer; + } +`; const elementStyle = css` display: flex; @@ -12,6 +30,8 @@ const elementStyle = css` padding: 0px; background: rgba(0, 0, 0, 0.5); justify-content: center; + z-index: 1; + & > div > div { display: flex; justify-content: center; @@ -21,34 +41,50 @@ const elementStyle = css` interface FullscreenImageProps { alt: string; src: string; - close: () => void; + close?: () => void; } -export const FullscreenImage: React.FC = ({ alt, src, close }) => { +export const FullscreenImage: React.FC = ({ alt, src }) => { + const [open, setOpen] = useState(false); const [state, setState] = useState({ scale: 0.9, translation: { x: window.innerWidth * 0.05, y: 30 }, }); + console.log(src); return ( -
{ - // eslint-disable-next-line @typescript-eslint/no-explicit-any - if ((e as any).target.nodeName.toUpperCase() !== "IMG") { - close(); - } - }} - onTouchEnd={(e) => { - // eslint-disable-next-line @typescript-eslint/no-explicit-any - if ((e as any).target.nodeName.toUpperCase() !== "IMG") { - close(); - } - }} - > - - {alt} - -
+ <> + + {alt} setOpen(true)} + /> + + {open && ( +
{ + // eslint-disable-next-line @typescript-eslint/no-explicit-any + if ((e as any).target.nodeName.toUpperCase() !== "IMG") { + setOpen(false); + } + }} + onTouchEnd={(e) => { + // eslint-disable-next-line @typescript-eslint/no-explicit-any + if ((e as any).target.nodeName.toUpperCase() !== "IMG") { + setOpen(false); + } + }} + > + + {alt} + +
+ )} + ); }; diff --git a/apps/blueprints/src/components/blueprint/Blueprint.tsx b/apps/blueprints/src/components/blueprint/Blueprint.tsx index 4e1694b..e641e1b 100644 --- a/apps/blueprints/src/components/blueprint/Blueprint.tsx +++ b/apps/blueprints/src/components/blueprint/Blueprint.tsx @@ -13,6 +13,9 @@ import { BlueprintData } from "./BlueprintData"; import { BlueprintInfo } from "./BlueprintInfo"; import { BlueprintTags } from "./BlueprintTags"; import { BlueprintEntities } from "./BlueprintEntities"; +import { useCookies } from "react-cookie"; +import { FullscreenImage } from "../FullscreenImage"; +import { isMobileBrowser } from "../../utils/navigator.utils"; const StyledBlueptintPage = styled(Grid)` grid-gap: 16px; @@ -55,6 +58,8 @@ export const BlueprintSubPage: React.FC = ({ const url = useUrl(); const [string, setString] = useState(null); const [data, setData] = useState(null); + const [cookies] = useCookies(); + const isFbeRenderer = cookies.renderer !== "fbsr" && !isMobileBrowser(); useEffect(() => { fetch(`/api/string/${blueprint.blueprint_hash}`) @@ -79,11 +84,13 @@ export const BlueprintSubPage: React.FC = ({ title={ <> Image - Factorio blueprint editor + {isFbeRenderer && ( + Factorio blueprint editor + )} {string && ( = ({ } > - {string && } + {string && + (isFbeRenderer ? ( + + ) : ( + + ))} = ({ null ); const [selectedData, setSelectedData] = useState(null); + const [cookies] = useCookies(); + const isFbeRenderer = cookies.renderer !== "fbsr" && !isMobileBrowser(); const selectedHash = selected.data.blueprint_hash; const showEntities = selected.type === "blueprint" && selectedData?.blueprint; @@ -158,11 +163,13 @@ export const BlueprintBookSubPage: React.FC = ({ title={ <> Image - Factorio blueprint editor + {isFbeRenderer && ( + Factorio blueprint editor + )} {selectedBlueprintString && ( = ({ } > - {selectedBlueprintString && } + {selectedBlueprintString && + (isFbeRenderer ? ( + + ) : ( + + ))} + + {/* {selectedBlueprintString && } */} ', + '
', }); Router.events.on("routeChangeStart", () => NProgress.start()); Router.events.on("routeChangeComplete", () => NProgress.done()); @@ -75,24 +76,26 @@ const BlueprintsApp = ({ return ( - - - - Factorio Blueprints - - - - {!auth.loading && ( - <> -
-
-
- -
-
- - )} - + + + + + Factorio Blueprints + + + + {!auth.loading && ( + <> +
+
+
+ +
+
+ + )} + + ); }; diff --git a/apps/blueprints/src/pages/user/edit.tsx b/apps/blueprints/src/pages/user/edit.tsx index 7b168be..963954f 100644 --- a/apps/blueprints/src/pages/user/edit.tsx +++ b/apps/blueprints/src/pages/user/edit.tsx @@ -1,9 +1,20 @@ import React from "react"; import { NextPage } from "next"; import { useRouter } from "next/router"; -import { FormControl, FormLabel, FormErrorMessage, Input, SimpleGrid } from "@chakra-ui/react"; +import { + FormControl, + FormLabel, + FormErrorMessage, + Input, + SimpleGrid, + Radio, + Stack, + RadioGroup, +} from "@chakra-ui/react"; import { Formik, Field, FieldProps } from "formik"; +import { addYears } from "date-fns"; import { css } from "@emotion/react"; +import { useCookies } from "react-cookie"; import { Panel } from "../../components/Panel"; import { Button } from "../../components/Button"; import { validateUserForm } from "../../utils/validate"; @@ -17,6 +28,7 @@ const FieldStyle = css` export const UserEdit: NextPage = () => { const auth = useAuth(); const router = useRouter(); + const [cookies, setCookie] = useCookies(["renderer"]); return ( @@ -72,6 +84,34 @@ export const UserEdit: NextPage = () => { )} + + {({ field, meta }: FieldProps) => ( + + Image renderer + + setCookie("renderer", value, { + path: "/", + expires: addYears(new Date(), 1), + }) + } + value={cookies.renderer || "fbe"} + > + + FBE + FBSR + + + {meta.error} + + )} + +