Create attractive VASL scenarios, with loads of useful information embedded to assist with game play. https://vasl-templates.org
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 
vasl-templates/vasl_templates/webapp/data/default-template-pack/turn_track.j2

93 lines
2.6 KiB

<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("{{IMAGES_BASE_URL}}/turn-track-half-turn.png") 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 ; }
.click { width: 13px ; height: 13px ; 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
}, "*" ) ;
}
</script>
{%endif%}
<table class="turn-track">
{% for row in TURN_TRACK_SQUARES %}
<tr>
{% for turnSquare in row %}
<td {%if turnSquare[0] == TURN_TRACK_HALF_TURN%} class="half-turn" {%endif%} >
<table style="width:100%;height:100%;"> <tr>
<td id="flag-{{turnSquare[0]}}_1" width="100%"
class = {% if turnSquare[1] %} "reinforce1" {%else%} "no-reinforce" {%endif%}
>
{% if TURN_TRACK_PREVIEW_MODE %}
<div class="click"
onclick = "onFlagClick( {{turnSquare[0]}}, 1 )"
> </div>
{%endif%}
</td>
<td class="turn-no"> {{turnSquare[0]}} </td>
<td id="flag-{{turnSquare[0]}}_2" width="100%"
class = {% if turnSquare[2] 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="click"
onclick = "onFlagClick( {{turnSquare[0]}}, 2 )"
> </div>
{%endif%}
</td>
</tr> </table>
</td>
{%endfor%}
</tr>
{%endfor%}
</table>
</html>