Show 1/2" and 5/8" VASL counters in different sizes.

vasl_templates/webapp/file_server/vasl_mod.py

@@ -46,6 +46,13 @@ class VaslMod:
 
         return image_path, image_data
 
+    def get_piece_info( self ):
+        """Get information about each piece."""
+        return {
+            p["gpid"]: { "name": p["name"], "is_small": p["is_small"] }
+            for p in self.pieces.values()
+        }
+
     def _parse_vmod( self, data_dir ): #pylint: disable=too-many-branches,too-many-locals
         """Parse a .vmod file."""
 
@@ -85,6 +92,7 @@ class VaslMod:
                 "name": node.attrib["entryName"],
                 "front_images": front_images,
                 "back_images": back_images,
+                "is_small": int(node.attrib["height"]) <= 48,
             }
 
             # check if we want to override any values

vasl_templates/webapp/files.py

@@ -3,7 +3,7 @@
 import os
 import io
 
-from flask import send_file, abort
+from flask import send_file, jsonify, abort
 
 from vasl_templates.webapp import app
 from vasl_templates.webapp.file_server.vasl_mod import VaslMod
@@ -32,3 +32,16 @@ def get_counter_image( gpid, side, index ):
         io.BytesIO( image_data ),
         attachment_filename = os.path.split( image_path )[1]## nb: so Flask can figure out the MIME type
     )
+
+# ---------------------------------------------------------------------
+
+@app.route( "/vasl-piece-info" )
+def get_vasl_piece_info():
+    """Get information about the VASL pieces."""
+
+    # check if a VASL module has been configured
+    if not vasl_mod:
+        return jsonify( {} )
+
+    # return the VASL piece info
+    return jsonify( vasl_mod.get_piece_info() )

vasl_templates/webapp/static/css/main.css

