Allow the font to be configured for HTML snippets.

vasl_templates/webapp/data/default-template-pack/common.css

@@ -1,9 +1,12 @@
+body {
+    {%if SNIPPET_FONT_FAMILY%} font-family: "{{SNIPPET_FONT_FAMILY}}" ; {%endif%}
+    {%if SNIPPET_FONT_SIZE%} font-size: {{SNIPPET_FONT_SIZE}} ; {%endif%}
+}
+
 p { margin-top: 5px ; margin-bottom: 0 ; }
 
 ul { margin: 0 ; padding: 0 0 0 10px ; }
-{% if CUSTOM_LIST_BULLETS %}
-ul { list-style-image: url("{{IMAGES_BASE_URL}}/bullet.png") ; }
-{%endif%}
+{%if CUSTOM_LIST_BULLETS%} ul { list-style-image: url("{{IMAGES_BASE_URL}}/bullet.png") ; } {%endif%}
 
 td { margin: 0 ; padding: 0 ; }
 td.c { text-align: center ; }

vasl_templates/webapp/static/snippets.js

@@ -128,6 +128,14 @@ function make_snippet( $btn, params, extra_params, show_date_warnings )
     params.IMAGES_BASE_URL = gUserSettings["scenario-images-source"] == SCENARIO_IMAGES_SOURCE_INTERNET ?
         gAppConfig.ONLINE_IMAGES_URL_BASE :
         APP_URL_BASE + gImagesBaseUrl ;
+    if ( gUserSettings["snippet-font-family"] ) {
+        // NOTE: Layout of snippets ends up being slightly different on Windows and Linux, presumably because
+        // VASSAL is using different fonts. Unfortunately, explicitly specifying which font to use doesn't
+        // fix this, even web-safe ones :-(
+        params.SNIPPET_FONT_FAMILY = gUserSettings["snippet-font-family"] ;
+    }
+    if ( gUserSettings["snippet-font-size"] )
+        params.SNIPPET_FONT_SIZE = gUserSettings["snippet-font-size"] ;
     if ( gUserSettings["custom-list-bullets"] )
         params.CUSTOM_LIST_BULLETS = true ;
     // some versions of Java require <img> tags to have the width and height specified!?!

vasl_templates/webapp/static/user_settings.js

@@ -4,6 +4,8 @@ SCENARIO_IMAGES_SOURCE_INTERNET = 2 ;
 gUserSettings = Cookies.getJSON( "user-settings" ) || { "scenario-images-source": SCENARIO_IMAGES_SOURCE_THIS_PROGRAM } ;
 
 USER_SETTINGS = {
+    "snippet-font-family": "text",
+    "snippet-font-size": "text",
     "date-format": "droplist",
     "scenario-images-source": "droplist",
     "hide-unavailable-ma-notes": "checkbox",
@@ -64,6 +66,8 @@ function user_settings()
         unload_checkbox: function( $elem ) { return $elem.prop( "checked" ) ; },
         load_droplist: function( $elem, val ) { if ( val ) $elem.val( val ) ; },
         unload_droplist: function( $elem ) { return $elem.children(":selected").val() ; },
+        load_text: function( $elem, val ) { $elem.val( val ? val.trim() : "" ) ; },
+        unload_text: function( $elem ) { return $elem.val().trim() ; },
     } ;
 
     // show the "user settings" dialog
@@ -71,8 +75,8 @@ function user_settings()
         title: "User settings",
         dialogClass: "user-settings",
         modal: true,
-        width: 450,
-        height: 290,
+        width: 460,
+        height: 320,
         resizable: false,
         create: function() {
             init_dialog( $(this), "OK", true ) ;

vasl_templates/webapp/templates/user-settings-dialog.html

@@ -1,18 +1,23 @@
 <div id="user-settings" style="display:none;">
 
-    <label for="">Date format:</label>
-    <select name="date-format" style="width:9em;">
-        <option value="mm/dd/yy">MM/DD/YYYY</option>
-        <option value="dd/mm/yy">DD/MM/YYYY</option>
-        <option value="yy-mm-dd">YYYY-MM-DD</option>
-    </select>
-    <div style="margin-top:0.25em;">
-        <input type="checkbox" name="hide-unavailable-ma-notes"> Hide unavailable multi-applicable notes <br>
+    <div style="display:flex;align-items:center;margin-bottom:0.25em;">
+        HTML snippet font:&nbsp;
+        <input type="text" name="snippet-font-family" title='CSS font family (e.g. "Verdana" or "sans-serif")' style="flex-grow:1;">&nbsp;
+        <input type="text" name="snippet-font-size" size="3" title='CSS font size (e.g. "12px")'>
+    </div>
+    <input type="checkbox" name="hide-unavailable-ma-notes"> Hide unavailable multi-applicable notes <br>
+    <div style="margin-top:0.5em;">
+        <label for="">Date format:</label>
+        <select name="date-format" style="width:9em;">
+            <option value="mm/dd/yy">MM/DD/YYYY</option>
+            <option value="dd/mm/yy">DD/MM/YYYY</option>
+            <option value="yy-mm-dd">YYYY-MM-DD</option>
+        </select>
     </div>
 
     <fieldset> <legend> Images in scenarios </legend>
         Get images from:
-        <select name="scenario-images-source" style="width:8em;">
+        <select name="scenario-images-source" style="width:7.5em;">
             <option value="1">this program</option>
             <option value="2">the internet</option>
         </select> <br>