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