ADD : Show playing user count & Stand out my profile in player list (…

…:bookmark: v1.0.2)
kyechan99 · Jul 30, 2021 · 4375c3a · 4375c3a
1 parent c738ea9
commit 4375c3a
Show file tree

Hide file tree

Showing 12 changed files with 133 additions and 81 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "catchmuz",
-  "version": "1.0.1",
+  "version": "1.0.2",
   "private": true,
   "main": "public/electron.js",
   "homepage": "./",

diff --git a/src/App.scss b/src/App.scss
@@ -97,30 +97,4 @@ a {
     100% {
       opacity: 1;
     }
-} 
-
-.navbar {
-  padding-top: 3rem !important;
-  .navbar-menu {
-    font-size: 1.8rem;
-    margin-right: 1.5rem;
-    opacity: .4;
-    font-weight: 500;
-    &.active {
-      opacity: 1;
-      font-weight: 500;
-      position: relative;
-      &::before {
-        margin-top: -.5rem;
-        margin-left: calc(50% - .25rem);
-        position: absolute;
-        width: .5rem;
-        height: .5rem;
-        border-radius: .25rem;
-        content: " ";
-        white-space: pre;
-        background-color: #ffffffd7;
-      }
-    }
-  }
-}
+} 
diff --git a/src/App.tsx b/src/App.tsx
@@ -12,19 +12,12 @@ import Setting from './pages/Setting';
 import Room from './pages/Room';
 import CheckRoom from './pages/CheckRoom';
 
-const CLIENT_VERSION = 'v1.0.1';
+import { Navbar } from './components/Navbar/Navbar';
+
+const CLIENT_VERSION = 'v1.0.2';
 const server_host = process.env.REACT_APP_SERVER_HOST || "localhost:4000";
 const socket = io(server_host);
 
-const NavBar = ({ path } : { path: string }) => {
-  return (
-    <div className="container navbar">
-        <Link className={`navbar-menu ${path==='/lobby' && 'active'}`}  to="/lobby">로비</Link>
-        <Link className={`navbar-menu ${path==='/setting' && 'active'}`}  to="/setting">설정</Link>
-    </div>
-
-  )
-}
 
 const App = () => {
   const dispatch = useDispatch();
@@ -87,21 +80,19 @@ const App = () => {
 
       <Route path="/" component={() => 
         <Index
-        client_version={CLIENT_VERSION}
-        server_version={serverVersion}
+          client_version={CLIENT_VERSION}
+          server_version={serverVersion}
         />
       } exact/>
       <Route path="/lobby" component={() =>
         <>
-          <NavBar path="/lobby" />
           <Lobby
             socket={ socket }
           />
         </>
       }/>
       <Route path="/setting" component={() =>
         <>
-          <NavBar path="/setting" />
           <Setting/>
         </>
       }/>
@@ -115,10 +106,7 @@ const App = () => {
           socket={ socket }
         />
       }/>
-      <Route path="/checkroom" component={() => 
-        <CheckRoom
-        />
-      }/>
+      <Route path="/checkroom" component={CheckRoom}/>
     </div>
   );
 }

diff --git a/src/components/Button/Button.scss b/src/components/Button/Button.scss
@@ -110,7 +110,7 @@
         opacity: .75;
         transition: opacity ease .25s;
         color: $secondary;
