Files
desktop/src/App.tsx

76 lines
2.4 KiB
TypeScript

import { useCallback, useState } from 'react';
import tw from 'twin.macro';
import { invoke } from '@tauri-apps/api/tauri';
import './App.css';
import { Configurator } from './configurator/configurator';
import { ButtonSwitch } from './commons/components/button';
import { fillParentCss } from './styles/fill-parent';
type Mode = 'Flowing' | 'Follow' | null;
localStorage.setItem('debug', '*');
function App() {
const [screenshots, setScreenshots] = useState<string[]>([]);
const [ledStripColors, setLedStripColors] = useState<string[]>([]);
const [currentMode, setCurrentMode] = useState<Mode>(null);
async function takeSnapshot() {
const base64TextList: string[] = await invoke('take_snapshot');
setScreenshots(base64TextList.map((text) => `data:image/webp;base64,${text}`));
}
const getLedStripColors = useCallback(async () => {
setLedStripColors(await invoke('get_led_strip_colors'));
}, []);
const switchCurrentMode = useCallback(
async (targetMode: Mode) => {
console.log(targetMode, currentMode, currentMode === targetMode);
if (currentMode === targetMode) {
await invoke('play_mode', { targetMode: 'None' });
setCurrentMode(null);
} else {
await invoke('play_mode', { targetMode });
setCurrentMode(targetMode);
}
console.log(targetMode, currentMode, currentMode === targetMode);
},
[currentMode, setCurrentMode],
);
return (
<div css={[fillParentCss]} tw="box-border flex flex-col">
<div tw="flex justify-between">
{ledStripColors.map((it) => (
<span tw="h-8 flex-auto" style={{ backgroundColor: it }}></span>
))}
</div>
<div tw="flex gap-1 justify-center w-screen overflow-hidden">
{screenshots.map((screenshot) => (
<div tw="flex-auto">
<img src={screenshot} />
</div>
))}
</div>
<div tw="flex gap-5 justify-center">
<ButtonSwitch onClick={() => takeSnapshot()}>Take Snapshot</ButtonSwitch>
<ButtonSwitch onClick={() => getLedStripColors()}>Get Colors</ButtonSwitch>
<ButtonSwitch onClick={() => switchCurrentMode('Flowing')}>
Flowing Light
</ButtonSwitch>
<ButtonSwitch onClick={() => switchCurrentMode('Follow')}>Follow</ButtonSwitch>
</div>
<div css={[fillParentCss]}>
<Configurator />
</div>
</div>
);
}
export default App;