From 78119cbd98d789f5771da3ec1c736e263da88721 Mon Sep 17 00:00:00 2001
From: Andres <andres99.dev@gmail.com>
Date: Fri, 20 Jun 2025 23:14:56 +0200
Subject: [PATCH] add bmp launcher instructions

---
 content/docs/getting-started/installation.mdx |  44 ++++++-
 src/app/_components/os-download-button.tsx    | 116 ++++++++++++++++++
 2 files changed, 155 insertions(+), 5 deletions(-)
 create mode 100644 src/app/_components/os-download-button.tsx

diff --git a/content/docs/getting-started/installation.mdx b/content/docs/getting-started/installation.mdx
index b6e4404..3bedca3 100644
--- a/content/docs/getting-started/installation.mdx
+++ b/content/docs/getting-started/installation.mdx
@@ -6,8 +6,33 @@ description: Learn how to install the Balatro Multiplayer mod.
 import {DownloadIcon} from "lucide-react";
 import {Steps, Step} from "fumadocs-ui/components/steps";
 import {Tab, Tabs} from 'fumadocs-ui/components/tabs';
+import {OSDownloadButton} from '@/app/_components/os-download-button';
 
-## General Instructions
+## Recommended: Using the Balatro Multiplayer Launcher
+
+The easiest way to install and manage the Balatro Multiplayer mod is by using our official launcher.
+
+<Steps>
+	<Step>
+		### Download the Balatro Multiplayer Launcher
+
+		<OSDownloadButton/>
+	</Step>
+	<Step>
+		### Run the Launcher
+
+		Open the downloaded launcher and follow the on-screen instructions to install the mod.
+	</Step>
+</Steps>
+
+The launcher will automatically:
+- Install all required dependencies (Lovely and Steamodded)
+- Download and install the selected version of the Multiplayer mod
+
+
+## Alternative: Manual Installation
+
+If you prefer to install the mod manually, follow these steps:
 
 <Steps>
 	<Step>
@@ -32,15 +57,24 @@ import {Tab, Tabs} from 'fumadocs-ui/components/tabs';
 		Unzip the `Multiplayer.zip` file and put the folder in the Mods folder described by the Steamodded instructions.
 	</Step>
 </Steps>
