Merge pull request #1 from Balatro-Multiplayer/docs/rulesets

add standard ruleset docs

bun.lock

@@ -68,6 +68,7 @@
         "recharts": "^2.15.2",
         "remeda": "^2.21.2",
         "server-only": "^0.0.1",
+        "slugify": "^1.6.6",
         "sonner": "^2.0.3",
         "superjson": "^2.2.1",
         "tailwind-merge": "^3.1.0",
@@ -1033,6 +1034,8 @@
 
     "simple-swizzle": ["simple-swizzle@0.2.2", "", { "dependencies": { "is-arrayish": "^0.3.1" } }, "sha512-JA//kQgZtbuY83m+xT+tXJkmJncGMTFT+C+g2h2R9uxkYIrE2yy9sgmcLhCnw57/WSD+Eh3J97FPEDFnbXnDUg=="],
 
+    "slugify": ["slugify@1.6.6", "", {}, "sha512-h+z7HKHYXj6wJU+AnS/+IH8Uh9fdcX1Lrhg1/VMdf9PwoBQXFcXiAdsy2tSK0P6gKwJLXp02r90ahUCqHk9rrw=="],
+
     "sonner": ["sonner@2.0.3", "", { "peerDependencies": { "react": "^18.0.0 || ^19.0.0 || ^19.0.0-rc", "react-dom": "^18.0.0 || ^19.0.0 || ^19.0.0-rc" } }, "sha512-njQ4Hht92m0sMqqHVDL32V2Oun9W1+PHO9NDv9FHfJjT3JT22IG4Jpo3FPQy+mouRKCXFWO+r67v6MrHX2zeIA=="],
 
     "source-map": ["source-map@0.7.4", "", {}, "sha512-l3BikUxvPOcn5E74dZiq5BGsTb5yEwhaTSzccU6t4sDOH8NWJCstKO5QT2CvtFoK6F0saL7p9xHAqHOlCPJygA=="],

content/docs/getting-started/meta.json

@@ -1,5 +1,5 @@
 {
   "title": "Getting Started",
-  "pages": ["installation", "multiplayer-balance-changes", "faq"],
+  "pages": ["installation", "faq"],
   "defaultOpen": true
 }

content/docs/meta.json

@@ -1,5 +1,10 @@
 {
-  "title": "Advanced",
-  "pages": ["index", "getting-started", "advanced"],
+  "pages": [
+    "index",
+    "getting-started",
+    "rulesets",
+    "ranked-matchmaking",
+    "advanced"
+  ],
   "defaultOpen": true
 }

content/docs/rulesets/standard.mdx

