chess/src/main/webapp/pages/index.html
author Jaroslav Tulach <jaroslav.tulach@apidesign.org>
Tue, 24 Sep 2013 23:52:32 +0200
branchchess
changeset 52 6bb4070d2c20
parent 49 945fbfff28f3
child 53 bc0094a5f88c
permissions -rw-r--r--
Removing the server communication stuff
jtulach@22
     1
<!--
jtulach@22
     2
jtulach@22
     3
    The MIT License (MIT)
jtulach@22
     4
jtulach@22
     5
    Copyright (C) 2013 Jaroslav Tulach <jaroslav.tulach@apidesign.org>
jtulach@22
     6
jtulach@22
     7
    Permission is hereby granted, free of charge, to any person obtaining a copy
jtulach@22
     8
    of this software and associated documentation files (the "Software"), to deal
jtulach@22
     9
    in the Software without restriction, including without limitation the rights
jtulach@22
    10
    to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
jtulach@22
    11
    copies of the Software, and to permit persons to whom the Software is
jtulach@22
    12
    furnished to do so, subject to the following conditions:
jtulach@22
    13
jtulach@22
    14
    The above copyright notice and this permission notice shall be included in
jtulach@22
    15
    all copies or substantial portions of the Software.
jtulach@22
    16
jtulach@22
    17
    THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
jtulach@22
    18
    IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
jtulach@22
    19
    FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
jtulach@22
    20
    AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
jtulach@22
    21
    LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
jtulach@22
    22
    OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
jtulach@22
    23
    THE SOFTWARE.
jtulach@22
    24
jtulach@22
    25
-->
jtulach@22
    26
<!DOCTYPE html>
jtulach@22
    27
<html lang="en">
jaroslav@49
    28
    <head>
jaroslav@49
    29
        <meta charset="utf-8">
jaroslav@49
    30
        <title>Chess Client</title>
jaroslav@49
    31
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
jaroslav@49
    32
        <meta name="description" content="">
jaroslav@49
    33
        <meta name="author" content="">
jtulach@22
    34
jaroslav@49
    35
        <!-- Le styles -->
jaroslav@49
    36
        <link href="./css/bootstrap.css" rel="stylesheet">
jaroslav@49
    37
        <link href="./css/bootstrap-responsive.css" rel="stylesheet">
jaroslav@49
    38
        <link href="./css/chess.css" rel="stylesheet">
jaroslav@49
    39
        <!-- Target tablets -->
jaroslav@49
    40
        <link href="./css/chess-tablet-large.css" media="(min-width:560px) and (max-width:710px)" rel="stylesheet" />
jaroslav@49
    41
        <link href="./css/chess-tablet-small.css" media="(min-width:460px) and (max-width:560px)" rel="stylesheet" />
jaroslav@49
    42
        <!-- Target phones -->
jaroslav@49
    43
        <link href="./css/chess-phone-large.css" media="(min-width:370px) and (max-width:460px)" rel="stylesheet" />
jaroslav@49
    44
        <link href="./css/chess-phone-small.css" media="(max-width:370px)" rel="stylesheet" />
jaroslav@49
    45
        <link href="./css/spinner.css" rel="stylesheet">
jaroslav@49
    46
    </head>
jaroslav@49
    47
    <body>
jaroslav@49
    48
        <div class="navbar">
jaroslav@49
    49
            <div class="navbar-inner">
jaroslav@52
    50
                <a id="apptitle" class="brand" data-bind="css: { active: viewGamesActive }, click: activateSettings" href="#">JavaOne Chess</a>
jaroslav@49
    51
                <ul class="nav" data-bind="foreach: boards">
jaroslav@49
    52
                    <li data-bind="css: { active: active }, click: $root.activateGame">
jaroslav@49
    53
                        <span data-bind="visible: myTurn" class="badge badge-warning myturn">&rarrhk;</span> 
jaroslav@49
    54
                        <span data-bind="visible: justObserving" class="badge myturn">&infin;</span> 
jaroslav@49
    55
                        <a href="#" data-bind="text: title"></a>
jaroslav@49
    56
                    </li>
jaroslav@49
    57
                </ul>
jaroslav@49
    58
            </div>
jaroslav@49
    59
        </div>
jaroslav@52
    60
        <div data-bind="template: { name: 'render-games', data: viewGames, ifnot: selectedBoard }"></div>
jaroslav@49
    61
        <div data-bind="template: { name: 'render-board', data: selectedBoard, if : selectedBoard }"></div>
jaroslav@49
    62
jaroslav@49
    63
        <script type="text/html" id="render-board">
jaroslav@49
    64
            <div class="container-fluid">
jaroslav@49
    65
                <div class="row-fluid">
jaroslav@49
    66
                    <div class="span12">
jaroslav@49
    67
                        <h1><span data-bind="text: status"></span></h1>
jaroslav@49
    68
                        <p style="position: relative; left: 0px; top: 0px; height: 25px">
jaroslav@49
    69
                            <span data-bind="visible: blackTurn" class="badge badge-black-turn">Black's turn</span>
jaroslav@49
    70
                            <span data-bind="visible: whiteTurn" class="badge badge-white-turn">White's turn</span>
jaroslav@49
    71
                            <span data-bind="text: alertMessage" class="badge badge-warning badge-status"></span>
jaroslav@49
    72
                        </p>
jaroslav@49
    73
                        <p>
jaroslav@49
    74
                        <table class="board">
jaroslav@49
    75
                            <tbody>
jaroslav@49
    76
                                <!-- ko foreach: rows -->
jaroslav@49
    77
                                <tr>
jaroslav@49
    78
                                    <td class="row-label">
jaroslav@49
    79
                                        <span data-bind='text: y'></span>
jaroslav@49
    80
                                    </td>
