apps/web/src/components/game/adventurerPanel.tsx

@@ -175,7 +175,7 @@ const AdventurerCard = ({
  * @returns The JSX element.
  */
 const AdventurerPanel = (): JSX.Element => {
-  const { state, formatNumber } = useGame();
+  const { state, formatNumber, toggleAutoAdventurer } = useGame();
   const [ showLocked, setShowLocked ] = useState(true);
   const [ batchSize, setBatchSize ] = useState<BatchSize>(() => {
     return parseBatchSize(localStorage.getItem("elysium_batch_size"));
@@ -207,6 +207,11 @@ const AdventurerPanel = (): JSX.Element => {
     }
   }
 
+  const autoAdventurerUnlocked = state.prestige.purchasedUpgradeIds.includes(
+    "auto_adventurer",
+  );
+  const autoAdventurerOn = state.autoAdventurer === true;
+
   function handleToggle(): void {
     setShowLocked((current) => {
       return !current;
@@ -217,11 +222,34 @@ const AdventurerPanel = (): JSX.Element => {
     <section className="panel adventurer-panel">
       <div className="panel-header">
         <h2>{"Adventurers"}</h2>
-        <LockToggle
-          lockedCount={locked.length}
-          onToggle={handleToggle}
-          showLocked={showLocked}
-        />
+        <div className="panel-header-controls">
+          {autoAdventurerUnlocked
+            ? <button
+              className={`auto-toggle-btn ${
+                autoAdventurerOn
+                  ? "auto-toggle-on"
+                  : "auto-toggle-off"
+              }`}
+              onClick={toggleAutoAdventurer}
+              title={
+                "Automatically purchase the highest-tier"
+                + " affordable adventurer"
+              }
+              type="button"
+            >
+              {"🤖 Auto: "}
+              {autoAdventurerOn
+                ? "ON"
+                : "OFF"}
+            </button>
+            : null
+          }
+          <LockToggle
+            lockedCount={locked.length}
+            onToggle={handleToggle}
+            showLocked={showLocked}
+          />
+        </div>
       </div>
       <div className="batch-selector">
         {batchOptions.map((option) => {