Work on 7 Wonders prototype

.dockerignore

@@ -1,5 +1,6 @@
 /packages/ketchup-react/
 /packages/*-client/
+/packages/example-*/
 
 node_modules/
 dist/

package.json

@@ -10,6 +10,6 @@
     "lerna": "^4.0.0"
   },
   "resolutions": {
-    "acorn": "^8.0.1"
+    "acorn": "^8.2.4"
   }
 }

packages/ketchup-client/index.ts

@@ -14,7 +14,6 @@ export default class KetchupClient<State, Action> extends EventEmitter {
     private readonly timeSource = Date.now
   ) {
     super()
-    console.log('Building KC')
     this.ws = new WebsocketBuilder(url)
       .onClose(() => {
         this.synced = undefined

packages/ketchup-react/index.ts

@@ -1,7 +1,7 @@
 import { useCallback, useEffect, useState } from 'react'
 import KetchupClient from 'ketchup-client'
 
-type Dispatch<Action> = (action: Action, timestamp?: number) => void
+export type Dispatch<Action> = (action: Action, timestamp?: number) => void
 
 export default function useKetchup<State, Action>(
   url: string,

packages/wonders-client/.env

@@ -0,0 +1 @@
+SKIP_PREFLIGHT_CHECK=true

packages/wonders-client/.gitignore

@@ -0,0 +1,23 @@
+# 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*

packages/wonders-client/README.md

@@ -0,0 +1,46 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `yarn start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
+
+The page will reload if you make edits.\
+You will also see any lint errors in the console.
+
+### `yarn test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `yarn build`
+
+Builds the app for production to the `build` folder.\
+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.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `yarn 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/).

packages/wonders-client/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "wonders-client",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.11.4",
+    "@testing-library/react": "^11.1.0",
+    "@testing-library/user-event": "^12.1.10",
+    "@types/jest": "^26.0.15",
+    "@types/node": "^12.0.0",
+    "@types/react": "^17.0.0",
+    "@types/react-dom": "^17.0.0",
+    "formik": "^2.2.6",
+    "ketchup-react": "^0.1.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2",
+    "react-scripts": "4.0.3",
+    "typescript": "^4.1.2",
+    "web-vitals": "^1.0.1",
+    "wonders-common": "^0.1.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

packages/wonders-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 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>

packages/wonders-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"
+}

packages/wonders-client/public/robots.txt

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

packages/wonders-client/src/components/App/App.css

@@ -0,0 +1,38 @@
+.App {
+  text-align: center;
+}
+
+.App-logo {
+  height: 40vmin;
+  pointer-events: none;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  .App-logo {
+    animation: App-logo-spin infinite 20s linear;
+  }
+}
+
+.App-header {
+  background-color: #282c34;
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  font-size: calc(10px + 2vmin);
+  color: white;
+}
+
+.App-link {
+  color: #61dafb;
+}
+
+@keyframes App-logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

packages/wonders-client/src/components/App/App.test.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import App from './App';
+
+test('renders learn react link', () => {
+  render(<App />);
+  const linkElement = screen.getByText(/learn react/i);
+  expect(linkElement).toBeInTheDocument();
+});

packages/wonders-client/src/components/App/App.tsx

@@ -0,0 +1,38 @@
+import React, { useEffect, useState } from 'react';
+import useKetchup from 'ketchup-react'
+import { addPlayerAction, reducer, removePlayerAction, resetAction } from 'wonders-common'
+import './App.css';
+import Game from '../Game/Game';
+import UserSelector from '../UserSelector/UserSelector';
+
+export default function App() {
+  const [state, dispatch] = useKetchup('ws://localhost:4000', reducer)
+  useEffect(() => {
+    console.debug('State', state)
+  }, [state])
+
+  const [user, setUser] = useState<string>()
+  function selectUser(name?: string) {
+    setUser(name)
+    if (name && !state?.players.some(p => p.name === name)) {
+      dispatch(addPlayerAction(name))
+    }
+  }
+  function removeUser() {
+    if (user !== undefined) {
+      dispatch(removePlayerAction(user))
+      setUser(undefined)
+    }
+  }
+
+  return <>
+    <UserSelector user={user} selectUser={selectUser} removeUser={removeUser} users={state?.players.map(p => p.name) ?? []} locked={state !== undefined && state.stage !== 'starting'}/>
+    {state
+      ? <>
+        <Game state={state} dispatch={dispatch} playerName={user}/>
+        <button onClick={() => window.confirm('Reset game?') && dispatch(resetAction())}> Reset</button>
+      </>
+      : <p>Loading...</p>
+    }
+  </>
+}

packages/wonders-client/src/components/Civ/Civ.tsx

@@ -0,0 +1,7 @@
+import React from 'react'
+import { Player } from 'wonders-common';
+
+export default function Civ({ player, style }: { player: Player, style: 'player' | 'neighbor' | 'compact' }) {
+
+  return <>{player.name}</>
+}

packages/wonders-client/src/components/Game/Game.tsx

@@ -0,0 +1,36 @@
+/* eslint-disable react/style-prop-object */
+import { Dispatch } from 'ketchup-react'
+import React from 'react'
+import { Action, Player, State } from 'wonders-common'
+import Civ from '../Civ/Civ'
+import without from 'lodash/without'
+
+function getDistant<T>(arr: T[], idx: number) {
+    switch (idx) {
+      case 0: return arr.slice(2, -1)
+      case arr.length - 1: return arr.slice(1, -2)
+      default: return [...arr.slice(idx + 2), ...arr.slice(0, idx - 1)]
+    }
+}
+
+export default function Game({ state, playerName }: { state: State, playerName?: string, dispatch: Dispatch<Action> }) {
+  const started = state.stage === 'play'
+  const playerIdx: number | undefined = state.players.findIndex(p => p.name === playerName)
+  const player: Player | undefined = state.players[playerIdx]
+  const left = started ? state.players[(playerIdx + 1) % state.players.length] : undefined
+  const right = started ? state.players[(playerIdx - 1 + state.players.length) % state.players.length] : undefined
+  const distant = started ? getDistant(state.players, playerIdx) : undefined
+
+  return <>
+    <div><ul>{(distant ?? without(state.players, player)).map(p =>
+      <li key={p.name}>
+        <Civ player={p} style="compact"/>
+      </li>
+    )}</ul></div>
+    <p>
+      {left && <Civ player={left} style="neighbor"/>}
+      {player && <Civ player={player} style="player"/>}
+      {right && <Civ player={right} style="neighbor"/>}
+    </p>
+  </>
+}

packages/wonders-client/src/components/UserSelector/UserSelector.tsx

@@ -0,0 +1,43 @@
+import { ErrorMessage, Field, Form, Formik } from 'formik';
+import React, { Dispatch, useState } from 'react';
+import sample from 'lodash/sample'
+
+const namePlaceholders = [
+  'Alexander the Great',
+  'Genghis Khan',
+  'Boudicca',
+  'Cleopatra',
+  'Alaric the Visigoth',
+  'Cyrus the Great',
+  'Augustus',
+  'Hannibal',
+  'Tutankhamen',
+]
+
+export default function UserSelector({ users, user, selectUser, removeUser, locked }: {
+  users: string[], user?: string, selectUser: Dispatch<string | undefined>, removeUser: () => void, locked: boolean
+}) {
+  const [namePlaceholder] = useState(() => sample(namePlaceholders))
+  return <div>
+    {user
+      ? <>Playing as {user} <button onClick={() => selectUser(undefined)}>Change</button> <button onClick={removeUser} disabled={locked}>Remove</button></>
+      : <Formik
+          initialValues={{ newUser: '' }}
+          validate={values => {
+            const errors: Partial<typeof values> = {}
+            if (values.newUser.length === 0) {
+              errors.newUser = 'Name cannot be blank.'
+            }
+            return errors
+          }}
+          onSubmit={(values) => {
+            selectUser(values.newUser)
+          }}
+        >{() => <Form>
+          <button type="submit">Play as</button>
+          <Field type="text" name="newUser" placeholder={namePlaceholder}/> <ErrorMessage name="newUser"/>
+        </Form>}
+      </Formik>
+    }
+  </div>
+}

packages/wonders-client/src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

packages/wonders-client/src/index.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './components/App/App';
+import './index.css';
+import reportWebVitals from './reportWebVitals';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App/>
+  </React.StrictMode>,
+  document.getElementById('root')
+);
+
+// If you want to start measuring performance in your app, pass a function
+// to log results (for example: reportWebVitals(console.log))
+// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
+reportWebVitals();

packages/wonders-client/src/react-app-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="react-scripts" />

packages/wonders-client/src/reportWebVitals.ts

@@ -0,0 +1,15 @@
+import { ReportHandler } from 'web-vitals';
+
+const reportWebVitals = (onPerfEntry?: ReportHandler) => {
+  if (onPerfEntry && onPerfEntry instanceof Function) {
+    import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
+      getCLS(onPerfEntry);
+      getFID(onPerfEntry);
+      getFCP(onPerfEntry);
+      getLCP(onPerfEntry);
+      getTTFB(onPerfEntry);
+    });
+  }
+};
+
+export default reportWebVitals;

packages/wonders-client/src/setupTests.ts

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';

packages/wonders-client/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "esnext",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "esModuleInterop": true,
+    "allowSyntheticDefaultImports": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noFallthroughCasesInSwitch": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx"
+  },
+  "include": [
+    "src"
+  ]
+}

packages/wonders-common/index.ts

@@ -97,7 +97,7 @@ const structuresAge2: Structure[] = [
   { type: 'military', name: 'Walls', appears: [, [3, 7]], cost: new Map([['stone', 3]]), shields: 2 },
   { type: 'science', name: 'Dispensary', appears: [, [3, 4]], cost: new Map([['glass', 1], ['ore', 2]]), freeWith: ['Apothecary'], sciences: new Set(['research']) },
   { type: 'science', name: 'Laboratory', appears: [, [3, 5]], cost: new Map([['paper', 1], ['brick', 2]]), freeWith: ['Workshop'], sciences: new Set(['engineering']) },
-  { type: 'science', name: 'Libary', appears: [, [3, 6]], cost: new Map([['cloth', 1], ['stone', 2]]), freeWith: ['Scriptorium'], sciences: new Set(['education']) },
+  { type: 'science', name: 'Library', appears: [, [3, 6]], cost: new Map([['cloth', 1], ['stone', 2]]), freeWith: ['Scriptorium'], sciences: new Set(['education']) },
   { type: 'science', name: 'School', appears: [, [3, 7]], cost: new Map([['paper', 1], ['wood', 1]]), sciences: new Set(['education']) },
 ]
 const structuresAge3: Structure[] = [
@@ -132,7 +132,7 @@ const structuresGuilds: Structure[] = [
   { type: 'guild', name: 'Traders Guild', cost: new Map([['glass', 1], ['paper', 1], ['cloth', 1]]), pointsPerNeighbor: new Map([['commerce', 1]]) },
   { type: 'guild', name: 'Workers Guild', cost: new Map([['ore', 2], ['brick', 1], ['stone', 1], ['wood', 1]]), pointsPerNeighbor: new Map([['basic industry', 2]]) },
 ]
-export const structures = new Map([structuresAge1, structuresAge2, structuresAge3, structuresGuilds].flat().map(c => ([c.name, c])))
+export const structures = new Map<string, Structure>([structuresAge1, structuresAge2, structuresAge3, structuresGuilds].flat().map(c => ([c.name, c])))
 // Initialize 'freeWith' properties
 for (const structure of structures.values()) {
   for (const precursorName of structure.freeWith ?? []) {
@@ -166,26 +166,26 @@ export function buildDeck(age: number, numPlayers: number) {
 
 export interface Wonder {
   name: string
-  side: 'A' | 'B'
   innateResource: Resource
 }
 
-export const wonders: Wonder[] = [
+const wonderList: Wonder[] = [
-  { name: 'Great Pyramid of Giza', side: 'A', innateResource: 'stone' },
+  { name: 'Great Pyramid of Giza A', innateResource: 'stone' },
-  { name: 'Great Pyramid of Giza', side: 'B', innateResource: 'stone' },
+  { name: 'Great Pyramid of Giza B', innateResource: 'stone' },
-  { name: 'Hanging Gardens of Babylon', side: 'A', innateResource: 'brick' },
+  { name: 'Hanging Gardens of Babylon A', innateResource: 'brick' },
-  { name: 'Hanging Gardens of Babylon', side: 'B', innateResource: 'brick' },
+  { name: 'Hanging Gardens of Babylon B', innateResource: 'brick' },
-  { name: 'Temple of Artemis at Ephesus', side: 'A', innateResource: 'paper' },
+  { name: 'Temple of Artemis at Ephesus A', innateResource: 'paper' },
-  { name: 'Temple of Artemis at Ephesus', side: 'B', innateResource: 'paper' },
+  { name: 'Temple of Artemis at Ephesus B', innateResource: 'paper' },
-  { name: 'State of Zeus at Olympia', side: 'A', innateResource: 'wood' },
+  { name: 'State of Zeus at Olympia A', innateResource: 'wood' },
-  { name: 'State of Zeus at Olympia', side: 'B', innateResource: 'wood' },
+  { name: 'State of Zeus at Olympia B', innateResource: 'wood' },
-  { name: 'Mausoleum at Halicarnassus', side: 'A', innateResource: 'cloth' },
+  { name: 'Mausoleum at Halicarnassus A', innateResource: 'cloth' },
-  { name: 'Mausoleum at Halicarnassus', side: 'B', innateResource: 'cloth' },
+  { name: 'Mausoleum at Halicarnassus B', innateResource: 'cloth' },
-  { name: 'Colossus of Rhodes', side: 'A', innateResource: 'ore' },
+  { name: 'Colossus of Rhodes A', innateResource: 'ore' },
-  { name: 'Colossus of Rhodes', side: 'B', innateResource: 'ore' },
+  { name: 'Colossus of Rhodes B', innateResource: 'ore' },
-  { name: 'Lighthouse of Alexandria', side: 'A', innateResource: 'glass' },
+  { name: 'Lighthouse of Alexandria A', innateResource: 'glass' },
-  { name: 'Lighthouse of Alexandria', side: 'B', innateResource: 'glass' },
+  { name: 'Lighthouse of Alexandria B', innateResource: 'glass' },
 ]
+export const wonders = new Map(wonderList.map(w => [w.name, w]))
 
 export interface TurnPlan {
   action: 'structure' | 'discard'
@@ -196,7 +196,7 @@ export interface TurnPlan {
 
 export interface Player {
   name: string
-  wonder?: Wonder
+  wonder?: string
   gold: number
   structures: {
     age: number
@@ -228,22 +228,74 @@ export const initial: State = {
 export interface BaseAction {
   type: string
 }
+
 export interface AddPlayerAction extends BaseAction {
   type: 'add player'
   name: string
 }
+export function addPlayerAction(name: string): AddPlayerAction {
+  return {
+    type: 'add player',
+    name,
+  }
+}
+
+export interface RemovePlayerAction extends BaseAction {
+  type: 'remove player'
+  name: string
+}
+export function removePlayerAction(name: string): RemovePlayerAction {
+  return {
+    type: 'remove player',
+    name,
+  }
+}
+
+export interface ChooseWonderAction extends BaseAction {
+  type: 'choose wonder'
+  player: string
+  wonder: string
+}
+export function chooseWonderAction(player: string, wonder: string): ChooseWonderAction {
+  return {
+    type: 'choose wonder',
+    player,
+    wonder,
+  }
+}
+
 export interface StartGameAction extends BaseAction {
   type: 'start game'
+  shuffle: number[]
 }
+export function startGameAction(numPlayers: number): StartGameAction {
+  return {
+    type: 'start game',
+    shuffle: shuffle([...Array(numPlayers).keys()]),
+  }
+}
+
 export interface PlanTurnAction extends BaseAction {
   type: 'plan turn'
-  playerIdx: number
+  player: string
   turnPlan?: TurnPlan
 }
+export function planTurnAction(player: string, turnPlan?: TurnPlan): PlanTurnAction {
+  return {
+    type: 'plan turn',
+    player,
+    turnPlan,
+  }
+}
+
 export interface ResetAction extends BaseAction {
   type: 'reset'
 }
-export type Action = AddPlayerAction | StartGameAction
+export function resetAction(): ResetAction {
+  return { type: 'reset' }
+}
+
+export type Action = AddPlayerAction | RemovePlayerAction | ChooseWonderAction | StartGameAction
   | PlanTurnAction
   | ResetAction
 
@@ -390,7 +442,7 @@ function doTurn(state: State): State {
 }
 const reducers: { [type: string]: (state: State, action: any) => State } = {
   'add player': (state, action: AddPlayerAction) => {
-    if (state.stage !== 'starting') { return state }
+    if (state.stage !== 'starting' || state.players.some(p => p.name === action.name)) { return state }
     return {
       ...state,
       players: [...state.players, {
@@ -403,11 +455,33 @@ const reducers: { [type: string]: (state: State, action: any) => State } = {
       }],
     }
   },
-  'start game': state => {
+  'remove player': (state, action: RemovePlayerAction) => {
-    if (state.stage !== 'starting' || state.players.length < minPlayers || state.players.length > maxPlayers) {
+    if (state.stage !== 'starting') {
       return state
     }
-    return beginAge({ ...state, stage: 'play' })
+    return {
+      ...state,
+      players: state.players.filter(p => p.name !== action.name),
+    }
+  },
+  'choose wonder': (state, action: ChooseWonderAction) => {
+    if (state.stage !== 'starting' || state.players.some(p => p.wonder === action.wonder)) {
+      return state
+    }
+    return {
+      ...state,
+      players: state.players.map(p => p.name === action.player ? { ...p, wonder: action.wonder }: p),
+    }
+  },
+  'start game': (state, action: StartGameAction) => {
+    if (state.stage !== 'starting' || state.players.length < minPlayers || state.players.length > maxPlayers || state.players.some(p => p.wonder === undefined)) {
+      return state
+    }
+    return beginAge({
+      ...state,
+      stage: 'play',
+      players: action.shuffle.map(i => state.players[i]),
+    })
   },
   'plan turn': (state, action: PlanTurnAction) => {
     if (state.stage !== 'play') {
@@ -416,7 +490,7 @@ const reducers: { [type: string]: (state: State, action: any) => State } = {
     const newState = {
       ...state,
       players: state.players.map(
-        (p, i) => i !== action.playerIdx ? p : { ...p, turnPlan: action.turnPlan }
+        p => p.name !== action.player ? p : { ...p, turnPlan: action.turnPlan }
       ),
     }
     return newState.players.every(p => p.turnPlan !== undefined) ? doTurn(newState) : newState

packages/wonders-server/Dockerfile

@@ -4,11 +4,11 @@ RUN apk add --no-cache tini
 
 RUN yarn global add lerna
 
-WORKDIR /opt/example-server
+WORKDIR /opt/wonders-server
 COPY packages/ketchup-common/package.json packages/ketchup-common/
 COPY packages/ketchup-server/package.json packages/ketchup-server/
-COPY packages/example-common/package.json packages/example-common/
+COPY packages/wonders-common/package.json packages/wonders-common/
-COPY packages/example-server/package.json packages/example-server/
+COPY packages/wonders-server/package.json packages/wonders-server/
 COPY package.json yarn.lock lerna.json ./
 RUN lerna bootstrap
 
@@ -16,5 +16,5 @@ COPY . ./
 RUN lerna run build
 
 ENTRYPOINT ["tini", "--"]
-CMD ["node", "packages/example-server"]
+CMD ["node", "packages/wonders-server"]
 EXPOSE 80

yarn.lock

@@ -2509,6 +2509,13 @@
     "@babel/runtime" "^7.12.5"
     "@testing-library/dom" "^7.28.1"
 
+"@testing-library/user-event@^12.1.10":
+  version "12.8.3"
+  resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-12.8.3.tgz#1aa3ed4b9f79340a1e1836bc7f57c501e838704a"
+  integrity sha512-IR0iWbFkgd56Bu5ZI/ej8yQwrkCv8Qydx6RzwbKz9faXazR/+5tvYKsZQgyXJiwgpcva127YO6JcWy7YlCfofQ==
+  dependencies:
+    "@babel/runtime" "^7.12.5"
+
 "@testing-library/user-event@^13.1.9":
   version "13.1.9"
   resolved "https://registry.yarnpkg.com/@testing-library/user-event/-/user-event-13.1.9.tgz#29e49a42659ac3c1023565ff56819e0153a82e99"
@@ -2699,7 +2706,7 @@
   resolved "https://registry.yarnpkg.com/@types/q/-/q-1.5.4.tgz#15925414e0ad2cd765bfef58842f7e26a7accb24"
   integrity sha512-1HcDas8SEj4z1Wc696tH56G8OlRaH/sqZOynNNB+HF0WOeXPaxTtbYzJY2oEfiUxjSKjhCKr+MvR7dCHcEelug==
 
-"@types/react-dom@^17.0.5":
+"@types/react-dom@^17.0.0", "@types/react-dom@^17.0.5":
   version "17.0.5"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.5.tgz#df44eed5b8d9e0b13bb0cd38e0ea6572a1231227"
   integrity sha512-ikqukEhH4H9gr4iJCmQVNzTB307kROe3XFfHAOTxOXPOw7lAoEXnM5KWTkzeANGL5Ce6ABfiMl/zJBYNi7ObmQ==
@@ -3102,7 +3109,7 @@ acorn-walk@^7.1.1:
   resolved "https://registry.yarnpkg.com/acorn-walk/-/acorn-walk-7.2.0.tgz#0de889a601203909b0fbe07b8938dc21d2e967bc"
   integrity sha512-OPdCF6GsMIP+Az+aWfAAOEt2/+iVDKE7oy6lJ098aoe59oAmK76qV6Gw60SbZ8jHuG2wH058GF4pLFbYamYrVA==
 
-acorn@^6.4.1, acorn@^7.1.0, acorn@^7.1.1, acorn@^7.4.0, acorn@^8.0.1, acorn@^8.1.0:
+acorn@^6.4.1, acorn@^7.1.0, acorn@^7.1.1, acorn@^7.4.0, acorn@^8.1.0, acorn@^8.2.4:
   version "8.2.4"
   resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.2.4.tgz#caba24b08185c3b56e3168e97d15ed17f4d31fd0"
   integrity sha512-Ibt84YwBDDA890eDiDCEqcbwvHlBvzzDkU2cGBBDDI1QWT12jTiXIOn2CIw5KK4i6N5Z2HUxwYjzriDyqaqqZg==
@@ -5218,6 +5225,11 @@ deep-is@^0.1.3, deep-is@~0.1.3:
   resolved "https://registry.yarnpkg.com/deep-is/-/deep-is-0.1.3.tgz#b369d6fb5dbc13eecf524f91b070feedc357cf34"
   integrity sha1-s2nW+128E+7PUk+RsHD+7cNXzzQ=
 
+deepmerge@^2.1.1:
+  version "2.2.1"
+  resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-2.2.1.tgz#5d3ff22a01c00f645405a2fbc17d0778a1801170"
+  integrity sha512-R9hc1Xa/NOBi9WRVUWg19rl1UB7Tt4kuPd+thNJgFZoxXsTz7ncaPaeIm+40oSGuP33DfMb4sZt1QIGiJzC4EA==
+
 deepmerge@^4.2.2:
   version "4.2.2"
   resolved "https://registry.yarnpkg.com/deepmerge/-/deepmerge-4.2.2.tgz#44d2ea3679b8f4d4ffba33f03d865fc1e7bf4955"
@@ -6432,6 +6444,19 @@ form-data@~2.3.2:
     combined-stream "^1.0.6"
     mime-types "^2.1.12"
 
+formik@^2.2.6:
+  version "2.2.6"
+  resolved "https://registry.yarnpkg.com/formik/-/formik-2.2.6.tgz#378a4bafe4b95caf6acf6db01f81f3fe5147559d"
+  integrity sha512-Kxk2zQRafy56zhLmrzcbryUpMBvT0tal5IvcifK5+4YNGelKsnrODFJ0sZQRMQboblWNym4lAW3bt+tf2vApSA==
+  dependencies:
+    deepmerge "^2.1.1"
+    hoist-non-react-statics "^3.3.0"
+    lodash "^4.17.14"
+    lodash-es "^4.17.14"
+    react-fast-compare "^2.0.1"
+    tiny-warning "^1.0.2"
+    tslib "^1.10.0"
+
 forwarded@~0.1.2:
   version "0.1.2"
   resolved "https://registry.yarnpkg.com/forwarded/-/forwarded-0.1.2.tgz#98c23dab1175657b8c0573e8ceccd91b0ff18c84"
@@ -6935,6 +6960,13 @@ hmac-drbg@^1.0.1:
     minimalistic-assert "^1.0.0"
     minimalistic-crypto-utils "^1.0.1"
 
+hoist-non-react-statics@^3.3.0:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hoopy@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@@ -8637,6 +8669,11 @@ locate-path@^5.0.0:
   dependencies:
     p-locate "^4.1.0"
 
+lodash-es@^4.17.14:
+  version "4.17.21"
+  resolved "https://registry.yarnpkg.com/lodash-es/-/lodash-es-4.17.21.tgz#43e626c46e6591b7750beb2b50117390c609e3ee"
+  integrity sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==
+
 lodash._reinterpolate@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/lodash._reinterpolate/-/lodash._reinterpolate-3.0.0.tgz#0ccf2d89166af03b3663c796538b75ac6e114d9d"
@@ -11248,7 +11285,7 @@ react-dev-utils@^11.0.3:
     strip-ansi "6.0.0"
     text-table "0.2.0"
 
-react-dom@^17.0.1:
+react-dom@^17.0.1, react-dom@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23"
   integrity sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA==
@@ -11262,7 +11299,12 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
-react-is@^16.8.1:
+react-fast-compare@^2.0.1:
+  version "2.0.4"
+  resolved "https://registry.yarnpkg.com/react-fast-compare/-/react-fast-compare-2.0.4.tgz#e84b4d455b0fec113e0402c329352715196f81f9"
+  integrity sha512-suNP+J1VU1MWFKcyt7RtjiSWUjvidmQSlqu+eHslq+342xCbGTYmC0mEhPCOHxlW0CywylOC1u2DFAT+bv4dBw==
+
+react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -11277,7 +11319,7 @@ react-refresh@^0.8.3:
   resolved "https://registry.yarnpkg.com/react-refresh/-/react-refresh-0.8.3.tgz#721d4657672d400c5e3c75d063c4a85fb2d5d68f"
   integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg==
 
-react-scripts@^4.0.3:
+react-scripts@4.0.3, react-scripts@^4.0.3:
   version "4.0.3"
   resolved "https://registry.yarnpkg.com/react-scripts/-/react-scripts-4.0.3.tgz#b1cafed7c3fa603e7628ba0f187787964cb5d345"
   integrity sha512-S5eO4vjUzUisvkIPB7jVsKtuH2HhWcASREYWHAQ1FP5HyCv3xgn+wpILAEWkmy+A+tTNbSZClhxjT3qz6g4L1A==
@@ -11343,7 +11385,7 @@ react-scripts@^4.0.3:
   optionalDependencies:
     fsevents "^2.1.3"
 
-react@^17.0.1:
+react@^17.0.1, react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037"
   integrity sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA==
@@ -13033,6 +13075,11 @@ timsort@^0.3.0:
   resolved "https://registry.yarnpkg.com/timsort/-/timsort-0.3.0.tgz#405411a8e7e6339fe64db9a234de11dc31e02bd4"
   integrity sha1-QFQRqOfmM5/mTbmiNN4R3DHgK9Q=
 
+tiny-warning@^1.0.2:
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
+  integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
+
 tmp@^0.0.33:
   version "0.0.33"
   resolved "https://registry.yarnpkg.com/tmp/-/tmp-0.0.33.tgz#6d34335889768d21b2bcda0aa277ced3b1bfadf9"
@@ -13179,7 +13226,7 @@ tsconfig-paths@^3.9.0:
     minimist "^1.2.0"
     strip-bom "^3.0.0"
 
-tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.10.0, tslib@^1.8.1, tslib@^1.9.0:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==
@@ -13297,7 +13344,7 @@ typedarray@^0.0.6:
   resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777"
   integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=
 
-typescript@^4.0.3, typescript@^4.1.3:
+typescript@^4.0.3, typescript@^4.1.2, typescript@^4.1.3:
   version "4.2.4"
   resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.2.4.tgz#8610b59747de028fda898a8aef0e103f156d0961"
   integrity sha512-V+evlYHZnQkaz8TRBuxTA92yZBPotr5H+WhQ7bD3hZUndx5tGOa1fuCgeSjxAzM1RiN5IzvadIXTVefuuwZCRg==
@@ -13653,7 +13700,7 @@ wcwidth@^1.0.0:
   dependencies:
     defaults "^1.0.3"
 
-web-vitals@^1.1.2:
+web-vitals@^1.0.1, web-vitals@^1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/web-vitals/-/web-vitals-1.1.2.tgz#06535308168986096239aa84716e68b4c6ae6d1c"
   integrity sha512-PFMKIY+bRSXlMxVAQ+m2aw9c/ioUYfDgrYot0YUa+/xa0sakubWhSDyxAKwzymvXVdF4CZI71g06W+mqhzu6ig==