Cardshifter游戏大厅

 <table id="lobby">
    <tr id="lobby-headers">
        <td id="lobby-title">Cardshifter Lobby</td>
        <td id="lobby-deck-builder" width="20%"><button class="btn btn-navbar csh-button">Deck Builder</button></td>
    </tr>
    <tr id="lobby-invite-request" ng-show="gotInvite">
        <td colspan="2">
            <div id="lobby-accept-invite">
                Game invite from {{invite.name}} to play {{invite.type}}!<br/>
                <input ng-click="acceptInvite(true)" type="button" value="Accept" class="btn btn-success"/>
                <input ng-click="acceptInvite(false)" type="button" value="Decline" class="btn btn-danger"/>
            </div>
        </td>
    </tr>
    <tr id="lobby-list-headers">
        <th id="lobby-message-list-header">Messages</th>
        <th id="lobby-users-list-header">Users Online</th>
    </tr>
    <tr id="lobby-lists" height="400px">
        <td id="lobby-message-list">
            <ul id="lobby-chat-messages">
                <li ng-repeat="message in chatMessages" id="lobby-chat-message">
                    [{{message.timestamp}}] {{message.from}}: {{message.message}}
                </li>
            </ul>
        </td>
        <td id="lobby-users-list">
            <ul id="lobby-users">
                <li ng-repeat="user in users" id="lobby-user">
                    <input ng-model="$parent.$parent.selected_opponent" ng-if="user.userId!=currentUser.id" type="radio"
                           value="{{$parent.user.userId}}" name="user_selection" /> {{user.name}}
                </li>
            </ul>
        </td>
    </tr>
    <tr>
        <td id="lobby-message">
            <textarea ng-model="user_chat_message" ng-keyup="sendMessage($event)"
                id="lobby-chat-text-area" rows="1" cols="75" wrap="off"
                placeholder="Enter chat message..."></textarea>
            <input ng-click="sendMessage()" ng-disabled="sending" type="submit" value="Send" class="btn btn-navbar csh-button"/>
        </td>
        <td id="lobby-invite">
            <input ng-click="startGame()" type="button" value="Invite to game" class="btn btn-warning"/>
        </td>
    </tr>
    <tr id="lobby-mods">
        <td colspan="2" id="lobby-mod-selection">
            <form class="form-inline" role="form">
                <div class="form-group">
                    <label for="mod_selection">Select game type:</label>
                    <div ng-repeat="mod in mods" class="form-control" id="lobby-mod-selector">
                        <input ng-model="$parent.selected_mod" type="radio" value="{{mod}}"
                            name="mod_selection" id="mod_selection"/>
                        {{mod}}
                    </div>
                </div>
            </form>
        </td>
    </tr>


</table>

/* WHOLE LOBBY */

#lobby {
    width: 100%;
}

/* TABLE HEADERS */

#lobby-headers {
    font-family: Georgia, Times, "Times New Roman", serif;
    text-align: center;
    color: #DDDDDD;
    background-color: #000000;

}

#lobby-title {
    font-size: 1.5em;
    font-weight: bold;
}

#lobby-deck-builder {}

/* SECTION HEADERS */

#lobby-list-headers {
    font-family: Georgia, Times, "Times New Roman", serif;
    font-size: 1.2em;
}

#lobby-message-list-header {
    text-align: center;
}

#lobby-users-list-header {
    text-align: center;
}

/* MAIN MESSAGE & USERS SECTIONS */

#lobby-lists {
    vertical-align: text-top;
}

#lobby-message-list {
    font-size: 0.8em; !important
}
    /* List of all messages */
    #lobby-chat-messages {
        list-style-type: none;
        padding-left: 0;
    }
        /* Each individual message line */
        #lobby-chat-message {
        }

#lobby-users-list {
    font-size: 0.9em;
    font-family: Georgia, Times, "Times New Roman", serif;
}
    /* List of all users */
    #lobby-users {
        list-style-type: none;
        padding-left: 0;
    }
        /* Each individual user line */
        #lobby-user {
        }

/* FOOTER SECTIONS */

#lobby-message {
    background-color: #000000;
    vertical-align: bottom;
}
    /* TEXT AREA FOR TYPING CHAT MESSAGES*/
    #lobby-chat-text-area {
        outline: none;
        overflow: auto;
        vertical-align: middle;
    }

#lobby-invite {
    background-color: #000000;
    text-align: center;
}

#lobby-mods {}

#lobby-mod-selection {}

    /* DIV CONTAINING RADIO BUTTON AND MOD NAME */
    #lobby-mod-selector {
        border: 1;
    }

/* Game invite accept dialog */
#lobby-invite-request {
    font-family: Georgia, Times, "Times New Roman", serif;
    font-size: 1.6em;
    text-align: center;
    background-color: #0033CC;
    color: #EEEEEE;
    border-top-color: #FFFFFF;
    vertical-align: middle;
}

