"@expo/vector-icons": "^14.0.2",
    "@react-navigation/native": "^6.0.2",
    "axios": "^1.7.7",
    "expo": "~51.0.39",
    "expo-constants": "~16.0.2",
    "expo-font": "~12.0.9",
    "expo-linking": "~6.3.1",
    "expo-router": "~3.5.24",
    "expo-splash-screen": "^0.27.7",
    "expo-status-bar": "~1.12.1",
    "expo-system-ui": "~3.0.7",
    "expo-web-browser": "~13.0.3",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-native": "0.74.5",
    "react-native-gesture-handler": "~2.16.1",
    "react-native-paper": "^5.12.5",
    "react-native-reanimated": "~3.10.1",
    "react-native-safe-area-context": "4.10.5",
    "react-native-screens": "3.31.1",
    "react-native-web": "~0.19.10",
    "react-native-webview": "^13.8.6",
    "socket.io-client": "^4.8.1"

bunları kullanrak bana expo-phaser ile

ui da geliştirerek

oyun kısmını uyarla:



import { useState, useEffect } from 'react';
import { Container } from 'nes-ui-react';
import PhaserGame from './game/PhaserGame';
import { io } from 'socket.io-client';
import axios from 'axios';
import PixelArtCyberpunkLoginForm from './components/LoginForm';
import SignInForm from './components/SignInForm';
import URL from './game/URL';


function App() {
  const [currentView, setCurrentView] = useState('login');
  const [alertMessage, setAlertMessage] = useState('');
  const [audioPlaying, setAudioPlaying] = useState(false);
  const [socket, setSocket] = useState(null);

  useEffect(() => {
    const newSocket = io(URL);
    setSocket(newSocket);

    return () => newSocket.disconnect();
  }, []);

  const handleLogin = async (username, password) => {
    try {
      const response = await axios.post(`${URL}/API/login`, { username, password });
      if (response.status === 200) {
        const { loginTimes } = response.data.datas;
        localStorage.setItem('login_times', loginTimes + 1);
        setCurrentView('game');
      }
    } catch (error) {
      setAlertMessage(error.response?.status === 409 ? 'This info is not right' : 'Can\'t reach server');
    }
  };

  const handleSignIn = async (username, menuname, password) => {
    try {
      const response = await axios.post(`${URL}/API/signIn`, { username, menuname, password });
      if (response.status === 200) {
        setCurrentView('login');
      }
    } catch (error) {
      if (error.response?.status === 403) {
        setAlertMessage('This password is so weak');
      } else if (error.response?.status === 409) {
        setAlertMessage('This Info is anybody else');
      } else {
        setAlertMessage('Can\'t reach server');
      }
    }
  };

  const handleAudioPlay = () => {
    if (!audioPlaying) {
      const audio = document.getElementById('bgMusic');
      audio.play();
      setAudioPlaying(true);
    }
  };

  return (
    <Container 
      onClick={handleAudioPlay} 
      className="min-h-screen"
      style={{ backgroundColor: '#212529' }}
    >
      <audio
        id="bgMusic"
        src="./sounds/soundtracks/The Last Encounter (Original Version).mp3"
        loop
        preload="auto"
      />

      {currentView === 'login' && (
        <PixelArtCyberpunkLoginForm 
          onSubmit={handleLogin}
          onSignInClick={() => setCurrentView('signin')}
          alertMessage={alertMessage}
        />
      )}

      {currentView === 'signin' && (
        <SignInForm
          onSubmit={handleSignIn}
          onBackClick={() => setCurrentView('login')}
          alertMessage={alertMessage}
        />
      )}

      {currentView === 'game' && <PhaserGame socket={socket} />}
    </Container>
  );
}

export default App;


______


import { Text, View } from "react-native";

