Web Dev Solutions

Catalin Mititiuc

aboutsummaryrefslogtreecommitdiff
diff options
context:
space:
mode:
authorCatalin Mititiuc <webdevcat@proton.me>2024-05-04 10:25:22 -0700
committerCatalin Mititiuc <webdevcat@proton.me>2024-05-04 10:25:22 -0700
commitf021368a6697c6b064aa8da208cdf60265f4bfe0 (patch)
tree57a4f8aa011d893004accc1a5043c5e154780d8f
parent3049acbe1599e6665fd6ee48496048493349bf97 (diff)
WIP: add fullscreen and download save abilities
Diffstat
-rwxr-xr-xnode11
-rw-r--r--public/index.html6
-rw-r--r--server.cjs3
-rw-r--r--src/index.js27
-rw-r--r--test/integration/page.test.js32
-rw-r--r--test/map1.svg (renamed from public/assets/images/test.svg)0
6 files changed, 70 insertions, 9 deletions
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/index.html b/public/index.html
index 7b45d65..ef33865 100644
--- a/public/index.html
+++ b/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">
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/public/assets/images/test.svg b/test/map1.svg
index 49bfa9b..49bfa9b 100644
--- a/public/assets/images/test.svg
+++ b/test/map1.svg