Masterplan -> TS/React

games/masterplan/src/global-styles.ts

@@ -1,6 +1,5 @@
 import { createGlobalStyle } from 'styled-components';
 import '@fontsource/press-start-2p';
-import './css/main.css';
 
 export const GlobalStyles = createGlobalStyle`
 :root {
@@ -25,5 +24,7 @@ body {
   align-items: center;
   height: 100vh;
   background-color: #242424;
+  overscroll-behavior: none;
+  background: radial-gradient(ellipse at center, #30c530 0%, #30c530 64%, #138c13 100%);
 }
 `;

games/masterplan/src/index.tsx

@@ -1,27 +1,58 @@
 import React, { useState } from 'react';
 import ReactDOM from 'react-dom/client';
 import { GlobalStyles } from './global-styles';
-import { OldApp } from './old-app';
-import { IntroScreen } from './components/IntroScreen';
+import { IntroScreen } from './screens/intro/intro-screen';
+import { DesignerScreen, Unit } from './screens/designer/designer-screen';
+import { BattleScreen } from './screens/battle/battle-screen';
+
+type CurrentScreen =
+  | {
+      name: 'intro';
+    }
+  | { name: 'designer'; playerUnits?: Unit[] }
+  | {
+      name: 'battle';
+      playerUnits: Unit[];
+      oppositionUnits: Unit[];
+    };
 
 const App: React.FC = () => {
-  const [showIntro, setShowIntro] = useState(true);
+  const [currentScreen, setCurrentScreen] = useState<CurrentScreen>({ name: 'intro' });
 
   const handlePlayClick = () => {
-    setShowIntro(false);
+    setCurrentScreen({ name: 'designer' });
+  };
+
+  const handleStartBattle = (playerUnits: Unit[], oppositionUnits: Unit[]) => {
+    setCurrentScreen({ name: 'battle', playerUnits, oppositionUnits });
+    // Here you would typically initialize the battle with the designed units
+    console.log('Battle started!');
+  };
+
+  const handleBattleEnd = () => {
+    setCurrentScreen({
+      name: 'designer',
+      playerUnits: currentScreen.name === 'battle' ? currentScreen.playerUnits : undefined,
+    });
   };
 
   return (
     <React.StrictMode>
       <GlobalStyles />
-      {showIntro ? (
-        <IntroScreen onPlayClick={handlePlayClick} />
-      ) : (
-        <OldApp />
+      {currentScreen?.name === 'intro' && <IntroScreen onPlayClick={handlePlayClick} />}
+      {currentScreen?.name === 'designer' && (
+        <DesignerScreen onStartBattle={handleStartBattle} initialPlayerUnits={currentScreen.playerUnits} />
+      )}
+      {currentScreen?.name === 'battle' && (
+        <BattleScreen
+          onBattleEnd={handleBattleEnd}
+          playerUnits={currentScreen.playerUnits}
+          oppositionUnits={currentScreen.oppositionUnits}
+        />
       )}
     </React.StrictMode>
   );
 };
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
-root.render(<App />);
+root.render(<App />);