Github/uno-online
1
0
Fork 1
mirror of https://github.com/mizanxali/uno-online synced 2024-11-21 10:14:53 +00:00
Code Issues Projects Releases Wiki Activity

UI improvement

Browse Source
This commit is contained in:
Mizanali Panjwani 2021-03-03 15:11:18 +05:30
parent e5091107d7
commit d12bcd72cc
2 changed files with 16 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
client/src/App.css
View File

@ -315,7 +315,7 @@ a {
padding-top: 5px; padding-top: 5px;
display: inline-block; display: inline-block;
} }
.chat-head img{ .chat-head span{
cursor: pointer; cursor: pointer;
float: right; float: right;
width: 25px; width: 25px;

30
client/src/components/Game.js
View File

@ -69,6 +69,7 @@ const Game = (props) => {
const [playedCardsPile, setPlayedCardsPile] = useState([]) const [playedCardsPile, setPlayedCardsPile] = useState([])
const [drawCardPile, setDrawCardPile] = useState([]) const [drawCardPile, setDrawCardPile] = useState([])
const [isChatBoxHidden, setChatBoxHidden] = useState(true)
const [isUnoButtonPressed, setUnoButtonPressed] = useState(false) const [isUnoButtonPressed, setUnoButtonPressed] = useState(false)
const [isSoundMuted, setSoundMuted] = useState(false) const [isSoundMuted, setSoundMuted] = useState(false)
const [isMusicMuted, setMusicMuted] = useState(true) const [isMusicMuted, setMusicMuted] = useState(true)
@ -180,10 +181,14 @@ const Game = (props) => {
const toggleChatBox = () => { const toggleChatBox = () => {
const chatBody = document.querySelector('.chat-body') const chatBody = document.querySelector('.chat-body')
if(chatBody.style.display === 'none') if(isChatBoxHidden) {
chatBody.style.display = 'block' chatBody.style.display = 'block'
else setChatBoxHidden(false)
}
else {
chatBody.style.display = 'none' chatBody.style.display = 'none'
setChatBoxHidden(true)
}
} }
const sendMessage= (event) => { const sendMessage= (event) => {
@ -605,7 +610,6 @@ const Game = (props) => {
const updatedPlayer1Deck = [...player1Deck.slice(0, removeIndex), ...player1Deck.slice(removeIndex + 1)] const updatedPlayer1Deck = [...player1Deck.slice(0, removeIndex), ...player1Deck.slice(removeIndex + 1)]
updatedPlayer1Deck.push(drawCard1X) updatedPlayer1Deck.push(drawCard1X)
updatedPlayer1Deck.push(drawCard2X) updatedPlayer1Deck.push(drawCard2X)
!isSoundMuted && playDraw2CardSound() !isSoundMuted && playDraw2CardSound()
//send new state to server //send new state to server
socket.emit('updateGameState', { socket.emit('updateGameState', {
@ -1277,16 +1281,14 @@ const Game = (props) => {
/> />
))} ))}
</div> </div>
{/* <Chat Box Div */}
<div className="chatBoxWrapper"> <div className="chatBoxWrapper">
<div className="chat-box chat-box-player1"> <div className="chat-box chat-box-player1">
<div className="chat-head"> <div className="chat-head">
<h2>Chat Box</h2> <h2>Chat Box</h2>
<img {!isChatBoxHidden ?
onClick={toggleChatBox} <span onClick={toggleChatBox} class="material-icons">keyboard_arrow_down</span> :
src="https://maxcdn.icons8.com/windows10/PNG/16/Arrows/angle_down-16.png" <span onClick={toggleChatBox} class="material-icons">keyboard_arrow_up</span>}
title="Expand Arrow"
width="16" />
</div> </div>
<div className="chat-body"> <div className="chat-body">
<div className="msg-insert"> <div className="msg-insert">
@ -1343,16 +1345,14 @@ const Game = (props) => {
/> />
))} ))}
</div> </div>
{/* <Chat Box Div */}
<div className="chatBoxWrapper"> <div className="chatBoxWrapper">
<div className="chat-box chat-box-player2"> <div className="chat-box chat-box-player2">
<div className="chat-head"> <div className="chat-head">
<h2>Chat Box</h2> <h2>Chat Box</h2>
<img {!isChatBoxHidden ?
onClick={toggleChatBox} <span onClick={toggleChatBox} class="material-icons">keyboard_arrow_down</span> :
src="https://maxcdn.icons8.com/windows10/PNG/16/Arrows/angle_down-16.png" <span onClick={toggleChatBox} class="material-icons">keyboard_arrow_up</span>}
title="Expand Arrow"
width="16" />
</div> </div>
<div className="chat-body"> <div className="chat-body">
<div className="msg-insert"> <div className="msg-insert">