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>
Thu, 07 Jan 2010 22:34:17 +0100
branchstatistics-and-elo
changeset 178 4b78d4f028b3
parent 175 4f0795e7fc03
permissions -rw-r--r--
Initial version of statistics and ELO rating. Donated by Martin Rexa 
     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     <#if format?? && format="small">

    16         <meta name="viewport" content="width = 200" />

    17     <#else>

    18         <meta name="viewport" content="width = 460" />

    19     </#if>

    20     <script type="text/javascript">

    21         function paintFence() {

    22             var fifth = fieldSize / 10;

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

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

    25             var dx = 0;

    26             var dy = 0;

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

    28                dx = fieldSize - 2 * fifth;

    29                dy = fifth / 2;

    30             } else {

    31                dx = fifth / 2;

    32                dy = fieldSize - 2 * fifth;

    33             }

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

    35             fenceDiv.style.position="absolute";

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

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

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

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

    40             fenceDiv.style.backgroundColor = 'black';

    41             fenceDiv.style.visibility = 'visible';

    42          }

    43         function deltas(dir) {

    44             var r = new Object();

    45             r.x = 0;

    46             r.y = 0;

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

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

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

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

    51             return r;

    52         }

    53         <#if board.currentPlayer??>

    54         function paintPlayer() {

    55             var fifth = fieldSize / 5;

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

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

    58 

    59             var pos = {

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

    61                 y : m1.y + m2.y + playerPos.y

    62             }

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

    64             fenceDiv.style.position="absolute";

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

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

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

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

    69             fenceDiv.style.backgroundColor = 'black';

    70             fenceDiv.style.visibility = 'visible';

    71          }

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

    73          var playerPos = {

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

    75              y: ${board.currentPlayer.row}

    76          };

    77          <#else>

    78          function paintPlayer() {

    79          }

    80          </#if>

    81     </script>

    82   </head>

    83   <body bgcolor="white">

    84       <h3><a href="/">${bundle.TITLE_PLAIN}</a></h3>

    85 

    86       <#macro status who>

    87           ${who?string}

    88           <#if who = doc.game.id.@white>

    89               <#if doc.game.id.@status = "whiteWon" >

    90                 - ${bundle.HAS_WON}

    91               <#elseif doc.game.id.@status = "whiteMove" && who = doc.game.@currentPlayer>

    92                 - ${bundle.TO_MOVE}

    93               </#if>

    94           </#if>

    95           <#if who = doc.game.id.@black>

    96               <#if doc.game.id.@status = "blackWon" >

    97                 - ${bundle.HAS_WON}

    98               <#elseif doc.game.id.@status = "blackMove" && who = doc.game.@currentPlayer>

    99                 - ${bundle.TO_MOVE}

   100               </#if>

   101           </#if>

   102       </#macro>

   103 

   104 

   105       <p>

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

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

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

   109       </p>

   110 

   111       <p>

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

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

   114       <#else>

   115         ${bundle.PREVIOUS}

   116       </#if>

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

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

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

   120       <#else>

   121         ${bundle.NEXT}

   122       </#if>

   123       </p>

   124       

   125       <#if message?? >

   126         <p>

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

   128         </p>

   129       </#if>

   130 

   131       <#assign play = false>

   132 

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

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

   135       </#if>

   136       <#if  play>

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

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

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

   140                   <option value="A">A</option>

   141                   <option value="B">B</option>

   142                   <option value="C">C</option>

   143                   <option value="D">D</option>

   144                   <option value="E">E</option>

   145                   <option value="F">F</option>

   146                   <option value="G">G</option>

   147                   <option value="H">H</option>

   148               </select>

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

   150                   <option value="1">1</option>

   151                   <option value="2">2</option>

   152                   <option value="3">3</option>

   153                   <option value="4">4</option>

   154                   <option value="5">5</option>

   155                   <option value="6">6</option>

   156                   <option value="7">7</option>

   157                   <option value="8">8</option>

   158               </select>

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

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

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

   162               </select>

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

   164           </form>

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

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

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

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

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

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

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

   172               </select>

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

   174                   <option></option>

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

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

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

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

   179               </select>

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

   181           </form>

   182       </#if>

   183       <p>

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

   185         <pre>${textPicture}</pre>

   186         ${bundle.BOARD_VIEW}

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

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

   189         ${bundle.BOARD_TEXT}

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

   191         <p/>

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

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

   194                  width="180" height="180 "

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

   196                  alt="${bundle.BOARD_TEXT}"

   197              >

   198             <div id="fence" style="position: absolute; visibility: hidden; font-size: 0px;line-height:0px;"></div>

   199             <div id="player" style="position: absolute; visibility: hidden; font-size: 0px;line-height:0px;"></div>

   200         </div>

   201         ${bundle.BOARD_VIEW}

   202         ${bundle.BOARD_SMALL}

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

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

   205       <#else>

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

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

   208                  width="450" height="450"

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

   210                  alt="${bundle.BOARD_TEXT}"

   211              >

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

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

   214         </div>

   215         ${bundle.BOARD_VIEW}

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

   217         ${bundle.BOARD_IMAGE}

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

   219       </#if>

   220       <p>

   221       <#if  play>

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

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

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

   225           </form>

   226       </#if>

   227 

   228       <#macro printMove item>

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

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

   231         <#else>

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

   233         </#if>

   234       </#macro>

   235       <#if (bCode??) >

   236         <h3><a href="/openings/${bCode}">${bundle.OPENINGS}</a></h3>

   237       </#if>

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

   239 

   240       <table border="0">

   241           <thead>

   242               <tr>

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

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

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

   246               </tr>

   247           </thead>

   248           <tbody>

   249               <#assign index = 0>

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

   251                 

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

   253                     <#assign index = index + 1>

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

   255                 <#else>

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

   257                 </#if>

   258               </#list>

   259           </tbody>

   260       </table>

   261 

   262       <h3>${bundle.TALK}</h3>

   263 

   264       <ul>

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

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

   267       </#list>

   268       </ul>

   269 

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

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

   272           <input type="submit"/>

   273       </form>

   274 

   275       <hr/>

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

   277   </body>

   278 </html>
hg/quoridor