95 lines
3.2 KiB
TypeScript
95 lines
3.2 KiB
TypeScript
import React, { useEffect, useState } from "react";
|
|
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";
|
|
import { GameEngine } from "react-native-game-engine";
|
|
import { SafeAreaView, useSafeAreaInsets } from "react-native-safe-area-context";
|
|
|
|
import { entities, useEntities } from "@entities";
|
|
import { GameLoop } from "@systems";
|
|
import { IGameEngine } from "@types";
|
|
|
|
export default function AppView() {
|
|
const [isRunning, setIsRunning] = React.useState(true);
|
|
const [score, setScore] = useState(0);
|
|
const [gameEngine, setGameEngine] = useState<IGameEngine | null>(null);
|
|
const { entities } = useEntities();
|
|
const { top } = useSafeAreaInsets();
|
|
const topInset = top.valueOf();
|
|
(global as any).topInset = topInset;
|
|
|
|
const gameEntities = entities();
|
|
const { engine, world } = gameEntities.physics;
|
|
|
|
// console.log(topInset)
|
|
|
|
// const gameEntities = entities();
|
|
useEffect(() => {
|
|
(global as any).gameEngine = gameEngine;
|
|
}, [gameEngine]);
|
|
|
|
return (
|
|
<SafeAreaView edges={['top']} style={[styles.container, {
|
|
|
|
}]}>
|
|
{/* @ts-ignore */}
|
|
<GameEngine
|
|
ref={(ref) => setGameEngine(ref as IGameEngine)}
|
|
systems={[GameLoop]}
|
|
entities={gameEntities}
|
|
running={isRunning}
|
|
onEvent={({ type, ...rest }: any) => {
|
|
switch (type) {
|
|
case "addToScore": {
|
|
setScore(score => score + 1);
|
|
break;
|
|
}
|
|
case "subtractFromScore": {
|
|
setScore(score => score - 1);
|
|
break;
|
|
}
|
|
}
|
|
}}
|
|
style={{ position: "absolute", top: 0, left: 0, right: 0, bottom: 0 }}
|
|
>
|
|
<TouchableOpacity
|
|
onPress={() => {
|
|
// gameEngine?.swap(entities());
|
|
if (isRunning) {
|
|
gameEngine?.stop();
|
|
setIsRunning(false);
|
|
} else {
|
|
gameEngine?.start();
|
|
setIsRunning(true);
|
|
}
|
|
}}
|
|
style={{
|
|
position: "absolute",
|
|
top: 0,
|
|
left: 0,
|
|
height: 55,
|
|
width: "100%",
|
|
// borderColor: "red",
|
|
// borderWidth: 1,
|
|
}}
|
|
>
|
|
<Text
|
|
style={{
|
|
textAlign: "center",
|
|
fontSize: 40,
|
|
fontWeight: "bold",
|
|
marginTop: topInset / 2,
|
|
}}
|
|
>
|
|
{isRunning ? score : "Press to Resume"}
|
|
</Text>
|
|
</TouchableOpacity>
|
|
</GameEngine>
|
|
</SafeAreaView>
|
|
);
|
|
}
|
|
|
|
const styles = StyleSheet.create({
|
|
container: {
|
|
flex: 1,
|
|
},
|
|
});
|