v1.0.4

.env.example

@@ -19,3 +19,13 @@ PUBLIC_USER_API_URL=https://user.keeptrack.space
 # Set to R2 custom domain for production (e.g., https://assets.signalrange.space)
 # This enables serving large audio files from R2 instead of bundling them
 PUBLIC_ASSETS_BASE_URL=
+
+# Developer Menu Whitelist
+# Comma-separated list of Supabase user IDs that can access the dev menu
+# Example: PUBLIC_DEV_USER_IDS=uuid1,uuid2,uuid3
+PUBLIC_DEV_USER_IDS=
+
+# Logging Level
+# Controls minimum log level shown in console: LOG, INFO, WARN, ERROR
+# Default: LOG (shows everything)
+PUBLIC_LOG_LEVEL=LOG

.env.production

@@ -18,4 +18,6 @@ PUBLIC_USER_API_URL=https://user.keeptrack.space
 # Leave empty for local development (uses local files in public/)
 # Set to R2 custom domain for production (e.g., https://assets.signalrange.space)
 # This enables serving large audio files from R2 instead of bundling them
-PUBLIC_ASSETS_BASE_URL=https://assets.signalrange.space
+PUBLIC_ASSETS_BASE_URL=https://assets.signalrange.space
+
+PUBLIC_LOG_LEVEL=WARN

.github/workflows/build-pipeline.yml

@@ -121,6 +121,41 @@ jobs:
             echo "Line coverage: ${COVERAGE}%" >> $GITHUB_STEP_SUMMARY
           fi
 
+  e2e-tests:
+    name: E2E Tests
+    needs: [lint, type-check, test]
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout Code
+        uses: actions/checkout@v4
+        with:
+          submodules: recursive
+
+      - name: Setup Node Project
+        uses: ./.github/actions/setup-node-project
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps chromium
+
+      - name: Run E2E Tests
+        run: npm run test:e2e
+
+      - name: Upload Playwright Report
+        if: always()
+        uses: actions/upload-artifact@v4
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 7
+
+      - name: E2E Test Summary
+        if: always()
+        run: |
+          echo "### E2E Test Results" >> $GITHUB_STEP_SUMMARY
+          if [ -d playwright-report ]; then
+            echo "E2E tests completed. See artifact for details." >> $GITHUB_STEP_SUMMARY
+          fi
+
   security-audit:
     name: Security Audit
     runs-on: ubuntu-latest
@@ -154,7 +189,7 @@ jobs:
 
   build:
     name: Build
-    needs: [lint, type-check, test, security-audit]
+    needs: [lint, type-check, test, security-audit, e2e-tests]
     runs-on: ubuntu-latest
     steps:
       - name: Checkout Code

.gitignore

@@ -30,6 +30,12 @@ yarn-error.log*
 coverage/
 .nyc_output/
 
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
+
 # Temporary files
 tmp/
 temp/

e2e/fixtures/test-fixtures.ts

@@ -0,0 +1,46 @@
+import { test as base } from '@playwright/test';
+import { CampaignSelectionPage } from '../pages/campaign-selection.page';
+import { ScenarioSelectionPage } from '../pages/scenario-selection.page';
+import { MissionControlPage } from '../pages/mission-control.page';
+
+/**
+ * Custom fixtures for SignalRange e2e tests.
+ * Provides page objects as test fixtures.
+ */
+type SignalRangeFixtures = {
+  campaignSelectionPage: CampaignSelectionPage;
+  scenarioSelectionPage: ScenarioSelectionPage;
+  missionControlPage: MissionControlPage;
+};
+
+/**
+ * Extended test function with SignalRange fixtures.
+ */
+export const test = base.extend<SignalRangeFixtures>({
+  // Clear storage and set test mode flags before each test
+  page: async ({ page }, use) => {
+    // Set up test mode: auto-close dialogs and clear storage
+    await page.addInitScript(() => {
+      // Auto-close dialogs for faster testing
+      (window as any).AUTO_CLOSE_DIALOGS = true;
+      // Clear storage
+      localStorage.clear();
+      sessionStorage.clear();
+    });
+    await use(page);
+  },
+
+  campaignSelectionPage: async ({ page }, use) => {
+    await use(new CampaignSelectionPage(page));
+  },
+
+  scenarioSelectionPage: async ({ page }, use) => {
+    await use(new ScenarioSelectionPage(page));
+  },
+
+  missionControlPage: async ({ page }, use) => {
+    await use(new MissionControlPage(page));
+  },
+});
+
+export { expect } from '@playwright/test';

e2e/pages/base.page.ts

