mirror of
https://github.com/ENSL/ensl_gathers.git
synced 2024-11-23 21:02:15 +00:00
282 lines
30 KiB
JavaScript
282 lines
30 KiB
JavaScript
|
"use strict";
|
|||
|
|
|
|||
|
|
var VoteButton = React.createClass({displayName: "VoteButton",
|
|||
|
|
cancelVote: function (e) {
|
|||
|
|
socket.emit("gather:vote", {
|
|||
|
|
leader: {
|
|||
|
|
candidate: null
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
vote: function (e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
socket.emit("gather:vote", {
|
|||
|
|
leader: {
|
|||
|
|
candidate: parseInt(e.target.value, 10)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
render: function () {
|
|||
|
|
if (this.props.currentGatherer === null) {
|
|||
|
|
return false;
|
|||
|
|
}
|
|||
|
|
if (this.props.currentGatherer.leaderVote === this.props.candidate.id) {
|
|||
|
|
return (
|
|||
|
|
React.createElement("button", {
|
|||
|
|
onClick: this.cancelVote,
|
|||
|
|
className: "btn btn-xs btn-success"}, "Voted"
|
|||
|
|
)
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
return (
|
|||
|
|
React.createElement("button", {
|
|||
|
|
onClick: this.vote,
|
|||
|
|
className: "btn btn-xs btn-default",
|
|||
|
|
value: this.props.candidate.id}, "Vote"
|
|||
|
|
)
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var JoinGatherButton = React.createClass({displayName: "JoinGatherButton",
|
|||
|
|
joinGather: function (e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
socket.emit("gather:join", {});
|
|||
|
|
},
|
|||
|
|
render: function () {
|
|||
|
|
var message = this.props.buttonName || "Join Gather";
|
|||
|
|
var buttonClass = "btn btn-primary";
|
|||
|
|
if (this.props.buttonClass) {
|
|||
|
|
buttonClass += " " + this.props.buttonClass;
|
|||
|
|
}
|
|||
|
|
return (React.createElement("button", {
|
|||
|
|
onClick: this.joinGather,
|
|||
|
|
className: buttonClass}, message))
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var GatherProgress = React.createClass({displayName: "GatherProgress",
|
|||
|
|
stateDescription: function () {
|
|||
|
|
switch(this.props.gather.state) {
|
|||
|
|
case "gathering":
|
|||
|
|
return "Waiting for more gatherers.";
|
|||
|
|
case "election":
|
|||
|
|
return "Currently voting for team leaders.";
|
|||
|
|
case "selection":
|
|||
|
|
return "Waiting for leaders to picking teams.";
|
|||
|
|
case "done":
|
|||
|
|
return "Gather completed.";
|
|||
|
|
default:
|
|||
|
|
return "Initialising gather.";
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
gatheringProgress: function () {
|
|||
|
|
var num = this.props.gather.gatherers.length;
|
|||
|
|
var den = 12;
|
|||
|
|
var remaining = den - num;
|
|||
|
|
var message = (remaining === 1) ? "Waiting for last player" : "Waiting for " + remaining + " more players";
|
|||
|
|
return {
|
|||
|
|
num: num,
|
|||
|
|
den: den,
|
|||
|
|
message: message
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
electionProgress: function () {
|
|||
|
|
var num = this.props.gather.gatherers.reduce(function (acc, gatherer) {
|
|||
|
|
if (gatherer.leaderVote) acc++;
|
|||
|
|
return acc;
|
|||
|
|
}, 0);
|
|||
|
|
var den = 12;
|
|||
|
|
return {
|
|||
|
|
num: num,
|
|||
|
|
den: den,
|
|||
|
|
message: den - num + " more votes required"
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
selectionProgress: function () {
|
|||
|
|
var num = this.props.gather.gatherers.reduce(function (acc, gatherer) {
|
|||
|
|
if (gatherer.team !== "lobby") acc++;
|
|||
|
|
return acc;
|
|||
|
|
}, 0);
|
|||
|
|
var den = 12;
|
|||
|
|
|
|||
|
|
return {
|
|||
|
|
num: num,
|
|||
|
|
den: den,
|
|||
|
|
message: num + " out of " + den + " players assigned"
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
render: function () {
|
|||
|
|
var progress;
|
|||
|
|
var gatherState = this.props.gather.state;
|
|||
|
|
if (gatherState === 'gathering' && this.props.gather.gatherers.length) {
|
|||
|
|
progress = this.gatheringProgress();
|
|||
|
|
} else if (gatherState === 'election') {
|
|||
|
|
progress = this.electionProgress();
|
|||
|
|
} else if (gatherState === 'selection') {
|
|||
|
|
progress = this.selectionProgress();
|
|||
|
|
}
|
|||
|
|
if (progress) {
|
|||
|
|
var style = {
|
|||
|
|
width: Math.round((progress.num / progress.den * 100)) + "%"
|
|||
|
|
};
|
|||
|
|
return (
|
|||
|
|
React.createElement("div", {className: "panel-body"},
|
|||
|
|
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;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var Gather = React.createClass({displayName: "Gather",
|
|||
|
|
getDefaultProps: function () {
|
|||
|
|
return {
|
|||
|
|
gather: {
|
|||
|
|
gatherers: []
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
joinedGather: function () {
|
|||
|
|
var self = this;
|
|||
|
|
return this.props.gather.gatherers.some(function (gatherer) {
|
|||
|
|
return gatherer.user.id === self.props.currentUser.id;
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
componentDidMount: function () {
|
|||
|
|
var self = this;
|
|||
|
|
socket.on("gather:refresh", function (data) {
|
|||
|
|
self.setProps({
|
|||
|
|
gather: data.gather,
|
|||
|
|
currentUser: data.currentUser
|
|||
|
|
});
|
|||
|
|
});
|
|||
|
|
},
|
|||
|
|
leaveGather: function (e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
socket.emit("gather:leave", {});
|
|||
|
|
},
|
|||
|
|
inviteToGather: function (e) {
|
|||
|
|
e.preventDefault();
|
|||
|
|
},
|
|||
|
|
currentGatherer: function () {
|
|||
|
|
var current = null;
|
|||
|
|
var self = this;
|
|||
|
|
this.props.gather.gatherers.forEach(function (gatherer) {
|
|||
|
|
if (gatherer.id === self.props.currentUser.id) current = gatherer;
|
|||
|
|
});
|
|||
|
|
return current;
|
|||
|
|
},
|
|||
|
|
render: function () {
|
|||
|
|
var joinButton;
|
|||
|
|
if (this.joinedGather()) {
|
|||
|
|
joinButton = (React.createElement("li", null, React.createElement("button", {
|
|||
|
|
onClick: this.leaveGather,
|
|||
|
|
className: "btn btn-danger"}, "Leave Gather")));
|
|||
|
|
} else {
|
|||
|
|
joinButton = (React.createElement("li", null, React.createElement(JoinGatherButton, null)));
|
|||
|
|
}
|
|||
|
|
var inviteButton;
|
|||
|
|
if (this.props.gather.state === 'gathering') {
|
|||
|
|
inviteButton = (React.createElement("li", null, React.createElement("button", {
|
|||
|
|
onClick: this.inviteToGather,
|
|||
|
|
className: "btn btn-primary"}, "Invite to Gather")));
|
|||
|
|
}
|
|||
|
|
return (
|
|||
|
|
React.createElement("div", {className: "panel panel-default"},
|
|||
|
|
React.createElement("div", {className: "panel-heading"},
|
|||
|
|
React.createElement("strong", null, "NS2 Gather "),
|
|||
|
|
React.createElement("span", {className: "badge add-left"}, this.props.gather.gatherers.length)
|
|||
|
|
),
|
|||
|
|
React.createElement(Gatherers, {gather: this.props.gather, currentGatherer: this.currentGatherer()}),
|
|||
|
|
React.createElement(GatherProgress, {gather: this.props.gather}),
|
|||
|
|
React.createElement("div", {className: "panel-footer text-right"},
|
|||
|
|
React.createElement("ul", {className: "list-inline"},
|
|||
|
|
inviteButton,
|
|||
|
|
joinButton
|
|||
|
|
)
|
|||
|
|
)
|
|||
|
|
)
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
var Gatherers = React.createClass({displayName: "Gatherers",
|
|||
|
|
render: function () {
|
|||
|
|
var self = this;
|
|||
|
|
var gatherers = this.props.gather.gatherers.map(function (gatherer) {
|
|||
|
|
var lifeforms = (
|
|||
|
|
gatherer.user.ability.lifeforms.map(function (lifeform) {
|
|||
|
|
return (React.createElement("span", {className: "label label-default"}, lifeform));
|
|||
|
|
})
|
|||
|
|
);
|
|||
|
|
|
|||
|
|
var commBadge;
|
|||
|
|
if (gatherer.user.ability.commander) {
|
|||
|
|
commBadge = (React.createElement("img", {src: "/images/commander.png",
|
|||
|
|
alt: "Commander",
|
|||
|
|
height: "20",
|
|||
|
|
width: "20"}));
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
var division = (React.createElement("span", {className: "label label-primary"}, gatherer.user.ability.division));
|
|||
|
|
var action = lifeforms;
|
|||
|
|
if (self.props.gather.state === "election") {
|
|||
|
|
var votes = self.props.gather.gatherers.reduce(function (acc, voter) {
|
|||
|
|
if (voter.leaderVote === gatherer.id) acc++;
|
|||
|
|
return acc;
|
|||
|
|
}, 0)
|
|||
|
|
action = (
|
|||
|
|
React.createElement("span", null,
|
|||
|
|
React.createElement("small", null, votes + " votes", " "),
|
|||
|
|
React.createElement(VoteButton, {currentGatherer: self.props.currentGatherer, candidate: gatherer})
|
|||
|
|
)
|
|||
|
|
);
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
return (
|
|||
|
|
React.createElement("tr", {key: gatherer.user.id},
|
|||
|
|
React.createElement("td", {className: "col-md-1"}, commBadge),
|
|||
|
|
React.createElement("td", {className: "col-md-5"}, gatherer.user.username),
|
|||
|
|
React.createElement("td", {className: "col-md-3"}, division, " "),
|
|||
|
|
React.createElement("td", {className: "col-md-2 text-right"}, action, " ")
|
|||
|
|
)
|
|||
|
|
);
|
|||
|
|
})
|
|||
|
|
if (this.props.gather.gatherers.length) {
|
|||
|
|
return (
|
|||
|
|
React.createElement("div", {className: "panel-body"},
|
|||
|
|
React.createElement("div", {className: "panel panel-default"},
|
|||
|
|
React.createElement("div", {className: "panel-heading"},
|
|||
|
|
React.createElement("h5", {className: "panel-title"}, "Roster")
|
|||
|
|
),
|
|||
|
|
React.createElement("table", {className: "table roster-table"},
|
|||
|
|
React.createElement("tbody", null,
|
|||
|
|
gatherers
|
|||
|
|
)
|
|||
|
|
)
|
|||
|
|
)
|
|||
|
|
)
|
|||
|
|
);
|
|||
|
|
} else {
|
|||
|
|
return (React.createElement("div", {className: "panel-body text-center"}, React.createElement(JoinGatherButton, {buttonClass: "btn-lg", buttonName: "Start a Gather"})));
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidHJhbnNmb3JtZWQuanMiLCJzb3VyY2VzIjpbbnVsbF0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLFlBQVksQ0FBQzs7QUFFYixJQUFJLGdDQUFnQywwQkFBQTtDQUNuQyxVQUFVLEVBQUUsVUFBVSxDQUFDLEVBQUU7RUFDeEIsTUFBTSxDQUFDLElBQUksQ0FBQyxhQUFhLEVBQUU7R0FDMUIsTUFBTSxFQUFFO0lBQ1AsU0FBUyxFQUFFLElBQUk7SUFDZjtHQUNELENBQUMsQ0FBQztFQUNIO0NBQ0QsSUFBSSxFQUFFLFVBQVUsQ0FBQyxFQUFFO0VBQ2xCLENBQUMsQ0FBQyxjQUFjLEVBQUUsQ0FBQztFQUNuQixNQUFNLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRTtHQUMxQixNQUFNLEVBQUU7SUFDUCxTQUFTLEVBQUUsUUFBUSxDQUFDLENBQUMsQ0FBQyxNQUFNLENBQUMsS0FBSyxFQUFFLEVBQUUsQ0FBQztJQUN2QztHQUNELENBQUMsQ0FBQztFQUNIO0NBQ0QsTUFBTSxFQUFFLFlBQVk7RUFDbkIsSUFBSSxJQUFJLENBQUMsS0FBSyxDQUFDLGVBQWUsS0FBSyxJQUFJLEVBQUU7R0FDeEMsT0FBTyxLQUFLLENBQUM7R0FDYjtFQUNELElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxlQUFlLENBQUMsVUFBVSxLQUFLLElBQUksQ0FBQyxLQUFLLENBQUMsU0FBUyxDQUFDLEVBQUUsRUFBRTtHQUN0RTtJQUNDLG9CQUFBLFFBQU8sRUFBQSxDQUFBO0tBQ04sT0FBQSxFQUFPLENBQUUsSUFBSSxDQUFDLFVBQVUsRUFBQztLQUN6QixTQUFBLEVBQVMsQ0FBQyx3QkFBeUIsQ0FBQSxFQUFBLE9BQUE7QUFBQSxJQUMzQixDQUFBO0tBQ1I7R0FDRixNQUFNO0dBQ047SUFDQyxvQkFBQSxRQUFPLEVBQUEsQ0FBQTtLQUNOLE9BQUEsRUFBTyxDQUFFLElBQUksQ0FBQyxJQUFJLEVBQUM7S0FDbkIsU0FBQSxFQUFTLENBQUMsd0JBQUEsRUFBd0I7S0FDbEMsS0FBQSxFQUFL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
|