floating-games-sdk 1.0.0

package/src/modals/BottomSheetModal.tsx

@@ -0,0 +1,38 @@
+import React, { forwardRef, useMemo } from 'react';
+import { View, Text, StyleSheet } from 'react-native';
+import BottomSheet from '@gorhom/bottom-sheet';
+
+type Props = {
+    children: React.ReactNode;
+};
+
+const AppBottomSheet = forwardRef<BottomSheet, Props>(({ children }, ref) => {
+    const snapPoints = useMemo(() => ['25%', '50%'], []);
+
+    return (
+        <BottomSheet
+            ref={ref}
+            snapPoints={snapPoints}
+            index={-1}
+            enablePanDownToClose
+            backgroundStyle={styles.bg}
+        >
+            <View style={styles.content}>
+                {children}
+            </View>
+        </BottomSheet>
+    );
+});
+
+export default AppBottomSheet;
+
+const styles = StyleSheet.create({
+    bg: {
+        borderRadius: 20,
+        backgroundColor: '#f00'
+    },
+    content: {
+        flex: 1,
+        padding: 20,
+    },
+});

package/src/modals/GameOverModal.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { Modal, View, Text, TouchableOpacity, StyleSheet, Image } from 'react-native';
+
+type Props = {
+    visible: boolean;
+    onClose: () => void;
+    title?: string;
+    children?: React.ReactNode;
+};
+
+export default function GameOverModal({
+  visible,
+  onClose,
+  title,
+  children,
+}: Props) {
+  return (
+    <Modal
+      transparent
+      visible={ visible }
+      animationType="fade"
+      onRequestClose={ onClose }
+    >
+      <View style={ styles.overlay }>
+        <View style={ styles.container }>
+
+          { /*{title && <Text style={styles.title}>{title}</Text>}*/ }
+
+          { /*{children}*/ }
+
+          <View style={ { justifyContent:'center',alignSelf:'center',alignItems:'center' } }>
+            <Image
+              source={ require('../assets/images/game-over.gif') }
+              style={ { width: 200, height: 200, marginTop: 20 } }
+              resizeMode="contain"
+            />
+          </View>
+
+          { /*<TouchableOpacity style={styles.button} onPress={onClose}>*/ }
+          { /*    <Text style={styles.btnText}>Close</Text>*/ }
+          { /*</TouchableOpacity>*/ }
+
+        </View>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.5)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 999
+  },
+  container: {
+    // width: '85%',
+    backgroundColor: 'transparent',
+    // borderRadius: 12,
+    padding: 0,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+    marginBottom: 10,
+  },
+  button: {
+    alignSelf: 'flex-end',
+    marginTop: 15,
+  },
+  btnText: {
+    fontSize: 16,
+    color: '#2563eb',
+  },
+});

package/src/modals/PauseModal.tsx

@@ -0,0 +1,95 @@
+import React from 'react';
+import { Modal, View, TouchableOpacity, StyleSheet, Image } from 'react-native';
+import FloatingButton from '../components/reusables/FloatingButton';
+
+type Props = {
+    visible: boolean;
+    onClose: () => void;
+    title?: string;
+    children?: React.ReactNode;
+};
+
+export default function PauseModal({
+  visible,
+  onClose,
+  title,
+  children,
+}: Props) {
+  return (
+    <Modal
+      transparent
+      visible={ visible }
+      animationType="fade"
+      onRequestClose={ onClose }
+    >
+      <View style={ styles.overlay }>
+        <View style={ styles.container }>
+
+          { /*{title && <Text style={styles.title}>{title}</Text>}*/ }
+
+          { /*{children}*/ }
+
+          <View style={ { justifyContent: 'center', alignSelf: 'center', alignItems: 'center' } }>
+            <FloatingButton preset="left">
+              <Image
+                source={ require('../assets/images/pause-clock.png') }
+                style={ { width: 150, height: 150, marginTop: 20 } }
+                resizeMode="contain"
+              />
+            </FloatingButton>
+          </View>
+
+          { /*<TouchableOpacity style={styles.button} onPress={onClose}>*/ }
+          { /*    <Text style={styles.btnText}>Close</Text>*/ }
+          { /*</TouchableOpacity>*/ }
+
+        </View>
+        <FloatingButton preset="left">
+          <TouchableOpacity style={ styles.button } onPress={ onClose }>
+            { /*<Text>Continue</Text>*/ }
+            <Image
+              source={ require('../assets/images/start-button.png') }
+              style={ { width: 130, height: 90 } }
+              resizeMode="cover"
+            />
+          </TouchableOpacity>
+        </FloatingButton>
+      </View>
+    </Modal>
+  );
+}
+
+const styles = StyleSheet.create({
+  overlay: {
+    flex: 1,
+    backgroundColor: 'rgba(0,0,0,0.9)',
+    justifyContent: 'center',
+    alignItems: 'center',
+    zIndex: 999
+  },
+  container: {
+    // width: '85%',
+    // backgroundColor: '#807e7e',
+    // borderRadius: 12,
+    padding: 0,
+  },
+  title: {
+    fontSize: 18,
+    fontWeight: '700',
+    marginBottom: 10,
+  },
+  button: {
+    alignSelf: 'center',
+    marginTop: 25,
+    // borderColor: '#eee',
+    // borderWidth: 1,
+    // paddingHorizontal: 10,
+    // paddingVertical: 2,
+    borderRadius: 50,
+    // backgroundColor: 'rgba(44,43,43,0.5)'
+  },
+  btnText: {
+    fontSize: 16,
+    color: '#2563eb',
+  },
+});

package/src/navigation/GameNavigator.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { GestureHandlerRootView } from 'react-native-gesture-handler';
+import { createNativeStackNavigator } from '@react-navigation/native-stack';
+import { LogBox } from 'react-native';
+
+import SplashScreen from '../components/games/SplashScreen';
+import GameSelectorScreen from '../components/games/GameSelectorScreen';
+import NumberPuzzle from '../components/games/number-puzzle/GameScreen';
+import SpinAndWin from '../components/games/spin-wheel/SpinAndWin';
+import ReviewWin from '../components/games/review-and-win/GameScreen';
+import GameSplash from '../components/games/GameSplash';
+import FundAccount from '../components/payment/FundAccount';
+
+LogBox.ignoreLogs(['SafeAreaView has been deprecated']);
+
+export type RootStackParamList = {
+    Splash: undefined;
+    Payment: undefined;
+    GameSelector: undefined;
+    GameSplash: {
+        icon?: string;
+        title?: string;
+        backgroundColor?: string;
+        backgroundImage?: any;
+        navigateTo: 'Game1' | 'Game2' | 'Game3';
+    };
+    Game1: undefined;
+    Game2: undefined;
+    Game3: undefined;
+};
+
+const Stack = createNativeStackNavigator<RootStackParamList>();
+
+export default function GameNavigator() {
+    return (
+        <GestureHandlerRootView style={{ flex: 1 }}>
+            <Stack.Navigator screenOptions={{ headerShown: false }}>
+                <Stack.Screen name="Splash" component={SplashScreen} />
+                <Stack.Screen name="Payment" component={FundAccount} />
+                <Stack.Screen name="GameSelector" component={GameSelectorScreen} />
+                <Stack.Screen name="GameSplash" component={GameSplash} />
+                <Stack.Screen name="Game1" component={NumberPuzzle} />
+                <Stack.Screen name="Game2" component={SpinAndWin} />
+                <Stack.Screen name="Game3" component={ReviewWin} />
+            </Stack.Navigator>
+        </GestureHandlerRootView>
+    );
+}