Compare commits

...

3 Commits

13 changed files with 104 additions and 85 deletions

View File

@ -1,10 +1,9 @@
import './Dashboard.css'; import './Dashboard.css';
import Card from './components/Card/Card';
import Launcher from './components/Launcher/Launcher';
import Launchpad from './components/Launchpad/Launchpad'; import Launchpad from './components/Launchpad/Launchpad';
const LightThemes = () => <Card name="Light Themes"> const LightThemes = () =>
<Launchpad <Launchpad
title="Lights"
exclusive={true} exclusive={true}
options={[ options={[
{ title: "Dark reds" }, { title: "Dark reds" },
@ -13,18 +12,10 @@ const LightThemes = () => <Card name="Light Themes">
{ title: "Darkness" }, { title: "Darkness" },
]} ]}
/> />
</Card>
const LightSetup = () => <div> </div> const Tracks = () =>
interface LightProps {
name: string,
}
const Light = ({ name }: LightProps) => <div> <p> {name} </p> </div>
const Tracks = () => <Card name="Tracks">
<Launchpad <Launchpad
title="Tracks"
exclusive={false} exclusive={false}
options={[ options={[
{ title: "City BGM" }, { title: "City BGM" },
@ -33,15 +24,11 @@ const Tracks = () => <Card name="Tracks">
{ title: "Water dripping" }, { title: "Water dripping" },
]} ]}
/> />
</Card>
interface TrackProps { const Presets = () =>
name: string,
}
const Track = ({ name }: TrackProps) => <Launcher title={name} />
const Presets = () => <Card name="Presets">
<Launchpad <Launchpad
title="Presets"
orientation="vertical"
exclusive={true} exclusive={true}
options={[ options={[
{ title: "Gilcrest Falls day" }, { title: "Gilcrest Falls day" },
@ -50,15 +37,6 @@ const Presets = () => <Card name="Presets">
{ title: "Surk colony" }, { title: "Surk colony" },
]} ]}
/> />
</Card>
interface PresetProps {
name: string
}
// const Scene = ({ name }: PresetProps) => <Launcher title={name} activated={false} />
const SceneEditor = () => <div> </div>
const Dashboard = () => { const Dashboard = () => {
return ( return (

View File

@ -37,7 +37,7 @@ const Launchpads = () => <div className="design_horizontal">
<Launchpad <Launchpad
exclusive={false} exclusive={false}
flow={"vertical"} orientation={"vertical"}
options={[ options={[
{ title: "Grey" }, { title: "Grey" },
{ title: "Purple" }, { title: "Purple" },

View File

@ -2,12 +2,12 @@ import { PropsWithChildren } from 'react';
import './Card.css'; import './Card.css';
interface CardProps { interface CardProps {
name: string, title: string,
} }
const Card = ({ name, children }: PropsWithChildren<CardProps>) => ( const Card = ({ title, children }: PropsWithChildren<CardProps>) => (
<div className="card"> <div className="card">
<h1 className="card__title"> {name} </h1> <h1 className="card__title"> {title} </h1>
<div className="card__body"> <div className="card__body">
{children} {children}
</div> </div>

View File

@ -1,11 +0,0 @@
.activator {
border: 1px solid black;
border-radius: 5px;
margin: var(--spacer-m);
padding: var(--spacer-s);
box-shadow: var(--shadow-deep);
}
.activator_enabled {
box-shadow: var(--activator-ring);
}

View File

@ -1,20 +0,0 @@
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;

View File

@ -1,17 +1,23 @@
.launchpad { .launchpad {
display: flex;
border: var(--border); border: var(--border);
border-radius: var(--border-radius); border-radius: var(--border-radius);
box-shadow: var(--shadow-depression); box-shadow: var(--shadow-depression);
margin: var(--spacer-l); margin: var(--spacer-l);
} }
.launchpad_horizontal-flow { .launchpad__title {
color: var(--label-color);
font-variant-caps: all-small-caps;
font-size: medium;
margin: var(--spacer-m);
}
.launchpad_horizontal-orientation {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
} }
.launchpad_vertical-flow { .launchpad_vertical-orientation {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
} }

View File

@ -1,18 +1,18 @@
import React from 'react'; import React from 'react';
import './Launchpad.css'; import './Launchpad.css';
import Launcher, { LauncherProps } from '../Launcher/Launcher'; import { LaunchpadButton, LaunchpadButtonProps, EditPadButton } from '../LaunchpadButton/types';
import classnames from 'classnames';
export interface Selectable { export interface Selectable {
onSelected?: (key: string) => void; onSelected?: (key: string) => void;
} }
export type Flow = "horizontal" | "vertical"; export type Orientation = "horizontal" | "vertical";
interface LaunchpadProps { interface LaunchpadProps {
title?: string;
exclusive: boolean; exclusive: boolean;
flow?: Flow; orientation?: Orientation;
options: Array<LauncherProps>; options: Array<LaunchpadButtonProps>;
} }
const exclusiveSelect = (state: { [key: string]: boolean }, targetId: string) => { const exclusiveSelect = (state: { [key: string]: boolean }, targetId: string) => {
@ -28,22 +28,20 @@ const multiSelect = (state: { [key: string]: boolean }, targetId: string) => {
} }
} }
const Launchpad = ({ flow = "horizontal", options, exclusive }: LaunchpadProps) => { const Launchpad = ({ title, orientation = "horizontal", options, exclusive }: LaunchpadProps) => {
const [selected, dispatch] = React.useReducer(exclusive ? exclusiveSelect : multiSelect, {}); const [selected, dispatch] = React.useReducer(exclusive ? exclusiveSelect : multiSelect, {});
let classOptions = [ "launchpad" ];
if (flow === "horizontal") {
classOptions.push("launchpad_horizontal-flow");
} else {
classOptions.push("launchpad_vertical-flow");
}
let tiedOptions = options.map(option => let tiedOptions = options.map(option =>
<Launcher key={option.title} title={option.title} onSelected={(key: string) => dispatch(key)} activated={selected[option.title]} /> <LaunchpadButton key={option.title} title={option.title} onSelected={(key: string) => dispatch(key)} activated={selected[option.title]} />
); );
return (<div className={classnames(classOptions)}> {tiedOptions} </div>) return (<div className="launchpad">
{title && <h1 className="launchpad__title"> {title} </h1>}
<div className={orientation === "horizontal" ? "launchpad_horizontal-orientation" : "launchpad_vertical-orientation"}>
{tiedOptions}
<EditPadButton text="Add" />
</div>
</div>)
} }
export default Launchpad; export default Launchpad;

View File

@ -0,0 +1,18 @@
.launchpad-button {
border: 1px solid black;
border-radius: var(--border-radius);
margin: var(--spacer-m);
padding: var(--spacer-s);
box-shadow: var(--shadow-deep);
}
.launchpad-button_enabled {
box-shadow: var(--activator-ring);
}
.edit-pad-button {
border: var(--border-faint);
border-radius: var(--border-radius);
margin: var(--spacer-m);
padding: var(--spacer-s);
}

View File

@ -0,0 +1,28 @@
import './styles.css';
import React from 'react';
export interface LaunchpadButtonProps {
title: string,
icon?: string,
activated?: boolean,
onSelected?: (key: string) => void,
}
export const LaunchpadButton = ({ title, activated = false, onSelected = (key) => { } }: LaunchpadButtonProps) => {
const classnames = activated ? "launchpad-button launchpad-button_enabled" : "launchpad-button";
return (
<div className={classnames} onClick={() => onSelected(title)}>
<p> {title} </p>
</div>)
}
export interface EditPadButtonProps {
text: string,
onSelected?: () => void,
}
export const EditPadButton = ({ text, onSelected = () => { } }: EditPadButtonProps) => (
<div className="edit-pad-button" onClick={() => onSelected()}>
<p> {text} </p>
</div>)

View File

@ -13,13 +13,15 @@
--grey-1: hsl(210, 0%, 25%); --grey-1: hsl(210, 0%, 25%);
--grey-2: hsl(210, 0%, 40%); --grey-2: hsl(210, 0%, 40%);
--grey-3: hsl(210, 0%, 55%); --grey-3: hsl(210, 0%, 50%);
--grey-4: hsl(210, 0%, 70%); --grey-4: hsl(210, 0%, 70%);
--grey-5: hsl(210, 0%, 85%); --grey-5: hsl(210, 0%, 85%);
--title-color: var(--grey-1); --title-color: var(--grey-1);
--label-color: var(--grey-3);
--border: 1px solid var(--purple-1); --border: 1px solid var(--purple-1);
--border-faint: 1px solid var(--grey-4);
--activator-ring: 0px 0px 8px 4px var(--blue-4); --activator-ring: 0px 0px 8px 4px var(--blue-4);
--shadow-depression: inset 1px 1px 2px 0px var(--purple-1); --shadow-depression: inset 1px 1px 2px 0px var(--purple-1);
--shadow-shallow: 1px 1px 2px 0px var(--purple-1); --shadow-shallow: 1px 1px 2px 0px var(--purple-1);

View File

@ -1,7 +1,8 @@
import './index.css';
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom/client'; import ReactDOM from 'react-dom/client';
import './index.css';
import Dashboard from './Dashboard'; import Dashboard from './Dashboard';
import Setup from './pages/Setup';
import Design from './Design'; import Design from './Design';
import reportWebVitals from './reportWebVitals'; import reportWebVitals from './reportWebVitals';
import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import { createBrowserRouter, RouterProvider } from 'react-router-dom';
@ -14,6 +15,10 @@ const router = createBrowserRouter([
path: "/", path: "/",
element: <Dashboard />, element: <Dashboard />,
}, },
{
path: "/setup",
element: <Setup />,
},
{ {
path: "/design", path: "/design",
element: <Design />, element: <Design />,

View File

View File

@ -0,0 +1,15 @@
import './Setup.css'
import Card from '../components/Card/Card';
const Setup = () => (<div>
<h1> Setup </h1>
<Card title="Scenes" />
<Card title="Lights">
<p> Connect to nearby light systems </p>
</Card>
<Card title="Sounds">
</Card>
</div>)
export default Setup;