feat: Added more docs to ingame wiki

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

@@ -9,6 +9,7 @@ const MAX_STEPS = 15;
 
 export function TrainingModal(props: { open: boolean }) {
   const [step, setStep] = useState(0);
+  const [markerComponent, setMarkerComponent] = useState(null as number | null);
 
   return (
     <Modal open={props.open} size="lg">
@@ -43,10 +44,12 @@ export function TrainingModal(props: { open: boolean }) {
                 Welcome to the Olympus quick start guide! This tour will guide you through the basics of DCS Olympus. You can navigate through the steps using
                 the "Next" and "Previous" buttons at the bottom of the screen, or select a topic from the list below.
               </p>
-              <div className={`
-                flex w-fit flex-col flex-wrap gap-2
-                md:h-32
-              `}>
+              <div
+                className={`
+                  flex w-fit flex-col flex-wrap gap-2
+                  md:h-32
+                `}
+              >
                 <div className="flex gap-2">
                   <FaLink className="my-auto" />
                   <div className={`cursor-pointer text-blue-400`} onClick={() => setStep(1)}>
@@ -92,7 +95,7 @@ export function TrainingModal(props: { open: boolean }) {
                 <div className="flex gap-2">
                   <FaLink className="my-auto" />
                   <div className={`cursor-pointer text-blue-400`} onClick={() => setStep(15)}>
-                    Game master mode
+                    Commander mode
                   </div>
                 </div>
                 <div className="flex gap-2">
@@ -364,8 +367,8 @@ export function TrainingModal(props: { open: boolean }) {
               sm:gap-16
             `}
           >
-            <img src="images/training/unitmarker.png" className={`
-              max-h-34 max-w-34 my-auto rounded-xl
+            <img src={`images/training/unitmarker${markerComponent ? markerComponent : ""}.png`} className={`
+              max-h-34 max-w-34 mx-auto my-auto rounded-xl
             `} />
             <div className="flex flex-col gap-4 text-gray-400">
               <h2 className={`text-xl font-semibold text-white`}>The unit marker (1 of 2)</h2>
@@ -374,7 +377,12 @@ export function TrainingModal(props: { open: boolean }) {
                 players only). It has the following parts:
               </p>
               <div className="flex flex-wrap gap-4">
-                <div className="flex flex-col">
+                <div
+                  className="flex cursor-pointer flex-col"
+                  onMouseEnter={() => setMarkerComponent(1)}
+                  onMouseLeave={() => setMarkerComponent(null)}
+                  onClick={() => setMarkerComponent(1)}
+                >
                   <p className="flex gap-4">
                     <div
                       className={`
@@ -387,7 +395,12 @@ export function TrainingModal(props: { open: boolean }) {
                     <p className="my-auto">Unit short label or type symbol</p>
                   </p>
                 </div>
-                <div className="flex flex-col">
+                <div
+                  className="flex cursor-pointer flex-col"
+                  onMouseEnter={() => setMarkerComponent(2)}
+                  onMouseLeave={() => setMarkerComponent(null)}
+                  onClick={() => setMarkerComponent(2)}
+                >
                   <p className="flex gap-4">
                     <div
                       className={`
@@ -400,7 +413,12 @@ export function TrainingModal(props: { open: boolean }) {
                     <p className="my-auto">Flight level</p>
                   </p>
                 </div>
-                <div className="flex flex-col">
+                <div
+                  className="flex cursor-pointer flex-col"
+                  onMouseEnter={() => setMarkerComponent(3)}
+                  onMouseLeave={() => setMarkerComponent(null)}
+                  onClick={() => setMarkerComponent(3)}
+                >
                   <p className="flex gap-4">
                     <div
                       className={`
@@ -413,7 +431,12 @@ export function TrainingModal(props: { open: boolean }) {
                     <p className="my-auto">Ground speed (knots)</p>
                   </p>
                 </div>
-                <div className="flex flex-col">
+                <div
+                  className="flex cursor-pointer flex-col"
+                  onMouseEnter={() => setMarkerComponent(4)}
+                  onMouseLeave={() => setMarkerComponent(null)}
+                  onClick={() => setMarkerComponent(4)}
+                >
                   <p className="flex gap-4">
                     <div
                       className={`
@@ -426,7 +449,12 @@ export function TrainingModal(props: { open: boolean }) {
                     <p className="my-auto">Bullseye position</p>
                   </p>
                 </div>
-                <div className="flex flex-col">
+                <div
+                  className="flex cursor-pointer flex-col"
+                  onMouseEnter={() => setMarkerComponent(5)}
+                  onMouseLeave={() => setMarkerComponent(null)}
+                  onClick={() => setMarkerComponent(5)}
+                >
                   <p className="flex gap-4">
                     <div
                       className={`
@@ -439,7 +467,12 @@ export function TrainingModal(props: { open: boolean }) {
                     <p className="my-auto">Fuel state (% of internal)</p>
                   </p>
                 </div>
-                <div className="flex flex-col">
+                <div
+                  className="flex cursor-pointer flex-col"
+                  onMouseEnter={() => setMarkerComponent(6)}
+                  onMouseLeave={() => setMarkerComponent(null)}
+                  onClick={() => setMarkerComponent(6)}
+                >
                   <p className="flex gap-4">
                     <div
                       className={`
@@ -452,7 +485,12 @@ export function TrainingModal(props: { open: boolean }) {
                     <p className="my-auto">A/A weapons (Fox 1/2/3 & guns)</p>
                   </p>
                 </div>
-                <div className="flex flex-col">
+                <div
+                  className="flex cursor-pointer flex-col"
+                  onMouseEnter={() => setMarkerComponent(7)}
+                  onMouseLeave={() => setMarkerComponent(null)}
+                  onClick={() => setMarkerComponent(7)}
+                >
                   <p className="flex gap-4">
                     <div
                       className={`
@@ -466,6 +504,7 @@ export function TrainingModal(props: { open: boolean }) {
                   </p>
                 </div>
               </div>
+              <p className="font-bold">Hover your cursor or click on the components to see them highlighted in the image.</p>
               <p>
                 Most of these information is only available for air units. Ground units will show the type symbol, the name, and the coalition, and the fuel
                 level is replace by the unit's health (%).
@@ -666,13 +705,24 @@ export function TrainingModal(props: { open: boolean }) {
               sm:gap-16
             `}
           >
-            <img src="images/training/step13.png" className={`h-96 rounded-xl`} />
+            <img
+              src="images/training/step13.png"
+              className={`mx-auto h-96 rounded-xl`}
+            />
             <div className="flex flex-col gap-4 text-gray-400">
               <h2 className={`text-xl font-semibold text-white`}>Mission drawings</h2>
-              <p>Mission drawings are useful to provide information from the mission creator. They can define borders, Areas of Operation, navigational points and more. </p>
-              <p>Mission drawings are automatically imported from the mission and can be shown using the drawing menu. You can enable or disable different sections, change the opacity, and look for specific drawings or navpoint using the shearch bar.</p>
+              <p>
+                Mission drawings are useful to provide information from the mission creator. They can define borders, Areas of Operation, navigational points
+                and more.{" "}
+              </p>
+              <p>
+                Mission drawings are automatically imported from the mission and can be shown using the drawing menu. You can enable or disable different
+                sections, change the opacity, and look for specific drawings or navpoint using the shearch bar.
+              </p>
               <p>You can also define your own drawings, which can be useful as reference, or as a way to automatically create IADS.</p>
-              <p>Use the <FaQuestionCircle className="inline"/> button on the upper right of the drawings panel for more info. </p>
+              <p>
+                Use the <FaQuestionCircle className="inline" /> button on the upper right of the drawings panel for more info.{" "}
+              </p>
             </div>
           </div>
         )}
@@ -687,10 +737,31 @@ export function TrainingModal(props: { open: boolean }) {
               sm:gap-16
             `}
           >
+            <img
+              src="images/training/step14.png"
+              className={`mx-auto h-96 rounded-xl`}
+            />
             <div className="flex flex-col gap-4 text-gray-400">
               <h2 className={`text-xl font-semibold text-white`}>The audio backend</h2>
-              <p></p>
-              <p></p>
+              <p>
+                The audio backend is, for all intents and purposes, a client for the great open source mod{" "}
+                <a className={`text-blue-500`} href="http://dcssimpleradio.com/" target="_blank">
+                  DCS-SRS
+                </a>{" "}
+                baked directly into DCS Olympus.
+              </p>
+              <p>
+                It allows you to talk on frequency with players operating in the mission, as well as other Olympus operators. Moreover, it allows to create fake
+                "loudspeakers", i.e. sound sources in game that people will only be able to hear if close enough.
+              </p>
+              <p>
+                The audio backend allows you to perform useful operations on audio sources: you can mix your microphone with one or multiple fire sources (e.g.
+                to play a background noise like a firefight sound), or you can play files directly, e.g. for playing METAR files, or to blast music for your
+                friends.{" "}
+              </p>
+              <p>
+                Use the <FaQuestionCircle className="inline" /> button on the upper right of the audio backend panel for more info.{" "}
+              </p>
             </div>
           </div>
         )}
@@ -706,9 +777,29 @@ export function TrainingModal(props: { open: boolean }) {
             `}
           >
             <div className="flex flex-col gap-4 text-gray-400">
-              <h2 className={`text-xl font-semibold text-white`}>Game master mode</h2>
-              <p></p>
-              <p></p>
+              <h2 className={`text-xl font-semibold text-white`}>Commander mode</h2>
+              <p>
+                The Commander mode is a special way of operation of Olympus that forces some limitations to the operator in order to create a more challenging
+                environment. This can be used to create "games" where players in DCS play against the operators, forcing them to carefully place and control
+                their units.
+              </p>
+              <p>
+                These limitations are of two types:
+                <li>
+                  Spawning limitations: if enabled, spawning limitations force operators by proving an initial points "budget". Every unit costs a certain
+                  amount of points, and once all points are used, no more units can be spawned. Moreover, the game is divided into two phases, the "setup" phase
+                  and the "combat" phase. During the setup phase, operators can freely spawn units in the air and on the ground. Once the combat phase starts,
+                  ground units can no longer be spawned, and aircraft/helicopters can only be spawned at airbases.{" "}
+                </li>
+                <li>
+                  Detection limitations: always enabled, this mode forces operators to use the same detection methods as players. This means that units will not
+                  be able to see each other unless they are in visual range, or if they are using a radar or other sensor. This is useful to create a more
+                  realistic environment, where units have to rely on their sensors and must be placed with caution.{" "}
+                </li>{" "}
+              </p>
+              <p>
+                Use the <FaQuestionCircle className="inline" /> button on the upper right of the game master option panel for more info.{" "}
+              </p>
             </div>
           </div>
         )}

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

@@ -75,7 +75,31 @@ export function AirbaseMenu(props: { open: boolean; onClose: () => void; childre
   filteredBlueprints.sort((a, b) => a.label.localeCompare(b.label));
 
   return (
-    <Menu title={airbase?.getName() ?? "No airbase selected"} open={props.open} onClose={props.onClose} showBackButton={false}>
+    <Menu title={airbase?.getName() ?? "No airbase selected"} open={props.open} onClose={props.onClose} showBackButton={false}
+    wiki={() => {
+      return (
+        <div
+          className={`
+            h-full flex-col overflow-auto p-4 text-gray-400 no-scrollbar flex
+            gap-2
+          `}
+        >
+          <h2 className="mb-4 font-bold">Airbase menu</h2>
+          <div>
+            In the airbase menu, you can see the details of the selected airbase, including its ICAO name, elevation, runways, and TACAN (if present). You can also spawn units at the airbase.
+          </div>
+          <div>
+            The options available to you will be the same as in a normal spawn menu, but you will be able to only spawn aircraft or helicopters. Airplanes are spawned at available parking spots or on the runway, depending on the selected airbase. Not all aircraft can be spawned, so make sure the airbase is big enough.
+          </div>
+          <div>
+            You will only be able to spawn units that are of the same coalition as the airbase. If you are playing in commander mode and the airbase does not belong to your coalition, you will not be able to spawn units.
+          </div>
+          <div>
+            The coalition of an airbase depends on what ground units control it. A way to change the coalition of an airbase is to spawn a ground unit of the desired coalition at the airbase. The airbase will then change its coalition to the one of the unit.
+          </div>
+        </div>
+      );
+    }}>
       <div
         className={`
           flex flex-col gap-2 font-normal text-gray-800

frontend/react/src/ui/panels/components/menu.tsx

@@ -101,6 +101,7 @@ export function Menu(props: {
               text-lg
               dark:text-gray-500 dark:hover:bg-gray-700 dark:hover:text-white
               hover:bg-gray-200
+              ${props.wikiDisabled ? "ml-auto" : ""}
             `}
           />
           <FontAwesomeIcon

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

@@ -7,7 +7,7 @@ import { ImportExportSubstate, OlympusState } from "../../constants/constants";
 
 export function MainMenu(props: { open: boolean; onClose: () => void; children?: JSX.Element | JSX.Element[] }) {
   return (
-    <Menu title="Main Menu" open={props.open} showBackButton={false} onClose={props.onClose}>
+    <Menu title="Main Menu" open={props.open} showBackButton={false} onClose={props.onClose} wikiDisabled={true}>
       <div
         className={`
           flex flex-col gap-1 p-5 font-normal text-gray-900

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

@@ -59,7 +59,7 @@ export function OptionsMenu(props: { open: boolean; onClose: () => void; childre
   }, []);
 
   return (
-    <Menu title="User preferences" open={props.open} showBackButton={false} onClose={props.onClose}>
+    <Menu title="User preferences" open={props.open} showBackButton={false} onClose={props.onClose} wikiDisabled={true}>
       <div
         className={`
           flex h-full flex-col justify-end gap-2 p-5 font-normal text-gray-800

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

@@ -14,7 +14,7 @@ export function UnitExplosionMenu(props: { open: boolean; onClose: () => void; c
   }, [])
 
   return (
-    <Menu title="Unit explosion menu" open={props.open} showBackButton={false} onClose={props.onClose}>
+    <Menu title="Unit explosion menu" open={props.open} showBackButton={false} onClose={props.onClose} wikiDisabled={true}>
       <div className="flex h-full flex-col gap-4 p-4">
         <span className="text-white">Explosion type</span>