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 enter room logic and delet some comments #133

Merged
merged 4 commits into from
May 7, 2024
Merged

Fix enter room logic and delet some comments #133

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
f413f22
Fix enter room logic
Haaaan1 May 6, 2024
8a14da0
Merge remote-tracking branch 'origin/dev' into lobby-feature-updates
petertheprocess May 7, 2024
a5e69bc
Fix one can change his name to empty bug. fix #129
petertheprocess May 7, 2024
69c96e4
disable edit btn when name is empty or not changed
petertheprocess May 7, 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
105 changes: 10 additions & 95 deletions src/components/views/Lobby.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React, { useCallback, useRef, useEffect, useState } from "react";
import { showToast } from "helpers/toastService";
import { v4 as uuidv4 } from "uuid";
import { api, handleError } from "helpers/api";
import { Button } from "components/ui/Button";
Expand All @@ -15,20 +14,15 @@ import "styles/ui/Popup.scss";
import { MAX_USERNAME_LENGTH, MAX_ROOM_NAME_LENGTH } from "../../constants/constants";
import SockJS from "sockjs-client";
import { over } from "stompjs";
import { showToast} from "../../helpers/toastService";
import { Timestamped, RoomInfo, RoomPlayer, PlayerAndRoomID } from "stomp_types";
const DEFAULT_MAX_PLAYERS = 5;
const DEFAULT_MIN_PLAYERS = 2;

type PlayerProps = {
user: User;
};
type RoomComponentProps = {
room: Room;
};

