chess/src/main/web/pages/index.html
author Jaroslav Tulach <jtulach@netbeans.org>
Thu, 25 Jul 2013 15:57:52 +0200
branchchess
changeset 23 827f30fbdeab
parent 22 fb06534ab8db
permissions -rw-r--r--
Rendering the board with knockout
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">
jtulach@22
    28
<head>
jtulach@22
    29
	<meta charset="utf-8">
jtulach@22
    30
	<title>Chess Client</title>
jtulach@22
    31
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
jtulach@22
    32
	<meta name="description" content="">
jtulach@22
    33
	<meta name="author" content="">
jtulach@22
    34
jtulach@22
    35
	<!-- Le styles -->
jtulach@22
    36
	<link href="./css/bootstrap.css" rel="stylesheet">
jtulach@22
    37
	<link href="./css/bootstrap-responsive.css" rel="stylesheet">
jtulach@22
    38
	<link href="./css/chess.css" rel="stylesheet">
jtulach@22
    39
	<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
jtulach@22
    40
	<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
jtulach@22
    41
	<script>
jtulach@22
    42
		$(function() {
jtulach@22
    43
			$( ".figure" ).draggable({grid:[76,77]});			
jtulach@22
    44
		});
jtulach@22
    45
	</script>
jtulach@22
    46
</head>
jtulach@22
    47
<body>
jtulach@22
    48
	<div class="navbar">
jtulach@22
    49
		<div class="navbar-inner">
jtulach@22
    50
			<a class="brand" href="#">Chess Game</a>
jtulach@22
    51
			<ul class="nav">
jtulach@22
    52
				<li class="active"><a href="#">My Game</a></li>
jtulach@22
    53
				<li><a href="#">New game</a></li>
jtulach@22
    54
				<li><a href="#">View games</a></li>
jtulach@22
    55
				<li><a href="#">Blah..</a></li>
jtulach@22
    56
			</ul>
jtulach@22
    57
			<form class="navbar-search pull-right">
jtulach@22
    58
				<input type="text" class="search-query" placeholder="Search">
jtulach@22
    59
			</form>
jtulach@22
    60
		</div>
jtulach@22
    61
	</div>
jtulach@22
    62
	<div class="container-fluid">
jtulach@22
    63
		<div class="row-fluid">
jtulach@22
    64
			<div class="span9">
jtulach@22
    65
				<h1>My game</h1>
jtulach@22
    66
				<table class="board">
jtulach@23
    67
                    <tbody data-bind="foreach: rows">
jtulach@23
    68
                        <tr >
jtulach@23
    69
                            <!-- ko foreach: columns -->
jtulach@23
    70
                            <td data-bind="click: changeToPawn, css: squareColor" >
jtulach@23
    71
                                <span data-bind='html: pieceEntity'></span>
jtulach@23
    72
                            </td>
jtulach@23
    73
                            <!-- /ko -->
jtulach@23
    74
                        </tr>
jtulach@23
    75
                    </tbody>
jtulach@22
    76
				</table>
jtulach@22
    77
			</div>
jtulach@22
    78
			<div class="span2 offset1">
jtulach@22
    79
				<h2>Game Log</h2>
jtulach@22
    80
				<div class="log">
jtulach@22
    81
					<table class="table table-striped log-table">
jtulach@22
    82
						<thead>
jtulach@22
    83
							<tr>
jtulach@22
    84
								<th>#</th>
jtulach@22
    85
								<th>Move</th>
jtulach@22
    86
							</tr>
jtulach@22
    87
						</thead>
jtulach@22
    88
						<tbody>
jtulach@22
    89
							<tr>
jtulach@22
    90
								<td>10</td>
jtulach@22
    91
								<td>Move</td>
jtulach@22
    92
							</tr>
jtulach@22
    93
							<tr>
jtulach@22
    94
								<td>9</td>
jtulach@22
    95
								<td>Move</td>
jtulach@22
    96
							</tr>
jtulach@22
    97
							<tr>
jtulach@22
    98
								<td>8</td>
jtulach@22
    99
								<td>Move</td>
jtulach@22
   100
							</tr>
jtulach@22
   101
							<tr>
jtulach@22
   102
								<td>7</td>
jtulach@22
   103
								<td>Move</td>
jtulach@22
   104
							</tr>
jtulach@22
   105
							<tr>
jtulach@22
   106
								<td>6</td>
jtulach@22
   107
								<td>Move</td>
jtulach@22
   108
							</tr>
jtulach@22
   109
							<tr>
jtulach@22
   110
								<td>5</td>
jtulach@22
   111
								<td>Move</td>
jtulach@22
   112
							</tr>
jtulach@22
   113
							<tr>
jtulach@22
   114
								<td>4</td>
jtulach@22
   115
								<td>Move</td>
jtulach@22
   116
							</tr>
jtulach@22
   117
							<tr>
jtulach@22
   118
								<td>3</td>
jtulach@22
   119
								<td>Move</td>
jtulach@22
   120
							</tr>
jtulach@22
   121
							<tr>
jtulach@22
   122
								<td>2</td>
jtulach@22
   123
								<td>Move</td>
jtulach@22
   124
							</tr>
jtulach@22
   125
							<tr>
jtulach@22
   126
								<td>1</td>
jtulach@22
   127
								<td>Move</td>
jtulach@22
   128
							</tr>
jtulach@22
   129
						</tbody>
jtulach@22
   130
					</table>
jtulach@22
   131
				</div>
jtulach@22
   132
			</div>
jtulach@22
   133
		</div>
jtulach@22
   134
	</div>
jtulach@22
   135
</body>
jtulach@22
   136
</html>