floating-games-sdk 1.0.0

package/src/components/games/GameSelectorScreen.tsx

@@ -0,0 +1,221 @@
+import React, { useEffect, useState } from 'react';
+import { Image, ImageBackground, ScrollView, StyleSheet, Text, TouchableOpacity, View } from 'react-native';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { RootStackParamList } from '@/src/navigation/GameNavigator';
+import FloatingButton from '../../components/reusables/FloatingButton';
+import { LinearGradient } from 'expo-linear-gradient';
+import { useSoundPlayer } from '../reusables/SoundPlayer';
+import { useSafeAreaInsets } from 'react-native-safe-area-context';
+import FloatingMenu from '../../components/atoms/FloatingMenu';
+import AsyncStorage from '@react-native-async-storage/async-storage';
+import ShimmerHR from '../../components/atoms/ShimmerHR';
+import { SafeAreaView } from 'react-native-safe-area-context';
+
+type Props = NativeStackScreenProps<RootStackParamList, 'GameSelector'>;
+
+type Game = {
+    icon: string;
+    title: string;
+    backgroundColor: string;
+    navigateTo: string | any;
+    howTo: string;
+};
+
+const GAMES: Game[] = [
+    {
+        icon: '🧩',
+        title: 'Number Puzzle',
+        backgroundColor: '#022759',
+        navigateTo: 'Game1',
+        howTo: 'Slide the numbered tiles until arranged 1–15 using the empty space. Complete within the time limit to win a cash prize.',
+    },
+    {
+        icon: '🎡',
+        title: 'Spin Wheel',
+        backgroundColor: '#02594a',
+        navigateTo: 'Game2',
+        howTo: 'Spin the wheel and watch it land on a random segment to reveal your prize instantly.',
+    },
+    {
+        icon: '⭐',
+        title: 'Review And Win',
+        backgroundColor: '#5a0217',
+        navigateTo: 'Game3',
+        howTo: 'Tap to reveal hidden tiles and match three identical items to win the prize shown.',
+    },
+];
+
+const GAME_IMAGES = [
+    require('../../assets/images/bright-rubber-puzzles-blue.png'),
+    require('../../assets/images/spin-wheel-selector.png'),
+    require('../../assets/images/review-win-selector.png'),
+];
+
+const PLAY_NOW_GIF = require('../../assets/images/play-now.gif');
+const BG_IMAGE = require('../../assets/images/select-bg.png');
+const SELECTOR_MUSIC = require('../../assets/sounds/selector-music.mp3');
+
+export default function GameSelectorScreen({ navigation }: Props) {
+    const insets = useSafeAreaInsets();
+    const [isPlaying, setIsPlaying] = useState(false);
+    const { playSound, stopSound } = useSoundPlayer(SELECTOR_MUSIC, 0.9);
+
+    const handleMusic = async () => {
+        const value = await AsyncStorage.getItem('hasMusic');
+        const enabled = value === 'true';
+        setIsPlaying(enabled);
+        enabled ? playSound() : stopSound();
+    };
+
+    const musicCtrl = async () => {
+        try {
+            const value = await AsyncStorage.getItem('hasMusic');
+            const next = value !== 'true';
+            await AsyncStorage.setItem('hasMusic', String(next));
+            setIsPlaying(next);
+            next ? playSound() : stopSound();
+        } catch (err) {
+            console.log('musicCtrl error:', err);
+        }
+    };
+
+    useEffect(() => {
+        handleMusic();
+        return () => stopSound();
+    }, []);
+
+    const onSelection = (navigateTo: string) => {
+        const game = GAMES.find(g => g.navigateTo === navigateTo);
+        if (game) {
+            navigation.navigate('GameSplash', {
+                icon: game.icon,
+                title: game.title,
+                backgroundColor: game.backgroundColor,
+                navigateTo: game.navigateTo,
+            });
+        }
+    };
+
+    return (
+        <ImageBackground source={BG_IMAGE} style={styles.bg} resizeMode="contain">
+            <LinearGradient colors={['rgba(198,198,198,0.5)', '#4c68af', '#597e79']} style={styles.container}>
+
+                <SafeAreaView style={{ paddingTop: insets.top }}>
+                    <Text style={styles.brand}>Floating Games</Text>
+                    <Text style={styles.ageNotice}>
+                        This game contains content intended for players aged 18 and above.{'\n'}
+                        By tapping 'Play Button', you confirm that you meet the age requirement.
+                    </Text>
+                    <Text style={styles.title}>Select Game</Text>
+
+                    <ShimmerHR />
+
+                    <ScrollView
+                        style={styles.scroll}
+                        contentContainerStyle={styles.scrollContent}
+                        showsVerticalScrollIndicator={false}
+                    >
+                        {GAMES.map((game, index) => (
+                            <View key={game.navigateTo} style={styles.cardWrapper}>
+                                <FloatingButton preset="normal">
+                                    <Image
+                                        source={GAME_IMAGES[index]}
+                                        style={[styles.gameImage, index === 1 && styles.gameImageLarge]}
+                                    />
+                                    <TouchableOpacity onPress={() => onSelection(game.navigateTo)}>
+                                        <Text style={styles.gameTitle}>{game.title} {game.icon}</Text>
+                                        <Image source={PLAY_NOW_GIF} style={styles.playNow} />
+                                    </TouchableOpacity>
+                                    <Text style={styles.howTo}>{game.howTo}</Text>
+                                </FloatingButton>
+                            </View>
+                        ))}
+                    </ScrollView>
+
+                    <FloatingMenu
+                        isPlaying={isPlaying}
+                        soundCtrl={musicCtrl}
+                        paymentCtrl={() => {
+                            navigation.navigate('Payment');
+                            stopSound();
+                        }}
+                    />
+
+                </SafeAreaView>
+
+            </LinearGradient>
+        </ImageBackground>
+    );
+}
+
+const styles = StyleSheet.create({
+    bg: {
+        flex: 1,
+        backgroundColor: 'rgba(247,247,248,0.76)',
+    },
+    container: {
+        flex: 1,
+        alignItems: 'center',
+    },
+    brand: {
+        alignSelf: 'center',
+        fontWeight: '600',
+    },
+    ageNotice: {
+        textAlign: 'center',
+        marginBottom: 10,
+        marginHorizontal: 40,
+        color: '#8e5656',
+        fontSize: 10,
+    },
+    title: {
+        fontSize: 13,
+        fontWeight: '500',
+        color: '#4788dc',
+        textAlign: 'center',
+        marginBottom: 10,
+        alignSelf: 'center',
+    },
+    scroll: {
+        width: '100%',
+    },
+    scrollContent: {
+        paddingVertical: 20,
+        alignItems: 'center',
+        marginBottom: 30,
+    },
+    cardWrapper: {
+        marginVertical: 20,
+    },
+    gameImage: {
+        height: 80,
+        width: 150,
+        alignSelf: 'center',
+    },
+    gameImageLarge: {
+        height: 100,
+        width: 100,
+    },
+    gameTitle: {
+        fontFamily: 'Creepster_400Regular',
+        letterSpacing: 2,
+        fontSize: 15,
+        fontWeight: '800',
+        color: '#5a0217',
+        alignSelf: 'center',
+        marginTop: 5,
+    },
+    playNow: {
+        height: 15,
+        width: 150,
+        alignSelf: 'center',
+        borderRadius: 10,
+        marginVertical: 10,
+    },
+    howTo: {
+        fontSize: 10,
+        textAlign: 'center',
+        marginHorizontal: 35,
+        color: '#2b2727',
+    },
+});

