Slot

src/pages/SlotMachine.css

+.slot-machine {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    margin-top: 100px;
+}
+
+.symbols {
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    margin-bottom: 30px;
+}
+
+.symbol {
+    font-size: 80px;
+    margin-right: 50px;
+    transition: transform 2s;
+}
+
+.symbol.spin {
+    animation: spin 2s linear infinite;
+}
+
+@keyframes spin {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+.spin-button,
+.stop-button {
+    padding: 10px 20px;
+    margin: 10px;
+    font-size: 20px;
+}
+
+.spin-button:disabled,
+.stop-button:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+}

src/pages/SlotMachine.js

+import React, { useState, useRef } from "react";
+import "./styles.css";
+
+const SlotMachine = () => {
+    const [isSpinning, setIsSpinning] = useState(false);
+    const [symbols, setSymbols] = useState(["🍎", "🍊", "🍇", "🍓", "🍉", "🍒"]);
+    const [currentSymbols, setCurrentSymbols] = useState(["?", "?", "?"]);
+    const timeoutRef = useRef(null);
+
+    const spin = () => {
+        setIsSpinning(true);
+        timeoutRef.current = setTimeout(() => {
+            setCurrentSymbols([
+                symbols[Math.floor(Math.random() * symbols.length)],
+                symbols[Math.floor(Math.random() * symbols.length)],
+                symbols[Math.floor(Math.random() * symbols.length)]
+            ]);
+            setIsSpinning(false);
+        }, 2000);
+    };
+
+    const stopSpin = () => {
+        clearTimeout(timeoutRef.current);
+        setCurrentSymbols([
+            symbols[Math.floor(Math.random() * symbols.length)],
+            symbols[Math.floor(Math.random() * symbols.length)],
+            symbols[Math.floor(Math.random() * symbols.length)]
+        ]);
+        setIsSpinning(false);
+    };
+
+    return (
+        <div className="slot-machine">
+            <div className="symbols">
+                {currentSymbols.map((symbol, index) => (
+                    <div key={index} className={`symbol ${isSpinning ? "spin" : ""}`}>
+                        {symbol}
+                    </div>
+                ))}
+            </div>
+            <button className="spin-button" onClick={spin} disabled={isSpinning}>
+                Spin
+            </button>
+            <button className="stop-button" onClick={stopSpin} disabled={!isSpinning}>
+                Stop
+            </button>
+        </div>
+    );
+};
+
+export default SlotMachine;
+