diff --git a/src/pages/Home/index.jsx b/src/pages/Home/index.jsx index 02d7399..b034d32 100644 --- a/src/pages/Home/index.jsx +++ b/src/pages/Home/index.jsx @@ -1,4 +1,4 @@ -import { useState } from 'react'; +import { useEffect, useMemo, useState } from 'react'; import Message from '../../components/Message'; import useSetLocation from '../../utils/use-set-location'; @@ -6,6 +6,22 @@ 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 (

斗地主

-
+
{ + event.preventDefault(); + }} + >
-
-
- -
+
+ + + {recentRooms.length > 0 && ( +
+ 最近进入过的房间: + {recentRooms.map((roomId) => ( +
+ 🏠 {roomId} + +
+ ))} +
+ )}
); }; diff --git a/src/pages/Room/GamingRoom/index.jsx b/src/pages/Room/GamingRoom/index.jsx index 718f9bd..793033a 100644 --- a/src/pages/Room/GamingRoom/index.jsx +++ b/src/pages/Room/GamingRoom/index.jsx @@ -18,7 +18,7 @@ const GamingRoom = (props) => { )} {isCreator && ( -
+
)} - {isPlayer && game.state === 1 && ( -
- -
- )} - {isPlayer && game.state === 2 && ( -
- -
- )} { /> {isPlayer && (
-
- +
+ {isPlayer && game.state === 1 && ( + + )} + {isPlayer && game.state === 2 && ( +
+ + +
+ )}
{ + 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 ; - } - if (room.state === 1) { - return ; - } - return null; + return ( + <> + {room.state === 0 ? ( + + ) : room.state === 1 ? ( + + ) : null} + + + ); }; export default Room; diff --git a/src/utils/poker.js b/src/utils/poker.js index 2202bdf..0c4e1ae 100644 --- 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]; }