->
-
-
 
 If you need any further help or run into any problems feel free to open a ticket [in the Discord server.](https://discord.com/channels/1226193436521267223/1227357106064326727)
 
 ## Video Instructions
 
-<Tabs items={['Windows', 'Mac', 'Linux/Steamdeck', 'Balatro Mod Manager (Windows/Mac)']}>
+> **Note:** While these videos show the manual installation process, we recommend using the Balatro Multiplayer Launcher as described above for the easiest installation experience.
+
+<Tabs
+	items={['Balatro Multiplayer Launcher', 'Windows', 'Mac', 'Linux/Steamdeck', 'Balatro Mod Manager (Windows/Mac)']}>
+	<Tab value="Balatro Multiplayer Launcher" className={'flex justify-center'}>
+		<div className="flex flex-col items-center justify-center p-4">
+			<p className="mb-4 text-center">The Balatro Multiplayer Launcher is the easiest way to install and manage
+				the mod.</p>
+			<Button asChild className='no-underline'><a
+				href="https://github.com/Balatro-Multiplayer/Balatro-Multiplayer-Launcher/releases"
+				rel={'noopener noreferrer'} target="_blank"><DownloadIcon/>Get the Launcher</a></Button>
+		</div>
+	</Tab>
 	<Tab value="Windows" className={'flex justify-center'}>
 		<iframe width="560" height="315" src="https://www.youtube.com/embed/iqTpHz5vZgA" title="YouTube video player"
 				frameBorder="0"
diff --git a/src/app/_components/os-download-button.tsx b/src/app/_components/os-download-button.tsx
new file mode 100644
index 0000000..9b3874d
--- /dev/null
+++ b/src/app/_components/os-download-button.tsx
@@ -0,0 +1,116 @@
+'use client'
+
+import { Button } from '@/components/ui/button'
+import { DownloadIcon } from 'lucide-react'
+import { useEffect, useState } from 'react'
+
+type OS = 'Windows' | 'Mac' | 'Linux' | 'Unknown'
+
+const DOWNLOAD_LINKS = {
+  Windows:
+    'https://github.com/Balatro-Multiplayer/Balatro-Multiplayer-Launcher/releases/latest/download/balatro-multiplayer-launcher.exe',
+  Mac: 'https://github.com/Balatro-Multiplayer/Balatro-Multiplayer-Launcher/releases/latest/download/balatro-multiplayer-launcher.dmg',
+  Linux:
+    'https://github.com/Balatro-Multiplayer/Balatro-Multiplayer-Launcher/releases/latest/download/balatro-multiplayer-launcher.deb',
+}
+
+export function OSDownloadButton() {
+  const [detectedOS, setDetectedOS] = useState<OS>('Unknown')
+  const [selectedOS, setSelectedOS] = useState<OS>('Unknown')
+  const [showOptions, setShowOptions] = useState(false)
+
+  useEffect(() => {
+    // Detect OS on client side
+    const userAgent = window.navigator.userAgent.toLowerCase()
+
+    if (userAgent.indexOf('win') !== -1) {
+      setDetectedOS('Windows')
+      setSelectedOS('Windows')
+    } else if (userAgent.indexOf('mac') !== -1) {
+      setDetectedOS('Mac')
+      setSelectedOS('Mac')
+    } else if (
+      userAgent.indexOf('linux') !== -1 ||
+      userAgent.indexOf('x11') !== -1
+    ) {
+      setDetectedOS('Linux')
+      setSelectedOS('Linux')
+    }
+  }, [])
+
+  const downloadLink =
+    DOWNLOAD_LINKS[selectedOS as keyof typeof DOWNLOAD_LINKS] || ''
+  const downloadText = `Download for ${selectedOS}`
+
+  return (
+    <div className='flex flex-col items-center gap-2'>
+      {detectedOS !== 'Unknown' && (
+        <>
+          <Button asChild className='no-underline'>
+            <a href={downloadLink} rel='noopener noreferrer'>
+              <DownloadIcon className='mr-2' />
+              {downloadText}
+            </a>
+          </Button>
+
+          <div className='mt-1 text-sm'>
+            <button
+              onClick={() => setShowOptions(!showOptions)}
+              className='text-blue-500 hover:underline'
+            >
+              {showOptions
+                ? 'Hide other options'
+                : 'Not using ' + detectedOS + '?'}
+            </button>
+          </div>
+
+          {showOptions && (
+            <div className='mt-2 flex gap-2'>
+              {Object.keys(DOWNLOAD_LINKS).map(
+                (os) =>
+                  os !== selectedOS && (
+                    <Button
+                      key={os}
+                      variant='outline'
+                      size='sm'
+                      onClick={() => setSelectedOS(os as OS)}
+                      className='no-underline'
+                    >
+                      {os}
+                    </Button>
+                  )
+              )}
+            </div>
+          )}
+        </>
+      )}
+
+      {detectedOS === 'Unknown' && (
+        <div className='flex flex-col gap-2'>
+          <p className='text-center'>Select your operating system:</p>
+          <div className='flex justify-center gap-2'>
+            {Object.keys(DOWNLOAD_LINKS).map((os) => (
+              <Button
+                key={os}
+                variant={selectedOS === os ? 'default' : 'outline'}
+                onClick={() => setSelectedOS(os as OS)}
+                className='no-underline'
+              >
+                {os}
+              </Button>
+            ))}
+          </div>
+
+          {selectedOS !== 'Unknown' && (
+            <Button asChild className='mt-2 no-underline'>
+              <a href={downloadLink} rel='noopener noreferrer'>
+                <DownloadIcon className='mr-2' />
+                {downloadText}
+              </a>
+            </Button>
+          )}
+        </div>
+      )}
+    </div>
+  )
+}