CardshifterApp.controller("LobbyController", function($scope, $timeout) {
    var CHAT_FEED_LIMIT = 10;
    var ENTER_KEY = 13;
    var MESSAGE_DELAY = 3000;
    var ENTER_KEY = 13;

    $scope.users = [];
    $scope.chatMessages = [];
    $scope.mods = [];
    $scope.currentUser = window.currentUser;
    $scope.invite = {
        id: null,
        name: null,
        type: null
    };
    $scope.gotInvite = false;


    var commandMap = {
        "userstatus": updateUserList,
        "chat": addChatMessage,
        "inviteRequest": displayInvite,
        "availableMods": displayMods,
        "newgame": enterNewGame
    };

    var getUsers = new CardshifterServerAPI.messageTypes.ServerQueryMessage("USERS", "");
    CardshifterServerAPI.sendMessage(getUsers);

    CardshifterServerAPI.setMessageListener(function(message) {
        commandMap[message.command](message);
        $scope.$apply(); // needs to manually updated since this is an event
    }, ["userstatus", "chat", "inviteRequest", "availableMods", "newgame"]);

    $scope.sendMessage = function(e) {
        if(e && e.keyCode !== ENTER_KEY) { // user may hit "enter" key
            return;
        }

        $scope.sending = true;
        var chatMessage = new CardshifterServerAPI.messageTypes.ChatMessage($scope.user_chat_message);
        CardshifterServerAPI.sendMessage(chatMessage);

        $scope.user_chat_message = ""; // clear the input box
        $timeout(function() { // allow another message to be sent in 3 seconds
            $scope.sending = false;
        }, MESSAGE_DELAY);
    }

    $scope.startGame = function() {
        if($scope.selected_mod && $scope.selected_opponent) {
            var startGame = new CardshifterServerAPI.messageTypes.StartGameRequest($scope.selected_opponent,
                                                                                   $scope.selected_mod);
            CardshifterServerAPI.sendMessage(startGame);
        } else {
            // user needs to choose an opponent and/or a mod
            console.log("need to choose mod and/or opponent");
        }
    }

    $scope.acceptInvite = function(accept) {
        var accept = new CardshifterServerAPI.messageTypes.InviteResponse($scope.invite.id, accept);
        CardshifterServerAPI.sendMessage(accept);
        $scope.gotInvite = false;
    }


    // The command map functions:
    /**
    * Based on the content of message, will add or remove
    * a user from the user list.
    */
    function updateUserList(message) {
        if(message.status === "OFFLINE") {
            for(var i = 0, length = $scope.users.length; i < length; i++) {
                if($scope.users[i].userId === message.userId) {
                    $scope.users.splice(i, 1); // remove that user from the array
                    break;
                }
            }
        } else {
            $scope.users.push(message);
        }
    }
    /**
    * Adds a chat message to the message feed. If the message
    * feed is at the maximum limit of messages, deletes the oldest
    * message.
    */
    function addChatMessage(message) {
        if($scope.chatMessages.length === CHAT_FEED_LIMIT) {
            // remove the oldest chat message
            $scope.chatMessages.shift();
        }

        var now = new Date();
        var YMD = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
        var HMS = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();
        message.timestamp = YMD + " " + HMS;

        $scope.chatMessages.push(message);
    }
    /**
    * Shows buttons and a message to this client for accepting
    * or declining a game request.
    */
    function displayInvite(message) {
        $scope.invite.id = message.id;
        $scope.invite.name = message.name;
        $scope.invite.type = message.gameType;
        $scope.gotInvite = true;
    }
    /**
    * Shows to the user a list of all available mods.
    */
    function displayMods(message) {
        $scope.mods = message.mods;
    }
    /**
    * Stores the game ID in currentUser for other controllers
    * to use and navigates to the deck-builder page for the
    * user to select a deck.
    */
    function enterNewGame(message) {
        currentUser.currentGameId = message.gameId;
        console.log("change to game");
    }
});

<div ng-repeat="mod in mods" class="form-control" id="lobby-mod-selector">
    <input ng-model="$parent.selected_mod" type="radio" value="{{mod}}"
        name="mod_selection" id="mod_selection"/>
    {{mod}}
</div>

module.directive('modList', function() {
  return {
    scope: {
      model: '='
    },
    controller: function($scope, mods) {
      $scope.mods = mods;
    },
    template: '<div ng-repeat="mod in mods"><mod moderator="mod" model="model"></mod></div>'
  };
})
.directive('mod', function() {
  return {
    scope: { 
      moderator: '=',
      model: '='
    },
    template: '<input type="radio" ng-value="moderator" name="mod_selection" ng-model="model"> {{ moderator }}'
  }});

<mod-list model='selected_mod'></mod-list>

