1.1 --- a/chess/src/main/webapp/pages/index.html Fri Jul 26 09:28:49 2013 +0200
1.2 +++ b/chess/src/main/webapp/pages/index.html Tue Sep 24 22:20:24 2013 +0200
1.3 @@ -25,107 +25,186 @@
1.4 -->
1.5 <!DOCTYPE html>
1.6 <html lang="en">
1.7 -<head>
1.8 - <meta charset="utf-8">
1.9 - <title>Chess Client</title>
1.10 - <meta name="viewport" content="width=device-width, initial-scale=1.0">
1.11 - <meta name="description" content="">
1.12 - <meta name="author" content="">
1.13 + <head>
1.14 + <meta charset="utf-8">
1.15 + <title>Chess Client</title>
1.16 + <meta name="viewport" content="width=device-width, initial-scale=1.0">
1.17 + <meta name="description" content="">
1.18 + <meta name="author" content="">
1.19
1.20 - <!-- Le styles -->
1.21 - <link href="./css/bootstrap.css" rel="stylesheet">
1.22 - <link href="./css/bootstrap-responsive.css" rel="stylesheet">
1.23 - <link href="./css/chess.css" rel="stylesheet">
1.24 -</head>
1.25 -<body>
1.26 - <div class="navbar">
1.27 - <div class="navbar-inner">
1.28 - <a class="brand" href="#">Chess Game</a>
1.29 - <ul class="nav">
1.30 - <li class="active"><a href="#">My Game</a></li>
1.31 - <li><a href="#">New game</a></li>
1.32 - <li><a href="#">View games</a></li>
1.33 - <li><a href="#">Blah..</a></li>
1.34 - </ul>
1.35 - <form class="navbar-search pull-right">
1.36 - <input type="text" class="search-query" placeholder="Search">
1.37 - </form>
1.38 - </div>
1.39 - </div>
1.40 - <div class="container-fluid">
1.41 - <div class="row-fluid">
1.42 - <div class="span9">
1.43 - <h1>My game</h1>
1.44 - <div data-bind="visible: blackTurn">Black's turn</div>
1.45 - <table class="board">
1.46 - <tbody data-bind="foreach: rows">
1.47 - <tr >
1.48 - <!-- ko foreach: columns -->
1.49 - <td data-bind="click: $root.selected, css: squareColor" >
1.50 - <span data-bind='html: pieceEntity'></span>
1.51 - </td>
1.52 - <!-- /ko -->
1.53 - </tr>
1.54 - </tbody>
1.55 - </table>
1.56 - <div data-bind="visible: whiteTurn">White's turn</div>
1.57 - </div>
1.58 - <div class="span2 offset1">
1.59 - <h2>Game Log</h2>
1.60 - <div class="log">
1.61 - <table class="table table-striped log-table">
1.62 - <thead>
1.63 - <tr>
1.64 - <th>#</th>
1.65 - <th>Move</th>
1.66 - </tr>
1.67 - </thead>
1.68 - <tbody>
1.69 - <tr>
1.70 - <td>10</td>
1.71 - <td>Move</td>
1.72 - </tr>
1.73 - <tr>
1.74 - <td>9</td>
1.75 - <td>Move</td>
1.76 - </tr>
1.77 - <tr>
1.78 - <td>8</td>
1.79 - <td>Move</td>
1.80 - </tr>
1.81 - <tr>
1.82 - <td>7</td>
1.83 - <td>Move</td>
1.84 - </tr>
1.85 - <tr>
1.86 - <td>6</td>
1.87 - <td>Move</td>
1.88 - </tr>
1.89 - <tr>
1.90 - <td>5</td>
1.91 - <td>Move</td>
1.92 - </tr>
1.93 - <tr>
1.94 - <td>4</td>
1.95 - <td>Move</td>
1.96 - </tr>
1.97 - <tr>
1.98 - <td>3</td>
1.99 - <td>Move</td>
1.100 - </tr>
1.101 - <tr>
1.102 - <td>2</td>
1.103 - <td>Move</td>
1.104 - </tr>
1.105 - <tr>
1.106 - <td>1</td>
1.107 - <td>Move</td>
1.108 - </tr>
1.109 - </tbody>
1.110 - </table>
1.111 - </div>
1.112 - </div>
1.113 - </div>
1.114 - </div>
1.115 -</body>
1.116 -</html>
1.117 \ No newline at end of file
1.118 + <!-- Le styles -->
1.119 + <link href="./css/bootstrap.css" rel="stylesheet">
1.120 + <link href="./css/bootstrap-responsive.css" rel="stylesheet">
1.121 + <link href="./css/chess.css" rel="stylesheet">
1.122 + <!-- Target tablets -->
1.123 + <link href="./css/chess-tablet-large.css" media="(min-width:560px) and (max-width:710px)" rel="stylesheet" />
1.124 + <link href="./css/chess-tablet-small.css" media="(min-width:460px) and (max-width:560px)" rel="stylesheet" />
1.125 + <!-- Target phones -->
1.126 + <link href="./css/chess-phone-large.css" media="(min-width:370px) and (max-width:460px)" rel="stylesheet" />
1.127 + <link href="./css/chess-phone-small.css" media="(max-width:370px)" rel="stylesheet" />
1.128 + <link href="./css/spinner.css" rel="stylesheet">
1.129 + </head>
1.130 + <body>
1.131 + <div class="navbar">
1.132 + <div class="navbar-inner">
1.133 + <a id="apptitle" class="brand" data-bind="css: { active: settingsActive }, click: activateSettings" href="#">JavaOne Chess</a>
1.134 + <ul class="nav" data-bind="foreach: boards">
1.135 + <li data-bind="css: { active: active }, click: $root.activateGame">
1.136 + <span data-bind="visible: myTurn" class="badge badge-warning myturn">↪</span>
1.137 + <span data-bind="visible: justObserving" class="badge myturn">∞</span>
1.138 + <a href="#" data-bind="text: title"></a>
1.139 + </li>
1.140 + </ul>
1.141 + </div>
1.142 + </div>
1.143 + <div data-bind="template: { name: 'render-games', data: viewGames }"></div>
1.144 + <div data-bind="template: { name: 'render-settings', data: settings, if : settingsActive }"></div>
1.145 + <div data-bind="template: { name: 'render-board', data: selectedBoard, if : selectedBoard }"></div>
1.146 +
1.147 + <script type="text/html" id="render-board">
1.148 + <div class="container-fluid">
1.149 + <div class="row-fluid">
1.150 + <div class="span12">
1.151 + <h1><span data-bind="text: status"></span></h1>
1.152 + <p style="position: relative; left: 0px; top: 0px; height: 25px">
1.153 + <span data-bind="visible: blackTurn" class="badge badge-black-turn">Black's turn</span>
1.154 + <span data-bind="visible: whiteTurn" class="badge badge-white-turn">White's turn</span>
1.155 + <span data-bind="text: alertMessage" class="badge badge-warning badge-status"></span>
1.156 + </p>
1.157 + <p>
1.158 + <table class="board">
1.159 + <tbody>
1.160 + <!-- ko foreach: rows -->
1.161 + <tr>
1.162 + <td class="row-label">
1.163 + <span data-bind='text: y'></span>
1.164 + </td>
1.165 + <!-- ko foreach: columns -->
1.166 + <td data-bind="click: $parents[1].selected, css: squareColor" >
1.167 + <span data-bind='html: pieceEntity, css: { blackPiece: pieceColor() === "B", whitePiece: pieceColor() === "W" }' class="figure"></span>
1.168 + </td>
1.169 + <!-- /ko -->
1.170 + </tr>
1.171 + <!-- /ko -->
1.172 + <tr>
1.173 + <td class="col-label"></td>
1.174 + <!-- ko foreach: columnNames -->
1.175 + <td class="row-label">
1.176 + <span data-bind='text: $data'></span>
1.177 + </td>
1.178 + <!-- /ko -->
1.179 + </tr>
1.180 + </tbody>
1.181 + </table>
1.182 + <button data-bind="click: rotateBoard" class="but-orientation">Rotate Board</button>
1.183 + <button data-bind="click: $root.leave" class="but-orientation">Leave Game</button>
1.184 + </p>
1.185 + </div>
1.186 + </div>
1.187 + <div class="row-fluid">
1.188 + <div class="span12 log-div">
1.189 + <h3 class="log-h">Game Log</h3>
1.190 + <div class="log">
1.191 + <div data-bind="foreach: moves">
1.192 + <span>
1.193 + <!-- ko if: whiteMove -->
1.194 + <span data-bind="text: round" class="badge"></span>
1.195 + <!-- /ko -->
1.196 + <a href="#" data-bind="html: html, click: $parent.showPosition"></a>,
1.197 + </span>
1.198 + </div>
1.199 + </div>
1.200 + </div>
1.201 + </div>
1.202 + </div>
1.203 + </script>
1.204 +
1.205 + <script type="text/html" id="render-settings">
1.206 + <div class="container-fluid">
1.207 + <h3>Connection Settings</h3>
1.208 + <p>
1.209 + Status: <span data-bind="text: $root.status"></span>
1.210 + </p>
1.211 + <p>
1.212 + Name:
1.213 + <input type="text" data-bind="value: username, enable: $root.disconnected, valueUpdate: 'afterkeydown'"
1.214 + class="input-small" placeholder="Name"></input>
1.215 + Password:
1.216 + <input type="password" data-bind="value: password, enable: $root.disconnected, valueUpdate: 'afterkeydown'"
1.217 + class="input-small" placeholder="Password"></input>
1.218 + </p>
1.219 + <br/>
1.220 + <p>
1.221 + Chess server URL:
1.222 + <input data-bind="value: url, enable: $root.disconnected" class="inpu-xlarge"></input>
1.223 + </p>
1.224 + <p>
1.225 + <button data-bind="click: $root.reconnect, enable: ($root.disconnected() && validCredentials()) ">Connect</button>
1.226 + <button data-bind="click: $root.disconnect, enable: $root.connected">Disconnect</button>
1.227 + </p>
1.228 + </div>
1.229 + <div id="chesscube">
1.230 + <div id="spinner">
1.231 + <div>♔</div>
1.232 + <div>♛</div>
1.233 + <div>♖</div>
1.234 + <div>♝</div>
1.235 + <div>♘</div>
1.236 + <div>♟</div>
1.237 + </div>
1.238 + </div>
1.239 + </script>
1.240 +
1.241 + <script type="text/html" id="render-games">
1.242 + <div class="container-fluid">
1.243 + <div data-bind="visible: $root.viewGamesActive ">
1.244 + <h3>List of Games</h3>
1.245 + <p>
1.246 + <a href="#" data-bind="click: $root.refreshGames">Refresh</a>
1.247 + </p>
1.248 + <!-- ko if: anyOwnGame -->
1.249 + <h5>Own Games</h5>
1.250 + <div data-bind="foreach: own">
1.251 + <div class="input-append">
1.252 + <input type="text" data-bind="value: description" disabled></input>
1.253 + <button class="btn" data-bind="click: $root.joinGame">
1.254 + <span data-bind="ifnot: pendingPlayer">Show</span>
1.255 + <span data-bind="if: pendingPlayer">Challenge Yourself</span>
1.256 + </button>
1.257 + </div>
1.258 + <br/>
1.259 + </div>
1.260 + <!-- /ko -->
1.261 + <h5>Other Games</h5>
1.262 + <div data-bind="foreach: other">
1.263 + <div class="input-append">
1.264 + <input type="text" data-bind="value: description" disabled></input>
1.265 + <!-- ko if: open -->
1.266 + <button class="btn btn-success" data-bind="click: $root.joinGame">Join</button>
1.267 + <!-- /ko -->
1.268 + <button class="btn" data-bind="click: $root.observeGame">Observe</button>
1.269 + </div>
1.270 + <br/>
1.271 + </div>
1.272 + <h3>New game</h3>
1.273 + <div class="input-append" class="select">
1.274 + <select data-bind="value: selectedColor">
1.275 + <option value="W">White</option>
1.276 + <option value="B">Black</option>
1.277 + </select>
1.278 + <button data-bind="click: $root.createGame" class="btn btn-success" >Create Game!</button>
1.279 + </div>
1.280 + </div>
1.281 + </div>
1.282 + </script>
1.283 + <center data-bind="visible: false">
1.284 + <img src="DukeHTML.png" width="320" height="200" alt="Loading...">
1.285 + <h3>Initializing the virtual machine...</h3>
1.286 + </center>
1.287 + <script type="text/javascript" src="bck2brwsr.js"></script>
1.288 + <script>
1.289 + var vm = bck2brwsr('${project.build.finalName}.jar');
1.290 + vm.loadClass('com.oracle.chess.client.htmljava.LoadMain');
1.291 + </script>
1.292 + </body>
1.293 +</html>