Add ability to load a map file manually

public/assets/css/style.css

@@ -380,6 +380,10 @@ img.logo {
   position: absolute;
 }
 
+input[type="file"] {
+  display: none;
+}
+
 @media (width >= 1800px) {
   #record-sheet {
     flex-direction: row;

public/index.html

@@ -121,8 +121,12 @@
           <span class="inning-bottom">◒</span>
         </span>
         <button id="show-dialog" type="button">Change map</button>
-        <button id="fullscreen" type="button">Fullscreen</button>
         <button id="download-save" type="button">Save</button>
+        <button id="upload-save" type="button">Load</button>
+        <button id="fullscreen" type="button">
+          <img src="assets/images/icon_full_screen.png" height="12" />
+        </button>
+
         <span style="white-space: nowrap;">
           Prone: <input type="checkbox" id="toggle-prone-counter" />
           <button type="button" class="set-firing-arc" data-size="small">
@@ -197,6 +201,8 @@
       </form>
     </dialog>
 
+    <input type="file" accept="image/svg+xml"/>
+
     <script src="index.js"></script>
     <script src="soldier_record_block.js"></script>
   </body>

src/index.js

@@ -12,6 +12,7 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
   // fileName = localStorage.getItem('map') || (env === 'test' ? 'test_map' : 'map1'),
   fileName = localStorage.getItem('map') || 'map1',
   map = `assets/images/${fileName}.svg`,
+  fileInputEl = document.querySelector('input[type="file"]'),
 
   toggleContentVis = (function () {
     document.querySelectorAll('#content div').forEach(div => {
@@ -64,6 +65,7 @@ function clearMoveEndedIndicators(records) {
 }
 
 function load() {
+  URL.revokeObjectURL(this.data);
   const svg = this.contentDocument.querySelector('svg'),
     startLocs = svg.querySelector('.start-locations');
 
@@ -156,3 +158,12 @@ document.querySelector('#download-save').addEventListener('click', e => {
   element.click();
   // document.body.removeChild(element);
 });
+
+document.querySelector('#upload-save').addEventListener('click', () => {
+  fileInputEl.click();
+});
+
+document.querySelector('input[type="file"]').addEventListener('change', e => {
+  const [file] =  fileInputEl.files;
+  document.querySelector('object').data = URL.createObjectURL(file);
+});