@@ -0,0 +1,328 @@
+---
+title: Standard
+description: The standard ruleset includes Multiplayer cards and changes to the base game to fit the Multiplayer meta.
+---
+
+
+## Jokers
+
+### Multiplayer Jokers
+
+There are **10 added multiplayer jokers**. All jokers added in the multiplayer mod are designed
+to **interact with your opponent** and will not show up in single player games.
+
+<div className={'relative overflow-auto'}>
+	<table>
+		<thead>
+		<tr>
+			<th className={'text-center'}>Joker</th>
+			<th>Description</th>
+			<th>Notes</th>
+		</tr>
+		</thead>
+		<tbody>
+		<tr>
+			<td>
+				#### Defensive Joker [toc]
+				<JokerCard name={'Defensive Joker'} img={'/cards/j_defensive_joker.png'}/>
+			</td>
+			<td>
+				<Chips>+125</Chips> Chips for every life less than your Nemesis.
+			</td>
+			<td>
+				There is a bug where this joker might appear in single player mode. To fix this, disable the multiplayer
+				mod when playing single player.
+			</td>
+		</tr>
+		<tr>
+			<td>
+				#### Skip-Off [toc]
+				<JokerCard name={'Skip-Off'} img={'/cards/j_skip_off.png'}/>
+			</td>
+			<td>
+				<Hands>+1</Hands> Hands and <Hands>+1</Hands> Discards per additional blind skipped compared to your
+				Nemesis.
+			</td>
+			<td></td>
+		</tr>
+		<tr>
+			<td>
+				#### Let's Go Gambling [toc]
+				<JokerCard name={'Let\'s Go Gambling'} img={'/cards/j_lets_go_gambling.png'}/>
+			</td>
+			<td>
+				<div className={'flex flex-col gap-1'}>
+					<span><Chance>1 in 4</Chance> chance for <Xmult>X4</Xmult> Mult and <Money>$10</Money></span>
+					<span><Chance>1 in 8</Chance> chance to give your Nemesis <Money>$5</Money></span>
+				</div>
+			</td>
+			<td>
+				The effect applies on each hand played.
+			</td>
+		</tr>
+		<tr>
+			<td>
+				#### Speedrun [toc]
+				<JokerCard name={'Speedrun'} img={'/cards/j_speedrun.png'}/>
+			</td>
+			<td>
+				If you reach a <Hands>PvP Blind</Hands> before your Nemesis, create a
+				random <Spectral>Spectral</Spectral> card. Must have room.
+			</td>
+			<td>
+				There is a bug where the spectral card might not be created, but is is very rare. We're working on a
+				fix.
+			</td>
+		</tr>
+		<tr>
+			<td>
+				#### Conjoined Joker [toc]
+				<JokerCard name={'Conjoined Joker'} img={'/cards/j_conjoined_joker.png'}/>
+			</td>
+			<td>
+				While in a <Hands>PvP Blind</Hands>, gain
+				<Xmult>X1</Xmult> Mult for every <Hands>Hand</Hands>
+				your Nemesis has left
+				(Max <Xmult>X5</Xmult> Mult)
+			</td>
+			<td></td>
+		</tr>
+		<tr>
+			<td>
+				#### Penny Pincher [toc]
+				<JokerCard name={'Penny Pincher'} img={'/cards/j_penny_pincher.png'}/>
+			</td>
+			<td>
+				At start of shop, gain
+				<Money>$1</Money> for every <Money>$3</Money> your Nemesis spent last shop
+			</td>
+			<td></td>
+		</tr>
+		<tr>
+			<td>
+				#### Taxes [toc]
+				<JokerCard name={'Taxes'} img={'/cards/j_taxes.png'}/>
+			</td>
+			<td>
+				This Joker gains <Mult>+5</Mult> Mult each time your Nemesis sells a card
+			</td>
+			<td></td>
+		</tr>
+		<tr>
+			<td>
+				#### Magnet [toc]
+				<JokerCard name={'Magnet'} img={'/cards/j_magnet.png'}/>
+			</td>
+			<td>
+				After <Hands>2</Hands> rounds, sell this card to Copy your Nemesis' highest sell cost Joker. Does not
+				copy Joker state.
+			</td>
+			<td>
+				If your Nemesis has multiple Jokers that have the highest sell cost, a random one will be copied.
+			</td>
+		</tr>
+		<tr>
+			<td>
+				#### Pizza [toc]
+				<JokerCard name={'Pizza'} img={'/cards/j_pizza.png'}/>
+			</td>
+			<td>
+				<div className={'flex flex-col gap-1'}>
+					<span><Mult>+6</Mult> Discards for all players</span>
+					<span><Mult>-1</Mult> Discard when any player selects a blind</span>
+					<span>Eaten when your Nemesis skips</span>
+				</div>
+			</td>
+			<td></td>
+		</tr>
+		<tr>
+			<td>
+				#### Pacifist [toc]
+				<JokerCard name={'Pacifist'} img={'/cards/j_pacifist.png'}/>
+			</td>
+			<td>
+				<div className={'flex flex-col gap-1'}>
+					<Xmult>X10</Xmult> Mult while not in a <Hands>PvP Blind</Hands>
+				</div>
+			</td>
+			<td></td>
+		</tr>
+		</tbody>
+	</table>
+</div>
+
+<Callout>
+	These jokers can be removed by unchecking the **"Enable Multiplayer Cards"** option in the lobby options.
+</Callout>
+
+### Disabled Jokers
+The following jokers are **unavailable** in multiplayer due to their interaction with boss blinds:
+
+<div>
+	<table>
+		<thead>
+		<tr>
+			<th className={'text-center'}>Joker</th>
+			<th>Description</th>
+		</tr>
+		</thead>
+		<tbody>
+		<tr>
+			<td>
+				#### Chicot [toc]
+				<JokerCard name={'Chicot'} img={'/cards/j_chicot.png'} h={4}/>
+			</td>
+			<td>
+				Disables effect of every <Hands>Boss Blind</Hands>
+			</td>
+		</tr>
+		<tr>
+			<td>
+				#### Matador [toc]
+				<JokerCard name={'Matador'} img={'/cards/j_matador.png'} h={4}/>
+			</td>
+			<td>
+				Earn <Money>$8</Money> if played hand triggers the <Hands>Boss Blind</Hands> ability
+			</td>
+		</tr>
+		<tr>
+			<td>
+				#### Mr. Bones [toc]
+				<JokerCard name={'Mr. Bones'} img={'/cards/j_mr_bones.png'} h={4}/>
+			</td>
+			<td>
+				Prevents Death if chips scored are at least <Hands>25%</Hands> of required chips.
+				<Mult>Self destructs</Mult>
+			</td>
+		</tr>
+		<tr>
+			<td>
+				#### Luchador [toc]
+				<JokerCard name={'Luchador'} img={'/cards/j_luchador.png'} h={4}/>
+			</td>
+			<td>
+				Sell this card to disable the current <Hands>Boss Blind</Hands>
+			</td>
+		</tr>
+		</tbody>
+	</table>
+</div>
+
+
+### Modified Jokers
+
+These jokers are modified versions of the original jokers.
+
+<div>
+	<table>
+		<thead>
+		<tr>
+			<th className={'text-center'}>Joker</th>
+			<th>Description</th>
+		</tr>
+		</thead>
+		<tbody>
+		<tr>
+			<td>
+				#### Hanging Chad [toc]
+				<JokerCard name={'Hanging Chad'} img={'/cards/j_hanging_chad.png'} h={4}/>
+			</td>
+			<td>
+				Retrigger <Hands>first</Hands> and <Hands>second</Hands> played cards used in
+				scoring <Hands>1</Hands> additional time
+			</td>
+		</tr>
+		</tbody>
+	</table>
+</div>
+
+## Planet cards
+
+<div>
+	<table>
+		<thead>
+		<tr>
+			<th className={'text-center'}>Card</th>
+			<th>Description</th>
+			<th>Notes</th>
+		</tr>
+		</thead>
+		<tbody>
+		<tr>
+			<td>
+				### Asteroid [toc]
+				<JokerCard name={'Asteroid'} img={'/cards/c_asteroid.png'}/>
+			</td>
+			<td>
+				Removes <Hands>one level</Hands> from your Nemesis' highest level <Hands>poker hand</Hands>.
+			</td>
+			<td></td>
+		</tr>
+		</tbody>
+	</table>
+</div>
+
+## Tarot Cards
+
+<div>
+	<table>
+		<thead>
+		<tr>
+			<th className={'text-center'}>Card</th>
+			<th>Description</th>
+			<th>Notes</th>
+		</tr>
+		</thead>
+		<tbody>
+		<tr>
+			<td>
+				### Justice [toc]
+				<JokerCard name={'Justice'} img={'/cards/t_justice.png'}/>
+			</td>
+			<td>
+				This card is **not available** in the standard ruleset.
+			</td>
+			<td>
+				Glass cards can only be found in
+				- Standard packs
+				- Spectral cards that spawn cards (Grim, Incantation, and Familiar)
+			</td>
+		</tr>
+		</tbody>
+	</table>
+</div>
+
+
+
+## Enhancements
+
+<div>
+	<table>
+		<thead>
+		<tr>
+			<th className={'text-center'}>Card</th>
+			<th>Description</th>
+			<th>Notes</th>
+		</tr>
+		</thead>
+		<tbody>
+		<tr>
+			<td>
+				### Glass Card [toc]
+				<JokerCard name={'Glass Card'} img={'/cards/e_glass.png'}/>
+			</td>
+			<td>
+				<div className={'flex flex-col gap-1'}>
+					<span><Xmult>X1.5</Xmult> Mult</span>
+					<span><Chance>1 in 4</Chance> chance to <Hands>destroy</Hands> card after all scoring is finished</span>
+				</div>
+			</td>
+			<td>
+				Glass cards can only be found in
+				- Standard packs
+				- Spectral cards that spawn cards (Grim, Incantation, and Familiar)
+			</td>
+		</tr>
+		</tbody>
+	</table>
+</div>

