game states: play, playing, played

games/nukes/src/App.tsx

@@ -3,6 +3,11 @@ import { BrowserRouter, Routes, Route, useNavigate } from 'react-router-dom';
 import './App.css';
 import { GameState } from './game-states/types';
 import { GameStateIntro } from './game-states/state-intro';
+
+import { GameStatePlay } from './game-states/state-play';
+import { GameStatePlaying } from './game-states/state-playing';
+import { GameStatePlayed } from './game-states/state-played';
+
 import { GameStateTechWorld } from './game-states/state-tech-world';
 
 function App() {
@@ -11,6 +16,9 @@ function App() {
       <BrowserRouter basename="/">
         <Routes>
           <Route path={GameStateIntro.path} element={<GameStateRoute state={GameStateIntro} />} />
+          <Route path={GameStatePlay.path} element={<GameStateRoute state={GameStatePlay} />} />
+          <Route path={GameStatePlaying.path} element={<GameStateRoute state={GameStatePlaying} />} />
+          <Route path={GameStatePlayed.path} element={<GameStateRoute state={GameStatePlayed} />} />
           <Route path={GameStateTechWorld.path} element={<GameStateRoute state={GameStateTechWorld} />} />
         </Routes>
       </BrowserRouter>
@@ -21,7 +29,7 @@ function App() {
 function GameStateRoute({ state }: { state: GameState }) {
   const navigate = useNavigate();
 
-  return <state.Component setGameState={(state) => navigate(state.path)} />;
+  return <state.Component setGameState={(state, params) => navigate(state.path, { state: params })} />;
 }
 
 export default App;

games/nukes/src/game-states/state-intro.tsx

@@ -1,12 +1,12 @@
 import { GameState, GameStateComponent } from './types';
-import { GameStateTechWorld } from './state-tech-world';
+import { GameStatePlay } from './state-play';
 
 const Intro: GameStateComponent = ({ setGameState }) => {
   return (
     <>
-      <h3>intro</h3>
+      <h3>Nukes game</h3>
       <br />
-      <button onClick={() => setGameState(GameStateTechWorld)}>Nuke world demo</button>
+      <button onClick={() => setGameState(GameStatePlay)}>Play</button>
     </>
   );
 };

games/nukes/src/game-states/state-play.tsx

@@ -0,0 +1,31 @@
+import { useState } from 'react';
+import { GameState, GameStateComponent } from './types';
+import { GameStatePlaying } from './state-playing';
+
+const PlayComponent: GameStateComponent = ({ setGameState }) => {
+  const [stateName, setStateName] = useState('');
+
+  const handlePlay = () => {
+    setGameState(GameStatePlaying, { stateName, gameId: String(Date.now()) });
+  };
+
+  return (
+    <>
+      <input
+        type="text"
+        placeholder="Name your state"
+        value={stateName}
+        onChange={(event) => setStateName(event.currentTarget.value)}
+      />
+
+      <button onClick={handlePlay} disabled={!stateName}>
+        Play
+      </button>
+    </>
+  );
+};
+
+export const GameStatePlay: GameState = {
+  Component: PlayComponent,
+  path: '/play',
+};

games/nukes/src/game-states/state-played.tsx

@@ -0,0 +1,10 @@
+import { GameState, GameStateComponent } from './types';
+
+const PlayedComponent: GameStateComponent = ({}) => {
+  return <>Game over, results</>;
+};
+
+export const GameStatePlayed: GameState = {
+  Component: PlayedComponent,
+  path: '/playing',
+};

games/nukes/src/game-states/state-playing.tsx

@@ -0,0 +1,20 @@
+import { useLocation } from 'react-router';
+import { GameState, GameStateComponent } from './types';
+
+const PlayingComponent: GameStateComponent = ({}) => {
+  const {
+    state: { stateName, gameId },
+  } = useLocation();
+
+  return (
+    <>
+      Playing: {stateName} {gameId}
+      Render world
+    </>
+  );
+};
+
+export const GameStatePlaying: GameState = {
+  Component: PlayingComponent,
+  path: '/playing',
+};

games/nukes/src/game-states/types.ts

@@ -1,5 +1,5 @@
 export type GameStateProps = {
-  setGameState: (gameState: GameState) => void;
+  setGameState: (gameState: GameState, params?: Record<string, string>) => void;
 };
 
 export type GameStateComponent = React.FunctionComponent<GameStateProps>;

games/nukes/src/world-render/world-state-render.tsx

@@ -1,16 +1,16 @@
+import React from 'react';
 import styled from 'styled-components';
 
 import { WorldState } from '../world/world-state-types';
 import { usePointerMove } from '../controls/pointer';
+import { dispatchCustomEvent } from '../events';
 
 import { SectorRender } from './sector-render';
 import { StateRender } from './state-render';
 import { CityRender } from './city-render';
 import { LaunchSiteRender } from './launch-site-render';
 import { MissileRender } from './missile-render';
 import { ExplosionRender } from './explosion-render';
-import { dispatchCustomEvent } from '../events';
-import React from 'react';
 
 export function WorldStateRender({ state }: { state: WorldState }) {
   const pointerMove = usePointerMove();