From 439ab8fa7adb8fa585e21338880d5aec43b5139e Mon Sep 17 00:00:00 2001 From: Andrew Kerr Date: Tue, 31 Aug 2021 13:52:42 -0400 Subject: [PATCH] silly stupidly overcomplicated friend list decomplicated and now almost done. too much detail? not enough? life story next --- client/components/Home.js | 2 +- client/components/ListLevels.js | 1 - client/components/Navbar.js | 4 +- client/components/Profile.js | 52 +++++--- public/style.css | 222 ++++++++++++++++++++------------ 5 files changed, 176 insertions(+), 105 deletions(-) diff --git a/client/components/Home.js b/client/components/Home.js index ec47649..43ea928 100644 --- a/client/components/Home.js +++ b/client/components/Home.js @@ -29,7 +29,7 @@ export class Home extends React.Component { levelCategory = "Arrays"; levelNumber = nextLevel - 9; } - else if (nextLevel <= 16){ + else if (nextLevel <= 17){ levelCategory = "Objects"; levelNumber = nextLevel - 14; } diff --git a/client/components/ListLevels.js b/client/components/ListLevels.js index 281d516..00a881a 100644 --- a/client/components/ListLevels.js +++ b/client/components/ListLevels.js @@ -26,7 +26,6 @@ class ListLevels extends React.Component { } handleMouseOver(event){ - console.log(event.target.id) this.setState({levelPrompt: event.target.id}); } diff --git a/client/components/Navbar.js b/client/components/Navbar.js index 1e7be04..eecb3e4 100644 --- a/client/components/Navbar.js +++ b/client/components/Navbar.js @@ -35,8 +35,8 @@ const Navbar = ({handleClick, isLoggedIn, userId}) => ( ) : (
{/* The navbar will show these links before you log in */} - - + + {/* Login Sign Up */}
diff --git a/client/components/Profile.js b/client/components/Profile.js index 96afd0a..a404e46 100644 --- a/client/components/Profile.js +++ b/client/components/Profile.js @@ -13,12 +13,14 @@ class Profile extends React.Component { super(props) this.state = { verified: false, - rank: 'Cadet' + rank: 'Cadet', + friendList: 'active' } this.setVerified = this.setVerified.bind(this); this.setRank = this.setRank.bind(this); this.grabUserAndFriends = this.grabUserAndFriends.bind(this); + this.hideFriends = this.hideFriends.bind(this); } componentDidMount() { @@ -32,6 +34,7 @@ class Profile extends React.Component { else if (completedLevels <= 9){ this.setRank('Private'); } else if (completedLevels <= 14){ this.setRank('Specialist'); } else if (completedLevels <= 16){ this.setRank('Code Cracker'); } + else { this.setRank('Senior Level Programmer')} } async grabUserAndFriends(userId){ @@ -47,32 +50,47 @@ class Profile extends React.Component { this.setState({ rank: currentRank }); } + hideFriends(){ + if (this.state.friendList === 'active') { this.setState({friendList: 'hidden'}); } + else { this.setState({friendList: 'active'});} + } + render() { let completedLevels = 0 if (this.props.user.levels && this.props.user.id) (completedLevels = this.props.user.levels.length) - const { verified } = this.state; - const { levels } = this.props.user; + const { levels, friends } = this.props.user; const allLevels = this.props.levels; return (
-

{this.props.user.username}

- {(this.props.auth.id === this.props.user.id) && (verified ? : ) } - {(this.props.auth.id !== this.props.user.id) && ()} -

-
Next Level:
- {this.props.levels[completedLevels] && - } -

-
Completion: {completedLevels / this.props.levels.length * 100} %
-
Rank: {this.state.rank}
- {completedLevels !== 0 &&
Levels Completed:
} +
+
+ +
+
+

{this.props.user.username}

+ {(this.props.auth.id === this.props.user.id) && (verified ? : ) } + {(this.props.auth.id !== this.props.user.id) && ()} +

+
Next Level:
+ {this.props.levels[completedLevels] && + } +

+
Completion: {completedLevels / this.props.levels.length * 100} %
+
Rank: {this.state.rank}
+
+
+ {this.state.friendList === 'active' ? (Array.isArray(friends) && friends.length > 0 ? (
{friends.map((element) =>(
{element.username}
))}
) : (
You have no friends! How sad. But you can add some by searching for users and visiting their profiles.
)) : (
)} + +
+
+ {completedLevels !== 0 &&
Levels Completed:
}
Control Flow
{Array.isArray(levels) && (levels.filter(element => element.category === 'Control Flow').map((element) =>(
{element.name}
)))}
diff --git a/public/style.css b/public/style.css index 7327024..1cd0ab6 100644 --- a/public/style.css +++ b/public/style.css @@ -1,5 +1,4 @@ body { - font-family: sans-serif; margin: 0; background-color: #c2c5aa; @@ -8,16 +7,16 @@ body { } .hidden { - color: rgba(0, 0, 0, 0); + color: rgba(0, 0, 0, 0); } a { - text-decoration: none; - color: black; + text-decoration: none; + color: black; } label { - display: block; + display: block; } .nav { @@ -27,15 +26,24 @@ label { background-color: #414833; } +.nav-button { + background-color: #414833; + border-radius: 10px; + border-style: none; +} + +.nav-button:hover { +} + nav a { - display: inline-block; - margin: 1em; - color: blanchedalmond; + display: inline-block; + margin: 1em; + color: blanchedalmond; } form div { - margin: 1em; - display: inline-block; + margin: 1em; + display: inline-block; } .unlocked { @@ -66,24 +74,22 @@ form div { padding: 15px; background-color: #656d4a; font-size: larger; - } .levelListContainer { - display: flex; - flex-direction: row; - flex-wrap: wrap; + display: flex; + flex-direction: row; + flex-wrap: wrap; } .levelCard { - padding: 10px; } #level { - display: flex; - flex-direction: column; - align-items: center; + display: flex; + flex-direction: column; + align-items: center; } #level h2 { @@ -99,66 +105,60 @@ form div { z-index: 1; position: relative; margin-left: 25%; - margin-right: 25% + margin-right: 25%; } #codeIframe { - display: flex; - flex-direction: column; - align-items: center; - margin: 20px; - z-index: 1; - background-color: rgba(255, 238, 189, 0.555); - border: 5px double; - width: 600px; - height: 250px; -} - -#profileContainer { - display: flex; - flex-direction: column; - align-items: center; + display: flex; + flex-direction: column; + align-items: center; + margin: 20px; + z-index: 1; + background-color: rgba(255, 238, 189, 0.555); + border: 5px double; + width: 600px; + height: 250px; } .evilDuck { - height: 100px; - width: 100px; - margin-left: 50px; - margin-right: 50px; + height: 100px; + width: 100px; + margin-left: 50px; + margin-right: 50px; } .goodDuck { - height: 100px; - width: 100px; - margin-left: 50px; - margin-right: 50px; + height: 100px; + width: 100px; + margin-left: 50px; + margin-right: 50px; } .runButton { - z-index: 1; + z-index: 1; } .duckDiv { - display: flex; + display: flex; } .generalJoe { - height: 200px; - width: 200px; - position: absolute; + height: 200px; + width: 200px; + position: absolute; } #success { - font-weight: bold; - margin: 15px; + font-weight: bold; + margin: 15px; } .lvl-desc { - margin: 25px; + margin: 25px; } .next-level { - margin: 30px; + margin: 30px; } .openingOfficer { @@ -199,7 +199,7 @@ form div { .edit-profile-button:hover { border-style: inset; - background-color: #b6ad90; + background-color: #a68a64; } #level-topics { @@ -233,7 +233,6 @@ form div { background-color: #582f0e; } - #level-list-menu { display: flex; align-content: flex-start; @@ -289,35 +288,90 @@ form div { } #bottomBar { - display: flex; - display: flex; - position: fixed; - justify-content: space-between; - bottom: 10px; - right: 10px; - left: 10px; - align-items: flex-end; - } - - #bottomBarInnerDiv { - display: flex; - justify-content: flex-end; - width: 100%; - height: 25px; - background-color: royalblue; - } - - #bottomBarOpenSymbol { - position: fixed; - bottom: 10px; - right: 10px; - } - - .userList { - display: flex; - flex-direction: column; - border-style: outset; - width: 200px; - text-align: center; - background: antiquewhite; + display: flex; + display: flex; + position: fixed; + justify-content: space-between; + bottom: 10px; + right: 10px; + left: 10px; + align-items: flex-end; +} + +#bottomBarInnerDiv { + display: flex; + justify-content: flex-end; + width: 100%; + height: 25px; + background-color: royalblue; +} + +#bottomBarOpenSymbol { + position: fixed; + bottom: 10px; + right: 10px; +} + +.userList { + display: flex; + flex-direction: column; + border-style: outset; + width: 200px; + text-align: center; + background: antiquewhite; +} + +/* #profileContainer { + display: flex; + flex-direction: column; + align-items: center; +} */ + +#top-profileContainer { + display: flex; + flex-direction: row; + justify-content: space-evenly; + align-items: center; +} + +#top-profileContainer-mainSection { + display: flex; + flex-direction: column; + align-items: center; +} + +.friends-button { + background-color: #b6ad90; + border-style: outset; + width: 100px; +} + +.friends-button:hover { + background-color: #a68a64; + border-style: inset; +} + +#friend-list { + width: 100px; + height: 100px; + border-radius: 15px; + border-style: double; + border-width: 3px; + background-color: #936639; + padding: 10px; + padding-left: 15px; + padding-right: 15px; +} + +#ghost-friend-list { + width: 100px; + height: 100px; + border-radius: 15px; + border-style: double; + border-width: 3px; + border-color: #c2c5aa; + background-color: #c2c5aa; + padding: 10px; + padding-left: 15px; + padding-right: 15px; }