| 20 | import { Button } from "./ui/button"; |
| 21 | |
| 22 | function getPowerLevelTheme(powerLevel: number): { |
| 23 | cardClassName: string; |
| 24 | frameClassName: string; |
| 25 | effects: ReactNode; |
| 26 | } { |
| 27 | if (powerLevel >= 10) { |
| 28 | return { |
| 29 | cardClassName: "border-purple-500 dark:bg-purple-500/30 bg-purple-500/40", |
| 30 | frameClassName: "border-purple-500", |
| 31 | effects: ( |
| 32 | <LiquidEther |
| 33 | colors={["#5227FF", "#FF9FFC", "#B19EEF"]} |
| 34 | mouseForce={20} |
| 35 | cursorSize={100} |
| 36 | isViscous={false} |
| 37 | viscous={30} |
| 38 | iterationsViscous={32} |
| 39 | iterationsPoisson={32} |
| 40 | resolution={0.5} |
| 41 | isBounce={false} |
| 42 | autoDemo={true} |
| 43 | autoSpeed={0.5} |
| 44 | autoIntensity={2.2} |
| 45 | takeoverDuration={0.25} |
| 46 | autoResumeDelay={3000} |
| 47 | autoRampDuration={0.6} |
| 48 | /> |
| 49 | ), |
| 50 | }; |
| 51 | } |
| 52 | |
| 53 | if (powerLevel >= 9) { |
| 54 | return { |
| 55 | cardClassName: "border-gray-500 dark:bg-gray-500/30 bg-gray-500/40", |
| 56 | frameClassName: "border-gray-500", |
| 57 | effects: ( |
| 58 | <LiquidChrome |
| 59 | baseColor={[0.1, 0.1, 0.1]} |
| 60 | speed={0.5} |
| 61 | amplitude={0.6} |
| 62 | interactive={true} |
| 63 | opacity={0.5} |
| 64 | /> |
| 65 | ), |
| 66 | }; |
| 67 | } |
| 68 | |
| 69 | // Mid tiers |
| 70 | if (powerLevel >= 6) { |
| 71 | return { |
| 72 | cardClassName: "border-red-500 dark:bg-red-500/30 bg-red-500/40", |
| 73 | frameClassName: "border-red-500", |
| 74 | effects: ( |
| 75 | <Balatro |
| 76 | isRotate={false} |
| 77 | mouseInteraction={true} |
| 78 | pixelFilter={700} |
| 79 | opacity={0.3} |