28 lines
733 B
TypeScript
28 lines
733 B
TypeScript
import React from "react";
|
|
import { useSelector } from "react-redux";
|
|
import { GameStore } from "../store/state";
|
|
import { UILayer, LayerList } from "../store/ui/state";
|
|
import LoadingScreenUI from "./Loading";
|
|
|
|
function renderLayer(data: UILayer) {
|
|
switch (data.type) {
|
|
case "LoadingScreen":
|
|
return <LoadingScreenUI />;
|
|
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, visible }) => (
|
|
<div key={id} style={{ display: visible ? "" : "none" }}>
|
|
{renderLayer(data)}
|
|
</div>
|
|
))}
|
|
</div>
|
|
);
|
|
}
|