Update source files

frontend/pages/index/+Page.css

@@ -0,0 +1,250 @@
+@import "tailwindcss";
+
+@theme {
+  --font-oswald: "Oswald", sans-serif;
+  --font-inter: "Inter Variable", Inter, Avenir, Helvetica, Arial, sans-serif;
+}
+
+:root {
+  font-family: "Inter Variable", Inter, Avenir, Helvetica, Arial, sans-serif;
+  font-size: 16px;
+  line-height: 2.8em;
+  font-weight: 400;
+
+  color: #1e293b;
+  background-color: transparent; /* Transparent to show game canvas */
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  -webkit-text-size-adjust: 100%;
+}
+
+/**
+ * Input blocking system for desktop mode:
+ *
+ * In desktop mode, the InputForwarder component captures all input events
+ * (mouse, keyboard, wheel) from the window and forwards them to the Bevy game engine.
+ *
+ * To prevent UI elements (menus, overlays, etc.) from accidentally forwarding clicks
+ * to the game, those elements should be tagged with the 'block-game-input' class.
+ *
+ * The InputForwarder checks `event.target.closest('.block-game-input')` and skips
+ * forwarding if the event originated from within a blocking element.
+ *
+ * For overlays that SHOULD allow clicks through (like spawn phase instructions),
+ * simply don't add the 'block-game-input' class.
+ */
+.block-game-input {
+  /* This class serves as a marker - no styles needed */
+}
+
+html,
+body,
+#root {
+  @apply fixed top-0 left-0;
+}
+
+.container {
+  margin: 0;
+  padding-top: 10vh;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  text-align: center;
+  pointer-events: none; /* Let clicks pass through to interaction layer */
+  position: relative;
+  z-index: 1; /* Above interaction layer */
+}
+
+/* Game canvas - PixiJS renderer layer */
+.game-canvas {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  pointer-events: auto; /* Capture input events */
+  z-index: 0; /* Behind all UI elements */
+}
+
+.game-ui {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  pointer-events: none; /* Let clicks pass through to interaction layer */
+  z-index: 1; /* Above interaction layer and canvas */
+}
+
+/* Leaderboard styles */
+.no-drag {
+  -webkit-app-region: no-drag;
+}
+
+/* Attacks styles */
+.attacks {
+  user-select: none;
+  opacity: 0.6;
+  transition: opacity 400ms ease;
+  font-size: 13px; /* Base font size for scaling everything */
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+}
+
+.attacks:hover {
+  opacity: 1;
+}
+
+.attacks__row {
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5em 0.83em;
+  border: none;
+  background: rgba(15, 23, 42, 0.6);
+  backdrop-filter: blur(2px);
+  color: white;
+  cursor: pointer;
+  transition: background-color 0.15s ease;
+  font-size: 1.1em;
+  font-family: inherit;
+  width: 21.67em;
+  border-radius: 0.5em;
+  overflow: hidden;
+}
+
+.attacks__row:hover {
+  background: rgba(15, 23, 42, 0.75);
+}
+
+.attacks__background {
+  position: absolute;
+  top: 0;
+  right: 0;
+  height: 100%;
+  pointer-events: none;
+  transition: width 0.3s ease;
+}
+
+.attacks__nation {
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  flex: 1;
+  padding-right: 1em;
+  position: relative;
+  z-index: 1;
+}
+
+.attacks__troops {
+  text-align: right;
+  font-variant-numeric: tabular-nums;
+  white-space: nowrap;
+  min-width: 5em;
+  position: relative;
+  z-index: 1;
+}
+
+@media (max-width: 1200px) {
+  .attacks {
+    font-size: 12px;
+  }
+}
+
+@media (max-width: 1000px) {
+  .attacks {
+    font-size: 12px;
+  }
+}
+
+@media (max-width: 800px) {
+  .attacks {
+    font-size: 11.5px;
+  }
+}
+
+@media (max-width: 600px) {
+  .attacks {
+    font-size: 10px;
+  }
+}
+
+/* Attack Controls styles */
+.attack-controls {
+  position: fixed;
+  bottom: 12px;
+  left: 12px;
+  z-index: 10;
+  user-select: none;
+  opacity: 0.95;
+  transition: opacity 400ms ease;
+  font-size: 15.6px;
+  pointer-events: none;
+}
+
+.attack-controls:hover {
+  opacity: 1;
+}
+
+.attack-controls__content {
+  display: flex;
+  flex-direction: column;
+  pointer-events: auto;
+}
+
+.attack-controls__header {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-end;
+  gap: 0.5em;
+  min-width: 26em;
+}
+
+.attack-controls__percentage {
+  position: absolute;
+  left: 0.8em;
+  top: 50%;
+  transform: translateY(-50%);
+  font-size: 1.15em;
+  font-weight: 500;
+  font-variant-numeric: tabular-nums;
+  color: white;
+  pointer-events: none;
+  z-index: 1;
+  opacity: 0.85;
+  text-shadow:
+    0 1px 2px rgba(0, 0, 0, 0.4),
+    0 2px 4px rgba(0, 0, 0, 0.4),
+    1px 0 2px rgba(0, 0, 0, 0.4),
+    -1px 0 2px rgba(0, 0, 0, 0.4);
+}
+
+@media (max-width: 1200px) {
+  .attack-controls {
+    font-size: 14.4px;
+  }
+}
+
+@media (max-width: 1000px) {
+  .attack-controls {
+    font-size: 14.4px;
+  }
+}
+
+@media (max-width: 800px) {
+  .attack-controls {
+    font-size: 13.8px;
+  }
+}
+
+@media (max-width: 600px) {
+  .attack-controls {
+    font-size: 12px;
+  }
+}