type RoomListProps = {
rooms: Room[];
};
const Player: React.FC<PlayerProps> = ({ user }) => (
<div className="player">
<img
Expand All @@ -39,31 +33,7 @@ const Player: React.FC<PlayerProps> = ({ user }) => (
<div className="player-username">{user.username}</div>
</div>
);
const RoomComponent: React.FC<RoomComponentProps> = ({ room }) => (
<div className="room">
<div className="room-header">
{room.roomPlayersList.map((user) => (
<Player key={user.id} user={user} />
))}
</div>
<div className="room-footer">
<div className="room-theme">{room.theme}</div>
<div
className="room-status"
style={{ color: room.status === "In Game" ? "orange" : "green" }}
>
{room.status}
</div>
</div>
</div>
);
const RoomList: React.FC<RoomListProps> = ({ rooms }) => (
<div className="room-list">
{rooms.map((room) => (
<RoomComponent key={room.id} room={room} />
))}
</div>
);

interface FormFieldProps {
label: string;
placeholder?: string;
Expand All @@ -73,37 +43,10 @@ interface FormFieldProps {
disabled?: boolean;
}

const FormField: React.FC<FormFieldProps> = (props) => {
return (
<div className="profile-popup field">
<label className="profile-popup label">
{props.label}
</label>
<input
className="profile-popup input"
placeholder={props.placeholder}
value={props.value}
type={props.type}
onChange={e => props.onChange(e.target.value)}
disabled={props.disabled}
/>
</div>
);
};
Player.propTypes = {
user: PropTypes.object,
};

const mockRoomPlayers: User[] = [

{ id: "1", username: "Alice", avatar: "grinning-face-with-sweat", name: "Alice Wonderland", status: "ONLINE", registerDate: new Date("2021-08-01"), birthday: new Date("1990-01-01") },
{ id: "2", username: "Bob", avatar: "grinning-face-with-sweat", name: "Bob Builder", status: "OFFLINE", registerDate: new Date("2021-09-01"), birthday: new Date("1985-02-02") },
{ id: "3", username: "Han", avatar: "grinning-face-with-sweat", name: "Alice Wonderland", status: "ONLINE", registerDate: new Date("2021-08-01"), birthday: new Date("1990-01-01") },
{ id: "4", username: "Li", avatar: "grinning-face-with-sweat", name: "Bob Builder", status: "OFFLINE", registerDate: new Date("2021-09-01"), birthday: new Date("1985-02-02") },
{ id: "5", username: "Liuz", avatar: "grinning-face-with-sweat", name: "Bob Builder", status: "OFFLINE", registerDate: new Date("2021-09-01"), birthday: new Date("1985-02-02") },

];

const avatarList: string[] = [
"angry-face",
"angry-face-with-horns",
Expand Down Expand Up @@ -157,31 +100,6 @@ const avatarList: string[] = [
"flushed-face"
]

const mockRooms: Room[] = [
{
id: "1",
roomOwnerId: "1",
roomPlayersList: mockRoomPlayers,
theme: "Advanced",
status: "In Game",
maxPlayersNum: 4,
alivePlayersList: mockRoomPlayers,
currentPlayerIndex: 0,
playToOuted: false,
},
{
id: "2",
roomOwnerId: "2",
roomPlayersList: mockRoomPlayers,
theme: "Food",
status: "Free",
maxPlayersNum: 4,
alivePlayersList: mockRoomPlayers,
currentPlayerIndex: 1,
playToOuted: false,
},
];

const Lobby = () => {
const navigate = useNavigate();
const roomCreationPopRef = useRef<HTMLDialogElement>(null);
Expand All @@ -196,8 +114,6 @@ const Lobby = () => {
const [maxRoomPlayers, SetMaxRoomPlayers] = useState(DEFAULT_MIN_PLAYERS);
const [roomTheme, setRoomTheme] = useState("");
const stompClientRef = useRef(null);
// const needReloadRooms = useRef(false);
// const RELOAD_TIME = 3000;

const logout = async () => {
const id = sessionStorage.getItem("id");
Expand All @@ -209,8 +125,7 @@ const Lobby = () => {
console.log(response);
sessionStorage.clear();
} catch (error) {
// alert(`Something went wrong during the logout: \n${handleError(error)}`);
showToast(`Something went wrong during the logout: \n${handleError(error)}`, "error");
showToast("Something went wrong during the logout: \n${handleError(error)}", "error");
}
navigate("/login");
};
Expand All @@ -235,7 +150,6 @@ const Lobby = () => {
}

useEffect(() => {

const connectWebSocket = () => {
const baseurl = getDomain();
let Sock = new SockJS(`${baseurl}/ws`);
Expand Down Expand Up @@ -352,9 +266,8 @@ const Lobby = () => {
const createRoom = async () => {
// if not chrome, alert the user
if (!navigator.userAgent.includes("Chrome")) {
// alert("Your browser is currently not supported, please use Chrome to play this game!");
showToast("Your browser is currently not supported, please use Chrome to play this game!", "error");

showToast("Your browser is currently not supported, please use Chrome to play this game!","error");

return;
}
try {
Expand Down Expand Up @@ -592,7 +505,7 @@ const Lobby = () => {
value={username}
onChange={(e) => {
const inputValue = e.target.value; // 获取输入值
if (inputValue.length <= MAX_USERNAME_LENGTH) { // 检查输入值的长度
if (inputValue.length <= MAX_USERNAME_LENGTH && inputValue.length > 0) { // 检查输入值的长度
setUsername(inputValue); // 如果长度小于或等于20，更新状态
}
}}
Expand All @@ -609,8 +522,10 @@ const Lobby = () => {
}}>
Cancel
</Button>
<Button className="cancel" onClick={() => doEdit()
}>
<Button className="cancel"
onClick={() => doEdit()}
disabled = {username === "" || username === user.username}
>
Edit
</Button>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/helpers/toastService.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,6 @@ import { DEFAULT_TIMEOUT } from "../constants/constants"
export function showToast(message, type = "info", duration = DEFAULT_TIMEOUT) {
toast(message, {
type: type,
autoClose: duration, // 设置消息显示的持续时间，单位是毫秒
autoClose: duration,
});
}
Loading
Loading