-        &:hover {
+        &:not(:disabled):not(.disabled):hover {
             opacity: 1;
         }
     }

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -123,14 +123,16 @@ export const ImgButton = ({ children, clicked, src, isActive = false } : ImgButt
 type SkipButtonProps = {
     className? : string,
     children?: React.ReactNode,
+    disabled? : boolean
     clicked? : () => void
 }
 
-export const SkipButton = ({ children, clicked, className = '' } : SkipButtonProps) => {
+export const SkipButton = ({ children, clicked, className = '', disabled = false } : SkipButtonProps) => {
     return (
         <Button
             className={ className }
             clicked={ clicked }
+            disabled={disabled}
         >
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 16">
                 <path

diff --git a/src/components/Navbar/Navbar.scss b/src/components/Navbar/Navbar.scss
@@ -0,0 +1,38 @@
+@import '/src/_variables.scss';
+
+.navbar {
+    padding-top: 2rem !important;
+    .navbar-menu {
+      font-size: 1.8rem;
+      margin-right: 1.5rem;
+      opacity: .4;
+      font-weight: 500;
+      &.active {
+        opacity: 1;
+        font-weight: 500;
+        position: relative;
+        &::before {
+          margin-top: -.5rem;
+          margin-left: calc(50% - .25rem);
+          position: absolute;
+          width: .5rem;
+          height: .5rem;
+          border-radius: .25rem;
+          content: " ";
+          white-space: pre;
+          background-color: #ffffffd7;
+        }
+      }
+    }
+    .connected-length {
+        float: right;
+        display: flex;
+        align-content: center;
+        align-items: center;
+        white-space: pre-wrap;
+        svg {
+            fill: white;
+            margin-right: 1rem;
+        }
+    }
+  }
diff --git a/src/components/Navbar/Navbar.tsx b/src/components/Navbar/Navbar.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import './Navbar.scss';
+
+export const Navbar = ({ path, clientsCount } : { path: string, clientsCount?: number }) => {
+    return (
+      <div className="navbar">
+            <Link className={`navbar-menu ${path==='/lobby' && 'active'}`}  to="/lobby">로비</Link>
+            <Link className={`navbar-menu ${path==='/setting' && 'active'}`}  to="/setting">설정</Link>
+
+            {
+                clientsCount &&
+                <p className="connected-length">
+                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24">
+                        <path 
+                            fillRule="evenodd"
+                            d="M3.5 8a5.5 5.5 0 118.596 4.547 9.005 9.005 0 015.9 8.18.75.75 0 01-1.5.045 7.5 7.5 0 00-14.993 0 .75.75 0 01-1.499-.044 9.005 9.005 0 015.9-8.181A5.494 5.494 0 013.5 8zM9 4a4 4 0 100 8 4 4 0 000-8z"></path><path d="M17.29 8c-.148 0-.292.01-.434.03a.75.75 0 11-.212-1.484 4.53 4.53 0 013.38 8.097 6.69 6.69 0 013.956 6.107.75.75 0 01-1.5 0 5.193 5.193 0 00-3.696-4.972l-.534-.16v-1.676l.41-.209A3.03 3.03 0 0017.29 8z">
+                        </path>
+                    </svg>
+                    접속 인원  :  { clientsCount }
+                </p>
+            }
+      </div>
+
+    )
+  }
diff --git a/src/components/PlayerInfo/PlayerInfo.scss b/src/components/PlayerInfo/PlayerInfo.scss
@@ -5,6 +5,14 @@
     display: flex;
     position: relative;
     align-items: flex-start;
+    &.player-me::before {
+        font-family: monospace;
+        content: '>';
+        position: absolute;
+        left: -.75rem;
+        top: .5rem;
+        z-index: -1;
+    }
 }
 
 .player-info {

diff --git a/src/components/PlayerInfo/PlayerInfo.tsx b/src/components/PlayerInfo/PlayerInfo.tsx
@@ -18,34 +18,40 @@ type PlayerInfoProps = {
 
 export const PlayerInfo = ({ isSelectMe, selectUser, user, children, isManager, clicked, isMe } : PlayerInfoProps) => {
     return (
-        <div className="player">
-        <button className="player-info" onClick={ () => { if (!isMe) selectUser(before => { return before === user.socketId ? '' : user.socketId }) }}>
-            <ProfileSM profileNum={user.profile} color={user.color}></ProfileSM>
-            <p className="player-name">
-                {user.nickname}
-                <span className="player-score"> {user.answer} </span>
-            </p>
-        </button>
-        {
-            isSelectMe && 
-            <div className="player-detail">
-                {
-                    isManager ?
-                    <>
-                        <p className="detail-msg">강제 퇴장 시키겠습니까?</p>
-                        <div className="detail-menu">
-                            <PointButton clicked={ () => clicked(user.socketId) }>네</PointButton>
-                            <SecondaaryButton clicked={ () => selectUser('') }>취소</SecondaaryButton>
-                        </div>
-                    </>
-                    :
-                    <>
-                        <p className="detail-msg">강제 퇴장은 방장만 가능합니다.</p>
-                        <button className="btn-close-detail" onClick={ () => selectUser('') }>X</button>
-                    </>
-                }
-            </div>
-        }
+        <div className={`player ${ isMe ? 'player-me': ''}`}>
+            <button className="player-info" onClick={ () => { selectUser(before => { return before === user.socketId ? '' : user.socketId }) }}>
+                <ProfileSM profileNum={user.profile} color={user.color}></ProfileSM>
+                <p className="player-name">
+                    {user.nickname}
+                    <span className="player-score"> {user.answer} </span>
+                </p>
+            </button>
+            {
+                isSelectMe && 
+                <div className="player-detail">
+                    {
+                        isMe ?
+                        <>
+                            <p className="detail-msg">{ isManager ? '방장입니다' : '방장이아닙니다.' }</p>
+                            <button className="btn-close-detail" onClick={ () => selectUser('') }>X</button>
+                        </>
+                        :
+                        isManager ?
+                        <>
+                            <p className="detail-msg">강제 퇴장 시키겠습니까?</p>
+                            <div className="detail-menu">
+                                <PointButton clicked={ () => clicked(user.socketId) }>네</PointButton>
+                                <SecondaaryButton clicked={ () => selectUser('') }>취소</SecondaaryButton>
+                            </div>
+                        </>
+                        :
+                        <>
+                            <p className="detail-msg">강제 퇴장은 방장만 가능합니다.</p>
+                            <button className="btn-close-detail" onClick={ () => selectUser('') }>X</button>
+                        </>
+                    }
+                </div>
+            }
         </div>
     )
 }
diff --git a/src/pages/Lobby.tsx b/src/pages/Lobby.tsx
@@ -5,6 +5,7 @@ import './Lobby.scss';
 
 import { Button, PointButton } from '../components/Button/Button';
 import { RoomMenu } from '../components/Room/RoomMenu';
+import { Navbar } from '../components/Navbar/Navbar';
 
 type LobbyProps = {
     socket: Socket
@@ -23,6 +24,7 @@ type RoomType = {
 
 const Lobby = ({ socket } : LobbyProps) => {
     const [roomList, setRoomList] = React.useState<RoomType>({});
+    const [clientsCount, setClientsCount] = React.useState<number>(1);
 
     React.useEffect(() => {
         getRoomList();
@@ -41,12 +43,13 @@ const Lobby = ({ socket } : LobbyProps) => {
 
     // 받아온 데이터로 방 목록을 새로고침
     function refreshRoomList(data: any) {
-        console.log(data);
-        setRoomList(data);
+        setClientsCount(data.clientsCount);
+        setRoomList(data.roomList);
     }
 
     return (
         <div className="container">
+            <Navbar path="/lobby" clientsCount={clientsCount} />
             {/* <div className="lobby-menu">
                 <Button clicked={getRoomList}>
                     새로고침

diff --git a/src/pages/Room.tsx b/src/pages/Room.tsx
@@ -12,7 +12,6 @@ import { BeforeButton, PrimaryButton, SkipButton } from '../components/Button/Bu
 import { SpinnerSM, SpinnerMD, SpinnerLG, SpinnerXL } from '../components/Spinner/Spinner';
 import { Chat, MyChat } from '../components/Chat/Chat';
 import { Tag } from '../components/Tag/Tag';
-import { ProfileSM } from '../components/Profile/Profile'
 import { PlayerInfo } from '../components/PlayerInfo/PlayerInfo';
 
 import LogoImg from '../assets/catchmuz_icon.png';
@@ -61,6 +60,8 @@ const Room = ({ socket } : RoomProps) => {
     const [roomSongTags, setRoomSongTags] = React.useState<string[]>([]);
     // 스킵 희망 수
     const [skipCount, setSkipCount] = React.useState<number>(0);
+    // 내가 스킵을 눌렀는지
+    const [alreadySkip, setAlreadySkip] = React.useState<boolean>(false);
     // 소리 조절
     const [volume, setVolume] = React.useState<number>(1);
 
@@ -152,6 +153,7 @@ const Room = ({ socket } : RoomProps) => {
         setTime( PLAY_TIME + WAITING_TIME );
         setSongData(data);
         setAnswerUser('');
+        setAlreadySkip(false);
         clearInterval(timeMng);
         timeMng = setInterval(timeCounting, 1000);
     }
@@ -243,6 +245,9 @@ const Room = ({ socket } : RoomProps) => {
     function receiveChat(data: ChatType) {
         if (data.wantSkip) {
             setSkipCount(c => c+1);
+            if (data.socketId === user.socketId) {
+                setAlreadySkip(true);
+            }
         }
         if (data.isAnswer) {
             setUserList((beforeUserList) => {
@@ -397,8 +402,8 @@ const Room = ({ socket } : RoomProps) => {
                         </p>
 
                         {
-                            (isPlaying && time > WAITING_TIME) &&
-                            <SkipButton className={'btn-skip'} clicked={ () => sendChatData('!skip') }>
+                            (isPlaying && time > WAITING_TIME && time < PLAY_TIME + WAITING_TIME - 5) &&
+                            <SkipButton className={'btn-skip'} clicked={ () => sendChatData('!skip') } disabled={alreadySkip}>
                                 { skipCount } / { Math.ceil((userList.length + 1) / 2)}
                             </SkipButton>
                         }

diff --git a/src/pages/Setting.tsx b/src/pages/Setting.tsx
@@ -3,12 +3,14 @@ import './Setting.scss';
 import { Button, PointButton } from '../components/Button/Button';
 import { RoomMenu } from '../components/Room/RoomMenu';
 import { Link } from 'react-router-dom';
+import { Navbar } from '../components/Navbar/Navbar';
 
 
 
 const Setting = ( ) => {
     return (
         <div className="container">
+            <Navbar path="/setting" />
             <div className="container-box">
                 <div className="setting-group">
                     <h1>그래픽</h1>