| 122 | `; |
| 123 | |
| 124 | export default function Balatro({ |
| 125 | spinRotation = -2.0, |
| 126 | spinSpeed = 7.0, |
| 127 | offset = [0.0, 0.0], |
| 128 | color1 = "#DE443B", |
| 129 | color2 = "#006BB4", |
| 130 | color3 = "#162325", |
| 131 | contrast = 3.5, |
| 132 | lighting = 0.4, |
| 133 | spinAmount = 0.25, |
| 134 | pixelFilter = 745.0, |
| 135 | spinEase = 1.0, |
| 136 | isRotate = false, |
| 137 | mouseInteraction = true, |
| 138 | opacity = 1, |
| 139 | }: BalatroProps) { |
| 140 | const containerRef = useRef<HTMLDivElement>(null); |
| 141 | |
| 142 | useEffect(() => { |
| 143 | if (!containerRef.current) return; |
| 144 | const container = containerRef.current; |
| 145 | |
| 146 | const canvas = document.createElement("canvas"); |
| 147 | const glContext = |
| 148 | canvas.getContext("webgl2", { |
| 149 | alpha: true, |
| 150 | preserveDrawingBuffer: true, |
| 151 | }) || |
| 152 | canvas.getContext("webgl", { |
| 153 | alpha: true, |
| 154 | preserveDrawingBuffer: true, |
| 155 | }); |
| 156 | if (!glContext) return; |
| 157 | |
| 158 | const renderer = new Renderer({ canvas, webgl: 2, alpha: true }); |
| 159 | const gl = renderer.gl; |
| 160 | gl.clearColor(0, 0, 0, 1); |
| 161 | |
| 162 | // eslint-disable-next-line prefer-const |
| 163 | let program: Program; |
| 164 | |
| 165 | function resize() { |
| 166 | renderer.setSize(container.offsetWidth, container.offsetHeight); |
| 167 | if (program) { |
| 168 | program.uniforms.iResolution.value = [ |
| 169 | gl.canvas.width, |
| 170 | gl.canvas.height, |
| 171 | gl.canvas.width / gl.canvas.height, |
| 172 | ]; |
| 173 | } |
| 174 | } |
| 175 | window.addEventListener("resize", resize); |
| 176 | resize(); |
| 177 | |
| 178 | const geometry = new Triangle(gl); |
| 179 | program = new Program(gl, { |
| 180 | vertex: vertexShader, |
| 181 | fragment: fragmentShader, |