Initial commit.

.gitignore

+# misc
+*~
+.DS_Store

.gitmodules

+[submodule "eslint-config"]
+	path = eslint-config
+	url = git@git.unl.edu:soft-core/soft-260/eslint-config.git

boost-app/.gitignore

+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/build
+
+# environments
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# logs
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# misc
+*~
+.DS_Store

boost-app/README.md

+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app), using the [Redux](https://redux.js.org/) and [Redux Toolkit](https://redux-toolkit.js.org/) template.
+
+## 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/).
+
+### Code Splitting
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting
+
+### Analyzing the Bundle Size
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size
+
+### Making a Progressive Web App
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app
+
+### Advanced Configuration
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration
+
+### Deployment
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/deployment
+
+### `npm run build` fails to minify
+
+This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

boost-app/package.json

+{
+  "name": "@unlsoft/boost-app",
+  "version": "1.0.0",
+  "description": "A PWA for playing the board game Boost.",
+  "private": true,
+  "license": "UNLICENSED",
+  "scripts": {
+    "generate:game:demo": "generate-boost-game --demo > ./src/games/demo.js",
+    "generate:game:two-player": "generate-boost-game --ai-extra-opening-sites 2 > ./src/games/twoPlayer.js",
+    "generate:game:three-player": "generate-boost-game --player-count 3 --ai-extra-opening-sites 2 > ./src/games/threePlayer.js",
+    "generate:game:two-player-mini": "generate-boost-game --board-width 7 --board-height 7 --starting-population-limit 4 > ./src/games/twoPlayerMini.js",
+    "generate:game:three-player-mini": "generate-boost-game --board-width 7 --board-height 7 --player-count 3 --starting-population-limit 7 > ./src/games/threePlayerMini.js",
+    "generate": "run-p generate:**",
+    "lint:js": "eslint ./src",
+    "lint": "run-s generate lint:**",
+    "start:react-scripts": "react-scripts start",
+    "start": "run-s generate start:**",
+    "build:webpack": "react-scripts build",
+    "build": "run-s generate build:**",
+    "test:js": "react-scripts test --watchAll",
+    "test": "run-s generate test:**",
+    "eject": "react-scripts eject"
+  },
+  "homepage": ".",
+  "dependencies": {
+    "@reduxjs/toolkit": "^1.3.5",
+    "@testing-library/jest-dom": "^5.11.3",
+    "@testing-library/react": "^10.4.8",
+    "@testing-library/user-event": "^12.1.1",
+    "@unlsoft/boost-engine": "file:../boost-engine",
+    "@unlsoft/boost-game": "file:../boost-game",
+    "classnames": "^2.2.6",
+    "npm-run-all": "^4.1.5",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-flip-toolkit": "^7.0.9",
+    "react-modal": "^3.11.2",
+    "react-redux": "^7.2.0",
+    "react-router-dom": "^5.2.0",
+    "react-scripts": "3.4.1",
+    "react-transition-group": "^4.4.1",
+    "redux-persist": "^6.0.0",
+    "reselect-map": "^1.0.5"
+  },
+  "devDependencies": {
+    "@unlsoft/eslint-config": "file:../eslint-config",
+    "eslint-plugin-jest-dom": "^3.1.7",
+    "eslint-plugin-testing-library": "^3.6.0"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "plugin:jest-dom/recommended",
+      "plugin:testing-library/react",
+      "@unlsoft/eslint-config/react"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

boost-app/public/engine.js

+../node_modules/@unlsoft/boost-engine/dist/engine.js
\ No newline at end of file

boost-app/public/engineThread.js

+../node_modules/@unlsoft/boost-engine/dist/engineThread.js
\ No newline at end of file

boost-app/public/index.html

+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <meta
+      name="description"
+      content="Boost is a turn-based abstract strategy board game like checkers, chess, Xiangqi, or Arimaa."
+    />
+    <meta name="theme-color" content="rgba(239, 239, 239, 1)" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo.svg" />
+    <title>Boost</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+  </body>
+</html>

boost-app/public/logo.svg

+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <rect x="0" y="0" width="512" height="512" fill="rgba(0, 0, 0, 1)" />
+  <path d="M 256 416
+  	   C 316 399 365 304 365 147
+  	   C 331 177 274 126 256 96
+  	   C 238 126 181 177 147 147
+  	   C 147 304 196 399 256 416
+  	   z" fill="rgba(255, 255, 255, 1)" stroke="rgba(255, 255, 255, 1)" stroke-width="12" stroke-linejoin="round" />
+  <path d="M 256 352
+  	   C 292 342 321 285 321 191
+  	   C 301 209 267 178 256 160
+  	   C 245 178 211 209 191 191
+  	   C 191 285 220 342 256 352
+  	   z" fill="rgba(0, 0, 0, 1)" stroke="rgba(0, 0, 0, 1)" stroke-width="12" stroke-linejoin="round" />
+</svg>

boost-app/public/manifest.json

+{
+  "short_name": "Boost",
+  "name": "Boost",
+  "description": "Boost is a turn-based abstract strategy board game like checkers, chess, Xiangqi, or Arimaa.",
+  "categories": [
+    "entertainment",
+    "games",
+    "social"
+  ],
+  "icons": [
+    {
+      "src": "logo.svg",
+      "type": "image/svg+xml",
+      "sizes": "192x192 512x512",
+      "purpose": "any maskable"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "orientation": "portrait",
+  "theme_color": "rgba(239, 239, 239, 1)",
+  "background_color": "rgba(239, 239, 239, 1)"
+}

boost-app/src/__snapshots__/variant.test.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`the Variant component renders game menu, players menu, and play pages 1`] = `
+<div>
+  <div>
+    [Page path=
+    /jkl
+    classNames=
+    stu
+    ]
+    <div>
+      [Heading text=
+      Choose Game
+      ]
+    </div>
+    <div>
+      [GameMenu slot=
+      def
+      gameIdentifier=
+      ghi
+      dragons=
+      9
+      newGameTo=
+      /mno
+      loadGameTo=
+      /pqr
+      ]
+    </div>
+  </div>
+  <div>
+    [Page path=
+    /mno
+    classNames=
+    stu
+    ]
+    <div>
+      [Heading text=
+      Choose Players
+      ]
+    </div>
+    <div>
+      [PlayersMenu slot=
+      def
+      to=
+      /pqr
+      ]
+    </div>
+  </div>
+  <div>
+    [Page path=
+    /pqr
+    classNames=
+    stu
+    ]
+    <div>
+      [Heading text=
+      abc
+      ]
+    </div>
+    <div>
+      [Player slot=
+      def
+      ]
+    </div>
+  </div>
+</div>
+`;

boost-app/src/app.css

+.subpage-enter {
+    opacity: 0;
+}
+.subpage-enter.subpage-enter-active {
+    opacity: 1;
+    transition: opacity var(--animation-duration);
+}
+.subpage-exit {
+    opacity: 1;
+}
+.subpage-exit.subpage-exit-active {
+    opacity: 0;
+    transition: opacity var(--animation-duration);
+}
+
+@media not (prefers-reduced-motion) {
+    .subpage-enter {
+        transform: scale(0.5);
+    }
+    .subpage-enter.subpage-enter-active {
+        transform: scale(1);
+        transition: transform var(--animation-duration);
+    }
+    .subpage-exit {
+        transform: scale(1);
+    }
+    .subpage-exit.subpage-exit-active {
+        transform: scale(0.5);
+        transition: transform var(--animation-duration);
+    }
+}

boost-app/src/app.js

+import React from 'react';
+import { useHistory, Route, Redirect } from 'react-router-dom';
+
+import { Page } from './widgets/page.js';
+import { Heading } from './widgets/heading.js';
+import { createModalOpener } from './widgets/modal.js';
+import { Menu, MainMenuButton } from './widgets/menu.js';
+import { Tutorial } from './features/tutorial/tutorial.js';
+import { ResetTutorialMenu } from './features/tutorial/resetTutorialMenu.js';
+import { RULES_TUTORIAL } from './tutorials/rules.js';
+import { Variant } from './variant.js';
+
+import './app.css';
+import rulesIcon from './icons/rules.svg';
+import twoPlayerIcon from './icons/twoPlayer.svg';
+import threePlayerIcon from './icons/threePlayer.svg';
+import twoPlayerDragonlessIcon from './icons/twoPlayerDragonless.svg';
+import threePlayerDragonlessIcon from './icons/threePlayerDragonless.svg';
+import twoPlayerMiniIcon from './icons/twoPlayerMini.svg';
+import threePlayerMiniIcon from './icons/threePlayerMini.svg';
+
+const TUTORIAL_RESET_SUBPATH = 'resetRulesTutorial';
+
+export function App() {
+  const history = useHistory();
+  return (
+    <>
+      <Route exact path={'/'}>
+        <Redirect to={'/menu'}/>
+      </Route>
+
+      <Page path={'/menu'}>
+        <Heading text={'Boost'} />
+        <Menu>
+          <MainMenuButton
+            to={'/learn/rules'}
+            image={rulesIcon}
+            text={'Learn the Rules'}
+            onContextMenu={createModalOpener(history, TUTORIAL_RESET_SUBPATH)} />
+          <MainMenuButton
+            to={'/play/twoPlayer/gameMenu'}
+            image={twoPlayerIcon}
+            text={'Play a Two-Player Game'} />
+          <MainMenuButton
+            to={'/play/threePlayer/gameMenu'}
+            image={threePlayerIcon}
+            text={'Play a Three-Player Game'} />
+          <MainMenuButton
+            to={'/play/twoPlayerDragonless/gameMenu'}
+            image={twoPlayerDragonlessIcon}
+            text={'Play a Two-Player Dragonless Game'} />
+          <MainMenuButton
+            to={'/play/threePlayerDragonless/gameMenu'}
+            image={threePlayerDragonlessIcon}
+            text={'Play a Three-Player Dragonless Game'} />
+          <MainMenuButton
+            to={'/play/twoPlayerMini/gameMenu'}
+            image={twoPlayerMiniIcon}
+            text={'Play a Two-Player Minigame'} />
+          <MainMenuButton
+            to={'/play/threePlayerMini/gameMenu'}
+            image={threePlayerMiniIcon}
+            text={'Play a Three-Player Minigame'} />
+        </Menu>
+        <ResetTutorialMenu subpath={TUTORIAL_RESET_SUBPATH} slot={'learn/rules'} tutorial={RULES_TUTORIAL} />
+      </Page>
+
+      <Page path={'/learn/rules'} classNames={'subpage'}>
+        <Heading text={RULES_TUTORIAL.title} />
+        <Tutorial slot={'learn/rules'} tutorial={RULES_TUTORIAL} />
+      </Page>
+
+      <Variant
+        title={'Two-Player Game'}
+        slot={'twoPlayer'}
+        gameIdentifier={'boost-9-9-2-8-2'}
+        dragons={7}
+        gameMenuPath={'/play/twoPlayer/gameMenu'}
+        playersMenuPath={'/play/twoPlayer/playersMenu'}
+        playerPath={'/play/twoPlayer/board'}
+        classNames={'subpage'} />
+      <Variant
+        title={'Three-Player Game'}
+        slot={'threePlayer'}
+        gameIdentifier={'boost-9-9-3-8-2'}
+        dragons={7}
+        gameMenuPath={'/play/threePlayer/gameMenu'}
+        playersMenuPath={'/play/threePlayer/playersMenu'}
+        playerPath={'/play/threePlayer/board'}
+        classNames={'subpage'} />
+      <Variant
+        title={'Two-Player Dragonless Game'}
+        slot={'twoPlayerDragonless'}
+        gameIdentifier={'boost-9-9-2-8-2'}
+        dragons={0}
+        gameMenuPath={'/play/twoPlayerDragonless/gameMenu'}
+        playersMenuPath={'/play/twoPlayerDragonless/playersMenu'}
+        playerPath={'/play/twoPlayerDragonless/board'}
+        classNames={'subpage'} />
+      <Variant
+        title={'Three-Player Dragonless Game'}
+        slot={'threePlayerDragonless'}
+        gameIdentifier={'boost-9-9-3-8-2'}
+        dragons={0}
+        gameMenuPath={'/play/threePlayerDragonless/gameMenu'}
+        playersMenuPath={'/play/threePlayerDragonless/playersMenu'}
+        playerPath={'/play/threePlayerDragonless/board'}
+        classNames={'subpage'} />
+      <Variant
+        title={'Two-Player Minigame'}
+        slot={'twoPlayerMini'}
+        gameIdentifier={'boost-7-7-2-4-2'}
+        dragons={7}
+        gameMenuPath={'/play/twoPlayerMini/gameMenu'}
+        playersMenuPath={'/play/twoPlayerMini/playersMenu'}
+        playerPath={'/play/twoPlayerMini/board'}
+        classNames={'subpage'} />
+      <Variant
+        title={'Three-Player Minigame'}
+        slot={'threePlayerMini'}
+        gameIdentifier={'boost-7-7-3-7-2'}
+        dragons={7}
+        gameMenuPath={'/play/threePlayerMini/gameMenu'}
+        playersMenuPath={'/play/threePlayerMini/playersMenu'}
+        playerPath={'/play/threePlayerMini/board'}
+        classNames={'subpage'} />
+    </>
+  );
+}

boost-app/src/app/store.js

+import { combineReducers, getDefaultMiddleware, configureStore } from '@reduxjs/toolkit';
+import { persistReducer, persistStore } from 'redux-persist';
+import storage from 'redux-persist/lib/storage';
+
+import tutorialProgressSlice from '../features/tutorial/tutorialProgressSlice.js';
+import treeSlotsSlice from '../features/lobby/treeSlotsSlice.js';
+import gameTreesSlice from '../features/play/gameTreesSlice.js';
+import piecesSlice from '../features/preferences/piecesSlice.js';
+
+const persistedReducer = persistReducer(
+  {
+    key: 'root',
+    storage,
+  },
+  combineReducers({
+    [tutorialProgressSlice.name]: tutorialProgressSlice.reducer,
+    [treeSlotsSlice.name]: treeSlotsSlice.reducer,
+    [gameTreesSlice.name]: gameTreesSlice.reducer,
+    [piecesSlice.name]: piecesSlice.reducer,
+  }),
+);
+
+export const store = configureStore({
+  reducer: persistedReducer,
+  middleware: getDefaultMiddleware({
+    immutableCheck: false,
+    // If you want to enable serializableCheck, then set its value to the object
+    // {
+    //   ignoredActions: [FLUSH, REHYDRATE, PAUSE, PERSIST, PURGE, REGISTER],
+    // }
+    // instead of true, where those constants are imported from redux-persist
+    // (see https://github.com/rt2zz/redux-persist/issues/988).
+    serializableCheck: false,
+  }),
+});
+export const persistor = persistStore(store);

boost-app/src/features/lobby/__snapshots__/gameMenu.test.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`the GameMenu component creates a new game preview if there is none 1`] = `
+<div>
+  <div
+    id="portrait"
+  >
+    <div
+      id="app"
+    >
+      <div
+        class="menu bottom-aligned"
+      >
+        <div
+          class="scrollable"
+        >
+          <div
+            class="list"
+          >
+            <button
+              disabled=""
+            >
+              [No saved games available.]
+            </button>
+            <button>
+              <div>
+                [Board treeName=
+                defPreview
+                disabled=
+                true
+                ]
+              </div>
+              New Game
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="button-bar"
+      >
+        <button>
+          <img
+            alt="Menu"
+            src="menu.svg"
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`the GameMenu component deletes saved games and closes the modals 1`] = `
+<div>
+  <div
+    id="portrait"
+  >
+    <div
+      id="app"
+    >
+      <div
+        class="menu bottom-aligned"
+      >
+        <div
+          class="scrollable"
+        >
+          <div
+            class="list"
+          >
+            <button>
+              <div>
+                [Board treeName=
+                def/ghi
+                disabled=
+                true
+                ]
+              </div>
+              Saved Game
+              <br />
+              Human vs. Human
+            </button>
+            <button>
+              <div>
+                [Board treeName=
+                defPreview
+                disabled=
+                true
+                ]
+              </div>
+              New Game
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="button-bar"
+      >
+        <button>
+          <img
+            alt="Menu"
+            src="menu.svg"
+          />
+        </button>
+      </div>
+    </div>
+    <div
+      class="ReactModalPortal"
+    />
+    <div
+      class="ReactModalPortal"
+    />
+  </div>
+</div>
+`;
+
+exports[`the GameMenu component does not create a new game preview if there already is one 1`] = `
+<div>
+  <div
+    id="portrait"
+  >
+    <div
+      id="app"
+    >
+      <div
+        class="menu bottom-aligned"
+      >
+        <div
+          class="scrollable"
+        >
+          <div
+            class="list"
+          >
+            <button
+              disabled=""
+            >
+              [No saved games available.]
+            </button>
+            <button>
+              <div>
+                [Board treeName=
+                defPreview
+                disabled=
+                true
+                ]
+              </div>
+              New Game
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="button-bar"
+      >
+        <button>
+          <img
+            alt="Menu"
+            src="menu.svg"
+          />
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`the GameMenu component opens a rename modal 1`] = `
+<div>
+  <div
+    id="portrait"
+  >
+    <div
+      aria-hidden="true"
+      id="app"
+    >
+      <div
+        class="menu bottom-aligned"
+      >
+        <div
+          class="scrollable"
+        >
+          <div
+            class="list"
+          >
+            <button>
+              <div>
+                [Board treeName=
+                def/ghi
+                disabled=
+                true
+                ]
+              </div>
+              Saved Game
+              <br />
+              Human vs. Human
+            </button>
+            <button>
+              <div>
+                [Board treeName=
+                defPreview
+                disabled=
+                true
+                ]
+              </div>
+              New Game
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="button-bar"
+      >
+        <button>
+          <img
+            alt="Menu"
+            src="menu.svg"
+          />
+        </button>
+      </div>
+    </div>
+    <div
+      class="ReactModalPortal"
+    />
+    <div
+      class="ReactModalPortal"
+    >
+      <div
+        class="ReactModal__Overlay ReactModal__Overlay--after-open overlay"
+      >
+        <div
+          aria-label="Saved Game"
+          class="ReactModal__Content ReactModal__Content--after-open content"
+          role="dialog"
+          tabindex="-1"
+        >
+          <div
+            class="menu"
+          >
+            <div
+              class="scrollable"
+            >
+              <div
+                class="list"
+              >
+                <button
+                  aria-level="2"
+                  class="decorative"
+                  disabled=""
+                  role="heading"
+                >
+                  Rename "Saved Game" to:
+                </button>
+                <input
+                  type="text"
+                  value="Saved Game"
+                />
+                <button>
+                  Rename
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`the GameMenu component shows context menus on saved games with rename and delete options 1`] = `
+<div>
+  <div
+    id="portrait"
+  >
+    <div
+      aria-hidden="true"
+      id="app"
+    >
+      <div
+        class="menu bottom-aligned"
+      >
+        <div
+          class="scrollable"
+        >
+          <div
+            class="list"
+          >
+            <button>
+              <div>
+                [Board treeName=
+                def/ghi
+                disabled=
+                true
+                ]
+              </div>
+              Saved Game
+              <br />
+              Human vs. Human
+            </button>
+            <button>
+              <div>
+                [Board treeName=
+                defPreview
+                disabled=
+                true
+                ]
+              </div>
+              New Game
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="button-bar"
+      >
+        <button>
+          <img
+            alt="Menu"
+            src="menu.svg"
+          />
+        </button>
+      </div>
+    </div>
+    <div
+      class="ReactModalPortal"
+    >
+      <div
+        class="ReactModal__Overlay ReactModal__Overlay--after-open overlay"
+      >
+        <div
+          aria-label="Saved Game"
+          class="ReactModal__Content ReactModal__Content--after-open content"
+          role="dialog"
+          tabindex="-1"
+        >
+          <div
+            class="menu"
+          >
+            <div
+              class="scrollable"
+            >
+              <div
+                class="list"
+              >
+                <button
+                  aria-level="2"
+                  class="decorative"
+                  disabled=""
+                  role="heading"
+                >
+                  "Saved Game"
+                </button>
+                <button>
+                  Rename
+                </button>
+                <button>
+                  Delete
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ReactModalPortal"
+    />
+  </div>
+</div>
+`;
+
+exports[`the GameMenu component sorts saved games by modification time 1`] = `
+<div>
+  <div
+    id="portrait"
+  >
+    <div
+      id="app"
+    >
+      <div
+        class="menu bottom-aligned"
+      >
+        <div
+          class="scrollable"
+        >
+          <div
+            class="list"
+          >
+            <button>
+              <div>
+                [Board treeName=
+                def/mno
+                disabled=
+                true
+                ]
+              </div>
+              Earlier Game
+              <br />
+              Human vs. Human
+            </button>
+            <button>
+              <div>
+                [Board treeName=
+                def/jkl
+                disabled=
+                true
+                ]
+              </div>
+              Later Game
+              <br />
+              Human vs. Human
+            </button>
+            <button>
+              <div>
+                [Board treeName=
+                defPreview
+                disabled=
+                true
+                ]
+              </div>
+              New Game
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="button-bar"
+      >
+        <button>
+          <img
+            alt="Menu"
+            src="menu.svg"
+          />
+        </button>
+      </div>
+    </div>
+    <div
+      class="ReactModalPortal"
+    />
+    <div
+      class="ReactModalPortal"
+    />
+    <div
+      class="ReactModalPortal"
+    />
+    <div
+      class="ReactModalPortal"
+    />
+  </div>
+</div>
+`;
+
+exports[`the GameMenu component trims whitespace, renames saved games, and closes the modals 1`] = `
+<div>
+  <div
+    id="portrait"
+  >
+    <div
+      id="app"
+    >
+      <div
+        class="menu bottom-aligned"
+      >
+        <div
+          class="scrollable"
+        >
+          <div
+            class="list"
+          >
+            <button>
+              <div>
+                [Board treeName=
+                def/ghi
+                disabled=
+                true
+                ]
+              </div>
+              Saved Game
+              <br />
+              Human vs. Human
+            </button>
+            <button>
+              <div>
+                [Board treeName=
+                defPreview
+                disabled=
+                true
+                ]
+              </div>
+              New Game
+            </button>
+          </div>
+        </div>
+      </div>
+      <div
+        class="button-bar"
+      >
+        <button>
+          <img
+            alt="Menu"
+            src="menu.svg"
+          />
+        </button>
+      </div>
+    </div>
+    <div
+      class="ReactModalPortal"
+    />
+    <div
+      class="ReactModalPortal"
+    />
+  </div>
+</div>
+`;

boost-app/src/features/lobby/__snapshots__/playersMenu.test.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`the PlayersMenu component changes players and closes the modals 1`] = `
+<div>
+  <div
+    id="portrait"
+  >
+    <div
+      id="app"
+    >
+      <div
+        class="players"
+      >
+        <div
+          class="menu"
+        >
+          <div
+            class="scrollable"
+          >
+            <div
+              class="list"
+            >
+              <button>
+                <img
+                  alt="Player 1"
+                  class="icon"
+                  src="ghi"
+                />
+                <span
+                  class="description"
+                >
+                  Bot (Strength 1600)
+                </span>
+              </button>
+              <button>
+                <img
+                  alt="Player 2"
+                  class="icon"
+                  src="jkl"
+                />
+                <span
+                  class="description"
+                >
+                  Human
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="button-bar"
+      >
+        <button>
+          <img
+            alt="Menu"
+            src="menu.svg"
+          />
+        </button>
+        <button>
+          <img
+            alt="Back"
+            src="back.svg"
+          />
+        </button>
+        <button>
+          <img
+            alt="Begin Game"
+            src="forward.svg"
+          />
+        </button>
+      </div>
+    </div>
+    <div
+      class="ReactModalPortal"
+    />
+    <div
+      class="ReactModalPortal"
+    />
+  </div>
+</div>
+`;
+
+exports[`the PlayersMenu component has a button for each player and a button bar below 1`] = `
+<div>
+  <div
+    id="portrait"
+  >
+    <div
+      id="app"
+    >
+      <div
+        class="players"
+      >
+        <div
+          class="menu"
+        >
+          <div
+            class="scrollable"
+          >
+            <div
+              class="list"
+            >
+              <button>
+                <img
+                  alt="Player 1"
+                  class="icon"
+                  src="ghi"
+                />
+                <span
+                  class="description"
+                >
+                  Bot (Strength 1600)
+                </span>
+              </button>
+              <button>
+                <img
+                  alt="Player 2"
+                  class="icon"
+                  src="jkl"
+                />
+                <span
+                  class="description"
+                >
+                  Human
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="button-bar"
+      >
+        <button>
+          <img
+            alt="Menu"
+            src="menu.svg"
+          />
+        </button>
+        <button>
+          <img
+            alt="Back"
+            src="back.svg"
+          />
+        </button>
+        <button>
+          <img
+            alt="Begin Game"
+            src="forward.svg"
+          />
+        </button>
+      </div>
+    </div>
+    <div
+      class="ReactModalPortal"
+    />
+    <div
+      class="ReactModalPortal"
+    />
+  </div>
+</div>
+`;
+
+exports[`the PlayersMenu component has player buttons that open player selection modals 1`] = `
+<div>
+  <div
+    id="portrait"
+  >
+    <div
+      aria-hidden="true"
+      id="app"
+    >
+      <div
+        class="players"
+      >
+        <div
+          class="menu"
+        >
+          <div
+            class="scrollable"
+          >
+            <div
+              class="list"
+            >
+              <button>
+                <img
+                  alt="Player 1"
+                  class="icon"
+                  src="ghi"
+                />
+                <span
+                  class="description"
+                >
+                  Bot (Strength 1600)
+                </span>
+              </button>
+              <button>
+                <img
+                  alt="Player 2"
+                  class="icon"
+                  src="jkl"
+                />
+                <span
+                  class="description"
+                >
+                  Human
+                </span>
+              </button>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div
+        class="button-bar"
+      >
+        <button>
+          <img
+            alt="Menu"
+            src="menu.svg"
+          />
+        </button>
+        <button>
+          <img
+            alt="Back"
+            src="back.svg"
+          />
+        </button>
+        <button>
+          <img
+            alt="Begin Game"
+            src="forward.svg"
+          />
+        </button>
+      </div>
+    </div>
+    <div
+      class="ReactModalPortal"
+    >
+      <div
+        class="ReactModal__Overlay ReactModal__Overlay--after-open overlay"
+      >
+        <div
+          aria-label="Change Player 1"
+          class="ReactModal__Content ReactModal__Content--after-open content"
+          role="dialog"
+          tabindex="-1"
+        >
+          <div
+            class="menu"
+          >
+            <div
+              class="scrollable"
+            >
+              <div
+                class="list"
+              >
+                <button
+                  aria-level="2"
+                  class="decorative"
+                  disabled=""
+                  role="heading"
+                >
+                  Change Player 1
+                </button>
+                <button>
+                  Human
+                  
+                </button>
+                <button>
+                  Bot (Strength 100)
+                  
+                </button>
+                <button>
+                  Bot (Strength 200)
+                  
+                </button>
+                <button>
+                  Bot (Strength 300)
+                  
+                </button>
+                <button>
+                  Bot (Strength 400)
+                  
+                </button>
+                <button>
+                  Bot (Strength 500)
+                  
+                </button>
+                <button>
+                  Bot (Strength 600)
+                  
+                </button>
+                <button>
+                  Bot (Strength 700)
+                  
+                </button>
+                <button>
+                  Bot (Strength 800)
+                  
+                </button>
+                <button>
+                  Bot (Strength 900)
+                  
+                </button>
+                <button>
+                  Bot (Strength 1000)
+                  
+                </button>
+                <button>
+                  Bot (Strength 1100)
+                  
+                </button>
+                <button>
+                  Bot (Strength 1200)
+                  
+                </button>
+                <button>
+                  Bot (Strength 1300)
+                  
+                </button>
+                <button>
+                  Bot (Strength 1400)
+                  
+                </button>
+                <button>
+                  Bot (Strength 1500)
+                  
+                </button>
+                <button>
+                  Bot (Strength 1600)
+                   ✓
+                </button>
+                <button>
+                  Bot (Strength 1700)
+                  
+                </button>
+                <button>
+                  Bot (Strength 1800)
+                  
+                </button>
+                <button>
+                  Bot (Strength 1900)
+                  
+                </button>
+                <button>
+                  Bot (Strength 2000)
+                  
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div
+      class="ReactModalPortal"
+    />
+  </div>
+</div>
+`;

boost-app/src/features/lobby/boardSetup.js

+export const impure = {
+  getRandomIndex(list) {
+    return Math.floor(Math.random() * list.length);
+  },
+};
+
+function getMirrorDescription(game) {
+  return {
+    centerX: Math.floor(game.boardWidth / 2),
+    centerY: Math.floor(game.boardHeight / 2),
+    mirror: (x, y) => [game.boardWidth - 1 - x, game.boardHeight - 1 - y],
+  };
+}
+
+function getMirrorablyEmptyPoints(game, position) {
+  const { centerX, centerY, mirror } = getMirrorDescription(game);
+  const results = [];
+  const collect = (x, y) => {
+    const [mirrorX, mirrorY] = mirror(x, y);
+    if (position.getColorAndPieceType(x, y)[1] === undefined &&
+      position.getColorAndPieceType(mirrorX, mirrorY)[1] === undefined) {
+      results.push([x, y]);
+    }
+  };
+  for (let y = 0; y < centerY; ++y) {
+    for (let x = 0; x < game.boardWidth; ++x) {
+      collect(x, y);
+    }
+  }
+  if (game.boardHeight % 2 === 1) {
+    for (let x = 0; x < centerX; ++x) {
+      collect(x, centerY);
+    }
+  }
+  return results;
+}
+
+const MAXIMUM_DENSITY = 0.75;
+
+function withDragonsAdded(game, position, pool, requestedDragonCount) {
+  const { mirror } = getMirrorDescription(game);
+  let result = position;
+  for (let remainingPairs = Math.floor(Math.min(
+    requestedDragonCount / 2,
+    MAXIMUM_DENSITY * pool.length,
+  )); remainingPairs > 0; --remainingPairs) {
+    const index = impure.getRandomIndex(pool);
+    const [x, y] = pool[index];
+    pool[index] = pool.pop();
+    const [mirrorX, mirrorY] = mirror(x, y);
+    result = result.modified(x, y, undefined, game.dragon);
+    result = result.modified(mirrorX, mirrorY, undefined, game.dragon);
+  }
+  return result;
+}
+
+export function setUpBoard(game, position, requestedDragonCount) {
+  const { centerX, centerY } = getMirrorDescription(game);
+  let result = position;
+  if (requestedDragonCount % 2 === 1 && game.boardWidth % 2 === 1 && game.boardHeight % 2 === 1) {
+    result = result.modified(centerX, centerY, undefined, game.dragon);
+  }
+  return withDragonsAdded(game, result, getMirrorablyEmptyPoints(game, result), requestedDragonCount);
+}

boost-app/src/features/lobby/boardSetup.test.js

+/* eslint-disable no-magic-numbers */
+
+import { setUpBoard, impure } from './boardSetup.js';
+
+expect.extend({
+  toEqualAsASet(received, collection) {
+    const actual = new Set([...received]);
+    const expected = new Set([...collection]);
+    const missing = [...expected].filter((element) => !actual.has(element)).sort();
+    const extra = [...actual].filter((element) => !expected.has(element)).sort();
+    const pass = missing.length === 0 && extra.length === 0;
+    let message =
+        `- ${pass ? 'Unexpected' : 'Expected'}  - ${missing.length}\n` +
+        `+ ${pass ? 'Received  ' : 'Received'}  + ${extra.length}\n\n`;
+    for (const missingElement of missing) {
+      message += `- ${missingElement.toString().replace(/\n/g, '\n- ')}\n\n`;
+    }
+    for (const extraElement of extra) {
+      message += `+ ${extraElement.toString().replace(/\n/g, '\n+ ')}\n\n`;
+    }
+    return {
+      message: () => message,
+      pass,
+    };
+  },
+});
+
+function recordPlacements(boardWidth, boardHeight, occupied, requestedDragonCount) {
+  const game = {
+    boardWidth,
+    boardHeight,
+    dragon: 'd',
+  };
+  const position = {
+    getColorAndPieceType: jest.fn().mockName('getColorAndPieceType').mockImplementation(
+      (x, y) => [undefined, occupied.has(`${x},${y}`) ? 'occupied' : undefined],
+    ),
+    modified: jest.fn().mockName('modified'),
+  };
+  position.modified.mockReturnValue(position);
+  impure.getRandomIndex = jest.fn().mockName('getRandomIndex').mockReturnValue(0);
+  const result = setUpBoard(game, position, requestedDragonCount);
+  expect(result).toBe(position);
+  return new Set(position.modified.mock.calls.map(([x, y]) => `${x},${y}`));
+}
+
+describe('setUpBoard', () => {
+  test('does nothing when no dragons are requested', () => {
+    expect(recordPlacements(1, 3, new Set(), 0)).toEqualAsASet([]);
+  });
+  test('does nothing when a dragon is requested, but the board has no center', () => {
+    expect(recordPlacements(2, 3, new Set(), 1)).toEqualAsASet([]);
+  });
+  test('adds a dragon in the center when one is requested on a board with a center', () => {
+    expect(recordPlacements(1, 3, new Set(), 1)).toEqualAsASet([
+      '0,1',
+    ]);
+  });
+  test('rounds down when an odd number of dragons are requested, but the board has no center', () => {
+    expect(recordPlacements(2, 3, new Set(), 3)).toEqualAsASet([
+      '0,0',
+      '1,2',
+    ]);
+  });
+  test('adds a dragon in the center when an odd number are requested on a board with a center', () => {
+    expect(recordPlacements(3, 3, new Set(), 3)).toEqualAsASet([
+      '1,1',
+      '0,0',
+      '2,2',
+    ]);
+  });
+  test('does not exceed a 75% density', () => {
+    expect(recordPlacements(1, 8, new Set(), 8)).toEqualAsASet([
+      '0,0',
+      '0,7',
+      '0,3',
+      '0,4',
+      '0,2',
+      '0,5',
+    ]);
+  });
+  test('does not place dragons on fully occupied non-center points', () => {
+    expect(recordPlacements(3, 3, new Set([
+      '0,0',
+      '2,2',
+    ]), 3)).toEqualAsASet([
+      '1,1',
+      '1,0',
+      '1,2',
+    ]);
+  });
+  test('does not place dragons on partially occupied non-center points', () => {
+    expect(recordPlacements(3, 3, new Set([
+      '0,0',
+    ]), 3)).toEqualAsASet([
+      '1,1',
+      '1,0',
+      '1,2',
+    ]);
+  });
+});