Fix waypoint drag and drop.

The fix for https://github.com/dcs-liberation/dcs_liberation/issues/3037
wasn't complete. It seems this `- 1` was here to work around the UI
wrongly having two takeoff points... Now that we fixed that, this also
needs to go.

Fixes https://github.com/dcs-liberation/dcs_liberation/issues/3059.

(cherry picked from commit 02c9fe93c5)

.coveragerc

@@ -0,0 +1,8 @@
+[report]
+exclude_lines =
+    pragma: no cover
+    if TYPE_CHECKING:
+
+[run]
+branch = True
+source = game,pydcs_extensions,qt_ui,resources/tools

.git-blame-ignore-revs

@@ -0,0 +1,2 @@
+# Black
+a47bef1f1336fd264d0b175f4421758339a30acb

.gitattributes

@@ -0,0 +1,92 @@
+* text=auto
+*.pxd    text diff=python
+*.py     text diff=python
+*.py3    text diff=python
+*.pyw    text diff=python
+*.pyx    text diff=python
+*.pyz    text diff=python
+*.pyi    text diff=python
+*.db     binary
+*.p      binary
+*.pkl    binary
+*.pickle binary
+*.pyc    binary export-ignore
+*.pyo    binary export-ignore
+*.pyd    binary
+unshipped_data/arcgis_maps/ filter=lfs diff=lfs merge=lfs -text
+
+# https://github.com/alexkaratarakis/gitattributes/blob/master/Common.gitattributes
+# Documents
+*.bibtex   text diff=bibtex
+*.doc      diff=astextplain
+*.DOC      diff=astextplain
+*.docx     diff=astextplain
+*.DOCX     diff=astextplain
+*.dot      diff=astextplain
+*.DOT      diff=astextplain
+*.pdf      diff=astextplain
+*.PDF      diff=astextplain
+*.rtf      diff=astextplain
+*.RTF      diff=astextplain
+*.md       text diff=markdown
+*.mdx      text diff=markdown
+*.tex      text diff=tex
+*.adoc     text
+*.textile  text
+*.mustache text
+*.csv      text
+*.tab      text
+*.tsv      text
+*.txt      text
+*.sql      text
+*.epub     diff=astextplain
+
+# Graphics
+*.png      binary
+*.jpg      binary
+*.jpeg     binary
+*.gif      binary
+*.tif      binary
+*.tiff     binary
+*.ico      binary
+# SVG treated as text by default.
+*.svg      text
+# If you want to treat it as binary,
+# use the following line instead.
+# *.svg    binary
+*.eps      binary
+
+# Scripts
+*.bash     text eol=lf
+*.fish     text eol=lf
+*.sh       text eol=lf
+*.zsh      text eol=lf
+# These are explicitly windows files and should use crlf
+*.bat      text eol=crlf
+*.cmd      text eol=crlf
+*.ps1      text eol=crlf
+
+# Serialisation
+*.json     text
+*.toml     text
+*.xml      text
+*.yaml     text
+*.yml      text
+
+# Archives
+*.7z       binary
+*.gz       binary
+*.tar      binary
+*.tgz      binary
+*.zip      binary
+
+# Text files where line endings should be preserved
+*.patch    -text
+
+#
+# Exclude files from exporting
+#
+
+.gitattributes export-ignore
+.gitignore     export-ignore
+.gitkeep       export-ignore

.github/ISSUE_TEMPLATE/bug-report.yml

@@ -0,0 +1,83 @@
+---
+name: Bug report
+description: >
+  Use for any bug that happens after campaign generation. If the New Game wizard
+  failed, use the "New Game wizard failed" template instead.
+labels: bug
+body:
+  - type: markdown
+    attributes:
+      value: >
+        Before filing, please search the issue tracker to see if the issue has
+        already been reported.
+  - type: dropdown
+    validations:
+      required: true
+    attributes:
+      label: Affected versions
+      multiple: true
+      description: >
+        Select all DCS Liberation versions in which you have observed this bug.
+        You do not need to test all of them, but the information is useful if
+        you have it.
+
+
+        If you do not see your version listed here you are on an old release
+        that is not supported, and the bug may already be fixed in a newer
+        release. Check that the bug still exists in a newer release before
+        filing.
+
+
+        If the bug was found in a development build, select "Development build"
+        and provide a link to the build in the field below.
+      options:
+        - 7.1.0
+        - Development build
+  - type: textarea
+    attributes:
+      label: Build information
+      description:
+        The build information from the Help -> Report an issue window.
+  - type: textarea
+    attributes:
+      label: Description
+      description: >
+        Describe the bug. What went wrong? What did you expect to happen
+        instead? What steps should we take to reproduce the error? If an error
+        dialog was shown, include the full text.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Save game and other files
+      description: >
+        Attach any files needed to reproduce the bug here. **A save game is
+        required.** We typically cannot help without a save game (the
+        `.liberation.zip` file found in `%USERPROFILE%/Saved
+        Games/DCS/Liberation/Saves`), so most bugs filed without saved games
+        will be closed without investigation.
+
+
+        Other useful files to include are:
+
+
+        The Liberation log file. The log file is located at `<Liberation install
+        directory>/logs/liberation.log`. The log often includes data about
+        non-fatal errors that could be the root cause of the problem.
+
+
+        The `liberation_nextturn.miz` or a track file. This should always be
+        included for bugs where the mission was generated incorrectly or where
+        the in-game AI is misbehaving.
+
+
+        The `state.json` file for the most recently completed turn, located at
+        `<Liberation install directory>/state.json`. This file is essential for
+        investigating any issues with end-of-turn results processing.
+
+
+        You can attach files to the bug by dragging and dropping the file into
+        this text box. GitHub will not allow uploads of all file types, so
+        attach a zip of the files if needed.
+    validations:
+      required: true

.github/ISSUE_TEMPLATE/campaign_update.md

@@ -0,0 +1,28 @@
+---
+name: Campaign update submission
+about: Submit an update to a campaign you maintain.
+title: 'Update for <campaign name>'
+labels: campaign-update-submission
+assignees: ''
+
+---
+
+This form should only be used for submitted updated miz/json files for campaigns
+distributed with Liberation. If you are _requesting_ an update to a campaign, see
+https://github.com/dcs-liberation/dcs_liberation/wiki/Campaign-maintenance. If the
+campaign has an owner, it will be updated before release. If it does not, you can
+volunteer to own it.
+
+If you are not the owner of the campaign listed on
+https://github.com/dcs-liberation/dcs_liberation/wiki/Campaign-maintenance, please start
+there.
+
+Otherwise, delete everything above the line below and fill out the following form. Note:
+GitHub does not accept .miz files. You can either rename the file to .miz.txt or add the
+file to a .zip file.
+
+---
+
+* Campaign name:
+* Files:
+* Update summary (optional):

.github/ISSUE_TEMPLATE/config.yml

@@ -0,0 +1,19 @@
+blank_issues_enabled: false
+contact_links:
+  - name: FAQ
+    url: https://discord.gg/PXHA6AXw
+    about: Check to see if your issue is in the FAQ.
+  - name: Manual
+    url: https://github.com/dcs-liberation/dcs_liberation/wiki/
+  - name: Feature blocking DCS AI bugs
+    url: https://github.com/dcs-liberation/dcs_liberation#dcs-bugs
+    about: >
+      A list of known DCS bugs that prevent us from improving AI behavior. Check
+      the list before filing AI bugs here to see if it's something we know about
+      but cannot fix.
+  - name: DCS bugs
+    url: https://forums.eagle.ru/forum/119-dcs-world-27/
+    about: >
+      DCS bugs should be reported against DCS, not here. Occasionally we can add
+      workarounds for DCS bugs. Use the "Bug report" template if you can suggest
+      a workaround.

.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,21 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: enhancement
+assignees: ''
+
+---
+
+Before filing, please search the issue tracker to see if this feature has already been requested.
+
+If requesting a DCS AI feature, check If reporting a DCS AI bug, check https://github.com/dcs-liberation/dcs_liberation#dcs-bugs.
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

.github/ISSUE_TEMPLATE/mod_support.md

@@ -0,0 +1,12 @@
+---
+name: Mod support request
+about: Request Liberation support for new mods, or updates to existing mods 
+title: Add/update <mod name>
+labels: mod support
+assignees: ''
+
+---
+
+* Mod name:
+* Mod URL:
+* Update or new mod?

.github/ISSUE_TEMPLATE/new-game-bug.yml

@@ -0,0 +1,113 @@
+---
+name: New Game wizard failed
+description: >
+  Use for bugs that prevent the "New Game" wizard from completing successfully.
+  If the wizard completes without issue, use the normal bug report template.
+labels: bug
+body:
+  - type: markdown
+    attributes:
+      value: >
+        Before filing, please search the issue tracker to see if the issue has
+        already been reported.
+
+
+        If the bug is not related to campaign generation (the campaign was
+        created successfully and as expected), use the normal bug report
+        template instead, as this template will not include the information we
+        need. We are unable to investigate incomplete bug reports, so they will
+        be closed and you will be asked to refile. If you're unsure, use your
+        best guess. Needing to refile is not the end of the world :)
+  - type: dropdown
+    validations:
+      required: true
+    attributes:
+      label: Affected versions
+      multiple: true
+      description: >
+        Select all DCS Liberation versions in which you have observed this bug.
+        You do not need to test all of them, but the information is useful if
+        you have it.
+
+
+        If you do not see your version listed here you are on an old release
+        that is not supported, and the bug may already be fixed in a newer
+        release. Check that the bug still exists in a newer release before
+        filing.
+
+
+        If the bug was found in a development build, select "Development build"
+        and provide a link to the build in the field below.
+      options:
+        - 7.1.0
+        - Development build
+  - type: textarea
+    attributes:
+      label: Build information
+      description:
+        The build information from the Help -> Report an issue window.
+  - type: input
+    attributes:
+      label: Campaign name
+      description: >
+        The name of the campaign you selected. If the bug only occurs with a
+        custom campaign (or modifications to a stock campaign), upload the
+        campaign file as an attachment to the bug description field.
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Blue faction
+      description: >
+        The name of the blue faction you selected. If the bug only occurs with a
+        custom faction (or modifications to a stock faction), upload the faction
+        file as an attachment to the bug description field.
+    validations:
+      required: true
+  - type: input
+    attributes:
+      label: Red faction
+      description: >
+        The name of the red faction you selected. If the bug only occurs with a
+        custom faction (or modifications to a stock faction), upload the faction
+        file as an attachment to the bug description field.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Modifications to default settings
+      description: >
+        Describe any modifications you made to the default campaign generation
+        settings.
+  - type: textarea
+    attributes:
+      label: Description
+      description: >
+        Describe the bug. What went wrong? If an error dialog was shown, include
+        the full text.
+
+
+        Attach any relevant files such as custom campaign files or factions
+        here. You can attach files to the bug by dragging and dropping the file
+        into this text box. GitHub will not allow uploads of all file types, so
+        attach a zip of the files if needed.
+
+
+        If possible, also include the save game. If the bug prevented the game
+        from being generated at all this will not be possible, but if the bug is
+        that the wizard generated something incorrectly, the save game will help
+        us see what went wrong.
+    validations:
+      required: true
+  - type: textarea
+    attributes:
+      label: Log file
+      description: >
+        Attach the Liberation log file. The log file is located at `<Liberation
+        install directory>/logs/liberation.log`.
+
+
+        You can attach files to the bug by dragging and dropping the file into
+        this text box.
+    validations:
+      required: true

.github/actions/build-app/action.yaml

@@ -0,0 +1,22 @@
+name: Build Liberation package
+description: Assembles the full Liberation application.
+runs:
+  using: composite
+  steps:
+    - name: Build client
+      shell: powershell
+      run: |
+        cd client
+        npm run build
+
+    - name: Build binaries
+      shell: powershell
+      run: |
+        ./venv/scripts/activate
+        $env:PYTHONPATH=".;./pydcs"
+        pyinstaller pyinstaller.spec
+
+    - name: Install changelog
+      shell: powershell
+      run: |
+        Copy-Item .\changelog.md .\dist

.github/actions/mypy/action.yaml

@@ -0,0 +1,16 @@
+name: mypy
+description: Type checks Python code.
+runs:
+  using: composite
+  steps:
+    - name: mypy game
+      shell: powershell
+      run: |
+        ./venv/scripts/activate
+        mypy game
+
+    - name: mypy tests
+      shell: powershell
+      run: |
+        ./venv/scripts/activate
+        mypy tests

.github/actions/setup-liberation-js/action.yaml

@@ -0,0 +1,17 @@
+name: Liberation JS set-up
+description: Sets up the Liberation Javascript environment.
+runs:
+  using: composite
+  steps:
+    - name: Set up Node
+      uses: actions/setup-node@v2
+      with:
+        node-version: "16"
+        cache: npm
+        cache-dependency-path: client/package-lock.json
+
+    - name: npm ci
+      shell: powershell
+      run: |
+        cd client
+        npm ci

.github/actions/setup-liberation-python/action.yaml

@@ -0,0 +1,21 @@
+name: Liberation Python set-up
+description: Sets up the Liberation Python environment.
+runs:
+  using: composite
+  steps:
+    - name: Set up Python
+      uses: actions/setup-python@v2
+      with:
+        python-version: "3.11"
+        cache: pip
+
+    - name: Install environment
+      shell: powershell
+      run: |
+        python -m venv ./venv
+
+    - name: Install dependencies
+      shell: powershell
+      run: |
+        ./venv/scripts/activate
+        python -m pip install -r requirements.txt

.github/pull_request_template.md

@@ -0,0 +1,24 @@
+Pull requests should be made against the `develop` branch. Any backports
+necessary will be handled by the development team.
+
+Pull requests should be focused on one task. Multiple bug fixes should be
+multiple PRs. We cannot merge half a PR, and combined PRs are much more
+difficult to review. PRs that do not adhere to this will have their review
+delayed.
+
+Prefer rebase to merge, and squash commits as needed to preserve a readable
+commit history. This project maintains linear history in the develop branch, so
+we will either rebase or squash your PR when merging. It is much easier for us
+if your branch already has a readable commit history (ensure that your commit
+subject lines are clear enough to identify the patch in the git log). An
+exception to this is made for large PRs that are likely to require multiple
+rounds of review; in that case it's easier if you **don't** do this (GitHub
+does not preserve the history of old commits, so we cannot filter a PR for only
+new changes if a branch is force pushed) and we will squash it when merging.
+
+New features and bug fixes are usually worth mentioning in the changelog.
+Exceptions are fixes for bugs that never shipped (were only present in a canary
+build), and changes with no intended user observable behavior, such as a
+refactor. If you're comfortable writing the note yourself, add it to
+`changelog.md` in the root of the project in the section for the upcoming
+release.

.github/workflows/build.yml

@@ -0,0 +1,41 @@
+name: Build
+
+on: [push, pull_request]
+
+jobs:
+  lint:
+    uses: ./.github/workflows/lint.yml
+
+  test:
+    uses: ./.github/workflows/test.yml
+
+  build:
+    runs-on: windows-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          submodules: true
+
+      - name: Set up Python environment
+        uses: ./.github/actions/setup-liberation-python
+
+      - name: Set up JS environment
+        uses: ./.github/actions/setup-liberation-js
+
+      - name: Set build number
+        run: |
+          [IO.File]::WriteAllLines($pwd.path + "\resources\buildnumber", $env:GITHUB_RUN_NUMBER)
+          [IO.File]::WriteAllLines($pwd.path + "\resources\gitsha", $env:GITHUB_SHA)
+
+      - name: Build app
+        uses: ./.github/actions/build-app
+
+      - name: Create archive
+        run:
+          Compress-Archive -Path .\dist\dcs_liberation\ -DestinationPath
+          dist\dcs_liberation.zip
+
+      - uses: actions/upload-artifact@v2
+        with:
+          name: dcs_liberation
+          path: dist/dcs_liberation.zip

.github/workflows/lint.yml

@@ -0,0 +1,30 @@
+name: Python lint
+
+on: workflow_call
+
+jobs:
+  black:
+    name: Black
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-python@v2
+      - uses: psf/black@stable
+        with:
+          version: ~=22.12
+          src: "."
+          options: "--check"
+
+  mypy:
+    name: Type checking
+    runs-on: windows-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          submodules: true
+
+      - name: Set up Python environment
+        uses: ./.github/actions/setup-liberation-python
+
+      - name: mypy
+        uses: ./.github/actions/mypy

.github/workflows/release.yml

@@ -0,0 +1,84 @@
+name: Release Pipeline
+
+on:
+  push:
+    tags: ["*"]
+
+jobs:
+  lint:
+    uses: ./.github/workflows/lint.yml
+
+  test:
+    uses: ./.github/workflows/test.yml
+
+  build:
+    runs-on: windows-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          submodules: true
+
+      - name: Set up Python environment
+        uses: ./.github/actions/setup-liberation-python
+
+      - name: Set up JS environment
+        uses: ./.github/actions/setup-liberation-js
+
+      - name: Finalize build
+        run: |
+          New-Item -ItemType file resources\final
+
+      - name: Build app
+        uses: ./.github/actions/build-app
+        with:
+          release: true
+
+      - uses: actions/upload-artifact@v2
+        with:
+          name: dcs_liberation
+          path: dist/
+
+  release:
+    needs: [build]
+    runs-on: windows-latest
+    steps:
+      - uses: actions/download-artifact@v2
+        with:
+          name: dcs_liberation
+
+      - name: "Get Version"
+        id: version
+        env:
+          TAG_NAME: ${{ github.ref }}
+        run: |
+          Get-ChildItem -Recurse -Depth 1
+          $version = ($env:TAG_NAME -split "/") | Select-Object -Last 1
+          $prerelease = ("2.1.1-alpha3" -match '[^\.\d]').ToString().ToLower()
+          Write-Host $version
+          Write-Host $prerelease
+          Write-Output "::set-output name=number::$version"
+          Write-Output "::set-output name=prerelease::$prerelease"
+          $changelog = Get-Content .\changelog.md
+          $last_change = ($changelog | Select-String -Pattern "^#\s" | Select-Object -Skip 1 -First 1).LineNumber - 2
+          ($changelog | Select-Object -First $last_change) -join "`n" | Out-File .\releasenotes.md
+          Compress-Archive -Path .\dcs_liberation -DestinationPath "dcs_liberation.$version.zip" -Compression Optimal
+
+      - uses: actions/create-release@v1
+        id: create_release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          tag_name: ${{ github.ref }}
+          release_name: ${{ github.ref }}
+          body_path: releasenotes.md
+          draft: false
+          prerelease: ${{ steps.version.outputs.prerelease }}
+
+      - uses: actions/upload-release-asset@v1
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+        with:
+          upload_url: ${{ steps.create_release.outputs.upload_url }}
+          asset_path: ./dcs_liberation.${{ steps.version.outputs.number }}.zip
+          asset_name: dcs_liberation.${{ steps.version.outputs.number }}.zip
+          asset_content_type: application/zip

