优化样式，增加房间缓存

HullQin · Oct 6, 2021 · 99da046 · 99da046
1 parent 9c217a3
commit 99da046
Show file tree

Hide file tree

Showing 4 changed files with 101 additions and 50 deletions.
diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx
@@ -1,11 +1,27 @@
-import { useState } from 'react';
+import { useEffect, useMemo, useState } from 'react';
 import Message from '../../components/Message';
 import useSetLocation from '../../utils/use-set-location';
 
 const Home = () => {
   const [disabled, setDisabled] = useState(false);
   const setLocation = useSetLocation();
 
+  const recentRooms = useMemo(() => {
+    try {
+      const rooms = JSON.parse(window.localStorage.getItem('rooms'));
+      if (Array.isArray(rooms) && rooms.every(item => typeof item === 'string')) {
+        return rooms;
+      }
+    } catch {
+    }
+    window.localStorage.removeItem('rooms');
+    return [];
+  }, []);
+
+  useEffect(() => {
+    document.getElementById('roomId').focus();
+  }, []);
+
   const handleSubmit = () => {
     const element = document.getElementById('roomId');
     const roomId = element.value.replace(/ /g, '');
@@ -21,14 +37,28 @@ const Home = () => {
   return (
     <div style={{ textAlign: 'center' }}>
       <h1 style={{ marginTop: 0, paddingTop: 21 }}>斗地主</h1>
-      <div>
+      <form
+        onSubmit={(event) => {
+          event.preventDefault();
+        }}
+      >
         <label htmlFor='roomId'>请输入房间号：</label>
         <br/>
         <input id='roomId' />
-      </div>
-      <div style={{ marginTop: 24 }}>
-        <button disabled={disabled} onClick={handleSubmit}>进入房间</button>
-      </div>
+        <br/>
+        <button style={{ marginTop: 16, fontSize: 18 }} type='submit' disabled={disabled} onClick={handleSubmit}>进入房间</button>
+      </form>
+      {recentRooms.length > 0 && (
+        <div style={{ marginTop: 36 }}>
+          最近进入过的房间：
+          {recentRooms.map((roomId) => (
+            <div key={roomId} style={{ margin: '6px auto', maxWidth: 330, display: 'flex', justifyContent: 'space-between' }}>
+              <span style={{ textOverflow: 'ellipsis', maxWidth: 220, overflowX: 'hidden' }}>🏠 {roomId}</span>
+              <button onClick={() => setLocation(`/${roomId}`)}>点此进入</button>
+            </div>
+          ))}
+        </div>
+      )}
     </div>
   );
 };

diff --git a/src/pages/Room/GamingRoom/index.jsx b/src/pages/Room/GamingRoom/index.jsx
@@ -18,7 +18,7 @@ const GamingRoom = (props) => {
         <StaticPokerList ids={game.revealed} height={58} />
       )}
       {isCreator && (
-        <div style={{ position: 'absolute', top: 0, right: 0}}>
+        <div style={{ position: 'absolute', top: 58, right: 0}}>
           <button
             onClick={() => {
               if (window.confirm('当前对局记录将清空，确定要重新开局？')) {
@@ -30,23 +30,6 @@ const GamingRoom = (props) => {
           </button>
         </div>
       )}
-      {isPlayer && game.state === 1 && (
-        <div>
-          <button onClick={() => sendData('user.call.landlord')}>
-            抢地主
-          </button>
-        </div>
-      )}
-      {isPlayer && game.state === 2 && (
-        <div>
-          <button
-            disabled={game.last[seat].length === 0}
-            onClick={() => sendData('user.withdraw.card')}
-          >
-            收回刚出的牌
-          </button>
-        </div>
-      )}
       <SeatList
         className='room-seat'
         vertical
@@ -66,18 +49,31 @@ const GamingRoom = (props) => {
       />
       {isPlayer && (
         <div style={{ height: 30 + 88 }}>
-          <div style={{ height: 30, marginLeft: 24 }}>
-            <button
-              style={{ fontSize: 18 }}
-              disabled={game.state !== 2}
-              onClick={() => {
-                if (selectedCards.current.length > 0) {
-                  sendData('user.drop.card', { cards: selectedCards.current });
-                }
-              }}
-            >
-              出牌{game.state !== 2 ? '（请先抢地主）' : ''}
-            </button>
+          <div style={{ height: 30, margin: '0 24px', fontSize: 18 }}>
+            {isPlayer && game.state === 1 && (
+              <button onClick={() => sendData('user.call.landlord')}>
+                抢地主
+              </button>
+            )}
+            {isPlayer && game.state === 2 && (
+              <div style={{ display: 'flex', justifyContent: 'space-around' }}>
+                <button
+                  onClick={() => {
+                    if (selectedCards.current.length > 0) {
+                      sendData('user.drop.card', { cards: selectedCards.current });
+                    }
+                  }}
+                >
+                  出牌
+                </button>
+                <button
+                  disabled={game.last[seat].length === 0}
+                  onClick={() => sendData('user.withdraw.card')}
+                >
+                  收回刚出的牌
+                </button>
+              </div>
+            )}
           </div>
           <PokerList
             height={70}

diff --git a/src/pages/Room/index.jsx b/src/pages/Room/index.jsx
@@ -4,8 +4,10 @@ import Message from '../../components/Message';
 import { addHandler, connect, disconnect } from '../../utils/websocket';
 import WaitingRoom from './WaitingRoom';
 import GamingRoom from './GamingRoom';
+import useSetLocation from '../../utils/use-set-location';
 
 const Room = () => {
+  const setLocation = useSetLocation();
   // room_id 不可变；只能先退出房间再进入新房间
   const [room, setRoom] = useImmer(() => ({
     id: window.location.pathname.substr(1),
@@ -25,6 +27,26 @@ const Room = () => {
     landlord: null,
   }));
 
+  useEffect(() => {
+    try {
+      const rooms = JSON.parse(window.localStorage.getItem('rooms'));
+      if (Array.isArray(rooms) && rooms.every(item => typeof item === 'string')) {
+        const index = rooms.indexOf(room.id);
+        if (index !== -1) {
+          rooms.splice(index, 1);
+        }
+        rooms.splice(0, 0, room.id);
+        if (rooms.length > 10) {
+          rooms.length = 10;
+        }
+        window.localStorage.setItem('rooms', JSON.stringify(rooms));
+        return;
+      }
+    } catch {
+    }
+    window.localStorage.setItem('rooms', JSON.stringify([room.id]));
+  }, []);
+
   const setRoomPlayer = (seat, user) => {
     setRoom((room) => {
       room.players[seat] = user;
@@ -136,13 +158,16 @@ const Room = () => {
     };
   }, []);
 
-  if (room.state === 0) {
-    return <WaitingRoom room={room} seat={seat} />;
-  }
-  if (room.state === 1) {
-    return <GamingRoom room={room} game={game} seat={seat} />;
-  }
-  return null;
+  return (
+    <>
+      {room.state === 0 ? (
+        <WaitingRoom room={room} seat={seat} />
+      ) : room.state === 1 ? (
+        <GamingRoom room={room} game={game} seat={seat} />
+      ) : null}
+      <button style={{ position: 'absolute', top: 0, right: 0 }} onClick={() => setLocation('/')}>重选房间</button>
+    </>
+  );
 };
 
 export default Room;
diff --git a/src/utils/poker.js b/src/utils/poker.js
@@ -1,4 +1,5 @@
 const pokerMap = [0, 14.2, 15.2, 3.2, 4.2, 5.2, 6.2, 7.2, 8.2, 9.2, 10.2, 11.2, 12.2, 13.2, 14.4, 15.4, 3.4, 4.4, 5.4, 6.4, 7.4, 8.4, 9.4, 10.4, 11.4, 12.4, 13.4, 14.6, 15.6, 3.6, 4.6, 5.6, 6.6, 7.6, 8.6, 9.6, 10.6, 11.6, 12.6, 13.6, 14.8, 15.8, 3.8, 4.8, 5.8, 6.8, 7.8, 8.8, 9.8, 10.8, 11.8, 12.8, 13.8, 54, 53];
+const pokerNumberMap = [0, 14, 15, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 54, 53];
 
 const mapPokerIdToCardId = (id) => {
   // 映射扑克id（可能有多幅牌）至卡片id（只有0-54）
@@ -12,19 +13,18 @@ const sortPokersById = (ids) => {
 const sortPokersByRule = (ids) => {
   const frequency = {};
   for (const id of ids) {
-    const cardId = mapPokerIdToCardId(id);
-    if (cardId in frequency) {
-      frequency[cardId] += 1;
+    const cardNumber = pokerNumberMap[mapPokerIdToCardId(id)];
+    if (cardNumber in frequency) {
+      frequency[cardNumber] += 1;
     } else {
-      frequency[cardId] = 1;
+      frequency[cardNumber] = 1;
     }
   }
-  console.log(frequency);
   return ids.sort((a, b) => {
     a = mapPokerIdToCardId(a);
     b = mapPokerIdToCardId(b);
-    const frequencyA = frequency[a];
-    const frequencyB = frequency[b];
+    const frequencyA = frequency[pokerNumberMap[a]];
+    const frequencyB = frequency[pokerNumberMap[b]];
     if (frequencyA === frequencyB) {
       return pokerMap[a] - pokerMap[b];
     }