$scope.acceptInvite = function(accept) {
  var accept = new CardshifterServerAPI.messageTypes.InviteResponse($scope.invite.id, accept);
  CardshifterServerAPI.sendMessage(accept);
  $scope.gotInvite = false;
}

$scope.acceptInvite = function(acceptOrDecline) {
  // inviteService is a bit contrived, you'd probably want this in some other service
  // but it is an example
  $scope.inviteService.respondToInvite($scope.invite.id, acceptOrDecline).then(function() {
    $scope.gotInvite = false;
  });
}

#lobby-message-list {
    font-size: 0.8em; !important
}
    /* List of all messages */
    #lobby-chat-messages {
        list-style-type: none;
        padding-left: 0;
    }
        /* Each individual message line */
        #lobby-chat-message {
        }

#lobby-message-list-header {
    text-align: center;
}

#lobby-users-list-header {
    text-align: center;
}

#lobby-users-list-header, #lobby-message-list-header {
    text-align: center;
}

var commandMap = {
    "userstatus": updateUserList,
    "chat": addChatMessage,
    "inviteRequest": displayInvite,
    "availableMods": displayMods,
    "newgame": enterNewGame
};

#lobby-message-list {
    font-size: 0.8em; !important
}

#lobby-mod-selector {
    border: 1;
}

#lobby-invite-request {
    font-family: Georgia, Times, "Times New Roman", serif;
    font-size: 1.6em;
}

#lobby-invite-request {
    font: 1.6em Georgia, Times, "Times New Roman", serif;
}

#lobby-chat-messages {
    list-style-type: none;
}

#lobby-chat-messages {
    list-style: none;
}

#4 楼

除了@IsmaelMiguel所做的事情之外，没有什么要掩盖的了：


世俗的事物：


事物，作为样式事物，但是：

font-family: Georgia, Times, "Times New Roman", serif;
font-size: 1.6em;
text-align: center;
background-color: #0033CC;
color: #EEEEEE;
border-top-color: #FFFFFF;
vertical-align: middle;

我发现更好地按字母顺序或按字母顺序堆叠事物（例如：align，color s，font s，text），也可以按行长堆叠它们。这一点也适用于JS。


更多有关常规样式的信息：

// user needs to choose an opponent and/or a mod
console.log("need to choose mod and/or opponent");

最好保留列表的顺序相同，而不是交换它们。另外，.log的文字非常清晰，注释有些多余。

    </tr>


</table>

这里您有多余的一行，如果这是您的风格，那也没关系，但是，请在整个代码中将其保持不变。


不确定这是怎么回事：

但是，如果是错误，则可能要看看它。

console.log("change to game");

毫无意义，值得大写和句点。


其他所有内容：

var YMD = now.getFullYear() + "-" + (now.getMonth() + 1) + "-" + now.getDate();
var HMS = now.getHours() + ":" + now.getMinutes() + ":" + now.getSeconds();

与那样的串联相比，我发现最好这样做join代替。

var YMD = [now.getFullYear(), now.getMonth() + 1, now.getDate()].join("-");
var HMS = [now.getHours(), now.getMinutes(), now.getSeconds()].join(":");

您甚至可以使用最终组合：

message.timestamp = [YMD, HMS].join(" ");

它也是一个如果您想扩展或不进行扩展，稍后再轻松一点。

CardshifterServerAPI.setMessageListener(function(message) {
// ...
}, ["userstatus", "chat", "inviteRequest", "availableMods", "newgame"]);

您应该避免手动更新该文件，而是通过从对象获取键。这样的事情会起作用：

var keys = [];
for(var k in commandMap){ keys.push(k); }
CardshifterServerAPI.setMessageListener(function(message) {
// ...
}, keys);

像Chat.SE一样，可以使用声音和高亮显示的名称来实现@ ping系统。并且与Chat.SE相似，为服务器聊天提供类似于Chat.SE上的mod的特殊颜色会很好，否则，我的麻烦制造者可能会倾向于使用“服务器聊天2”作为用户名进行注册，并混淆所有人。 br />

评论

---

\ $ \ begingroup \ $
两次都很好地捕获了“ Phrancis”名称，看起来我已经用相同的用户名连接了两个实例，这是我们将在短期内实现的。 :)
\ $ \ endgroup \ $
– ran
15年8月9日在7:27

---

\ $ \ begingroup \ $
感谢您最后添加的建议！关于console.logs：这些是临时的。该应用程序的其他部分仍在处理中，而这些是最不重要的部分。因此，这些被用作提醒（以及测试中的“断点”）。
\ $ \ endgroup \ $
– SirPython
2015年8月9日14:16

---

\ $ \ begingroup \ $
通过您推荐的任何方法重新排序CSS属性都没有任何好处。结束tr / table标记之间的多余空格很容易归因于模板引擎中的怪癖，因此很少值得考虑。
\ $ \ endgroup \ $
–cimmanon
2015年8月9日在16:56

---