frontend/pages/index/+Page.tsx

@@ -0,0 +1,74 @@
+import { useState, useEffect, lazy, Suspense } from "react";
+import "./+Page.css";
+import { MenuScreen } from "@/shared/components/menu/MenuScreen";
+import { useAnalytics } from "@/shared/analytics";
+
+// Lazy load components that aren't needed immediately
+const GameContainer = lazy(() => import("./Game.client").then((m) => ({ default: m.GameContainer })));
+
+function App() {
+  const [showMenu, setShowMenu] = useState(true);
+  const [isHydrated, setIsHydrated] = useState(false);
+  const analytics = useAnalytics();
+
+  // Mark as hydrated after first render to prevent hydration mismatch
+  useEffect(() => {
+    setIsHydrated(true);
+  }, []);
+
+  // Prefetch components after initial render
+  useEffect(() => {
+    const timer = setTimeout(() => {
+      // Trigger chunk downloads without rendering
+      // Preload game container so lazy loading doesn't delay start
+      import("./Game.client");
+      import("@/shared/components/overlays/AlphaWarning");
+      // Also preload game renderer and canvas components
+      import("@/shared/render/GameRenderer");
+      import("@/shared/components/game/Canvas");
+    }, 1000); // Start earlier since user is reading menu
+    return () => clearTimeout(timer);
+  }, []);
+
+  // Track app started on mount
+  useEffect(() => {
+    if (!analytics) return;
+    analytics.track("app_started", {
+      platform: __DESKTOP__ ? "desktop" : "browser",
+    });
+  }, [analytics]);
+
+  const handleStartSingleplayer = () => {
+    setShowMenu(false);
+  };
+
+  const handleExit = async () => {
+    if (__DESKTOP__) {
+      const { invoke } = await import("@tauri-apps/api/core");
+      await invoke("request_exit").catch((err) => {
+        console.error("Failed to request exit:", err);
+      });
+    }
+  };
+
+  // Don't render game components until hydration is complete
+  if (!isHydrated) {
+    return null;
+  }
+
+  return (
+    <>
+      {/* Menu Screen - pre-renderable, covers everything when visible */}
+      {showMenu && <MenuScreen onStartSingleplayer={handleStartSingleplayer} onExit={handleExit} />}
+
+      {/* Game Container - client-only, lazy loaded when game starts */}
+      {!showMenu && (
+        <Suspense fallback={null}>
+          <GameContainer onReturnToMenu={() => setShowMenu(true)} />
+        </Suspense>
+      )}
+    </>
+  );
+}
+
+export default App;

frontend/pages/index/Game.client.tsx