@@ -123,7 +123,8 @@ button.edit-template img { height: 18px ; vertical-align: middle ; margin-right:
 #select-vo .select2-results__options { max-height: none ; }
 #select-vo .select2-dropdown { border: none ; }
 #select-vo .select2-dropdown .vo-entry { display: flex ; align-items: center ; }
-#select-vo .select2-dropdown .vo-entry img { width: 3em ; margin-right: 0.5em ; }
+#select-vo .select2-dropdown .vo-entry img { width: 3.5em ; margin-right: 0.5em ; }
+#select-vo .select2-dropdown .vo-entry.small-piece img { width: 2.7em ; margin-left: 0.4em ; margin-right: 0.9em ; }
 .ui-dialog.select-vo .ui-dialog-buttonpane { border: none ; padding: 0 ; font-size: 75% ; }
 .ui-dialog.select-vo button { margin: 0 0 0 5px ; padding: 0.1em 0.2em ; }
 

vasl_templates/webapp/static/css/tabs-ob.css

@@ -17,7 +17,7 @@
 .panel-ob_vehicles .footer { margin-top: 0.5em ; display: flex ; align-items: center ; }
 
 .panel-ob_vehicles .sortable { font-size: 90% ; }
-.panel-ob_vehicles .sortable img { display: inline-block ; vertical-align: middle ; width: 3em ; margin-right: 0.5em ; }
+.panel-ob_vehicles .sortable img { display: inline-block ; vertical-align: middle ; width: 3.5em ; margin-right: 0.5em ; }
 
 /* -------------------------------------------------------------------- */
 
@@ -26,4 +26,5 @@
 .panel-ob_ordnance .footer { margin-top: 0.5em ; display: flex ; align-items: center ; }
 
 .panel-ob_ordnance .sortable { font-size: 90% ; }
-.panel-ob_ordnance .sortable img { display: inline-block ; vertical-align: middle ; width: 3em ; margin-right: 0.5em ; }
+.panel-ob_ordnance .sortable img { display: inline-block ; vertical-align: middle ; width: 3.5em ; margin-right: 0.5em ; }
+.panel-ob_ordnance .sortable .small-piece img { width: 2.5em ; margin-left: 0.5em ; margin-right: 1em ; }

vasl_templates/webapp/static/main.js

@@ -2,6 +2,7 @@ gTemplatePack = {} ;
 gDefaultNationalities = {} ;
 gValidTemplateIds = [] ;
 gVehicleOrdnanceListings = {} ;
+gVaslPieceInfo = {} ;
 
 gWebChannelHandler = null ;
 gEmSize = null ;
@@ -220,6 +221,14 @@ $(document).ready( function () {
         showErrorMsg( "Can't get the ordnance listings:<div class='pre'>" + escapeHTML(errorMsg) + "</div>" ) ;
     } ) ;
 
+    // get the VASL piece info
+    $.getJSON( gGetVaslPieceInfoUrl, function(data) {
+        gVaslPieceInfo = data ;
+        update_page_load_status( "vasl-piece-info" ) ;
+    } ).fail( function( xhr, status, errorMsg ) {
+        showErrorMsg( "Can't get the VASL piece info:<div class='pre'>" + escapeHTML(errorMsg) + "</div>" ) ;
+    } ) ;
+
     // get the template pack
     $.getJSON( gGetTemplatePackUrl, function(data) {
         if ( "error" in data )
@@ -373,7 +382,7 @@ $(document).ready( function () {
 
 // - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
 
-gPageLoadStatus = [ "main", "vehicle-listings", "ordnance-listings", "template-pack", "default-scenario" ] ;
+gPageLoadStatus = [ "main", "vehicle-listings", "ordnance-listings", "vasl-piece-info", "template-pack", "default-scenario" ] ;
 
 function update_page_load_status( id )
 {

vasl_templates/webapp/static/vo.js

@@ -27,7 +27,10 @@ function add_vo( vo_type, player_no )
     function format_vo_entry( opt ) {
         if ( ! opt.id )
             return opt.text ;
-        return $( "<div class='vo-entry'><img src='" + _get_vo_image_url(entries[opt.id]) + "'>" + opt.text + "</div>" ) ;
+        var div_class = "vo-entry" ;
+        if ( is_small_vasl_piece( entries[opt.id] ) )
+            div_class += " small-piece" ;
+        return $( "<div class='" + div_class + "'><img src='" + _get_vo_image_url(entries[opt.id]) + "'>" + opt.text + "</div>" ) ;
     }
     var $sel = $( "#select-vo select" ) ;
     $sel.html( buf.join("") ).select2( {
@@ -94,8 +97,12 @@ function do_add_vo( vo_type, player_no, entry )
 {
     // add the specified vehicle/ordnance
     var $sortable2 = $( "#ob_" + vo_type + "-sortable_" + player_no ) ;
+    var div_tag = "<div" ;
+    if ( is_small_vasl_piece( entry ) )
+        div_tag += " class='small-piece'" ;
+    div_tag += ">" ;
     $sortable2.sortable2( "add", {
-        content: $( "<div>" + "<img src='"+_get_vo_image_url(entry)+"'>" + entry.name + "</div>" ),
+        content: $( div_tag + "<img src='"+_get_vo_image_url(entry)+"'>" + entry.name + "</div>" ),
         data: { caption: entry.name, vo_entry: entry },
     } ) ;
 }
@@ -116,11 +123,21 @@ function find_vo( vo_type, nat, name )
 
 // --------------------------------------------------------------------
 
-function _get_vo_image_url( entry )
+function _get_vo_image_url( vo_entry )
 {
-    if ( $.isArray( entry._gpid_ ) )
-        return "/counter/" + entry._gpid_[0] + "/front" ; // FIXME! if > 1 image available, let the user pick which one
-    if ( entry._gpid_ )
-        return "/counter/" + entry._gpid_ + "/front" ;
+    if ( $.isArray( vo_entry._gpid_ ) ) // FIXME! if > 1 image available, let the user pick which one
+        return "/counter/" + vo_entry._gpid_[0] + "/front" ;
+    if ( vo_entry._gpid_ )
+        return "/counter/" + vo_entry._gpid_ + "/front" ;
     return gImagesBaseUrl + "/missing-image.png" ;
 }
+
+function is_small_vasl_piece( vo_entry )
+{
+    var gpid = vo_entry._gpid_ ;
+    if ( $.isArray( gpid ) ) // FIXME! if > 1 image available, need to be smarter here
+        gpid = gpid[0] ;
+    if ( !( gpid in gVaslPieceInfo ) )
+        return false ;
+    return gVaslPieceInfo[gpid].is_small ;
+}

vasl_templates/webapp/templates/index.html

@@ -304,6 +304,7 @@ gGetTemplatePackUrl = "{{url_for('get_template_pack')}}" ;
 gGetDefaultScenarioUrl = "{{url_for('get_default_scenario')}}" ;
 gVehicleListingsUrl = "{{url_for('get_vehicle_listings',merge_common=1)}}" ;
 gOrdnanceListingsUrl = "{{url_for('get_ordnance_listings',merge_common=1)}}" ;
+gGetVaslPieceInfoUrl = "{{url_for('get_vasl_piece_info')}}" ;
 gHelpUrl = "{{url_for('show_help')}}" ;
 </script>
 <script src="{{url_for('static',filename='main.js')}}"></script>