diff --git a/app/javascripts/components/admin.js b/app/javascripts/components/admin.js new file mode 100644 index 0000000..11765e1 --- /dev/null +++ b/app/javascripts/components/admin.js @@ -0,0 +1,89 @@ +const React = require("react"); +import {MenubarMixin} from "javascripts/components/menubar"; + +const UserLogin = React.createClass({ + propTypes: { + socket: React.PropTypes.object.isRequired + }, + + getInitialState() { + return { + userId: null + }; + }, + + handleChange(e) { + const newId = e.target.value || null; + this.setState({ userId: newId }); + }, + + authorizeId(id) { + this.props.socket.emit("users:authorize", { + id: id + }); + }, + + handleSubmit(e) { + e.preventDefault(); + this.authorizeId(this.state.userId); + }, + + render() { + return ( +
+
+ + + + +
+
+ ); + } +}); + +const AdminPanel = exports.AdminPanel = React.createClass({ + mixins: [MenubarMixin], + + propTypes: { + socket: React.PropTypes.object.isRequired + }, + + handleGatherReset() { + this.props.socket.emit("gather:reset"); + }, + + render() { + return ( +
  • + + + + +
  • + ); + } +}); \ No newline at end of file diff --git a/app/javascripts/components/gather.js b/app/javascripts/components/gather.js index 8cca181..261756e 100644 --- a/app/javascripts/components/gather.js +++ b/app/javascripts/components/gather.js @@ -570,6 +570,7 @@ const Gather = exports.Gather = React.createClass({ const socket = this.props.socket; const gather = this.props.gather; const thisGatherer = this.props.thisGatherer; + const soundController = this.props.soundController; const servers = this.props.servers; const maps = this.props.maps; const user = this.props.user; @@ -614,9 +615,8 @@ const Gather = exports.Gather = React.createClass({ socket={socket} /> - + {gatherTeams} {voting} @@ -628,7 +628,7 @@ const Gather = exports.Gather = React.createClass({
    Current Gather
    + socket={socket} soundController={soundController}/> ); } @@ -674,17 +674,14 @@ const LifeformIcons = exports.LifeformIcons = React.createClass({ } }); -const Gatherers = React.createClass({ +const GathererListItem = React.createClass({ propTypes: { - user: React.PropTypes.object, - thisGatherer: React.PropTypes.object, + user: React.PropTypes.object.isRequired, + gather: React.PropTypes.object.isRequired, socket: React.PropTypes.object.isRequired, - gather: React.PropTypes.object.isRequired - }, - - joinGather(e) { - e.preventDefault(); - this.props.socket.emit("gather:join"); + gatherer: React.PropTypes.object.isRequired, + thisGatherer: React.PropTypes.object, + soundController: React.PropTypes.object.isRequired }, bootGatherer(e) { @@ -694,146 +691,186 @@ const Gatherers = React.createClass({ }); }, + getInitialState() { + return { + collapse: true + }; + }, + + toggleCollapse(e) { + e.preventDefault(); + this.setState({ collapse: !this.state.collapse }); + }, + + collapseState() { + return `panel-collapse out collapse ${this.state.collapse ? "" : "in"}`; + }, + + render() { + const user = this.props.user; + const gather = this.props.gather; + const socket = this.props.socket; + const gatherer = this.props.gatherer; + const thisGatherer = this.props.thisGatherer; + const soundController = this.props.soundController; + + let country; + if (gatherer.user.country) { + country = ( + {gatherer.user.country} + ); + }; + + const skill = gatherer.user.profile.skill || "Not Available"; + + const hiveStats = []; + if (gatherer.user.hive.skill) hiveStats.push(`${gatherer.user.hive.skill} ELO`); + + if (gatherer.user.hive.playTime) { + hiveStats.push(`${Math.floor(gatherer.user.hive.playTime / 3600)} Hours`); + } + + const hive = (hiveStats.length) ? hiveStats.join(", ") : "Not Available"; + + const team = (gatherer.user.team) ? gatherer.user.team.name : "None"; + + let action; + if (gather.state === "election") { + let votes = gather.gatherers.reduce((acc, voter) => { + if (voter.leaderVote === gatherer.id) acc++; + return acc; + }, 0) + action = ( + + {votes + " votes"} + + + ); + } + + if (gather.state === 'selection') { + if (thisGatherer && + thisGatherer.leader && + thisGatherer.team === gather.pickingTurn) { + action = ( + + + + ); + } else { + if (gatherer.leader) { + action = (Leader); + } else if (gatherer.team !== "lobby") { + action = ({_.capitalize(gatherer.team)}); + } else { + action = ( + Lobby); + } + } + } + + let adminOptions; + if ((user && user.admin) || (user && user.moderator)) { + adminOptions = [ +
    , +
    Admin
    , +
    +   + +
    + ] + } + + let tabColor = gatherer.team !== "lobby" ? `panel-${gatherer.team}` : "panel-info"; + return ( +
    +
    +

    + {country} {gatherer.user.username} + + + Info + + {action} + +

    +
    +
    +
    +
    +
    Skill Level
    +
    {skill}
    +
    Team
    +
    {team}
    +
    Hive Stats
    +
    {hive}
    +
    Links
    +
    + ENSL Profile  + Hive Profile +
    + {adminOptions} +
    +
    +
    +
    + ); + } +}); + +const Gatherers = React.createClass({ + propTypes: { + user: React.PropTypes.object, + thisGatherer: React.PropTypes.object, + socket: React.PropTypes.object.isRequired, + gather: React.PropTypes.object.isRequired, + soundController: React.PropTypes.object.isRequired + }, + + joinGather(e) { + e.preventDefault(); + this.props.socket.emit("gather:join"); + }, + render() { const self = this; const user = this.props.user; const socket = this.props.socket; const gather = this.props.gather; const thisGatherer = this.props.thisGatherer; - const admin = (user && user.admin) || (user && user.moderator); const gatherers = gather.gatherers .sort((a, b) => { return (b.user.hive.skill || 1000) - (a.user.hive.skill || 1000); }) .map(gatherer => { - let country; - if (gatherer.user.country) { - country = ( - {gatherer.user.country} - ); - }; + return + }); - let skill = gatherer.user.profile.skill || "Not Available"; - - let hiveStats = []; - if (gatherer.user.hive.skill) hiveStats.push(`${gatherer.user.hive.skill} ELO`); - - if (gatherer.user.hive.playTime) { - hiveStats.push(`${Math.floor(gatherer.user.hive.playTime / 3600)} Hours`); - } - - let hive = (hiveStats.length) ? hiveStats.join(", ") : "Not Available"; - - let team = (gatherer.user.team) ? gatherer.user.team.name : "None"; - - let action; - if (gather.state === "election") { - let votes = gather.gatherers.reduce((acc, voter) => { - if (voter.leaderVote === gatherer.id) acc++; - return acc; - }, 0) - action = ( - - {votes + " votes"} - - - ); - } - - if (gather.state === 'selection') { - if (thisGatherer && - thisGatherer.leader && - thisGatherer.team === gather.pickingTurn) { - action = ( - - - - ); - } else { - if (gatherer.leader) { - action = (Leader); - } else if (gatherer.team !== "lobby") { - action = ({_.capitalize(gatherer.team)}); - } else { - action = ( - Lobby); - } - } - } - - let adminOptions; - if (admin) { - adminOptions = [ -
    , -
    Admin
    , -
    -   - -
    - ] - } - - let tabColor = gatherer.team !== "lobby" ? `panel-${gatherer.team}` : "panel-info"; - return ( -
    -
    -

    - {country} {gatherer.user.username} - - - - {action} - -

    -
    -
    -
    -
    -
    Skill Level
    -
    {skill}
    -
    Team
    -
    {team}
    -
    Hive Stats
    -
    {hive}
    -
    Links
    -
    - ENSL Profile  - Hive Profile -
    - {adminOptions} -
    -
    -
    -
    - ); - }) if (gather.gatherers.length) { return (