Chess Board Flipper

by chicagogrooves

HTML

<script src="//chicagogrooves.com/js/jquery-animate-css-rotate-scale.js"></script>
<script src="//chicagogrooves.com/js/knockout-2.0.0.js"></script>
<script src="http://chicagogrooves.com/js/knockout.mapping.js"></script>
<script src="http://www.chicagogrooves.com/js/jquery.min.js"></script>
<script src="http:////www.chicagogrooves.com/js/path.js"></script>
<div id="board">
    <div class="row"><img class="" src="//chicagogrooves.com/images/queen_b.png"/><img class="" src="//chicagogrooves.com/images/king_b.png"/></div>
    <div class="row"><img class="" src="//chicagogrooves.com/images/queen_w.png"/><img class="" src="//chicagogrooves.com/images/king_w.png"/></div>
</div>

<div id="chat">
    <ol data-bind="foreach: chats">
        <li data-bind="text: $data"/>
    </ol>
    <input id="new_chat" data-bind="value: new_chat, valueUpdate: 'afterkeydown'" onfocus="board_view.clear_chat()"/>
    <button id="send_chat" onclick="board_view.send_chat()">Send</button>
</div>

<div id="controls">
<input type="button" id="flipper" value="Flip Board" onclick="board_view.flipped( ! board_view.flipped() )"/>

<h4>Board View</h4>
<ul>
    <li>Flipped: <span data-bind="text: flipped"/></li>
    <li><a href="#/flipped">Link to flipped board</a></li>
</ul>
<hr/>
<div data-bind="text: ko.toJSON( ko.mapping.toJS(board_view) )">
</div>

CSS

#board, #chat{ float:left; margin: 5px; width: 80px; height: 80px; background-color:salmon; border: 1px solid black;} 
#chat {  background-color: white; width: 150px; height:auto; padding: 6px;}
#controls{ clear:both; }
#new_chat{ color: #aaa }
.row{ border: 0px solid blue; clear: both; white-space-collapsing: discard;}

JavaScript

$(function(){
    var i18n = { chat_prompt: 'Type to chat' };
    
    var defaults = {
      flipped: false,
        chats: ['Mate in two!', 'Nuh uh..'],
        new_chat: i18n.chat_prompt
    };
    
    board_view = ko.mapping.fromJS(defaults);
    ko.applyBindings(board_view);

    board_view.flipped.subscribe(function(val){
      var rotation = "rotate(" + (val ? "180deg" : "0deg") + ")"
      var b = $("#board")
      b.css("-webkit-transform", rotation)
      b.find("img").css("-webkit-transform", rotation)
    });
        
    board_view.clear_chat= function(){
       this.new_chat("");
    }
    board_view.send_chat= function(){
        //alert( this.new_chat() );
        this.chats.push( this.new_chat() );
        this.new_chat( i18n.chat_prompt );
    }
        
    Path.map("#/flipped").to(function(){
        board_view.flipped(true);
    });
    Path.listen();
});