color for qr input + text in chat input + w = wall

This commit is contained in:
Lara REALI 2023-06-26 00:32:42 +02:00
parent 1e9946859c
commit b61531d8d2
4 changed files with 44 additions and 45 deletions

View File

@ -8,27 +8,27 @@ function PlayButton() {
const history = useNavigate();
// const handleButtonClick = () => {
// let path = `play`;
// let path = `play`;
// history(path);
// };
const handleButtonClick = () => {
let path = `play?`;
const superpowerCheckbox = document.querySelector<HTMLInputElement>('input[value="superpower"]');
if (superpowerCheckbox && superpowerCheckbox.checked) {
path += 'superpower=true&';
}
const obstacleCheckbox = document.querySelector<HTMLInputElement>('input[value="obstacle"]');
if (obstacleCheckbox && obstacleCheckbox.checked) {
path += 'obstacle=true&';
}
const speedCheckbox = document.querySelector<HTMLInputElement>('input[value="speed"]');
if (speedCheckbox && speedCheckbox.checked) {
path += 'speed=true&';
}
// Remove the trailing '&' character
path = path.slice(0, -1);
console.log(path)
@ -40,7 +40,7 @@ function PlayButton() {
<button onClick={handleButtonClick} className="playButton">Play</button>
{/* !buttonClicked && <button onClick={handleButtonClick}>Draw on Canvas</button> */}
<div className='checkbox'>
<p><input className="inside_checkbox" type="checkbox" value="superpower"/> Super Power </p>
<p><input className="inside_checkbox" type="checkbox" value="superpower"/> Super Power <br/> ( w = wall power ) </p>
<p><input className="inside_checkbox" type="checkbox" value="obstacle"/> Obstacle </p>
<p><input className="inside_checkbox" type="checkbox" value="speed"/> Faster and Faster </p>
</div>
@ -48,4 +48,4 @@ function PlayButton() {
);
}
export default PlayButton;
export default PlayButton;

View File

@ -36,7 +36,7 @@ const TouchDiv = styled.div`
margin-top: 21px;
cursor: pointer;
justify-content: space-around;
&:hover {
color: #F4F3EF;
}
@ -71,7 +71,7 @@ const SideP = styled.p`
//========================================================================================================
//========================================================================================================
// Logical part
// Logical part
//========================================================================================================
//========================================================================================================
@ -84,7 +84,7 @@ interface MessageProps {
}
function Chats(){
const [isLoading, setIsLoading] = useState<boolean>(true);
const [conversations, setConversation] = useState([]);
const [partyInvite, setPartyInvite] = useState([]);
@ -100,7 +100,7 @@ function Chats(){
const socket = useRef<Socket | null>(null);
// const socket = Socket<DefaultEventsMap, DefaultEventsMap> | null
// socket = useRef( useRef<SocketIOClient.Socket | null>(null));
useEffect(()=> {
@ -137,7 +137,7 @@ function Chats(){
console.log("muted hehe");
//set mute var to true and do nothing
});
setIsLoading(false)
}
@ -159,7 +159,7 @@ function Chats(){
}, [])
useEffect(()=> {
const updateChat = async ()=> {
// if (currentChat)
// console.log(currentChat.id)
@ -188,7 +188,7 @@ function Chats(){
}, [incomingMessage, currentChat])
useEffect(()=> {
useEffect(()=> {
const getMessage = async ()=>
{
if (!currentChat)
@ -238,7 +238,7 @@ function Chats(){
setNewMessage("");
if (socket.current)
socket.current.emit('sendMessage', message);
}
}
catch(err){
console.log(err)
}
@ -252,7 +252,7 @@ function Chats(){
}
const [friend, setFriend] = useState("");
// const [modalOpen, setModalOpen] = useState(false);
const [addFriend, setAddFriend] = useState(false);
@ -269,19 +269,19 @@ function Chats(){
const [selectTags, setSelectTag] = useState([{ id: 1, selectedOption: ''}]);
const [users, setUsers] = useState<User[]>([]);
const openNewGameModal = () => {
setNewGameModalOpen(true);
};
const closeNewGameModal = () => {
setNewGameModalOpen(false);
};
const openNewConversationModal = () => {
setNewConversationModalOpen(true);
};
const closeNewConversationModal = () => {
setNewConversationModalOpen(false);
};
@ -300,7 +300,7 @@ function Chats(){
const handleFriend = (event: { target: { value: React.SetStateAction<string>; }; }) => {
setFriend(event.target.value);
};
const handleAddFriend = async () => {
try{
console.log("friend= ", friend);
@ -321,7 +321,7 @@ function Chats(){
console.log(err)
}
};
const handleBlockFriend = async () => {
try{
const res = await api.post("/block", {username: friend})
@ -339,12 +339,12 @@ function Chats(){
console.log(err)
}
};
const closeAddFriend = () => {
setAddFriend(false);
setShowAddFriendAlert(false);
};
const closeBlock = () => {
setBlock(false);
setShowBlockAlert(false);
@ -353,7 +353,7 @@ function Chats(){
const handleOptionChange = (selectId: number, selectedOption: string) => {
console.log("selected Option=", selectedOption)
setFriend(selectedOption);
setSelectTag((prevTags) =>
setSelectTag((prevTags) =>
prevTags.map((tag) =>
tag.id === selectId ? { ...tag, selectedOption } : tag
)
@ -362,14 +362,14 @@ function Chats(){
//========================================================================================================
//========================================================================================================
// HTML
// HTML
//========================================================================================================
//========================================================================================================
return (
<div className="chat">
<div className='navbar'>
{/* <img src={DefaultPic} alt="profile" className="pic"/> */}
<IoLogoOctocat className="catchat"/>
@ -395,7 +395,7 @@ function Chats(){
</AnimatePresence>
</TouchDiv>
<TouchDiv>
<motion.div
<motion.div
onClick={() => (block ? setBlock(false) : setBlock(true))}
>
<ImBlocked/>
@ -410,7 +410,7 @@ function Chats(){
{currentChat ? (
<TouchDiv>
<motion.div
<motion.div
onClick={() => (setting ? setSetting(false) : setSetting(true))}
>
<RiListSettingsLine/>
@ -434,7 +434,7 @@ function Chats(){
onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}
>
<option value="">{
selectTag.selectedOption ? selectTag.selectedOption : "Select an option"
selectTag.selectedOption ? selectTag.selectedOption : "Select a user"
}</option>
{users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.username)).map((item, index) => (
<option key={index} value={item.username}>
@ -472,7 +472,7 @@ function Chats(){
</TouchDiv>
{currentChat && isAdmin ? (
<TouchDiv>
<motion.div
<motion.div
onClick={() => (setting ? setSetting(false) : setSetting(true))}
>
<RiListSettingsLine/>
@ -533,7 +533,7 @@ function Chats(){
</div>
</UserChat>
</div>
)})}
</div>
@ -569,7 +569,7 @@ function Chats(){
</div>
</div>
// </div>
);
);
}
export default Chats
export default Chats

View File

@ -59,7 +59,7 @@ const Modal = ({handleClose}: ModalProps) => {
const handleOptionChange = (selectId: number, selectedOption: string) => {
console.log("selected Option=", selectedOption)
setSelectTag((prevTags) =>
setSelectTag((prevTags) =>
prevTags.map((tag) =>
tag.id === selectId ? { ...tag, selectedOption } : tag
)
@ -123,7 +123,7 @@ const Modal = ({handleClose}: ModalProps) => {
onChange={(a) => handleOptionChange(selectTag.id, a.target.value)}
>
<option value="">{
selectTag.selectedOption ? selectTag.selectedOption : "Select an option"
selectTag.selectedOption ? selectTag.selectedOption : "Select a user"
}</option>
{users.filter((item) => !selectTags.some((tag) => tag.selectedOption === item.nickname)).map((item, index) => (
<option key={index} value={item.username}>
@ -137,9 +137,7 @@ const Modal = ({handleClose}: ModalProps) => {
<GrAdd onClick={addNewSelectedTag}/>
</div>
<div className="div_submit">
<Link to='#' className="submit" onClick={ saveSelectedOptions}>Submit</Link>
<Link to="#" className="submit" onClick={() => handleClose}>Cancel</Link>
<Link to='#' className="submit" onClick={saveSelectedOptions}>Submit</Link>
</div>
</div>
@ -150,9 +148,9 @@ const Modal = ({handleClose}: ModalProps) => {
<select
value={channel}
onChange={(event) => setChannel(event.target.value)}
>
<option value="">Select an option</option>
<option value="">Select a channel</option>
{convs.map((conv) => (
!(!conv.group || conv.private || (conv.banned && user && conv.banned.includes(user.username)) || (conv.members && user && conv.members.includes(user.username))) && (
<option key={conv.id} value={conv.id}>
@ -179,4 +177,4 @@ const Modal = ({handleClose}: ModalProps) => {
)
}
export default Modal
export default Modal

View File

@ -15,9 +15,10 @@ input.qr{
border-radius: 5px;
background-color: rgb(0, 0, 0);
margin : 1%;
color:rgb(42, 41, 41);
border-style: solid;
border-width: 1px;
border-color:rgb(42, 41, 41);
border-style: solid;
border-width: 1px;
color: #ccc;
}
.desactivate {