@@ -0,0 +1,162 @@
+import { useState, useEffect, lazy, Suspense } from "react";
+import { Attacks } from "@/shared/components/game/AttacksList";
+import { AttackControls } from "@/shared/components/game/AttackControls";
+import { Leaderboard } from "@/shared/components/game/Leaderboard";
+import { GameMenu } from "@/shared/components/game/Menu";
+import { SpawnPhaseOverlay } from "@/shared/components/overlays/SpawnPhase";
+import { GameCanvas } from "@/shared/components/game/Canvas";
+import { useGameAPI } from "@/shared/api/GameAPIContext";
+import { useAnalytics } from "@/shared/analytics";
+import type { GameOutcome, LeaderboardSnapshot } from "@/shared/api/types";
+import type { GameRenderer } from "@/shared/render/GameRenderer";
+
+const GameEndOverlay = lazy(() => import("@/shared/components/overlays/GameEnd"));
+
+interface GameContainerProps {
+  onReturnToMenu: () => void;
+}
+
+export function GameContainer({ onReturnToMenu }: GameContainerProps) {
+  const [gameOutcome, setGameOutcome] = useState<GameOutcome | null>(null);
+  const [spawnPhaseActive, setSpawnPhaseActive] = useState(false);
+  const [spawnCountdown, setSpawnCountdown] = useState<{
+    startedAtMs: number;
+    durationSecs: number;
+  } | null>(null);
+  const [initialGameState, setInitialGameState] = useState<any | null>(null);
+  const [initialLeaderboard, setInitialLeaderboard] = useState<LeaderboardSnapshot | null>(null);
+  const [renderer, setRenderer] = useState<GameRenderer | null>(null);
+  const [highlightedNation, setHighlightedNation] = useState<number | null>(null);
+  const api = useGameAPI();
+  const analytics = useAnalytics();
+
+  // Check for existing game state on mount (for reload recovery)
+  // Skip this in browser since WASM doesn't persist state
+  useEffect(() => {
+    if (!api || typeof api.getGameState !== "function") return;
+
+    // Only check for state recovery on desktop (Tauri)
+    // In browser, this always returns null so skip the async call
+    if (import.meta.env.MODE === "browser") return;
+
+    api.getGameState().then((state) => {
+      // Only recover if we actually have render data (indicates a running game)
+      if (state && state.render_init) {
+        console.log("Recovered game state after reload:", state);
+        setInitialGameState(state.render_init);
+        setInitialLeaderboard(state.leaderboard_snapshot);
+      }
+    });
+  }, [api]);
+
+  // Start the game on mount
+  useEffect(() => {
+    if (api) {
+      api.startGame();
+    }
+    // Track game started
+    if (analytics) {
+      analytics.track("game_started", {
+        mode: "singleplayer",
+      });
+    }
+  }, [api, analytics]);
+
+  // Subscribe to spawn phase events
+  useEffect(() => {
+    if (!api) return;
+
+    const unsubUpdate = api.onSpawnPhaseUpdate((update) => {
+      setSpawnPhaseActive(true);
+      setSpawnCountdown(update.countdown);
+    });
+
+    const unsubEnd = api.onSpawnPhaseEnded(() => {
+      setSpawnPhaseActive(false);
+      setSpawnCountdown(null);
+    });
+
+    return () => {
+      unsubUpdate();
+      unsubEnd();
+    };
+  }, [api]);
+
+  // Subscribe to game end events
+  useEffect(() => {
+    if (!api) return;
+
+    const unsubscribe = api.onGameEnded((outcome) => {
+      console.log("Game outcome received:", outcome);
+      setGameOutcome(outcome);
+      setSpawnPhaseActive(false);
+      // Track game ended
+      if (analytics) {
+        analytics.track("game_ended", {
+          outcome: outcome.toString().toLowerCase(),
+        });
+      }
+    });
+
+    return () => unsubscribe();
+  }, [api, analytics]);
+
+  // Track renderer initialization with GPU info
+  useEffect(() => {
+    if (renderer && analytics) {
+      const rendererInfo = renderer.getRendererInfo();
+      analytics.track("renderer_initialized", rendererInfo);
+    }
+  }, [renderer, analytics]);
+
+  // Sync highlighted nation with renderer
+  useEffect(() => {
+    if (renderer) {
+      renderer.setHighlightedNation(highlightedNation);
+    }
+  }, [highlightedNation, renderer]);
+
+  const handleExit = () => {
+    if (api) {
+      api.quitGame();
+    }
+    setGameOutcome(null);
+    onReturnToMenu();
+  };
+
+  return (
+    <>
+      {/* Game Canvas - always rendered at root */}
+      <GameCanvas
+        className="h-screen w-screen"
+        initialState={initialGameState}
+        onRendererReady={setRenderer}
+        onNationHover={setHighlightedNation}
+      />
+
+      {/* Game UI */}
+      <div className="game-ui">
+        {/* Spawn Phase Overlay */}
+        <SpawnPhaseOverlay isVisible={spawnPhaseActive} countdown={spawnCountdown} />
+
+        <Leaderboard initialSnapshot={initialLeaderboard} highlightedNation={highlightedNation} onNationHover={setHighlightedNation} />
+        <AttackControls>
+          <Attacks onNationHover={setHighlightedNation} />
+        </AttackControls>
+        <GameMenu
+          onExit={handleExit}
+          onSettings={() => {
+            // TODO: Implement settings
+          }}
+        />
+
+        {/* Game End Overlay */}
+        {gameOutcome && (
+          <Suspense fallback={null}>
+            <GameEndOverlay outcome={gameOutcome} onSpectate={() => setGameOutcome(null)} onExit={handleExit} />
+          </Suspense>
+        )}
+      </div>
+    </>
+  );
+}