package/src/components/games/GameSplash.tsx

@@ -0,0 +1,44 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, Image, StyleSheet, Text, View } from 'react-native';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { RootStackParamList } from '@/src/navigation/GameNavigator';
+
+type GameSplashProps = NativeStackScreenProps<RootStackParamList, 'GameSplash'>;
+
+export default function GameSplash({ navigation, route }: GameSplashProps) {
+  const { icon = '🎮', title = 'Game', backgroundColor = '#000', backgroundImage, navigateTo } = route.params;
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    if (!navigateTo) {
+      console.warn('GameSplash: navigateTo is undefined!');
+      return;
+    }
+
+    Animated.sequence([
+      Animated.timing(opacity, { toValue: 1, duration: 1000, useNativeDriver: true }),
+      Animated.delay(1000),
+      Animated.timing(opacity, { toValue: 0, duration: 1000, useNativeDriver: true }),
+    ]).start(() => {
+      navigation.replace(navigateTo); // Navigate to the target screen
+    });
+  }, [navigateTo]);
+
+  return (
+    <View style={ [styles.container, { backgroundColor }] }>
+      { backgroundImage && (
+        <Image source={ backgroundImage } style={ StyleSheet.absoluteFillObject } resizeMode="cover"/>
+      ) }
+      <Animated.View style={ { opacity, alignItems: 'center' } }>
+        <Text style={ styles.icon }>{ icon }</Text>
+        <Text style={ styles.title }>{ title }</Text>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, justifyContent: 'center', alignItems: 'center' },
+  icon: { fontSize: 50, marginBottom: 20 },
+  title: { fontSize: 25, fontWeight: 'bold', color: '#fff' },
+});

package/src/components/games/HangingSign.tsx

