chore: add auto-adventurer toggle to adventurer panel header (#94)

The auto-adventurer toggle is now surfaced directly in the adventurer shop panel header, mirroring the auto-boss button. It only renders when the `auto_adventurer` prestige upgrade has been purchased, so players who have not reached prestige see no change.

Closes #89

✨ This PR was created with help from Hikari~ 🌸

Reviewed-on: #94
Co-authored-by: Hikari <hikari@nhcarrigan.com>
Co-committed-by: Hikari <hikari@nhcarrigan.com>

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,12 +222,35 @@ const AdventurerPanel = (): JSX.Element => {
     <section className="panel adventurer-panel">
       <div className="panel-header">
         <h2>{"Adventurers"}</h2>
+        <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) => {
           function handleBatchSelect(): void {