From cf2fae0a42a13270b56ed433f03018a0f7070e9e Mon Sep 17 00:00:00 2001 From: Chris Blanchard Date: Sun, 18 Oct 2015 16:23:39 +0100 Subject: [PATCH] Implemented user info dialog --- lib/react/gather.jsx | 17 +- public/js/helper.js => lib/react/helper.jsx | 16 ++ lib/react/message.jsx | 1 + lib/react/user.jsx | 234 +++++++++++++++----- 4 files changed, 194 insertions(+), 74 deletions(-) rename public/js/helper.js => lib/react/helper.jsx (69%) diff --git a/lib/react/gather.jsx b/lib/react/gather.jsx index e52f8a7..0f5f427 100644 --- a/lib/react/gather.jsx +++ b/lib/react/gather.jsx @@ -726,19 +726,6 @@ var Gatherers = React.createClass({ }); }, - enslUrl(gatherer) { - return `http://www.ensl.org/users/${gatherer.id}` - }, - - hiveUrl(gatherer) { - let hiveId = gatherer.user.hive.id; - if (hiveId) { - return `http://hive.naturalselection2.com/profile/${hiveId}` - } else { - return null; - } - }, - render() { let self = this; let user = this.props.user; @@ -862,10 +849,10 @@ var Gatherers = React.createClass({
{hive}
Links
- ENSL Profile  - Hive Profile
diff --git a/public/js/helper.js b/lib/react/helper.jsx similarity index 69% rename from public/js/helper.js rename to lib/react/helper.jsx index a732454..637b794 100644 --- a/public/js/helper.js +++ b/lib/react/helper.jsx @@ -36,3 +36,19 @@ var rankVotes = function (votes, candidates) { }); }; +var enslUrl = (gatherer) => { + return `http://www.ensl.org/users/${gatherer.id}` +}; + +var hiveUrl = (gatherer) => { + let hiveId = gatherer.user.hive.id; + if (hiveId) { + return `http://hive.naturalselection2.com/profile/${hiveId}` + } else { + return null; + } +}; + +var modalId = (user) => { + return `user-modal-${user.id}` +}; \ No newline at end of file diff --git a/lib/react/message.jsx b/lib/react/message.jsx index ce3b669..8cafd4e 100644 --- a/lib/react/message.jsx +++ b/lib/react/message.jsx @@ -35,6 +35,7 @@ var Chatroom = React.createClass({ let messages = this.props.messages.map(message => { if (message) { return } diff --git a/lib/react/user.jsx b/lib/react/user.jsx index 45cad9e..b0b3c17 100644 --- a/lib/react/user.jsx +++ b/lib/react/user.jsx @@ -36,17 +36,119 @@ var UserLogin = React.createClass({ ); } +}); + +var UserModal = React.createClass({ + render() { + let user = this.props.user; + console.log(user); + let hiveStats; + if (user.hive.id) { + hiveStats = [ + Hive Stats, + + ELO + {user.hive.skill} + , + + Hours Played + {Math.round(user.hive.playTime / 3600)} + , + + Wins + {user.hive.wins} + , + + Losses + {user.hive.loses} + , + + Kills (/min) + {user.hive.kills} ({_.round(user.hive.kills / (user.hive.playTime / 60), 1)}) + , + + Assists (/min) + {user.hive.assists} ({_.round(user.hive.assists / (user.hive.playTime / 60), 1)}) + , + + Deaths (/min) + {user.hive.deaths} ({_.round(user.hive.deaths / (user.hive.playTime / 60), 1)}) + + ] + } + return ( +
+
+
+
+ +

+ {user.country}  + {user.username} +

+
+
+
+ User Avatar +
+ + + + + + + + + + + {hiveStats} + +
Lifeforms
Links + ENSL Profile  + Hive Profile +
+
+
+ +
+
+
+
+ ); + } }) +var UserItem = React.createClass({ + render() { + let user = this.props.user; + return ( +
  • + {user.username} + +
    • + ); + } +}); + var UserMenu = React.createClass({ render() { let users = this.props.users.map(user => { - return ( -
  • - {user.username} -
    • - ); + return }); return (
    @@ -72,14 +174,17 @@ var AdminPanel = React.createClass({ render() { return (
    -
    -
    -
    - -

    Administration Panel

    -
    -
    -
    Swap Into a Different Account
    +
    +
    +
    + +

    Administration Panel

    +
    +
    +
    Swap Into a Different Account
    Gather Options
    @@ -88,12 +193,13 @@ var AdminPanel = React.createClass({ onClick={this.handleGatherReset}> Reset Gather
    -
    -
    - -
    -
    -
    +
    +
    + +
    +
    +
    ); } @@ -143,44 +249,54 @@ var ProfileModal = React.createClass({ return (
    -
    -
    -
    - -

    Profile

    -
    -
    -
    -
    -
    - + {skillLevels} -

    Try to give an accurate representation of your skill to raise the quality of your gathers

    -
    -
    -
    -
    - {abilitiesForm} -

    Specify which lifeforms you'd like to play in the gather

    -
    -
    -

    You will need to rejoin the gather to see your updated profile

    -
    - -
    +

    + Try to give an accurate representation of your skill to raise + the quality of your gathers +

    +
    +
    +
    +
    + {abilitiesForm} +

    + Specify which lifeforms you'd like to play in the gather +

    +
    +
    +

    + You will need to rejoin the gather to see your updated profile +

    +
    + +
    -
    -
    -
    +
    + + ); } @@ -193,9 +309,9 @@ var CurrentUser = React.createClass({ if (this.props.user.admin) { adminOptions = (
  • - - Administration - + + Administration +
    • ) }