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>
Sun, 25 Oct 2009 14:51:37 +0100
changeset 133 d83dc9d624e8
parent 115 6a80463a74c0
child 136 73b18c815499
child 137 4e5cf409d1aa
permissions -rw-r--r--
Don't refresh when the game is over, title is the link to list of all games 
     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 && doc.game.id.@status?index_of("Won") != -1>

    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         function deltas(dir) {

    39             var r = new Object();

    40             r.x = 0;

    41             r.y = 0;

    42             if (dir == 'N') r.y = 1;

    43             if (dir == 'S') r.y = -1;

    44             if (dir == 'E') r.x = 1;

    45             if (dir == 'W') r.x = -1;

    46             return r;

    47         }

    48         function paintPlayer() {

    49             var fifth = fieldSize / 5;

    50             var m1 = deltas(document.getElementById("pdir1").value.charAt(0));

    51             var m2 = deltas(document.getElementById("pdir2").value.charAt(0));

    52 

    53             var pos = {

    54                 x : m1.x + m2.x + playerPos.x,

    55                 y : m1.y + m2.y + playerPos.y

    56             }

    57             var fenceDiv = document.getElementById("player");

    58             fenceDiv.style.position="absolute";

    59             fenceDiv.style.left = (pos.x * fieldSize + fifth) +"px";

    60             fenceDiv.style.top  = ((8 - pos.y) * fieldSize + fifth) +"px";

    61             fenceDiv.style.width = (fieldSize - fifth * 2) +"px";

    62             fenceDiv.style.height = (fieldSize - fifth * 2) +"px";

    63             fenceDiv.style.backgroundColor = 'black';

    64             fenceDiv.style.visibility = 'visible';

    65          }

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

    67          var playerPos = {

    68              x: ${board.currentPlayer.column}, 

    69              y: ${board.currentPlayer.row}

    70         };

    71     </script>

    72   </head>

    73   <body>

    74       <h1><a href="/">${bundle.TITLE_PLAIN}</a></h1>

    75 

    76       <#macro status who>

    77           ${who?string}

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

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

    80                 - ${bundle.HAS_WON}

    81               <#else>

    82                 - ${bundle.TO_MOVE}

    83               </#if>

    84           </#if>

    85       </#macro>

    86 

    87 

    88       <p>

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

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

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

    92       </p>

    93 

    94       <p>

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

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

    97       <#else>

    98         ${bundle.PREVIOUS}

    99       </#if>

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

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

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

   103       <#else>

   104         ${bundle.NEXT}

   105       </#if>

   106       </p>

   107       

   108       <#if message?? >

   109         <p>

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

   111         </p>

   112       </#if>

   113 

   114       <#assign play = false>

   115 

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

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

   118       </#if>

   119       <#if  play>

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

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

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

   123                   <option>A</option>

   124                   <option>B</option>

   125                   <option>C</option>

   126                   <option>D</option>

   127                   <option>E</option>

   128                   <option>F</option>

   129                   <option>G</option>

   130                   <option>H</option>

   131               </select>

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

   133                   <option>1</option>

   134                   <option>2</option>

   135                   <option>3</option>

   136                   <option>4</option>

   137                   <option>5</option>

   138                   <option>6</option>

   139                   <option>7</option>

   140                   <option>8</option>

   141               </select>

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

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

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

   145               </select>

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

   147           </form>

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

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

   150               <select id="pdir1" name="direction" onchange="paintPlayer()">

   151                   <option value="E">${bundle.E}</option>

   152                   <option value="W">${bundle.W}</option>

   153                   <option value ="N" <#if doc.game.id.@status = "whiteMove">selected="true"</#if>>${bundle.N}</option>

   154                   <option value ="S" <#if doc.game.id.@status = "blackMove">selected="true"</#if>>${bundle.S}</option>

   155               </select>

   156               <select id="pdir2" name="direction-next" onchange="paintPlayer()">

   157                   <option></option>

   158                   <option value="E">${bundle.E}</option>

   159                   <option value="W">${bundle.W}</option>

   160                   <option value="N">${bundle.N}</option>

   161                   <option value="S">${bundle.S}</option>

   162               </select>

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

   164           </form>

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

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

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

   168           </form>

   169       </#if>

   170       <p>

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

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

   173         ${bundle.BOARD_VIEW}

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

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

   176         ${bundle.BOARD_TEXT}

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

   178         <p/>

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

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

   181                  width="180" height="180 "

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

   183                  alt="${bundle.BOARD_TEXT}"

   184              >

   185             <div id="fence" style="position: absolute; left: 0; right: 0;"></div>

   186             <div id="player" style="position: absolute; left: 0; right: 0;"></div>

   187         </div>

   188         ${bundle.BOARD_VIEW}

   189         ${bundle.BOARD_SMALL}

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

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

   192       <#else>

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

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

   195                  width="450" height="450"

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

   197                  alt="${bundle.BOARD_TEXT}"

   198              >

   199             <div id="fence" style="position: absolute; left: 0; right: 0;"></div>

   200             <div id="player" style="position: absolute; left: 0; right: 0;"></div>

   201         </div>

   202         ${bundle.BOARD_VIEW}

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

   204         ${bundle.BOARD_IMAGE}

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

   206       </#if>

   207 

   208       <#macro printMove item>

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

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

   211         <#else>

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

   213         </#if>

   214       </#macro>

   215 

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

   217 

   218       <table border="0">

   219           <thead>

   220               <tr>

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

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

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

   224               </tr>

   225           </thead>

   226           <tbody>

   227               <#assign index = 0>

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

   229                 

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

   231                     <#assign index = index + 1>

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

   233                 <#else>

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

   235                 </#if>

   236               </#list>

   237           </tbody>

   238       </table>

   239 

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

   241 

   242       <ul>

   243       <#list doc.game.moves.item.comment as item>

   244         <li><b>${item.@who}</b>: ${item}</li>

   245       </#list>

   246       </ul>

   247 

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

   249           <textarea rows="2" cols="80" name="comment"></textarea>

   250           <input type="submit"/>

   251       </form>

   252 

   253       <hr/>

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

   255   </body>

   256 </html>
hg/quoridor