thi-sjsu-project/theia
0
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

refactor. add comment

Browse Source
This commit is contained in:
bedlam343 2024-05-12 20:34:16 -07:00
parent f730ee3ff6
commit aad8680a54
1 changed files with 61 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

120
src/pages/Minimap.tsx
View File

@ -9,6 +9,57 @@ import background from 'src/assets/minimap-bg.jpg';
import ACA from 'src/components/Widget/ACA'; import ACA from 'src/components/Widget/ACA';
import ACAHeader from 'src/components/Element/ACAHeader'; import ACAHeader from 'src/components/Element/ACAHeader';
const data: {
title: string;
ammoLeft: ('Used' | 'Unused')[];
ammoRight: ('Used' | 'Unused')[];
fuelAmount: number;
circleColor: 'blue' | 'yellow';
}[] = [
{
title: 'ACA-1',
ammoLeft: ['Unused', 'Unused', 'Unused', 'Used'],
ammoRight: ['Unused', 'Used', 'Used', 'Used'],
fuelAmount: 70,
circleColor: 'blue',
},
{
title: 'ACA-2',
ammoLeft: ['Unused', 'Used', 'Used', 'Used'],
ammoRight: ['Unused', 'Unused', 'Used', 'Used'],
fuelAmount: 15,
circleColor: 'yellow',
},
{
title: 'ACA-3',
ammoLeft: ['Unused', 'Unused', 'Used', 'Used'],
ammoRight: ['Unused', 'Used', 'Used', 'Used'],
fuelAmount: 40,
circleColor: 'blue',
},
{
title: 'ACA-4',
ammoLeft: ['Unused', 'Used', 'Used', 'Used'],
ammoRight: ['Unused', 'Unused', 'Used', 'Used'],
fuelAmount: 90,
circleColor: 'yellow',
},
{
title: 'ACA-5',
ammoLeft: ['Unused', 'Unused', 'Used', 'Used'],
ammoRight: ['Unused', 'Used', 'Used', 'Used'],
fuelAmount: 20,
circleColor: 'blue',
},
{
title: 'ACA-6',
ammoLeft: ['Unused', 'Used', 'Used', 'Used'],
ammoRight: ['Unused', 'Unused', 'Used', 'Used'],
fuelAmount: 10,
circleColor: 'yellow',
},
];
const Minimap = () => { const Minimap = () => {
const widgets = useAppSelector((state) => const widgets = useAppSelector((state) =>
getWidgetsOnScreen(state, '/minimap'), getWidgetsOnScreen(state, '/minimap'),
@ -24,67 +75,18 @@ const Minimap = () => {
console.log('elementsInGaze: ', elementsInGaze); console.log('elementsInGaze: ', elementsInGaze);
}, [elementsInGaze]); }, [elementsInGaze]);
const data: { title: string; ammoLeft: ('Used' | 'Unused')[], ammoRight: ('Used' | 'Unused')[], fuelAmount: number, circleColor: 'blue' | 'yellow' }[] = [
{
title: "ACA-1",
ammoLeft: ['Unused', 'Unused', 'Unused', 'Used'],
ammoRight: ['Unused', 'Used', 'Used', 'Used'],
fuelAmount: 70,
circleColor: 'blue'
},
{
title: "ACA-2",
ammoLeft: ['Unused', 'Used', 'Used', 'Used'],
ammoRight: ['Unused', 'Unused', 'Used', 'Used'],
fuelAmount: 15,
circleColor: 'yellow'
},
{
title: "ACA-3",
ammoLeft: ['Unused', 'Unused', 'Used', 'Used'],
ammoRight: ['Unused', 'Used', 'Used', 'Used'],
fuelAmount: 40,
circleColor: 'blue'
},
{
title: "ACA-4",
ammoLeft: ['Unused', 'Used', 'Used', 'Used'],
ammoRight: ['Unused', 'Unused', 'Used', 'Used'],
fuelAmount: 90,
circleColor: 'yellow'
},
{
title: "ACA-5",
ammoLeft: ['Unused', 'Unused', 'Used', 'Used'],
ammoRight: ['Unused', 'Used', 'Used', 'Used'],
fuelAmount: 20,
circleColor: 'blue'
},
{
title: "ACA-6",
ammoLeft: ['Unused', 'Used', 'Used', 'Used'],
ammoRight: ['Unused', 'Unused', 'Used', 'Used'],
fuelAmount: 10,
circleColor: 'yellow'
},
];
return ( return (
<> <>
<ACAHeader data={data} /> {/* ACAHeader should be part of the widgets array below. */}
<div className="bg-stone-200 w-[1920px] h-[950px]" <ACAHeader data={data} />
style={{ backgroundImage: `url(${background})` }}> <div
{Object.keys(widgets).map((widgetId) => ( className="bg-stone-200 w-[1920px] h-[950px]"
<Widget key={widgetId} widget={widgets[widgetId]} /> style={{ backgroundImage: `url(${background})` }}
))} >
</div> {Object.keys(widgets).map((widgetId) => (
<Widget key={widgetId} widget={widgets[widgetId]} />
))}
</div>
</> </>
); );
}; };