WIP

SlimeVR · May 3, 2022 · 675c69a · 675c69a
1 parent fb3057b
commit 675c69a
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 6 deletions.
diff --git a/src-tauri/tauri.conf.json b/src-tauri/tauri.conf.json
@@ -54,7 +54,7 @@
         "height": 660,
         "resizable": true,
         "fullscreen": false,
-        "decorations": false,
+        "decorations": true,
         "transparent": true,
         "fileDropEnabled": false
       }

diff --git a/src/App.tsx b/src/App.tsx
@@ -8,7 +8,7 @@ import {
 import { Overview } from './components/Overview';
 import { BodyProportions } from './components/proportions/BodyProportions';
 import { AppContextProvider } from './components/providers/AppContext';
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect } from 'react';
 import { DataFeedConfigT, DataFeedMessage, DeviceDataMaskT, StartDataFeedT, TrackerDataMaskT } from 'solarxr-protocol';
 import { MainLayoutRoute } from './components/MainLayout';
 import { SettingsLayoutRoute } from './components/settings/SettingsLayout';
@@ -18,7 +18,6 @@ import { Serial } from './components/settings/pages/Serial';
 
 import { listen } from '@tauri-apps/api/event'
 import type { Event } from '@tauri-apps/api/event'
-import { Button } from './components/commons/Button';
 import { appWindow } from '@tauri-apps/api/window'
 
 function Layout() {
@@ -43,8 +42,9 @@ function Layout() {
 
     const startDataFeed = new StartDataFeedT()
     startDataFeed.dataFeeds = [config]
-    sendDataFeedPacket(DataFeedMessage.StartDataFeed, startDataFeed)
+    sendDataFeedPacket(DataFeedMessage.StartDataFeed, startDataFeed);
   }, [])
+
 
   return (
     <>

diff --git a/src/components/Modal.tsx b/src/components/Modal.tsx
@@ -8,8 +8,8 @@ export function AppModal({ children, name, ...props }: { children?: ReactChild,
     return (
         <ReactModal 
             {...props} 
-            overlayClassName="fixed top-0 right-0 left-0 bottom-0 flex bg-purple-gray-900 bg-opacity-60 justify-center items-center overflow-y-auto border-none" 
-            className="items-center w-full max-w-2xl h-full md:h-auto bg-purple-gray-700 relative rounded-lg shadow-lg border-none"
+            overlayClassName="fixed top-0 right-0 left-0 bottom-0 flex bg-purple-gray-900 bg-opacity-60 justify-center items-center overflow-y-auto border-none rounded-[15px]" 
+            className="items-center w-full max-w-2xl h-full md:h-auto bg-purple-gray-700 relative rounded-lg shadow-lg border-none "
         >
             <div className="flex justify-between items-start p-5 rounded-t border-b-2 border-primary-1">
                 <h3 className="text-extra-emphasised">

diff --git a/src/components/Overview.tsx b/src/components/Overview.tsx
@@ -14,12 +14,15 @@ export function Overview() {
 
     const { useDataFeedPacket } = useWebsocketAPI();
     const [list, setDevicesList] = useState<DeviceDataT[]>([]);
+    const [syntheticlist, setSyntheticTrackersList] = useState<TrackerDataT[]>([]);
 
     useDataFeedPacket(DataFeedMessage.DataFeedUpdate, (packet: DataFeedUpdateT) => {
         setDevicesList(packet.devices)
+        setSyntheticTrackersList(packet.syntheticTrackers)
     })
 
     const trackers = useMemo(() => list.reduce<FlatDeviceTracker[]>((curr, device) => ([...curr, ...device.trackers.map((tracker) => ({ tracker, device }))]), []), [list]);
+
     const asignedTrackers = useMemo(() => 
         trackers.filter(({ tracker: { info } }) => {
             return info && info.bodyPart !== BodyPart.NONE
@@ -40,6 +43,17 @@ export function Overview() {
             <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5 sm:grid-cols-1 px-8">
                 {asignedTrackers.map(({ tracker, device }, index) => <TrackerCard key={index} tracker={tracker} device={device}/>)}
             </div>
+            {syntheticlist.length > 0 &&
+                <>
+                    <div className="flex px-8 pt-8 text-secondary-heading">
+                        External Trackers
+                    </div>
+                    <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-5 sm:grid-cols-1 px-8">
+                        {syntheticlist.map((tracker, index) => <TrackerCard key={index} tracker={tracker} />)}
+                    </div>
+                </>
+
+            }
             {unasignedTrackers.length > 0 &&
                 <>
                     <div className="flex px-8 pt-8 text-secondary-heading">