@@ -0,0 +1,54 @@
+import { Page, Locator } from '@playwright/test';
+
+/**
+ * Abstract base class for all page objects.
+ * Provides common functionality for page navigation and waiting.
+ */
+export abstract class BasePage {
+  constructor(protected readonly page: Page) {}
+
+  /**
+   * URL pattern for this page. Can be a string or RegExp.
+   */
+  abstract readonly url: string | RegExp;
+
+  /**
+   * Navigate to this page and wait for it to load.
+   */
+  async goto(): Promise<void> {
+    if (typeof this.url === 'string') {
+      await this.page.goto(this.url);
+    }
+    await this.waitForPageLoad();
+  }
+
+  /**
+   * Wait for page-specific elements to indicate the page is ready.
+   * Override in subclasses to wait for page-specific conditions.
+   */
+  protected abstract waitForPageLoad(): Promise<void>;
+
+  /**
+   * Get a locator for an element by test ID.
+   */
+  protected getByTestId(testId: string): Locator {
+    return this.page.locator(`[data-testid="${testId}"]`);
+  }
+
+  /**
+   * Get a locator for an element by its ID attribute.
+   */
+  protected getById(id: string): Locator {
+    return this.page.locator(`#${id}`);
+  }
+
+  /**
+   * Wait for navigation to complete after an action.
+   */
+  protected async waitForNavigation(action: () => Promise<void>): Promise<void> {
+    await Promise.all([
+      this.page.waitForURL(/.*/),
+      action(),
+    ]);
+  }
+}

e2e/pages/campaign-selection.page.ts

@@ -0,0 +1,90 @@
+import { Page, Locator, expect } from '@playwright/test';
+import { BasePage } from './base.page';
+
+/**
+ * Page object for the Campaign Selection page.
+ * This is the root page where users select a campaign to play.
+ */
+export class CampaignSelectionPage extends BasePage {
+  readonly url = '/';
+
+  // Main elements
+  readonly pageContainer: Locator;
+  readonly pageTitle: Locator;
+  readonly subtitle: Locator;
+  readonly campaignGrid: Locator;
+  readonly loginWarning: Locator;
+
+  // Campaign cards
+  readonly campaignCards: Locator;
+  readonly sandboxCard: Locator;
+
+  constructor(page: Page) {
+    super(page);
+    this.pageContainer = page.locator('#campaign-selection-page');
+    this.pageTitle = page.locator('.campaign-selection-header h1');
+    this.subtitle = page.locator('.campaign-selection-header .subtitle');
+    this.campaignGrid = page.locator('.campaign-grid');
+    this.loginWarning = page.locator('.login-warning');
+    this.campaignCards = page.locator('.campaign-card');
+    this.sandboxCard = page.locator('.sandbox-card');
+  }
+
+  protected async waitForPageLoad(): Promise<void> {
+    await expect(this.pageContainer).toBeVisible();
+    await expect(this.pageTitle).toBeVisible();
+    await expect(this.campaignGrid).toBeVisible();
+  }
+
+  /**
+   * Get a specific campaign card by its ID.
+   */
+  getCampaignCard(campaignId: string): Locator {
+    return this.page.locator(`[data-campaign-id="${campaignId}"]`);
+  }
+
+  /**
+   * Select a campaign by clicking on its card.
+   * Waits for navigation to the scenario selection page.
+   */
+  async selectCampaign(campaignId: string): Promise<void> {
+    const card = this.getCampaignCard(campaignId);
+    await expect(card).toBeVisible();
+    await expect(card).not.toHaveClass(/disabled/);
+    await card.click();
+    await this.page.waitForURL(`/campaigns/${campaignId}`);
+  }
+
+  /**
+   * Get the count of available (non-disabled) campaigns.
+   */
+  async getAvailableCampaignCount(): Promise<number> {
+    return this.campaignCards.filter({ hasNot: this.page.locator('.disabled') }).count();
+  }
+
+  /**
+   * Check if a campaign is locked.
+   */
+  async isCampaignLocked(campaignId: string): Promise<boolean> {
+    const card = this.getCampaignCard(campaignId);
+    const lockedBanner = card.locator('.locked-banner');
+    return lockedBanner.isVisible();
+  }
+
+  /**
+   * Check if a campaign is completed.
+   */
+  async isCampaignCompleted(campaignId: string): Promise<boolean> {
+    const card = this.getCampaignCard(campaignId);
+    const completedBanner = card.locator('.completed-banner');
+    return completedBanner.isVisible();
+  }
+
+  /**
+   * Check if the login warning is visible.
+   */
+  async isLoginWarningVisible(): Promise<boolean> {
+    const display = await this.loginWarning.evaluate(el => getComputedStyle(el).display);
+    return display !== 'none';
+  }
+}