package.json

@@ -83,6 +83,7 @@
     "recharts": "^2.15.2",
     "remeda": "^2.21.2",
     "server-only": "^0.0.1",
+    "slugify": "^1.6.6",
     "sonner": "^2.0.3",
     "superjson": "^2.2.1",
     "tailwind-merge": "^3.1.0",

src/app/_components/chance.tsx

@@ -0,0 +1,7 @@
+import { cn } from '@/lib/utils'
+
+export function Chance({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span className={cn('font-medium text-[#35bd86]', className)} {...props} />
+  )
+}

src/app/_components/chips.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+
+export function Chips({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span className={cn('font-medium text-[#0093ff]', className)} {...props} />
+  )
+}

src/app/_components/hands.tsx

@@ -0,0 +1,9 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+
+export function Hands({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span className={cn('font-medium text-[#ff8f00]', className)} {...props} />
+  )
+}

src/app/_components/joker-card.tsx

@@ -0,0 +1,27 @@
+'use client'
+
+import type { ElementType } from 'react'
+import slugify from 'slugify'
+
+type JokerCardProps = {
+  name: string
+  img: string
+  h?: number
+}
+
+export function JokerCard({ name, img, h = 3 }: JokerCardProps) {
+  const Heading = `h${h}` as ElementType
+  return (
+    <div
+      className={'flex scroll-mt-36 flex-col items-center gap-2'}
+      id={`${slugify(name, { lower: true, strict: true })}-toc`}
+    >
+      <img src={img} alt={name} className={'!m-0 max-w-24 rounded-md'} />
+      <div className={'flex flex-col gap-1'}>
+        <Heading className={'!m-0 text-nowrap font-medium text-sm'}>
+          {name}
+        </Heading>
+      </div>
+    </div>
+  )
+}

