From 3abc325ea27feee5c4cc59f02296ff218f342a81 Mon Sep 17 00:00:00 2001
From: Thomas Hallock <thomas@evolutioniq.com>
Date: Sun, 2 Nov 2025 06:22:59 -0600
Subject: [PATCH] refactor(rithmomachia): extract reusable components from
 SetupPhase
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Extract three reusable components from SetupPhase.tsx to eliminate code
duplication and improve maintainability.

**Components Created:**
- GameRuleCard.tsx (94 lines): Reusable card component for game settings
  - Replaces 4 nearly identical card implementations
  - Supports enabled/disabled states with visual feedback
  - Accepts optional children for custom content (e.g., threshold input)
- SetupHeader.tsx (155 lines): Medieval-style ornamental header
  - Title, subtitle, decorative corners, and guide button
- StartButton.tsx (73 lines): Dramatic start button with animations

**Impact:**
- SetupPhase.tsx: 759 → 308 lines (59% reduction, -451 lines)
- Eliminated ~480 lines of duplicate JSX across 4 game rule cards
- Improved component reusability and consistency
- Cleaner, more maintainable codebase

**Testing:**
- Pre-commit checks passed (format, lint)
- TypeScript: No new errors in changed files
- Ready for manual testing

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../components/phases/GameRuleCard.tsx        |  93 ++++
 .../components/phases/SetupHeader.tsx         | 153 ++++++
 .../components/phases/SetupPhase.tsx          | 509 +-----------------
 .../components/phases/StartButton.tsx         |  71 +++
 4 files changed, 346 insertions(+), 480 deletions(-)
 create mode 100644 apps/web/src/arcade-games/rithmomachia/components/phases/GameRuleCard.tsx
 create mode 100644 apps/web/src/arcade-games/rithmomachia/components/phases/SetupHeader.tsx
 create mode 100644 apps/web/src/arcade-games/rithmomachia/components/phases/StartButton.tsx

