Skip to content

Commit

Permalink
Merge branch 'main' into autoUpdateWOF
Browse files Browse the repository at this point in the history
  • Loading branch information
@wisdomjackie
wisdomjackie authored Jul 22, 2023
2 parents da08392 + 3b26c63 commit 245fcd0
Show file tree
Hide file tree
Showing 30 changed files with 499 additions and 180 deletions.
11 changes: 3 additions & 8 deletions client/components/App.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,11 +5,11 @@ import Home from "./Home.jsx";
import UserProfile from "./UserProfile.jsx";
import WallOfFame from "./WallOfFame.jsx";
import Navigation from "./Navigation.jsx";
import GoogleButton from "react-google-button";
import axios from "axios";
import Messages from "./MessageComponents/Messages.jsx";
import SignUp from "./SignUp.jsx";


import "bootstrap-icons/font/bootstrap-icons.css";
import "bootstrap/dist/css/bootstrap.min.css";
import ".././global.css";
import { useDispatch } from "react-redux";
Expand Down Expand Up @@ -60,11 +60,6 @@ const App = () => {
};


// redirect user to sign up page
const redirectToGoogleSSO = () => {
window.location.href = "http://127.0.0.1:4000/auth/login/google";
};

// get placement of current user
// useEffect to get user placement
const getPlacement = async () => {
Expand Down Expand Up @@ -146,7 +141,7 @@ const App = () => {
<Routes>
<Route
index
element={<GoogleButton onClick={redirectToGoogleSSO} />}
element={<SignUp />}
></Route>
<Route
exact
Expand Down
124 changes: 76 additions & 48 deletions client/components/DecisionMaker.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,16 +1,15 @@
import { useState, useEffect } from 'react';
import axios from 'axios'; // make GET request to search users
// import '../../node_modules/socket.io';
// const http = require('http');
//import axios from 'axios'; // make GET request to search users STRETCH GOAL
import io from 'socket.io-client';
const socket = io();

//import { socket } from '../socket';
import PAPER from "../img/PAPER.png";
import SCISSORS from "../img/SCISSORS.png";
import ROCK from "../img/ROCK.png";

const DecisionMaker = ({changePoints}) => {
const [hand, setHand] = useState('none'); // rock, paper, scissors hands
const [searchInput, setSearchInput] = useState(''); // search input to search users
const [user, setUser] = useState(''); // set user (your opponent) state
//const [searchInput, setSearchInput] = useState(''); // search input to search users
//const [user, setUser] = useState(''); // set user (your opponent) state
const [room, setRoom] = useState(''); // create room for rps players
const [handReceived, setHandReceived] = useState('...'); // hand received from socket server
const [result, setResult] = useState(''); // result after playing hands
Expand All @@ -19,20 +18,21 @@ const DecisionMaker = ({changePoints}) => {
const [ready, setReady] = useState(false); // if both players are ready

// create function to GET user by username
const getUser = () => {
axios.get(`/decisionmaker/user/${searchInput}`)
.then((response) => {
//console.log('response:', response);
if (response.data === 'OK') {
setUser(searchInput);
setSearchInput('');
}
})
.catch((err) => {
console.error('error getting user:', err);
setUser('User does not exist. Please enter a valid username');
});
};
// STRETCH GOAL find user and create connection on user search
// const getUser = () => {
// axios.get(`/decisionmaker/user/${searchInput}`)
// .then((response) => {
// //console.log('response:', response);
// if (response.data === 'OK') {
// setUser(searchInput);
// setSearchInput('');
// }
// })
// .catch((err) => {
// console.error('error getting user:', err);
// setUser('User does not exist. Please enter a valid username');
// });
// };

// value to search username
const handleChange = (e) => {
Expand Down Expand Up @@ -72,7 +72,7 @@ const DecisionMaker = ({changePoints}) => {
}
};

// send rock, paper, or scissors to socket server
// send rock, paper, or scissors to socket server and opponent
const sendHand = () => {
if (!full) {
socket.emit('hand', { hand, room });
Expand All @@ -83,26 +83,42 @@ const DecisionMaker = ({changePoints}) => {
// refresh page to play again
const refreshPage = () => {
window.location.reload(false);
// setHand('none');
// setRoom('');
// setHandReceived('...');
// setResult('');
// setJoined('false');
// setFull('false');
// setReady('false');
};

// if both players are ready
// if one player is ready, send READY to other player
useEffect(() => {
socket.on('ready', (data) => {
console.log(data);
//console.log(data);
setReady(true);
console.log(ready);
//console.log('ready:', ready);
socket.emit('other_ready', {ready: 'READY', room: room});
});
});

// see if other player is ready
useEffect(() => {
socket.on('other_ready', (data) => {
setReady(true);
//console.log('other_ready:', ready);
});
}, [ready]);

// receive if room is full
useEffect(() => {
socket.on('full', (data) => {
setFull(true);
console.log(data);
//console.log(data);
});
});

// receive socket server info
// receive opponent's hand data
useEffect(() => {
socket.on('receive_hand', (data) => {
// console.log(data.hand);
Expand All @@ -117,7 +133,7 @@ const DecisionMaker = ({changePoints}) => {

return (
<div className='section container'>
<h1>Decision Maker</h1>
<h1 className="text-primary">Decision Maker: Rock, Paper, Scissors</h1>

{/* <input type="text"
placeholder='Search User'
Expand All @@ -140,7 +156,8 @@ const DecisionMaker = ({changePoints}) => {
setRoom(e.target.value);
if (e.target.value === '') {
setFull(false);
setHand('none');
setJoined(false);
setReady(false);
}
}}
onKeyDown={(e) => {
Expand All @@ -151,32 +168,43 @@ const DecisionMaker = ({changePoints}) => {
/>
<button onClick={joinRoom}> Join Room </button>
<div>
{!joined ? (<h2></h2>) : <h2>You are in room: {room}</h2>}
{!joined ? (<h2></h2>) : <h2 className="text-primary">You are in room: {room}</h2>}
</div>
<div>
{!full ? (<h2></h2>) : <h2 className="text-primary">Room {room} is full</h2>}
</div>

<div>{!ready ? (<h2 className="text-primary">Waiting</h2>) :
(<div>

<h2 className="text-primary">Let's play!</h2>

<button
><img src={ROCK} alt='ROCK' onClick={() => setHand('rock')}/>
</button>

<button
><img src={PAPER} alt='PAPER' onClick={() => setHand('paper')}/>
</button>

<button
><img src={SCISSORS} alt='SCISSORS' onClick={() => setHand('scissors')}/>
</button>

<button type="button"
onClick={() => sendHand()}
>Send Hand</button>
<h2 className="text-primary">You picked {hand}!</h2>
</div>)}
</div>
<div>{!full ? (<h2></h2>) : <h2>The room is full</h2>}</div>
<h2>You picked {hand}!</h2>

<div>
{!result ? (<h2></h2>) : ( <div>
<h2>Your opponent picked {handReceived}!</h2>
<h2>{result}</h2>
<h2 className="text-primary">Your opponent picked {handReceived}!</h2>
<h2 className="text-primary">{result}</h2>
<button onClick={refreshPage}>Click to Play Again!</button>
</div>)}
</div>

<button type="button"
onClick={() => setHand('rock')}
>Rock</button>
<button type="button"
onClick={() => setHand('paper')}
>Paper</button>
<button type="button"
onClick={() => setHand('scissors')}
>Scissors</button>

<button type="button"
onClick={() => sendHand()}
>Send Hand</button>
</div>
);
};
Expand Down
114 changes: 53 additions & 61 deletions client/components/Home.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,40 +1,24 @@
import { useState, useEffect } from "react";


import { Link } from 'react-router-dom';
import axios from 'axios';
import dayjs from 'dayjs';
import relativeTime from 'dayjs/plugin/relativeTime';
import { Link } from "react-router-dom";
import axios from "axios";
import Void from "./Void.jsx";

const Home = ({ user, changePoints }) => {

const [text, setText] = useState("");
const [posts, setPosts] = useState([]);
const [submit, setSubmit] = useState(false);


let startCount = parseInt(posts.likes || 0)
const [countLikes, setCountLikes] = useState(startCount);
const [toggleOff, setToggleOff] = useState(false);
const [submit, setSubmit] = useState(true);


dayjs.extend(relativeTime);
const handleChange = (e) => {
setText(e.target.value);
};


// INCREMENTS LIKES STATE
const handleIncrementLikes = () => {
setCountLikes((prevCountLikes) => prevCountLikes + 1);
};


// SUBMITS anonymous SCREAM INTO THE VOID
const handleSubmit = (e) => {
e.preventDefault();
setSubmit(true);
const fetchData = async () => {

await axios
.post("/void", { text })
.then((data) => {
Expand All @@ -44,13 +28,16 @@ const Home = ({ user, changePoints }) => {
setSubmit(false);
})
.catch((err) => {
console.error('Error in handleSubmit axios.post request ===>', err);
console.error("Error in handleSubmit axios.post request ===>", err);
});
};
// also add points to user
changePoints(user, 3);


// open void on submit click if toggleOff state is true
if (toggleOff) {
document.getElementById("void-toggle-btn").click();
}
// calls async function
fetchData();
};
Expand Down Expand Up @@ -79,23 +66,10 @@ const Home = ({ user, changePoints }) => {
// runs useEffect every time handleSubmit function is invoked similar to componentDidMount()
}, [submit]);


// CREATE POSTS v. POSTS ITEMS component to get post id through props! via Jackie's suggestion
// // UPDATE A SPECIFIC SCREAM VIA post id
useEffect(() => {
const fetchData = async () => {
await axios
.put("/void/<Needs Post.id Variable ID>", { likes: countLikes })
.then((response) => {
console.log("PUT request response", response);
})
.catch((err) => {
console.error("ERROR in axios put request at handleLikeClick: ", err);
});
fetchData();
}
}, [countLikes]);

// ONCLICK STATE UPDATE FOR VOID TOGGLE OPEN OR CLOSE
const handleVoidToggle = () => {
setToggleOff(!toggleOff);
};

return (
<div className="home section">
Expand Down Expand Up @@ -140,30 +114,48 @@ const Home = ({ user, changePoints }) => {
<b>SUBMIT</b>
</button>
</div>
<div className="scream-container bg-primary container ps-3 pt-3 pb-2">
{posts.map((post) => {
return (
<div key={post.id + "void"} id={post.id}>
<p className="scream modal-content text-white pt-3">
<span className="scream modal-content text-sm-left">
anonymous:{" "}
</span>
<b>{`"${post.text}"`}</b>
<span>
{" "}
created: {dayjs(`${post.createdAt}`).fromNow()}
</span>
</p>
<div id="accordion">
<div className="card">
<div className="card-header d-flex flex-row-reverse" id="void">
<h5 className="mb-0">
<button
className="btn btn-light round-btn"
onClick={handleIncrementLikes}
id="void-toggle-btn"
className="btn btn-link"
data-bs-toggle="collapse"
data-bs-target="#collapseVoid"
aria-expanded="true"
aria-controls="collapseVoid"
onClick={handleVoidToggle}
>
💯 <span className="likes">{post.likes}</span>
{toggleOff ? (
<div className="toggle-icon-container">
<i className="bi bi-toggle-off"></i>
<span className="toggle-text">OPEN VOID</span>
</div>
) : (
<div className="toggle-icon-container">
<i className="bi bi-toggle-on"></i>
<span className="toggle-text">CLOSE VOID</span>
</div>
)}
</button>
<hr></hr>
</div>
);
})}
</h5>
</div>
</div>
<div
id="collapseVoid"
className="collapse show"
aria-labelledby="void"
data-parent="#accordion"
>
<Void
className="card-body"
user={user}
addPoints={addPoints}
posts={posts}
submit={submit}
/>
</div>
</div>
</div>
<hr></hr>
Expand Down
Loading

0 comments on commit 245fcd0

Please sign in to comment.