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];
+}