123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152 |
- var h = require('cyclejs').h;
- function renderLogin() {
- var disconnected = true;
- var error = null;
- var hasRoom = false;
- return (
- h("div.row", [
- error && h("div.alert.alert-danger", [
- h("strong", [ "Oops!" ]), error + "."
- ]),
- h("div#login", [
- disconnected && h("form.form-inline#login-form", [
- h("input#username.form-control", {
- "name": "username",
- "type": "text",
- "ng-model": "username",
- "placeholder": "Username"
- }),
- h("br"),
- h("br"),
- h("button.btn", {
- "type": "submit",
- "ng-click": "service.connect(username); username=''"
- }, [ hasRoom ? 'Join Room' : 'Create New Room' ])
- ])
- ])
- ])
- )
- }
- function renderChat(messages, me) {
- return (
- h("div#main.col-md-9", [
- h("div#messages", [
- h("table", messages.map(function(message) {
- var classes = '.message';
- classes += '.'+message.kind;
- if(message.user == me) {
- classes += '.me';
- }
- return h("tr"+classes, [
- h("td.user", [ message.user ]),
- h("td", [ message.message ])
- ]);
- })),
- h("input#talk.form-control", {
- "type": "text",
- "ng-model": "text",
- "ng-keypress": "onType($event)"
- })
- ])
- ])
- )
- }
- function renderSidebar() {
- return (
- h("div.col-md-3", {
- "ng-controller": "GameCtrl"
- }, [
- h("button.btn.btn-primary", {
- "ng-show": "game.pendingRound",
- "ng-click": "game.startRound()"
- }, [ "Start" ]),
- h("div", {
- "ng-if": "game.roundRunning()"
- }, [
- h("h2", [ h("ng-pluralize", {
- "count": "game.timer.count",
- "when": "{'0': 'Time\\'s up!', 'one': '1 second', 'other': '{} seconds'}"
- }) ]),
- h("h2", [ h("ng-pluralize", {
- "count": "game.points",
- "when": "{'one': '1 point', 'other': '{} points'}"
- }) ]),
- h("hr")
- ]),
- h("div", {
- "ng-if": "game.roundRunning()"
- }, [
- h("h3", {
- "ng-show": "game.isPlayer()"
- }, [ "you are the giver" ]),
- h("h3", {
- "ng-show": "game.isMonitor()"
- }, [ "you are a monitor" ]),
- h("h3", {
- "ng-show": "game.isGuesser()"
- }, [ "you are a guesser" ]),
- h("button.btn.btn-warning", {
- "ng-show": "game.isPlayer()",
- "ng-click": "game.pass()"
- }, [ "Pass" ]),
- h("button.btn.btn-danger", {
- "ng-show": "game.isMonitor()",
- "ng-click": "game.taboo()"
- }, [ "Uh-uh!" ]),
- h("button.btn.btn-success", {
- "ng-show": "game.isMonitor() || game.isPlayer()",
- "ng-click": "game.correct()"
- }, [ "Correct" ])
- ]),
- h("div", {
- "ng-show": "game.card"
- }, [
- h("h2", [ "Card" ]),
- h("h3", [ "{{game.card.word}}" ]),
- h("ul.taboo", [
- h("li", {
- "ng-repeat": "word in game.card.taboo"
- }, [ "{{word}}" ])
- ])
- ]),
- h("h2", [ "Team A" ]),
- h("ul.members", [
- h("li", {
- "ng-repeat": "member in game.teamA.members"
- }, [ "{{member}}" ])
- ]),
- h("h2", [ "Team B" ]),
- h("ul.members", [
- h("li", {
- "ng-repeat": "member in game.teamB.members"
- }, [ "{{member}}" ])
- ])
- ])
- )
- }
- function renderMain() {
- return h("div.row", [
- renderChat(),
- renderSideBar()
- ])
- }
- module.exports = function() {
- var isConnected = false;
- return (
- h("div", [
- h("div.page-header", [
- h("h1", isConnected ?
- [ "Welcome ", h("small", [ "You are playing as {{service.username}}" ]) ]
- :
- [ "Welcome ", h("small", [ "login to play" ]) ]
- )
- ]),
- isConnected ? renderMain() : renderLogin()
- ])
- );
- }
|