Mercurialhg/quoridor / file revision
summary | shortlog | changelog | graph | tags | bookmarks | branches | files | changeset | file | latest | revisions | annotate | diff | raw | help
freemarkerdor/src/main/resources/cz/xelfi/quoridor/freemarkerdor/UI/game.fmt
author Jaroslav Tulach <jaroslav.tulach@apidesign.org>
Wed, 23 Sep 2009 17:29:41 +0200
changeset 111 6f1b8bbab6fa
parent 109 d2140ee1c682
child 112 0ddeea5e9b36
permissions -rw-r--r--
Using JavaScript to show the location of a fence before it is placed 
     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

     2 <html>

     3   <head>

     4     <title>

     5       <#if user = doc.game.@currentPlayer>

     6          ${bundle.YourTurn}

     7       <#else>

     8          ${bundle("Waiting", doc.game.@currentPlayer?string)}

     9       </#if>

    10     </title>

    11     <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    12     <#if user != doc.game.@currentPlayer >

    13         <meta http-equiv="REFRESH" content="60;URL=/games/${doc.game.id.@id}">

    14     </#if>

    15     <script type="text/javascript">

    16         function paintFence() {

    17             var fifth = fieldSize / 10;

    18             var x = (document.getElementById("column").value.charCodeAt(0) - 64) * fieldSize;

    19             var y = fieldSize * 9 - (document.getElementById("row").value) * fieldSize;

    20             var dx = 0;

    21             var dy = 0;

    22             if (document.getElementById("direction").value.charAt(0) == 'H') {

    23                dx = fieldSize - 2 * fifth;

    24                dy = fifth / 2;

    25             } else {

    26                dx = fifth / 2;

    27                dy = fieldSize - 2 * fifth;

    28             }

    29             var fenceDiv = document.getElementById("fence");

    30             fenceDiv.style.position="absolute";

    31             fenceDiv.style.left = (x - dx) +"px";

    32             fenceDiv.style.top  = (y - dy) +"px";

    33             fenceDiv.style.width = (dx * 2) +"px";

    34             fenceDiv.style.height = (dy * 2) +"px";

    35             fenceDiv.style.backgroundColor = 'black';

    36             fenceDiv.style.visibility = 'visible';

    37          }

    38          var fieldSize=<#if format?? && format="small">20<#else>50</#if>;

    39     </script>

    40   </head>

    41   <body>

    42       <h1><a href="/games/${doc.game.id.@id}">${bundle.GAME}</a></h1>

    43 

    44       <#macro status who>

    45           ${who?string}

    46           <#if who = doc.game.@currentPlayer>

    47               <#if doc.game.id.@status = "whiteWon" || doc.game.id.@status = "blackWon" >

    48                 - ${bundle.HAS_WON}

    49               <#else>

    50                 - ${bundle.TO_MOVE}

    51               </#if>

    52           </#if>

    53       </#macro>

    54 

    55 

    56       <p>

    57           <b>${bundle.MOVENUMBER}: </b> ${(doc.game.@currentMove?number / 2 + 1)?string("0")}<br>

    58           <b>${bundle.WHITE}:</b> <@status doc.game.id.@white/> ${bundle("FENCES_LEFT", board.players[0].fences)}<br>

    59           <b>${bundle.BLACK}:</b> <@status doc.game.id.@black/> ${bundle("FENCES_LEFT", board.players[1].fences)}<br>

    60       </p>

    61 

    62       <p>

    63       <a href="/">${bundle.ROOT}</a>

    64       <#if (doc.game.@currentMove?number > 0)>

    65         <a href="/games/${doc.game.id.@id}?move=${doc.game.@currentMove?number - 1}">${bundle.PREVIOUS}</a>

    66       <#else>

    67         ${bundle.PREVIOUS}

    68       </#if>

    69       <a href="/games/${doc.game.id.@id}"">${bundle.LATEST}</a>

    70       <#if (doc.game.@currentMove?number < doc.game.moves.*?size)>

    71         <a href="/games/${doc.game.id.@id}?move=${doc.game.@currentMove?number + 1}">${bundle.NEXT}</a>

    72       <#else>

    73         ${bundle.NEXT}

    74       </#if>

    75       </p>

    76       

    77       <#if message?? >

    78         <p>

    79             <span style="color: red">${message}</span>

    80         </p>

    81       </#if>

    82 

    83       <#assign play = false>

    84 

    85       <#if doc.game.id.@status = "whiteMove" || doc.game.id.@status = "blackMove" >

    86           <#assign play = user = doc.game.@currentPlayer>

    87       </#if>

    88       <#if  play>

    89           <form action="/games/${doc.game.id.@id}/move">

    90               <input type="hidden" name="type" value="fence" readonly="readonly"/>

    91               <select name="column" id="column" onchange="paintFence()">

    92                   <option>A</option>

    93                   <option>B</option>

    94                   <option>C</option>

    95                   <option>D</option>

    96                   <option>E</option>

    97                   <option>F</option>

    98                   <option>G</option>

    99                   <option>H</option>

   100               </select>

   101               <select name="row" id="row" onchange="paintFence()">

   102                   <option>1</option>

   103                   <option>2</option>

   104                   <option>3</option>

   105                   <option>4</option>

   106                   <option>5</option>

   107                   <option>6</option>

   108                   <option>7</option>

   109                   <option>8</option>

   110               </select>

   111               <select name="direction" id="direction" onchange="paintFence()">

   112                   <option value="H">${bundle.H}</option>

   113                   <option value="V">${bundle.V}</option>

   114               </select>

   115               <input type="submit" value="${bundle.PLACE}" />

   116           </form>

   117           <form action="/games/${doc.game.id.@id}/move">

   118               <input type="hidden" name="type" value="move" readonly="readonly"/>

   119               <select name="direction">

   120                   <option>E</option>

   121                   <option>W</option>

   122                   <option <#if doc.game.id.@status = "whiteMove">selected="true"</#if>>N</option>

   123                   <option <#if doc.game.id.@status = "blackMove">selected="true"</#if>>S</option>

   124               </select>

   125               <select name="direction-next">

   126                   <option></option>

   127                   <option>E</option>

   128                   <option>W</option>

   129                   <option>N</option>

   130                   <option>S</option>

   131               </select>

   132               <input type="submit" value="${bundle.MOVE}" />

   133           </form>

   134           <form action="/games/${doc.game.id.@id}/move">

   135               <input type="hidden" name="type" value="resign" readonly="readonly"/>

   136               <input type="submit" value="${bundle.RESIGN}" />

   137           </form>

   138       </#if>

   139       <p>

   140       <#if format?? && format = "text">

   141         <pre>${doc.game.board}</pre>

   142         ${bundle.BOARD_VIEW}

   143         <a href="/games/${doc.game.id.@id}?format=small">${bundle.BOARD_SMALL}</a>

   144         <a href="/games/${doc.game.id.@id}?format=image">${bundle.BOARD_IMAGE}</a>

   145         ${bundle.BOARD_TEXT}

   146       <#elseif format?? && format = "small">

   147         <p/>

   148         <div style="position: relative; height:180px;">

   149             <div id="fence"></div>

   150             <img style="position: absolute; left: 0; right: 0;"

   151                  width="180" height="180 "

   152                  src="/games/${doc.game.id.@id}.png?fieldSize=20<#if doc.game.@currentMove??>&move=${doc.game.@currentMove}</#if>"

   153                  alt="${bundle.BOARD_TEXT}"

   154              >

   155         </div>

   156         ${bundle.BOARD_VIEW}

   157         ${bundle.BOARD_SMALL}

   158         <a href="/games/${doc.game.id.@id}?format=image">${bundle.BOARD_IMAGE}</a>

   159         <a href="/games/${doc.game.id.@id}?format=text">${bundle.BOARD_TEXT}</a>

   160       <#else>

   161         <div style="position: relative; height:450px;">

   162             <div id="fence"></div>

   163             <img style="position: absolute; left: 0; right: 0;"

   164                  width="450" height="450"

   165                  src="/games/${doc.game.id.@id}.png<#if doc.game.@currentMove??>?move=${doc.game.@currentMove}</#if>"

   166                  alt="${bundle.BOARD_TEXT}"

   167              >

   168         </div>

   169         ${bundle.BOARD_VIEW}

   170         <a href="/games/${doc.game.id.@id}?format=small">${bundle.BOARD_SMALL}</a>

   171         ${bundle.BOARD_IMAGE}

   172         <a href="/games/${doc.game.id.@id}?format=text">${bundle.BOARD_TEXT}</a>

   173       </#if>

   174 

   175       <#macro printMove item>

   176         <#if item.@index = doc.game.@currentMove>

   177             <b>${item.@move}</b>

   178         <#else>

   179             <a href="/games/${doc.game.id.@id}?move=${item.@index}">${item.@move}</a>

   180         </#if>

   181       </#macro>

   182 

   183       <h3><a href="/games/${doc.game.id.@id}?move=0">${bundle.MOVES}</a></h3>

   184 

   185       <table border="0">

   186           <thead>

   187               <tr>

   188                   <th>${bundle.MOVENUMBER}</th>

   189                   <th>${doc.game.id.@white}</th>

   190                   <th>${doc.game.id.@black}</th>

   191               </tr>

   192           </thead>

   193           <tbody>

   194               <#assign index = 0>

   195               <#list doc.game.moves.* as item>

   196                 

   197                 <#if item.@index?number % 2 = 1>

   198                     <#assign index = index + 1>

   199                     <tr><td>${index}</td><td><@printMove item/></td>

   200                 <#else>

   201                     <td><@printMove item/></td></tr>

   202                 </#if>

   203               </#list>

   204           </tbody>

   205       </table>

   206       <hr/>

   207       ${bundle("copyright", version)}

   208   </body>

   209 </html>
hg/quoridor