export default function Index() {
  return (
    <View
      style={{
        flex: 1,
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <Text>Edit app/idfsndex.tsx to edit this screen.</Text>
    </View>
  );
}


_____


import PhaserGame from "./CyberAttacks/game/PhaserGame";
import "./index.css"
function CyberAttack() {
    return (
        <>
        <PhaserGame />
        </>
    )
}

export default CyberAttack;

_______

import { useEffect, useRef } from 'react';
import { AUTO, Game, Loader, Scale,WEBGL } from 'phaser';

// Import sahneler
import Credits from './scenes/Credits.js';
import GameoverScene from './scenes/GameoverScene.js';
import LoaderScene from './scenes/LoaderScene.js';
import MainMenu from './scenes/MainMenu.js';
import SceneForStory from './scenes/SceneForStory.js';
import SceneForSimulator from './scenes/SceneSimulator.js';
import ShopMenu from './scenes/ShopMenu.js';

// Import socket.io ve URL
import { io } from 'socket.io-client';
import URL from './URL.js';

// Import varlıklar
import WelcomeMenuSpeech from './maps/online_maps/menu/WelcomeMenu.json';
import WelcomeMenuGreat_job from './maps/online_maps/menu/WelcomeMenu.json';
import WelcomeMenu_time_is_up from './maps/online_maps/menu/WelcomeMenu.json';
import ShopMenuJSON from './maps/online_maps/menu/ShopMenu.json';

import FrameMap2 from './assets/Menus/menu_pack/1 Frames/FrameMap2.png';
import FrameMap from './assets/Menus/menu_pack/1 Frames/FrameMap.png';
import PressStart2P from './assets/font/2P_To_Start/PressStart2P-Regular.ttf';

import polygonJS from './maps/online_maps/menu/polygon.json';
import image from './assets/areas/tilesets/map.png';
import rate from './rate.js';
import GrayscaleFXPipeline from './scenes/Filters/Grayscale.js';
import CyberPunkFXPipeline from './scenes/Filters/CyberPunkFXPipeline.js';
import SharpennerColorsFXPipeline from './scenes/Filters/SharpennerColorsFXPipeline.js';
import PixelArtGameFXPipeline from './scenes/Filters/PixelArtGameFXPipeline.js';
import Antialias from './scenes/Filters/Antialias.js';

const PhaserGame = () => {
  const gameRef = useRef(null);

  useEffect(() => {


    // Font yükleme fonksiyonu
    const loadFont = async (name, url) => {
      try {
        const newFont = new FontFace(name, `url(${url})`);
        await newFont.load();
        document.fonts.add(newFont);
      } catch (error) {
        console.error(`Font "${name}" yüklenemedi:`, error);
      }
    };

    // Varlıkları yükleyip oyunu başlatan fonksiyon
    const createGame = async () => {
      // Fontu yükle
      await loadFont('press_start', PressStart2P);
      // Ölçek oranı hesaplama
      const currentRate = window.innerWidth / window.innerHeight;
      let mustWidth = 0;
      let mustHeight = 0;

      if (currentRate < rate) {
        mustWidth = window.innerWidth;
        mustHeight = window.innerHeight / (rate / currentRate);
      } else {
        mustWidth = window.innerWidth / (rate / currentRate);
        mustHeight = window.innerHeight;
      }
      mustWidth = window.innerWidth * (rate / currentRate);
      mustHeight = window.innerHeight;




// Phaser'ın LoaderPlugin sınıfına async destekli bir prototip ekliyoruz
Loader.LoaderPlugin.prototype.loadDynamic = async function (type, key, path, frameConfig = {}) {
    try {
        const module = await import(path);
        console.log(`Loaded ${type} - key: ${key} from path: ${path}`);
        
        if (type === 'spritesheet' && frameConfig) {
            this.spritesheet(key, module.default, frameConfig);
        } else if(type === 'tilemapTiledJSON'){
            this.tilemapTiledJSON(key,module.default)
        } else {
            this[type](key, module.default);
        }
    } catch (error) {
        console.error(`Failed to load ${type} with key ${key} from path ${path}:`, error);
    }
};




      // Phaser oyun konfigürasyonu
      const config = {
        resolution: 3,
        type: AUTO,
        width: mustWidth,
        height: mustHeight,
        backgroundColor: 0x000000,
        pipeline: { GrayscaleFX: GrayscaleFXPipeline, CyberPunkFX: CyberPunkFXPipeline,SharpennerColorsFX: SharpennerColorsFXPipeline,PixelArtGameFX:PixelArtGameFXPipeline,Antialias: Antialias },
       parent: "game", // React bileşeni içinde kullanılacak parent
        scene: [
          new MainMenu(FrameMap2, WelcomeMenuSpeech, 'WelcomeMenu-welcome_speech', 'welcome_speech'),
          new MainMenu(FrameMap2, WelcomeMenuGreat_job, 'WelcomeMenu-Great_job', 'Great_job'),
          new MainMenu(FrameMap, WelcomeMenu_time_is_up, 'WelcomeMenu-time_is_up', 'time_is_up'),
          new ShopMenu(1, FrameMap2, ShopMenuJSON),
          new SceneForSimulator(image, polygonJS, 'polygon'),
          new LoaderScene('LoaderScene', false),
          new LoaderScene('LoaderSceneForReload', true),
          new GameoverScene(),
          new Credits(),
          new SceneForStory(),
        ],
        transparent: false,
        autoStart: false,
        render: { pixelArt: true, antialias: true, antialiasGL: true,    roundPixels: true        },
        fps: { target: 60 },
        dom: {
          createContainer: true,
        },
        scale: {
          mode: Scale.FIT,
          autoCenter: Scale.CENTER_BOTH,
        },
        physics: {
          default: "matter",
          matter: {
            enableSleeping: false,
            gravity: { y: 1 },
            debug: {
              showBody: false,
              showStaticBody: false,
            },
          },
        },
      };

      // Socket.io bağlantısı
      const socket = io(URL);

      // LocalStorage kontrolü
      if (!localStorage.getItem('level_number')) {
        localStorage.setItem('level_number', '1');
      }

      // Level limitini gönder
      socket.emit("LevelLimit", config.scene.length - 1);

      // Socket olaylarını dinle
/*
      socket.on("event_from_server", (data) => {
        if (game && game.scene) {
          const activeScenes = game.scene.getScenes(true);
          activeScenes.forEach((scene) => {
            if (scene.handleSocketEvent) {
              scene.handleSocketEvent(data);
            }
          });
        }
      });
*/

      // Phaser oyununu başlat
      
      gameRef.current = new Game(config);
    };

    createGame();

    // Pencere boyutu değiştiğinde oyunu yeniden ölçeklendir
    const handleResize = () => {
      if (gameRef.current && gameRef.current.scale) {
        // Ölçeklendirme ayarlarını güncelle
        const rate = 24 / 13.5;
        const currentRate = window.innerWidth / window.innerHeight;
        let mustWidth, mustHeight;
    
        if (currentRate < rate) {
          mustWidth = window.innerWidth;
          mustHeight = window.innerWidth / rate;
        } else {
          mustWidth = window.innerHeight * rate;
          mustHeight = window.innerHeight;
        }
    
        gameRef.current.scale.resize(mustWidth, mustHeight);
    
        // Kamera güncellemesi
        gameRef.current.scene.scenes.forEach(scene => {
          if (scene.cameras && scene.cameras.main) {
            scene.cameras.main.setBounds(0, 0, mustWidth, mustHeight);
            scene.cameras.main.centerOn(mustWidth / 2, mustHeight / 2);
          }
        });
      }
    };
    
    

    window.addEventListener('resize', handleResize);

    // Cleanup fonksiyonu
    return () => {
      if (gameRef.current) {
        gameRef.current.destroy(true);
      }
      window.removeEventListener('resize', handleResize);
    };
  }, []);

  return <div id="game" style={{ width: '100%', height: '100vh', overflow: 'hidden' }} />;
};

export default PhaserGame;

________

import { Box, Button, styled, TextField, Typography } from "@mui/material";
// Styled components with Material-UI and custom styles
const LoginBackground = styled(Box)`
  background-color: #0f0f0f;
  background-image: url('https://example.com/retro-grid-background.png');
  background-size: cover;
  background-position: center;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
`;

const LoginContainer = styled(Box)`
  background-color: rgba(0, 0, 0, 0.7);
  border: 3px solid #00ffcc;
  border-radius: 10px;
  padding: 2rem;
  max-width: 400px;
  width: 100%;
  box-shadow: 0 0 20px 5px rgba(0, 255, 204, 0.7);
`;

const LoginTitle = styled(Typography)`
  color: #ff007f;
  text-align: center;
  font-family: 'Press Start 2P', cursive;
  font-size: 2rem;
  margin-bottom: 1.5rem;
  text-transform: uppercase;
`;

const InputField = styled(TextField)`
  background-color: transparent;
  border: 2px solid #00ffcc;
  color: #00ffcc;
  margin-bottom: 1rem;
  width: 100%;
  font-family: 'Press Start 2P', monospace;
  font-size: 1rem;

  & .MuiInputBase-input {
    color: #00ffcc;
  }

  & .MuiInputLabel-root {
    color: #00ffcc;
  }

  & .MuiOutlinedInput-root {
    fieldset {
      border-color: #00ffcc;
    }

    &:hover fieldset {
      border-color: #ff007f;
    }
  }
`;

const AlertMessage = styled(Typography)`
  color: #ff007f;
  font-family: 'Press Start 2P', monospace;
  font-size: 0.9rem;
  margin-bottom: 1rem;
  text-align: center;
`;

const ButtonGroup = styled(Box)`
  display: flex;
  justify-content: space-between;
  align-items: center;
`;

const LoginButton = styled(Button)`
  background-color: #ff007f;
  color: #00ffcc;
  font-family: 'Press Start 2P', monospace;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  width: 48%;
  box-shadow: 0 0 10px 2px #ff007f;
  text-transform: uppercase;
  
  &:hover {
    background-color: #00ffcc;
    color: #1a1a2e;
    box-shadow: 0 0 15px 3px #00ffcc;
  }
`;

const SignInButton = styled(Button)`
  background-color: transparent;
  border: 2px solid #ff007f;
  color: #ff007f;
  font-family: 'Press Start 2P', monospace;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  width: 48%;
  
  &:hover {
    background-color: #ff007f;
    color: #1a1a2e;
    box-shadow: 0 0 15px 3px #ff007f;
  }
`;

const PixelArtCyberpunkLoginForm = ({ onSubmit, onSignInClick, alertMessage }) => {
  return (
    <LoginBackground>
      <LoginContainer>
        <LoginTitle variant="h5">CYBER LOGIN</LoginTitle>
        <form onSubmit={(e) => {
          e.preventDefault();
          const formData = new FormData(e.target);
          onSubmit(formData.get('username'), formData.get('password'));
        }}>
          <InputField
            name="username"
            label="USERNAME"
            variant="outlined"
            required
          />
          <InputField
            type="password"
            name="password"
            label="PASSWORD"
            variant="outlined"
            required
          />
          {alertMessage && <AlertMessage>{alertMessage}</AlertMessage>}
          <ButtonGroup>
            <LoginButton type="submit">LOGIN</LoginButton>
            <SignInButton type="button" onClick={onSignInClick}>SIGN IN</SignInButton>
          </ButtonGroup>
        </form>
      </LoginContainer>
    </LoginBackground>
  );
}

export default PixelArtCyberpunkLoginForm;


_________

import { TextField, Button, Container, Grid, Typography, Box } from '@mui/material';
import { styled } from '@mui/system';

const SignInContainer = styled(Container)`
  background: linear-gradient(to right, #1c1c1c, #1a1a2e);
  padding: 2rem;
  border-radius: 12px;
  max-width: 400px;
  box-shadow: 0 0 20px rgba(0, 255, 204, 0.8);
  color: #00ffcc;
  display: flex;
  flex-direction: column;
  align-items: center;
`;

const SignInButton = styled(Button)`
  background-color: #ff007f;
  color: #00ffcc;
  border: 2px solid #00ffcc;
  font-family: 'Press Start 2P', monospace;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  width: 100%;
  margin-top: 1rem;
  text-transform: uppercase;
  
  &:hover {
    background-color: #00ffcc;
    color: #1a1a2e;
    box-shadow: 0 0 15px 3px #00ffcc;
  }
`;

const BackButton = styled(Button)`
  background-color: transparent;
  border: 2px solid #ff007f;
  color: #ff007f;
  font-family: 'Press Start 2P', monospace;
  padding: 0.8rem 1.5rem;
  font-size: 1rem;
  width: 100%;
  margin-top: 1rem;
  text-transform: uppercase;
  
  &:hover {
    background-color: #ff007f;
    color: #1a1a2e;
    box-shadow: 0 0 15px 3px #ff007f;
  }
`;

const SignInForm = ({ onSubmit, onBackClick, alertMessage }) => {
  return (
 <Box sx={{
    transform: "translate(-50%,-50%)",
    top: "50%",
    left: "50%",
    position: "fixed",
 }}>
    <SignInContainer maxWidth="xs">
      <Typography variant="h4" align="center" gutterBottom style={{ fontFamily: 'Press Start 2P', textTransform: 'uppercase' }}>
        Sign In
      </Typography>
      <form
        onSubmit={(e) => {
          e.preventDefault();
          const formData = new FormData(e.target);
          onSubmit(formData.get('username'), formData.get('menuname'), formData.get('password'));
        }}
        style={{ width: '100%' }}
      >
        <TextField
          name="username"
          label="Username"
          variant="outlined"
          fullWidth
          required
          InputLabelProps={{ style: { color: '#00ffcc' } }}
          InputProps={{ style: { color: '#00ffcc' } }}
          style={{ marginBottom: '1rem', borderColor: '#00ffcc' }}
        />
        <TextField
          name="menuname"
          label="Menu Name"
          variant="outlined"
          fullWidth
          required
          InputLabelProps={{ style: { color: '#00ffcc' } }}
          InputProps={{ style: { color: '#00ffcc' } }}
          style={{ marginBottom: '1rem', borderColor: '#00ffcc' }}
        />
        <TextField
          type="password"
          name="password"
          label="Password"
          variant="outlined"
          fullWidth
          required
          InputLabelProps={{ style: { color: '#00ffcc' } }}
          InputProps={{ style: { color: '#00ffcc' } }}
          style={{ marginBottom: '1rem', borderColor: '#00ffcc' }}
        />
        {alertMessage && <Typography color="error" align="center" style={{ marginBottom: '1rem' }}>{alertMessage}</Typography>}
        <Grid container spacing={2} justifyContent="center">
          <Grid item xs={12} sm={6}>
            <SignInButton type="submit" fullWidth>
              Sign In
            </SignInButton>
          </Grid>
          <Grid item xs={12} sm={6}>
            <BackButton type="button" onClick={onBackClick} fullWidth>
              Back to Login
            </BackButton>
          </Grid>
        </Grid>
      </form>
    </SignInContainer>
 </Box>
  );
};

export default SignInForm;

____