Using JavaScript to show the location of a fence before it is placed
authorJaroslav Tulach <jaroslav.tulach@apidesign.org>
Wed, 23 Sep 2009 17:29:41 +0200
changeset 1116f1b8bbab6fa
parent 110 9c989997d6bb
child 112 0ddeea5e9b36
Using JavaScript to show the location of a fence before it is placed
freemarkerdor/pom.xml
freemarkerdor/src/main/resources/cz/xelfi/quoridor/freemarkerdor/UI/game.fmt
     1.1 --- a/freemarkerdor/pom.xml	Wed Sep 23 16:30:00 2009 +0200
     1.2 +++ b/freemarkerdor/pom.xml	Wed Sep 23 17:29:41 2009 +0200
     1.3 @@ -10,7 +10,7 @@
     1.4    <groupId>org.apidesign</groupId>
     1.5    <artifactId>freemarkerdor</artifactId>
     1.6    <name>freemarkerdor</name>
     1.7 -  <version>1.20</version>
     1.8 +  <version>1.25</version>
     1.9    <url>http://maven.apache.org</url>
    1.10    <dependencies>
    1.11      <dependency>
     2.1 --- a/freemarkerdor/src/main/resources/cz/xelfi/quoridor/freemarkerdor/UI/game.fmt	Wed Sep 23 16:30:00 2009 +0200
     2.2 +++ b/freemarkerdor/src/main/resources/cz/xelfi/quoridor/freemarkerdor/UI/game.fmt	Wed Sep 23 17:29:41 2009 +0200
     2.3 @@ -12,6 +12,31 @@
     2.4      <#if user != doc.game.@currentPlayer >
     2.5          <meta http-equiv="REFRESH" content="60;URL=/games/${doc.game.id.@id}">
     2.6      </#if>
     2.7 +    <script type="text/javascript">
     2.8 +        function paintFence() {
     2.9 +            var fifth = fieldSize / 10;
    2.10 +            var x = (document.getElementById("column").value.charCodeAt(0) - 64) * fieldSize;
    2.11 +            var y = fieldSize * 9 - (document.getElementById("row").value) * fieldSize;
    2.12 +            var dx = 0;
    2.13 +            var dy = 0;
    2.14 +            if (document.getElementById("direction").value.charAt(0) == 'H') {
    2.15 +               dx = fieldSize - 2 * fifth;
    2.16 +               dy = fifth / 2;
    2.17 +            } else {
    2.18 +               dx = fifth / 2;
    2.19 +               dy = fieldSize - 2 * fifth;
    2.20 +            }
    2.21 +            var fenceDiv = document.getElementById("fence");
    2.22 +            fenceDiv.style.position="absolute";
    2.23 +            fenceDiv.style.left = (x - dx) +"px";
    2.24 +            fenceDiv.style.top  = (y - dy) +"px";
    2.25 +            fenceDiv.style.width = (dx * 2) +"px";
    2.26 +            fenceDiv.style.height = (dy * 2) +"px";
    2.27 +            fenceDiv.style.backgroundColor = 'black';
    2.28 +            fenceDiv.style.visibility = 'visible';
    2.29 +         }
    2.30 +         var fieldSize=<#if format?? && format="small">20<#else>50</#if>;
    2.31 +    </script>
    2.32    </head>
    2.33    <body>
    2.34        <h1><a href="/games/${doc.game.id.@id}">${bundle.GAME}</a></h1>
    2.35 @@ -63,7 +88,7 @@
    2.36        <#if  play>
    2.37            <form action="/games/${doc.game.id.@id}/move">
    2.38                <input type="hidden" name="type" value="fence" readonly="readonly"/>
    2.39 -              <select name="column">
    2.40 +              <select name="column" id="column" onchange="paintFence()">
    2.41                    <option>A</option>
    2.42                    <option>B</option>
    2.43                    <option>C</option>
    2.44 @@ -73,7 +98,7 @@
    2.45                    <option>G</option>
    2.46                    <option>H</option>
    2.47                </select>
    2.48 -              <select name="row">
    2.49 +              <select name="row" id="row" onchange="paintFence()">
    2.50                    <option>1</option>
    2.51                    <option>2</option>
    2.52                    <option>3</option>
    2.53 @@ -83,9 +108,9 @@
    2.54                    <option>7</option>
    2.55                    <option>8</option>
    2.56                </select>
    2.57 -              <select name="direction">
    2.58 -                  <option>${bundle.H}</option>
    2.59 -                  <option>${bundle.V}</option>
    2.60 +              <select name="direction" id="direction" onchange="paintFence()">
    2.61 +                  <option value="H">${bundle.H}</option>
    2.62 +                  <option value="V">${bundle.V}</option>
    2.63                </select>
    2.64                <input type="submit" value="${bundle.PLACE}" />
    2.65            </form>
    2.66 @@ -119,17 +144,28 @@
    2.67          <a href="/games/${doc.game.id.@id}?format=image">${bundle.BOARD_IMAGE}</a>
    2.68          ${bundle.BOARD_TEXT}
    2.69        <#elseif format?? && format = "small">
    2.70 -        <p>
    2.71 -            <img src="/games/${doc.game.id.@id}.png?fieldSize=20<#if doc.game.@currentMove??>&move=${doc.game.@currentMove}</#if>" alt="${bundle.BOARD_TEXT}">
    2.72 -        </p>
    2.73 +        <p/>
    2.74 +        <div style="position: relative; height:180px;">
    2.75 +            <div id="fence"></div>
    2.76 +            <img style="position: absolute; left: 0; right: 0;"
    2.77 +                 width="180" height="180 "
    2.78 +                 src="/games/${doc.game.id.@id}.png?fieldSize=20<#if doc.game.@currentMove??>&move=${doc.game.@currentMove}</#if>"
    2.79 +                 alt="${bundle.BOARD_TEXT}"
    2.80 +             >
    2.81 +        </div>
    2.82          ${bundle.BOARD_VIEW}
    2.83          ${bundle.BOARD_SMALL}
    2.84          <a href="/games/${doc.game.id.@id}?format=image">${bundle.BOARD_IMAGE}</a>
    2.85          <a href="/games/${doc.game.id.@id}?format=text">${bundle.BOARD_TEXT}</a>
    2.86        <#else>
    2.87 -        <p>
    2.88 -            <img src="/games/${doc.game.id.@id}.png<#if doc.game.@currentMove??>?move=${doc.game.@currentMove}</#if>" alt="${bundle.BOARD_TEXT}">
    2.89 -        </p>
    2.90 +        <div style="position: relative; height:450px;">
    2.91 +            <div id="fence"></div>
    2.92 +            <img style="position: absolute; left: 0; right: 0;"
    2.93 +                 width="450" height="450"
    2.94 +                 src="/games/${doc.game.id.@id}.png<#if doc.game.@currentMove??>?move=${doc.game.@currentMove}</#if>"
    2.95 +                 alt="${bundle.BOARD_TEXT}"
    2.96 +             >
    2.97 +        </div>
    2.98          ${bundle.BOARD_VIEW}
    2.99          <a href="/games/${doc.game.id.@id}?format=small">${bundle.BOARD_SMALL}</a>
   2.100          ${bundle.BOARD_IMAGE}