mirror of
https://github.com/ENSL/ensl_gathers.git
synced 2024-11-29 23:52:50 +00:00
393 lines
9.8 KiB
JavaScript
393 lines
9.8 KiB
JavaScript
import {LifeformIcons} from "javascripts/components/gather";
|
|
const React = require("react");
|
|
const helper = require("javascripts/helper");
|
|
const enslUrl = helper.enslUrl;
|
|
const hiveUrl = helper.hiveUrl;
|
|
const modalId = helper.modalId;
|
|
const Ps = require('perfect-scrollbar');
|
|
|
|
const DisconnectUserButton = React.createClass({
|
|
propTypes: {
|
|
socket: React.PropTypes.object.isRequired,
|
|
id: React.PropTypes.number.isRequired
|
|
},
|
|
|
|
getDefaultProps() {
|
|
return {
|
|
id: null
|
|
};
|
|
},
|
|
|
|
disconnectUser() {
|
|
this.props.socket.emit("users:disconnect", {
|
|
id: this.props.id
|
|
});
|
|
},
|
|
|
|
render() {
|
|
return <button
|
|
className="btn btn-danger"
|
|
onClick={this.disconnectUser}>
|
|
Disconnect User</button>
|
|
}
|
|
});
|
|
|
|
const UserModal = React.createClass({
|
|
propTypes: {
|
|
user: React.PropTypes.object.isRequired,
|
|
socket: React.PropTypes.object.isRequired,
|
|
currentUser: React.PropTypes.object.isRequired,
|
|
close: React.PropTypes.func.isRequired
|
|
},
|
|
|
|
render() {
|
|
const currentUser = this.props.currentUser;
|
|
const user = this.props.user;
|
|
let hiveStats;
|
|
if (user.hive.id) {
|
|
hiveStats = [
|
|
<tr key="stats"><td><strong>Hive Stats</strong></td><td></td></tr>,
|
|
<tr key="elo">
|
|
<td>ELO</td>
|
|
<td>{user.hive.skill}</td>
|
|
</tr>,
|
|
<tr key="hours">
|
|
<td>Hours Played</td>
|
|
<td>{Math.round(user.hive.playTime / 3600)}</td>
|
|
</tr>,
|
|
<tr key="wins">
|
|
<td>Wins</td>
|
|
<td>{user.hive.wins}</td>
|
|
</tr>,
|
|
<tr key="losses">
|
|
<td>Losses</td>
|
|
<td>{user.hive.loses}</td>
|
|
</tr>,
|
|
<tr key="kills">
|
|
<td>Kills (/min)</td>
|
|
<td>{user.hive.kills} ({_.round(user.hive.kills / (user.hive.playTime / 60), 1)})</td>
|
|
</tr>,
|
|
<tr key="assists">
|
|
<td>Assists (/min)</td>
|
|
<td>{user.hive.assists} ({_.round(user.hive.assists / (user.hive.playTime / 60), 1)})</td>
|
|
</tr>,
|
|
<tr key="deaths">
|
|
<td>Deaths (/min)</td>
|
|
<td>{user.hive.deaths} ({_.round(user.hive.deaths / (user.hive.playTime / 60), 1)})</td>
|
|
</tr>
|
|
]
|
|
}
|
|
let adminOptions;
|
|
if (currentUser.admin) {
|
|
adminOptions = <DisconnectUserButton id={user.id} socket={this.props.socket} />;
|
|
}
|
|
|
|
return (
|
|
<div className="modal-dialog">
|
|
<div className="modal-content">
|
|
<div className="modal-header">
|
|
<button type="button" className="close" onClick={this.props.close}
|
|
aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<h4 className="modal-title">
|
|
<img src="blank.gif"
|
|
className={"flag flag-" + ((user.country === null) ? "eu" :
|
|
user.country.toLowerCase()) }
|
|
alt={user.country} />
|
|
{user.username}
|
|
</h4>
|
|
</div>
|
|
<div className="modal-body">
|
|
<div className="text-center">
|
|
<img
|
|
src={user.avatar}
|
|
alt="User Avatar" />
|
|
</div>
|
|
<table className="table">
|
|
<tbody>
|
|
<tr>
|
|
<td>Lifeforms</td>
|
|
<td><LifeformIcons gatherer={{user: user}} /></td>
|
|
</tr>
|
|
<tr>
|
|
<td>Links</td>
|
|
<td>
|
|
<a href={enslUrl(user)}
|
|
className="btn btn-xs btn-primary"
|
|
target="_blank">ENSL Profile</a>
|
|
<a href={hiveUrl({user: user})}
|
|
className="btn btn-xs btn-primary"
|
|
target="_blank">Hive Profile</a>
|
|
</td>
|
|
</tr>
|
|
{hiveStats}
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
<div className="modal-footer">
|
|
{adminOptions}
|
|
<button type="button"
|
|
className="btn btn-default"
|
|
onClick={this.props.close}
|
|
>Close</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
})
|
|
|
|
const UserItem = React.createClass({
|
|
propTypes: {
|
|
user: React.PropTypes.object.isRequired,
|
|
socket: React.PropTypes.object.isRequired,
|
|
currentUser: React.PropTypes.object.isRequired,
|
|
mountModal: React.PropTypes.func.isRequired
|
|
},
|
|
|
|
openModal(e) {
|
|
e.preventDefault();
|
|
this.props.mountModal({
|
|
component: UserModal,
|
|
props: {
|
|
user: this.props.user,
|
|
currentUser: this.props.currentUser,
|
|
socket: this.props.socket
|
|
}
|
|
});
|
|
},
|
|
|
|
render() {
|
|
const user = this.props.user;
|
|
const currentUser = this.props.currentUser;
|
|
return (
|
|
<li className="users-list-group-item">
|
|
<a href="#" onClick={this.openModal}>{user.username}</a>
|
|
</li>
|
|
);
|
|
}
|
|
});
|
|
|
|
const UserMenu = exports.UserMenu = React.createClass({
|
|
propTypes: {
|
|
socket: React.PropTypes.object.isRequired,
|
|
users: React.PropTypes.array.isRequired,
|
|
mountModal: React.PropTypes.func.isRequired
|
|
},
|
|
|
|
componentDidMount() {
|
|
|
|
},
|
|
|
|
render() {
|
|
const users = this.props.users
|
|
.sort((a, b) => (a.username.toLowerCase() > b.username.toLowerCase()) ? 1 : -1)
|
|
.map(user => {
|
|
return <UserItem user={user} key={user.id}
|
|
currentUser={this.props.user} socket={this.props.socket}
|
|
mountModal={this.props.mountModal} />
|
|
});
|
|
return (
|
|
<div>
|
|
<ul className="users-list-group" id="user-list">
|
|
{users}
|
|
</ul>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
const ProfileModal = exports.ProfileModal = React.createClass({
|
|
propTypes: {
|
|
user: React.PropTypes.object.isRequired,
|
|
socket: React.PropTypes.object.isRequired,
|
|
close: React.PropTypes.func.isRequired
|
|
},
|
|
|
|
getInitialState() {
|
|
const user = this.props.user;
|
|
console.log(user.profile);
|
|
return {
|
|
abilities: {
|
|
skulk: user.profile.abilities.skulk,
|
|
lerk: user.profile.abilities.lerk,
|
|
gorge: user.profile.abilities.gorge,
|
|
fade: user.profile.abilities.fade,
|
|
onos: user.profile.abilities.onos,
|
|
commander: user.profile.abilities.commander
|
|
},
|
|
skill: user.profile.skill
|
|
};
|
|
},
|
|
|
|
handleUserUpdate(e) {
|
|
e.preventDefault();
|
|
this.props.socket.emit("users:update:profile", {
|
|
id: this.props.user.id,
|
|
profile: {
|
|
abilities: this.state.abilities,
|
|
skill: this.state.skill
|
|
}
|
|
});
|
|
this.props.close();
|
|
},
|
|
|
|
handleAbilityChange(e) {
|
|
let abilities = this.state.abilities;
|
|
abilities[e.target.name] = e.target.checked;
|
|
this.setState({abilities: abilities});
|
|
},
|
|
|
|
handleSkillChange(e) {
|
|
this.setState({ skill: e.target.value });
|
|
},
|
|
|
|
render() {
|
|
const user = this.props.user;
|
|
if (!user) return false;
|
|
|
|
const abilities = this.state.abilities;
|
|
|
|
let abilitiesForm = [];
|
|
for (let lifeform in abilities) {
|
|
abilitiesForm.push(
|
|
<div key={lifeform} className="checkbox">
|
|
<label className="checkbox-inline">
|
|
<input type="checkbox" name={lifeform}
|
|
checked={abilities[lifeform]} onChange={this.handleAbilityChange} />
|
|
{_.capitalize(lifeform)}
|
|
</label>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
let skillLevel = user.profile.skill;
|
|
let skillLevels = _.uniq(["Low Skill", "Medium Skill", "High Skill", skillLevel])
|
|
.filter(skill => { return typeof skill === 'string' })
|
|
.map(skill => { return <option key={skill} value={skill}>{skill}</option>});
|
|
|
|
return (
|
|
<div className="modal-dialog">
|
|
<div className="modal-content">
|
|
<div className="modal-header">
|
|
<button type="button" className="close" aria-label="Close"
|
|
onClick={this.props.close}>
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
<h4 className="modal-title">Profile</h4>
|
|
</div>
|
|
<div className="modal-body" id="profile-panel">
|
|
<form>
|
|
<div className="form-group">
|
|
<label>Player Skill</label><br />
|
|
<select
|
|
value={skillLevel}
|
|
className="form-control"
|
|
onChange={this.handleSkillChange}>
|
|
{skillLevels}
|
|
</select>
|
|
<p className="add-top"><small>
|
|
Try to give an accurate representation of your skill to raise
|
|
the quality of your gathers
|
|
</small></p>
|
|
</div>
|
|
<hr />
|
|
<div className="form-group">
|
|
<label>Preferred Lifeforms</label><br />
|
|
{abilitiesForm}
|
|
<p><small>
|
|
Specify which lifeforms you'd like to play in the gather
|
|
</small></p>
|
|
</div>
|
|
<hr />
|
|
<p className="small">
|
|
You will need to rejoin the gather to see your updated profile
|
|
</p>
|
|
<div className="form-group">
|
|
<button
|
|
type="submit"
|
|
className="btn btn-primary"
|
|
onClick={this.handleUserUpdate}>
|
|
Update & Close</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
});
|
|
|
|
const CurrentUser = exports.CurrentUser = React.createClass({
|
|
render() {
|
|
if (this.props.user) {
|
|
let adminOptions;
|
|
if (this.props.user.admin || this.props.user.moderator) {
|
|
adminOptions = (
|
|
<li>
|
|
<a href="#" data-toggle="modal" data-target="#adminmodal">
|
|
<i className="fa fa-magic fa-fw"></i> Administration
|
|
</a>
|
|
</li>
|
|
)
|
|
}
|
|
return (
|
|
<li className="dropdown">
|
|
<a className="dropdown-toggle" data-toggle="dropdown" href="#">
|
|
{this.props.user.username} <img src={this.props.user.avatar}
|
|
alt="User Avatar"
|
|
height="20"
|
|
width="20" /> <i className="fa fa-caret-down"></i>
|
|
</a>
|
|
<ul className="dropdown-menu dropdown-user">
|
|
<li>
|
|
<a data-toggle="modal"
|
|
data-target="#profilemodal"
|
|
href="#"><i className="fa fa-user fa-fw"></i> Profile</a>
|
|
</li>
|
|
<li>
|
|
<a data-toggle="modal"
|
|
data-target="#settingsmodal"
|
|
href="#"><i className="fa fa-gear fa-fw"></i> Settings</a>
|
|
</li>
|
|
{adminOptions}
|
|
</ul>
|
|
</li>
|
|
);
|
|
} else {
|
|
return false;
|
|
}
|
|
}
|
|
});
|
|
|
|
var AssumeUserIdButton = exports.AssumeUserIdButton = React.createClass({
|
|
propTypes: {
|
|
socket: React.PropTypes.object.isRequired,
|
|
gatherer: React.PropTypes.object.isRequired,
|
|
currentUser: React.PropTypes.object.isRequired,
|
|
},
|
|
|
|
assumeId(e) {
|
|
e.preventDefault();
|
|
if (this.props.gatherer) {
|
|
this.props.socket.emit("users:authorize", {
|
|
id: this.props.gatherer.id
|
|
});
|
|
// Refresh Gather list
|
|
setTimeout(() => {
|
|
this.props.socket.emit("gather:refresh");
|
|
}, 5000);
|
|
}
|
|
},
|
|
|
|
render() {
|
|
let currentUser = this.props.currentUser;
|
|
let gatherer = this.props.gatherer;
|
|
if (currentUser && gatherer) {
|
|
return <button
|
|
className="btn btn-xs btn-danger"
|
|
onClick={this.assumeId}>Assume User ID</button>
|
|
}
|
|
}
|
|
});
|