Preview of the player's move
authorJaroslav Tulach <jaroslav.tulach@apidesign.org>
Fri, 25 Sep 2009 14:16:30 +0200
changeset 1120ddeea5e9b36
parent 111 6f1b8bbab6fa
child 113 25b00d888853
Preview of the player's move
freemarkerdor/src/main/resources/cz/xelfi/quoridor/freemarkerdor/UI/Bundle.properties
freemarkerdor/src/main/resources/cz/xelfi/quoridor/freemarkerdor/UI/Bundle_cs.properties
freemarkerdor/src/main/resources/cz/xelfi/quoridor/freemarkerdor/UI/game.fmt
     1.1 --- a/freemarkerdor/src/main/resources/cz/xelfi/quoridor/freemarkerdor/UI/Bundle.properties	Wed Sep 23 17:29:41 2009 +0200
     1.2 +++ b/freemarkerdor/src/main/resources/cz/xelfi/quoridor/freemarkerdor/UI/Bundle.properties	Fri Sep 25 14:16:30 2009 +0200
     1.3 @@ -48,6 +48,10 @@
     1.4  RESIGN=Resign!
     1.5  H=Horizontal
     1.6  V=Vertical
     1.7 +N=North
     1.8 +S=South
     1.9 +W=West
    1.10 +E=East
    1.11  GAME=Game
    1.12  MOVENUMBER=#
    1.13  MOVES=Moves
     2.1 --- a/freemarkerdor/src/main/resources/cz/xelfi/quoridor/freemarkerdor/UI/Bundle_cs.properties	Wed Sep 23 17:29:41 2009 +0200
     2.2 +++ b/freemarkerdor/src/main/resources/cz/xelfi/quoridor/freemarkerdor/UI/Bundle_cs.properties	Fri Sep 25 14:16:30 2009 +0200
     2.3 @@ -52,6 +52,10 @@
     2.4  RESIGN=Vzd\u00E1t
     2.5  H=Horizont\u00E1ln\u011B
     2.6  V=Vertik\u00E1ln\u011B
     2.7 +N=Sever
     2.8 +S=Jih
     2.9 +W=Z\u00E1pad
    2.10 +E=V\u00FDchod
    2.11  GAME=Hra
    2.12  MOVENUMBER=Tah
    2.13  MOVES=Z\u00E1pis
     3.1 --- a/freemarkerdor/src/main/resources/cz/xelfi/quoridor/freemarkerdor/UI/game.fmt	Wed Sep 23 17:29:41 2009 +0200
     3.2 +++ b/freemarkerdor/src/main/resources/cz/xelfi/quoridor/freemarkerdor/UI/game.fmt	Fri Sep 25 14:16:30 2009 +0200
     3.3 @@ -35,7 +35,39 @@
     3.4              fenceDiv.style.backgroundColor = 'black';
     3.5              fenceDiv.style.visibility = 'visible';
     3.6           }
     3.7 +        function deltas(dir) {
     3.8 +            var r = new Object();
     3.9 +            r.x = 0;
    3.10 +            r.y = 0;
    3.11 +            if (dir == 'N') r.y = 1;
    3.12 +            if (dir == 'S') r.y = -1;
    3.13 +            if (dir == 'E') r.x = 1;
    3.14 +            if (dir == 'W') r.x = -1;
    3.15 +            return r;
    3.16 +        }
    3.17 +        function paintPlayer() {
    3.18 +            var fifth = fieldSize / 5;
    3.19 +            var m1 = deltas(document.getElementById("pdir1").value.charAt(0));
    3.20 +            var m2 = deltas(document.getElementById("pdir2").value.charAt(0));
    3.21 +
    3.22 +            var pos = {
    3.23 +                x : m1.x + m2.x + playerPos.x,
    3.24 +                y : m1.y + m2.y + playerPos.y
    3.25 +            }
    3.26 +            var fenceDiv = document.getElementById("player");
    3.27 +            fenceDiv.style.position="absolute";
    3.28 +            fenceDiv.style.left = (pos.x * fieldSize + fifth) +"px";
    3.29 +            fenceDiv.style.top  = ((8 - pos.y) * fieldSize + fifth) +"px";
    3.30 +            fenceDiv.style.width = (fieldSize - fifth * 2) +"px";
    3.31 +            fenceDiv.style.height = (fieldSize - fifth * 2) +"px";
    3.32 +            fenceDiv.style.backgroundColor = 'black';
    3.33 +            fenceDiv.style.visibility = 'visible';
    3.34 +         }
    3.35           var fieldSize=<#if format?? && format="small">20<#else>50</#if>;
    3.36 +         var playerPos = {
    3.37 +             x: ${board.currentPlayer.column}, 
    3.38 +             y: ${board.currentPlayer.row}
    3.39 +        };
    3.40      </script>
    3.41    </head>
    3.42    <body>
    3.43 @@ -116,18 +148,18 @@
    3.44            </form>
    3.45            <form action="/games/${doc.game.id.@id}/move">
    3.46                <input type="hidden" name="type" value="move" readonly="readonly"/>
    3.47 -              <select name="direction">
    3.48 -                  <option>E</option>
    3.49 -                  <option>W</option>
    3.50 -                  <option <#if doc.game.id.@status = "whiteMove">selected="true"</#if>>N</option>
    3.51 -                  <option <#if doc.game.id.@status = "blackMove">selected="true"</#if>>S</option>
    3.52 +              <select id="pdir1" name="direction" onchange="paintPlayer()">
    3.53 +                  <option value="E">${bundle.E}</option>
    3.54 +                  <option value="W">${bundle.W}</option>
    3.55 +                  <option value ="N" <#if doc.game.id.@status = "whiteMove">selected="true"</#if>>${bundle.N}</option>
    3.56 +                  <option value ="S" <#if doc.game.id.@status = "blackMove">selected="true"</#if>>${bundle.S}</option>
    3.57                </select>
    3.58 -              <select name="direction-next">
    3.59 +              <select id="pdir2" name="direction-next" onchange="paintPlayer()">
    3.60                    <option></option>
    3.61 -                  <option>E</option>
    3.62 -                  <option>W</option>
    3.63 -                  <option>N</option>
    3.64 -                  <option>S</option>
    3.65 +                  <option value="E">${bundle.E}</option>
    3.66 +                  <option value="W">${bundle.W}</option>
    3.67 +                  <option value="N">${bundle.N}</option>
    3.68 +                  <option value="S">${bundle.S}</option>
    3.69                </select>
    3.70                <input type="submit" value="${bundle.MOVE}" />
    3.71            </form>
    3.72 @@ -146,12 +178,13 @@
    3.73        <#elseif format?? && format = "small">
    3.74          <p/>
    3.75          <div style="position: relative; height:180px;">
    3.76 -            <div id="fence"></div>
    3.77              <img style="position: absolute; left: 0; right: 0;"
    3.78                   width="180" height="180 "
    3.79                   src="/games/${doc.game.id.@id}.png?fieldSize=20<#if doc.game.@currentMove??>&move=${doc.game.@currentMove}</#if>"
    3.80                   alt="${bundle.BOARD_TEXT}"
    3.81               >
    3.82 +            <div id="fence" style="position: absolute; left: 0; right: 0;"></div>
    3.83 +            <div id="player" style="position: absolute; left: 0; right: 0;"></div>
    3.84          </div>
    3.85          ${bundle.BOARD_VIEW}
    3.86          ${bundle.BOARD_SMALL}
    3.87 @@ -159,12 +192,13 @@
    3.88          <a href="/games/${doc.game.id.@id}?format=text">${bundle.BOARD_TEXT}</a>
    3.89        <#else>
    3.90          <div style="position: relative; height:450px;">
    3.91 -            <div id="fence"></div>
    3.92              <img style="position: absolute; left: 0; right: 0;"
    3.93                   width="450" height="450"
    3.94                   src="/games/${doc.game.id.@id}.png<#if doc.game.@currentMove??>?move=${doc.game.@currentMove}</#if>"
    3.95                   alt="${bundle.BOARD_TEXT}"
    3.96               >
    3.97 +            <div id="fence" style="position: absolute; left: 0; right: 0;"></div>
    3.98 +            <div id="player" style="position: absolute; left: 0; right: 0;"></div>
    3.99          </div>
   3.100          ${bundle.BOARD_VIEW}
   3.101          <a href="/games/${doc.game.id.@id}?format=small">${bundle.BOARD_SMALL}</a>