ensl/ensl_gathers
0
0
Fork 0
mirror of https://github.com/ENSL/ensl_gathers.git synced 2025-02-21 19:21:13 +00:00
Code Issues Projects Releases Packages Wiki Activity

Restyle gathers

Browse source
This commit is contained in:
Chris Blanchard 2015-09-05 18:22:23 +01:00
parent bd34f385f6
commit 54f3ca0ed7
2 changed files with 131 additions and 147 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

230
lib/react/gather.jsx
View file

@ -69,23 +69,21 @@ var GathererList = React.createClass({
var GatherTeams = React.createClass({ var GatherTeams = React.createClass({
render() { render() {
return ( return (
<div className="panel-body"> <div className="row add-top">
<div className="row"> <div className="col-md-6">
<div className="col-md-6"> <div className="panel panel-default">
<div className="panel panel-default"> <div className="panel-heading">
<div className="panel-heading"> Aliens
Aliens
</div>
<GathererList gather={this.props.gather} team="alien" />
</div> </div>
<GathererList gather={this.props.gather} team="alien" />
</div> </div>
<div className="col-md-6"> </div>
<div className="panel panel-default"> <div className="col-md-6">
<div className="panel-heading"> <div className="panel panel-default">
Marines <div className="panel-heading">
</div> Marines
<GathererList gather={this.props.gather} team="marine" />
</div> </div>
<GathererList gather={this.props.gather} team="marine" />
</div> </div>
</div> </div>
</div> </div>
@ -130,14 +128,14 @@ var ProgressBar = React.createClass({
var barMessage = this.props.progress.barMessage || ""; var barMessage = this.props.progress.barMessage || "";
return ( return (
<div className="progress"> <div className="progress">
<div className="progress-bar progress-bar-striped active" <div className="progress-bar progress-bar-striped active"
data-role="progressbar" data-role="progressbar"
data-aria-valuenow={this.props.progress.num} data-aria-valuenow={this.props.progress.num}
data-aria-valuemin="0" data-aria-valuemin="0"
data-aria-valuemax={this.props.progress.den} data-aria-valuemax={this.props.progress.den}
style={style}>{barMessage} style={style}>{barMessage}
</div> </div>
</div> </div>
); );
} }
}); });
@ -214,7 +212,7 @@ var GatherProgress = React.createClass({
if (!progress) return false; if (!progress) return false;
return ( return (
<div className="panel-body no-bottom"> <div className="no-bottom">
<p><strong>{this.stateDescription()}</strong> {progress.message}</p> <p><strong>{this.stateDescription()}</strong> {progress.message}</p>
{progressBar} {progressBar}
</div> </div>
@ -251,37 +249,37 @@ var TeamSpeakButton = React.createClass({
render() { render() {
return ( return (
<div className="btn-group dropup"> <div className="btn-group dropup">
<button type="button" className="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> <button type="button" className="btn btn-primary dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Teamspeak <span className="caret"></span> Teamspeak <span className="caret"></span>
</button> </button>
<ul className="dropdown-menu"> <ul className="dropdown-menu">
<li><a href={this.props.url}>Join Teamspeak Lobby</a></li> <li><a href={this.props.url}>Join Teamspeak Lobby</a></li>
<li><a href={this.marineUrl()}>Join Marine Teamspeak</a></li> <li><a href={this.marineUrl()}>Join Marine Teamspeak</a></li>
<li><a href={this.alienUrl()}>Join Alien Teamspeak</a></li> <li><a href={this.alienUrl()}>Join Alien Teamspeak</a></li>
<li role="separator" className="divider"></li> <li role="separator" className="divider"></li>
<li><a href="#" data-toggle="modal" data-target="#teamspeakmodal">Teamspeak Details</a></li> <li><a href="#" data-toggle="modal" data-target="#teamspeakmodal">Teamspeak Details</a></li>
</ul> </ul>
<div className="modal fade text-left" id="teamspeakmodal"> <div className="modal fade text-left" id="teamspeakmodal">
<div className="modal-dialog"> <div className="modal-dialog">
<div className="modal-content"> <div className="modal-content">
<div className="modal-header"> <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">Teamspeak Server Information</h4> <h4 className="modal-title">Teamspeak Server Information</h4>
</div> </div>
<div className="modal-body"> <div className="modal-body">
<dl className="dl-horizontal"> <dl className="dl-horizontal">
<dt>Server</dt> <dt>Server</dt>
<dd>{this.props.url}</dd> <dd>{this.props.url}</dd>
<dt>Password</dt> <dt>Password</dt>
<dd>{this.props.password}</dd> <dd>{this.props.password}</dd>
<dt>Marine Channel</dt> <dt>Marine Channel</dt>
<dd>{this.props.marine.channel}</dd> <dd>{this.props.marine.channel}</dd>
<dt>Alien Channel</dt> <dt>Alien Channel</dt>
<dd>{this.props.alien.channel}</dd> <dd>{this.props.alien.channel}</dd>
</dl> </dl>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
); );
@ -361,7 +359,7 @@ var GatherActions = React.createClass({
} }
return ( return (
<div className="panel-footer text-right"> <div className="gather-actions text-right">
<ul className="list-inline no-bottom"> <ul className="list-inline no-bottom">
<TeamSpeakButton /> <TeamSpeakButton />
{confirmTeam} {confirmTeam}
@ -573,14 +571,12 @@ var Gather = React.createClass({
var voting; var voting;
if (this.props.currentGatherer) { if (this.props.currentGatherer) {
voting = ( voting = (
<div className="panel-body"> <div className="row add-top">
<div className="row"> <div className="col-md-6">
<div className="col-md-6"> <MapVoting {...this.props} />
<MapVoting {...this.props} /> </div>
</div> <div className="col-md-6">
<div className="col-md-6"> <ServerVoting {...this.props} />
<ServerVoting {...this.props} />
</div>
</div> </div>
</div> </div>
); );
@ -597,19 +593,14 @@ var Gather = React.createClass({
} }
return ( return (
<div> <div>
<div className="panel panel-default"> <h2 className="headline">Current Gather</h2>
<div className="panel-heading">
<strong>Current Gather</strong>
<span className="badge add-left">{this.props.gather.gatherers.length}</span>
</div>
<GatherProgress {...this.props} /> <GatherProgress {...this.props} />
<Gatherers {...this.props} /> <Gatherers {...this.props} />
{gatherTeams} {gatherTeams}
{voting} {voting}
<GatherActions {...this.props} /> <GatherActions {...this.props} />
</div> {previousGather}
{previousGather} </div>
</div>
); );
} }
}); });
@ -623,45 +614,33 @@ var Gatherers = React.createClass({
render() { render() {
var self = this; var self = this;
var gatherers = this.props.gather.gatherers.map(gatherer => { var gatherers = this.props.gather.gatherers.map(gatherer => {
// Country
var country;
if (gatherer.user.country) { if (gatherer.user.country) {
country = (<img src="images/blank.gif" var country = (<img src="images/blank.gif"
className={"flag flag-" + gatherer.user.country.toLowerCase()} className={"flag flag-" + gatherer.user.country.toLowerCase()}
alt={gatherer.user.country} />); alt={gatherer.user.country} />);
}; };
if (gatherer.user.profile.skill) { var skill = gatherer.user.profile.skill || "Not Available";
var skill = (<span className="label label-default">{gatherer.user.profile.skill}</span>);
}
var abilities = []; var abilities = [];
for (let attr in gatherer.user.profile.abilities) { for (let attr in gatherer.user.profile.abilities) {
if (gatherer.user.profile.abilities[attr]) abilities.push(_.capitalize(attr)); if (gatherer.user.profile.abilities[attr]) abilities.push(_.capitalize(attr));
} }
if (gatherer.user.hive.skill) abilities.push("ELO: " + gatherer.user.hive.skill); var lifeform = (abilities.length) ? abilities.join(", ") : "None Specified";
var hiveStats = [];
if (gatherer.user.hive.skill) hiveStats.push("ELO: " + gatherer.user.hive.skill);
if (gatherer.user.hive.playTime) { if (gatherer.user.hive.playTime) {
abilities.push(Math.floor(gatherer.user.hive.playTime / 3600) + " Hours"); hiveStats.push(Math.floor(gatherer.user.hive.playTime / 3600) + " Hours");
} }
var lifeform = ( var hive = (hiveStats.length) ? hiveStats.join(", ") : "Not Available";
abilities.map(lifeform => {
return (<span className="label label-default add-right" var team = (gatherer.user.team) ? gatherer.user.team.name : "None";
key={[lifeform, gatherer.id].join("-")}>{lifeform}</span>);
})
);
var team;
if (gatherer.user.team) {
team = (<span className="label label-default">{gatherer.user.team.name}</span>);
}
var action; var action;
if (self.props.gather.state === "election") { if (self.props.gather.state === "election") {
var votes = self.props.gather.gatherers.reduce((acc, voter) => { var votes = self.props.gather.gatherers.reduce((acc, voter) => {
if (voter.leaderVote === gatherer.id) acc++; if (voter.leaderVote === gatherer.id) acc++;
@ -690,25 +669,42 @@ var Gatherers = React.createClass({
} }
return ( return (
<tr key={gatherer.user.id} data-userid={gatherer.user.id}> <div className="panel panel-success" key={gatherer.user.id} data-userid={gatherer.user.id}>
<td className="col-md-9"> <div className="panel-heading">
<p className="gatherer">{country} {gatherer.user.username}</p> <h4 className="panel-title">
<p className="gatherer-ability">{lifeform} {skill} {team}</p> <a data-toggle="collapse"
</td> href={"#"+gatherer.user.id.toString() + "-collapse"}
<td className="col-md-3 text-right">{action}&nbsp;</td> aria-expanded="false"
</tr> aria-controls={gatherer.user.id.toString() + "-collapse"}>
{country} {gatherer.user.username} <span className="caret"></span>
</a>
<span className="pull-right">
{action}
</span>
</h4>
</div>
<div id={gatherer.user.id.toString() + "-collapse"}
className="panel-collapse collapse out" >
<div className="panel-body">
<dl className="dl-horizontal">
<dt>Lifeforms</dt>
<dd>{lifeform}</dd>
<dt>Skill Level</dt>
<dd>{skill}</dd>
<dt>Team</dt>
<dd>{team}</dd>
<dt>Hive Stats</dt>
<dd>{hive}</dd>
</dl>
</div>
</div>
</div>
); );
}) })
if (this.props.gather.gatherers.length) { if (this.props.gather.gatherers.length) {
return ( return (
<div className="panel-body"> <div class="panel-group" role="tablist" aria-multiselectable="true" id="gatherers-panel">
<div className="panel panel-default"> {gatherers}
<table className="table roster-table">
<tbody>
{gatherers}
</tbody>
</table>
</div>
</div> </div>
); );
} else { } else {
@ -750,16 +746,16 @@ var CompletedGather = React.createClass({
<GatherTeams gather={this.props.gather} /> <GatherTeams gather={this.props.gather} />
<div className="panel-body"> <div className="panel-body">
<dl className="dl-horizontal"> <dl className="dl-horizontal">
<dt>Maps</dt> <dt>Maps</dt>
<dd>{maps.map(map => map.name).join(" & ")}</dd> <dd>{maps.map(map => map.name).join(" & ")}</dd>
<dt>Server</dt> <dt>Server</dt>
<dd>{server.name}</dd> <dd>{server.name}</dd>
<dt>Address</dt> <dt>Address</dt>
<dd>{server.ip}:{server.port}</dd> <dd>{server.ip}:{server.port}</dd>
<dt>Password</dt> <dt>Password</dt>
<dd>{server.password}</dd> <dd>{server.password}</dd>
<br /> <br />
<dt>&nbsp;</dt> <dt>&nbsp;</dt>
<dd><a href={["steam://run/4920/connect", server.ip +":"+server.port, server.password].join("/")} <dd><a href={["steam://run/4920/connect", server.ip +":"+server.port, server.password].join("/")}
className="btn btn-primary">Click to Join</a></dd> className="btn btn-primary">Click to Join</a></dd>
</dl> </dl>

48
public/css/app.css
View file

@ -2,8 +2,20 @@ html, body {
height: 100%; height: 100%;
} }
.gather-actions {
padding: 10px 0px;
border-top: 1px solid #CFCFCF;
margin-top: 1em;
}
.headline {
padding-bottom: 0.5em;
border-bottom: 1px solid #CFCFCF;
margin-bottom: 20px;
}
#gathers { #gathers {
margin-top: 20px; margin-top: 2em;
} }
.gatherer { .gatherer {
@ -11,13 +23,6 @@ html, body {
padding: 0px; padding: 0px;
} }
.gatherer-ability {
font-size: 12px;
line-height: 25px;
padding: 0px;
margin: 0px;
}
#chatroom { #chatroom {
margin-top: 20px; margin-top: 20px;
} }
@ -43,27 +48,6 @@ html, body {
margin: 10px 10px; margin: 10px 10px;
} }
.dot {
width: 5px;
height: 5px;
border-radius: 50%;
vertical-align: middle;
position:relative;
display: inline-block;
}
.online {
background: #0C0;
}
.afk {
background: #FF9900;
}
.offline {
background: #CCC;
}
.no-bottom { .no-bottom {
margin-bottom: 0px !important; margin-bottom: 0px !important;
padding-bottom: 0px !important; padding-bottom: 0px !important;
@ -103,4 +87,8 @@ html, body {
.add-right { .add-right {
margin-right: 2px; margin-right: 2px;
} }
#gatherers-panel > .panel {
margin-bottom: 1px;
}