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