1.1 --- a/freemarkerdor/src/main/resources/cz/xelfi/quoridor/freemarkerdor/UI/game.fmt Mon Sep 21 12:08:46 2009 +0200
1.2 +++ b/freemarkerdor/src/main/resources/cz/xelfi/quoridor/freemarkerdor/UI/game.fmt Wed Sep 23 17:29:41 2009 +0200
1.3 @@ -12,6 +12,31 @@
1.4 <#if user != doc.game.@currentPlayer >
1.5 <meta http-equiv="REFRESH" content="60;URL=/games/${doc.game.id.@id}">
1.6 </#if>
1.7 + <script type="text/javascript">
1.8 + function paintFence() {
1.9 + var fifth = fieldSize / 10;
1.10 + var x = (document.getElementById("column").value.charCodeAt(0) - 64) * fieldSize;
1.11 + var y = fieldSize * 9 - (document.getElementById("row").value) * fieldSize;
1.12 + var dx = 0;
1.13 + var dy = 0;
1.14 + if (document.getElementById("direction").value.charAt(0) == 'H') {
1.15 + dx = fieldSize - 2 * fifth;
1.16 + dy = fifth / 2;
1.17 + } else {
1.18 + dx = fifth / 2;
1.19 + dy = fieldSize - 2 * fifth;
1.20 + }
1.21 + var fenceDiv = document.getElementById("fence");
1.22 + fenceDiv.style.position="absolute";
1.23 + fenceDiv.style.left = (x - dx) +"px";
1.24 + fenceDiv.style.top = (y - dy) +"px";
1.25 + fenceDiv.style.width = (dx * 2) +"px";
1.26 + fenceDiv.style.height = (dy * 2) +"px";
1.27 + fenceDiv.style.backgroundColor = 'black';
1.28 + fenceDiv.style.visibility = 'visible';
1.29 + }
1.30 + var fieldSize=<#if format?? && format="small">20<#else>50</#if>;
1.31 + </script>
1.32 </head>
1.33 <body>
1.34 <h1><a href="/games/${doc.game.id.@id}">${bundle.GAME}</a></h1>
1.35 @@ -63,7 +88,7 @@
1.36 <#if play>
1.37 <form action="/games/${doc.game.id.@id}/move">
1.38 <input type="hidden" name="type" value="fence" readonly="readonly"/>
1.39 - <select name="column">
1.40 + <select name="column" id="column" onchange="paintFence()">
1.41 <option>A</option>
1.42 <option>B</option>
1.43 <option>C</option>
1.44 @@ -73,7 +98,7 @@
1.45 <option>G</option>
1.46 <option>H</option>
1.47 </select>
1.48 - <select name="row">
1.49 + <select name="row" id="row" onchange="paintFence()">
1.50 <option>1</option>
1.51 <option>2</option>
1.52 <option>3</option>
1.53 @@ -83,9 +108,9 @@
1.54 <option>7</option>
1.55 <option>8</option>
1.56 </select>
1.57 - <select name="direction">
1.58 - <option>${bundle.H}</option>
1.59 - <option>${bundle.V}</option>
1.60 + <select name="direction" id="direction" onchange="paintFence()">
1.61 + <option value="H">${bundle.H}</option>
1.62 + <option value="V">${bundle.V}</option>
1.63 </select>
1.64 <input type="submit" value="${bundle.PLACE}" />
1.65 </form>
1.66 @@ -119,17 +144,28 @@
1.67 <a href="/games/${doc.game.id.@id}?format=image">${bundle.BOARD_IMAGE}</a>
1.68 ${bundle.BOARD_TEXT}
1.69 <#elseif format?? && format = "small">
1.70 - <p>
1.71 - <img src="/games/${doc.game.id.@id}.png?fieldSize=20<#if doc.game.@currentMove??>&move=${doc.game.@currentMove}</#if>" alt="${bundle.BOARD_TEXT}">
1.72 - </p>
1.73 + <p/>
1.74 + <div style="position: relative; height:180px;">
1.75 + <div id="fence"></div>
1.76 + <img style="position: absolute; left: 0; right: 0;"
1.77 + width="180" height="180 "
1.78 + src="/games/${doc.game.id.@id}.png?fieldSize=20<#if doc.game.@currentMove??>&move=${doc.game.@currentMove}</#if>"
1.79 + alt="${bundle.BOARD_TEXT}"
1.80 + >
1.81 + </div>
1.82 ${bundle.BOARD_VIEW}
1.83 ${bundle.BOARD_SMALL}
1.84 <a href="/games/${doc.game.id.@id}?format=image">${bundle.BOARD_IMAGE}</a>
1.85 <a href="/games/${doc.game.id.@id}?format=text">${bundle.BOARD_TEXT}</a>
1.86 <#else>
1.87 - <p>
1.88 - <img src="/games/${doc.game.id.@id}.png<#if doc.game.@currentMove??>?move=${doc.game.@currentMove}</#if>" alt="${bundle.BOARD_TEXT}">
1.89 - </p>
1.90 + <div style="position: relative; height:450px;">
1.91 + <div id="fence"></div>
1.92 + <img style="position: absolute; left: 0; right: 0;"
1.93 + width="450" height="450"
1.94 + src="/games/${doc.game.id.@id}.png<#if doc.game.@currentMove??>?move=${doc.game.@currentMove}</#if>"
1.95 + alt="${bundle.BOARD_TEXT}"
1.96 + >
1.97 + </div>
1.98 ${bundle.BOARD_VIEW}
1.99 <a href="/games/${doc.game.id.@id}?format=small">${bundle.BOARD_SMALL}</a>
1.100 ${bundle.BOARD_IMAGE}