ensl
/
ensl_gathers
mirror of https://github.com/ENSL/ensl_gathers.git
0
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Implemented user info dialog

This commit is contained in:
Chris Blanchard 2015-10-18 16:23:39 +01:00
parent c592fd3ec5
commit cf2fae0a42
4 changed files with 194 additions and 74 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
lib/react/gather.jsx
View File

@ -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({
<dd>{hive}</dd>
<dt>Links</dt>
<dd>
<a href={this.enslUrl(gatherer)}
<a href={enslUrl(gatherer)}
className="btn btn-xs btn-primary"
target="_blank">ENSL Profile</a>&nbsp;
<a href={this.hiveUrl(gatherer)}
<a href={hiveUrl(gatherer)}
className="btn btn-xs btn-primary"
target="_blank">Hive Profile</a>
</dd>

16
public/js/helper.js → lib/react/helper.jsx
View File

@ -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}`
};

1
lib/react/message.jsx
View File

@ -35,6 +35,7 @@ var Chatroom = React.createClass({
let messages = this.props.messages.map(message => {
if (message) {
return <ChatMessage message={message}
key={message._id}
id={message._id}
user={this.props.user} />
}

234
lib/react/user.jsx
View File

@ -36,17 +36,119 @@ var UserLogin = React.createClass({
</form>
);
}
});
var UserModal = React.createClass({
render() {
let user = this.props.user;
console.log(user);
let hiveStats;
if (user.hive.id) {
hiveStats = [
<tr><td><strong>Hive Stats</strong></td><td></td></tr>,
<tr>
<td>ELO</td>
<td>{user.hive.skill}</td>
</tr>,
<tr>
<td>Hours Played</td>
<td>{Math.round(user.hive.playTime / 3600)}</td>
</tr>,
<tr>
<td>Wins</td>
<td>{user.hive.wins}</td>
</tr>,
<tr>
<td>Losses</td>
<td>{user.hive.loses}</td>
</tr>,
<tr>
<td>Kills (/min)</td>
<td>{user.hive.kills} ({_.round(user.hive.kills / (user.hive.playTime / 60), 1)})</td>
</tr>,
<tr>
<td>Assists (/min)</td>
<td>{user.hive.assists} ({_.round(user.hive.assists / (user.hive.playTime / 60), 1)})</td>
</tr>,
<tr>
<td>Deaths (/min)</td>
<td>{user.hive.deaths} ({_.round(user.hive.deaths / (user.hive.playTime / 60), 1)})</td>
</tr>
]
}
return (
<div className="modal fade" id={modalId(user)}>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 className="modal-title">
<img src="images/blank.gif"
className={"flag flag-" + user.country.toLowerCase()}
alt={user.country} />&nbsp;
{user.username}
</h4>
</div>
<div className="modal-body">
<div className="text-center">
<img
src={user.avatar}
alt="User Avatar"
className="img-circle" />
</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>&nbsp;
<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">
<button type="button"
className="btn btn-default"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
);
}
})
var UserItem = React.createClass({
render() {
let user = this.props.user;
return (
<li className="list-group-item">
<a href="#" data-toggle="modal"
data-target={`#${modalId(user)}`}>{user.username}</a>
<UserModal user={user} />
</li>
);
}
});
var UserMenu = React.createClass({
render() {
let users = this.props.users.map(user => {
return (
<li key={user.id}
className="list-group-item">
<a href="#">{user.username}</a>
</li>
);
return <UserItem user={user} key={user.id} />
});
return (
<div>
@ -72,14 +174,17 @@ var AdminPanel = React.createClass({
render() {
return (
<div className="modal fade" id="adminmodal">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
<h4 className="modal-title">Administration Panel</h4>
</div>
<div className="modal-body" id="admin-menu">
<h5>Swap Into a Different Account</h5>
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
<h4 className="modal-title">Administration Panel</h4>
</div>
<div className="modal-body" id="admin-menu">
<h5>Swap Into a Different Account</h5>
<UserLogin />
<h5>Gather Options</h5>
<div>
@ -88,12 +193,13 @@ var AdminPanel = React.createClass({
onClick={this.handleGatherReset}>
Reset Gather</button>
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
);
}
@ -143,44 +249,54 @@ var ProfileModal = React.createClass({
return (
<div className="modal fade" id="profilemodal">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</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
defaultValue={skillLevel}
className="form-control"
ref="playerskill">
{skillLevels}
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button type="button" className="close" data-dismiss="modal"
aria-label="Close">
<span aria-hidden="true">&times;</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
defaultValue={skillLevel}
className="form-control"
ref="playerskill">
{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"
data-dismiss="modal"
onClick={this.handleUserUpdate}>
Update &amp; Close</button>
</div>
<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"
data-dismiss="modal"
onClick={this.handleUserUpdate}>
Update &amp; Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
);
}
@ -193,9 +309,9 @@ var CurrentUser = React.createClass({
if (this.props.user.admin) {
adminOptions = (
<li>
<a href="#" data-toggle="modal" data-target="#adminmodal">
<i className="fa fa-magic fa-fw"></i> Administration
</a>
<a href="#" data-toggle="modal" data-target="#adminmodal">
<i className="fa fa-magic fa-fw"></i> Administration
</a>
</li>
)
}