screens PhilosophyScreen.tsx

0% Statements 0/90

0% Branches 0/1

0% Functions 0/1

0% Lines 0/90

Press n or j to go to the next uncovered block, b, p or k for the previous block.

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109

import React, { useEffect } from "react";
import "@pixi/layout";
import { extend } from "@pixi/react";
import { Container, FillGradient } from "pixi.js";
import { KOREAN_COLORS } from "../../types/constants";
import { PhilosophySection } from "./PhilosophySection";
 
extend({ Container });
 
export interface PhilosophyScreenProps {
  readonly onReturnToMenu: () => void;
  readonly width?: number;
  readonly height?: number;
}
 
export const PhilosophyScreen: React.FC<PhilosophyScreenProps> = ({
  onReturnToMenu,
  width = 1200,
  height = 800,
}) => {
  // Enhanced keyboard handling for screen-level navigation
  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === "Escape" || event.key.toLowerCase() === "m") {
        event.preventDefault();
        onReturnToMenu();
      }
    };
 
    window.addEventListener("keydown", handleKeyDown, { passive: false });
    return () => window.removeEventListener("keydown", handleKeyDown);
  }, [onReturnToMenu]);
 
  return (
    <pixiContainer
      width={width}
      height={height}
      data-testid="philosophy-screen"
      layout={{
        width,
        height,
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "flex-start",
        padding: 0,
      }}
    >
      <pixiGraphics
        draw={(g) => {
          g.clear();
          const gradient = new FillGradient(0, 0, width, height);
          gradient.addColorStop(0, 0x0a0a0f);
          gradient.addColorStop(0.5, 0x1a1a2e);
          gradient.addColorStop(1, 0x0f0f23);
          g.fill(gradient);
          g.rect(0, 0, width, height);
          g.fill();
 
          // Add cyberpunk grid overlay like IntroScreen
          g.stroke({
            width: 1,
            color: KOREAN_COLORS.PRIMARY_CYAN,
            alpha: 0.15,
          });
          const gridSize = 60;
          for (let i = 0; i < width; i += gridSize) {
            g.moveTo(i, 0);
            g.lineTo(i, height);
          }
          for (let i = 0; i < height; i += gridSize) {
            g.moveTo(0, i);
            g.lineTo(width, i);
          }
          g.stroke();
        }}
        layout={{
          position: "absolute",
          top: 0,
          left: 0,
          width: "100%",
          height: "100%",
        }}
        data-testid="philosophy-background"
      />
 
      <pixiContainer
        layout={{
          width: "100%",
          height: "100%",
          flexDirection: "column",
          alignItems: "center",
          justifyContent: "center",
          padding: 20,
        }}
      >
        <PhilosophySection
          onBack={onReturnToMenu}
          x={0}
          y={0}
          width={width - 40} // Account for padding
          height={height - 40}
        />
      </pixiContainer>
    </pixiContainer>
  );
};
 
export default PhilosophyScreen;