Rename Launcher components

gm-dash/ui/src/App.tsx

@@ -1,12 +1,18 @@
 import './App.css';
 import Card from './components/Card/Card';
-import Activator from './components/Activator/Activator';
+import Launcher from './components/Launcher/Launcher';
+import LauncherGroup from './components/LauncherGroup/LauncherGroup';
 
 const LightThemes = () => <Card name="Light Themes">
-    <Activator title="Dark reds" activated={false} />
-    <Activator title="Watery" activated={false} />
-    <Activator title="Sunset" activated={false} />
-    <Activator title="Darkness" activated={true} />
+    <LauncherGroup
+        exclusive={true}
+        options={[
+            { title: "Dark reds" },
+            { title: "Watery" },
+            { title: "Sunset" },
+            { title: "Darkness" },
+        ]}
+    />
 </Card>
 
 const LightSetup = () => <div> </div>
@@ -18,29 +24,39 @@ interface LightProps {
 const Light = ({ name }: LightProps) => <div> <p> {name} </p> </div>
 
 const Tracks = () => <Card name="Tracks">
-    <Track name="City BGM" />
-    <Track name="Chat on the streets" />
-    <Track name="Abandoned structure" />
-    <Track name="Water dripping" />
+    <LauncherGroup
+        exclusive={false}
+        options={[
+            { title: "City BGM" },
+            { title: "Chat on the streets" },
+            { title: "Abandoned structure" },
+            { title: "Water dripping" },
+        ]}
+    />
 </Card>
 
 interface TrackProps {
     name: string,
 }
-const Track = ({ name }: TrackProps) => <Activator title={name} activated={false} />
+const Track = ({ name }: TrackProps) => <Launcher title={name} />
 
 const Presets = () => <Card name="Presets">
-    <Scene name="Gilcrest Falls day" />
-    <Scene name="Gilcrest Falls night" />
-    <Scene name="Empty colony" />
-    <Scene name="Surk colony" />
+    <LauncherGroup
+        exclusive={true}
+        options={[
+            { title: "Gilcrest Falls day" },
+            { title: "Gilcrest Falls night" },
+            { title: "Empty colony" },
+            { title: "Surk colony" },
+        ]}
+    />
 </Card>
 
 interface PresetProps {
     name: string
 }
 
-const Scene = ({ name }: PresetProps) => <Activator title={name} activated={false} />
+// const Scene = ({ name }: PresetProps) => <Launcher title={name} activated={false} />
 
 const SceneEditor = () => <div> </div>
 

gm-dash/ui/src/components/Activator/Activator.tsx

@@ -1,18 +0,0 @@
-import './Activator.css';
-import { PropsWithChildren } from 'react';
-
-interface ActivatorProps {
-    title: string,
-    icon?: string,
-    activated: boolean,
-}
-
-const Activator = ({ title, icon, activated, children }: PropsWithChildren<ActivatorProps>) => {
-    const classnames = activated ? "activator activator_enabled" : "activator";
-    return (
-        <div className={classnames}>
-            <p> {title} </p>
-        </div>)
-}
-
-export default Activator;

gm-dash/ui/src/components/Card/Card.css

@@ -11,6 +11,5 @@
 }
 
 .card__body {
-    display: flex;
 }
 

gm-dash/ui/src/components/Launcher/Launcher.tsx

@@ -0,0 +1,20 @@
+import './Launcher.css';
+import React from 'react';
+
+export interface LauncherProps {
+    title: string,
+    icon?: string,
+    activated?: boolean,
+    onSelected?: (key: string) => void,
+}
+
+const Launcher = ({ title, activated = false, onSelected = (key) => {} }: LauncherProps) => {
+    const classnames = activated ? "activator activator_enabled" : "activator";
+    console.log("classnames ", activated, classnames);
+    return (
+        <div className={classnames} onClick={() => onSelected(title)}>
+            <p> {title} </p>
+        </div>)
+}
+
+export default Launcher;

gm-dash/ui/src/components/LauncherGroup/LauncherGroup.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Launcher, { LauncherProps } from '../Launcher/Launcher';
+
+export interface Selectable {
+    onSelected?: (key: string) => void;
+}
+
+interface LauncherGroupProps {
+    options: Array<LauncherProps>;
+    exclusive: boolean;
+}
+
+const exclusiveSelect = (state: { [key: string]: boolean }, targetId: string) => {
+    console.log("running exclusiveSelect on ", targetId);
+    return { [targetId]: true };
+}
+
+const multiSelect = (state: { [key: string]: boolean }, targetId: string) => {
+    if (state[targetId]) {
+        return { ...state, [targetId]: false };
+    } else {
+        return { ...state, [targetId]: true };
+    }
+}
+
+const LauncherGroup = ({ options, exclusive }: LauncherGroupProps) => {
+    const [selected, dispatch] = React.useReducer(exclusive ? exclusiveSelect : multiSelect, {});
+
+    let tiedOptions = options.map(option =>
+        <Launcher key={option.title} title={option.title} onSelected={(key: string) => dispatch(key)} activated={selected[option.title]} />
+    );
+
+    return (<div> {tiedOptions} </div>)
+}
+
+export default LauncherGroup;