.github/workflows/test.yml

@@ -0,0 +1,38 @@
+name: Tests
+on: workflow_call
+jobs:
+  python-tests:
+    name: Python tests
+    runs-on: windows-latest
+    steps:
+      - uses: actions/checkout@v2
+        with:
+          submodules: true
+
+      - name: Set up Python environment
+        uses: ./.github/actions/setup-liberation-python
+
+      - name: run tests
+        run: |
+          ./venv/scripts/activate
+          pytest --cov --cov-report=xml tests
+
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v3
+
+  ts-tests:
+    name: Typescript tests
+    runs-on: windows-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Set up JS environment
+        uses: ./.github/actions/setup-liberation-js
+
+      - name: run tests
+        run: |
+          cd client
+          npm test -- --coverage
+
+      - name: Upload coverage reports to Codecov
+        uses: codecov/codecov-action@v3

.gitignore

@@ -1,13 +1,26 @@
 *.pyc
 __pycache__
 build/**
+# Sphinx
+docs/_build
 resources/payloads/*.lua
 venv
-logs.txt
 .DS_Store
+.vscode/settings.json
 dist/**
-a.py
-resources/tools/a.miz
-tests/**
+/.coverage
+/coverage.xml
 # User-specific stuff
 .idea/
+.env
+env/
+
+/kneeboards
+/liberation_preferences.json
+/state.json
+/serverconfig.env
+
+/logs/
+/resources/logging.yaml
+
+*.psd

.pre-commit-config.yaml

@@ -0,0 +1,6 @@
+repos:
+  - repo: https://github.com/psf/black
+    rev: 22.12.0
+    hooks:
+      - id: black
+        language_version: python3

.readthedocs.yaml

@@ -0,0 +1,13 @@
+version: 2
+
+build:
+  os: ubuntu-22.04
+  tools:
+    python: "3.11"
+
+sphinx:
+  configuration: docs/conf.py
+
+python:
+  install:
+    - requirements: docs/requirements.txt

.vscode/launch.json

@@ -0,0 +1,67 @@
+{
+  // Use IntelliSense to learn about possible attributes.
+  // Hover to view descriptions of existing attributes.
+  // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
+  "version": "0.2.0",
+  "configurations": [
+    {
+      "name": "Python: Main",
+      "type": "python",
+      "request": "launch",
+      "program": "qt_ui\\main.py",
+      "console": "integratedTerminal",
+      "env": {
+        "PYTHONPATH": ".;./pydcs"
+      },
+      "preLaunchTask": "Prepare Environment"
+    },
+    {
+      "name": "Python: Debug",
+      "type": "python",
+      "request": "launch",
+      "program": "qt_ui\\main.py",
+      "console": "integratedTerminal",
+      "env": {
+        "PYTHONPATH": ".;./pydcs",
+        "CORS_ALLOW_DEBUG_SERVER": "true"
+      },
+      "args": ["--dev"],
+      "preLaunchTask": "Prepare Environment"
+    },
+    {
+      "name": "Node: Development Server",
+      "type": "node",
+      "request": "launch",
+      "cwd": "${workspaceRoot}\\client",
+      "runtimeExecutable": "npm",
+      "runtimeArgs": [
+          "run", "start"
+      ],
+      "env": {
+        "BROWSER": "none"
+      },
+    },
+    {
+      "name": "Python: Make Release",
+      "type": "python",
+      "request": "launch",
+      "program": "resources\\tools\\mkrelease.py",
+      "console": "integratedTerminal",
+      "env": {
+        "PYTHONPATH": ".;./pydcs"
+      },
+      "preLaunchTask": "Prepare Environment"
+    },
+    {
+      "name": "Fix Layout orientation",
+      "type": "python",
+      "request": "launch",
+      "program": "resources\\tools\\fix_layout_orientation.py",
+      "console": "integratedTerminal",
+      "env": {
+        "PYTHONPATH": ".;./pydcs"
+      },
+      "args": ["resources/layouts/anti_air/S-300_Site.miz"]
+    },
+  ]
+}

.vscode/tasks.json

@@ -0,0 +1,35 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=733558
+  // for the documentation about the tasks.json format
+  "version": "2.0.0",
+  "tasks": [
+    {
+      "label": "Prepare Environment",
+      "type": "shell",
+      "isBackground":  false,
+      "problemMatcher": [],
+      "command": "powershell",
+      "args": [
+        "-Command",
+        "& {if (-not (Test-Path ${workspaceFolder}\\venv)) { python -m venv ${workspaceFolder}\\venv; . ${workspaceFolder}\\venv\\scripts\\activate.ps1; pip install -r requirements.txt; Copy-Item ${workspaceFolder}\\venv\\Lib\\site-packages\\shiboken2\\shiboken2.abi3.dll ${workspaceFolder}\\venv\\Lib\\site-packages\\PySide2 } }",
+      ],
+      "group": "build",
+      "options": {
+        "env": {
+          "PYTHONPATH": ".;./pydcs"
+        }
+      },
+      "presentation": {
+        "echo": true,
+        "reveal": "never",
+        "focus": false,
+        "panel": "shared",
+        "showReuseMessage": true,
+        "clear": false
+      },
+      "runOptions": {
+        "runOn": "folderOpen"
+      }
+    }
+  ]
+}

CODE_OF_CONDUCT.md

@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at khopa.studio@gmail.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

CONTRIBUTING.md

@@ -0,0 +1,26 @@
+First, note that we have a code of conduct, please follow it in all your interactions with the project.
+
+## Contributing as a non-developer
+ 
+* Report bugs by opening issues here on Github.
+* Help others users on Discord by answering their questions.
+* Raise awareness about the project, by making a video and/or a tutorial.
+
+Should you report a bug, please use the search bar at the top of the page to see if it has already been reported.
+Note that you may need to remove the filter for open bugs if it's something we've recently fixed.
+
+## Making content for Liberation
+
+You can create new campaigns : See [campaign creation wiki](https://github.com/dcs-liberation/dcs_liberation/wiki/Custom-Campaigns).
+You can also improve existing campaigns.
+
+You can then submit new campaigns on the "campaigns" channel on Discord, or by making a pull request if you are comfortable with git. 
+
+## Develop new features
+
+If you want to develop a new feature, we recommend you first open an issue describing the new feature and discuss it with us on Discord before starting development.
+However, feel free to work on any existing issue.
+
+## Pull requests
+
+Please submit your pull requests on the **develop** branch. We expect a description of its content, and when applicable, a reference to the issue(s) it is resolving.

LICENSE

@@ -0,0 +1,165 @@
+                   GNU LESSER GENERAL PUBLIC LICENSE
+                       Version 3, 29 June 2007
+
+ Copyright (C) 2007 Free Software Foundation, Inc. <http://fsf.org/>
+ Everyone is permitted to copy and distribute verbatim copies
+ of this license document, but changing it is not allowed.
+
+
+  This version of the GNU Lesser General Public License incorporates
+the terms and conditions of version 3 of the GNU General Public
+License, supplemented by the additional permissions listed below.
+
+  0. Additional Definitions.
+
+  As used herein, "this License" refers to version 3 of the GNU Lesser
+General Public License, and the "GNU GPL" refers to version 3 of the GNU
+General Public License.
+
+  "The Library" refers to a covered work governed by this License,
+other than an Application or a Combined Work as defined below.
+
+  An "Application" is any work that makes use of an interface provided
+by the Library, but which is not otherwise based on the Library.
+Defining a subclass of a class defined by the Library is deemed a mode
+of using an interface provided by the Library.
+
+  A "Combined Work" is a work produced by combining or linking an
+Application with the Library.  The particular version of the Library
+with which the Combined Work was made is also called the "Linked
+Version".
+
+  The "Minimal Corresponding Source" for a Combined Work means the
+Corresponding Source for the Combined Work, excluding any source code
+for portions of the Combined Work that, considered in isolation, are
+based on the Application, and not on the Linked Version.
+
+  The "Corresponding Application Code" for a Combined Work means the
+object code and/or source code for the Application, including any data
+and utility programs needed for reproducing the Combined Work from the
+Application, but excluding the System Libraries of the Combined Work.
+
+  1. Exception to Section 3 of the GNU GPL.
+
+  You may convey a covered work under sections 3 and 4 of this License
+without being bound by section 3 of the GNU GPL.
+
+  2. Conveying Modified Versions.
+
+  If you modify a copy of the Library, and, in your modifications, a
+facility refers to a function or data to be supplied by an Application
+that uses the facility (other than as an argument passed when the
+facility is invoked), then you may convey a copy of the modified
+version:
+
+   a) under this License, provided that you make a good faith effort to
+   ensure that, in the event an Application does not supply the
+   function or data, the facility still operates, and performs
+   whatever part of its purpose remains meaningful, or
+
+   b) under the GNU GPL, with none of the additional permissions of
+   this License applicable to that copy.
+
+  3. Object Code Incorporating Material from Library Header Files.
+
+  The object code form of an Application may incorporate material from
+a header file that is part of the Library.  You may convey such object
+code under terms of your choice, provided that, if the incorporated
+material is not limited to numerical parameters, data structure
+layouts and accessors, or small macros, inline functions and templates
+(ten or fewer lines in length), you do both of the following:
+
+   a) Give prominent notice with each copy of the object code that the
+   Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the object code with a copy of the GNU GPL and this license
+   document.
+
+  4. Combined Works.
+
+  You may convey a Combined Work under terms of your choice that,
+taken together, effectively do not restrict modification of the
+portions of the Library contained in the Combined Work and reverse
+engineering for debugging such modifications, if you also do each of
+the following:
+
+   a) Give prominent notice with each copy of the Combined Work that
+   the Library is used in it and that the Library and its use are
+   covered by this License.
+
+   b) Accompany the Combined Work with a copy of the GNU GPL and this license
+   document.
+
+   c) For a Combined Work that displays copyright notices during
+   execution, include the copyright notice for the Library among
+   these notices, as well as a reference directing the user to the
+   copies of the GNU GPL and this license document.
+
+   d) Do one of the following:
+
+       0) Convey the Minimal Corresponding Source under the terms of this
+       License, and the Corresponding Application Code in a form
+       suitable for, and under terms that permit, the user to
+       recombine or relink the Application with a modified version of
+       the Linked Version to produce a modified Combined Work, in the
+       manner specified by section 6 of the GNU GPL for conveying
+       Corresponding Source.
+
+       1) Use a suitable shared library mechanism for linking with the
+       Library.  A suitable mechanism is one that (a) uses at run time
+       a copy of the Library already present on the user's computer
+       system, and (b) will operate properly with a modified version
+       of the Library that is interface-compatible with the Linked
+       Version.
+
+   e) Provide Installation Information, but only if you would otherwise
+   be required to provide such information under section 6 of the
+   GNU GPL, and only to the extent that such information is
+   necessary to install and execute a modified version of the
+   Combined Work produced by recombining or relinking the
+   Application with a modified version of the Linked Version. (If
+   you use option 4d0, the Installation Information must accompany
+   the Minimal Corresponding Source and Corresponding Application
+   Code. If you use option 4d1, you must provide the Installation
+   Information in the manner specified by section 6 of the GNU GPL
+   for conveying Corresponding Source.)
+
+  5. Combined Libraries.
+
+  You may place library facilities that are a work based on the
+Library side by side in a single library together with other library
+facilities that are not Applications and are not covered by this
+License, and convey such a combined library under terms of your
+choice, if you do both of the following:
+
+   a) Accompany the combined library with a copy of the same work based
+   on the Library, uncombined with any other library facilities,
+   conveyed under the terms of this License.
+
+   b) Give prominent notice with the combined library that part of it
+   is a work based on the Library, and explaining where to find the
+   accompanying uncombined form of the same work.
+
+  6. Revised Versions of the GNU Lesser General Public License.
+
+  The Free Software Foundation may publish revised and/or new versions
+of the GNU Lesser General Public License from time to time. Such new
+versions will be similar in spirit to the present version, but may
+differ in detail to address new problems or concerns.
+
+  Each version is given a distinguishing version number. If the
+Library as you received it specifies that a certain numbered version
+of the GNU Lesser General Public License "or any later version"
+applies to it, you have the option of following the terms and
+conditions either of that published version or of any later version
+published by the Free Software Foundation. If the Library as you
+received it does not specify a version number of the GNU Lesser
+General Public License, you may choose any version of the GNU Lesser
+General Public License ever published by the Free Software Foundation.
+
+  If the Library as you received it specifies that a proxy can decide
+whether future versions of the GNU Lesser General Public License shall
+apply, that proxy's public statement of acceptance of any version is
+permanent authorization for you to choose that version for the
+Library.

README.md

@@ -1,12 +1,65 @@
-![Logo](https://i.imgur.com/c2k18E1.png)
+[![Logo](https://i.imgur.com/HJBT4BL.png)](https://shdwp.github.io/ukraine/)
 
-[DCS World](https://www.digitalcombatsimulator.com/en/products/world/) single-player semi dynamic campaign. 
+(Github Readme Banner and Splash screen Artwork by Andriy Dankovych, CC BY-SA 4.0)
 
-DCS Liberation uses [pydcs](http://github.com/pydcs/dcs) for mission generation
-and [Mist](https://github.com/mrSkortch/MissionScriptingTools) for mission scripting
+[![Patreon](https://img.shields.io/badge/patreon-become%20a%20patron-orange?logo=patreon)](https://patreon.com/khopa)
+
+[![Download](https://img.shields.io/github/downloads/dcs-liberation/dcs_liberation/total?label=Download)](https://github.com/dcs-liberation/dcs_liberation/releases)
+
+[![Discord](https://img.shields.io/discord/595702951800995872?label=Discord&logo=discord)](https://discord.gg/bKrtrkJ)
+
+[![codecov](https://codecov.io/gh/dcs-liberation/dcs_liberation/branch/develop/graph/badge.svg?token=EEQ7G76K2L)](https://codecov.io/gh/dcs-liberation/dcs_liberation)
+[![GitHub pull requests](https://img.shields.io/github/issues-pr/dcs-liberation/dcs_liberation)](https://github.com/dcs-liberation/dcs_liberation)
+[![GitHub issues](https://img.shields.io/github/issues/dcs-liberation/dcs_liberation)](https://github.com/dcs-liberation/dcs_liberation/issues)
+![GitHub stars](https://img.shields.io/github/stars/dcs-liberation/dcs_liberation?style=social)
+
+## About DCS Liberation
+DCS Liberation is a [DCS World](https://www.digitalcombatsimulator.com/en/products/world/) turn based single-player or co-op dynamic campaign. 
+It is an external program that generates full and complex DCS missions and manage a persistent combat environment.
+
+**Note that DCS Liberation does not support the stable release of DCS. We can
+only guarantee compatibility  with either  the open beta or the stable release,
+and more people play the open beta. DCS stable _might_ work sometimes, but it's
+untested, and we will be unable to fix any bugs unique to stable DCS.**
+
+![Screenshot](https://user-images.githubusercontent.com/315852/120939254-0b4a9f80-c6cc-11eb-82f5-ce3f8d714bfe.png)
+
+## Downloads
+
+Latest release is available here : https://github.com/dcs-liberation/dcs_liberation/releases
+
+To download preview builds of the next version of DCS Liberation, see https://github.com/dcs-liberation/dcs_liberation/wiki/Preview-builds.
+
+## DCS bugs
+
+These DCS bugs prevent us from improving AI behavior. Please upvote them! (But please
+_don't_ spam them with comments):
+
+* [A2A and SEAD escorts don't escort](https://forums.eagle.ru/topic/251798-options-for-alternate-ai-escort-behavior/?tab=comments#comment-4668033)
+* [DEAD can't use mixed loadouts effectively](https://forums.eagle.ru/topic/271941-ai-rtbs-after-firing-decoys-despite-full-load-of-bombs/)
+
+## Bugs and feature requests
+
+If you need to report a bug or want to suggest a new feature, you can do this on our [bug tracker](https://github.com/dcs-liberation/dcs_liberation/issues). In either case, please use the search bar at the top of the page to see if it has already been reported. Note that you may need to remove the filter for open bugs if it's something we've recently fixed.
+
+## Roadmap
+
+Our plans for future releases can be found on our [Projects page](https://github.com/dcs-liberation/dcs_liberation/projects). Each planned release has a Project, and the page for that project has columns for to do, in progress, and done. Items in the Done column are in the [preview build](https://github.com/dcs-liberation/dcs_liberation/wiki/Preview-builds) for that release. Items in the To do column are planned to be added to that release.
 
 ## Resources
 
-* [Getting Started](https://github.com/Khopa/dcs_liberation/wiki/Getting-started)
+Tutorials, contributors and developer's guides are available in the project's [Wiki](https://github.com/dcs-liberation/dcs_liberation/wiki/)
 
-* [Tutorials](https://github.com/Khopa/dcs_liberation/wiki/Tutorial-01-:-UI)
+## Special Thanks
+
+First, a big thanks to shdwp, for starting the original DCS Liberation project. 
+
+Then, DCS Liberation uses [pydcs](http://github.com/pydcs/dcs) for mission generation, and nothing would be possible without this.
+It also uses the popular [Mist](https://github.com/mrSkortch/MissionScriptingTools) lua framework for mission scripting.
+
+Excellent lua scripts DCS Liberation uses as plugins:
+
+* For the JTAC feature, DCS Liberation embeds Ciribob's JTAC Autolase [script](https://github.com/ciribob/DCS-JTACAutoLaze).
+* Walder's [Skynet-IADS](https://github.com/walder/Skynet-IADS) is used for Integrated Air Defense System.
+
+Please also show some support to these projects ! 

__init__.py

@@ -1,64 +0,0 @@
-#!/usr/bin/env python3
-import logging
-import os
-import re
-import sys
-
-import dcs
-
-import ui.corruptedsavemenu
-import ui.mainmenu
-import ui.newgamemenu
-import ui.window
-from game.game import Game
-from userdata import persistency, logging as logging_module
-
-assert len(sys.argv) >= 3, "__init__.py should be started with two mandatory arguments: %UserProfile% location and application version"
-
-persistency.setup(sys.argv[1])
-dcs.planes.FlyingType.payload_dirs = [os.path.join(os.path.dirname(os.path.realpath(__file__)), "resources\\payloads")]
-
-VERSION_STRING = sys.argv[2]
-logging_module.setup_version_string(VERSION_STRING)
-logging.info("Using {} as userdata folder".format(persistency.base_path()))
-
-
-def proceed_to_main_menu(game: Game):
-    m = ui.mainmenu.MainMenu(w, None, game)
-    m.display()
-
-
-def is_version_compatible(save_version):
-    current_version_components = re.split(r"[\._]", VERSION_STRING)
-    save_version_components = re.split(r"[\._]", save_version)
-
-    if "--ignore-save" in sys.argv:
-        return False
-
-    if current_version_components == save_version_components:
-        return True
-
-    if save_version in ["1.4_rc1", "1.4_rc2", "1.4_rc3", "1.4_rc4", "1.4_rc5", "1.4_rc6"]:
-        return False
-
-    if current_version_components[:2] == save_version_components[:2]:
-        return True
-
-    return False
-
-
-w = ui.window.Window()
-
-try:
-    game = persistency.restore_game()
-    if not game or not is_version_compatible(game.settings.version):
-        ui.newgamemenu.NewGameMenu(w, w.start_new_game).display()
-    else:
-        game.settings.version = VERSION_STRING
-        proceed_to_main_menu(game)
-except Exception as e:
-    logging.exception(e)
-    ui.corruptedsavemenu.CorruptedSaveMenu(w).display()
-
-w.run()
-

client/.gitignore

@@ -0,0 +1,26 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+.vscode/settings.json
+.vscode/tasks.json

client/.vscode/launch.json

@@ -0,0 +1,10 @@
+{
+    "configurations": [
+        {
+            "type": "pwa-chrome",
+            "name": "http://localhost:3000",
+            "request": "launch",
+            "url": "http://localhost:3000"
+        }
+    ]
+}

client/README.md

@@ -0,0 +1,76 @@
+# DCS Liberation Client
+
+This is a React app for the front-end of DCS Liberation. It is a work in
+progress that just barely implements the map. This is not useful for players
+yet.
+
+For development, set the following environment variables when launching DCS
+Liberation (the Qt UI):
+
+- `CORS_ALLOW_DEBUG_SERVER=true`
+
+  This will allow the front-end to make requests to the server, as long as the
+  front-end is running on http://localhost:3000.
+
+Then, run `npm start` to start the development server. Launch the Qt UI with
+`--new-map --dev` to connect the webview to the development server, or navigate
+to http://localhost:3000 in your browser.
+
+## Regenerating the API stubs
+
+The backend uses FastAPI which exposes `/openapi.json`. This is consumed by
+`@rtk-query/codegen-openapi` to automatically generate the API stubs in
+`src/api/liberationApi.ts`.
+
+If you make a change to the API surface the typescript API will need to be
+regenerated. To do this, first launch Liberation (to start the backend) and run
+
+```powershell
+npm run regenerate-api
+```
+
+See https://redux-toolkit.js.org/rtk-query/usage/code-generation for more
+information.
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.<br />
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.<br />
+You will also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.<br />
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.<br />
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.<br />
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can’t go back!**
+
+If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
+
+You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).

client/main.js

@@ -0,0 +1,57 @@
+const path = require("path");
+
+const { app, BrowserWindow } = require("electron");
+const isDev = require("electron-is-dev");
+const windowStateKeeper = require("electron-window-state");
+
+function createWindow() {
+  let mainWindowState = windowStateKeeper({
+    defaultWidth: 1000,
+    defaultHeight: 800,
+  });
+
+  // Create the browser window.
+  const win = new BrowserWindow({
+    x: mainWindowState.x,
+    y: mainWindowState.y,
+    width: mainWindowState.width,
+    height: mainWindowState.height,
+    show: false,
+    webPreferences: {
+      nodeIntegration: true,
+    },
+  });
+  mainWindowState.manage(win);
+
+  // and load the index.html of the app.
+  // win.loadFile("index.html");
+  win.loadURL(
+    isDev
+      ? "http://localhost:3000"
+      : `file://${path.join(__dirname, "../build/index.html")}`
+  );
+  // Open the DevTools.
+  if (isDev) {
+    win.webContents.openDevTools({ mode: "detach" });
+  }
+}
+
+// This method will be called when Electron has finished
+// initialization and is ready to create browser windows.
+// Some APIs can only be used after this event occurs.
+app.whenReady().then(createWindow);
+
+// Quit when all windows are closed, except on macOS. There, it's common
+// for applications and their menu bar to stay active until the user quits
+// explicitly with Cmd + Q.
+app.on("window-all-closed", () => {
+  if (process.platform !== "darwin") {
+    app.quit();
+  }
+});
+
+app.on("activate", () => {
+  if (BrowserWindow.getAllWindows().length === 0) {
+    createWindow();
+  }
+});

client/openapi-config.ts

@@ -0,0 +1,12 @@
+import { ConfigFile } from "@rtk-query/codegen-openapi";
+
+const config: ConfigFile = {
+  schemaFile: "http://[::1]:16880/openapi.json",
+  apiFile: "./src/api/baseApi.ts",
+  apiImport: "baseApi",
+  outputFile: "./src/api/_liberationApi.ts",
+  exportName: "_liberationApi",
+  hooks: true,
+};
+
+export default config;

client/package.json

@@ -0,0 +1,86 @@
+{
+  "name": "liberation-client",
+  "version": "0.1.0",
+  "private": true,
+  "main": "main.js",
+  "license": "LGPL-3.0-or-later",
+  "homepage": ".",
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.8.5",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^14.4.3",
+    "@types/jest": "^29.1.2",
+    "@types/node": "^18.8.3",
+    "@types/react": "^18.0.21",
+    "@types/react-dom": "^18.0.6",
+    "@types/react-redux": "^7.1.24",
+    "axios": "^1.1.2",
+    "electron-window-state": "^5.0.3",
+    "esri-leaflet": "^3.0.8",
+    "leaflet": "^1.9.2",
+    "leaflet-ruler": "^1.0.0",
+    "milsymbol": "^2.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-esri-leaflet": "^2.0.1",
+    "react-leaflet": "^4.1.0",
+    "react-redux": "^8.0.4",
+    "redux-logger": "^3.0.6",
+    "typescript": "~4.8.4"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build && generate-license-file --input package.json --output build/NOTICE",
+    "regenerate-api": "rtk-query-codegen-openapi ./openapi-config.ts",
+    "lint": "eslint src",
+    "prepare": "eslint src && license-checker --onlyAllow \"MIT;Apache-2.0;CC0-1.0;BSD-3-Clause;ISC;Custom: https://github.com/tmcw/jsonlint;BSD-2-Clause;Hippocratic-2.1;BSD*;WTFPL\" --excludePrivatePackages --production",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject",
+    "electron": "wait-on tcp:3000 && electron ."
+  },
+  "eslintConfig": {
+    "extends": "react-app"
+  },
+  "eslintIgnore": [
+    "leaflet-ruler.d.ts"
+  ],
+  "prettier": {
+    "endOfLine": "auto"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "devDependencies": {
+    "@rtk-query/codegen-openapi": "^1.0.0",
+    "@trivago/prettier-plugin-sort-imports": "^3.3.0",
+    "@types/leaflet": "^1.8.0",
+    "@types/redux-logger": "^3.0.9",
+    "@types/websocket": "^1.0.5",
+    "electron": "^21.1.0",
+    "electron-is-dev": "^2.0.0",
+    "generate-license-file": "^2.0.0",
+    "identity-obj-proxy": "^3.0.0",
+    "license-checker": "^25.0.1",
+    "react-scripts": "5.0.1",
+    "ts-node": "^10.9.1",
+    "wait-on": "^6.0.1"
+  },
+  "jest": {
+    "transformIgnorePatterns": [
+      "node_modules/(?!(@?react-leaflet|axios)/)"
+    ],
+    "moduleNameMapper": {
+      ".+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$": "identity-obj-proxy"
+    }
+  }
+}

client/public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React Redux App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

client/public/manifest.json

@@ -0,0 +1,25 @@
+{
+  "short_name": "React App",
+  "name": "Create React App Sample",
+  "icons": [
+    {
+      "src": "favicon.ico",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    },
+    {
+      "src": "logo192.png",
+      "type": "image/png",
+      "sizes": "192x192"
+    },
+    {
+      "src": "logo512.png",
+      "type": "image/png",
+      "sizes": "512x512"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

client/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

client/src/App.test.tsx

@@ -0,0 +1,12 @@
+import App from "./App";
+import { setupStore } from "./app/store";
+import { render } from "@testing-library/react";
+import { Provider } from "react-redux";
+
+test("app renders", () => {
+  render(
+    <Provider store={setupStore()}>
+      <App />
+    </Provider>
+  );
+});

client/src/App.tsx

@@ -0,0 +1,16 @@
+import LiberationMap from "./components/liberationmap";
+import useEventStream from "./hooks/useEventSteam";
+import useInitialGameState from "./hooks/useInitialGameState";
+
+function App() {
+  useInitialGameState();
+  useEventStream();
+
+  return (
+    <div className="App">
+      <LiberationMap />
+    </div>
+  );
+}
+
+export default App;

client/src/api/_liberationApi.ts

@@ -0,0 +1,524 @@
+import { baseApi as api } from "./baseApi";
+
+const injectedRtkApi = api.injectEndpoints({
+  endpoints: (build) => ({
+    listControlPoints: build.query<
+      ListControlPointsApiResponse,
+      ListControlPointsApiArg
+    >({
+      query: () => ({ url: `/control-points/` }),
+    }),
+    getControlPointById: build.query<
+      GetControlPointByIdApiResponse,
+      GetControlPointByIdApiArg
+    >({
+      query: (queryArg) => ({ url: `/control-points/${queryArg.cpId}` }),
+    }),
+    controlPointDestinationInRange: build.query<
+      ControlPointDestinationInRangeApiResponse,
+      ControlPointDestinationInRangeApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/control-points/${queryArg.cpId}/destination-in-range`,
+        params: { lat: queryArg.lat, lng: queryArg.lng },
+      }),
+    }),
+    setControlPointDestination: build.mutation<
+      SetControlPointDestinationApiResponse,
+      SetControlPointDestinationApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/control-points/${queryArg.cpId}/destination`,
+        method: "PUT",
+        body: queryArg.body,
+      }),
+    }),
+    clearControlPointDestination: build.mutation<
+      ClearControlPointDestinationApiResponse,
+      ClearControlPointDestinationApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/control-points/${queryArg.cpId}/cancel-travel`,
+        method: "PUT",
+      }),
+    }),
+    getDebugHoldZones: build.query<
+      GetDebugHoldZonesApiResponse,
+      GetDebugHoldZonesApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/debug/waypoint-geometries/hold/${queryArg.flightId}`,
+      }),
+    }),
+    getDebugIpZones: build.query<
+      GetDebugIpZonesApiResponse,
+      GetDebugIpZonesApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/debug/waypoint-geometries/ip/${queryArg.flightId}`,
+      }),
+    }),
+    getDebugJoinZones: build.query<
+      GetDebugJoinZonesApiResponse,
+      GetDebugJoinZonesApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/debug/waypoint-geometries/join/${queryArg.flightId}`,
+      }),
+    }),
+    listFlights: build.query<ListFlightsApiResponse, ListFlightsApiArg>({
+      query: (queryArg) => ({
+        url: `/flights/`,
+        params: { with_waypoints: queryArg.withWaypoints },
+      }),
+    }),
+    getFlightById: build.query<GetFlightByIdApiResponse, GetFlightByIdApiArg>({
+      query: (queryArg) => ({
+        url: `/flights/${queryArg.flightId}`,
+        params: { with_waypoints: queryArg.withWaypoints },
+      }),
+    }),
+    getCommitBoundaryForFlight: build.query<
+      GetCommitBoundaryForFlightApiResponse,
+      GetCommitBoundaryForFlightApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/flights/${queryArg.flightId}/commit-boundary`,
+      }),
+    }),
+    listFrontLines: build.query<
+      ListFrontLinesApiResponse,
+      ListFrontLinesApiArg
+    >({
+      query: () => ({ url: `/front-lines/` }),
+    }),
+    getFrontLineById: build.query<
+      GetFrontLineByIdApiResponse,
+      GetFrontLineByIdApiArg
+    >({
+      query: (queryArg) => ({ url: `/front-lines/${queryArg.frontLineId}` }),
+    }),
+    getGameState: build.query<GetGameStateApiResponse, GetGameStateApiArg>({
+      query: () => ({ url: `/game/` }),
+    }),
+    getTerrainZones: build.query<
+      GetTerrainZonesApiResponse,
+      GetTerrainZonesApiArg
+    >({
+      query: () => ({ url: `/map-zones/terrain` }),
+    }),
+    listUnculledZones: build.query<
+      ListUnculledZonesApiResponse,
+      ListUnculledZonesApiArg
+    >({
+      query: () => ({ url: `/map-zones/unculled` }),
+    }),
+    getThreatZones: build.query<
+      GetThreatZonesApiResponse,
+      GetThreatZonesApiArg
+    >({
+      query: () => ({ url: `/map-zones/threats` }),
+    }),
+    getNavmesh: build.query<GetNavmeshApiResponse, GetNavmeshApiArg>({
+      query: (queryArg) => ({
+        url: `/navmesh/`,
+        params: { for_player: queryArg.forPlayer },
+      }),
+    }),
+    openNewFrontLinePackageDialog: build.mutation<
+      OpenNewFrontLinePackageDialogApiResponse,
+      OpenNewFrontLinePackageDialogApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/qt/create-package/front-line/${queryArg.frontLineId}`,
+        method: "POST",
+      }),
+    }),
+    openNewTgoPackageDialog: build.mutation<
+      OpenNewTgoPackageDialogApiResponse,
+      OpenNewTgoPackageDialogApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/qt/create-package/tgo/${queryArg.tgoId}`,
+        method: "POST",
+      }),
+    }),
+    openTgoInfoDialog: build.mutation<
+      OpenTgoInfoDialogApiResponse,
+      OpenTgoInfoDialogApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/qt/info/tgo/${queryArg.tgoId}`,
+        method: "POST",
+      }),
+    }),
+    openNewControlPointPackageDialog: build.mutation<
+      OpenNewControlPointPackageDialogApiResponse,
+      OpenNewControlPointPackageDialogApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/qt/create-package/control-point/${queryArg.cpId}`,
+        method: "POST",
+      }),
+    }),
+    openControlPointInfoDialog: build.mutation<
+      OpenControlPointInfoDialogApiResponse,
+      OpenControlPointInfoDialogApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/qt/info/control-point/${queryArg.cpId}`,
+        method: "POST",
+      }),
+    }),
+    listSupplyRoutes: build.query<
+      ListSupplyRoutesApiResponse,
+      ListSupplyRoutesApiArg
+    >({
+      query: () => ({ url: `/supply-routes/` }),
+    }),
+    listTgos: build.query<ListTgosApiResponse, ListTgosApiArg>({
+      query: () => ({ url: `/tgos/` }),
+    }),
+    getTgoById: build.query<GetTgoByIdApiResponse, GetTgoByIdApiArg>({
+      query: (queryArg) => ({ url: `/tgos/${queryArg.tgoId}` }),
+    }),
+    listAllWaypointsForFlight: build.query<
+      ListAllWaypointsForFlightApiResponse,
+      ListAllWaypointsForFlightApiArg
+    >({
+      query: (queryArg) => ({ url: `/waypoints/${queryArg.flightId}` }),
+    }),
+    setWaypointPosition: build.mutation<
+      SetWaypointPositionApiResponse,
+      SetWaypointPositionApiArg
+    >({
+      query: (queryArg) => ({
+        url: `/waypoints/${queryArg.flightId}/${queryArg.waypointIdx}/position`,
+        method: "POST",
+        body: queryArg.leafletPoint,
+      }),
+    }),
+    getIadsNetwork: build.query<
+      GetIadsNetworkApiResponse,
+      GetIadsNetworkApiArg
+    >({
+      query: () => ({ url: `/iads-network/` }),
+    }),
+    getIadsConnectionsForTgo: build.query<
+      GetIadsConnectionsForTgoApiResponse,
+      GetIadsConnectionsForTgoApiArg
+    >({
+      query: (queryArg) => ({ url: `/iads-network/for-tgo/${queryArg.tgoId}` }),
+    }),
+  }),
+  overrideExisting: false,
+});
+export { injectedRtkApi as _liberationApi };
+export type ListControlPointsApiResponse =
+  /** status 200 Successful Response */ ControlPoint[];
+export type ListControlPointsApiArg = void;
+export type GetControlPointByIdApiResponse =
+  /** status 200 Successful Response */ ControlPoint;
+export type GetControlPointByIdApiArg = {
+  cpId: string;
+};
+export type ControlPointDestinationInRangeApiResponse =
+  /** status 200 Successful Response */ boolean;
+export type ControlPointDestinationInRangeApiArg = {
+  cpId: string;
+  lat: number;
+  lng: number;
+};
+export type SetControlPointDestinationApiResponse =
+  /** status 204 Successful Response */ undefined;
+export type SetControlPointDestinationApiArg = {
+  cpId: string;
+  body: LatLng;
+};
+export type ClearControlPointDestinationApiResponse =
+  /** status 204 Successful Response */ undefined;
+export type ClearControlPointDestinationApiArg = {
+  cpId: string;
+};
+export type GetDebugHoldZonesApiResponse =
+  /** status 200 Successful Response */ HoldZones;
+export type GetDebugHoldZonesApiArg = {
+  flightId: string;
+};
+export type GetDebugIpZonesApiResponse =
+  /** status 200 Successful Response */ IpZones;
+export type GetDebugIpZonesApiArg = {
+  flightId: string;
+};
+export type GetDebugJoinZonesApiResponse =
+  /** status 200 Successful Response */ JoinZones;
+export type GetDebugJoinZonesApiArg = {
+  flightId: string;
+};
+export type ListFlightsApiResponse =
+  /** status 200 Successful Response */ Flight[];
+export type ListFlightsApiArg = {
+  withWaypoints?: boolean;
+};
+export type GetFlightByIdApiResponse =
+  /** status 200 Successful Response */ Flight;
+export type GetFlightByIdApiArg = {
+  flightId: string;
+  withWaypoints?: boolean;
+};
+export type GetCommitBoundaryForFlightApiResponse =
+  /** status 200 Successful Response */ LatLng[][];
+export type GetCommitBoundaryForFlightApiArg = {
+  flightId: string;
+};
+export type ListFrontLinesApiResponse =
+  /** status 200 Successful Response */ FrontLine[];
+export type ListFrontLinesApiArg = void;
+export type GetFrontLineByIdApiResponse =
+  /** status 200 Successful Response */ FrontLine;
+export type GetFrontLineByIdApiArg = {
+  frontLineId: string;
+};
+export type GetGameStateApiResponse =
+  /** status 200 Successful Response */ Game;
+export type GetGameStateApiArg = void;
+export type GetTerrainZonesApiResponse =
+  /** status 200 Successful Response */ MapZones;
+export type GetTerrainZonesApiArg = void;
+export type ListUnculledZonesApiResponse =
+  /** status 200 Successful Response */ UnculledZone[];
+export type ListUnculledZonesApiArg = void;
+export type GetThreatZonesApiResponse =
+  /** status 200 Successful Response */ ThreatZoneContainer;
+export type GetThreatZonesApiArg = void;
+export type GetNavmeshApiResponse =
+  /** status 200 Successful Response */ NavMesh;
+export type GetNavmeshApiArg = {
+  forPlayer: boolean;
+};
+export type OpenNewFrontLinePackageDialogApiResponse =
+  /** status 200 Successful Response */ any;
+export type OpenNewFrontLinePackageDialogApiArg = {
+  frontLineId: string;
+};
+export type OpenNewTgoPackageDialogApiResponse =
+  /** status 200 Successful Response */ any;
+export type OpenNewTgoPackageDialogApiArg = {
+  tgoId: string;
+};
+export type OpenTgoInfoDialogApiResponse =
+  /** status 200 Successful Response */ any;
+export type OpenTgoInfoDialogApiArg = {
+  tgoId: string;
+};
+export type OpenNewControlPointPackageDialogApiResponse =
+  /** status 200 Successful Response */ any;
+export type OpenNewControlPointPackageDialogApiArg = {
+  cpId: string;
+};
+export type OpenControlPointInfoDialogApiResponse =
+  /** status 200 Successful Response */ any;
+export type OpenControlPointInfoDialogApiArg = {
+  cpId: string;
+};
+export type ListSupplyRoutesApiResponse =
+  /** status 200 Successful Response */ SupplyRoute[];
+export type ListSupplyRoutesApiArg = void;
+export type ListTgosApiResponse = /** status 200 Successful Response */ Tgo[];
+export type ListTgosApiArg = void;
+export type GetTgoByIdApiResponse = /** status 200 Successful Response */ Tgo;
+export type GetTgoByIdApiArg = {
+  tgoId: string;
+};
+export type ListAllWaypointsForFlightApiResponse =
+  /** status 200 Successful Response */ Waypoint[];
+export type ListAllWaypointsForFlightApiArg = {
+  flightId: string;
+};
+export type SetWaypointPositionApiResponse =
+  /** status 204 Successful Response */ undefined;
+export type SetWaypointPositionApiArg = {
+  flightId: string;
+  waypointIdx: number;
+  leafletPoint: LatLng;
+};
+export type GetIadsNetworkApiResponse =
+  /** status 200 Successful Response */ IadsNetwork;
+export type GetIadsNetworkApiArg = void;
+export type GetIadsConnectionsForTgoApiResponse =
+  /** status 200 Successful Response */ IadsConnection[];
+export type GetIadsConnectionsForTgoApiArg = {
+  tgoId: string;
+};
+export type LatLng = {
+  lat: number;
+  lng: number;
+};
+export type ControlPoint = {
+  id: string;
+  name: string;
+  blue: boolean;
+  position: LatLng;
+  mobile: boolean;
+  destination?: LatLng;
+  sidc: string;
+};
+export type ValidationError = {
+  loc: (string | number)[];
+  msg: string;
+  type: string;
+};
+export type HttpValidationError = {
+  detail?: ValidationError[];
+};
+export type HoldZones = {
+  homeBubble: LatLng[][];
+  targetBubble: LatLng[][];
+  joinBubble: LatLng[][];
+  excludedZones: LatLng[][][];
+  permissibleZones: LatLng[][][];
+  preferredLines: LatLng[][];
+};
+export type IpZones = {
+  homeBubble: LatLng[][];
+  ipBubble: LatLng[][];
+  permissibleZone: LatLng[][];
+  safeZones: LatLng[][][];
+};
+export type JoinZones = {
+  homeBubble: LatLng[][];
+  targetBubble: LatLng[][];
+  ipBubble: LatLng[][];
+  excludedZones: LatLng[][][];
+  permissibleZones: LatLng[][][];
+  preferredLines: LatLng[][];
+};
+export type Waypoint = {
+  name: string;
+  position: LatLng;
+  altitude_ft: number;
+  altitude_reference: string;
+  is_movable: boolean;
+  should_mark: boolean;
+  include_in_path: boolean;
+  timing: string;
+};
+export type Flight = {
+  id: string;
+  blue: boolean;
+  position?: LatLng;
+  sidc: string;
+  waypoints?: Waypoint[];
+};
+export type FrontLine = {
+  id: string;
+  extents: LatLng[];
+};
+export type Tgo = {
+  id: string;
+  name: string;
+  control_point_name: string;
+  category: string;
+  blue: boolean;
+  position: LatLng;
+  units: string[];
+  threat_ranges: number[];
+  detection_ranges: number[];
+  dead: boolean;
+  sidc: string;
+};
+export type SupplyRoute = {
+  id: string;
+  points: LatLng[];
+  front_active: boolean;
+  is_sea: boolean;
+  blue: boolean;
+  active_transports: string[];
+};
+export type IadsConnection = {
+  id: string;
+  points: LatLng[];
+  node: string;
+  connected: string;
+  active: boolean;
+  blue: boolean;
+  is_power: boolean;
+};
+export type IadsNetwork = {
+  advanced: boolean;
+  connections: IadsConnection[];
+};
+export type ThreatZones = {
+  full: LatLng[][][];
+  aircraft: LatLng[][][];
+  air_defenses: LatLng[][][];
+  radar_sams: LatLng[][][];
+};
+export type ThreatZoneContainer = {
+  blue: ThreatZones;
+  red: ThreatZones;
+};
+export type NavMeshPoly = {
+  poly: LatLng[][];
+  threatened: boolean;
+};
+export type NavMesh = {
+  polys: NavMeshPoly[];
+};
+export type NavMeshes = {
+  blue: NavMesh;
+  red: NavMesh;
+};
+export type UnculledZone = {
+  position: LatLng;
+  radius: number;
+};
+export type Game = {
+  control_points: ControlPoint[];
+  tgos: Tgo[];
+  supply_routes: SupplyRoute[];
+  front_lines: FrontLine[];
+  flights: Flight[];
+  iads_network: IadsNetwork;
+  threat_zones: ThreatZoneContainer;
+  navmeshes: NavMeshes;
+  map_center?: LatLng;
+  unculled_zones: UnculledZone[];
+};
+export type MapZones = {
+  inclusion: LatLng[][][];
+  exclusion: LatLng[][][];
+  sea: LatLng[][][];
+};
+export const {
+  useListControlPointsQuery,
+  useGetControlPointByIdQuery,
+  useControlPointDestinationInRangeQuery,
+  useSetControlPointDestinationMutation,
+  useClearControlPointDestinationMutation,
+  useGetDebugHoldZonesQuery,
+  useGetDebugIpZonesQuery,
+  useGetDebugJoinZonesQuery,
+  useListFlightsQuery,
+  useGetFlightByIdQuery,
+  useGetCommitBoundaryForFlightQuery,
+  useListFrontLinesQuery,
+  useGetFrontLineByIdQuery,
+  useGetGameStateQuery,
+  useGetTerrainZonesQuery,
+  useListUnculledZonesQuery,
+  useGetThreatZonesQuery,
+  useGetNavmeshQuery,
+  useOpenNewFrontLinePackageDialogMutation,
+  useOpenNewTgoPackageDialogMutation,
+  useOpenTgoInfoDialogMutation,
+  useOpenNewControlPointPackageDialogMutation,
+  useOpenControlPointInfoDialogMutation,
+  useListSupplyRoutesQuery,
+  useListTgosQuery,
+  useGetTgoByIdQuery,
+  useListAllWaypointsForFlightQuery,
+  useSetWaypointPositionMutation,
+  useGetIadsNetworkQuery,
+  useGetIadsConnectionsForTgoQuery,
+} = injectedRtkApi;