src/app/_components/money.tsx

@@ -0,0 +1,7 @@
+import { cn } from '@/lib/utils'
+
+export function Money({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span className={cn('font-medium text-[#f5b244]', className)} {...props} />
+  )
+}

src/app/_components/mult.tsx

@@ -0,0 +1,7 @@
+import { cn } from '@/lib/utils'
+
+export function Mult({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span className={cn('font-medium text-[#ff4c40]', className)} {...props} />
+  )
+}

src/app/_components/spectral.tsx

@@ -0,0 +1,10 @@
+import { cn } from '@/lib/utils'
+
+export function Spectral({
+  className,
+  ...props
+}: React.ComponentProps<'span'>) {
+  return (
+    <span className={cn('font-medium text-[#2e76fd]', className)} {...props} />
+  )
+}

src/app/_components/xmult.tsx

@@ -0,0 +1,15 @@
+'use client'
+
+import { cn } from '@/lib/utils'
+
+export function Xmult({ className, ...props }: React.ComponentProps<'span'>) {
+  return (
+    <span
+      className={cn(
+        'rounded-md bg-[#ff4c40] px-1 font-medium text-white',
+        className
+      )}
+      {...props}
+    />
+  )
+}

src/app/docs/[[...slug]]/page.tsx

@@ -1,4 +1,13 @@
+import { Chance } from '@/app/_components/chance'
+import { Chips } from '@/app/_components/chips'
+import { Hands } from '@/app/_components/hands'
+import { JokerCard } from '@/app/_components/joker-card'
+import { Money } from '@/app/_components/money'
+import { Mult } from '@/app/_components/mult'
+import { Spectral } from '@/app/_components/spectral'
+import { Xmult } from '@/app/_components/xmult'
 import { Button } from '@/components/ui/button'
+import { CDN_URL } from '@/shared/constants'
 import { ImageZoom } from 'fumadocs-ui/components/image-zoom'
 import defaultMdxComponents from 'fumadocs-ui/mdx'
 import {
@@ -21,15 +30,47 @@ export default async function Page(props: {
   const MDX = page.data.body
 
   return (
-    <DocsPage toc={page.data.toc} full={page.data.full}>
+    <DocsPage
+      toc={page.data.toc}
+      tableOfContent={{
+        style: 'clerk',
+      }}
+      full={page.data.full}
+    >
       <DocsTitle>{page.data.title}</DocsTitle>
       <DocsDescription>{page.data.description}</DocsDescription>
       <DocsBody>
         <MDX
           components={{
             ...defaultMdxComponents,
-            img: (props) => <ImageZoom {...(props as any)} />,
+            img: (props) => {
+              const isDev =
+                process.env.NODE_ENV === 'development' ||
+                process.env.IS_PREVIEW === 'true'
+              if (isDev) {
+                return <ImageZoom {...props} />
+              }
+
+              return (
+                <ImageZoom
+                  {...(props as any)}
+                  src={
+                    props.src.startsWith('/')
+                      ? `${CDN_URL}${props.src}`
+                      : props.src
+                  }
+                />
+              )
+            },
             Button: (props) => <Button {...(props as any)} />,
+            JokerCard: (props) => <JokerCard {...(props as any)} />,
+            Chips: (props) => <Chips {...(props as any)} />,
+            Hands: (props) => <Hands {...(props as any)} />,
+            Chance: (props) => <Chance {...(props as any)} />,
+            Money: (props) => <Money {...(props as any)} />,
+            Xmult: (props) => <Xmult {...(props as any)} />,
+            Spectral: (props) => <Spectral {...(props as any)} />,
+            Mult: (props) => <Mult {...(props as any)} />,
           }}
         />
       </DocsBody>

src/components/optimized-image.tsx

@@ -0,0 +1,14 @@
+'use client'
+
+import { CDN_URL } from '@/shared/constants'
+import type { ComponentPropsWithoutRef } from 'react'
+
+export function OptimizedImage(props: ComponentPropsWithoutRef<'img'>) {
+  const isDev = process.env.NODE_ENV === 'development'
+
+  if (isDev) {
+    return <img {...props} />
+  }
+
+  return <img {...props} src={`${CDN_URL}${props.src}`} alt={props.alt} />
+}

src/shared/constants.ts

@@ -1,2 +1,4 @@
 export const RANKED_CHANNEL = '1352157545547960350'
 export const VANILLA_CHANNEL = '1341599300022567014'
+
+export const CDN_URL = 'https://balatromp.b-cdn.net'