Compare commits
3 Commits
main
...
gm-dash__s
Author | SHA1 | Date |
---|---|---|
Savanni D'Gerinel | 2697a728fb | |
Savanni D'Gerinel | 2836369b3b | |
Savanni D'Gerinel | c868e82877 |
|
@ -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 (
|
||||||
|
|
|
@ -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" },
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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);
|
|
||||||
}
|
|
|
@ -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;
|
|
|
@ -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;
|
||||||
}
|
}
|
||||||
|
|
|
@ -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;
|
||||||
|
|
|
@ -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);
|
||||||
|
}
|
|
@ -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>)
|
||||||
|
|
|
@ -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);
|
||||||
|
|
|
@ -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 />,
|
||||||
|
|
|
@ -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;
|
Loading…
Reference in New Issue