Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix lobby's sonarqube issue #153

Closed
wants to merge 5 commits into from
Closed

Fix lobby's sonarqube issue #153

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
45aa035
Remove this commented out code #147
Haaaan1 May 9, 2024
7f1833b
Fix visible, non-interactive elements with click handlers must have a…
Haaaan1 May 9, 2024
a9b1387
Fix `tabIndex` should only be declared on interactive elements #151
Haaaan1 May 9, 2024
dbd34e0
Delete tabIndex
Haaaan1 May 9, 2024
7be3236
Revert deleting
Haaaan1 May 9, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
130 changes: 111 additions & 19 deletions src/components/views/Lobby.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -426,7 +426,13 @@ const Lobby = () => {

const renderRoomLists = () => {
return rooms.map((Room) => (
<div className="room-container" key={Room.roomId} onClick={handleRoomClick(Room)}>
<div
className="room-container"
key={Room.roomId}
onClick={handleRoomClick(Room)}
onKeyDown={(e) => { if (e.key === "Enter") handleRoomClick(Room); }}
tabIndex="0"
>
<div className="room-players">
{Room.roomPlayersList?.map((user, index) => (
<div className="player" key={index}>
Expand Down Expand Up @@ -462,15 +468,38 @@ const Lobby = () => {
fontSize: "3.8rem",
marginTop: "0.8rem",
cursor: "pointer"
}} />
}}
onKeyDown={(e) => { if (e.key === "Enter") toggleProfilePop(); }}
tabIndex="0"
/>
<div className="name">{user.username}</div>
<div className="btn-logout-container">
<Button className="logout-btn" onClick={logout}>logout</Button>
<Button className="logout-btn"
onClick={logout}
onKeyDown={(e) => {
if (e.key === "Enter") {
logout().catch((error) => console.error("Error logging out:", error));
}
}}
tabIndex="0"
>
logout
</Button>
</div>
</div>
<div className="title-container">
<div className="big-title">Kaeps</div>
<div className="information" onClick={toggleInfoPop}>i</div>
<div className="information"
onClick={toggleInfoPop}
onKeyDown={(e) => {
if (e.key === "Enter") {
toggleInfoPop();
}
}}
tabIndex="0"
>
i
</div>
</div>

<div className="lobby room-list-wrapper">
Expand All @@ -480,7 +509,15 @@ const Lobby = () => {
{renderRoomLists()}
</div>
<div className="lobby room-list btn-container">
<Button className="create-room-btn" onClick={toggleRoomCreationPop}>
<Button className="create-room-btn"
onClick={toggleRoomCreationPop}
onKeyDown={(e) => {
if (e.key === "Enter") {
toggleRoomCreationPop();
}
}}
tabIndex="0"
>
New Room
</Button>
</div>
Expand All @@ -489,10 +526,19 @@ const Lobby = () => {

<Popup ref={profilePopRef} toggleDialog={toggleProfilePop} className="profile-popup">
<BaseContainer className="profile-popup content">
<div className="avatar-container" onClick={() => {
toggleAvatarPop();
toggleProfilePop();
}}>
<div className="avatar-container"
onClick={() => {
toggleAvatarPop();
toggleProfilePop();
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
toggleAvatarPop();
toggleProfilePop();
}
}}
tabIndex="0"
>
<i className={"twa twa-" + user.avatar} style={{ fontSize: "10rem", marginTop: "0.8rem", textAlign: "center" }} />
</div>
<div className="profile-popup field">
Expand All @@ -519,13 +565,27 @@ const Lobby = () => {
{/*<div>RegisterDate: {user && new Date(user.registerDate).toLocaleDateString()}</div>*/}

<div className="profile-popup btn-container">
<Button className="cancel" onClick={() => {
toggleProfilePop();
}}>
<Button className="cancel"
onClick={() => {
toggleProfilePop();
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
toggleProfilePop();
}
}}
tabIndex="0"
>
Cancel
</Button>
<Button className="cancel"
onClick={() => doEdit()}
onKeyDown={(e) => {
if (e.key === "Enter") {
doEdit().catch((error) => console.error("Error editing:", error));
}
}}
tabIndex="0"
disabled = {username === "" || username === user.username}
>
Edit
Expand All @@ -542,10 +602,20 @@ const Lobby = () => {
<div className="avatar-list">
{avatarList?.map((avatar, index) => (
<div className="player" key={index} >
<i className={"twa twa-" + avatar} style={{ fontSize: "3.8rem" }} onClick={() => {
changeAvatar(avatar).then(r => toggleAvatarPop);
toggleAvatarPop();
}} />
<i className={"twa twa-" + avatar}
style={{ fontSize: "3.8rem" }}
onClick={() => {
changeAvatar(avatar).then(r => toggleAvatarPop);
toggleAvatarPop();
}}
onKeyDown={(e) => {
if (e.key === "Enter") {
changeAvatar(avatar).then(r => toggleAvatarPop);
toggleAvatarPop();
}
}}
tabIndex="0"
/>
</div>
))}
</div>
Expand Down Expand Up @@ -597,8 +667,24 @@ const Lobby = () => {
/>
<div className="room-creation-popup btn-container">
<Button disabled={roomName === "" || maxRoomPlayers < DEFAULT_MIN_PLAYERS || maxRoomPlayers > DEFAULT_MAX_PLAYERS || roomTheme === ""}
className="create-room" onClick={createRoom}>Create Room</Button>
<Button className="cancel" onClick={toggleRoomCreationPop}>Cancel</Button>
className="create-room" onClick={createRoom} onKeyDown={(e) => {
if (e.key === "Enter") {
createRoom().then(r => console.log("Create Room"));
}
}}
tabIndex="0"
>
Create Room
</Button>
<Button className="cancel" onClick={toggleRoomCreationPop} onKeyDown={(e) => {
if (e.key === "Enter") {
toggleRoomCreationPop();
}
}}
tabIndex="0"
>
Cancel
</Button>
</div>
</BaseContainer>

Expand All @@ -619,7 +705,13 @@ const Lobby = () => {
<p>Join a room or create one to play with friends!</p>
</div>
<div className="intro-popup btn-container">
<Button className="cancel" onClick={toggleInfoPop}>
<Button className="cancel" onClick={toggleInfoPop} onKeyDown={(e) => {
if (e.key === "Enter") {
toggleInfoPop();
}
}}
tabIndex="0"
>
Close
</Button>
</div>
Expand Down
24 changes: 5 additions & 19 deletions src/styles/views/Lobby.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,10 @@

for more information visit https://sass-lang.com/guide
*/

.button:focus, .input:focus, [tabIndex="0"]:focus {
outline: 2px solid #66b3ff; /* 蓝色边框 */
background-color: #e6f7ff; /* 浅蓝色背景 */
}
.lobby {
&.container {
background: rgba(255, 255, 255);
Expand Down Expand Up @@ -129,14 +132,13 @@
justify-content: space-between;
flex-direction: row;
text-align: center;
cursor: pointer;
}
.room {
background-color: #fff;
margin-bottom: 10px;
border-radius: 8px;
text-align: center;
//overflow: hidden;

.room-header {
margin-left: 10px;
flex-shrink: 0; // Allow both children to grow and take up equal space
Expand All @@ -147,7 +149,6 @@
padding: 10px;
text-align: center;
}

.room-header {
flex-shrink: 0;
flex-grow: 0;
Expand All @@ -159,7 +160,6 @@
text-align: center;
padding: 10px; // Align room details to the end of the flex container
}

.room-footer {
display: flex;
justify-content: space-between;
Expand All @@ -176,12 +176,10 @@
flex-wrap: wrap; // Allow avatar list to wrap
justify-content: flex-start; // Align avatars to the left
margin: 0 -10px; // Offset for each avatar's margin, adjustable as needed

.player {
width: 20%; // Four avatars per row, each taking 25% of total width
padding-left: 10%; // Padding around each avatar, adjustable as needed
box-sizing: border-box; // Include padding in width calculation

i {
display: block; // Ensure icons are block-level
font-size: 3.8rem; // Icon size
Expand All @@ -194,27 +192,21 @@
margin-right: 10px;
margin-left: 10px;
text-align: center;

.player-avatar {
width: 40px;
height: 40px;
border-radius: 50%;
background-color: #D9D9D9; // Default background color
}

.player-username {
font-size: 0.8em;
}
}
.room-players {
//width: 70%;

align-items: flex-start; // Align the players to the start of the flex container
flex: 1 1 auto; // Allow both children to grow and take up equal space
display: flex;
flex-direction: row; // Stack children vertically
//align-items: center; // Horizontally center items
//justify-content: center; // Vertically center items
padding: 10px;
overflow-x: auto;
white-space: nowrap;
Expand Down Expand Up @@ -302,25 +294,20 @@
height: 2rem;
font-size: 1.5rem;
font-weight: bold;
//display: flex;
text-align: center;
//line-height: 2rem;
color: white;
background: $classicYellow;
border-radius: $borderRadius;
//padding: 0.25rem;
cursor: pointer;
}
.intro-popup {
height:60%;
//width: 500px;
&.btn-container {
width: 200px;
display: flex;
flex-direction: row;
justify-content: center;
align-items: flex-end;
//margin-top: 10%;
Button {
height: auto;
font-size: 1em;
Expand Down Expand Up @@ -493,6 +480,5 @@
color: white;
text-transform: none;
font-weight: bolder;

}
}
Loading