More work on new ui

frontend/react/src/ui/panels/unitcontrolmenu.tsx

@@ -55,7 +55,7 @@ export function UnitControlMenu() {
 		updateData();
 	})
 
-	/* When all units are selected clean the view */
+	/* When all units are deselected clean the view */
 	document.addEventListener("clearSelection", () => {
 		setOpen(false);
 		setSelectedUnits([])

frontend/react/src/ui/panels/unitmousecontrolbar.tsx

@@ -0,0 +1,55 @@
+import React, { useEffect, useState } from 'react';
+import { Unit } from '../../unit/unit';
+import { ContextActionSet } from '../../unit/contextactionset';
+import { OlStateButton } from '../components/olstatebutton';
+import { faAccessibleIcon } from '@fortawesome/free-brands-svg-icons';
+import { faCamera } from '@fortawesome/free-solid-svg-icons';
+import { getApp } from '../../olympusapp';
+
+export function UnitMouseControlBar(props: {
+
+}) {
+    var [open, setOpen] = useState(false);
+	var [selectedUnits, setSelectedUnits] = useState([] as Unit[]);
+	var [contextActionsSet, setContextActionsSet] = useState(new ContextActionSet());
+
+    /* When a unit is selected, open the menu */
+	document.addEventListener("unitsSelection", (ev: CustomEventInit) => {
+		setOpen(true);
+		setSelectedUnits(ev.detail as Unit[]);
+
+		updateData();
+	})
+
+	/* When a unit is deselected, refresh the view */
+	document.addEventListener("unitDeselection", (ev: CustomEventInit) => {
+		/* TODO add delay to avoid doing it too many times */
+		updateData();
+	})
+
+	/* When all units are deselected clean the view */
+	document.addEventListener("clearSelection", () => {
+		setOpen(false);
+		setSelectedUnits([]);
+		updateData();
+	})
+
+    /* Update the current values of the shown data */
+	function updateData() {
+		var newContextActionSet = new ContextActionSet();
+
+        getApp().getUnitsManager().getSelectedUnits().forEach((unit: Unit) => {
+            unit.appendContextActions(newContextActionSet);
+        })
+
+		setContextActionsSet(newContextActionSet);
+    }
+
+    return <div className='flex gap-2 rounded-md absolute top-20 left-[50%] translate-x-[-50%] bg-gray-200 dark:bg-olympus-900 z-ui-1 p-2'>
+        {
+			Object.values(contextActionsSet.getContextActions()).map((contextAction) => {
+				return <OlStateButton checked={false} icon={contextAction.getIcon()} onClick={() => {}} />
+			})
+		}
+    </div>
+}

frontend/react/src/ui/ui.tsx

@@ -1,4 +1,4 @@
-import React, { useState } from 'react'
+import React, { useEffect, useState } from 'react'
 import './ui.css'
 
 import { EventsProvider } from '../eventscontext'
@@ -15,6 +15,7 @@ import { BLUE_COMMANDER, GAME_MASTER, MAP_HIDDEN_TYPES_DEFAULTS, MAP_OPTIONS_DEF
 import { getApp, setupApp } from '../olympusapp'
 import { LoginModal } from './modals/login'
 import { sha256 } from 'js-sha256'
+import { UnitMouseControlBar } from './panels/unitmousecontrolbar'
 
 export type OlympusState = {
 	mainMenuVisible: boolean,
@@ -28,7 +29,7 @@ export type OlympusState = {
 }
 
 export function UI() {
-	var [loginModalVisible, setLoginModalVisible] = useState(true);
+	var [loginModalVisible, setLoginModalVisible] = useState(false /* Temporary during devel */);
 	var [mainMenuVisible, setMainMenuVisible] = useState(false);
 	var [spawnMenuVisible, setSpawnMenuVisible] = useState(false);
 	var [unitControlMenuVisible, setUnitControlMenuVisible] = useState(false);
@@ -84,6 +85,15 @@ export function UI() {
 		setLoginModalVisible(false);
 	}
 
+	/* Temporary during devel */
+	useEffect(() => {
+		window.setTimeout(() => {
+			checkPassword("admin");
+			connect("devel");
+		}, 1000)
+	}, [])
+	
+	
 	return (
 		<div className="absolute top-0 left-0 h-screen w-screen font-sans overflow-hidden" onLoad={setupApp}>
 			<StateProvider value={{
@@ -142,6 +152,7 @@ export function UI() {
 								onClose={() => setOptionsMenuVisible(false)}
 							/>
 							<UnitControlMenu />
+							<UnitMouseControlBar />
 						</div>
 					</div>
 					<div id='map-container' className='fixed h-full w-screen top-0 left-0' />