diff --git a/client/src/components/ui/Checkbox.tsx b/client/src/components/ui/Checkbox.tsx index 4c23590e..83c1a8b5 100644 --- a/client/src/components/ui/Checkbox.tsx +++ b/client/src/components/ui/Checkbox.tsx @@ -1,10 +1,10 @@ -import React from "react"; +import React, {ReactNode} from "react"; const Checkbox = ( props: React.DetailedHTMLProps< React.InputHTMLAttributes, HTMLInputElement - > & {label: string; helperText?: string} + > & {label: ReactNode; helperText?: string} ) => { const {label, ...otherProps} = props; return ( diff --git a/client/src/pages/Config/Ships/ShipMap/DeckConfig.tsx b/client/src/pages/Config/Ships/ShipMap/DeckConfig.tsx index b3bd53ff..7c08d3ff 100644 --- a/client/src/pages/Config/Ships/ShipMap/DeckConfig.tsx +++ b/client/src/pages/Config/Ships/ShipMap/DeckConfig.tsx @@ -28,6 +28,7 @@ export type updateNodeParams = | {isRoom: boolean} | {name: string} | {radius: number} + | {volume: number} | {flags: NodeFlag[]}; const pixelRatio = window.devicePixelRatio; diff --git a/client/src/pages/Config/Ships/ShipMap/NodeCircle.tsx b/client/src/pages/Config/Ships/ShipMap/NodeCircle.tsx index be8e6d50..c3529693 100644 --- a/client/src/pages/Config/Ships/ShipMap/NodeCircle.tsx +++ b/client/src/pages/Config/Ships/ShipMap/NodeCircle.tsx @@ -1,7 +1,7 @@ import {MutableRefObject, useEffect, useState} from "react"; import Button from "@thorium/ui/Button"; import {useConfirm} from "@thorium/ui/AlertDialog"; -import {DeckNode} from "server/src/classes/Plugins/Ship/Deck"; +import {DeckNode, nodeFlags} from "server/src/classes/Plugins/Ship/Deck"; import {useDrag} from "@use-gesture/react"; import {autoUpdate, offset, shift, useFloating} from "@floating-ui/react-dom"; import Input from "@thorium/ui/Input"; @@ -10,6 +10,8 @@ import {Portal} from "@headlessui/react"; import useOnClickOutside from "client/src/hooks/useClickOutside"; import {PanStateI, updateNodeParams} from "./DeckConfig"; import {useTriggerEdgeRender} from "./EdgeContextProvider"; +import {capitalCase} from "change-case"; +import InfoTip from "@thorium/ui/InfoTip"; const pixelRatio = window.devicePixelRatio; export function NodeCircle({ id, @@ -17,6 +19,8 @@ export function NodeCircle({ y, isRoom, radius, + volume, + flags, name, icon, selected, @@ -133,6 +137,25 @@ export function NodeCircle({ defaultChecked={isRoom} onChange={e => updateNode({isRoom: e.target.checked})} /> + {nodeFlags.map(flag => ( + + {capitalCase(flag)} + + + } + defaultChecked={flags.includes(flag)} + onChange={e => { + if (e.target.checked) { + updateNode({flags: [...flags, flag]}); + } else { + updateNode({flags: flags.filter(f => f !== flag)}); + } + }} + /> + ))} + {isRoom && flags.includes("cargo") && ( + updateNode({volume: Number(e.target.value)})} + /> + )}