mirror of
https://github.com/ENSL/ensl_gathers.git
synced 2024-11-26 06:10:58 +00:00
Added election countdown
This commit is contained in:
parent
cbc486de77
commit
d6d0e94b01
5 changed files with 142 additions and 55 deletions
|
@ -22,13 +22,21 @@
|
|||
var Map = require("./map");
|
||||
var Server = require("./server");
|
||||
var Gather = require("./gather");
|
||||
var gather = new Gather();
|
||||
var gather;
|
||||
|
||||
// ***** Generate Test Users *****
|
||||
var helper = require("./helper");
|
||||
helper.createTestUsers({ gather: gather });
|
||||
|
||||
module.exports = function (namespace) {
|
||||
gather = Gather({
|
||||
onElectionTimeout: function () {
|
||||
console.log("Election timeout")
|
||||
refreshGather();
|
||||
}
|
||||
});
|
||||
|
||||
// ***** Generate Test Users *****
|
||||
var helper = require("./helper");
|
||||
helper.createTestUsers({ gather: gather });
|
||||
|
||||
var refreshGather = function () {
|
||||
namespace.sockets.forEach(function (socket) {
|
||||
socket.emit("gather:refresh", {
|
||||
|
|
|
@ -19,7 +19,7 @@ function Gather (options) {
|
|||
return new Gather(options);
|
||||
}
|
||||
|
||||
if (typeof options.onElectionTimeout === 'function') {
|
||||
if (options && typeof options.onElectionTimeout === 'function') {
|
||||
this.onElectionTimeout = options.onElectionTimeout;
|
||||
}
|
||||
|
||||
|
@ -138,7 +138,7 @@ Gather.prototype.toJson = function () {
|
|||
gatherers: this.gatherers,
|
||||
state: this.current,
|
||||
election: {
|
||||
startTime: this.electionStartTime,
|
||||
startTime: (this.electionStartTime === null) ? null : this.electionStartTime.toISOString(),
|
||||
interval: this.ELECTION_INTERVAL
|
||||
}
|
||||
}
|
||||
|
@ -238,6 +238,9 @@ StateMachine.create({
|
|||
if (self.can("electionTimeout")) {
|
||||
self.electionTimeout();
|
||||
}
|
||||
if (self.onElectionTimeout) {
|
||||
self.onElectionTimeout.bind(self)();
|
||||
}
|
||||
}, self.ELECTION_INTERVAL);
|
||||
},
|
||||
|
||||
|
|
|
@ -128,6 +128,52 @@ var GatherTeams = React.createClass({
|
|||
}
|
||||
})
|
||||
|
||||
var ElectionProgressBar = React.createClass({
|
||||
componentDidMount: function () {
|
||||
var self = this;
|
||||
this.timer = setInterval(function () {
|
||||
self.forceUpdate();
|
||||
}, 900);
|
||||
},
|
||||
progress: function () {
|
||||
var interval = this.props.gather.election.interval;
|
||||
var startTime = (new Date(this.props.gather.election.startTime)).getTime();
|
||||
var msTranspired = Math.floor((new Date()).getTime() - startTime);
|
||||
|
||||
return {
|
||||
num: msTranspired,
|
||||
den: interval,
|
||||
barMessage: Math.floor((interval - msTranspired) / 100) + "s remaining"
|
||||
}
|
||||
},
|
||||
componentWillUnmount: function () {
|
||||
clearInterval(this.timer);
|
||||
},
|
||||
render: function () {
|
||||
return (<ProgressBar progress={this.progress()} />);
|
||||
}
|
||||
});
|
||||
|
||||
var ProgressBar = React.createClass({
|
||||
render: function () {
|
||||
var style = {
|
||||
width: Math.round((this.props.progress.num / this.props.progress.den * 100)) + "%"
|
||||
};
|
||||
var barMessage = this.props.progress.barMessage || "";
|
||||
return (
|
||||
<div className="progress">
|
||||
<div className="progress-bar progress-bar-striped active"
|
||||
data-role="progressbar"
|
||||
data-aria-valuenow={this.props.progress.num}
|
||||
data-aria-valuemin="0"
|
||||
data-aria-valuemax={this.props.progress.den}
|
||||
style={style}>{barMessage}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var GatherProgress = React.createClass({
|
||||
stateDescription: function () {
|
||||
switch(this.props.gather.state) {
|
||||
|
@ -180,36 +226,27 @@ var GatherProgress = React.createClass({
|
|||
};
|
||||
},
|
||||
render: function () {
|
||||
var progress;
|
||||
var progress, progressBar;
|
||||
var gatherState = this.props.gather.state;
|
||||
if (gatherState === 'gathering' && this.props.gather.gatherers.length) {
|
||||
progress = this.gatheringProgress();
|
||||
progressBar = (<ProgressBar progress={progress} />);
|
||||
} else if (gatherState === 'election') {
|
||||
progress = this.electionProgress();
|
||||
progressBar = (<ElectionProgressBar {...this.props} progress={progress} />);
|
||||
} else if (gatherState === 'selection') {
|
||||
progress = this.selectionProgress();
|
||||
progressBar = (<ProgressBar progress={progress} />);
|
||||
}
|
||||
if (progress) {
|
||||
var style = {
|
||||
width: Math.round((progress.num / progress.den * 100)) + "%"
|
||||
};
|
||||
return (
|
||||
<div className="panel-body no-bottom">
|
||||
<p><strong>{this.stateDescription()}</strong> {progress.message}</p>
|
||||
<div className="progress">
|
||||
<div className="progress-bar progress-bar-striped active"
|
||||
data-role="progressbar"
|
||||
data-aria-valuenow={progress.num}
|
||||
data-aria-valuemin="0"
|
||||
data-aria-valuemax={progress.den}
|
||||
style={style}>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!progress) return false;
|
||||
|
||||
return (
|
||||
<div className="panel-body no-bottom">
|
||||
<p><strong>{this.stateDescription()}</strong> {progress.message}</p>
|
||||
{progressBar}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -414,6 +451,7 @@ var Gather = React.createClass({
|
|||
componentDidMount: function () {
|
||||
var self = this;
|
||||
socket.on("gather:refresh", function (data) {
|
||||
console.log(data);
|
||||
self.setProps(data);
|
||||
});
|
||||
},
|
||||
|
@ -449,8 +487,8 @@ var Gather = React.createClass({
|
|||
<strong>NS2 Gather </strong>
|
||||
<span className="badge add-left">{this.props.gather.gatherers.length}</span>
|
||||
</div>
|
||||
<GatherProgress gather={this.props.gather} />
|
||||
<Gatherers gather={this.props.gather} currentGatherer={this.props.currentGatherer} />
|
||||
<GatherProgress {...this.props} />
|
||||
<Gatherers {...this.props} />
|
||||
{gatherTeams}
|
||||
{voting}
|
||||
<GatherActions {...this.props} />
|
||||
|
|
|
@ -128,6 +128,52 @@ var GatherTeams = React.createClass({displayName: "GatherTeams",
|
|||
}
|
||||
})
|
||||
|
||||
var ElectionProgressBar = React.createClass({displayName: "ElectionProgressBar",
|
||||
componentDidMount: function () {
|
||||
var self = this;
|
||||
this.timer = setInterval(function () {
|
||||
self.forceUpdate();
|
||||
}, 900);
|
||||
},
|
||||
progress: function () {
|
||||
var interval = this.props.gather.election.interval;
|
||||
var startTime = (new Date(this.props.gather.election.startTime)).getTime();
|
||||
var msTranspired = Math.floor((new Date()).getTime() - startTime);
|
||||
|
||||
return {
|
||||
num: msTranspired,
|
||||
den: interval,
|
||||
barMessage: Math.floor((interval - msTranspired) / 100) + "s remaining"
|
||||
}
|
||||
},
|
||||
componentWillUnmount: function () {
|
||||
clearInterval(this.timer);
|
||||
},
|
||||
render: function () {
|
||||
return (React.createElement(ProgressBar, {progress: this.progress()}));
|
||||
}
|
||||
});
|
||||
|
||||
var ProgressBar = React.createClass({displayName: "ProgressBar",
|
||||
render: function () {
|
||||
var style = {
|
||||
width: Math.round((this.props.progress.num / this.props.progress.den * 100)) + "%"
|
||||
};
|
||||
var barMessage = this.props.progress.barMessage || "";
|
||||
return (
|
||||
React.createElement("div", {className: "progress"},
|
||||
React.createElement("div", {className: "progress-bar progress-bar-striped active",
|
||||
"data-role": "progressbar",
|
||||
"data-aria-valuenow": this.props.progress.num,
|
||||
"data-aria-valuemin": "0",
|
||||
"data-aria-valuemax": this.props.progress.den,
|
||||
style: style}, barMessage
|
||||
)
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
var GatherProgress = React.createClass({displayName: "GatherProgress",
|
||||
stateDescription: function () {
|
||||
switch(this.props.gather.state) {
|
||||
|
@ -180,36 +226,27 @@ var GatherProgress = React.createClass({displayName: "GatherProgress",
|
|||
};
|
||||
},
|
||||
render: function () {
|
||||
var progress;
|
||||
var progress, progressBar;
|
||||
var gatherState = this.props.gather.state;
|
||||
if (gatherState === 'gathering' && this.props.gather.gatherers.length) {
|
||||
progress = this.gatheringProgress();
|
||||
progressBar = (React.createElement(ProgressBar, {progress: progress}));
|
||||
} else if (gatherState === 'election') {
|
||||
progress = this.electionProgress();
|
||||
progressBar = (React.createElement(ElectionProgressBar, React.__spread({}, this.props, {progress: progress})));
|
||||
} else if (gatherState === 'selection') {
|
||||
progress = this.selectionProgress();
|
||||
progressBar = (React.createElement(ProgressBar, {progress: progress}));
|
||||
}
|
||||
if (progress) {
|
||||
var style = {
|
||||
width: Math.round((progress.num / progress.den * 100)) + "%"
|
||||
};
|
||||
return (
|
||||
React.createElement("div", {className: "panel-body no-bottom"},
|
||||
React.createElement("p", null, React.createElement("strong", null, this.stateDescription()), " ", progress.message),
|
||||
React.createElement("div", {className: "progress"},
|
||||
React.createElement("div", {className: "progress-bar progress-bar-striped active",
|
||||
"data-role": "progressbar",
|
||||
"data-aria-valuenow": progress.num,
|
||||
"data-aria-valuemin": "0",
|
||||
"data-aria-valuemax": progress.den,
|
||||
style: style}
|
||||
)
|
||||
)
|
||||
)
|
||||
);
|
||||
} else {
|
||||
return false;
|
||||
}
|
||||
|
||||
if (!progress) return false;
|
||||
|
||||
return (
|
||||
React.createElement("div", {className: "panel-body no-bottom"},
|
||||
React.createElement("p", null, React.createElement("strong", null, this.stateDescription()), " ", progress.message),
|
||||
progressBar
|
||||
)
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
|
@ -414,6 +451,7 @@ var Gather = React.createClass({displayName: "Gather",
|
|||
componentDidMount: function () {
|
||||
var self = this;
|
||||
socket.on("gather:refresh", function (data) {
|
||||
console.log(data);
|
||||
self.setProps(data);
|
||||
});
|
||||
},
|
||||
|
@ -449,8 +487,8 @@ var Gather = React.createClass({displayName: "Gather",
|
|||
React.createElement("strong", null, "NS2 Gather "),
|
||||
React.createElement("span", {className: "badge add-left"}, this.props.gather.gatherers.length)
|
||||
),
|
||||
React.createElement(GatherProgress, {gather: this.props.gather}),
|
||||
React.createElement(Gatherers, {gather: this.props.gather, currentGatherer: this.props.currentGatherer}),
|
||||
React.createElement(GatherProgress, React.__spread({}, this.props)),
|
||||
React.createElement(Gatherers, React.__spread({}, this.props)),
|
||||
gatherTeams,
|
||||
voting,
|
||||
React.createElement(GatherActions, React.__spread({}, this.props))
|
||||
|
|
|
@ -52,7 +52,7 @@ describe("Gather Model:", function () {
|
|||
done();
|
||||
}
|
||||
});
|
||||
gather.ELECTION_INTERVAL = 100; // 1 second
|
||||
gather.ELECTION_INTERVAL = 10; // 10ms
|
||||
assert.isNull(gather.electionStartTime);
|
||||
gatherers.forEach(function (gatherer) {
|
||||
gather.addGatherer(gatherer);
|
||||
|
|
Loading…
Reference in a new issue