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