show args control

Author: jackTabsCode

src/app/actionSelection.tsx

@@ -1,6 +1,6 @@
 import inspect from "@rbxts/inspect"
 import Roact, { memo, useMemo } from "@rbxts/roact"
-import { useRootProducer } from "store"
+import { useRootProducer, useRootSelector } from "store"
 import { Action } from "store/game"
 
 interface Props {
@@ -12,6 +12,8 @@ interface Props {
 export const ActionSelection = memo((props: Props) => {
 	const store = useRootProducer()
 
+	const showArgs = useRootSelector(state => state.widget.showArgs)
+
 	const inspectedArgs = useMemo(() => inspect(props.action.args), [props.action])
 
 	const formattedTimestamp = DateTime.fromUnixTimestampMillis(props.action.timestamp).FormatLocalTime(
@@ -67,6 +69,7 @@ export const ActionSelection = memo((props: Props) => {
 					TextSize={16}
 					TextWrapped
 					TextXAlignment={Enum.TextXAlignment.Left}
+					Visible={showArgs}
 					key="args"
 				/>
 			)}

src/app/index.tsx

@@ -17,6 +17,7 @@ export function App() {
 	const actions = useRootSelector(state => state.game.actions)
 	const selectedIndex = useRootSelector(state => state.widget.selectedIndex)
 	const autoSelectLatest = useRootSelector(state => state.widget.autoSelectLatest)
+	const showArgs = useRootSelector(state => state.widget.showArgs)
 
 	const selectedAction = selectedIndex !== undefined ? actions[selectedIndex] : undefined
 
@@ -55,6 +56,11 @@ export function App() {
 				/>
 				<RowText order={4} text={`Selection Mode: ${autoSelectLatest ? "Auto" : "Manual"}`} />
 
+				<RowText order={3} text="•" />
+
+				<RowButton key="showargs" onClick={() => store.changeShowArgs(!showArgs)} order={5} text="Toggle" />
+				<RowText order={6} text={`Show Args: ${showArgs ? "Yes" : "No"}`} />
+
 				<uilistlayout
 					FillDirection={Enum.FillDirection.Horizontal}
 					HorizontalAlignment={Enum.HorizontalAlignment.Left}

src/store/widget.ts

@@ -6,11 +6,13 @@ export interface Widget {
 	open: boolean
 	selectedIndex?: number
 	autoSelectLatest: boolean
+	showArgs: boolean
 }
 
 const initialState: Widget = {
 	open: false,
-	autoSelectLatest: true
+	autoSelectLatest: true,
+	showArgs: true
 }
 
 export const widget = createProducer(initialState, {
@@ -26,5 +28,9 @@ export const widget = createProducer(initialState, {
 	changeAutoSelectMode: (state, mode: boolean) => ({
 		...state,
 		autoSelectLatest: mode
+	}),
+	changeShowArgs: (state, show: boolean) => ({
+		...state,
+		showArgs: show
 	})
 })