Tankster Command Blog Post

chat.js

var socket = io.connect();

socket.on('connect', function () {
    socket.emit('connect', userInfo);
});

$('#text').keypress(function (e) {
    if (e.keyCode == 13) {
        $("#send").click();
        return false;
    }
});

$('#send').click(function () {
    socket.emit('user message', $('#text').val());
    writeMessage(userInfo.nickname, $('#text').val(), 'chat', userInfo.userImageId, userInfo.backgroundColor, true);
    $('#text').val('');
});

socket.on('user message', function (message) {
    writeMessage(message.nickname, message.text, message.type, message.userImageId, message.backgroundColor, message.fromme);
});

socket.on('announcement', function (text) {
    writeMessage("Event", text, "event", Math.ceil(Math.random() * 5), null);
});

index.html

<ul id="leaderboard"></ul>

<script id="leaderboard-items" type="text/x-handlebars-template">
    {{#each people}}
    <li class="profile">
        <img src="{{avatarSrc Avatar }}" alt="{{Name}} Picture"/>
        <div class="bigrank">{{Rank}}</div>
        <div class="img"></div>
        <div class="name">{{Name}}</div>
        <div class="rank">{{Rank}}</div>
        <div class="victories">{{Victories}}</div>
        <div class="kills">{{Kills}}</div>
        <div class="accuracy">{{Accuracy}}</div>
        <div class="terraform">{{Terrain}}</div>
        <div class="viewgame {{inGameClass InGame }}">View Game</div>
    </li>
    {{/each}}
</script>

index.js

$(document).ready(function () {
    Handlebars.registerHelper('avatarSrc', function (item) {
        return new Handlebars.SafeString('@Url.Content("~/Images/common/character")' + item + '.png');
    });
    Handlebars.registerHelper('inGameClass', function (item) {
        return new Handlebars.SafeString(item ? "" : "offline");
    });

    $.getJSON('@Url.Action("leaderboard", "api")', function (data) {
        var template = Handlebars.compile($('#leaderboard-items').html());
        var html = template({ people: data });
        $(html).appendTo("#leaderboard");
    });
});