diff --git a/apps/web/src/arcade-games/rithmomachia/components/phases/GameRuleCard.tsx b/apps/web/src/arcade-games/rithmomachia/components/phases/GameRuleCard.tsx
new file mode 100644
index 00000000..6603b3dc
--- /dev/null
+++ b/apps/web/src/arcade-games/rithmomachia/components/phases/GameRuleCard.tsx
@@ -0,0 +1,93 @@
+import type { ReactNode } from 'react'
+import { css } from '../../../../../styled-system/css'
+
+export interface GameRuleCardProps {
+  title: string
+  description: string
+  enabled: boolean
+  onClick: () => void
+  dataAttribute?: string
+  children?: ReactNode
+}
+
+export function GameRuleCard({
+  title,
+  description,
+  enabled,
+  onClick,
+  dataAttribute,
+  children,
+}: GameRuleCardProps) {
+  return (
+    <div
+      data-setting={dataAttribute}
+      onClick={onClick}
+      className={css({
+        display: 'flex',
+        flexDirection: children ? 'column' : 'row',
+        gap: children ? '1vh' : undefined,
+        justifyContent: children ? undefined : 'space-between',
+        alignItems: children ? undefined : 'center',
+        p: '1.5vh',
+        bg: enabled ? 'rgba(251, 191, 36, 0.25)' : 'rgba(139, 92, 246, 0.1)',
+        borderRadius: '1vh',
+        border: '0.3vh solid',
+        borderColor: enabled ? 'rgba(251, 191, 36, 0.8)' : 'rgba(139, 92, 246, 0.3)',
+        transition: 'all 0.3s ease',
+        cursor: 'pointer',
+        position: 'relative',
+        overflow: 'hidden',
+        boxShadow: enabled
+          ? '0 0.5vh 2vh rgba(251, 191, 36, 0.4)'
+          : '0 0.2vh 0.5vh rgba(0,0,0,0.1)',
+        _hover: {
+          bg: enabled ? 'rgba(251, 191, 36, 0.35)' : 'rgba(139, 92, 246, 0.2)',
+          borderColor: enabled ? 'rgba(251, 191, 36, 1)' : 'rgba(139, 92, 246, 0.5)',
+          transform: 'translateY(-0.2vh)',
+        },
+        _active: {
+          transform: 'scale(0.98)',
+        },
+      })}
+    >
+      <div
+        className={css({
+          display: 'flex',
+          justifyContent: 'space-between',
+          alignItems: 'center',
+          flex: children ? undefined : 1,
+        })}
+      >
+        <div className={css({ flex: 1, pointerEvents: 'none' })}>
+          <div
+            className={css({
+              fontWeight: 'bold',
+              fontSize: '1.6vh',
+              color: enabled ? '#92400e' : '#7c2d12',
+            })}
+          >
+            {enabled && '✓ '}
+            {title}
+          </div>
+          <div className={css({ fontSize: '1.3vh', color: '#78350f' })}>{description}</div>
+        </div>
+        {enabled && (
+          <div
+            className={css({
+              position: 'absolute',
+              top: 0,
+              right: 0,
+              width: '4vh',
+              height: '4vh',
+              borderRadius: '0 1vh 0 100%',
+              bg: 'rgba(251, 191, 36, 0.4)',
+              pointerEvents: 'none',
+            })}
+          />
+        )}
+      </div>
+
+      {children}
+    </div>
+  )
+}
diff --git a/apps/web/src/arcade-games/rithmomachia/components/phases/SetupHeader.tsx b/apps/web/src/arcade-games/rithmomachia/components/phases/SetupHeader.tsx
new file mode 100644
index 00000000..a70c7bc5
--- /dev/null
+++ b/apps/web/src/arcade-games/rithmomachia/components/phases/SetupHeader.tsx
@@ -0,0 +1,153 @@
+import { css } from '../../../../../styled-system/css'
+
+export interface SetupHeaderProps {
+  onOpenGuide: () => void
+}
+
+export function SetupHeader({ onOpenGuide }: SetupHeaderProps) {
+  return (
+    <div
+      data-element="title-section"
+      className={css({
+        textAlign: 'center',
+        bg: 'rgba(255, 255, 255, 0.95)',
+        borderRadius: '1.5vh',
+        p: '1.5vh',
+        boxShadow: '0 1vh 3vh rgba(0,0,0,0.5)',
+        width: '100%',
+        position: 'relative',
+        border: '0.3vh solid',
+        borderColor: 'rgba(251, 191, 36, 0.6)',
+        backdropFilter: 'blur(10px)',
+        flexShrink: 0,
+      })}
+    >
+      {/* Ornamental corners */}
+      <div
+        className={css({
+          position: 'absolute',
+          top: '-0.5vh',
+          left: '-0.5vh',
+          width: '2.5vh',
+          height: '2.5vh',
+          borderTop: '0.3vh solid',
+          borderLeft: '0.3vh solid',
+          borderColor: 'rgba(251, 191, 36, 0.8)',
+          borderRadius: '1.5vh 0 0 0',
+        })}
+      />
+      <div
+        className={css({
+          position: 'absolute',
+          top: '-0.5vh',
+          right: '-0.5vh',
+          width: '2.5vh',
+          height: '2.5vh',
+          borderTop: '0.3vh solid',
+          borderRight: '0.3vh solid',
+          borderColor: 'rgba(251, 191, 36, 0.8)',
+          borderRadius: '0 1.5vh 0 0',
+        })}
+      />
+      <div
+        className={css({
+          position: 'absolute',
+          bottom: '-0.5vh',
+          left: '-0.5vh',
+          width: '2.5vh',
+          height: '2.5vh',
+          borderBottom: '0.3vh solid',
+          borderLeft: '0.3vh solid',
+          borderColor: 'rgba(251, 191, 36, 0.8)',
+          borderRadius: '0 0 0 1.5vh',
+        })}
+      />
+      <div
+        className={css({
+          position: 'absolute',
+          bottom: '-0.5vh',
+          right: '-0.5vh',
+          width: '2.5vh',
+          height: '2.5vh',
+          borderBottom: '0.3vh solid',
+          borderRight: '0.3vh solid',
+          borderColor: 'rgba(251, 191, 36, 0.8)',
+          borderRadius: '0 0 1.5vh 0',
+        })}
+      />
+
+      <h1
+        className={css({
+          fontSize: '3.5vh',
+          fontWeight: 'bold',
+          mb: '0.5vh',
+          color: '#7c2d12',
+          textShadow: '0.15vh 0.15vh 0 rgba(251, 191, 36, 0.5), 0.3vh 0.3vh 0.5vh rgba(0,0,0,0.3)',
+          letterSpacing: '0.2vh',
+        })}
+      >
+        ⚔️ RITHMOMACHIA ⚔️
+      </h1>
+      <div
+        className={css({
+          height: '0.2vh',
+          width: '60%',
+          margin: '0 auto 0.5vh',
+          background: 'linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.8), transparent)',
+        })}
+      />
+      <p
+        className={css({
+          color: '#92400e',
+          fontSize: '1.8vh',
+          fontWeight: 'bold',
+          mb: '0.3vh',
+          fontStyle: 'italic',
+        })}
+      >
+        The Philosopher's Game
+      </p>
+      <p
+        className={css({
+          color: '#78350f',
+          fontSize: '1.2vh',
+          lineHeight: '1.4',
+          fontWeight: '500',
+          mb: '0.8vh',
+        })}
+      >
+        Win by forming mathematical progressions in enemy territory
+      </p>
+      <button
+        type="button"
+        data-action="open-guide"
+        onClick={onOpenGuide}
+        className={css({
+          bg: 'linear-gradient(135deg, #7c2d12, #92400e)',
+          color: 'white',
+          border: '2px solid rgba(251, 191, 36, 0.6)',
+          borderRadius: '0.8vh',
+          px: '1.5vh',
+          py: '0.8vh',
+          fontSize: '1.3vh',
+          fontWeight: 'bold',
+          cursor: 'pointer',
+          transition: 'all 0.2s',
+          display: 'flex',
+          alignItems: 'center',
+          gap: '0.5vh',
+          mx: 'auto',
+          boxShadow: '0 0.3vh 0.8vh rgba(0, 0, 0, 0.3)',
+          _hover: {
+            bg: 'linear-gradient(135deg, #92400e, #7c2d12)',
+            transform: 'translateY(-0.2vh)',
+            boxShadow: '0 0.5vh 1.2vh rgba(0, 0, 0, 0.4)',
+          },
+        })}
+      >
+        <span>📖</span>
+        <span>How to Play</span>
+      </button>
+    </div>
+  )
+}
diff --git a/apps/web/src/arcade-games/rithmomachia/components/phases/SetupPhase.tsx b/apps/web/src/arcade-games/rithmomachia/components/phases/SetupPhase.tsx
index ed08cc1f..d7b9b8fb 100644
--- a/apps/web/src/arcade-games/rithmomachia/components/phases/SetupPhase.tsx
+++ b/apps/web/src/arcade-games/rithmomachia/components/phases/SetupPhase.tsx
@@ -5,6 +5,9 @@ import { useGameMode } from '@/contexts/GameModeContext'
 import { css } from '../../../../../styled-system/css'
 import { useRithmomachia } from '../../Provider'
 import type { RithmomachiaConfig } from '../../types'
