限制顺序

src/index.css

@@ -11,3 +11,14 @@ h1 {
   margin-top: 0;
   text-align: center;
 }
+@keyframes fade {
+  from {
+    opacity: 1.0;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  to {
+    opacity: 1.0;
+  }
+}

src/pages/Room/GamingRoom/Operation.jsx

@@ -4,7 +4,7 @@ import PokerList from '../../../components/PokerList';
 import { sendData } from '../../../utils/websocket';
 
 const Operation = (props) => {
-  const { game, seat } = props;
+  const { game, room, seat } = props;
   const [selectedCards, setSelectedCards] = useImmer([]);
   const [disabled, setDisabled] = useState(false);
   const handleClick = (handler) => () => {
@@ -24,26 +24,26 @@ const Operation = (props) => {
           <div style={{ display: 'flex', justifyContent: 'space-around' }}>
             <button
               className='room-operation-main'
-              disabled={disabled || selectedCards.length === 0}
+              disabled={disabled || selectedCards.length === 0 || game.turn !== seat}
               onClick={handleClick(() => sendData('user.drop.card', { cards: selectedCards }))}
             >
               出牌
             </button>
             <button
-              disabled={disabled}
+              disabled={disabled || game.turn !== seat}
               onClick={handleClick(() => sendData('user.drop.card', { cards: [] }))}
             >
               不出
             </button>
             <button
-              disabled={disabled || game.last[seat].length === 0}
+              disabled={disabled || game.last[seat].length === 0 || game.turn - 1 !== seat % (room.players.length - 1) }
               onClick={handleClick(() => sendData('user.withdraw.card'))}
             >
               收回刚出的牌
             </button>
             <button
               className='room-operation-main'
-              disabled={disabled || selectedCards.length === 0}
+              disabled={disabled || selectedCards.length === 0 || game.turn !== seat}
               onClick={handleClick(() => sendData('user.drop.card', { cards: selectedCards }))}
             >
               出牌

src/pages/Room/GamingRoom/index.jsx

@@ -34,19 +34,19 @@ const GamingRoom = (props) => {
         vertical
         seat={seat}
         players={room.players}
-        render={(seat) => (
+        render={(_seat) => (
           <>
-            <div className='room-seat-info'>
-              <div className='room-seat-role' style={game.top === seat ? { color: 'red' } : undefined}>{game.state === 2 && game.landlord === seat ? '👲 地主' : '👨‍🌾 农民'}</div>
-              <div><span className='room-seat-rest' style={game.held[seat] < 3 ? { color: 'red' } : undefined}>{game.held[seat]}</span> 张牌</div>
+            <div className='room-seat-info' style={{ animation: _seat === seat && game.turn === seat ? 'fade 800ms infinite': undefined }}>
+              <div className='room-seat-role' style={{ color: game.turn === _seat ? 'red' : undefined }}>{game.state === 2 && game.landlord === _seat ? '👲 地主' : '👨‍🌾 农民'}</div>
+              <div><span className='room-seat-rest' style={game.held[_seat] < 3 ? { color: 'red' } : undefined}>{game.held[_seat]}</span> 张牌</div>
             </div>
             {game.state === 2 && (
-              <StaticPokerList ids={game.last[seat]} overlap sort height={58} style={{ flex: '1 0 auto', marginLeft: 24 }} />
+              <StaticPokerList ids={game.last[_seat]} overlap sort height={58} style={{ flex: '1 0 auto', marginLeft: 24, backgroundColor: game.top === _seat ? '#eee': undefined }} />
             )}
           </>
         )}
       />
-      {isPlayer && <Operation game={game} seat={seat} />}
+      {isPlayer && <Operation game={game} room={room} seat={seat} />}
     </div>
   );
 };

src/pages/Room/index.jsx

@@ -26,6 +26,7 @@ const Room = () => {
     total: 0,
     landlord: null,
     top: null,
+    turn: null,
   }));
 
   useEffect(() => {