WIP: add fullscreen and download save abilities

node

@@ -1,4 +1,13 @@
 #!/usr/bin/env bash
 
-docker run --rm --init -it -v $PWD:/usr/src/app btroops node $@
+user_id=$(id -u)
+image=btroops
 
+if [[ $1 == run && $2 == test* ]]
+then
+  port=3005
+else
+  port=8080
+fi
+
+docker run --rm --init -it -v $PWD:/usr/src/app -u $user_id:$user_id -p $port:$port $image node $@

public/index.html

@@ -104,7 +104,7 @@
         Loading...
       </div>
 
-      <object type="image/svg+xml" data="assets/images/map1.svg"></object>
+      <object type="image/svg+xml"></object>
 
       <div id="status">
         <span id="hex-counter">Distance: <span id="hex-count">-</span></span>
@@ -120,7 +120,9 @@
           <span class="inning-top">◓</span>
           <span class="inning-bottom">◒</span>
         </span>
-        <button id="show-dialog">Change map</button>
+        <button id="show-dialog" type="button">Change map</button>
+        <button id="fullscreen" type="button">Fullscreen</button>
+        <button id="download-save" type="button">Save</button>
         <span style="white-space: nowrap;">
           Prone: <input type="checkbox" id="toggle-prone-counter" />
           <button type="button" class="set-firing-arc" data-size="small">

server.cjs

@@ -3,6 +3,9 @@ const { createServer } = require('esbuild-server');
 const server = createServer(
   {
     bundle: true,
+    define: {
+      'env': `"${process.env.NODE_ENV || 'dev'}"`,
+    },
     entryPoints: ['src/index.js', 'src/map.js', 'src/soldier_record_block.js'],
     ...(process.env.NODE_ENV !== 'test') && {
       outdir: 'build'

src/index.js

@@ -10,7 +10,8 @@ const mapPlaceholder = document.querySelector('.map-placeholder'),
   proneToggle = document.getElementById('toggle-prone-counter'),
   contentVisToggleEl = document.querySelector('#content input[type="checkbox"].visible'),
   object = document.querySelector('object'),
-  fileName = `assets/images/${localStorage.getItem('map') || 'map1'}.svg`,
+  fileName = localStorage.getItem('map') || (env === 'test' ? 'test_map' : 'map1'),
+  map = `assets/images/${fileName}.svg`,
 
   toggleContentVis = (function () {
     document.querySelectorAll('#content div').forEach(div => {
@@ -118,6 +119,14 @@ document.querySelectorAll('.end-move').forEach(el => el.addEventListener('click'
   gameboard.endMove();
 }));
 
+document.querySelector('#fullscreen').addEventListener('click', e => {
+  if (!document.fullscreenElement) {
+    document.documentElement.requestFullscreen();
+  } else if (document.exitFullscreen) {
+    document.exitFullscreen();
+  }
+});
+
 contentVisToggleEl.checked = (localStorage.getItem('content-visibility') !== 'false');
 toggleContentVis();
 
@@ -129,8 +138,18 @@ mapSelectDialog
   .changeMapOnConfirm();
 
 object.addEventListener('load', load);
+object.data = map;
 objectDataObserver.observe(object, { attributeFilter: ['data'] });
 
-if (object.getAttribute('data') !== fileName) {
-  object.data = fileName;
-}
+document.querySelector('#download-save').addEventListener('click', e => {
+  const data = object.contentDocument.documentElement.outerHTML;
+  const element = document.createElement('a');
+
+  element.setAttribute('download', 'save.svg');
+  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(data));
+  element.style.display = 'none';
+
+  document.body.appendChild(element);
+  element.click();
+  document.body.removeChild(element);
+});

test/integration/page.test.js

@@ -2,20 +2,44 @@ const { Builder, By } = require('selenium-webdriver'),
   chrome = require('selenium-webdriver/chrome.js'),
   { expect, it } = require('@jest/globals'),
   chromeOptions = new chrome.Options(),
-  { mkdir, writeFile } = require('node:fs/promises'),
+  { mkdir, writeFile, symlink, unlink } = require('node:fs/promises'),
   path = require('path');
 
 chromeOptions.addArguments('--headless', '--disable-gpu', '--no-sandbox');
 
 let driver;
 
+beforeAll(async () => {
+  await symlink('../../../test/map1.svg', 'public/assets/images/test_map.svg');
+});
+
 beforeEach(async () => {
   driver = new Builder().forBrowser('chrome').setChromeOptions(chromeOptions).build();
+
+  console.log('manage', await driver.manage());
+
   await driver.get('http://localhost:3005');
 });
 
-it('loads the page', async () => {
+it.only('loads the page', async () => {
   expect(await driver.getTitle()).toEqual('Infantry Combat Solo Basic');
+
+  // console.log('window', window);
+
+  // takeScreenshot(driver);
+
+  // var start = new Date().getTime();
+  // await driver.executeAsyncScript(
+  //     'window.setTimeout(arguments[arguments.length - 1], 500);').
+  //     then(function() {
+  //       console.log(
+  //           'Elapsed time: ' + (new Date().getTime() - start) + ' ms');
+  //     });
+
+  // await driver.executeScript(`return __dirname`).then(function (e) {
+  //   console.log('e', e);
+  // });
+  // console.log('client', await driver.executeScript(`return document.querySelect('object');`));
 });
 
 it('selects an off-board soldier', async () => {
@@ -34,6 +58,10 @@ afterEach(async () => {
   await driver.quit();
 });
 
+afterAll(async () => {
+  await unlink('public/assets/images/test_map.svg');
+});
+
 async function takeScreenshot(driver) {
   const dir = './test/screenshots';
   const fileName = path.relative(process.cwd(), __filename) + ' "' + expect.getState().currentTestName + `" ${new Date().toISOString()}.png`;