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.
93 lines
2.6 KiB
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>
|
|
|