worldmap-viewer: initial public history

1 files changed, 40 insertions, 0 deletions

diff --git a/viewer/tests/layout.test.mjs b/viewer/tests/layout.test.mjs
new file mode 100644
index 0000000..14fb8d6
--- /dev/null
+++ b/viewer/tests/layout.test.mjs
@@ -0,0 +1,40 @@
+import { test } from 'node:test';
+import assert from 'node:assert/strict';
+
+const { compactMode, freeArea, applyMode, textureCap } = await import('../js/layout.js');
+
+test('phones get a compact layout; tablets and desktops keep theirs', () => {
+  assert.equal(compactMode(390, 844), 'portrait');      // phone, upright
+  assert.equal(compactMode(700, 1000), 'portrait');
+  assert.equal(compactMode(844, 390), 'landscape');     // phone on its side
+  assert.equal(compactMode(1000, 500), 'landscape');
+  assert.equal(compactMode(1024, 768), '');             // tablet
+  assert.equal(compactMode(1400, 900), '');
+  assert.equal(compactMode(1200, 450), '', 'a wide short window is a desktop');
+});
+
+test('the free map area leaves out what the panel covers', () => {
+  assert.deepEqual(freeArea(1400, 900, { left: 1050, top: 10, width: 340, height: 880 }), { w: 1050, h: 900 });
+  assert.deepEqual(freeArea(390, 844, { left: 0, top: 464, width: 390, height: 380 }), { w: 390, h: 464 });
+  assert.deepEqual(freeArea(390, 844, null), { w: 390, h: 844 });
+  assert.deepEqual(freeArea(390, 844, { left: 0, top: 0, width: 0, height: 0 }), { w: 390, h: 844 });
+  assert.deepEqual(freeArea(390, 844, { left: 0, top: 10, width: 390, height: 834 }), { w: 390, h: 64 }, 'never below a tile row');
+});
+
+test('applyMode sets the body classes and says when a phone layout begins', () => {
+  const cls = new Set(['menu-open']);
+  const body = { classList: { toggle: (c, on) => (on ? cls.add(c) : cls.delete(c)), remove: c => cls.delete(c) } };
+  assert.equal(applyMode(body, 'portrait', ''), true);
+  assert.deepEqual([...cls].sort(), ['compact', 'menu-open', 'portrait']);
+  assert.equal(applyMode(body, 'landscape', 'portrait'), false, 'already compact');
+  assert.deepEqual([...cls].sort(), ['compact', 'landscape', 'menu-open']);
+  assert.equal(applyMode(body, '', 'landscape'), false);
+  assert.deepEqual([...cls], [], 'desktop: no phone classes, menu closed');
+});
+
+test('touch devices and phone screens get 4096-px layer textures; desktops their GPU maximum', () => {
+  assert.equal(textureCap(16384, false, 1400, 900), 16384);
+  assert.equal(textureCap(16384, true, 1400, 900), 4096, 'a tablet');
+  assert.equal(textureCap(16384, false, 390, 844), 4096, 'a phone-sized window');
+  assert.equal(textureCap(2048, true, 390, 844), 2048, 'never above the GPU limit');
+});