client/src/api/actions.ts

@@ -0,0 +1,5 @@
+import { Game } from "./liberationApi";
+import { createAction } from "@reduxjs/toolkit";
+
+export const gameLoaded = createAction<Game>("game/loaded");
+export const gameUnloaded = createAction("game/unloaded");

client/src/api/backend.ts

@@ -0,0 +1,15 @@
+import axios from "axios";
+
+const backendAddr =
+  new URL(window.location.toString()).searchParams.get("server") ??
+  "[::1]:16880";
+
+export const HTTP_URL = `http://${backendAddr}/`;
+
+export const backend = axios.create({
+  baseURL: HTTP_URL,
+});
+
+export const WEBSOCKET_URL = `ws://${backendAddr}/eventstream`;
+
+export default backend;

client/src/api/baseApi.ts

@@ -0,0 +1,7 @@
+import { HTTP_URL } from "./backend";
+import { createApi, fetchBaseQuery } from "@reduxjs/toolkit/query/react";
+
+export const baseApi = createApi({
+  baseQuery: fetchBaseQuery({ baseUrl: HTTP_URL }),
+  endpoints: () => ({}),
+});

client/src/api/combat.ts

@@ -0,0 +1,8 @@
+import { LatLng } from "leaflet";
+
+export default interface Combat {
+  id: string;
+  flight_position: LatLng | null;
+  target_positions: LatLng[] | null;
+  footprint: LatLng[][] | null;
+}

