Include compatibility and completed site layout

docker-compose.yml

@@ -32,7 +32,7 @@ services:
       - postgres
       - server
     ports:
-      - "3002:3000"
+      - "13002:3000"
     environment:
       - CHOKIDAR_USEPOLLING=true
     stdin_open: true

frontend/src/App.css

@@ -32,6 +32,10 @@ body{
 	color:#fff;
 }
 
+.profile:hover{
+	background-color:#6666AA;
+}
+
 .header{
 	font: 32px ACROTSRG;
 	font-weight: bold;
@@ -55,6 +59,10 @@ body{
     0 0 150px #0ff;
 }
 
+.shadowImage { 
+	box-shadow: 0px 0px 30px #fff;
+}
+
 .glowLight {
   color: #fff;
   text-shadow:

frontend/src/App.js

@@ -53,20 +53,258 @@ const ChooseFlavorLoadingText = () => {
 	return strings[Math.floor(Math.random()*strings.length)]
 }
 
+const GetAvatar=(username)=>{
+	return "https://ui-avatars.com/api/?name="+username+"&rounded=true";
+}
+const GetSign=(birth_year,birth_month,birth_day,birth_minute,birth_hour)=>{
+	if (birth_month===2) {
+		if (birth_day<21) {
+			return 12;
+		} else {
+			return 1;
+		}
+	} else
+	if (birth_month===3) {
+		if (birth_day<20) {
+			return 1;
+		} else {
+			return 2;
+		}
+	} else
+	if (birth_month===4) {
+		if (birth_day<21) {
+			return 2;
+		} else {
+			return 3;
+		}
+	} else
+	if (birth_month===5) {
+		if (birth_day<21) {
+			return 3;
+		} else {
+			return 4;
+		}
+	} else
+	if (birth_month===6) {
+		if (birth_day<23) {
+			return 4;
+		} else {
+			return 5;
+		}
+	} else
+	if (birth_month===7) {
+		if (birth_day<23) {
+			return 5;
+		} else {
+			return 6;
+		}
+	} else
+	if (birth_month===8) {
+		if (birth_day<23) {
+			return 6;
+		} else {
+			return 7;
+		}
+	} else
+	if (birth_month===9) {
+		if (birth_day<23) {
+			return 7;
+		} else {
+			return 8;
+		}
+	} else
+	if (birth_month===10) {
+		if (birth_day<22) {
+			return 8;
+		} else {
+			return 9;
+		}
+	} else
+	if (birth_month===11) {
+		if (birth_day<22) {
+			return 9;
+		} else {
+			return 10;
+		}
+	} else
+	if (birth_month===0) {
+		if (birth_day<20) {
+			return 10;
+		} else {
+			return 11;
+		}
+	} else
+	if (birth_month===1) {
+		if (birth_day<19) {
+			return 11;
+		} else {
+			return 12;
+		}
+	}
+	return 1; //Defaults to Aries...
+}
+
+const GetSignByUser = (username,users)=>{
+	var user = users.filter(((user)=>user.username===username))[0];
+	return GetSign(user.birth_year,user.birth_month,user.birth_day,user.birth_minute,user.birth_hour)
+}
+
+const GetSignData = (username,users,signs)=>{
+	var user = users.filter(((user)=>user.username===username))[0];
+	return signs.filter((sign)=>sign.id===GetSign(user.birth_year,user.birth_month,user.birth_day,user.birth_minute,user.birth_hour))[0];
+}
+
+const GetCompatibleMembers = (username,users,signs,compatibility)=>{
+	//Look for your sign data.
+	var myData = GetSignData(username,users,signs)
+	var compatibilityData = compatibility.filter((c)=>
+	{
+		return c.signid===myData.id && c.compatible
+	})
+	//See if compatible members exist.
+	var compatibleIds = []
+	for (var compat of compatibilityData) {
+		compatibleIds.push(compat.compatiblesignid)
+	}
+	//console.log(compatibleIds)
+	var compatibleUsers = []
+	users.forEach((user)=>{
+		if (compatibleIds.includes(GetSignData(user.username,users,signs).id)) {
+			compatibleUsers.push(user.username)
+		}
+	})
+	//console.log(compatibleUsers)
+	return compatibleUsers
+}
+
+const RandomDarkColor = (username)=>{
+	if (username.length>=3) {
+		return Math.floor((username.charCodeAt(0)*7%16)/2).toString(16)+(username.charCodeAt(0)%16).toString(16)+Math.floor((username.charCodeAt(1)*7%16)/2).toString(16)+(username.charCodeAt(1)%16).toString(16)+Math.floor((username.charCodeAt(2)*7%16)/2).toString(16)+(username.charCodeAt(2)%16).toString(16)
+	} else {
+		return "646968";
+	}
+}
+
+const Member =(p)=>{
+	const [additionalText,setAdditionalText] = useState("");
+	return (
+		<div className="col-md-4 border fadein profile">
+			<div className="row">
+				<div className="col-md-12">
+					<img src={"https://ui-avatars.com/api/?name="+p.username+"&rounded=true&background="+RandomDarkColor(p.username)}/>
+				</div>
+			</div>
+			<div className="row">
+				<div className="col-md-12">
+				{p.username}
+				</div>
+			</div>
+			{additionalText}
+		</div>
+	);
+}
+
 const UserPage = ()=>{
 	const [text,setText] = useState("");
+	const [dailytext,setDailyText] = useState("");
+	const [compatibilitytext,setCompatibilityText] = useState("");
 	const [page,setPage] = useState(null);
-	switch (page) {
-		default:{
-			return (<div className="container stars border rounded shadow-sm">
-				<div className="row">
+	const [sign,setSign] = useState("");
+	const [careerRating,setCareerRating] = useState(0);
+	const [wealthRating,setWealthRating] = useState(0);
+	const [loveRelationshipRating,setLoveRelationshipRating] = useState(0);
+	const [healthRating,setHealthRating] = useState(0);
+	const [update,setUpdate] = useState(false);
+	const [users,setUsers] = useState([]);
+	const [signs,setSigns] = useState([]);
+	const [compatibility,setCompatibility] = useState([]);
+	
+	useEffect(()=>{
+		axios.get(REMOTE_ADDR+"/users/view").then((data)=>{
+			setUsers(data.data)
+			return axios.get(REMOTE_ADDR+"/signs/view")
+		})
+		.then((data)=>{setSigns(data.data)
+			return axios.get(REMOTE_ADDR+"/compatibility/view")
+		})
+		.then((data)=>{
+			setCompatibility(data.data)
+		})
+		.then(()=>{
+			setPage("USERHOME");
+		})
+	},[update]);
+	
+	useEffect(()=>{
+		if (users.length>0 && signs.length>0) {
+			//console.log("Users: "+users)
+			axios.get("http://45.33.13.215/astronomy/"+GetSignData(getCookie("username"),users,signs).sign_name).then((data)=>{		
+				setDailyText(data.data.horoscope)
+			})
+		}
+	},[users,signs]);
+	
+	useEffect(()=>{
+		if (users.length>0 && signs.length>0 && compatibility.length>0) {
+			var finalText = GetCompatibleMembers(getCookie("username"),users,signs,compatibility).reverse().map((member)=>{
+					return <Member username={member} users={users} signs={signs} compatibility={compatibility}/>
+				})
+			setCompatibilityText(finalText)
+		}
+	},[users,signs,compatibility])
+	
+	
+	const header = <div className="row">
 					<div className="col-md-12 header text-center">
 						<span className="glowHeavy animated fadein">{getCookie("username")}'s ASTRONOMY</span>
 					</div>
+				</div>;
+	const dailyheader = <div className="row pt-5">
+					<div className="col-md-12 header text-center">
+						<span className="glowHeavy animated fadein">{getCookie("username")}'s DAILY HOROSCOPE</span>
+					</div>
+				</div>;
+	const compatibilityheader = <div className="row pt-5">
+					<div className="col-md-12 header text-center">
+						<span className="glowHeavy animated fadein">{getCookie("username")}'s COMPATIBILITY</span>
+					</div>
+				</div>;
+	
+	switch (page) {
+		case "USERHOME":{
+			return (<div className="pb-3 container stars border rounded shadow-sm">
+				{header}
+				<div className="row pt-2 pb-2">
+					<div className="col-md-12 text-center">
+							{GetSignData(getCookie("username"),users,signs).sign_name}
+							<br/>
+						<img width={64} src={require('./astrology_signs/'+GetSignByUser(getCookie("username"),users)+'.png')}/>
+					</div>
+				</div>
+				{dailyheader}
+				<div className="row pt-2 pb-2">
+					<div className="col-md-12 text-center">
+					{dailytext}
+					</div>
 				</div>
+				{compatibilityheader}
+				<div className="row pt-2 pb-2">
+					<div className="col-md-12 text-center">
+						<div className="row text-center">
+							{compatibilitytext}
+						</div>
+					</div>
+				</div>
+			</div>);
+		}break;
+		default:{
+			return (<div className="pb-3 container stars border rounded shadow-sm">
+				{header}
 				<div className="row">
 					<div className="col-md-12 text-center">
-						{text}
+						<span className="slowblink">
+							{ChooseFlavorLoadingText()}
+						</span>
 					</div>
 				</div>
 			</div>);