29 lines
724 B
TypeScript
29 lines
724 B
TypeScript
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 }[];
|
|
|
|
function renderLayer(data: UILayer) {
|
|
switch (data.type) {
|
|
case "MapEditor":
|
|
return <MapEditor />;
|
|
default:
|
|
throw new Error("unknown or invalid ui layer");
|
|
}
|
|
}
|
|
|
|
export default function UI() {
|
|
const layers = useSelector<GameStore, LayerList>((state) => state.ui.layers);
|
|
return (
|
|
<div id="ui">
|
|
{layers.map(({ id, data }) => (
|
|
<div key={id}>{renderLayer(data)}</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|