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.
136 lines
4.7 KiB
136 lines
4.7 KiB
<!doctype html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title> Load the vehicle/ordnance notes image cache </title>
|
|
<link rel="stylesheet" type="text/css" href="{{url_for('static',filename='jquery-ui/jquery-ui.min.css')}}" />
|
|
<style>
|
|
#progress { position: relative ; margin-bottom: 5px ; }
|
|
#progress .caption { position: absolute ; top: 7px ; left: 49% ; color: #666 ; }
|
|
#status { color: #333 ; }
|
|
img#vo-note { max-width: 95% ; border: 1px dotted #666 ; border-radius: 5px ; padding: 8px ; display: none ; }
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div style="width:49%;float:left;">
|
|
{%include "configure-vo-notes-image-cache.html" %}
|
|
<p> <button id="start"> Go </button>
|
|
<div id="progress"> <div class="caption"></div> </div>
|
|
<div id="status"></div>
|
|
</div>
|
|
<div style="width:49%;float:right;">
|
|
<img id="vo-note">
|
|
</div>
|
|
</body>
|
|
|
|
<script src="{{url_for('static',filename='jquery/jquery-3.3.1.min.js')}}"></script>
|
|
<script src="{{url_for('static',filename='jquery-ui/jquery-ui.min.js')}}"></script>
|
|
<script src="{{url_for('static',filename='snippets.js')}}"></script>
|
|
<script src="{{url_for('static',filename='vo.js')}}"></script>
|
|
<script src="{{url_for('static',filename='utils.js')}}"></script>
|
|
|
|
<script>
|
|
|
|
gAppConfig = {} ;
|
|
gTemplatePack = {} ;
|
|
gVehicleOrdnanceNotes = {} ;
|
|
gTotalEntries = 0 ;
|
|
|
|
$( document ).ready( function () {
|
|
|
|
// initialize
|
|
var startup = 3 ;
|
|
$( "#start" ).attr( "disabled", true ).on( "click", main ) ;
|
|
|
|
// get the template pack
|
|
$.getJSON( "{{url_for( 'get_template_pack' )}}", function( resp ) {
|
|
gTemplatePack = resp ;
|
|
-- startup ;
|
|
} ).fail( function( xhr, status, errorMsg ) {
|
|
alert( "Can't get the nationalities:\n\n" + errorMsg ) ;
|
|
} ) ;
|
|
|
|
// get the vehicle/ordnance notes
|
|
function get_vo_notes( vo_type, url ) {
|
|
$.getJSON( url, function( resp ) {
|
|
gVehicleOrdnanceNotes[ vo_type ] = resp ;
|
|
if ( --startup == 0 )
|
|
$( "#start" ).attr( "disabled", false ) ;
|
|
} ).fail( function( xhr, status, errorMsg ) {
|
|
alert( "Can't get the " + vo_type + " notes:\n\n" + errorMsg ) ;
|
|
} ) ;
|
|
}
|
|
get_vo_notes( "vehicles", "{{url_for('get_vehicle_notes')}}" ) ;
|
|
get_vo_notes( "ordnance", "{{url_for('get_ordnance_notes')}}" ) ;
|
|
|
|
} ) ;
|
|
|
|
function main() {
|
|
|
|
// generate all the requests we need to make
|
|
var requests = [] ;
|
|
[ "vehicles", "ordnance" ].forEach( function( vo_type ) {
|
|
for ( var nat in gVehicleOrdnanceNotes[ vo_type ] ) {
|
|
for ( var key in gVehicleOrdnanceNotes[ vo_type ][ nat ] ) {
|
|
if ( key == "multi-applicable" )
|
|
continue ;
|
|
var rc = make_vo_note_image_url( vo_type, nat, key ) ;
|
|
var url = rc[0] ;
|
|
if ( ! url )
|
|
continue ;
|
|
var nat_info = gTemplatePack.nationalities[ nat ] ;
|
|
var nat_name = nat_info ? nat_info.display_name : nat ;
|
|
var caption = vo_type + ": " + nat_name + " #" + key ;
|
|
requests.push( [ url, caption ] ) ;
|
|
}
|
|
}
|
|
} ) ;
|
|
var nRequests = requests.length ;
|
|
if ( nRequests == 0 ) {
|
|
alert( "No vehicle/ordnance notes were found." ) ;
|
|
return ;
|
|
}
|
|
|
|
// initialize
|
|
$( "#start" ).hide() ;
|
|
var $img = $( "img#vo-note" ).on( "load", function() {
|
|
// the vehicle/ordnance note finished loading - request the next one
|
|
$(this).show() ;
|
|
processNextRequest() ;
|
|
} ) ;
|
|
var $status = $( "#status" ) ;
|
|
var $progress = $( "#progress" ).progressbar( {
|
|
change: function( ) {
|
|
var val = $progress.progressbar( "value" ) ;
|
|
$progress.find( ".caption" ).text( val + "%" ) ;
|
|
},
|
|
complete: function() {
|
|
$progress.find( ".caption" ).text( "" ) ;
|
|
},
|
|
} ) ;
|
|
|
|
// fetch each vehicle/ordnance note image
|
|
function processNextRequest() {
|
|
if ( requests.length == 0 ) {
|
|
$progress.progressbar( { value: 100 } ) ;
|
|
$progress.find( ".caption" ).text( "100%" ) ;
|
|
$status.text( "All done." ) ;
|
|
return ;
|
|
}
|
|
var req = requests.shift() ;
|
|
var val = Math.floor( 100 * requests.length / nRequests ) ;
|
|
$progress.progressbar( {
|
|
value: Math.min( 100-val, 99 )
|
|
} ) ;
|
|
$status.text( "Generating " + req[1] ) ;
|
|
// NOTE: We show the generated the image to the user for visual feedback, which will trigger
|
|
// a "load" event when it has finished loading, which will invoke processNextRequest() to get
|
|
// the next image, until they're all done.
|
|
$img.attr( "src", req[0] ) ;
|
|
}
|
|
processNextRequest() ;
|
|
}
|
|
|
|
</script>
|
|
|