HEY HEY
diff --git a/src/ui/UI.tsx b/src/ui/UI.tsx
index 263580c..3ed0cff 100644
--- a/src/ui/UI.tsx
+++ b/src/ui/UI.tsx
@@ -1,16 +1,13 @@
import React from "react";
import { useSelector } from "react-redux";
import { GameStore } from "~store/state";
-import MapEditor, { MapEditorLayer } from "./MapEditor";
-
-export type UILayer = MapEditorLayer;
-
-export type LayerList = { id: string; data: UILayer; visible: boolean }[];
+import { UILayer, LayerList } from "~store/ui/state";
+import MapEditorUI from "./MapEditor";
function renderLayer(data: UILayer) {
switch (data.type) {
case "MapEditor":
- return
;
+ return
;
default:
throw new Error("unknown or invalid ui layer");
}
@@ -20,8 +17,10 @@ export default function UI() {
const layers = useSelector
((state) => state.ui.layers);
return (
- {layers.map(({ id, data }) => (
-
{renderLayer(data)}
+ {layers.map(({ id, data, visible }) => (
+
+ {renderLayer(data)}
+
))}
);
diff --git a/src/ui/utils/useLayer.ts b/src/ui/utils/useLayer.ts
index f7e9d61..8665879 100644
--- a/src/ui/utils/useLayer.ts
+++ b/src/ui/utils/useLayer.ts
@@ -1,12 +1,12 @@
import { useEffect, useState } from "react";
import { useDispatch } from "react-redux";
-import { UILayer } from "~ui/UI";
import { addLayer, removeLayer, showLayer, hideLayer } from "~store/ui/reducer";
+import { UILayer } from "~store/ui/state";
export default function useUILayer(data: UILayer, show: boolean) {
const dispatch = useDispatch();
- const id = data.type + "-" + Math.random().toString(32).slice(2);
+ const [id] = useState(data.type + "-" + Math.random().toString(32).slice(2));
const [visible, setVisible] = useState(show);
useEffect(() => {