feat: completed measure handling

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

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useState } from "react";
 import { OlDropdown, OlDropdownItem } from "../components/oldropdown";
 import { getApp } from "../../olympusapp";
-import { NO_SUBSTATE, OlympusState, OlympusSubState, SpawnSubState } from "../../constants/constants";
+import { colors, NO_SUBSTATE, OlympusState, OlympusSubState, SpawnSubState } from "../../constants/constants";
 import { OlStateButton } from "../components/olstatebutton";
 import { faArrowLeft, faSmog } from "@fortawesome/free-solid-svg-icons";
 import { LatLng } from "leaflet";
@@ -97,7 +97,7 @@ export function EffectSpawnMenu(props: { visible: boolean; compact: boolean; eff
                   <span className="my-auto text-white">Smoke color</span>
                 </div>
                 <div className="flex w-full gap-2">
-                  {["white", "blue", "red", "green", "orange"].map((optionSmokeColor) => {
+                  {[colors.WHITE, colors.BLUE, colors.RED, colors.GREEN, colors.ORANGE].map((optionSmokeColor) => {
                     return (
                       <OlStateButton
                         checked={smokeColor === optionSmokeColor}
@@ -132,7 +132,7 @@ export function EffectSpawnMenu(props: { visible: boolean; compact: boolean; eff
                       getApp().getServerManager().spawnSmoke(smokeColor, props.latlng);
                       getApp()
                         .getMap()
-                        .addSmokeMarker(props.latlng, smokeColor ?? "white");
+                        .addSmokeMarker(props.latlng, smokeColor ?? colors.WHITE);
                     }
                   }
 

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

@@ -18,7 +18,7 @@ import {
   SelectionEnabledChangedEvent,
   ShortcutsChangedEvent,
 } from "../../events";
-import { faCopy, faObjectGroup, faPaste } from "@fortawesome/free-solid-svg-icons";
+import { faCopy, faEraser, faObjectGroup, faPaste, faTape } from "@fortawesome/free-solid-svg-icons";
 import { Shortcut } from "../../shortcut/shortcut";
 import { ShortcutOptions, UnitData } from "../../interfaces";
 import { Unit } from "../../unit/unit";
@@ -215,6 +215,40 @@ export function MapToolBar(props: {}) {
                   />
                 </div>
               )}
+              <div className="flex flex-col gap-1">
+                  <OlStateButton
+                    key={"measure"}
+                    checked={appState === OlympusState.MEASURE}
+                    icon={faTape}
+                    tooltip={() => (
+                      <div className="flex content-center gap-2">
+                        {shortcutCombination(shortcuts["measure"]?.getOptions())}
+                        <div className="my-auto">Enter measure mode</div>
+                      </div>
+                    )}
+                    tooltipPosition="side"
+                    onClick={() => {
+                      getApp().setState(appState === OlympusState.MEASURE? OlympusState.IDLE : OlympusState.MEASURE);
+                    }}
+                  />
+                </div>
+                <div className="flex flex-col gap-1">
+                  <OlStateButton
+                    key={"clearMeasures"}
+                    checked={false}
+                    icon={faEraser}
+                    tooltip={() => (
+                      <div className="flex content-center gap-2">
+                        {shortcutCombination(shortcuts["clearMeasures"]?.getOptions())}
+                        <div className="my-auto">Clear all measures</div>
+                      </div>
+                    )}
+                    tooltipPosition="side"
+                    onClick={() => {
+                      getApp().getMap().clearMeasures();
+                    }}
+                  />
+                </div>
             </>
 
             {reorderedActions.map((contextActionIt: ContextAction) => {

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

@@ -5,6 +5,7 @@ import { RadioSink } from "../../audio/radiosink";
 import { FaJetFighter, FaRadio, FaVolumeHigh } from "react-icons/fa6";
 import { OlStateButton } from "../components/olstatebutton";
 import { UnitSink } from "../../audio/unitsink";
+import { colors } from "../../constants/constants";
 
 export function RadiosSummaryPanel(props: {}) {
   const [audioSinks, setAudioSinks] = useState([] as AudioSink[]);
@@ -41,7 +42,7 @@ export function RadiosSummaryPanel(props: {}) {
                         radioSink.setPtt(false);
                       }}
                       tooltip="Click to talk, lights up when receiving"
-                      buttonColor={radioSink.getReceiving() ? "white" : null}
+                      buttonColor={radioSink.getReceiving() ? colors.WHITE : undefined}
                       className="min-h-12 min-w-12"
                     >
                       <span className={`text-gray-200`}><FaRadio className={`