|
|
|
<html> <!-- vasl-templates:id {{SNIPPET_ID}} -->
|
|
|
|
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
|
|
<style> {{CSS:common}} </style>
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
|
|
|
td {
|
|
|
|
width: 50px ; min-width: 50px ;
|
|
|
|
height: {%if TURN_TRACK_PREVIEW_MODE%} 50px {%else%} 43px {%endif%} ;
|
|
|
|
padding: 2px ;
|
|
|
|
border: 1px solid black ;
|
|
|
|
}
|
|
|
|
{% set RESET_TD = "min-width: unset ; height: unset ; padding: 0 ; border: none" %}
|
|
|
|
td.turn-no {
|
|
|
|
{{RESET_TD}} ; width: unset ;
|
|
|
|
text-align: center ; vertical-align: center ; font-size: 18px ; font-weight: bold ;
|
|
|
|
}
|
|
|
|
td.no-reinforce { {{RESET_TD}} ; width: 13px ; }
|
|
|
|
{# NOTE: We do the reinforcement flags as CSS backgrounds, since VASSAL is incredibly slow downloading normal images. #}
|
|
|
|
td.reinforce1 { {{RESET_TD}} ; width: 13px ; background: url("{{TURN_TRACK_FLAG_1}}") top left no-repeat ; vertical-align: top ; }
|
|
|
|
td.reinforce2 { {{RESET_TD}} ; width: 13px ; background: url("{{TURN_TRACK_FLAG_2}}") bottom right no-repeat ; vertical-align: bottom ; }
|
|
|
|
td.half-turn {
|
|
|
|
background: url("{{TURN_TRACK_HALF_TURN_IMAGE_URL}}") bottom right no-repeat ;
|
|
|
|
background-size: contain ; {# nb: doesn't work in VASSAL, the image file needs to be the correct size :-/ #}
|
|
|
|
}
|
|
|
|
|
|
|
|
{% if TURN_TRACK_PREVIEW_MODE %}
|
|
|
|
body { margin: 0 ; }
|
|
|
|
.reinforce1, .reinforce2 { opacity: 0 ; }
|
|
|
|
.flag-click { width: 13px ; height: 13px ; cursor: pointer ; }
|
|
|
|
.shading-click { cursor: pointer ; }
|
|
|
|
{%endif%}
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
{% if TURN_TRACK_PREVIEW_MODE %}
|
|
|
|
<script>
|
|
|
|
// notify the parent window of a click on a reinforcement flag
|
|
|
|
function onFlagClick( turnNo, playerNo ) {
|
|
|
|
window.parent.postMessage( {
|
|
|
|
type: "FlagClick",
|
|
|
|
turnNo: turnNo, uiPlayerNo: playerNo
|
|
|
|
}, "*" ) ;
|
|
|
|
}
|
|
|
|
function onShadingClick( turnNo ) {
|
|
|
|
window.parent.postMessage( {
|
|
|
|
type: "ShadingClick",
|
|
|
|
turnNo: turnNo
|
|
|
|
}, "*" ) ;
|
|
|
|
}
|
|
|
|
</script>
|
|
|
|
{%endif%}
|
|
|
|
|
|
|
|
<table class="turn-track">
|
|
|
|
|
|
|
|
{% for row in TURN_TRACK_SQUARES %}
|
|
|
|
<tr>
|
|
|
|
|
|
|
|
{% for turnSquare in row %}
|
|
|
|
<td id="turn-square-{{turnSquare[0]}}"
|
|
|
|
{%if turnSquare[0] == TURN_TRACK_HALF_TURN%} class="half-turn" {%endif%}
|
|
|
|
{% if turnSquare[1] %} style="background-color:{{TURN_TRACK_SHADING_COLOR}};" {%endif%}
|
|
|
|
>
|
|
|
|
|
|
|
|
<table style="width:100%;height:100%;"> <tr>
|
|
|
|
|
|
|
|
<td id="flag-{{turnSquare[0]}}_1" width="100%"
|
|
|
|
class = {% if turnSquare[2] %} "reinforce1" {%else%} "no-reinforce" {%endif%}
|
|
|
|
>
|
|
|
|
{% if TURN_TRACK_PREVIEW_MODE %}
|
|
|
|
<div class="flag-click"
|
|
|
|
onclick = "onFlagClick( {{turnSquare[0]}}, 1 )"
|
|
|
|
> </div>
|
|
|
|
{%endif%}
|
|
|
|
</td>
|
|
|
|
|
|
|
|
<td class="turn-no">
|
|
|
|
{% if TURN_TRACK_PREVIEW_MODE %}
|
|
|
|
<div class="shading-click"
|
|
|
|
onclick = "onShadingClick( {{turnSquare[0]}} )"
|
|
|
|
>
|
|
|
|
{{turnSquare[0]}}
|
|
|
|
</div>
|
|
|
|
{%else%}
|
|
|
|
{{turnSquare[0]}}
|
|
|
|
{%endif%}
|
|
|
|
</td>
|
|
|
|
|
|
|
|
<td id="flag-{{turnSquare[0]}}_2" width="100%"
|
|
|
|
class = {% if turnSquare[3] and turnSquare[0] != TURN_TRACK_HALF_TURN %} "reinforce2" {%else%} "no-reinforce" {%endif%}
|
|
|
|
>
|
|
|
|
{% if TURN_TRACK_PREVIEW_MODE and turnSquare[0] != TURN_TRACK_HALF_TURN %}
|
|
|
|
<div class="flag-click"
|
|
|
|
onclick = "onFlagClick( {{turnSquare[0]}}, 2 )"
|
|
|
|
> </div>
|
|
|
|
{%endif%}
|
|
|
|
</td>
|
|
|
|
|
|
|
|
</tr> </table>
|
|
|
|
|
|
|
|
</td>
|
|
|
|
{%endfor%}
|
|
|
|
|
|
|
|
</tr>
|
|
|
|
{%endfor%}
|
|
|
|
|
|
|
|
</table>
|
|
|
|
|
|
|
|
</html>
|