From f021368a6697c6b064aa8da208cdf60265f4bfe0 Mon Sep 17 00:00:00 2001 From: Catalin Mititiuc Date: Sat, 4 May 2024 10:25:22 -0700 Subject: WIP: add fullscreen and download save abilities --- node | 11 ++++++++++- public/assets/images/test.svg | 4 ---- public/index.html | 6 ++++-- server.cjs | 3 +++ src/index.js | 27 +++++++++++++++++++++++---- test/integration/page.test.js | 32 ++++++++++++++++++++++++++++++-- test/map1.svg | 4 ++++ 7 files changed, 74 insertions(+), 13 deletions(-) delete mode 100644 public/assets/images/test.svg create mode 100644 test/map1.svg diff --git a/node b/node index aab7db9..49dd29e 100755 --- a/node +++ b/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 $@ diff --git a/public/assets/images/test.svg b/public/assets/images/test.svg deleted file mode 100644 index 49bfa9b..0000000 --- a/public/assets/images/test.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/public/index.html b/public/index.html index 7b45d65..ef33865 100644 --- a/public/index.html +++ b/public/index.html @@ -104,7 +104,7 @@ Loading... - + Distance: - @@ -120,7 +120,9 @@ ◓ ◒ - Change map + Change map + Fullscreen + Save Prone: diff --git a/server.cjs b/server.cjs index 19e6039..47e4723 100644 --- a/server.cjs +++ b/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' diff --git a/src/index.js b/src/index.js index 1f8f2c1..91809c3 100644 --- a/src/index.js +++ b/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); +}); diff --git a/test/integration/page.test.js b/test/integration/page.test.js index 9dfe828..e888b6d 100644 --- a/test/integration/page.test.js +++ b/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`; diff --git a/test/map1.svg b/test/map1.svg new file mode 100644 index 0000000..49bfa9b --- /dev/null +++ b/test/map1.svg @@ -0,0 +1,4 @@ + + + + -- cgit v1.2.3