+import { GameRuleCard } from './GameRuleCard'
+import { SetupHeader } from './SetupHeader'
+import { StartButton } from './StartButton'
 
 export interface SetupPhaseProps {
   onOpenGuide: () => void
@@ -164,152 +167,7 @@ export function SetupPhase({ onOpenGuide }: SetupPhaseProps) {
         {/* Only show setup config when we have enough players */}
         {rosterStatus.status !== 'tooFew' && (
           <>
-            {/* Title Section - Compact medieval manuscript style */}
-            <div
-              data-element="title-section"
-              className={css({
-                textAlign: 'center',
-                bg: 'rgba(255, 255, 255, 0.95)',
-                borderRadius: '1.5vh',
-                p: '1.5vh',
-                boxShadow: '0 1vh 3vh rgba(0,0,0,0.5)',
-                width: '100%',
-                position: 'relative',
-                border: '0.3vh solid',
-                borderColor: 'rgba(251, 191, 36, 0.6)',
-                backdropFilter: 'blur(10px)',
-                flexShrink: 0,
-              })}
-            >
-              {/* Ornamental corners - smaller */}
-              <div
-                className={css({
-                  position: 'absolute',
-                  top: '-0.5vh',
-                  left: '-0.5vh',
-                  width: '2.5vh',
-                  height: '2.5vh',
-                  borderTop: '0.3vh solid',
-                  borderLeft: '0.3vh solid',
-                  borderColor: 'rgba(251, 191, 36, 0.8)',
-                  borderRadius: '1.5vh 0 0 0',
-                })}
-              />
-              <div
-                className={css({
-                  position: 'absolute',
-                  top: '-0.5vh',
-                  right: '-0.5vh',
-                  width: '2.5vh',
-                  height: '2.5vh',
-                  borderTop: '0.3vh solid',
-                  borderRight: '0.3vh solid',
-                  borderColor: 'rgba(251, 191, 36, 0.8)',
-                  borderRadius: '0 1.5vh 0 0',
-                })}
-              />
-              <div
-                className={css({
-                  position: 'absolute',
-                  bottom: '-0.5vh',
-                  left: '-0.5vh',
-                  width: '2.5vh',
-                  height: '2.5vh',
-                  borderBottom: '0.3vh solid',
-                  borderLeft: '0.3vh solid',
-                  borderColor: 'rgba(251, 191, 36, 0.8)',
-                  borderRadius: '0 0 0 1.5vh',
-                })}
-              />
-              <div
-                className={css({
-                  position: 'absolute',
-                  bottom: '-0.5vh',
-                  right: '-0.5vh',
-                  width: '2.5vh',
-                  height: '2.5vh',
-                  borderBottom: '0.3vh solid',
-                  borderRight: '0.3vh solid',
-                  borderColor: 'rgba(251, 191, 36, 0.8)',
-                  borderRadius: '0 0 1.5vh 0',
-                })}
-              />
-
-              <h1
-                className={css({
-                  fontSize: '3.5vh',
-                  fontWeight: 'bold',
-                  mb: '0.5vh',
-                  color: '#7c2d12',
-                  textShadow:
-                    '0.15vh 0.15vh 0 rgba(251, 191, 36, 0.5), 0.3vh 0.3vh 0.5vh rgba(0,0,0,0.3)',
-                  letterSpacing: '0.2vh',
-                })}
-              >
-                ⚔️ RITHMOMACHIA ⚔️
-              </h1>
-              <div
-                className={css({
-                  height: '0.2vh',
-                  width: '60%',
-                  margin: '0 auto 0.5vh',
-                  background:
-                    'linear-gradient(90deg, transparent, rgba(251, 191, 36, 0.8), transparent)',
-                })}
-              />
-              <p
-                className={css({
-                  color: '#92400e',
-                  fontSize: '1.8vh',
-                  fontWeight: 'bold',
-                  mb: '0.3vh',
-                  fontStyle: 'italic',
-                })}
-              >
-                The Philosopher's Game
-              </p>
-              <p
-                className={css({
-                  color: '#78350f',
-                  fontSize: '1.2vh',
-                  lineHeight: '1.4',
-                  fontWeight: '500',
-                  mb: '0.8vh',
-                })}
-              >
-                Win by forming mathematical progressions in enemy territory
-              </p>
-              <button
-                type="button"
-                data-action="open-guide"
-                onClick={onOpenGuide}
-                className={css({
-                  bg: 'linear-gradient(135deg, #7c2d12, #92400e)',
-                  color: 'white',
-                  border: '2px solid rgba(251, 191, 36, 0.6)',
-                  borderRadius: '0.8vh',
-                  px: '1.5vh',
-                  py: '0.8vh',
-                  fontSize: '1.3vh',
-                  fontWeight: 'bold',
-                  cursor: 'pointer',
-                  transition: 'all 0.2s',
-                  display: 'flex',
-                  alignItems: 'center',
-                  gap: '0.5vh',
-                  mx: 'auto',
-                  boxShadow: '0 0.3vh 0.8vh rgba(0, 0, 0, 0.3)',
-                  _hover: {
-                    bg: 'linear-gradient(135deg, #92400e, #7c2d12)',
-                    transform: 'translateY(-0.2vh)',
-                    boxShadow: '0 0.5vh 1.2vh rgba(0, 0, 0, 0.4)',
-                  },
-                })}
-              >
-                <span>📖</span>
-                <span>How to Play</span>
-              </button>
-            </div>
+            <SetupHeader onOpenGuide={onOpenGuide} />
 
             {/* Game Settings - Compact with flex: 1 to take remaining space */}
             <div
@@ -356,82 +214,13 @@ export function SetupPhase({ onOpenGuide }: SetupPhaseProps) {
                   alignContent: 'start',
                 })}
               >
-                {/* Point Victory */}
-                <div
-                  data-setting="point-victory"
+                <GameRuleCard
+                  title="Point Victory"
+                  description={`Win at ${state.pointWinThreshold}pts`}
+                  enabled={state.pointWinEnabled}
                   onClick={() => toggleSetting('pointWinEnabled')}
-                  className={css({
-                    display: 'flex',
-                    flexDirection: 'column',
-                    gap: '1vh',
-                    p: '1.5vh',
-                    bg: state.pointWinEnabled
-                      ? 'rgba(251, 191, 36, 0.25)'
-                      : 'rgba(139, 92, 246, 0.1)',
-                    borderRadius: '1vh',
-                    border: '0.3vh solid',
-                    borderColor: state.pointWinEnabled
-                      ? 'rgba(251, 191, 36, 0.8)'
-                      : 'rgba(139, 92, 246, 0.3)',
-                    transition: 'all 0.3s ease',
-                    cursor: 'pointer',
-                    position: 'relative',
-                    overflow: 'hidden',
-                    boxShadow: state.pointWinEnabled
-                      ? '0 0.5vh 2vh rgba(251, 191, 36, 0.4)'
-                      : '0 0.2vh 0.5vh rgba(0,0,0,0.1)',
-                    _hover: {
-                      bg: state.pointWinEnabled
-                        ? 'rgba(251, 191, 36, 0.35)'
-                        : 'rgba(139, 92, 246, 0.2)',
-                      borderColor: state.pointWinEnabled
-                        ? 'rgba(251, 191, 36, 1)'
-                        : 'rgba(139, 92, 246, 0.5)',
-                      transform: 'translateY(-0.2vh)',
-                    },
-                    _active: {
-                      transform: 'scale(0.98)',
-                    },
-                  })}
+                  dataAttribute="point-victory"
                 >
-                  <div
-                    className={css({
-                      display: 'flex',
-                      justifyContent: 'space-between',
-                      alignItems: 'center',
-                    })}
-                  >
-                    <div className={css({ flex: 1, pointerEvents: 'none' })}>
-                      <div
-                        className={css({
-                          fontWeight: 'bold',
-                          fontSize: '1.6vh',
-                          color: state.pointWinEnabled ? '#92400e' : '#7c2d12',
-                        })}
-                      >
-                        {state.pointWinEnabled && '✓ '}Point Victory
-                      </div>
-                      <div className={css({ fontSize: '1.3vh', color: '#78350f' })}>
-                        Win at {state.pointWinThreshold}pts
-                      </div>
-                    </div>
-                    {state.pointWinEnabled && (
-                      <div
-                        className={css({
-                          position: 'absolute',
-                          top: 0,
-                          right: 0,
-                          width: '4vh',
-                          height: '4vh',
-                          borderRadius: '0 1vh 0 100%',
-                          bg: 'rgba(251, 191, 36, 0.4)',
-                          pointerEvents: 'none',
-                        })}
-                      />
-                    )}
-                  </div>
-
-                  {/* Threshold input - only visible when enabled */}
                   {state.pointWinEnabled && (
                     <div
                       data-element="threshold-input-container"
@@ -478,275 +267,35 @@ export function SetupPhase({ onOpenGuide }: SetupPhaseProps) {
                       />
                     </div>
                   )}
-                </div>
+                </GameRuleCard>
 
-                {/* Threefold Repetition */}
-                <div
-                  data-setting="threefold-repetition"
+                <GameRuleCard
+                  title="Threefold Draw"
+                  description="Same position 3x"
+                  enabled={state.repetitionRule}
                   onClick={() => toggleSetting('repetitionRule')}
-                  className={css({
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    p: '1.5vh',
-                    bg: state.repetitionRule
-                      ? 'rgba(251, 191, 36, 0.25)'
-                      : 'rgba(139, 92, 246, 0.1)',
-                    borderRadius: '1vh',
-                    border: '0.3vh solid',
-                    borderColor: state.repetitionRule
-                      ? 'rgba(251, 191, 36, 0.8)'
-                      : 'rgba(139, 92, 246, 0.3)',
-                    transition: 'all 0.3s ease',
-                    cursor: 'pointer',
-                    position: 'relative',
-                    overflow: 'hidden',
-                    boxShadow: state.repetitionRule
-                      ? '0 0.5vh 2vh rgba(251, 191, 36, 0.4)'
-                      : '0 0.2vh 0.5vh rgba(0,0,0,0.1)',
-                    _hover: {
-                      bg: state.repetitionRule
-                        ? 'rgba(251, 191, 36, 0.35)'
-                        : 'rgba(139, 92, 246, 0.2)',
-                      borderColor: state.repetitionRule
-                        ? 'rgba(251, 191, 36, 1)'
-                        : 'rgba(139, 92, 246, 0.5)',
-                      transform: 'translateY(-0.2vh)',
-                    },
-                    _active: {
-                      transform: 'scale(0.98)',
-                    },
-                  })}
-                >
-                  <div className={css({ flex: 1, pointerEvents: 'none' })}>
-                    <div
-                      className={css({
-                        fontWeight: 'bold',
-                        fontSize: '1.6vh',
-                        color: state.repetitionRule ? '#92400e' : '#7c2d12',
-                      })}
-                    >
-                      {state.repetitionRule && '✓ '}Threefold Draw
-                    </div>
-                    <div className={css({ fontSize: '1.3vh', color: '#78350f' })}>
-                      Same position 3x
-                    </div>
-                  </div>
-                  {state.repetitionRule && (
-                    <div
-                      className={css({
-                        position: 'absolute',
-                        top: 0,
-                        right: 0,
-                        width: '4vh',
-                        height: '4vh',
-                        borderRadius: '0 1vh 0 100%',
-                        bg: 'rgba(251, 191, 36, 0.4)',
-                        pointerEvents: 'none',
-                      })}
-                    />
-                  )}
-                </div>
+                  dataAttribute="threefold-repetition"
+                />
 
-                {/* Fifty Move Rule */}
-                <div
-                  data-setting="fifty-move-rule"
+                <GameRuleCard
+                  title="Fifty-Move Draw"
+                  description="50 moves no event"
+                  enabled={state.fiftyMoveRule}
                   onClick={() => toggleSetting('fiftyMoveRule')}
-                  className={css({
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    p: '1.5vh',
-                    bg: state.fiftyMoveRule
-                      ? 'rgba(251, 191, 36, 0.25)'
-                      : 'rgba(139, 92, 246, 0.1)',
-                    borderRadius: '1vh',
-                    border: '0.3vh solid',
-                    borderColor: state.fiftyMoveRule
-                      ? 'rgba(251, 191, 36, 0.8)'
-                      : 'rgba(139, 92, 246, 0.3)',
-                    transition: 'all 0.3s ease',
-                    cursor: 'pointer',
-                    position: 'relative',
-                    overflow: 'hidden',
-                    boxShadow: state.fiftyMoveRule
-                      ? '0 0.5vh 2vh rgba(251, 191, 36, 0.4)'
-                      : '0 0.2vh 0.5vh rgba(0,0,0,0.1)',
-                    _hover: {
-                      bg: state.fiftyMoveRule
-                        ? 'rgba(251, 191, 36, 0.35)'
-                        : 'rgba(139, 92, 246, 0.2)',
-                      borderColor: state.fiftyMoveRule
-                        ? 'rgba(251, 191, 36, 1)'
-                        : 'rgba(139, 92, 246, 0.5)',
-                      transform: 'translateY(-0.2vh)',
-                    },
-                    _active: {
-                      transform: 'scale(0.98)',
-                    },
-                  })}
-                >
-                  <div className={css({ flex: 1, pointerEvents: 'none' })}>
-                    <div
-                      className={css({
-                        fontWeight: 'bold',
-                        fontSize: '1.6vh',
-                        color: state.fiftyMoveRule ? '#92400e' : '#7c2d12',
-                      })}
-                    >
-                      {state.fiftyMoveRule && '✓ '}Fifty-Move Draw
-                    </div>
-                    <div className={css({ fontSize: '1.3vh', color: '#78350f' })}>
-                      50 moves no event
-                    </div>
-                  </div>
-                  {state.fiftyMoveRule && (
-                    <div
-                      className={css({
-                        position: 'absolute',
-                        top: 0,
-                        right: 0,
-                        width: '4vh',
-                        height: '4vh',
-                        borderRadius: '0 1vh 0 100%',
-                        bg: 'rgba(251, 191, 36, 0.4)',
-                        pointerEvents: 'none',
-                      })}
-                    />
-                  )}
-                </div>
+                  dataAttribute="fifty-move-rule"
+                />
 
-                {/* Harmony Persistence */}
-                <div
-                  data-setting="flexible-harmony"
+                <GameRuleCard
+                  title="Flexible Harmony"
+                  description="Any valid set"
+                  enabled={state.allowAnySetOnRecheck}
                   onClick={() => toggleSetting('allowAnySetOnRecheck')}
-                  className={css({
-                    display: 'flex',
-                    justifyContent: 'space-between',
-                    alignItems: 'center',
-                    p: '1.5vh',
-                    bg: state.allowAnySetOnRecheck
-                      ? 'rgba(251, 191, 36, 0.25)'
-                      : 'rgba(139, 92, 246, 0.1)',
-                    borderRadius: '1vh',
-                    border: '0.3vh solid',
-                    borderColor: state.allowAnySetOnRecheck
-                      ? 'rgba(251, 191, 36, 0.8)'
-                      : 'rgba(139, 92, 246, 0.3)',
-                    transition: 'all 0.3s ease',
-                    cursor: 'pointer',
-                    position: 'relative',
-                    overflow: 'hidden',
-                    boxShadow: state.allowAnySetOnRecheck
-                      ? '0 0.5vh 2vh rgba(251, 191, 36, 0.4)'
-                      : '0 0.2vh 0.5vh rgba(0,0,0,0.1)',
-                    _hover: {
-                      bg: state.allowAnySetOnRecheck
-                        ? 'rgba(251, 191, 36, 0.35)'
-                        : 'rgba(139, 92, 246, 0.2)',
-                      borderColor: state.allowAnySetOnRecheck
-                        ? 'rgba(251, 191, 36, 1)'
-                        : 'rgba(139, 92, 246, 0.5)',
-                      transform: 'translateY(-0.2vh)',
-                    },
-                    _active: {
-                      transform: 'scale(0.98)',
-                    },
-                  })}
-                >
-                  <div className={css({ flex: 1, pointerEvents: 'none' })}>
-                    <div
-                      className={css({
-                        fontWeight: 'bold',
-                        fontSize: '1.6vh',
-                        color: state.allowAnySetOnRecheck ? '#92400e' : '#7c2d12',
-                      })}
-                    >
-                      {state.allowAnySetOnRecheck && '✓ '}Flexible Harmony
-                    </div>
-                    <div className={css({ fontSize: '1.3vh', color: '#78350f' })}>
-                      Any valid set
-                    </div>
-                  </div>
-                  {state.allowAnySetOnRecheck && (
-                    <div
-                      className={css({
-                        position: 'absolute',
-                        top: 0,
-                        right: 0,
-                        width: '4vh',
-                        height: '4vh',
-                        borderRadius: '0 1vh 0 100%',
-                        bg: 'rgba(251, 191, 36, 0.4)',
-                        pointerEvents: 'none',
-                      })}
-                    />
-                  )}
-                </div>
+                  dataAttribute="flexible-harmony"
+                />
               </div>
             </div>
 
-            {/* Start Button - Compact but dramatic */}
-            <button
-              type="button"
-              data-action="start-game"
-              onClick={startGame}
-              disabled={startDisabled}
-              className={css({
-                width: '100%',
-                py: '2vh',
-                bg: startDisabled
-                  ? 'rgba(100, 100, 100, 0.5)'
-                  : 'linear-gradient(135deg, rgba(251, 191, 36, 0.95) 0%, rgba(245, 158, 11, 0.95) 100%)',
-                color: startDisabled ? 'rgba(200, 200, 200, 0.7)' : '#7c2d12',
-                borderRadius: '1.5vh',
-                fontSize: '2.5vh',
-                fontWeight: 'bold',
-                cursor: startDisabled ? 'not-allowed' : 'pointer',
-                transition: 'all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
-                boxShadow: startDisabled
-                  ? '0 0.5vh 1.5vh rgba(0,0,0,0.2)'
-                  : '0 1vh 3vh rgba(251, 191, 36, 0.6), inset 0 -0.3vh 0.5vh rgba(124, 45, 18, 0.3)',
-                border: '0.3vh solid',
-                borderColor: startDisabled ? 'rgba(100, 100, 100, 0.3)' : 'rgba(245, 158, 11, 0.8)',
-                textTransform: 'uppercase',
-                letterSpacing: '0.3vh',
-                textShadow: startDisabled
-                  ? 'none'
-                  : '0.1vh 0.1vh 0.3vh rgba(124, 45, 18, 0.5), 0 0 1vh rgba(255, 255, 255, 0.3)',
-                flexShrink: 0,
-                position: 'relative',
-                overflow: 'hidden',
-                _hover: startDisabled
-                  ? undefined
-                  : {
-                      transform: 'translateY(-0.5vh) scale(1.02)',
-                      boxShadow:
-                        '0 1.5vh 4vh rgba(251, 191, 36, 0.8), inset 0 -0.3vh 0.5vh rgba(124, 45, 18, 0.4)',
-                      borderColor: 'rgba(251, 191, 36, 1)',
-                    },
-                _active: startDisabled
-                  ? undefined
-                  : {
-                      transform: 'translateY(-0.2vh) scale(0.98)',
-                    },
-                _before: startDisabled
-                  ? undefined
-                  : {
-                      content: '""',
-                      position: 'absolute',
-                      top: 0,
-                      left: '-100%',
-                      width: '100%',
-                      height: '100%',
-                      background:
-                        'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent)',
-                      animation: 'shimmer 3s infinite',
-                    },
-              })}
-            >
-              ⚔️ BEGIN BATTLE ⚔️
-            </button>
+            <StartButton onClick={startGame} disabled={startDisabled} />
           </>
         )}
       </div>
diff --git a/apps/web/src/arcade-games/rithmomachia/components/phases/StartButton.tsx b/apps/web/src/arcade-games/rithmomachia/components/phases/StartButton.tsx
new file mode 100644
index 00000000..86059e25
--- /dev/null
+++ b/apps/web/src/arcade-games/rithmomachia/components/phases/StartButton.tsx
@@ -0,0 +1,71 @@
+import { css } from '../../../../../styled-system/css'
+
+export interface StartButtonProps {
+  onClick: () => void
+  disabled: boolean
+}
+
+export function StartButton({ onClick, disabled }: StartButtonProps) {
+  return (
+    <button
+      type="button"
+      data-action="start-game"
+      onClick={onClick}
+      disabled={disabled}
+      className={css({
+        width: '100%',
+        py: '2vh',
+        bg: disabled
+          ? 'rgba(100, 100, 100, 0.5)'
+          : 'linear-gradient(135deg, rgba(251, 191, 36, 0.95) 0%, rgba(245, 158, 11, 0.95) 100%)',
+        color: disabled ? 'rgba(200, 200, 200, 0.7)' : '#7c2d12',
+        borderRadius: '1.5vh',
+        fontSize: '2.5vh',
+        fontWeight: 'bold',
+        cursor: disabled ? 'not-allowed' : 'pointer',
+        transition: 'all 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55)',
+        boxShadow: disabled
+          ? '0 0.5vh 1.5vh rgba(0,0,0,0.2)'
+          : '0 1vh 3vh rgba(251, 191, 36, 0.6), inset 0 -0.3vh 0.5vh rgba(124, 45, 18, 0.3)',
+        border: '0.3vh solid',
+        borderColor: disabled ? 'rgba(100, 100, 100, 0.3)' : 'rgba(245, 158, 11, 0.8)',
+        textTransform: 'uppercase',
+        letterSpacing: '0.3vh',
+        textShadow: disabled
+          ? 'none'
+          : '0.1vh 0.1vh 0.3vh rgba(124, 45, 18, 0.5), 0 0 1vh rgba(255, 255, 255, 0.3)',
+        flexShrink: 0,
+        position: 'relative',
+        overflow: 'hidden',
+        _hover: disabled
+          ? undefined
+          : {
+              transform: 'translateY(-0.5vh) scale(1.02)',
+              boxShadow:
+                '0 1.5vh 4vh rgba(251, 191, 36, 0.8), inset 0 -0.3vh 0.5vh rgba(124, 45, 18, 0.4)',
+              borderColor: 'rgba(251, 191, 36, 1)',
+            },
+        _active: disabled
+          ? undefined
+          : {
+              transform: 'translateY(-0.2vh) scale(0.98)',
+            },
+        _before: disabled
+          ? undefined
+          : {
+              content: '""',
+              position: 'absolute',
+              top: 0,
+              left: '-100%',
+              width: '100%',
+              height: '100%',
+              background:
+                'linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent)',
+              animation: 'shimmer 3s infinite',
+            },
+      })}
+    >
+      ⚔️ BEGIN BATTLE ⚔️
+    </button>
+  )
+}