feat: improve tablet screen controls and participant action states

- Add wake lock and browser fullscreen controls to encounter header/popout - Re-acquire wake lock after browser release (still doesnt work on tablet) - Retry fullscreen after Android unlock; keep manual control visible - Add larger labeled character Save button - Use distinct panel icon for encounter full-page expansion - Add strong active/inactive, conditions-open, and editing button states - Keep inactive participant controls visible - Add regression tests and update affected characterization tests - Update project TODO notes
2026-07-15 12:30:07 -04:00
parent 30712f0e1e
commit 119d252d02
6 changed files with 270 additions and 42 deletions
@@ -70,7 +70,7 @@ describe('Participant -> Firebase', () => {
  test('toggleActive: updateDoc flips isActive', async () => {
    await setupReady();
    await addMonsterViaUI('Toggle', 10, 0);
-    fireEvent.click(screen.getByTitle('Mark Inactive'));
+    fireEvent.click(screen.getByRole('button', { name: 'Disable participant' }));
    await waitFor(() => lastEncCall()?.data?.participants?.[0]?.isActive === false);
    expect(lastEncCall().data.participants[0].isActive).toBe(false);
  });
@@ -116,7 +116,7 @@ describe('Participant -> Firebase', () => {
  test('toggleCondition: updateDoc adds condition to array', async () => {
    await setupReady();
    await addMonsterViaUI('Cond', 10, 0);
-    fireEvent.click(screen.getByTitle('Conditions'));
+    fireEvent.click(screen.getByRole('button', { name: 'Open conditions' }));
    await waitFor(() => screen.getByRole('button', { name: /Blinded/i }));
    fireEvent.click(screen.getByRole('button', { name: /Blinded/i }));
    await waitFor(() => {
@@ -0,0 +1,42 @@
+import { screen, fireEvent } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { setupReady, addMonsterViaUI } from './testHelpers';
+
+describe('participant action selected states', () => {
+  test('active toggle clearly changes to selected inactive state', async () => {
+    await setupReady('ActionCamp1', 'ActionEnc1');
+    await addMonsterViaUI('Toggle Orc', 15, 3);
+
+    const disable = screen.getByRole('button', { name: 'Disable participant' });
+    expect(disable).toHaveAttribute('aria-pressed', 'true');
+    expect(disable).toHaveClass('bg-emerald-700');
+    fireEvent.click(disable);
+
+    const enable = await screen.findByRole('button', { name: 'Enable participant' });
+    expect(enable).toHaveAttribute('aria-pressed', 'false');
+    expect(enable).toHaveClass('bg-red-900', 'ring-red-500');
+  });
+
+  test('conditions toggle highlights open state and gives close action', async () => {
+    await setupReady('ActionCamp2', 'ActionEnc2');
+    await addMonsterViaUI('Condition Orc', 15, 3);
+
+    const open = screen.getByRole('button', { name: 'Open conditions' });
+    expect(open).toHaveAttribute('aria-expanded', 'false');
+    fireEvent.click(open);
+
+    const close = screen.getByRole('button', { name: 'Close conditions' });
+    expect(close).toHaveAttribute('aria-expanded', 'true');
+    expect(close).toHaveClass('bg-purple-700', 'ring-purple-300');
+  });
+
+  test('edit toggle exposes selected state while editor is open', async () => {
+    await setupReady('ActionCamp3', 'ActionEnc3');
+    await addMonsterViaUI('Edit Orc', 15, 3);
+
+    fireEvent.click(screen.getByRole('button', { name: 'Edit participant' }));
+    const closeEditor = screen.getByRole('button', { name: 'Close participant editor' });
+    expect(closeEditor).toHaveAttribute('aria-pressed', 'true');
+    expect(closeEditor).toHaveClass('bg-amber-500', 'ring-amber-200');
+  });
+});
@@ -57,7 +57,7 @@ describe('reslot on all mutation paths', () => {
    expect(lastParticipantsUpdate().map(p => p.name)).toEqual(['Orc', 'Goblin']);

    // open edit modal for Goblin, bump init to 8
-    const editBtns = screen.getAllByTitle('Edit');
+    const editBtns = screen.getAllByRole('button', { name: 'Edit participant' });
    const goblinEdit = editBtns.find(b => b.closest('li')?.textContent.includes('Goblin'));
    fireEvent.click(goblinEdit);

@@ -0,0 +1,95 @@
+import { screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom';
+import { setupReady } from './testHelpers';
+
+describe('screen controls', () => {
+  let originalRequestFullscreen;
+  let originalExitFullscreen;
+  let originalFullscreenElement;
+  let originalVisibilityState;
+  let originalWakeLock;
+
+  beforeEach(() => {
+    localStorage.clear();
+    originalRequestFullscreen = document.documentElement.requestFullscreen;
+    originalExitFullscreen = document.exitFullscreen;
+    originalFullscreenElement = Object.getOwnPropertyDescriptor(document, 'fullscreenElement');
+    originalVisibilityState = Object.getOwnPropertyDescriptor(document, 'visibilityState');
+    originalWakeLock = Object.getOwnPropertyDescriptor(navigator, 'wakeLock');
+  });
+
+  afterEach(() => {
+    document.documentElement.requestFullscreen = originalRequestFullscreen;
+    document.exitFullscreen = originalExitFullscreen;
+    if (originalFullscreenElement) Object.defineProperty(document, 'fullscreenElement', originalFullscreenElement);
+    else Object.defineProperty(document, 'fullscreenElement', { configurable: true, value: null });
+    if (originalVisibilityState) Object.defineProperty(document, 'visibilityState', originalVisibilityState);
+    if (originalWakeLock) Object.defineProperty(navigator, 'wakeLock', originalWakeLock);
+    else Object.defineProperty(navigator, 'wakeLock', { configurable: true, value: undefined });
+    localStorage.clear();
+  });
+
+  test('encounter header exposes prevent-sleep, browser-fullscreen, and popout controls', async () => {
+    await setupReady('ScreenCamp', 'ScreenEnc');
+
+    expect(screen.getAllByRole('button', { name: 'Prevent sleep' }).length).toBeGreaterThanOrEqual(2);
+    expect(screen.getAllByRole('button', { name: 'Enter browser fullscreen' })).toHaveLength(1);
+    expect(screen.getByRole('button', { name: 'Expand encounter to full page' })).toBeInTheDocument();
+  });
+
+  test('re-acquires wake lock when tablet becomes visible after browser release', async () => {
+    let releaseListener;
+    const sentinel = {
+      released: false,
+      release: jest.fn().mockResolvedValue(undefined),
+      addEventListener: jest.fn((event, callback) => { if (event === 'release') releaseListener = callback; }),
+    };
+    const request = jest.fn().mockResolvedValue(sentinel);
+    Object.defineProperty(navigator, 'wakeLock', { configurable: true, value: { request } });
+    let visibility = 'visible';
+    Object.defineProperty(document, 'visibilityState', { configurable: true, get: () => visibility });
+
+    await setupReady('WakeCamp', 'WakeEnc');
+    fireEvent.click(screen.getAllByRole('button', { name: 'Prevent sleep' })[0]);
+    await waitFor(() => expect(request).toHaveBeenCalledTimes(1));
+
+    visibility = 'hidden';
+    releaseListener();
+    visibility = 'visible';
+    document.dispatchEvent(new Event('visibilitychange'));
+
+    await waitFor(() => expect(request).toHaveBeenCalledTimes(2));
+  });
+
+  test('character editor has labeled tablet-sized save button', async () => {
+    await setupReady('SaveCamp', 'SaveEnc');
+    fireEvent.change(screen.getByLabelText('Name', { selector: '#characterName' }), { target: { value: 'Tablet Hero' } });
+    fireEvent.click(screen.getByRole('button', { name: 'Add Character' }));
+    await screen.findByText('Tablet Hero');
+
+    fireEvent.click(screen.getByRole('button', { name: 'Edit character' }));
+    const save = screen.getByRole('button', { name: 'Save character' });
+    expect(save).toHaveTextContent('Save');
+    expect(save).toHaveClass('min-h-[40px]');
+  });
+
+  test('attempts to restore fullscreen when tablet becomes visible after lock', async () => {
+    const requestFullscreen = jest.fn().mockResolvedValue(undefined);
+    document.documentElement.requestFullscreen = requestFullscreen;
+    document.exitFullscreen = jest.fn().mockResolvedValue(undefined);
+    Object.defineProperty(document, 'fullscreenElement', { configurable: true, get: () => null });
+    let visibility = 'visible';
+    Object.defineProperty(document, 'visibilityState', { configurable: true, get: () => visibility });
+
+    await setupReady('RestoreCamp', 'RestoreEnc');
+    fireEvent.click(screen.getByRole('button', { name: 'Enter browser fullscreen' }));
+    await waitFor(() => expect(requestFullscreen).toHaveBeenCalledTimes(1));
+
+    visibility = 'hidden';
+    document.dispatchEvent(new Event('fullscreenchange'));
+    visibility = 'visible';
+    document.dispatchEvent(new Event('visibilitychange'));
+
+    await waitFor(() => expect(requestFullscreen).toHaveBeenCalledTimes(2));
+  });
+});