jaroslav@49
    81
                                    <!-- ko foreach: columns -->
jaroslav@49
    82
                                    <td data-bind="click: $parents[1].selected, css: squareColor" >
jaroslav@49
    83
                                        <span data-bind='html: pieceEntity, css: { blackPiece: pieceColor() === "B", whitePiece: pieceColor() === "W" }' class="figure"></span>
jaroslav@49
    84
                                    </td>
jaroslav@49
    85
                                    <!-- /ko -->
jaroslav@49
    86
                                </tr>
jaroslav@49
    87
                                <!-- /ko -->
jaroslav@49
    88
                                <tr>
jaroslav@49
    89
                                    <td class="col-label"></td>
jaroslav@49
    90
                                    <!-- ko foreach: columnNames -->
jaroslav@49
    91
                                    <td class="row-label">
jaroslav@49
    92
                                        <span data-bind='text: $data'></span>
jaroslav@49
    93
                                    </td>
jaroslav@49
    94
                                    <!-- /ko -->
jaroslav@49
    95
                                </tr>
jaroslav@49
    96
                            </tbody>
jaroslav@49
    97
                        </table>
jaroslav@49
    98
                        <button data-bind="click: rotateBoard" class="but-orientation">Rotate Board</button>
jaroslav@49
    99
                        <button data-bind="click: $root.leave" class="but-orientation">Leave Game</button>
jaroslav@49
   100
                        </p>
jaroslav@49
   101
                    </div>
jaroslav@49
   102
                </div>
jaroslav@49
   103
                <div class="row-fluid">
jaroslav@49
   104
                    <div class="span12 log-div">
jaroslav@49
   105
                        <h3 class="log-h">Game Log</h3>
jaroslav@49
   106
                        <div class="log">                            
jaroslav@49
   107
                            <div data-bind="foreach: moves">
jaroslav@49
   108
                                <span>
jaroslav@49
   109
                                    <!-- ko if: whiteMove -->
jaroslav@49
   110
                                    <span data-bind="text: round" class="badge"></span> 
jaroslav@49
   111
                                    <!-- /ko -->
jaroslav@49
   112
                                    <a href="#" data-bind="html: html, click: $parent.showPosition"></a>,&nbsp;
jaroslav@49
   113
                                </span>
jaroslav@49
   114
                            </div>                            
jaroslav@49
   115
                        </div>
jaroslav@49
   116
                    </div>
jaroslav@49
   117
                </div>
jaroslav@49
   118
            </div>
jaroslav@49
   119
        </script>
jaroslav@49
   120
jaroslav@52
   121
        <script type="text/html" id="render-games">
jaroslav@49
   122
            <div class="container-fluid">
jaroslav@52
   123
                <div data-bind="visible: $root.viewGamesActive">
jaroslav@52
   124
                    <h3>List of Games</h3>
jaroslav@52
   125
                    <p>
jaroslav@52
   126
                        Status: <span data-bind="text: $root.status"></span>
jaroslav@52
   127
                    </p>
jaroslav@52
   128
                    <div class="input-append" class="select">
jaroslav@52
   129
                        <input type="text" data-bind="value: whitePlayer, valueUpdate: 'afterkeydown'" 
jaroslav@52
   130
                        class="input-small" placeholder="White Player"></input>
jaroslav@52
   131
                     vs.
jaroslav@52
   132
                        <input type="text" data-bind="value: blackPlayer, valueUpdate: 'afterkeydown'" 
jaroslav@52
   133
                        class="input-small" placeholder="Black Player"></input>
jaroslav@52
   134
                    </div>
jaroslav@52
   135
                    <br/>
jaroslav@52
   136
                    <button data-bind="click: $root.createGame, enable: correctNames"
jaroslav@52
   137
                        class="btn btn-success" >Create Game!</button>
jaroslav@52
   138
                    <br/>
jaroslav@52
   139
                    <div data-bind="foreach: $root.boards">
jaroslav@52
   140
                        <div class="input-append">
jaroslav@52
   141
                        <input type="text" data-bind="value: status" disabled></input>
jaroslav@52
   142
                        <button class="btn" data-bind="click: $root.joinGame">
jaroslav@52
   143
                            Show
jaroslav@52
   144
                        </button>
jaroslav@52
   145
                        </div>
jaroslav@52
   146
                        <br/>
jaroslav@52
   147
                    </div>
jaroslav@52
   148
                </div>
jaroslav@49
   149
            </div>
jaroslav@49
   150
            <div id="chesscube">
jaroslav@49
   151
                <div id="spinner">
jaroslav@49
   152
                    <div>&#9812;</div>
jaroslav@49
   153
                    <div>&#9819;</div>
jaroslav@49
   154
                    <div>&#9814;</div>
jaroslav@49
   155
                    <div>&#9821;</div>
jaroslav@49
   156
                    <div>&#9816;</div>
jaroslav@49
   157
                    <div>&#9823;</div>
jaroslav@49
   158
                </div>
jaroslav@49
   159
            </div>
jaroslav@49
   160
        </script>
jaroslav@49
   161
        <center data-bind="visible: false">
jaroslav@49
   162
            <img src="DukeHTML.png" width="320" height="200" alt="Loading...">
jaroslav@49
   163
            <h3>Initializing the virtual machine...</h3>
jaroslav@49
   164
        </center>
jaroslav@49
   165
        <script type="text/javascript" src="bck2brwsr.js"></script>
jaroslav@49
   166
        <script>
jaroslav@49
   167
            var vm = bck2brwsr('${project.build.finalName}.jar');
jaroslav@52
   168
            vm.loadClass('org.apidesign.html.demo.chess.LoadMain');
jaroslav@49
   169
        </script>
jaroslav@49
   170
    </body>
jaroslav@49
   171
</html>