@@ -0,0 +1,75 @@
+import React, {useEffect} from 'react';
+import {Pressable, StyleSheet, Text, View} from 'react-native';
+import Animated, {Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming} from 'react-native-reanimated';
+import Chain from './Chain';
+
+type Props = {
+    title: string;
+    onPress: () => void;
+}
+
+export default function HangingSign({title, onPress}: Props) {
+
+  const rotate = useSharedValue(0);
+
+  useEffect(() => {
+    rotate.value = withRepeat(
+      withTiming(2, {
+        duration: 2000,
+        easing: Easing.inOut(Easing.ease)
+      }),
+      -1,
+      true
+    );
+  }, []);
+
+  const animatedBoard = useAnimatedStyle(() => ({
+    transform: [
+      {rotate: `${rotate.value}deg`}
+    ]
+  }))
+
+  return (
+    <Pressable style={styles.container} onPress={onPress}>
+
+      <View style={styles.chainRow}>
+        <Chain/>
+        <Chain/>
+      </View>
+
+      <Animated.View style={[styles.board, animatedBoard]}>
+        <Text style={styles.text}>{title}</Text>
+      </Animated.View>
+
+    </Pressable>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    // marginTop: 20,
+  },
+  chainRow: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    width: 160,
+    zIndex: 0
+  },
+  board: {
+    width: 210,
+    height: 30,
+    backgroundColor: '#8B5A2B',
+    borderRadius: 12,
+    justifyContent: 'center',
+    alignItems: 'center',
+    elevation: 6,
+    zIndex: 10
+  },
+  text: {
+    color: 'white',
+    fontSize: 17,
+    // fontWeight: "bold"
+    fontFamily: 'Creepster_400Regular'
+  }
+});

package/src/components/games/SplashScreen.tsx

@@ -0,0 +1,69 @@
+import React, { useEffect, useRef } from 'react';
+import { Animated, StyleSheet, Text, View } from 'react-native';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { RootStackParamList } from '@/src/navigation/GameNavigator';
+
+type Props = NativeStackScreenProps<RootStackParamList, 'Splash'>;
+
+export default function SplashScreen({ navigation }: Props) {
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  useEffect(() => {
+    Animated.sequence([
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 2000, // fade in 2 sec
+        useNativeDriver: true,
+      }),
+      Animated.delay(1000), // stay visible 10 sec
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: 2000, // fade out 2 sec
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      // navigation.replace('GameSelector'); // go to selector after splash
+      navigation.replace('Payment'); // go to selector after splash
+    });
+  }, []);
+
+  return (
+    <View style={ styles.container }>
+      <Animated.View style={ { opacity } }>
+        <View style={ styles.divContainer }>
+          <Text style={ styles.logo }>🎮 Floating Games</Text>
+          <Text style={ styles.disclaimer }>
+            <Text style={ { fontWeight:'bold',fontSize:13 } }>Disclaimer:</Text> { '\n' }This game is intended strictly for users aged 18 years and older.
+                        By accessing or playing, you confirm that you are of legal age in your jurisdiction.
+          </Text>
+        </View>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  divContainer: {
+    flex: 1,              // take full screen
+    justifyContent: 'center', // vertical center
+    alignItems: 'center',     // horizontal center
+  },
+  logo: {
+    fontSize: 25,
+    fontWeight: 'bold',
+    color: '#fff',
+    marginBottom: 20
+  },
+  disclaimer: {
+    fontSize: 11,
+    color: '#aaa',
+    marginHorizontal: 25,
+    textAlign: 'center'
+  }
+});

package/src/components/games/number-puzzle/DragTile.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import {Text} from 'react-native';
+import Animated, {useAnimatedStyle, SharedValue} from 'react-native-reanimated';
+import {Gesture, GestureDetector, Directions} from 'react-native-gesture-handler';
+
+interface Tile {
+    value: number;
+    row: number;
+    col: number;
+    x: SharedValue<number>;
+    y: SharedValue<number>;
+}
+
+interface Props {
+    tile: Tile;
+    size: number;
+    emptyTile: { row: number; col: number };
+    onMove: (row: number, col: number) => void;
+}
+
+export default function DragTile({
+                                     tile,
+                                     size,
+                                     emptyTile,
+                                     onMove,
+                                 }: Props) {
+
+    const swipe = Gesture.Fling()
+        .direction(
+            Directions.UP |
+            Directions.DOWN |
+            Directions.LEFT |
+            Directions.RIGHT
+        )
+        .onEnd(() => {
+            const dx = Math.abs(tile.row - emptyTile.row);
+            const dy = Math.abs(tile.col - emptyTile.col);
+            if (dx + dy === 1) {
+                onMove(tile.row, tile.col);
+            }
+        });
+
+    const style = useAnimatedStyle(() => ({
+        position: 'absolute',
+        width: size,
+        height: size,
+        top: tile.y.value,
+        left: tile.x.value,
+        justifyContent: 'center',
+        alignItems: 'center',
+        backgroundColor: '#3498db',
+        borderRadius: 12,
+        margin: 20
+    }));
+
+    return (
+        <GestureDetector gesture={swipe}>
+            <Animated.View style={style}>
+                <Text style={{color: '#fff', fontSize: 22, fontWeight: 'bold'}}>
+                    {tile.value}
+                </Text>
+            </Animated.View>
+        </GestureDetector>
+    );
+}