Added ability to draw coalition areas (WIP)

frontend/react/src/ui/components/olstatebutton.tsx

@@ -16,6 +16,7 @@ export function OlStateButton(props: {
   icon: IconProp;
   tooltip: string;
   onClick: () => void;
+  children?: JSX.Element | JSX.Element[];
 }) {
   var [hover, setHover] = useState(false);
   var buttonRef = useRef(null);
@@ -47,7 +48,10 @@ export function OlStateButton(props: {
           setHover(false);
         }}
       >
-        <FontAwesomeIcon icon={props.icon} />
+        <div className="m-auto flex w-fit content-center justify-center gap-2">
+        <FontAwesomeIcon icon={props.icon} className="m-auto"/>
+        {props.children}
+        </div>
       </button>
       {hover && <OlTooltip buttonRef={buttonRef} content={props.tooltip} />}
     </>

frontend/react/src/ui/components/olunitsummary.tsx

@@ -23,7 +23,7 @@ export function OlUnitSummary(props: {
           className={`
             absolute right-5 top-0 h-full object-cover opacity-10 invert
           `}
-          src={"images/units/" + props.blueprint.filename}
+          src={"vite/images/units/" + props.blueprint.filename}
           alt=""
         />
         <div

frontend/react/src/ui/modals/login.tsx

@@ -45,7 +45,7 @@ export function LoginModal(props: {
       `}
     >
       <img
-        src="/images/splash/1.jpg"
+        src="/vite/images/splash/1.jpg"
         className={`contents-center w-full object-cover opacity-[7%]`}
       ></img>
       <div
@@ -106,7 +106,7 @@ export function LoginModal(props: {
                 >
                   <span className="size-[80px] min-w-14">
                     <img
-                      src="..\images\olympus-500x500.png"
+                      src="..\vite\images\olympus-500x500.png"
                       className={`flex w-full`}
                     ></img>
                   </span>
@@ -332,7 +332,7 @@ export function LoginModal(props: {
           >
             <Card className="flex">
               <img
-                src="/images/splash/1.jpg"
+                src="/vite/images/splash/1.jpg"
                 className={`
                   h-[40%] max-h-[120px] contents-center w-full rounded-md
                   object-cover
@@ -362,7 +362,7 @@ export function LoginModal(props: {
             </Card>
             <Card className="flex">
               <img
-                src="/images/splash/1.jpg"
+                src="/vite/images/splash/1.jpg"
                 className={`
                   h-[40%] max-h-[120px] contents-center w-full rounded-md
                   object-cover

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

@@ -0,0 +1,62 @@
+import React, { useEffect, useState } from "react";
+import { Menu } from "./components/menu";
+import { FaQuestionCircle } from "react-icons/fa";
+import { getApp } from "../../olympusapp";
+import { COALITIONAREA_DRAW_POLYGON, COALITIONAREA_EDIT, IDLE } from "../../constants/constants";
+import { OlStateButton } from "../components/olstatebutton";
+import { faDrawPolygon } from "@fortawesome/free-solid-svg-icons";
+
+export function DrawingMenu(props: { open: boolean; onClose: () => void }) {
+  const [drawingPolygon, setDrawingPolygon] = useState(false);
+
+  useEffect(() => {
+    if (props.open && !drawingPolygon) {
+      getApp().getMap().setState(COALITIONAREA_EDIT);
+    }
+  })
+
+  return (
+    <Menu
+      open={props.open}
+      title="Draw"
+      onClose={props.onClose}
+      canBeHidden={true}
+    >
+      <div className="p-4 text-sm text-gray-400">
+        The draw tool allows you to quickly draw areas on the map and use these
+        areas to spawn units and activate triggers.
+      </div>
+      <div className="mx-6 my-2 flex rounded-lg bg-olympus-400 p-4 text-sm">
+        <div>
+          <FaQuestionCircle className="my-4 ml-2 mr-6 text-gray-400" />
+        </div>
+        <div className="flex flex-col gap-1">
+          <div className="text-gray-100">
+            Use the polygon or paint tool to draw areas on the map.
+          </div>
+          <div className="text-gray-400">
+            After drawing a shape, select it to see the options for spawning
+            units.
+          </div>
+        </div>
+      </div>
+      <div className="p-6 text-sm text-gray-400">
+        <OlStateButton
+          className="!w-full"
+          icon={faDrawPolygon}
+          tooltip={"Add a new polygon"}
+          checked={drawingPolygon}
+          onClick={() => {
+            if (drawingPolygon)
+              getApp().getMap().setState(COALITIONAREA_EDIT);
+            else
+              getApp().getMap().setState(COALITIONAREA_DRAW_POLYGON);
+            setDrawingPolygon(!drawingPolygon);
+          }}
+        >
+          <div className="text-sm">Add polygon</div>
+        </OlStateButton>
+      </div>
+    </Menu>
+  );
+}

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

@@ -60,7 +60,7 @@ export function Header() {
               `}
             >
               <img
-                src="images/icon.png"
+                src="vite/images/icon.png"
                 className="my-auto h-10 w-10 rounded-md p-0"
               ></img>
               {!scrolledLeft && (

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

@@ -35,10 +35,7 @@ import {
 import { Coalition } from "../../types/types";
 import { ftToM, knotsToMs, mToFt, msToKnots } from "../../other/utils";
 
-export function UnitControlMenu(props: {
-  open: boolean;
-  onClose: () => void;
-}) {
+export function UnitControlMenu(props: { open: boolean; onClose: () => void }) {
   var [selectedUnits, setSelectedUnits] = useState([] as Unit[]);
 
   var [selectedUnitsData, setSelectedUnitsData] = useState({
@@ -185,7 +182,12 @@ export function UnitControlMenu(props: {
     getApp()?.getUnitsManager()?.getSelectedUnitsCategories() ?? [];
 
   return (
-    <Menu open={props.open} title="Units selected (x)" onClose={props.onClose}>
+    <Menu
+      open={props.open}
+      title="Units selected (x)"
+      onClose={props.onClose}
+      canBeHidden={true}
+    >
       {/* Units list */}
       <div
         className={`

frontend/react/src/ui/ui.tsx

@@ -24,6 +24,7 @@ import { LoginModal } from "./modals/login";
 import { sha256 } from "js-sha256";
 import { MiniMapPanel } from "./panels/minimappanel";
 import { UnitMouseControlBar } from "./panels/unitmousecontrolbar";
+import { DrawingMenu } from "./panels/drawingmenu";
 
 export type OlympusState = {
   mainMenuVisible: boolean;
@@ -238,6 +239,10 @@ export function UI() {
                 open={unitControlMenuVisible}
                 onClose={() => setUnitControlMenuVisible(false)}
               />
+              <DrawingMenu
+                open={drawingMenuVisible}
+                onClose={() => setDrawingMenuVisible(false)}
+              />
               <div id="map-container" className="h-full w-screen" />
               <UnitMouseControlBar />
             </div>