client/src/api/combatSlice.ts

@@ -0,0 +1,49 @@
+import { RootState } from "../app/store";
+import { gameLoaded, gameUnloaded } from "./actions";
+import Combat from "./combat";
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+
+interface CombatState {
+  combat: { [key: string]: Combat };
+}
+
+const initialState: CombatState = {
+  combat: {},
+};
+
+export const combatSlice = createSlice({
+  name: "combat",
+  initialState,
+  reducers: {
+    newCombats: (state, action: PayloadAction<Combat[]>) => {
+      for (const combat of action.payload) {
+        state.combat[combat.id] = combat;
+      }
+    },
+    updateCombats: (state, action: PayloadAction<Combat[]>) => {
+      for (const combat of action.payload) {
+        state.combat[combat.id] = combat;
+      }
+    },
+    endCombats: (state, action: PayloadAction<string[]>) => {
+      for (const cID of action.payload) {
+        delete state.combat[cID];
+      }
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(gameLoaded, (state, action) => {
+      state.combat = {};
+    });
+    builder.addCase(gameUnloaded, (state) => {
+      state.combat = {};
+    });
+  },
+});
+
+export const { newCombats, updateCombats, endCombats } =
+  combatSlice.actions;
+
+export const selectCombat = (state: RootState) => state.combat;
+
+export default combatSlice.reducer;

client/src/api/controlPointsSlice.ts

@@ -0,0 +1,44 @@
+import { RootState } from "../app/store";
+import { gameLoaded, gameUnloaded } from "./actions";
+import { ControlPoint } from "./liberationApi";
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+
+interface ControlPointsState {
+  controlPoints: { [key: string]: ControlPoint };
+}
+
+const initialState: ControlPointsState = {
+  controlPoints: {},
+};
+
+export const controlPointsSlice = createSlice({
+  name: "controlPoints",
+  initialState,
+  reducers: {
+    updateControlPoint: (state, action: PayloadAction<ControlPoint[]>) => {
+      for (const cp of action.payload) {
+        state.controlPoints[cp.id] = cp;
+      }
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(gameLoaded, (state, action) => {
+      state.controlPoints = action.payload.control_points.reduce(
+        (acc: { [key: string]: ControlPoint }, curr) => {
+          acc[curr.id] = curr;
+          return acc;
+        },
+        {}
+      );
+    });
+    builder.addCase(gameUnloaded, (state) => {
+      state.controlPoints = {};
+    });
+  },
+});
+
+export const { updateControlPoint } = controlPointsSlice.actions;
+
+export const selectControlPoints = (state: RootState) => state.controlPoints;
+
+export default controlPointsSlice.reducer;

client/src/api/eventstream.tsx

@@ -0,0 +1,149 @@
+import { AppDispatch } from "../app/store";
+import { gameUnloaded } from "./actions";
+import Combat from "./combat";
+import { endCombats, newCombats, updateCombats } from "./combatSlice";
+import { updateControlPoint } from "./controlPointsSlice";
+import {
+  deselectFlight,
+  registerFlights,
+  selectFlight,
+  unregisterFlights,
+  updateFlights,
+  updateFlightPositions,
+} from "./flightsSlice";
+import {
+  deleteFrontLine,
+  updateFrontLine,
+} from "./frontLinesSlice";
+import reloadGameState from "./gamestate";
+import {
+  ControlPoint,
+  Flight,
+  FrontLine,
+  IadsConnection,
+  NavMesh,
+  Tgo,
+  ThreatZones,
+  UnculledZone,
+} from "./liberationApi";
+import { navMeshUpdated } from "./navMeshSlice";
+import { updateTgo } from "./tgosSlice";
+import { threatZonesUpdated } from "./threatZonesSlice";
+import { unculledZonesUpdated } from "./unculledZonesSlice";
+import { LatLng } from "leaflet";
+import { updateIadsConnection, removeIadsConnection } from "./iadsNetworkSlice";
+
+interface GameUpdateEvents {
+  updated_flight_positions: { [id: string]: LatLng };
+  new_combats: Combat[];
+  updated_combats: Combat[];
+  ended_combats: string[];
+  navmesh_updates: {blue: boolean, mesh: NavMesh}[];
+  updated_unculled_zones: UnculledZone[];
+  threat_zones_updated: {blue: boolean, zones: ThreatZones}[];
+  new_flights: Flight[];
+  updated_flights: Flight[];
+  deleted_flights: string[];
+  selected_flight: string | null;
+  deselected_flight: boolean;
+  updated_front_lines: FrontLine[];
+  deleted_front_lines: string[];
+  updated_tgos: Tgo[];
+  updated_control_points: ControlPoint[];
+  updated_iads: IadsConnection[];
+  deleted_iads: string[];
+  reset_on_map_center: LatLng | null;
+  game_unloaded: boolean;
+  new_turn: boolean;
+}
+
+export const handleStreamedEvents = (
+  dispatch: AppDispatch,
+  events: GameUpdateEvents
+) => {
+  if (Object.keys(events.updated_flight_positions).length) {
+    dispatch(
+      updateFlightPositions(Object.entries(events.updated_flight_positions))
+    );
+  }
+
+  if (events.new_combats.length > 0) {
+    dispatch(newCombats(events.new_combats));
+  }
+
+  if (events.updated_combats.length > 0) {
+    dispatch(updateCombats(events.updated_combats));
+  }
+
+  if (events.ended_combats.length > 0) {
+    dispatch(endCombats(events.ended_combats));
+  }
+
+  if (Object.keys(events.navmesh_updates).length > 0) {
+    dispatch(navMeshUpdated(events.navmesh_updates));
+  }
+
+  if (events.updated_unculled_zones.length > 0) {
+    dispatch(unculledZonesUpdated(events.updated_unculled_zones));
+  }
+
+  if (Object.keys(events.threat_zones_updated).length > 0) {
+    dispatch(threatZonesUpdated(events.threat_zones_updated));
+  }
+
+  if (events.new_flights.length > 0) {
+    dispatch(registerFlights(events.new_flights));
+  }
+
+  if (events.updated_flights.length > 0) {
+    dispatch(updateFlights(events.updated_flights));
+  }
+
+  if (events.deleted_flights.length > 0) {
+    dispatch(unregisterFlights(events.deleted_flights));
+  }
+
+  if (events.deselected_flight) {
+    dispatch(deselectFlight());
+  }
+
+  if (events.selected_flight != null) {
+    dispatch(selectFlight(events.selected_flight));
+  }
+
+  if (events.updated_front_lines.length > 0) {
+    dispatch(updateFrontLine(events.updated_front_lines));
+  }
+
+  if (events.deleted_front_lines.length > 0) {
+    dispatch(deleteFrontLine(events.deleted_front_lines));
+  }
+
+  if (events.updated_tgos.length > 0) {
+    dispatch(updateTgo(events.updated_tgos));
+  }
+
+  if (events.updated_control_points.length > 0) {
+      dispatch(updateControlPoint(events.updated_control_points));
+  }
+
+  if (events.deleted_iads.length > 0) {
+    dispatch(removeIadsConnection(events.deleted_iads));
+  }
+
+  if (events.updated_iads.length > 0) {
+    dispatch(updateIadsConnection(events.updated_iads));
+  }
+
+  if (events.reset_on_map_center != null) {
+    reloadGameState(dispatch);
+  }
+
+  if (events.game_unloaded) {
+    dispatch(gameUnloaded());
+  }
+
+  if (events.new_turn) {
+    reloadGameState(dispatch, true);
+  }
+};

client/src/api/flightsSlice.ts

@@ -0,0 +1,89 @@
+import { RootState } from "../app/store";
+import { gameLoaded, gameUnloaded } from "./actions";
+import { Flight } from "./liberationApi";
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+import { LatLng } from "leaflet";
+
+interface FlightsState {
+  flights: { [id: string]: Flight };
+  selected: string | null;
+}
+
+const initialState: FlightsState = {
+  flights: {},
+  selected: null,
+};
+
+export const flightsSlice = createSlice({
+  name: "flights",
+  initialState,
+  reducers: {
+    registerFlights: (state, action: PayloadAction<Flight[]>) => {
+      for (const flight of action.payload) {
+        if (flight.id in state.flights) {
+          console.log(`Overriding flight with ID: ${flight.id}`);
+        }
+        state.flights[flight.id] = flight;
+      }
+    },
+    unregisterFlights: (state, action: PayloadAction<string[]>) => {
+      for (const id of action.payload) {
+        delete state.flights[id];
+      }
+    },
+    updateFlights: (state, action: PayloadAction<Flight[]>) => {
+      for (const flight of action.payload) {
+        state.flights[flight.id] = flight;
+      }
+    },
+    deselectFlight: (state) => {
+      state.selected = null;
+    },
+    selectFlight: (state, action: PayloadAction<string>) => {
+      state.selected = action.payload;
+    },
+    updateFlightPositions: (
+      state,
+      action: PayloadAction<[string, LatLng][]>
+    ) => {
+      for (const [id, position] of action.payload) {
+        state.flights[id].position = position;
+      }
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(gameLoaded, (state, action) => {
+      state.selected = null;
+      state.flights = action.payload.flights.reduce(
+        (acc: { [key: string]: Flight }, curr) => {
+          acc[curr.id] = curr;
+          return acc;
+        },
+        {}
+      );
+    });
+    builder.addCase(gameUnloaded, (state) => {
+      state.selected = null;
+      state.flights = {};
+    });
+  },
+});
+
+export const {
+  registerFlights,
+  unregisterFlights,
+  updateFlights,
+  deselectFlight,
+  selectFlight,
+  updateFlightPositions,
+} = flightsSlice.actions;
+
+export const selectFlights = (state: RootState) => state.flights;
+export const selectSelectedFlightId = (state: RootState) =>
+  state.flights.selected;
+export const selectSelectedFlight = (state: RootState) => {
+  const id = state.flights.selected;
+  return id ? state.flights.flights[id] : null;
+};
+
+export default flightsSlice.reducer;

client/src/api/frontLinesSlice.ts

@@ -0,0 +1,50 @@
+import { RootState } from "../app/store";
+import { gameLoaded, gameUnloaded } from "./actions";
+import { FrontLine } from "./liberationApi";
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+
+interface FrontLinesState {
+  fronts: { [key: string]: FrontLine };
+}
+
+const initialState: FrontLinesState = {
+  fronts: {},
+};
+
+export const frontLinesSlice = createSlice({
+  name: "frontLines",
+  initialState,
+  reducers: {
+    updateFrontLine: (state, action: PayloadAction<FrontLine[]>) => {
+      for (const front of action.payload) {
+        state.fronts[front.id] = front;
+      }
+    },
+    deleteFrontLine: (state, action: PayloadAction<string[]>) => {
+      for (const uid of action.payload) {
+        delete state.fronts[uid];
+      }
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(gameLoaded, (state, action) => {
+      state.fronts = action.payload.front_lines.reduce(
+        (acc: { [key: string]: FrontLine }, curr) => {
+          acc[curr.id] = curr;
+          return acc;
+        },
+        {}
+      );
+    });
+    builder.addCase(gameUnloaded, (state) => {
+      state.fronts = {};
+    });
+  },
+});
+
+export const { updateFrontLine, deleteFrontLine } =
+  frontLinesSlice.actions;
+
+export const selectFrontLines = (state: RootState) => state.frontLines;
+
+export default frontLinesSlice.reducer;

client/src/api/gamestate.ts

@@ -0,0 +1,24 @@
+import { AppDispatch } from "../app/store";
+import { gameLoaded, gameUnloaded } from "./actions";
+import backend from "./backend";
+import { Game } from "./liberationApi";
+
+export default function reloadGameState(
+  dispatch: AppDispatch,
+  ignoreRecenter: boolean = false
+) {
+  backend
+    .get("/game")
+    .catch((error) => console.log(`Error fetching game state: ${error}`))
+    .then((response) => {
+      if (response == null || response.data == null) {
+        dispatch(gameUnloaded());
+        return;
+      }
+      const game = response.data as Game;
+      if (ignoreRecenter) {
+        game.map_center = undefined;
+      }
+      dispatch(gameLoaded(game));
+    });
+}

client/src/api/iadsNetworkSlice.ts

@@ -0,0 +1,49 @@
+import { RootState } from "../app/store";
+import { gameLoaded, gameUnloaded } from "./actions";
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+import { IadsConnection} from "./_liberationApi";
+
+interface IadsNetworkState {
+  connections: {[key: string]: IadsConnection}
+}
+
+const initialState: IadsNetworkState = {
+  connections: {},
+};
+
+export const IadsNetworkSlice = createSlice({
+  name: "iadsNetwork",
+  initialState,
+  reducers: {
+    updateIadsConnection: (state, action: PayloadAction<IadsConnection[]>) => {
+      for (const connection of action.payload) {
+        state.connections[connection.id] = connection
+      }
+    },
+    removeIadsConnection: (state, action: PayloadAction<string[]>) => {
+      for (const cID of action.payload) {
+        delete state.connections[cID];
+      }
+    }
+  },
+  extraReducers: (builder) => {
+    builder.addCase(gameLoaded, (state, action) => {
+      state.connections = action.payload.iads_network.connections.reduce(
+        (acc: { [key: string]: IadsConnection }, curr) => {
+          acc[curr.id] = curr;
+          return acc;
+        },
+        {}
+      );
+    });
+    builder.addCase(gameUnloaded, (state) => {
+      state.connections = {};
+    });
+  },
+});
+
+export const { updateIadsConnection, removeIadsConnection } = IadsNetworkSlice.actions;
+
+export const selectIadsNetwork = (state: RootState) => state.iadsNetwork;
+
+export default IadsNetworkSlice.reducer;

client/src/api/liberationApi.ts

@@ -0,0 +1,71 @@
+import { _liberationApi } from "./_liberationApi";
+
+// See https://redux-toolkit.js.org/rtk-query/usage/automated-refetching for an
+// explanation of tag behavior.
+
+export enum Tags {
+  FLIGHT_PLAN = "FlightPlan",
+}
+
+const LIST_ID = "LIST";
+
+function providesList<R extends { id: string | number }[], T extends string>(
+  resultsWithIds: R | undefined,
+  tagType: T
+) {
+  return resultsWithIds
+    ? [
+        { type: tagType, id: LIST_ID },
+        ...resultsWithIds.map(({ id }) => ({ type: tagType, id })),
+      ]
+    : [{ type: tagType, id: LIST_ID }];
+}
+
+export const liberationApi = _liberationApi.enhanceEndpoints({
+  addTagTypes: Object.values(Tags),
+  endpoints: {
+    // /debug/waypoint-geometries
+    getDebugHoldZones: {
+      providesTags: (result, error, arg) => [
+        { type: Tags.FLIGHT_PLAN, id: arg.flightId },
+      ],
+    },
+    getDebugIpZones: {
+      providesTags: (result, error, arg) => [
+        { type: Tags.FLIGHT_PLAN, id: arg.flightId },
+      ],
+    },
+    getDebugJoinZones: {
+      providesTags: (result, error, arg) => [
+        { type: Tags.FLIGHT_PLAN, id: arg.flightId },
+      ],
+    },
+    // /flights/
+    getCommitBoundaryForFlight: {
+      providesTags: (result, error, arg) => [
+        { type: Tags.FLIGHT_PLAN, id: arg.flightId },
+      ],
+    },
+    getFlightById: {
+      providesTags: (result, error, arg) => [
+        { type: Tags.FLIGHT_PLAN, id: arg.flightId },
+      ],
+    },
+    listFlights: {
+      providesTags: (result) => providesList(result, Tags.FLIGHT_PLAN),
+    },
+    // /waypoints/
+    listAllWaypointsForFlight: {
+      providesTags: (result, error, arg) => [
+        { type: Tags.FLIGHT_PLAN, id: arg.flightId },
+      ],
+    },
+    setWaypointPosition: {
+      invalidatesTags: (result, error, arg) => [
+        { type: Tags.FLIGHT_PLAN, id: arg.flightId },
+      ],
+    },
+  },
+});
+
+export * from "./_liberationApi";

client/src/api/mapSlice.ts

@@ -0,0 +1,32 @@
+import { RootState } from "../app/store";
+import { gameLoaded, gameUnloaded } from "./actions";
+import { createSlice } from "@reduxjs/toolkit";
+import { LatLngLiteral } from "leaflet";
+
+interface MapState {
+  center: LatLngLiteral;
+}
+
+const initialState: MapState = {
+  center: { lat: 0, lng: 0 },
+};
+
+const mapSlice = createSlice({
+  name: "map",
+  initialState: initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(gameLoaded, (state, action) => {
+      if (action.payload.map_center != null) {
+        state.center = action.payload.map_center;
+      }
+    });
+    builder.addCase(gameUnloaded, (state) => {
+      state.center = { lat: 0, lng: 0 };
+    });
+  },
+});
+
+export const selectMapCenter = (state: RootState) => state.map.center;
+
+export default mapSlice.reducer;

client/src/api/navMeshSlice.ts

@@ -0,0 +1,53 @@
+import { RootState } from "../app/store";
+import { gameLoaded, gameUnloaded } from "./actions";
+import { NavMesh, NavMeshPoly } from "./liberationApi";
+import { createSlice, PayloadAction } from "@reduxjs/toolkit";
+
+interface NavMeshState {
+  blue: NavMeshPoly[];
+  red: NavMeshPoly[];
+}
+
+const initialState: NavMeshState = {
+  blue: [],
+  red: [],
+};
+
+export interface INavMeshUpdate {
+  blue: boolean;
+  mesh: NavMesh;
+}
+
+const navMeshSlice = createSlice({
+  name: "navmesh",
+  initialState: initialState,
+  reducers: {
+    updated: (state, action: PayloadAction<INavMeshUpdate[]>) => {
+      for (const [blue, navmesh] of Object.entries(action.payload)) {
+        const data = {blue: (blue === "true"), mesh: navmesh} as unknown as INavMeshUpdate
+        const polys = data.mesh.polys;
+        if (data.blue) {
+          state.blue = polys;
+        } else {
+          state.red = polys;
+        }
+      }
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(gameLoaded, (state, action) => {
+      state.blue = action.payload.navmeshes.blue.polys;
+      state.red = action.payload.navmeshes.red.polys;
+    });
+    builder.addCase(gameUnloaded, (state) => {
+      state.blue = [];
+      state.red = [];
+    });
+  },
+});
+
+export const { updated: navMeshUpdated } = navMeshSlice.actions;
+
+export const selectNavMeshes = (state: RootState) => state.navmeshes;
+
+export default navMeshSlice.reducer;

client/src/api/supplyRoutesSlice.ts

@@ -0,0 +1,30 @@
+import { RootState } from "../app/store";
+import { gameLoaded, gameUnloaded } from "./actions";
+import { SupplyRoute } from "./liberationApi";
+import { createSlice } from "@reduxjs/toolkit";
+
+interface SupplyRoutesState {
+  routes: SupplyRoute[];
+}
+
+const initialState: SupplyRoutesState = {
+  routes: [],
+};
+
+export const supplyRoutesSlice = createSlice({
+  name: "supplyRoutes",
+  initialState,
+  reducers: {},
+  extraReducers: (builder) => {
+    builder.addCase(gameLoaded, (state, action) => {
+      state.routes = action.payload.supply_routes;
+    });
+    builder.addCase(gameUnloaded, (state) => {
+      state.routes = [];
+    });
+  },
+});
+
+export const selectSupplyRoutes = (state: RootState) => state.supplyRoutes;
+
+export default supplyRoutesSlice.reducer;

client/src/api/tgosSlice.ts

@@ -0,0 +1,44 @@
+import { RootState } from "../app/store";
+import { gameLoaded, gameUnloaded } from "./actions";
+import { Tgo } from "./liberationApi";
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+
+interface TgosState {
+  tgos: { [key: string]: Tgo };
+}
+
+const initialState: TgosState = {
+  tgos: {},
+};
+
+export const tgosSlice = createSlice({
+  name: "tgos",
+  initialState,
+  reducers: {
+    updateTgo: (state, action: PayloadAction<Tgo[]>) => {
+      for (const tgo of action.payload) {
+        state.tgos[tgo.id] = tgo;
+      }
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(gameLoaded, (state, action) => {
+      state.tgos = action.payload.tgos.reduce(
+        (acc: { [key: string]: Tgo }, curr) => {
+          acc[curr.id] = curr;
+          return acc;
+        },
+        {}
+      );
+    });
+    builder.addCase(gameUnloaded, (state) => {
+      state.tgos = {};
+    });
+  },
+});
+
+export const { updateTgo } = tgosSlice.actions;
+
+export const selectTgos = (state: RootState) => state.tgos;
+
+export default tgosSlice.reducer;

client/src/api/threatZonesSlice.ts

@@ -0,0 +1,61 @@
+import { RootState } from "../app/store";
+import { gameLoaded, gameUnloaded } from "./actions";
+import { ThreatZoneContainer, ThreatZones } from "./liberationApi";
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+
+interface ThreatZonesState {
+  zones: ThreatZoneContainer;
+}
+
+const initialState: ThreatZonesState = {
+  zones: {
+    blue: {
+      full: [],
+      aircraft: [],
+      air_defenses: [],
+      radar_sams: [],
+    },
+    red: {
+      full: [],
+      aircraft: [],
+      air_defenses: [],
+      radar_sams: [],
+    },
+  },
+};
+
+export interface IThreatZoneUpdate {
+  blue: boolean;
+  zones: ThreatZones;
+}
+
+export const threatZonesSlice = createSlice({
+  name: "threatZonesState",
+  initialState,
+  reducers: {
+    updated: (state, action: PayloadAction<IThreatZoneUpdate[]>) => {
+      for (const [blue, zones] of Object.entries(action.payload)) {
+        const data = {blue: (blue === "true"), zones: zones} as unknown as IThreatZoneUpdate
+        if (data.blue) {
+          state.zones.blue = data.zones;
+        } else {
+          state.zones.red = data.zones;
+        }
+      }
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(gameLoaded, (state, action) => {
+      state.zones = action.payload.threat_zones;
+    });
+    builder.addCase(gameUnloaded, (state) => {
+      state.zones = initialState.zones;
+    });
+  },
+});
+
+export const { updated: threatZonesUpdated } = threatZonesSlice.actions;
+
+export const selectThreatZones = (state: RootState) => state.threatZones;
+
+export default threatZonesSlice.reducer;

client/src/api/unculledZonesSlice.ts

@@ -0,0 +1,36 @@
+import { RootState } from "../app/store";
+import { gameLoaded, gameUnloaded } from "./actions";
+import { UnculledZone } from "./liberationApi";
+import { PayloadAction, createSlice } from "@reduxjs/toolkit";
+
+interface UnculledZonesState {
+  zones: UnculledZone[];
+}
+
+const initialState: UnculledZonesState = {
+  zones: [],
+};
+
+export const unculledZonesSlice = createSlice({
+  name: "unculledZonesState",
+  initialState,
+  reducers: {
+    updated: (state, action: PayloadAction<UnculledZone[]>) => {
+      state.zones = action.payload;
+    },
+  },
+  extraReducers: (builder) => {
+    builder.addCase(gameLoaded, (state, action) => {
+      state.zones = action.payload.unculled_zones;
+    });
+    builder.addCase(gameUnloaded, (state) => {
+      state.zones = initialState.zones;
+    });
+  },
+});
+
+export const { updated: unculledZonesUpdated } = unculledZonesSlice.actions;
+
+export const selectUnculledZones = (state: RootState) => state.unculledZones;
+
+export default unculledZonesSlice.reducer;

client/src/app/hooks.ts

@@ -0,0 +1,6 @@
+import type { RootState, AppDispatch } from "./store";
+import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
+
+// Use throughout your app instead of plain `useDispatch` and `useSelector`
+export const useAppDispatch = () => useDispatch<AppDispatch>();
+export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

client/src/app/store.ts

@@ -0,0 +1,53 @@
+import { baseApi } from "../api/baseApi";
+import combatReducer from "../api/combatSlice";
+import controlPointsReducer from "../api/controlPointsSlice";
+import flightsReducer from "../api/flightsSlice";
+import frontLinesReducer from "../api/frontLinesSlice";
+import iadsNetworkReducer from "../api/iadsNetworkSlice";
+import mapReducer from "../api/mapSlice";
+import navMeshReducer from "../api/navMeshSlice";
+import supplyRoutesReducer from "../api/supplyRoutesSlice";
+import tgosReducer from "../api/tgosSlice";
+import threatZonesReducer from "../api/threatZonesSlice";
+import unculledZonesReducer from "../api/unculledZonesSlice";
+import {
+  Action,
+  PreloadedState,
+  ThunkAction,
+  combineReducers,
+  configureStore,
+} from "@reduxjs/toolkit";
+
+const rootReducer = combineReducers({
+  combat: combatReducer,
+  controlPoints: controlPointsReducer,
+  flights: flightsReducer,
+  frontLines: frontLinesReducer,
+  map: mapReducer,
+  navmeshes: navMeshReducer,
+  supplyRoutes: supplyRoutesReducer,
+  iadsNetwork: iadsNetworkReducer,
+  tgos: tgosReducer,
+  threatZones: threatZonesReducer,
+  [baseApi.reducerPath]: baseApi.reducer,
+  unculledZones: unculledZonesReducer,
+});
+
+export function setupStore(preloadedState?: PreloadedState<RootState>) {
+  return configureStore({
+    reducer: rootReducer,
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware().concat(baseApi.middleware),
+    preloadedState: preloadedState,
+  });
+}
+
+export type AppStore = ReturnType<typeof setupStore>;
+export type AppDispatch = AppStore["dispatch"];
+export type RootState = ReturnType<typeof rootReducer>;
+export type AppThunk<ReturnType = void> = ThunkAction<
+  ReturnType,
+  RootState,
+  unknown,
+  Action<string>
+>;

client/src/components/aircraft/Aircraft.test.tsx

@@ -0,0 +1,53 @@
+import Aircraft from "./Aircraft";
+import { render } from "@testing-library/react";
+import { Icon } from "leaflet";
+
+const mockMarker = jest.fn();
+jest.mock("react-leaflet", () => ({
+  Marker: (props: any) => {
+    mockMarker(props);
+  },
+}));
+
+test("grounded aircraft do not render", async () => {
+  const { container } = render(
+    <Aircraft
+      flight={{
+        id: "",
+        blue: true,
+        position: undefined,
+        sidc: "",
+        waypoints: [],
+      }}
+    />
+  );
+
+  expect(container).toBeEmptyDOMElement();
+});
+
+test("in-flight aircraft render", async () => {
+  render(
+    <Aircraft
+      flight={{
+        id: "",
+        blue: true,
+        position: {
+          lat: 10,
+          lng: 20,
+        },
+        sidc: "foobar",
+        waypoints: [],
+      }}
+    />
+  );
+
+  expect(mockMarker).toHaveBeenCalledWith(
+    expect.objectContaining({
+      position: {
+        lat: 10,
+        lng: 20,
+      },
+      icon: expect.any(Icon),
+    })
+  );
+});

client/src/components/aircraft/Aircraft.tsx

@@ -0,0 +1,32 @@
+import { Flight } from "../../api/liberationApi";
+import { Icon, Point } from "leaflet";
+import { Symbol } from "milsymbol";
+import { Marker } from "react-leaflet";
+
+function iconForFlight(flight: Flight) {
+  const symbol = new Symbol(flight.sidc, {
+    size: 20,
+  });
+
+  return new Icon({
+    iconUrl: symbol.toDataURL(),
+    iconAnchor: new Point(symbol.getAnchor().x, symbol.getAnchor().y),
+  });
+}
+
+interface AircraftProps {
+  flight: Flight;
+}
+
+export default function Aircraft(props: AircraftProps) {
+  if (!props.flight.position) {
+    return <></>;
+  }
+
+  return (
+    <Marker
+      position={props.flight.position}
+      icon={iconForFlight(props.flight)}
+    />
+  );
+}

client/src/components/aircraft/index.ts

@@ -0,0 +1 @@
+export { default } from "./Aircraft";

client/src/components/aircraftlayer/AircraftLayer.test.tsx

@@ -0,0 +1,53 @@
+import { renderWithProviders } from "../../testutils";
+import AircraftLayer from "./AircraftLayer";
+import { PropsWithChildren } from "react";
+
+const mockLayerGroup = jest.fn();
+const mockMarker = jest.fn();
+jest.mock("react-leaflet", () => ({
+  LayerGroup: (props: PropsWithChildren<any>) => {
+    mockLayerGroup(props);
+    return <>{props.children}</>;
+  },
+  Marker: (props: any) => {
+    mockMarker(props);
+  },
+}));
+
+test("layer is empty by default", async () => {
+  renderWithProviders(<AircraftLayer />);
+  expect(mockLayerGroup).toHaveBeenCalledTimes(1);
+  expect(mockMarker).not.toHaveBeenCalled();
+});
+
+test("layer has aircraft if non-empty", async () => {
+  renderWithProviders(<AircraftLayer />, {
+    preloadedState: {
+      flights: {
+        flights: {
+          foo: {
+            id: "foo",
+            blue: true,
+            sidc: "",
+            position: {
+              lat: 0,
+              lng: 0,
+            },
+          },
+          bar: {
+            id: "bar",
+            blue: false,
+            sidc: "",
+            position: {
+              lat: 0,
+              lng: 0,
+            },
+          },
+        },
+        selected: null,
+      },
+    },
+  });
+  expect(mockLayerGroup).toHaveBeenCalledTimes(1);
+  expect(mockMarker).toHaveBeenCalledTimes(2);
+});

client/src/components/aircraftlayer/AircraftLayer.tsx

@@ -0,0 +1,15 @@
+import { selectFlights } from "../../api/flightsSlice";
+import { useAppSelector } from "../../app/hooks";
+import Aircraft from "../aircraft";
+import { LayerGroup } from "react-leaflet";
+
+export default function AircraftLayer() {
+  const flights = useAppSelector(selectFlights).flights;
+  return (
+    <LayerGroup>
+      {Object.values(flights).map((flight) => {
+        return <Aircraft key={flight.id} flight={flight} />;
+      })}
+    </LayerGroup>
+  );
+}

client/src/components/aircraftlayer/index.ts

@@ -0,0 +1 @@
+export { default } from "./AircraftLayer";

client/src/components/airdefenserangelayer/AirDefenseRangeLayer.test.tsx

@@ -0,0 +1,146 @@
+import { renderWithProviders } from "../../testutils";
+import AirDefenseRangeLayer, { colorFor } from "./AirDefenseRangeLayer";
+import { PropsWithChildren } from "react";
+
+const mockLayerGroup = jest.fn();
+const mockCircle = jest.fn();
+jest.mock("react-leaflet", () => ({
+  LayerGroup: (props: PropsWithChildren<any>) => {
+    mockLayerGroup(props);
+    return <>{props.children}</>;
+  },
+  Circle: (props: any) => {
+    mockCircle(props);
+  },
+}));
+
+describe("colorFor", () => {
+  it("has a unique color for each configuration", () => {
+    const params = [
+      [false, false],
+      [false, true],
+      [true, false],
+      [true, true],
+    ];
+    var colors = new Set<string>();
+    for (const [blue, detection] of params) {
+      colors.add(colorFor(blue, detection));
+    }
+    expect(colors.size).toEqual(4);
+  });
+});
+
+describe("AirDefenseRangeLayer", () => {
+  it("draws nothing when there are no TGOs", () => {
+    renderWithProviders(<AirDefenseRangeLayer blue={true} />);
+    expect(mockLayerGroup).toHaveBeenCalledTimes(1);
+    expect(mockCircle).not.toHaveBeenCalled();
+  });
+
+  it("does not draw wrong range types", () => {
+    renderWithProviders(<AirDefenseRangeLayer blue={true} />, {
+      preloadedState: {
+        tgos: {
+          tgos: {
+            foo: {
+              id: "foo",
+              name: "Foo",
+              control_point_name: "Bar",
+              category: "AA",
+              blue: false,
+              position: {
+                lat: 0,
+                lng: 0,
+              },
+              units: [],
+              threat_ranges: [],
+              detection_ranges: [20],
+              dead: false,
+              sidc: "",
+            },
+          },
+        },
+      },
+    });
+    expect(mockLayerGroup).toHaveBeenCalledTimes(1);
+    expect(mockCircle).not.toHaveBeenCalled();
+  });
+
+  it("draws threat ranges", () => {
+    renderWithProviders(<AirDefenseRangeLayer blue={true} />, {
+      preloadedState: {
+        tgos: {
+          tgos: {
+            foo: {
+              id: "foo",
+              name: "Foo",
+              control_point_name: "Bar",
+              category: "AA",
+              blue: true,
+              position: {
+                lat: 10,
+                lng: 20,
+              },
+              units: [],
+              threat_ranges: [10],
+              detection_ranges: [20],
+              dead: false,
+              sidc: "",
+            },
+          },
+        },
+      },
+    });
+    expect(mockLayerGroup).toHaveBeenCalledTimes(1);
+    expect(mockCircle).toHaveBeenCalledWith(
+      expect.objectContaining({
+        center: {
+          lat: 10,
+          lng: 20,
+        },
+        radius: 10,
+        color: colorFor(true, false),
+        interactive: false,
+      })
+    );
+  });
+
+  it("draws detection ranges", () => {
+    renderWithProviders(<AirDefenseRangeLayer blue={true} detection />, {
+      preloadedState: {
+        tgos: {
+          tgos: {
+            foo: {
+              id: "foo",
+              name: "Foo",
+              control_point_name: "Bar",
+              category: "AA",
+              blue: true,
+              position: {
+                lat: 10,
+                lng: 20,
+              },
+              units: [],
+              threat_ranges: [10],
+              detection_ranges: [20],
+              dead: false,
+              sidc: "",
+            },
+          },
+        },
+      },
+    });
+    expect(mockLayerGroup).toHaveBeenCalledTimes(1);
+    expect(mockCircle).toHaveBeenCalledWith(
+      expect.objectContaining({
+        center: {
+          lat: 10,
+          lng: 20,
+        },
+        radius: 20,
+        color: colorFor(true, true),
+        interactive: false,
+      })
+    );
+  });
+});

client/src/components/airdefenserangelayer/AirDefenseRangeLayer.tsx

@@ -0,0 +1,65 @@
+import { Tgo } from "../../api/liberationApi";
+import { selectTgos } from "../../api/tgosSlice";
+import { useAppSelector } from "../../app/hooks";
+import { Circle, LayerGroup } from "react-leaflet";
+
+interface TgoRangeCirclesProps {
+  tgo: Tgo;
+  blue: boolean;
+  detection?: boolean;
+}
+
+export function colorFor(blue: boolean, detection: boolean) {
+  if (blue) {
+    return detection ? "#bb89ff" : "#0084ff";
+  }
+  return detection ? "#eee17b" : "#c85050";
+}
+
+const TgoRangeCircles = (props: TgoRangeCirclesProps) => {
+  const radii = props.detection
+    ? props.tgo.detection_ranges
+    : props.tgo.threat_ranges;
+  const color = colorFor(props.blue, props.detection === true);
+  const weight = props.detection ? 1 : 2;
+
+  return (
+    <>
+      {radii.map((radius, idx) => {
+        return (
+          <Circle
+            key={idx}
+            center={props.tgo.position}
+            radius={radius}
+            color={color}
+            fill={false}
+            weight={weight}
+            interactive={false}
+          />
+        );
+      })}
+    </>
+  );
+};
+
+interface AirDefenseRangeLayerProps {
+  blue: boolean;
+  detection?: boolean;
+}
+
+export const AirDefenseRangeLayer = (props: AirDefenseRangeLayerProps) => {
+  const tgos = Object.values(useAppSelector(selectTgos).tgos);
+  var tgosForSide = tgos.filter((tgo) => tgo.blue === props.blue);
+
+  return (
+    <LayerGroup>
+      {tgosForSide.map((tgo) => {
+        return (
+          <TgoRangeCircles key={tgo.id} tgo={tgo} {...props}></TgoRangeCircles>
+        );
+      })}
+    </LayerGroup>
+  );
+};
+
+export default AirDefenseRangeLayer;

client/src/components/airdefenserangelayer/index.ts

@@ -0,0 +1 @@
+export { default } from "./AirDefenseRangeLayer";

client/src/components/combat/Combat.test.tsx

@@ -0,0 +1,132 @@
+import { renderWithProviders } from "../../testutils";
+import Combat from "./Combat";
+import { LatLng } from "leaflet";
+
+const mockPolyline = jest.fn();
+const mockPolygon = jest.fn();
+jest.mock("react-leaflet", () => ({
+  Polyline: (props: any) => {
+    mockPolyline(props);
+  },
+  Polygon: (props: any) => {
+    mockPolygon(props);
+  },
+}));
+
+describe("Combat", () => {
+  describe("footprint", () => {
+    it("is not interactive", () => {
+      renderWithProviders(
+        <Combat
+          combat={{
+            id: "foo",
+            flight_position: null,
+            target_positions: null,
+            footprint: [[new LatLng(0, 0), new LatLng(0, 1), new LatLng(1, 0)]],
+          }}
+        />
+      );
+      expect(mockPolygon).toBeCalledWith(
+        expect.objectContaining({ interactive: false })
+      );
+    });
+
+    // Fails because we don't handle multi-poly combat footprints correctly.
+    it.skip("renders single polygons", () => {
+      const boundary = [new LatLng(0, 0), new LatLng(0, 1), new LatLng(1, 0)];
+      renderWithProviders(
+        <Combat
+          combat={{
+            id: "foo",
+            flight_position: null,
+            target_positions: null,
+            footprint: [boundary],
+          }}
+        />
+      );
+      expect(mockPolygon).toBeCalledWith(
+        expect.objectContaining({ positions: boundary })
+      );
+    });
+
+    // Fails because we don't handle multi-poly combat footprints correctly.
+    it.skip("renders multiple polygons", () => {
+      const boundary = [new LatLng(0, 0), new LatLng(0, 1), new LatLng(1, 0)];
+      renderWithProviders(
+        <Combat
+          combat={{
+            id: "foo",
+            flight_position: null,
+            target_positions: null,
+            footprint: [boundary, boundary],
+          }}
+        />
+      );
+      expect(mockPolygon).toBeCalledTimes(2);
+    });
+  });
+
+  describe("lines", () => {
+    it("is not interactive", () => {
+      renderWithProviders(
+        <Combat
+          combat={{
+            id: "foo",
+            flight_position: new LatLng(0, 0),
+            target_positions: [new LatLng(1, 0)],
+            footprint: null,
+          }}
+        />
+      );
+      expect(mockPolyline).toBeCalledWith(
+        expect.objectContaining({ interactive: false })
+      );
+    });
+
+    it("renders single line", () => {
+      renderWithProviders(
+        <Combat
+          combat={{
+            id: "foo",
+            flight_position: new LatLng(0, 0),
+            target_positions: [new LatLng(0, 1)],
+            footprint: null,
+          }}
+        />
+      );
+      expect(mockPolyline).toBeCalledWith(
+        expect.objectContaining({
+          positions: [new LatLng(0, 0), new LatLng(0, 1)],
+        })
+      );
+    });
+
+    it("renders multiple lines", () => {
+      renderWithProviders(
+        <Combat
+          combat={{
+            id: "foo",
+            flight_position: new LatLng(0, 0),
+            target_positions: [new LatLng(0, 1), new LatLng(1, 0)],
+            footprint: null,
+          }}
+        />
+      );
+      expect(mockPolyline).toBeCalledTimes(2);
+    });
+  });
+
+  it("renders nothing if no footprint or targets", () => {
+    const { container } = renderWithProviders(
+      <Combat
+        combat={{
+          id: "foo",
+          flight_position: new LatLng(0, 0),
+          target_positions: null,
+          footprint: null,
+        }}
+      />
+    );
+    expect(container).toBeEmptyDOMElement();
+  });
+});

client/src/components/combat/Combat.tsx

@@ -0,0 +1,53 @@
+import CombatModel from "../../api/combat";
+import { LatLng } from "leaflet";
+import { Polygon, Polyline } from "react-leaflet";
+
+interface CombatProps {
+  combat: CombatModel;
+}
+
+function CombatFootprint(props: CombatProps) {
+  if (!props.combat.footprint) {
+    return <></>;
+  }
+
+  return (
+    <Polygon
+      positions={props.combat.footprint}
+      color="#c85050"
+      interactive={false}
+      fillOpacity={0.2}
+    />
+  );
+}
+
+function CombatLines(props: CombatProps) {
+  if (!props.combat.flight_position || !props.combat.target_positions) {
+    return <></>;
+  }
+
+  const flightPosition: LatLng = props.combat.flight_position;
+  return (
+    <>
+      {props.combat.target_positions.map((position, idx) => {
+        return (
+          <Polyline
+            key={idx}
+            positions={[flightPosition, position]}
+            color="#c85050"
+            interactive={false}
+          />
+        );
+      })}
+    </>
+  );
+}
+
+export default function Combat(props: CombatProps) {
+  return (
+    <>
+      <CombatFootprint {...props} />
+      <CombatLines {...props} />
+    </>
+  );
+}

client/src/components/combat/index.ts

@@ -0,0 +1 @@
+export { default } from "./Combat";

client/src/components/combatlayer/CombatLayer.test.tsx

@@ -0,0 +1,48 @@
+import { renderWithProviders } from "../../testutils";
+import CombatLayer from "./CombatLayer";
+import { LatLng } from "leaflet";
+import { PropsWithChildren } from "react";
+
+const mockPolyline = jest.fn();
+const mockLayerGroup = jest.fn();
+jest.mock("react-leaflet", () => ({
+  LayerGroup: (props: PropsWithChildren<any>) => {
+    mockLayerGroup(props);
+    return <>{props.children}</>;
+  },
+  Polyline: (props: any) => {
+    mockPolyline(props);
+  },
+}));
+
+describe("CombatLayer", () => {
+  it("renders each combat", () => {
+    renderWithProviders(<CombatLayer />, {
+      preloadedState: {
+        combat: {
+          combat: {
+            foo: {
+              id: "foo",
+              flight_position: new LatLng(0, 0),
+              target_positions: [new LatLng(0, 1)],
+              footprint: null,
+            },
+            bar: {
+              id: "foo",
+              flight_position: new LatLng(0, 0),
+              target_positions: [new LatLng(0, 1)],
+              footprint: null,
+            },
+          },
+        },
+      },
+    });
+    expect(mockPolyline).toBeCalledTimes(2);
+  });
+
+  it("renders LayerGroup but no contents if no combat", () => {
+    renderWithProviders(<CombatLayer />);
+    expect(mockLayerGroup).toBeCalledTimes(1);
+    expect(mockPolyline).not.toHaveBeenCalled();
+  });
+});

client/src/components/combatlayer/CombatLayer.tsx

@@ -0,0 +1,16 @@
+import { selectCombat } from "../../api/combatSlice";
+import { useAppSelector } from "../../app/hooks";
+import Combat from "../combat/Combat";
+import { LayerGroup } from "react-leaflet";
+
+export default function CombatLayer() {
+  const combats = useAppSelector(selectCombat);
+  return (
+    <LayerGroup>
+      {Object.values(combats.combat).map((combat) => {
+        return <Combat key={combat.id} combat={combat} />;
+      })}
+      (
+    </LayerGroup>
+  );
+}

client/src/components/combatlayer/index.ts

@@ -0,0 +1 @@
+export { default } from "./CombatLayer";

client/src/components/controlpoints/ControlPoint.tsx

@@ -0,0 +1,15 @@
+import { ControlPoint as ControlPointModel } from "../../api/liberationApi";
+import { MobileControlPoint } from "./MobileControlPoint";
+import { StaticControlPoint } from "./StaticControlPoint";
+
+interface ControlPointProps {
+  controlPoint: ControlPointModel;
+}
+
+export default function ControlPoint(props: ControlPointProps) {
+  if (props.controlPoint.mobile) {
+    return <MobileControlPoint {...props} />;
+  } else {
+    return <StaticControlPoint {...props} />;
+  }
+}

client/src/components/controlpoints/EventHandlers.ts

@@ -0,0 +1,22 @@
+import { ControlPoint } from "../../api/_liberationApi";
+import backend from "../../api/backend";
+
+function openInfoDialog(controlPoint: ControlPoint) {
+  backend.post(`/qt/info/control-point/${controlPoint.id}`);
+}
+
+function openNewPackageDialog(controlPoint: ControlPoint) {
+  backend.post(`/qt/create-package/control-point/${controlPoint.id}`);
+}
+
+export const makeLocationMarkerEventHandlers = (controlPoint: ControlPoint) => {
+  return {
+    click: () => {
+      openInfoDialog(controlPoint);
+    },
+
+    contextmenu: () => {
+      openNewPackageDialog(controlPoint);
+    },
+  };
+};

client/src/components/controlpoints/Icons.tsx

@@ -0,0 +1,15 @@
+import { ControlPoint } from "../../api/_liberationApi";
+import { Icon, Point } from "leaflet";
+import { Symbol } from "milsymbol";
+
+export const iconForControlPoint = (cp: ControlPoint) => {
+  const symbol = new Symbol(cp.sidc, {
+    size: 24,
+    colorMode: "Dark",
+  });
+
+  return new Icon({
+    iconUrl: symbol.toDataURL(),
+    iconAnchor: new Point(symbol.getAnchor().x, symbol.getAnchor().y),
+  });
+};

client/src/components/controlpoints/LocationTooltipText.tsx

@@ -0,0 +1,9 @@
+interface LocationTooltipTextProps {
+  name: string;
+}
+
+export const LocationTooltipText = (props: LocationTooltipTextProps) => {
+  return <h3 style={{ margin: 0 }}>{props.name}</h3>;
+};
+
+export default LocationTooltipText;

client/src/components/controlpoints/MobileControlPoint.tsx

@@ -0,0 +1,228 @@
+import { ControlPoint } from "../../api/_liberationApi";
+import backend from "../../api/backend";
+import {
+  useClearControlPointDestinationMutation,
+  useSetControlPointDestinationMutation,
+} from "../../api/liberationApi";
+import { makeLocationMarkerEventHandlers } from "./EventHandlers";
+import { iconForControlPoint } from "./Icons";
+import LocationTooltipText from "./LocationTooltipText";
+import { MovementPath, MovementPathHandle } from "./MovementPath";
+import { StaticControlPoint } from "./StaticControlPoint";
+import { LatLng, Marker as LMarker, LatLngLiteral } from "leaflet";
+import { useCallback, useEffect, useRef, useState } from "react";
+import ReactDOMServer from "react-dom/server";
+import { Marker, Tooltip } from "react-leaflet";
+
+function metersToNauticalMiles(meters: number) {
+  return meters * 0.000539957;
+}
+
+function formatLatLng(latLng: LatLng) {
+  const lat = latLng.lat.toFixed(2);
+  const lng = latLng.lng.toFixed(2);
+  const ns = latLng.lat >= 0 ? "N" : "S";
+  const ew = latLng.lng >= 0 ? "E" : "W";
+  return `${lat}°${ns} ${lng}°${ew}`;
+}
+
+function destinationTooltipText(
+  cp: ControlPoint,
+  destinationish: LatLngLiteral,
+  inRange: boolean
+) {
+  const destination = new LatLng(destinationish.lat, destinationish.lng);
+  const distance = metersToNauticalMiles(
+    destination.distanceTo(cp.position)
+  ).toFixed(1);
+  if (!inRange) {
+    return `Out of range (${distance}nm away)`;
+  }
+  const dest = formatLatLng(destination);
+  return `${cp.name} moving ${distance}nm to ${dest} next turn`;
+}
+
+interface PrimaryMarkerProps {
+  controlPoint: ControlPoint;
+}
+
+/**
+ * The primary control point marker. For non-mobile control points, this has
+ * fairly simple behavior: it's a marker in a fixed location that can manage
+ * units and can have missions planned against it.
+ *
+ * For mobile control points, this is a draggable marker. If the control point
+ * has a destination (either because it was dragged after render, or because it
+ * had a destination in the game that was loaded), the unit management and
+ * mission planning behaviors are delegated to SecondaryMarker, and the primary
+ * marker becomes only a destination marker. It can be dragged to change the
+ * destination, and can be right clicked to cancel movement.
+ */
+function PrimaryMarker(props: PrimaryMarkerProps) {
+  // We can't use normal state to update the marker tooltip or the line points
+  // because if we set any state in the drag event it will re-render this
+  // component and all children, interrupting dragging. Instead, keep refs to
+  // the objects and mutate them directly.
+  //
+  // For the same reason, the path is owned by this component, because updating
+  // sibling state would be messy. Lifting the state into the parent would still
+  // cause this component to redraw.
+  const markerRef = useRef<LMarker | null>(null);
+  const pathRef = useRef<MovementPathHandle | null>(null);
+
+  const [hasDestination, setHasDestination] = useState<boolean>(
+    props.controlPoint.destination != null
+  );
+  const [position, setPosition] = useState<LatLngLiteral>(
+    props.controlPoint.destination
+      ? props.controlPoint.destination
+      : props.controlPoint.position
+  );
+
+  const setDestination = useCallback((destination: LatLng) => {
+    setPosition(destination);
+    setHasDestination(true);
+  }, []);
+
+  const resetDestination = useCallback(() => {
+    setPosition(props.controlPoint.position);
+    setHasDestination(false);
+  }, [props]);
+
+  const [putDestination, { isLoading }] =
+    useSetControlPointDestinationMutation();
+  const [cancelTravel] = useClearControlPointDestinationMutation();
+
+  useEffect(() => {
+    markerRef.current?.setTooltipContent(
+      props.controlPoint.destination
+        ? destinationTooltipText(
+            props.controlPoint,
+            props.controlPoint.destination,
+            true
+          )
+        : ReactDOMServer.renderToString(
+            <LocationTooltipText name={props.controlPoint.name} />
+          )
+    );
+  });
+
+  const locationClickHandlers = makeLocationMarkerEventHandlers(
+    props.controlPoint
+  );
+
+  return (
+    <>
+      <Marker
+        position={position}
+        icon={iconForControlPoint(props.controlPoint)}
+        draggable={!isLoading}
+        autoPan
+        // We might draw other markers on top of the CP. The tooltips from the
+        // other markers are helpful so we want to keep them, but make sure the CP
+        // is always the clickable thing.
+        zIndexOffset={1000}
+        opacity={props.controlPoint.destination ? 0.5 : 1}
+        ref={(ref) => {
+          if (ref != null) {
+            markerRef.current = ref;
+          }
+        }}
+        eventHandlers={{
+          click: () => {
+            if (!hasDestination) {
+              locationClickHandlers.click();
+            }
+          },
+          contextmenu: () => {
+            if (props.controlPoint.destination) {
+              cancelTravel({ cpId: props.controlPoint.id }).then(() => {
+                resetDestination();
+              });
+            } else {
+              locationClickHandlers.contextmenu();
+            }
+          },
+          drag: (event) => {
+            const destination = event.target.getLatLng();
+            backend
+              .get(
+                `/control-points/${props.controlPoint.id}/destination-in-range?lat=${destination.lat}&lng=${destination.lng}`
+              )
+              .then((inRange) => {
+                markerRef.current?.setTooltipContent(
+                  destinationTooltipText(
+                    props.controlPoint,
+                    destination,
+                    inRange.data
+                  )
+                );
+              });
+            pathRef.current?.setDestination(destination);
+          },
+          dragend: async (event) => {
+            const currentPosition = new LatLng(position.lat, position.lng);
+            const destination = event.target.getLatLng();
+            setDestination(destination);
+            try {
+              await putDestination({
+                cpId: props.controlPoint.id,
+                body: { lat: destination.lat, lng: destination.lng },
+              }).unwrap();
+            } catch (error) {
+              console.error("setDestination failed", error);
+              setDestination(currentPosition);
+            }
+          },
+        }}
+      >
+        <Tooltip />
+      </Marker>
+      <MovementPath
+        source={props.controlPoint.position}
+        destination={position}
+        ref={pathRef}
+      />
+    </>
+  );
+}
+
+interface SecondaryMarkerProps {
+  controlPoint: ControlPoint;
+  destination: LatLngLiteral | undefined;
+}
+
+/**
+ * The secondary marker for a control point. The secondary marker will only be
+ * shown when the control point has a destination set. For mobile control
+ * points, the primary marker is draggable, and the secondary marker will be
+ * shown at the current location iff the control point has been dragged. The
+ * secondary marker is also the marker that has the normal control point
+ * interaction options (mission planning and unit management).
+ */
+function SecondaryMarker(props: SecondaryMarkerProps) {
+  if (!props.destination) {
+    return <></>;
+  }
+
+  return <StaticControlPoint controlPoint={props.controlPoint} />;
+}
+
+interface MobileControlPointProps {
+  controlPoint: ControlPoint;
+}
+
+export const MobileControlPoint = (props: MobileControlPointProps) => {
+  return (
+    <>
+      <PrimaryMarker
+        controlPoint={props.controlPoint}
+        key={props.controlPoint.destination ? 0 : 1}
+      />
+      <SecondaryMarker
+        controlPoint={props.controlPoint}
+        destination={props.controlPoint.destination}
+      />
+    </>
+  );
+};

client/src/components/controlpoints/MovementPath.tsx

@@ -0,0 +1,35 @@
+import { LatLngLiteral, Polyline as LPolyline } from "leaflet";
+import { forwardRef, useImperativeHandle, useRef } from "react";
+import { Polyline } from "react-leaflet";
+
+interface MovementPathProps {
+  source: LatLngLiteral;
+  destination: LatLngLiteral;
+}
+
+export interface MovementPathHandle {
+  setDestination: (destination: LatLngLiteral) => void;
+}
+
+export const MovementPath = forwardRef<MovementPathHandle, MovementPathProps>(
+  (props: MovementPathProps, ref) => {
+    const lineRef = useRef<LPolyline | null>(null);
+    useImperativeHandle(
+      ref,
+      () => ({
+        setDestination: (destination: LatLngLiteral) => {
+          lineRef.current?.setLatLngs([props.source, destination]);
+        },
+      }),
+      [props]
+    );
+    return (
+      <Polyline
+        positions={[props.source, props.destination]}
+        weight={1}
+        color="#80BA80"
+        ref={lineRef}
+      />
+    );
+  }
+);

client/src/components/controlpoints/StaticControlPoint.tsx

@@ -0,0 +1,27 @@
+import { ControlPoint } from "../../api/_liberationApi";
+import { makeLocationMarkerEventHandlers } from "./EventHandlers";
+import { iconForControlPoint } from "./Icons";
+import LocationTooltipText from "./LocationTooltipText";
+import { Marker, Tooltip } from "react-leaflet";
+
+interface StaticControlPointProps {
+  controlPoint: ControlPoint;
+}
+
+export const StaticControlPoint = (props: StaticControlPointProps) => {
+  return (
+    <Marker
+      position={props.controlPoint.position}
+      icon={iconForControlPoint(props.controlPoint)}
+      // We might draw other markers on top of the CP. The tooltips from the
+      // other markers are helpful so we want to keep them, but make sure the CP
+      // is always the clickable thing.
+      zIndexOffset={1000}
+      eventHandlers={makeLocationMarkerEventHandlers(props.controlPoint)}
+    >
+      <Tooltip>
+        <LocationTooltipText name={props.controlPoint.name} />
+      </Tooltip>
+    </Marker>
+  );
+};

client/src/components/controlpoints/index.ts

@@ -0,0 +1 @@
+export { default } from "./ControlPoint";

client/src/components/controlpointslayer/ControlPointsLayer.test.tsx

@@ -0,0 +1,52 @@
+import { renderWithProviders } from "../../testutils";
+import ControlPointsLayer from "./ControlPointsLayer";
+import { LatLng } from "leaflet";
+import { PropsWithChildren } from "react";
+
+const mockMarker = jest.fn();
+const mockLayerGroup = jest.fn();
+jest.mock("react-leaflet", () => ({
+  LayerGroup: (props: PropsWithChildren<any>) => {
+    mockLayerGroup(props);
+    return <>{props.children}</>;
+  },
+  Marker: (props: any) => {
+    mockMarker(props);
+  },
+}));
+
+describe("ControlPointsLayer", () => {
+  it("renders each control point", () => {
+    renderWithProviders(<ControlPointsLayer />, {
+      preloadedState: {
+        controlPoints: {
+          controlPoints: {
+            foo: {
+              id: "foo",
+              name: "Foo",
+              blue: true,
+              position: new LatLng(0, 0),
+              mobile: false,
+              sidc: "",
+            },
+            bar: {
+              id: "bar",
+              name: "Bar",
+              blue: false,
+              position: new LatLng(1, 0),
+              mobile: false,
+              sidc: "",
+            },
+          },
+        },
+      },
+    });
+    expect(mockMarker).toBeCalledTimes(2);
+  });
+
+  it("renders LayerGroup but no contents if no combat", () => {
+    renderWithProviders(<ControlPointsLayer />);
+    expect(mockLayerGroup).toBeCalledTimes(1);
+    expect(mockMarker).not.toHaveBeenCalled();
+  });
+});

client/src/components/controlpointslayer/ControlPointsLayer.tsx

@@ -0,0 +1,17 @@
+import { selectControlPoints } from "../../api/controlPointsSlice";
+import { useAppSelector } from "../../app/hooks";
+import ControlPoint from "../controlpoints";
+import { LayerGroup } from "react-leaflet";
+
+export default function ControlPointsLayer() {
+  const controlPoints = useAppSelector(selectControlPoints);
+  return (
+    <LayerGroup>
+      {Object.values(controlPoints.controlPoints).map((controlPoint) => {
+        return (
+          <ControlPoint key={controlPoint.id} controlPoint={controlPoint} />
+        );
+      })}
+    </LayerGroup>
+  );
+}

client/src/components/controlpointslayer/index.ts

@@ -0,0 +1 @@
+export { default } from "./ControlPointsLayer";

client/src/components/cullingexclusionzones/CullingExclusionZones.test.tsx

@@ -0,0 +1,78 @@
+import { renderWithProviders } from "../../testutils";
+import CullingExclusionZones from "./CullingExclusionZones";
+import { PropsWithChildren } from "react";
+
+const mockCircle = jest.fn();
+const mockLayerGroup = jest.fn();
+const mockLayerControlOverlay = jest.fn();
+jest.mock("react-leaflet", () => ({
+  LayerGroup: (props: PropsWithChildren<any>) => {
+    mockLayerGroup(props);
+    return <>{props.children}</>;
+  },
+  LayersControl: {
+    Overlay: (props: PropsWithChildren<any>) => {
+      mockLayerControlOverlay(props);
+      return <>{props.children}</>;
+    },
+  },
+  Circle: (props: any) => {
+    mockCircle(props);
+  },
+}));
+
+describe("CullingExclusionZones", () => {
+  it("is empty there are no exclusion zones", () => {
+    renderWithProviders(<CullingExclusionZones />);
+    expect(mockCircle).not.toHaveBeenCalled();
+    expect(mockLayerGroup).toHaveBeenCalledTimes(1);
+    expect(mockLayerControlOverlay).toHaveBeenCalledTimes(1);
+  });
+
+  describe("zone circles", () => {
+    it("are drawn in the correct locations", () => {
+      renderWithProviders(<CullingExclusionZones />, {
+        preloadedState: {
+          unculledZones: {
+            zones: [
+              {
+                position: {
+                  lat: 0,
+                  lng: 0,
+                },
+                radius: 10,
+              },
+              {
+                position: {
+                  lat: 1,
+                  lng: 1,
+                },
+                radius: 2,
+              },
+            ],
+          },
+        },
+      });
+      expect(mockCircle).toHaveBeenCalledTimes(2);
+      expect(mockCircle).toHaveBeenCalledWith(
+        expect.objectContaining({
+          center: {
+            lat: 0,
+            lng: 0,
+          },
+          radius: 10,
+        })
+      );
+      expect(mockCircle).toHaveBeenCalledWith(
+        expect.objectContaining({
+          center: {
+            lat: 1,
+            lng: 1,
+          },
+          radius: 2,
+        })
+      );
+    });
+    it("are not interactive", () => {});
+  });
+});

client/src/components/cullingexclusionzones/CullingExclusionZones.tsx

@@ -0,0 +1,39 @@
+import { UnculledZone } from "../../api/liberationApi";
+import { selectUnculledZones } from "../../api/unculledZonesSlice";
+import { useAppSelector } from "../../app/hooks";
+import { LayerGroup, LayersControl, Circle } from "react-leaflet";
+
+interface CullingExclusionCirclesProps {
+  zones: UnculledZone[];
+}
+
+const CullingExclusionCircles = (props: CullingExclusionCirclesProps) => {
+  return (
+    <>
+      <LayerGroup>
+        {props.zones.map((zone, idx) => {
+          return (
+            <Circle
+              key={idx}
+              center={zone.position}
+              radius={zone.radius}
+              color="#b4ff8c"
+              fill={false}
+              interactive={false}
+            />
+          );
+        })}
+      </LayerGroup>
+    </>
+  );
+};
+
+export default function CullingExclusionZones() {
+  const data = useAppSelector(selectUnculledZones).zones;
+
+  return (
+    <LayersControl.Overlay name="Culling exclusion zones">
+      <CullingExclusionCircles zones={data}></CullingExclusionCircles>
+    </LayersControl.Overlay>
+  );
+}

client/src/components/cullingexclusionzones/index.ts

@@ -0,0 +1 @@
+export { default } from "./CullingExclusionZones";

client/src/components/flightplan/FlightPlan.tsx

@@ -0,0 +1,120 @@
+import { Flight } from "../../api/liberationApi";
+import { useGetCommitBoundaryForFlightQuery } from "../../api/liberationApi";
+import WaypointMarker from "../waypointmarker";
+import { ReactElement } from "react";
+import { Polyline } from "react-leaflet";
+
+const BLUE_PATH = "#0084ff";
+const RED_PATH = "#c85050";
+const SELECTED_PATH = "#ffff00";
+
+interface FlightPlanProps {
+  flight: Flight;
+  selected: boolean;
+  highlight?: boolean;
+}
+
+const pathColor = (props: FlightPlanProps) => {
+  if (props.selected && props.highlight) {
+    return SELECTED_PATH;
+  } else if (props.flight.blue) {
+    return BLUE_PATH;
+  } else {
+    return RED_PATH;
+  }
+};
+
+function FlightPlanPath(props: FlightPlanProps) {
+  const color = pathColor(props);
+  const waypoints = props.flight.waypoints;
+  if (waypoints == null) {
+    return <></>;
+  }
+  const points = waypoints
+    .filter((waypoint) => waypoint.include_in_path)
+    .map((waypoint) => waypoint.position);
+  return (
+    <Polyline
+      positions={points}
+      pathOptions={{ color: color, interactive: false }}
+    />
+  );
+}
+
+const WaypointMarkers = (props: FlightPlanProps) => {
+  if (!props.selected || props.flight.waypoints == null) {
+    return <></>;
+  }
+
+  var markers: ReactElement[] = [];
+  props.flight.waypoints?.forEach((p, idx) => {
+    if (p.should_mark) {
+      markers.push(
+        <WaypointMarker
+          key={idx}
+          number={idx}
+          waypoint={p}
+          flight={props.flight}
+        />
+      );
+    }
+  });
+
+  return <>{markers}</>;
+};
+
+interface CommitBoundaryProps {
+  flightId: string;
+  selected: boolean;
+}
+
+function CommitBoundary(props: CommitBoundaryProps) {
+  const { data, error, isLoading } = useGetCommitBoundaryForFlightQuery(
+    {
+      flightId: props.flightId,
+    },
+    // RTK Query doesn't seem to allow us to invalidate the cache from anything
+    // but a mutation, but this data can be invalidated by events from the
+    // websocket. Just disable the cache for this.
+    //
+    // This isn't perfect. It won't redraw until the component remounts. There
+    // doesn't appear to be a better way.
+    { refetchOnMountOrArgChange: true }
+  );
+  if (isLoading) {
+    return <></>;
+  }
+  if (error) {
+    console.error(`Error loading commit boundary for ${props.flightId}`, error);
+    return <></>;
+  }
+  if (!data) {
+    console.log(
+      `Null response data when loading commit boundary for ${props.flightId}`
+    );
+    return <></>;
+  }
+  return (
+    <Polyline positions={data} color="#ffff00" weight={1} interactive={false} />
+  );
+}
+
+function CommitBoundaryIfSelected(props: CommitBoundaryProps) {
+  if (!props.selected) {
+    return <></>;
+  }
+  return <CommitBoundary {...props} />;
+}
+
+export default function FlightPlan(props: FlightPlanProps) {
+  return (
+    <>
+      <FlightPlanPath {...props} />
+      <WaypointMarkers {...props} />
+      <CommitBoundaryIfSelected
+        flightId={props.flight.id}
+        selected={props.selected}
+      />
+    </>
+  );
+}

client/src/components/flightplan/index.ts

@@ -0,0 +1 @@
+export { default } from "./FlightPlan";

client/src/components/flightplanslayer/FlightPlansLayer.test.tsx

@@ -0,0 +1,405 @@
+import { renderWithProviders } from "../../testutils";
+import FlightPlansLayer from "./FlightPlansLayer";
+import { PropsWithChildren } from "react";
+
+const mockPolyline = jest.fn();
+const mockLayerGroup = jest.fn();
+jest.mock("react-leaflet", () => ({
+  LayerGroup: (props: PropsWithChildren<any>) => {
+    mockLayerGroup(props);
+    return <>{props.children}</>;
+  },
+  Polyline: (props: any) => {
+    mockPolyline(props);
+  },
+}));
+
+// The waypoints in test data below should all use `should_make: false`. Markers
+// need useMap() to check the zoom level to decide if they should be drawn or
+// not, and we don't have good options here for mocking that behavior.
+describe("FlightPlansLayer", () => {
+  describe("unselected flights", () => {
+    it("are drawn", () => {
+      renderWithProviders(<FlightPlansLayer blue={true} />, {
+        preloadedState: {
+          flights: {
+            flights: {
+              foo: {
+                id: "foo",
+                blue: true,
+                sidc: "",
+                waypoints: [
+                  {
+                    name: "",
+                    position: {
+                      lat: 0,
+                      lng: 0,
+                    },
+                    altitude_ft: 0,
+                    altitude_reference: "MSL",
+                    is_movable: true,
+                    should_mark: false,
+                    include_in_path: true,
+                    timing: "",
+                  },
+                  {
+                    name: "",
+                    position: {
+                      lat: 1,
+                      lng: 1,
+                    },
+                    altitude_ft: 0,
+                    altitude_reference: "MSL",
+                    is_movable: true,
+                    should_mark: false,
+                    include_in_path: true,
+                    timing: "",
+                  },
+                ],
+              },
+              bar: {
+                id: "bar",
+                blue: true,
+                sidc: "",
+                waypoints: [
+                  {
+                    name: "",
+                    position: {
+                      lat: 0,
+                      lng: 0,
+                    },
+                    altitude_ft: 0,
+                    altitude_reference: "MSL",
+                    is_movable: true,
+                    should_mark: false,
+                    include_in_path: true,
+                    timing: "",
+                  },
+                  {
+                    name: "",
+                    position: {
+                      lat: 1,
+                      lng: 1,
+                    },
+                    altitude_ft: 0,
+                    altitude_reference: "MSL",
+                    is_movable: true,
+                    should_mark: false,
+                    include_in_path: true,
+                    timing: "",
+                  },
+                ],
+              },
+            },
+            selected: null,
+          },
+        },
+      });
+      expect(mockPolyline).toHaveBeenCalledTimes(2);
+      expect(mockLayerGroup).toBeCalledTimes(1);
+    });
+    it("are not drawn if wrong coalition", () => {
+      renderWithProviders(<FlightPlansLayer blue={true} />, {
+        preloadedState: {
+          flights: {
+            flights: {
+              foo: {
+                id: "foo",
+                blue: true,
+                sidc: "",
+                waypoints: [
+                  {
+                    name: "",
+                    position: {
+                      lat: 0,
+                      lng: 0,
+                    },
+                    altitude_ft: 0,
+                    altitude_reference: "MSL",
+                    is_movable: true,
+                    should_mark: false,
+                    include_in_path: true,
+                    timing: "",
+                  },
+                  {
+                    name: "",
+                    position: {
+                      lat: 1,
+                      lng: 1,
+                    },
+                    altitude_ft: 0,
+                    altitude_reference: "MSL",
+                    is_movable: true,
+                    should_mark: false,
+                    include_in_path: true,
+                    timing: "",
+                  },
+                ],
+              },
+              bar: {
+                id: "bar",
+                blue: false,
+                sidc: "",
+                waypoints: [
+                  {
+                    name: "",
+                    position: {
+                      lat: 0,
+                      lng: 0,
+                    },
+                    altitude_ft: 0,
+                    altitude_reference: "MSL",
+                    is_movable: true,
+                    should_mark: false,
+                    include_in_path: true,
+                    timing: "",
+                  },
+                  {
+                    name: "",
+                    position: {
+                      lat: 1,
+                      lng: 1,
+                    },
+                    altitude_ft: 0,
+                    altitude_reference: "MSL",
+                    is_movable: true,
+                    should_mark: false,
+                    include_in_path: true,
+                    timing: "",
+                  },
+                ],
+              },
+            },
+            selected: null,
+          },
+        },
+      });
+      expect(mockPolyline).toHaveBeenCalledTimes(1);
+      expect(mockLayerGroup).toBeCalledTimes(1);
+    });
+    it("are not drawn when only selected flights are to be drawn", () => {
+      renderWithProviders(<FlightPlansLayer blue={true} selectedOnly />, {
+        preloadedState: {
+          flights: {
+            flights: {
+              foo: {
+                id: "foo",
+                blue: true,
+                sidc: "",
+                waypoints: [
+                  {
+                    name: "",
+                    position: {
+                      lat: 0,
+                      lng: 0,
+                    },
+                    altitude_ft: 0,
+                    altitude_reference: "MSL",
+                    is_movable: true,
+                    should_mark: false,
+                    include_in_path: true,
+                    timing: "",
+                  },
+                  {
+                    name: "",
+                    position: {
+                      lat: 1,
+                      lng: 1,
+                    },
+                    altitude_ft: 0,
+                    altitude_reference: "MSL",
+                    is_movable: true,
+                    should_mark: false,
+                    include_in_path: true,
+                    timing: "",
+                  },
+                ],
+              },
+            },
+            selected: null,
+          },
+        },
+      });
+      expect(mockPolyline).not.toHaveBeenCalled();
+      expect(mockLayerGroup).toBeCalledTimes(1);
+    });
+  });
+  describe("selected flights", () => {
+    it("are drawn", () => {
+      renderWithProviders(<FlightPlansLayer blue={true} />, {
+        preloadedState: {
+          flights: {
+            flights: {
+              foo: {
+                id: "foo",
+                blue: true,
+                sidc: "",
+                waypoints: [
+                  {
+                    name: "",
+                    position: {
+                      lat: 0,
+                      lng: 0,
+                    },
+                    altitude_ft: 0,
+                    altitude_reference: "MSL",
+                    is_movable: true,
+                    should_mark: false,
+                    include_in_path: true,
+                    timing: "",
+                  },
+                  {
+                    name: "",
+                    position: {
+                      lat: 1,
+                      lng: 1,
+                    },
+                    altitude_ft: 0,
+                    altitude_reference: "MSL",
+                    is_movable: true,
+                    should_mark: false,
+                    include_in_path: true,
+                    timing: "",
+                  },
+                ],
+              },
+              bar: {
+                id: "bar",
+                blue: true,
+                sidc: "",
+                waypoints: [
+                  {
+                    name: "",
+                    position: {
+                      lat: 0,
+                      lng: 0,
+                    },
+                    altitude_ft: 0,
+                    altitude_reference: "MSL",
+                    is_movable: true,
+                    should_mark: false,
+                    include_in_path: true,
+                    timing: "",
+                  },
+                  {
+                    name: "",
+                    position: {
+                      lat: 1,
+                      lng: 1,
+                    },
+                    altitude_ft: 0,
+                    altitude_reference: "MSL",
+                    is_movable: true,
+                    should_mark: false,
+                    include_in_path: true,
+                    timing: "",
+                  },
+                ],
+              },
+            },
+            selected: "foo",
+          },
+        },
+      });
+      expect(mockPolyline).toHaveBeenCalledTimes(2);
+      expect(mockLayerGroup).toBeCalledTimes(1);
+    });
+    it("are not drawn twice", () => {
+      renderWithProviders(<FlightPlansLayer blue={true} />, {
+        preloadedState: {
+          flights: {
+            flights: {
+              foo: {
+                id: "foo",
+                blue: true,
+                sidc: "",
+                waypoints: [
+                  {
+                    name: "",
+                    position: {
+                      lat: 0,
+                      lng: 0,
+                    },
+                    altitude_ft: 0,
+                    altitude_reference: "MSL",
+                    is_movable: true,
+                    should_mark: false,
+                    include_in_path: true,
+                    timing: "",
+                  },
+                  {
+                    name: "",
+                    position: {
+                      lat: 1,
+                      lng: 1,
+                    },
+                    altitude_ft: 0,
+                    altitude_reference: "MSL",
+                    is_movable: true,
+                    should_mark: false,
+                    include_in_path: true,
+                    timing: "",
+                  },
+                ],
+              },
+            },
+            selected: "foo",
+          },
+        },
+      });
+      expect(mockPolyline).toHaveBeenCalledTimes(1);
+      expect(mockLayerGroup).toBeCalledTimes(1);
+    });
+    it("are not drawn if red", () => {
+      renderWithProviders(<FlightPlansLayer blue={false} selectedOnly />, {
+        preloadedState: {
+          flights: {
+            flights: {
+              foo: {
+                id: "foo",
+                blue: false,
+                sidc: "",
+                waypoints: [
+                  {
+                    name: "",
+                    position: {
+                      lat: 0,
+                      lng: 0,
+                    },
+                    altitude_ft: 0,
+                    altitude_reference: "MSL",
+                    is_movable: true,
+                    should_mark: false,
+                    include_in_path: true,
+                    timing: "",
+                  },
+                  {
+                    name: "",
+                    position: {
+                      lat: 1,
+                      lng: 1,
+                    },
+                    altitude_ft: 0,
+                    altitude_reference: "MSL",
+                    is_movable: true,
+                    should_mark: false,
+                    include_in_path: true,
+                    timing: "",
+                  },
+                ],
+              },
+            },
+            selected: "foo",
+          },
+        },
+      });
+      expect(mockPolyline).not.toHaveBeenCalled();
+      expect(mockLayerGroup).toBeCalledTimes(1);
+    });
+  });
+  it("are not drawn if there are no flights", () => {
+    renderWithProviders(<FlightPlansLayer blue={true} />);
+    expect(mockPolyline).not.toHaveBeenCalled();
+    expect(mockLayerGroup).toBeCalledTimes(1);
+  });
+});

client/src/components/flightplanslayer/FlightPlansLayer.tsx

@@ -0,0 +1,67 @@
+import { selectFlights, selectSelectedFlight } from "../../api/flightsSlice";
+import { Flight } from "../../api/liberationApi";
+import { useAppSelector } from "../../app/hooks";
+import FlightPlan from "../flightplan";
+import { LayerGroup } from "react-leaflet";
+
+interface FlightPlansLayerProps {
+  blue: boolean;
+  selectedOnly?: true;
+}
+
+function SelectedFlightPlan(props: FlightPlansLayerProps) {
+  const flight = useAppSelector(selectSelectedFlight);
+  if (!flight) {
+    return <></>;
+  }
+
+  if (!props.blue) {
+    // We don't currently support playing as red, so nothing to draw.
+    return <></>;
+  }
+
+  return (
+    <FlightPlan
+      key={flight.id}
+      flight={flight}
+      selected={true}
+      highlight={!props.selectedOnly}
+    />
+  );
+}
+
+function UnselectedFlightPlans(props: FlightPlansLayerProps) {
+  const flightData = useAppSelector(selectFlights);
+  const isNotSelected = (flight: Flight) => {
+    if (flightData.selected == null) {
+      return true;
+    }
+    return flightData.selected !== flight.id;
+  };
+
+  if (props.selectedOnly) {
+    return <></>;
+  }
+
+  return (
+    <>
+      {Object.values(flightData.flights)
+        .filter(isNotSelected)
+        .filter((flight) => props.blue === flight.blue)
+        .map((flight) => {
+          return (
+            <FlightPlan key={flight.id} flight={flight} selected={false} />
+          );
+        })}
+    </>
+  );
+}
+
+export default function FlightPlansLayer(props: FlightPlansLayerProps) {
+  return (
+    <LayerGroup>
+      <UnselectedFlightPlans {...props} />
+      <SelectedFlightPlan {...props} />
+    </LayerGroup>
+  );
+}

client/src/components/flightplanslayer/index.ts

@@ -0,0 +1 @@
+export { default } from "./FlightPlansLayer";

client/src/components/frontline/FrontLine.test.tsx

@@ -0,0 +1,32 @@
+import { renderWithProviders } from "../../testutils";
+import FrontLine from "./FrontLine";
+import { PolylineProps } from "react-leaflet";
+
+const mockPolyline = jest.fn();
+jest.mock("react-leaflet", () => ({
+  Polyline: (props: PolylineProps) => {
+    mockPolyline(props);
+  },
+}));
+
+describe("FrontLine", () => {
+  it("is drawn in the correct location", () => {
+    const extents = [
+      { lat: 0, lng: 0 },
+      { lat: 1, lng: 0 },
+    ];
+    renderWithProviders(
+      <FrontLine
+        front={{
+          id: "",
+          extents: extents,
+        }}
+      />
+    );
+    expect(mockPolyline).toHaveBeenCalledWith(
+      expect.objectContaining({
+        positions: extents,
+      })
+    );
+  });
+});