diff --git a/src/10th/Roster.jsx b/src/10th/Roster.jsx index 6a09f07..ef14e09 100644 --- a/src/10th/Roster.jsx +++ b/src/10th/Roster.jsx @@ -4,6 +4,7 @@ import adeptusAstartesIcon from "../assets/adeptusAstartesIcon.png"; import rangedIcon from "../assets/rangedIcon.png"; import { Arrow, wavyLine } from "../assets/icons"; import { Weapons, hasDifferentProfiles } from "./Weapons"; +import { useLocalStorage } from "../helpers/useLocalStorage"; export const Roster = ({ roster, onePerPage }) => { if (!roster) { @@ -64,7 +65,6 @@ const Force = ({ force, onePerPage }) => { const Unit = ({ unit, index, catalog, onePerPage, forceRules }) => { const [hide, setHide] = useState(false); const uploadRef = useRef(); - const [image, setImage] = useState(null); let { name, meleeWeapons, @@ -77,6 +77,8 @@ const Unit = ({ unit, index, catalog, onePerPage, forceRules }) => { modelList, cost, } = unit; + const [image, setImage] = useLocalStorage("image" + name); + const hasImage = image && image !== "undefined"; const weapons = [...meleeWeapons, ...rangedWeapons]; @@ -156,7 +158,7 @@ const Unit = ({ unit, index, catalog, onePerPage, forceRules }) => { : "", }} > -
{ justifyContent: "flex-end", }} > - -
+ setHide(!hide)} /> + Don't print this card. +
{ top: 0, height: "100%", bottom: 0, - width: "50%", + width: "45%", }} > - {image && ( + {hasImage && ( { style={{ position: "absolute", border: "1px solid #999", - top: 1, + top: 2, right: 1, padding: "1px 4px", fontSize: "0.8rem", @@ -316,8 +316,27 @@ const Unit = ({ unit, index, catalog, onePerPage, forceRules }) => { display: "none", }} /> - Upload image + {hasImage ? "Change image" : "Upload image "} + {hasImage && ( + + )}
{ + const value = localStorage.getItem(key); + if (value) { + return value; + } + + if (initValue) { + localStorage.setItem(key, initValue); + window.dispatchEvent(new Event("storage")); + } + return initValue; + }); + + useEffect(() => { + console.log(state); + if (!state || state === "undefined") { + localStorage.removeItem(key); + } else { + localStorage.setItem(key, state); + } + window.dispatchEvent(new Event("storage")); + }, [key, state]); + + useEffect(() => { + const listenStorageChange = () => { + setState(() => { + const value = localStorage.getItem(key); + if (value) { + return value; + } + + if (initValue) { + localStorage.setItem(key, initValue); + window.dispatchEvent(new Event("storage")); + } + return initValue; + }); + }; + window.addEventListener("storage", listenStorageChange); + return () => window.removeEventListener("storage", listenStorageChange); + }, []); + + return [state, setState]; +}