| author | Jaroslav Tulach <jaroslav.tulach@apidesign.org> |
| Sun, 25 Oct 2009 14:51:37 +0100 | |
| changeset 133 | d83dc9d624e8 |
| parent 115 | 6a80463a74c0 |
| child 136 | 73b18c815499 |
| child 137 | 4e5cf409d1aa |
| permissions | -rw-r--r-- |
| jtulach@41 | 1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> |
| jtulach@41 | 2 |
<html> |
| jtulach@41 | 3 |
<head> |
| jaroslav@93 | 4 |
<title> |
| jaroslav@93 | 5 |
<#if user = doc.game.@currentPlayer> |
| jaroslav@93 | 6 |
${bundle.YourTurn}
|
| jaroslav@93 | 7 |
<#else> |
| jaroslav@93 | 8 |
${bundle("Waiting", doc.game.@currentPlayer?string)}
|
| jaroslav@93 | 9 |
</#if> |
| jaroslav@93 | 10 |
</title> |
| jtulach@41 | 11 |
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> |
| jaroslav@133 | 12 |
<#if user != doc.game.@currentPlayer && doc.game.id.@status?index_of("Won") != -1>
|
| jaroslav@66 | 13 |
<meta http-equiv="REFRESH" content="60;URL=/games/${doc.game.id.@id}">
|
| jaroslav@66 | 14 |
</#if> |
| jaroslav@111 | 15 |
<script type="text/javascript"> |
| jaroslav@111 | 16 |
function paintFence() {
|
| jaroslav@111 | 17 |
var fifth = fieldSize / 10; |
| jaroslav@111 | 18 |
var x = (document.getElementById("column").value.charCodeAt(0) - 64) * fieldSize;
|
| jaroslav@111 | 19 |
var y = fieldSize * 9 - (document.getElementById("row").value) * fieldSize;
|
| jaroslav@111 | 20 |
var dx = 0; |
| jaroslav@111 | 21 |
var dy = 0; |
| jaroslav@111 | 22 |
if (document.getElementById("direction").value.charAt(0) == 'H') {
|
| jaroslav@111 | 23 |
dx = fieldSize - 2 * fifth; |
| jaroslav@111 | 24 |
dy = fifth / 2; |
| jaroslav@111 | 25 |
} else {
|
| jaroslav@111 | 26 |
dx = fifth / 2; |
| jaroslav@111 | 27 |
dy = fieldSize - 2 * fifth; |
| jaroslav@111 | 28 |
} |
| jaroslav@111 | 29 |
var fenceDiv = document.getElementById("fence");
|
| jaroslav@111 | 30 |
fenceDiv.style.position="absolute"; |
| jaroslav@111 | 31 |
fenceDiv.style.left = (x - dx) +"px"; |
| jaroslav@111 | 32 |
fenceDiv.style.top = (y - dy) +"px"; |
| jaroslav@111 | 33 |
fenceDiv.style.width = (dx * 2) +"px"; |
| jaroslav@111 | 34 |
fenceDiv.style.height = (dy * 2) +"px"; |
| jaroslav@111 | 35 |
fenceDiv.style.backgroundColor = 'black'; |
| jaroslav@111 | 36 |
fenceDiv.style.visibility = 'visible'; |
| jaroslav@111 | 37 |
} |
| jaroslav@112 | 38 |
function deltas(dir) {
|
| jaroslav@112 | 39 |
var r = new Object(); |
| jaroslav@112 | 40 |
r.x = 0; |
| jaroslav@112 | 41 |
r.y = 0; |
| jaroslav@112 | 42 |
if (dir == 'N') r.y = 1; |
| jaroslav@112 | 43 |
if (dir == 'S') r.y = -1; |
| jaroslav@112 | 44 |
if (dir == 'E') r.x = 1; |
| jaroslav@112 | 45 |
if (dir == 'W') r.x = -1; |
| jaroslav@112 | 46 |
return r; |
| jaroslav@112 | 47 |
} |
| jaroslav@112 | 48 |
function paintPlayer() {
|
| jaroslav@112 | 49 |
var fifth = fieldSize / 5; |
| jaroslav@112 | 50 |
var m1 = deltas(document.getElementById("pdir1").value.charAt(0));
|
| jaroslav@112 | 51 |
var m2 = deltas(document.getElementById("pdir2").value.charAt(0));
|
| jaroslav@112 | 52 |
|
| jaroslav@112 | 53 |
var pos = {
|
| jaroslav@112 | 54 |
x : m1.x + m2.x + playerPos.x, |
| jaroslav@112 | 55 |
y : m1.y + m2.y + playerPos.y |
| jaroslav@112 | 56 |
} |
| jaroslav@112 | 57 |
var fenceDiv = document.getElementById("player");
|
| jaroslav@112 | 58 |
fenceDiv.style.position="absolute"; |
| jaroslav@112 | 59 |
fenceDiv.style.left = (pos.x * fieldSize + fifth) +"px"; |
| jaroslav@112 | 60 |
fenceDiv.style.top = ((8 - pos.y) * fieldSize + fifth) +"px"; |
| jaroslav@112 | 61 |
fenceDiv.style.width = (fieldSize - fifth * 2) +"px"; |
| jaroslav@112 | 62 |
fenceDiv.style.height = (fieldSize - fifth * 2) +"px"; |
| jaroslav@112 | 63 |
fenceDiv.style.backgroundColor = 'black'; |
| jaroslav@112 | 64 |
fenceDiv.style.visibility = 'visible'; |
| jaroslav@112 | 65 |
} |
| jaroslav@111 | 66 |
var fieldSize=<#if format?? && format="small">20<#else>50</#if>; |
| jaroslav@112 | 67 |
var playerPos = {
|
| jaroslav@112 | 68 |
x: ${board.currentPlayer.column},
|
| jaroslav@112 | 69 |
y: ${board.currentPlayer.row}
|
| jaroslav@112 | 70 |
}; |
| jaroslav@111 | 71 |
</script> |
| jtulach@41 | 72 |
</head> |
| jtulach@41 | 73 |
<body> |
| jaroslav@133 | 74 |
<h1><a href="/">${bundle.TITLE_PLAIN}</a></h1>
|
| jaroslav@98 | 75 |
|
| jaroslav@98 | 76 |
<#macro status who> |
| jaroslav@98 | 77 |
${who?string}
|
| jaroslav@98 | 78 |
<#if who = doc.game.@currentPlayer> |
| jaroslav@98 | 79 |
<#if doc.game.id.@status = "whiteWon" || doc.game.id.@status = "blackWon" > |
| jaroslav@98 | 80 |
- ${bundle.HAS_WON}
|
| jaroslav@98 | 81 |
<#else> |
| jaroslav@98 | 82 |
- ${bundle.TO_MOVE}
|
| jaroslav@98 | 83 |
</#if> |
| jaroslav@98 | 84 |
</#if> |
| jaroslav@98 | 85 |
</#macro> |
| jaroslav@98 | 86 |
|
| jaroslav@98 | 87 |
|
| jaroslav@98 | 88 |
<p> |
| jaroslav@100 | 89 |
<b>${bundle.MOVENUMBER}: </b> ${(doc.game.@currentMove?number / 2 + 1)?string("0")}<br>
|
| jaroslav@99 | 90 |
<b>${bundle.WHITE}:</b> <@status doc.game.id.@white/> ${bundle("FENCES_LEFT", board.players[0].fences)}<br>
|
| jaroslav@99 | 91 |
<b>${bundle.BLACK}:</b> <@status doc.game.id.@black/> ${bundle("FENCES_LEFT", board.players[1].fences)}<br>
|
| jaroslav@98 | 92 |
</p> |
| jaroslav@56 | 93 |
|
| jaroslav@56 | 94 |
<p> |
| jaroslav@100 | 95 |
<#if (doc.game.@currentMove?number > 0)> |
| jaroslav@100 | 96 |
<a href="/games/${doc.game.id.@id}?move=${doc.game.@currentMove?number - 1}">${bundle.PREVIOUS}</a>
|
| jaroslav@100 | 97 |
<#else> |
| jaroslav@100 | 98 |
${bundle.PREVIOUS}
|
| jaroslav@100 | 99 |
</#if> |
| jaroslav@100 | 100 |
<a href="/games/${doc.game.id.@id}"">${bundle.LATEST}</a>
|
| jaroslav@100 | 101 |
<#if (doc.game.@currentMove?number < doc.game.moves.*?size)> |
| jaroslav@100 | 102 |
<a href="/games/${doc.game.id.@id}?move=${doc.game.@currentMove?number + 1}">${bundle.NEXT}</a>
|
| jaroslav@100 | 103 |
<#else> |
| jaroslav@100 | 104 |
${bundle.NEXT}
|
| jaroslav@100 | 105 |
</#if> |
| jaroslav@56 | 106 |
</p> |
| jaroslav@56 | 107 |
|
| jaroslav@56 | 108 |
<#if message?? > |
| jaroslav@56 | 109 |
<p> |
| jaroslav@56 | 110 |
<span style="color: red">${message}</span>
|
| jaroslav@56 | 111 |
</p> |
| jaroslav@56 | 112 |
</#if> |
| jaroslav@56 | 113 |
|
| jaroslav@66 | 114 |
<#assign play = false> |
| jaroslav@66 | 115 |
|
| jtulach@77 | 116 |
<#if doc.game.id.@status = "whiteMove" || doc.game.id.@status = "blackMove" > |
| jaroslav@66 | 117 |
<#assign play = user = doc.game.@currentPlayer> |
| jaroslav@66 | 118 |
</#if> |
| jaroslav@66 | 119 |
<#if play> |
| jaroslav@56 | 120 |
<form action="/games/${doc.game.id.@id}/move">
|
| jaroslav@55 | 121 |
<input type="hidden" name="type" value="fence" readonly="readonly"/> |
| jaroslav@111 | 122 |
<select name="column" id="column" onchange="paintFence()"> |
| jaroslav@55 | 123 |
<option>A</option> |
| jaroslav@55 | 124 |
<option>B</option> |
| jaroslav@55 | 125 |
<option>C</option> |
| jaroslav@55 | 126 |
<option>D</option> |
| jaroslav@55 | 127 |
<option>E</option> |
| jaroslav@55 | 128 |
<option>F</option> |
| jaroslav@55 | 129 |
<option>G</option> |
| jaroslav@55 | 130 |
<option>H</option> |
| jaroslav@55 | 131 |
</select> |
| jaroslav@111 | 132 |
<select name="row" id="row" onchange="paintFence()"> |
| jaroslav@55 | 133 |
<option>1</option> |
| jaroslav@55 | 134 |
<option>2</option> |
| jaroslav@55 | 135 |
<option>3</option> |
| jaroslav@55 | 136 |
<option>4</option> |
| jaroslav@55 | 137 |
<option>5</option> |
| jaroslav@55 | 138 |
<option>6</option> |
| jaroslav@55 | 139 |
<option>7</option> |
| jaroslav@55 | 140 |
<option>8</option> |
| jaroslav@55 | 141 |
</select> |
| jaroslav@111 | 142 |
<select name="direction" id="direction" onchange="paintFence()"> |
| jaroslav@111 | 143 |
<option value="H">${bundle.H}</option>
|
| jaroslav@111 | 144 |
<option value="V">${bundle.V}</option>
|
| jaroslav@55 | 145 |
</select> |
| jaroslav@59 | 146 |
<input type="submit" value="${bundle.PLACE}" />
|
| jaroslav@55 | 147 |
</form> |
| jaroslav@61 | 148 |
<form action="/games/${doc.game.id.@id}/move">
|
| jaroslav@55 | 149 |
<input type="hidden" name="type" value="move" readonly="readonly"/> |
| jaroslav@112 | 150 |
<select id="pdir1" name="direction" onchange="paintPlayer()"> |
| jaroslav@112 | 151 |
<option value="E">${bundle.E}</option>
|
| jaroslav@112 | 152 |
<option value="W">${bundle.W}</option>
|
| jaroslav@112 | 153 |
<option value ="N" <#if doc.game.id.@status = "whiteMove">selected="true"</#if>>${bundle.N}</option>
|
| jaroslav@112 | 154 |
<option value ="S" <#if doc.game.id.@status = "blackMove">selected="true"</#if>>${bundle.S}</option>
|
| jaroslav@55 | 155 |
</select> |
| jaroslav@112 | 156 |
<select id="pdir2" name="direction-next" onchange="paintPlayer()"> |
| jaroslav@55 | 157 |
<option></option> |
| jaroslav@112 | 158 |
<option value="E">${bundle.E}</option>
|
| jaroslav@112 | 159 |
<option value="W">${bundle.W}</option>
|
| jaroslav@112 | 160 |
<option value="N">${bundle.N}</option>
|
| jaroslav@112 | 161 |
<option value="S">${bundle.S}</option>
|
| jaroslav@55 | 162 |
</select> |
| jaroslav@59 | 163 |
<input type="submit" value="${bundle.MOVE}" />
|
| jaroslav@55 | 164 |
</form> |
| jtulach@75 | 165 |
<form action="/games/${doc.game.id.@id}/move">
|
| jtulach@75 | 166 |
<input type="hidden" name="type" value="resign" readonly="readonly"/> |
| jtulach@75 | 167 |
<input type="submit" value="${bundle.RESIGN}" />
|
| jtulach@75 | 168 |
</form> |
| jaroslav@55 | 169 |
</#if> |
| jaroslav@100 | 170 |
<p> |
| jaroslav@95 | 171 |
<#if format?? && format = "text"> |
| jaroslav@95 | 172 |
<pre>${doc.game.board}</pre>
|
| jaroslav@105 | 173 |
${bundle.BOARD_VIEW}
|
| jaroslav@100 | 174 |
<a href="/games/${doc.game.id.@id}?format=small">${bundle.BOARD_SMALL}</a>
|
| jaroslav@98 | 175 |
<a href="/games/${doc.game.id.@id}?format=image">${bundle.BOARD_IMAGE}</a>
|
| jaroslav@100 | 176 |
${bundle.BOARD_TEXT}
|
| jaroslav@100 | 177 |
<#elseif format?? && format = "small"> |
| jaroslav@111 | 178 |
<p/> |
| jaroslav@111 | 179 |
<div style="position: relative; height:180px;"> |
| jaroslav@111 | 180 |
<img style="position: absolute; left: 0; right: 0;" |
| jaroslav@111 | 181 |
width="180" height="180 " |
| jaroslav@111 | 182 |
src="/games/${doc.game.id.@id}.png?fieldSize=20<#if doc.game.@currentMove??>&move=${doc.game.@currentMove}</#if>"
|
| jaroslav@111 | 183 |
alt="${bundle.BOARD_TEXT}"
|
| jaroslav@111 | 184 |
> |
| jaroslav@112 | 185 |
<div id="fence" style="position: absolute; left: 0; right: 0;"></div> |
| jaroslav@112 | 186 |
<div id="player" style="position: absolute; left: 0; right: 0;"></div> |
| jaroslav@111 | 187 |
</div> |
| jaroslav@105 | 188 |
${bundle.BOARD_VIEW}
|
| jaroslav@100 | 189 |
${bundle.BOARD_SMALL}
|
| jaroslav@100 | 190 |
<a href="/games/${doc.game.id.@id}?format=image">${bundle.BOARD_IMAGE}</a>
|
| jaroslav@100 | 191 |
<a href="/games/${doc.game.id.@id}?format=text">${bundle.BOARD_TEXT}</a>
|
| jaroslav@95 | 192 |
<#else> |
| jaroslav@111 | 193 |
<div style="position: relative; height:450px;"> |
| jaroslav@111 | 194 |
<img style="position: absolute; left: 0; right: 0;" |
| jaroslav@111 | 195 |
width="450" height="450" |
| jaroslav@111 | 196 |
src="/games/${doc.game.id.@id}.png<#if doc.game.@currentMove??>?move=${doc.game.@currentMove}</#if>"
|
| jaroslav@111 | 197 |
alt="${bundle.BOARD_TEXT}"
|
| jaroslav@111 | 198 |
> |
| jaroslav@112 | 199 |
<div id="fence" style="position: absolute; left: 0; right: 0;"></div> |
| jaroslav@112 | 200 |
<div id="player" style="position: absolute; left: 0; right: 0;"></div> |
| jaroslav@111 | 201 |
</div> |
| jaroslav@105 | 202 |
${bundle.BOARD_VIEW}
|
| jaroslav@100 | 203 |
<a href="/games/${doc.game.id.@id}?format=small">${bundle.BOARD_SMALL}</a>
|
| jaroslav@100 | 204 |
${bundle.BOARD_IMAGE}
|
| jaroslav@98 | 205 |
<a href="/games/${doc.game.id.@id}?format=text">${bundle.BOARD_TEXT}</a>
|
| jaroslav@95 | 206 |
</#if> |
| jaroslav@95 | 207 |
|
| jaroslav@100 | 208 |
<#macro printMove item> |
| jaroslav@100 | 209 |
<#if item.@index = doc.game.@currentMove> |
| jaroslav@100 | 210 |
<b>${item.@move}</b>
|
| jaroslav@100 | 211 |
<#else> |
| jaroslav@100 | 212 |
<a href="/games/${doc.game.id.@id}?move=${item.@index}">${item.@move}</a>
|
| jaroslav@100 | 213 |
</#if> |
| jaroslav@100 | 214 |
</#macro> |
| jaroslav@60 | 215 |
|
| jaroslav@100 | 216 |
<h3><a href="/games/${doc.game.id.@id}?move=0">${bundle.MOVES}</a></h3>
|
| jaroslav@60 | 217 |
|
| jaroslav@60 | 218 |
<table border="0"> |
| jaroslav@60 | 219 |
<thead> |
| jaroslav@60 | 220 |
<tr> |
| jaroslav@60 | 221 |
<th>${bundle.MOVENUMBER}</th>
|
| jaroslav@60 | 222 |
<th>${doc.game.id.@white}</th>
|
| jaroslav@60 | 223 |
<th>${doc.game.id.@black}</th>
|
| jaroslav@60 | 224 |
</tr> |
| jaroslav@60 | 225 |
</thead> |
| jaroslav@60 | 226 |
<tbody> |
| jaroslav@61 | 227 |
<#assign index = 0> |
| jaroslav@60 | 228 |
<#list doc.game.moves.* as item> |
| jaroslav@100 | 229 |
|
| jaroslav@60 | 230 |
<#if item.@index?number % 2 = 1> |
| jaroslav@61 | 231 |
<#assign index = index + 1> |
| jaroslav@100 | 232 |
<tr><td>${index}</td><td><@printMove item/></td>
|
| jaroslav@60 | 233 |
<#else> |
| jaroslav@100 | 234 |
<td><@printMove item/></td></tr> |
| jaroslav@60 | 235 |
</#if> |
| jaroslav@60 | 236 |
</#list> |
| jaroslav@60 | 237 |
</tbody> |
| jaroslav@60 | 238 |
</table> |
| jaroslav@115 | 239 |
|
| jaroslav@115 | 240 |
<h3><a href="/games/${doc.game.id.@id}?move=0">${bundle.TALK}</a></h3>
|
| jaroslav@115 | 241 |
|
| jaroslav@115 | 242 |
<ul> |
| jaroslav@115 | 243 |
<#list doc.game.moves.item.comment as item> |
| jaroslav@115 | 244 |
<li><b>${item.@who}</b>: ${item}</li>
|
| jaroslav@115 | 245 |
</#list> |
| jaroslav@115 | 246 |
</ul> |
| jaroslav@115 | 247 |
|
| jaroslav@115 | 248 |
<form action="/games/${doc.game.id.@id}/comment">
|
| jaroslav@115 | 249 |
<textarea rows="2" cols="80" name="comment"></textarea> |
| jaroslav@115 | 250 |
<input type="submit"/> |
| jaroslav@115 | 251 |
</form> |
| jaroslav@115 | 252 |
|
| jaroslav@88 | 253 |
<hr/> |
| jaroslav@88 | 254 |
${bundle("copyright", version)}
|
| jtulach@41 | 255 |
</body> |
| jtulach@41 | 256 |
</html> |