ensl/ensl_gathers
0
0
Fork 0
mirror of https://github.com/ENSL/ensl_gathers.git synced 2024-11-10 07:11:53 +00:00
Code Issues Projects Releases Packages Wiki Activity

Implemented user info dialog

Browse source
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} />
}

140
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>
@ -75,7 +177,10 @@ var AdminPanel = React.createClass({
<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>
<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">
@ -90,7 +195,8 @@ var AdminPanel = React.createClass({
</div>
</div>
<div className="modal-footer">
<button type="button" className="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" className="btn btn-default"
data-dismiss="modal">Close</button>
</div>
</div>
</div>
@ -146,7 +252,10 @@ var ProfileModal = React.createClass({
<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>
<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">
@ -159,16 +268,23 @@ var ProfileModal = React.createClass({
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>
<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>
<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>
<p className="small">
You will need to rejoin the gather to see your updated profile
</p>
<div className="form-group">
<button
type="submit"