148 lines
4.0 KiB
TypeScript
148 lines
4.0 KiB
TypeScript
import { motion } from "framer-motion";
|
|
import Backdrop from "../Sidebar/Backdrop.tsx";
|
|
import '../../styles/Messages.css';
|
|
import { useState, useEffect } from "react";
|
|
import api from "../../script/axiosApi.tsx";
|
|
import React from "react";
|
|
import {User} from "../../../interfaces.tsx"
|
|
// import { useNavigate } from "react-router-dom";
|
|
|
|
const dropIn = {
|
|
hidden: { y: "-100vh", opacity: 0 },
|
|
visible: {
|
|
y: "0",
|
|
opacity: 1,
|
|
transition: {
|
|
duration: 0.3,
|
|
type: "spring",
|
|
damping: 100,
|
|
stiffness: 500,
|
|
},
|
|
},
|
|
exit: { y: "100vh", opacity: 0 },
|
|
};
|
|
|
|
interface ModalGame {
|
|
handleClose: Function,
|
|
// convId: string
|
|
}
|
|
|
|
const GameModal = ({ handleClose }: ModalGame) => {
|
|
const [users, setUsers] = useState([]);
|
|
// const [user, setUser] = useState();
|
|
const [selectedUser, setSelectedUser] = useState('');
|
|
// const [convs, setConvs] = useState([]);
|
|
const [channel, setChannel] = useState('');
|
|
|
|
// const history = useNavigate();
|
|
|
|
useEffect(() => {
|
|
const fetchData = async () => {
|
|
try {
|
|
const tmpUsers = await api.get("/users");
|
|
// const tmpUser = await api.get("/profile");
|
|
// const tmpConvs = await api.get("/convs");
|
|
setUsers(tmpUsers.data);
|
|
// setUser(tmpUser.data);
|
|
// setConvs(tmpConvs.data);
|
|
} catch (err) {
|
|
console.log(err);
|
|
}
|
|
};
|
|
fetchData();
|
|
}, []);
|
|
|
|
const handleUserChange = (event: { target: { value: React.SetStateAction<string>; }; }) => {
|
|
setSelectedUser(event.target.value);
|
|
};
|
|
|
|
// const joinChannel = async () => {
|
|
// try {
|
|
// await api.post("/join", { convId: channel });
|
|
// } catch (err) {
|
|
// console.log(err);
|
|
// }
|
|
// };
|
|
|
|
// const handleCheckButtonClick = () => {
|
|
// // Perform your check action here
|
|
// console.log("Checking user:", selectedUser);
|
|
// };
|
|
|
|
const handleButtonClick = async () => {
|
|
// let path = `play?`;
|
|
let path = `http://` + process.env.REACT_APP_BASE_URL + `/pong/play?`;
|
|
|
|
|
|
const superpowerCheckbox = document.querySelector<HTMLInputElement>('input[value="superpower"]');
|
|
if (superpowerCheckbox && superpowerCheckbox.checked) {
|
|
path += 'superpower=true&';
|
|
}
|
|
|
|
|
|
const speedCheckbox = document.querySelector<HTMLInputElement>('input[value="speed"]');
|
|
if (speedCheckbox && speedCheckbox.checked) {
|
|
path += 'speed=true&';
|
|
}
|
|
|
|
if (selectedUser.length > 0)
|
|
path += 'username=' + selectedUser;//important here
|
|
|
|
// Remove the trailing '&' character
|
|
// path = path.slice(0, -1);
|
|
// console.log(path)
|
|
|
|
// await api.post("/partyInvite", {username: selectedUser, gameId})
|
|
|
|
// console.log("path= ", path)
|
|
// history(path, { replace: true });
|
|
// window.location.replace(path);
|
|
window.history.pushState({}, '', path);
|
|
window.location.reload();
|
|
|
|
// history(path);
|
|
};
|
|
|
|
return (
|
|
<Backdrop onClick={handleClose}>
|
|
<motion.div
|
|
onClick={(e) => e.stopPropagation()}
|
|
className="modal"
|
|
// variant={dropIn}
|
|
initial="hidden"
|
|
animate="visible"
|
|
exit="exit"
|
|
>
|
|
<div>
|
|
<select value={selectedUser} onChange={handleUserChange}>
|
|
<option value="">Select a user</option>
|
|
{users.map((user: User) => (
|
|
<option key={user.id} value={user.username}>
|
|
{user.nickname}
|
|
</option>
|
|
))}
|
|
</select>
|
|
</div>
|
|
|
|
<div className="notClicked" id="canvas_container">
|
|
{/* <button onClick={handleButtonClick}>Draw on Canvas</button> */}
|
|
<div className='checkbox'>
|
|
<p><input type="checkbox" value="superpower"/> Super Power </p>
|
|
<p><input type="checkbox" value="speed"/> Faster and Faster </p>
|
|
</div>
|
|
<button className="playInvite" onClick={handleButtonClick} >Play</button>
|
|
{/* <button className="submit" onClick={handleClose}>Cancel</button> */}
|
|
</div>
|
|
|
|
{/* <div className="div_submit">
|
|
<button className="submit" onClick={handleCheckButtonClick}>
|
|
Invite to play
|
|
</button>
|
|
</div> */}
|
|
</motion.div>
|
|
</Backdrop>
|
|
);
|
|
};
|
|
|
|
export default GameModal;
|