优化样式

HullQin · Oct 3, 2021 · 9c217a3 · 9c217a3
1 parent b8566c1
commit 9c217a3
Show file tree

Hide file tree

Showing 19 changed files with 129 additions and 118 deletions.
diff --git a/.gitignore b/.gitignore
@@ -1,5 +1,7 @@
 # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 .idea/
+deploy.sh
+
 # dependencies
 /node_modules
 /.pnp

diff --git a/public/index.html b/public/index.html
@@ -5,10 +5,10 @@
     <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#F0F8FF" />
-    <meta name="description" content="一副扑克牌" />
+    <meta name="description" content="三人、四人联机对战的斗地主游戏" />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <title>扑克牌</title>
+    <title>斗地主</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/manifest.json b/public/manifest.json
@@ -1,6 +1,6 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "斗地主",
+  "name": "斗地主",
   "icons": [
     {
       "src": "favicon.ico",

diff --git a/src/App.js b/src/App.js
@@ -1,40 +1,10 @@
 import { useCallback, useEffect, useState } from 'react';
-import Poker from './components/Poker';
-import PokerList from './components/PokerList';
-import Seat from './components/Seat';
-import SeatList from './components/SeatList';
 import Room from './pages/Room';
 import Home from './pages/Home';
 import { SetLocationContext } from './utils/use-set-location';
 
-// const players = [
-//   {
-//     seat: 1,
-//     name: '1',
-//     online: true,
-//     is_creator: true,
-//   },
-//   {
-//     seat: 2,
-//     name: '2',
-//     online: true,
-//     is_creator: false,
-//   },
-//   {
-//     seat: 3,
-//     name: '3',
-//     online: true,
-//     is_creator: false,
-//   },
-//   null,
-// ];
-
 const App = () => {
   const [location, setLocation] = useState(document.location.pathname);
-  //   (_, location) => {
-  //   window.history.pushState(null, null, location);
-  //   return document.location.pathname;
-  // }, document.location.pathname);
 
   const pushHistory = useCallback((location) => {
     window.history.pushState(null, null, location);
@@ -55,16 +25,6 @@ const App = () => {
       {location === '/' ? <Home/> : <Room/>}
     </SetLocationContext.Provider>
   );
-
-  // return (
-  //   <div>
-  //     {/*<SeatList players={players} />*/}
-  //     {/*<Seat seat={2} online onClick={() => console.log(12)}/>*/}
-  //     {/*<Seat seat={1} name={'玩家1'} online={false} style={{ margin: 20 }} isCreator  onClick={() => console.log(122)}/>*/}
-  //     {/*<Seat seat={3}  online style={{ margin: 20 }} onClick={() => console.log(123)}/>*/}
-  //     {/*<PokerList ids={Array(54).fill(0).map((_, i) => 1 + i)} />*/}
-  //   </div>
-  // );
 };
 
 export default App;
diff --git a/src/components/Poker/card.png b/src/components/Poker/card.png
diff --git a/src/components/Poker/index.jsx b/src/components/Poker/index.jsx
@@ -1,13 +1,14 @@
-import './style.css';
 import cn from 'classnames';
+import { mapPokerIdToCardId } from '../../utils/poker';
+import './style.css';
 
 const Poker = (props) => {
   const { id, className, ...otherProps } = props;
   if (typeof id !== 'number') return;
-  const imgId = id % 54;
+  const cardId = mapPokerIdToCardId(id);
   return (
     <div
-      className={cn('poker', `poker-${imgId === 0 && id !== 0 ? 54 : imgId}`, className)}
+      className={cn('poker', `poker-${cardId}`, className)}
       {...otherProps}
     />
   );

diff --git a/src/components/Poker/style.css b/src/components/Poker/style.css
@@ -1,10 +1,12 @@
 .poker {
+  position: absolute;
   background-image: url('./card.png');
   background-clip: content-box;
   background-repeat: no-repeat;
   width: 116px;
   height: 159px;
-  transition: padding-bottom .2s ease-out;
+  transform-origin: 0 0 0;
+  transition: top,left .2s ease-out;
 }
 .poker-1 {
    background-position: -238px -646px;

diff --git a/src/components/PokerList/index.jsx b/src/components/PokerList/index.jsx
@@ -1,24 +1,28 @@
-import { useEffect } from 'react';
+import { useEffect, useMemo } from 'react';
 import { useImmer } from 'use-immer';
 import Poker from '../Poker';
+import { sortPokersById } from '../../utils/poker';
 import './style.css';
 
 const PokerList = (props) => {
-  const { ids, style, onChange } = props;
-  const sortedIds = [...ids];
-  sortedIds.sort((a, b) => pokerMap[b === 0 ? 0 : b % 54 === 0 ? 54 : b % 54] - pokerMap[a === 0 ? 0 : a % 54 === 0 ? 54 : a % 54]);
+  const { ids, height = 159, style, onChange } = props;
+  const sortedIds = useMemo(() => {
+    return sortPokersById([...ids]);
+  }, [ids]);
   const [selectedIds, setSelectedIds] = useImmer(Array(sortedIds.length).fill(false));
   useEffect(() => {
     onChange && onChange([]);
     setSelectedIds(Array(sortedIds.length).fill(false));
   }, [sortedIds.length]);
+  const padding = height * 41 / 159;
+  const gap = height * 48 / 159;
   return (
-    <div className='poker-list' style={{ ...style }}>
+    <div className='poker-list' style={{ height: height + padding, ...style }}>
       {sortedIds.map((id, index) => (
         <Poker
-          key={index}
+          key={id}
           id={id}
-          style={{ position: 'absolute', left: index * 48, bottom: 0, paddingBottom: selectedIds[index] ? 41 : 0 }}
+          style={{ left: index * gap, top: selectedIds[index] ? 0 : padding, transform: `scale(${height / 159})` }}
           onClick={() => {
             setSelectedIds((selectedIds) => {
               selectedIds[index] = !selectedIds[index];
@@ -32,19 +36,4 @@ const PokerList = (props) => {
   );
 };
 
-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 mapPoker = (id) => {
-//   if (id < 53) {
-//     const c = [0.2, 0.4, 0.6, 0.8][Math.floor((id - 1) / 13)];
-//     id = id % 13;
-//     if (id === 2) id = 15;
-//     else if (id === 1) id = 14;
-//     else if (id === 0) id = 13;
-//     id += c;
-//   } else if (id === 53) {
-//     id = 55;
-//   }
-//   return id;
-// };
-
 export default PokerList;
diff --git a/src/components/PokerList/style.css b/src/components/PokerList/style.css
@@ -1,7 +1,6 @@
 .poker-list {
   overflow-x: auto;
   position: relative;
-  height: 200px;
 }
 .poker-list::-webkit-scrollbar {
   display: none;

diff --git a/src/components/Seat/style.css b/src/components/Seat/style.css
@@ -60,7 +60,7 @@
   margin-top: 4px;
   font-size: 14px;
   border-radius: 10px;
-  width: 100%;
+  width: 56px;
   height: 20px;
   text-align: center;
   color: white;

diff --git a/src/components/SeatList/index.jsx b/src/components/SeatList/index.jsx
@@ -1,15 +1,15 @@
 import cn from 'classnames';
-import './style.css';
 import Seat from '../Seat';
+import './style.css';
 
 const SeatList = (props) => {
-  const { players, seat, className, render, onClickSeat, ...otherProps } = props;
+  const { players, vertical, seat, className, render, onClickSeat, style, ...otherProps } = props;
   return (
-    <div className={cn('seat-list', className)} {...otherProps}>
+    <div className={cn('seat-list', className)} style={{ flexDirection: vertical ? 'column' : undefined, ...style }} {...otherProps}>
       {players.map((player, index) => {
         if (index === 0) return null;
         return (
-          <div key={index}>
+          <div className='seat-info' key={index} style={{ flexDirection: vertical ? undefined : 'column' }}>
             <Seat
               seat={index}
               isMe={seat === index}

diff --git a/src/components/SeatList/style.css b/src/components/SeatList/style.css
@@ -1,4 +1,8 @@
 .seat-list {
   display: flex;
   justify-content: space-evenly;
+}
+.seat-info {
+  display: flex;
+  align-items: center;
 }
diff --git a/src/components/StaticPokerList/index.jsx b/src/components/StaticPokerList/index.jsx
@@ -0,0 +1,31 @@
+import { useMemo } from 'react';
+import cn from 'classnames';
+import Poker from '../Poker';
+import { sortPokersByRule } from '../../utils/poker';
+import './style.css';
+
+const StaticPokerList = (props) => {
+  const { ids, sort, overlap, height = 159, onChange, className, style, ...otherProps } = props;
+  const gap = (overlap ? 48 : 116) * height / 159;
+  const sortedIds = useMemo(() => {
+    if (sort) {
+      return sortPokersByRule([...ids]);
+    } else {
+      return ids;
+    }
+  }, [ids]);
+
+  return (
+    <div className={cn('static-poker-list', className)} style={{ height, ...style }} {...otherProps}>
+      {sortedIds.map((id, index) => (
+        <Poker
+          key={index}
+          id={id}
+          style={{ left: index * gap, transform: `scale(${height / 159})` }}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default StaticPokerList;
diff --git a/src/components/StaticPokerList/style.css b/src/components/StaticPokerList/style.css
@@ -0,0 +1,7 @@
+.static-poker-list {
+  overflow-x: auto;
+  position: relative;
+}
+.static-poker-list::-webkit-scrollbar {
+  display: none;
+}
diff --git a/src/pages/Room/GamingRoom/index.jsx b/src/pages/Room/GamingRoom/index.jsx
@@ -2,8 +2,8 @@ import { useRef } from 'react';
 import { sendData } from '../../../utils/websocket';
 import SeatList from '../../../components/SeatList';
 import PokerList from '../../../components/PokerList';
+import StaticPokerList from '../../../components/StaticPokerList';
 import './style.css';
-import Poker from '../../../components/Poker';
 
 const GamingRoom = (props) => {
   const { room, game, seat, classNames, ...otherProps } = props;
@@ -13,14 +13,9 @@ const GamingRoom = (props) => {
 
   return (
     <div {...otherProps}>
-      <h1>
-        房间状态：{game.state === 1 ? '抢地主' : '出牌'}
-      </h1>
-      <br/>
+      {game.state === 1 && <h1>抢地主中</h1>}
       {game.state === 2 && (
-        <div style={{ display: 'flex', justifyContent: 'center', transform: 'scale(0.5)', marginTop: -33 }}>
-          {game.revealed.map((id) => <Poker key={id} id={id}/>)}
-        </div>
+        <StaticPokerList ids={game.revealed} height={58} />
       )}
       {isCreator && (
         <div style={{ position: 'absolute', top: 0, right: 0}}>
@@ -37,11 +32,7 @@ const GamingRoom = (props) => {
       )}
       {isPlayer && game.state === 1 && (
         <div>
-          <button
-            onClick={() => {
-              sendData('user.call.landlord');
-            }}
-          >
+          <button onClick={() => sendData('user.call.landlord')}>
             抢地主
           </button>
         </div>
@@ -50,44 +41,46 @@ const GamingRoom = (props) => {
         <div>
           <button
             disabled={game.last[seat].length === 0}
-            onClick={() => {
-              sendData('user.withdraw.card');
-            }}
+            onClick={() => sendData('user.withdraw.card')}
           >
             收回刚出的牌
           </button>
         </div>
       )}
       <SeatList
         className='room-seat'
+        vertical
         seat={seat}
         players={room.players}
         render={(seat) => (
-          <div className='room-seat-info'>
-            <div className='room-seat-role'>{game.state === 2 && game.landlord === seat ? '👲 地主' : '👨‍🌾 农民'}</div>
-            <div><span className='room-seat-rest'>{game.held[seat]}</span> 张牌</div>
+          <>
+            <div className='room-seat-info'>
+              <div className='room-seat-role'>{game.state === 2 && game.landlord === seat ? '👲 地主' : '👨‍🌾 农民'}</div>
+              <div><span className='room-seat-rest'>{game.held[seat]}</span> 张牌</div>
+            </div>
             {game.state === 2 && (
-              <div style={{ position: 'relative' }}>
-                {game.last[seat].sort((a, b) => pokerMap[b === 0 ? 0 : b % 54 === 0 ? 54 : b % 54] - pokerMap[a === 0 ? 0 : a % 54 === 0 ? 54 : a % 54]).map((id, index) => <Poker style={{ position: 'absolute', top: 30 * index, transform: 'scale(0.5)' }} key={id} id={id} />)}
-              </div>
+              <StaticPokerList ids={game.last[seat]} overlap sort height={58} style={{ flex: '1 0 auto', marginLeft: 24 }} />
             )}
-          </div>
+          </>
         )}
       />
       {isPlayer && (
-        <div className='room-private-poker'>
-          <div style={{ height: 50, marginLeft: 24 }}>
+        <div style={{ height: 30 + 88 }}>
+          <div style={{ height: 30, marginLeft: 24 }}>
             <button
-              style={{ fontSize: 24 }}
+              style={{ fontSize: 18 }}
               disabled={game.state !== 2}
               onClick={() => {
-                sendData('user.drop.card', { cards: selectedCards.current });
+                if (selectedCards.current.length > 0) {
+                  sendData('user.drop.card', { cards: selectedCards.current });
+                }
               }}
             >
-              出牌
+              出牌{game.state !== 2 ? '（请先抢地主）' : ''}
             </button>
           </div>
           <PokerList
+            height={70}
             ids={game.my}
             onChange={(selected) => {
               selectedCards.current = selected;
@@ -99,6 +92,4 @@ const GamingRoom = (props) => {
   );
 };
 
-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];
-
 export default GamingRoom;
diff --git a/src/pages/Room/GamingRoom/style.css b/src/pages/Room/GamingRoom/style.css
@@ -1,9 +1,3 @@
-.room-private-poker {
-  height: 250px;
-  position: absolute;
-  bottom: 0;
-  width: 100%;
-}
 .room-seat-info {
   margin-top: -7px;
   text-align: center;