floating-games-sdk 1.0.0

package/src/components/payment/FundAccount.tsx

@@ -0,0 +1,281 @@
+import React, { useState, useEffect } from 'react';
+import {
+  Platform,
+  ScrollView,
+  StyleSheet,
+  Text,
+  TextInput,
+  TouchableOpacity,
+  View,
+} from 'react-native';
+
+import Animated, {
+  FadeInDown,
+  useAnimatedStyle,
+  useSharedValue,
+  withSpring,
+  withTiming,
+} from 'react-native-reanimated';
+
+import { Amount } from '../atoms/Amount';
+
+const quickAmounts = [1000, 2000, 3000, 4000, 5000, 6000, 7000, 10000];
+
+export default function FundAccount({ navigation }: any) {
+  const [amount, setAmount] = useState('');
+
+  const balance = 1267;
+
+  const isMobileWeb =
+        Platform.OS === 'web' &&
+        !/Android|iPhone|iPad|iPod/i.test(navigator.userAgent);
+
+  // ✅ Reanimated shared values
+  const button1Width = useSharedValue(1); // 1 = 100%, 0.48 = 48%
+  const button2Opacity = useSharedValue(0);
+  const button2Scale = useSharedValue(0.8);
+
+  // ✅ Animate based on amount
+  useEffect(() => {
+    if (amount) {
+      button1Width.value = withTiming(0.48, { duration: 300 });
+      button2Opacity.value = withTiming(1, { duration: 250 });
+      button2Scale.value = withSpring(1);
+    } else {
+      button1Width.value = withTiming(1, { duration: 300 });
+      button2Opacity.value = withTiming(0, { duration: 200 });
+      button2Scale.value = withTiming(0.8);
+    }
+  }, [amount]);
+
+  // ✅ Animated styles
+  const button1Style = useAnimatedStyle(() => ({
+    width: `${button1Width.value * 100}%`,
+  }));
+
+  const button2Style = useAnimatedStyle(() => ({
+    opacity: button2Opacity.value,
+    transform: [{ scale: button2Scale.value }],
+  }));
+
+  const formatNumber = (value: string) => {
+    const cleaned = value.replace(/[^0-9]/g, '');
+    if (!cleaned) return '';
+    return Number(cleaned).toLocaleString();
+  };
+
+  const clearAmount = () => setAmount('');
+
+  const handlePressIn = () => {};
+  const handlePressOut = () => {
+    navigation.replace('GameSelector');
+  };
+
+  return (
+    <ScrollView
+      showsVerticalScrollIndicator={ false }
+      style={ [
+        styles.container,
+        { paddingHorizontal: isMobileWeb ? 200 : 20 },
+      ] }
+    >
+      { /* Title */ }
+      <Animated.Text entering={ FadeInDown.delay(100) } style={ styles.title }>
+                Fund Account
+      </Animated.Text>
+
+      { /* Balance */ }
+      <Animated.View entering={ FadeInDown.delay(200) } style={ styles.balanceCard }>
+        <Text style={ styles.balanceLabel }>Current Balance</Text>
+        <Amount value={ balance } fontSize={ 28 } color="#fff" fontWeight="bold" />
+      </Animated.View>
+
+      { /* Input */ }
+      <Animated.Text entering={ FadeInDown.delay(300) } style={ styles.label }>
+                Enter Amount
+      </Animated.Text>
+
+      <Animated.View entering={ FadeInDown.delay(350) }>
+        <View style={ { position: 'relative' } }>
+          <TextInput
+            style={ styles.input }
+            placeholder={ '0' }
+            placeholderTextColor={ '#666' }
+            keyboardType="number-pad"
+            value={ amount ? `₦${formatNumber(amount)}` : '' }
+            maxLength={ 10 }
+            onChangeText={ (text) => {
+              const cleaned = text.replace(/[^0-9]/g, '');
+              setAmount(cleaned);
+            } }
+          />
+
+          { amount ? (
+            <Text onPress={ clearAmount } style={ styles.clear }>
+                            ❌
+            </Text>
+          ) : null }
+        </View>
+      </Animated.View>
+
+      { /* Quick amounts */ }
+      <Animated.View
+        entering={ FadeInDown.delay(400) }
+        style={ styles.quickContainer }
+      >
+        { quickAmounts.map((amt) => (
+          <TouchableOpacity
+            key={ amt }
+            style={ [ 
+              styles.quickBtn,
+              amount === String(amt) && styles.activeQuick,
+            ] }
+            onPress={ () => setAmount(String(amt)) }
+          >
+            <Amount value={ amt } fontSize={ 15 } color="#fff" fontWeight="400" />
+          </TouchableOpacity>
+        )) }
+      </Animated.View>
+
+      { /* Payment */ }
+      <Animated.Text entering={ FadeInDown.delay(500) } style={ styles.label }>
+                Payment Method
+      </Animated.Text>
+
+      <Animated.View entering={ FadeInDown.delay(550) } style={ styles.paymentCard }>
+        <Text style={ styles.paymentText }>💳 NetApps Pay</Text>
+      </Animated.View>
+
+      { /* Buttons */ }
+      <Animated.View entering={ FadeInDown.delay(600) }>
+        <View style={ [styles.buttonDiv, { marginTop: 20 }] }>
+          { /* Button 1 */ }
+          <Animated.View style={ button1Style }>
+            <TouchableOpacity
+              style={ [styles.button, styles.button1] }
+              onPressIn={ handlePressIn }
+              onPressOut={ handlePressOut }
+            >
+              <Text style={ styles.buttonText }>Continue to Game</Text>
+            </TouchableOpacity>
+          </Animated.View>
+
+          { /* Button 2 */ }
+          { amount ? (
+            <Animated.View
+              style={ [
+                styles.payWrapper,
+                button2Style,
+              ] }
+            >
+              <TouchableOpacity style={ [styles.button, styles.button2, { flexDirection:'row' }] }>
+                <Text style={ [styles.buttonText, { marginEnd: 4 }] }>Pay</Text>
+                <Amount
+                  value={ Number(amount) }
+                  fontSize={ 15 }
+                  color="#fff"
+                  fontWeight="normal"
+                />
+              </TouchableOpacity>
+            </Animated.View>
+          ) : null }
+        </View>
+      </Animated.View>
+
+    </ScrollView>
+  );
+}
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    padding: 20,
+    backgroundColor: '#0f172a',
+    paddingVertical: 60,
+  },
+  title: {
+    fontSize: 26,
+    fontWeight: 'bold',
+    color: '#fff',
+    marginBottom: 20,
+  },
+  balanceCard: {
+    backgroundColor: '#1e293b',
+    padding: 20,
+    borderRadius: 6,
+    marginBottom: 25,
+  },
+  balanceLabel: {
+    color: '#94a3b8',
+    fontSize: 14,
+  },
+  label: {
+    color: '#cbd5f5',
+    marginBottom: 8,
+    fontSize: 14,
+  },
+  input: {
+    backgroundColor: '#1e293b',
+    padding: 15,
+    borderRadius: 6,
+    color: '#fff',
+    fontSize: 18,
+    marginBottom: 15,
+  },
+  clear: {
+    position: 'absolute',
+    right: 10,
+    top: 10,
+    padding: 8,
+  },
+  quickContainer: {
+    flexDirection: 'row',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    marginBottom: 20
+  },
+  quickBtn: {
+    backgroundColor: '#334155',
+    paddingVertical: 10,
+    paddingHorizontal: 15,
+    borderRadius: 6,
+    marginVertical: 8,
+    fontWeight: '500'
+  },
+  activeQuick: {
+    backgroundColor: '#22c55e',
+  },
+  paymentCard: {
+    backgroundColor: '#1e293b',
+    padding: 15,
+    borderRadius: 6,
+    marginBottom: 30,
+  },
+  paymentText: {
+    color: '#fff',
+    fontSize: 16,
+  },
+  buttonDiv: {
+    flexDirection: 'row',
+    justifyContent: 'space-between',
+    alignItems: 'center',
+  },
+  button: {
+    padding: 16,
+    borderRadius: 6,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  button1: {
+    backgroundColor: '#4c68af',
+  },
+  button2: {
+    backgroundColor: '#22c55e',
+  },
+  payWrapper: {
+    width: '48%',
+  },
+  buttonText: {
+    color: '#fff',
+    fontSize: 15,
+  },
+});

package/src/components/payment/Payment.tsx

@@ -0,0 +1,45 @@
+// import type { PaymentConfig } from '@netappsng/react-native-pay';
+// import { presentPayment } from '@netappsng/react-native-pay';
+//
+// function Payment() {
+//   const amountNaira = 100;
+//   const amountKobo = Math.round(amountNaira * 100);
+//
+//   const config: PaymentConfig = {
+//     publicKey: 'pk_live_xxxxxxxxxxxxxxxxxxxx',
+//     amount: amountKobo, // ₦100.00 = 10000 kobo
+//     currency: 'NGN',
+//     email: 'john@example.com',
+//     fullName: 'John Doe',
+//     phoneNumber: '08106720418',
+//     narration: 'Dev Test Payment',
+//     paymentChannels: ['card', 'transfer', 'ussd', 'payattitude', 'moniflow'],
+//     defaultChannel: 'card',
+//     address1: 'Customer Address',
+//     metadata: { inputAmount: amountNaira, env: 'development' },
+//     businessName: 'Demo Store',
+//     showTransactionSummary: true,
+//   };
+//
+//   const cleanup = presentPayment(config, {
+//     onSuccess: (payload) => {
+//       console.log('Payment successful!', payload.transactionRef);
+//       // payload: { status, merchantRef, transactionRef, amount, currency, channel, message, timestamp }
+//     },
+//     onFailed: (payload) => {
+//       console.log('Payment failed:', payload.message);
+//       // payload: { status, amount, currency, message, timestamp, errorCode? }
+//     },
+//     onCancel: () => {
+//       console.log('Payment cancelled');
+//     },
+//     onReady: () => {
+//       console.log('Payment UI ready');
+//     },
+//   });
+//
+//   // Call cleanup() to remove event listeners when unmounting
+//   // e.g. in useEffect: return cleanup;
+// }
+//
+// export default Payment

package/src/components/reusables/AppSelect.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import DropDownPicker from 'react-native-dropdown-picker';
+
+export type Option = {
+    label: string;
+    value: string | number;
+};
+
+type Props = {
+    open: boolean;
+    value: string | number | null;
+    items: Option[];
+    setOpen: React.Dispatch<React.SetStateAction<boolean>>;
+    setValue: React.Dispatch<React.SetStateAction<any>>;
+    setItems?: React.Dispatch<React.SetStateAction<Option[]>>;
+    placeholder?: string;
+    fontSize?: number;
+};
+
+const AppSelect = ({
+  open,
+  value,
+  items,
+  setOpen,
+  setValue,
+  setItems,
+  placeholder = 'Select option',
+  fontSize = 16,
+}: Props) => {
+  return (
+    <DropDownPicker
+      open={open}
+      value={value}
+      items={items}
+      setOpen={setOpen}
+      setValue={setValue}
+      setItems={setItems}
+      placeholder={placeholder}
+      style={{
+        borderRadius: 25,
+        minHeight: 38,
+        width: '100%',
+        borderColor: '#72aaf1',
+        borderWidth: 3,
+        // borderWidth: 0,
+        backgroundColor: 'transparent'
+      }}
+      textStyle={{
+        fontSize,
+        fontWeight: '500',
+        textAlign: 'center',
+        color: '#666'
+      }}
+      listItemLabelStyle={{
+        fontSize,
+        textAlign: 'left',
+        fontWeight: '500',
+        color: '#666'
+      }}
+      dropDownContainerStyle={{
+        borderRadius: 8,
+        width: '100%',
+        borderWidth: 0,
+        marginBottom: 1,
+      }}
+    />
+  );
+};
+
+export default AppSelect;

package/src/components/reusables/CountdownTimer.tsx

@@ -0,0 +1,116 @@
+import React, {
+    useEffect,
+    useState,
+    useImperativeHandle,
+    forwardRef,
+} from 'react';
+import {View, Text, StyleSheet, Vibration, Platform} from 'react-native';
+import * as Haptics from 'expo-haptics';
+
+type CountdownTimerProps = {
+    initialSeconds: number;
+    onComplete: () => void;
+    color?: string;
+    warningThreshold?: number;
+};
+
+export type CountdownTimerRef = {
+    reset: () => void;
+    pause: () => void;
+    resume: () => void;
+};
+
+const CountdownTimer = forwardRef<CountdownTimerRef, CountdownTimerProps>(
+    (
+        {initialSeconds, onComplete, color = '#333', warningThreshold = 10},
+        ref
+    ) => {
+        const [seconds, setSeconds] = useState(initialSeconds);
+        const [show, setShow] = useState(true);
+        const [paused, setPaused] = useState(false); // ✅ NEW
+
+        // ✅ Expose ALL methods
+        useImperativeHandle(ref, () => ({
+            reset: () => {
+                setSeconds(initialSeconds);
+                setPaused(false);
+            },
+            pause: () => setPaused(true),
+            resume: () => setPaused(false),
+        }));
+
+        // ✅ Countdown effect
+        useEffect(() => {
+            if (paused) return; // 🚀 stop if paused
+
+            if (seconds <= 0) {
+                onComplete();
+                return;
+            }
+
+            const interval = setInterval(() => {
+                setSeconds(prev => prev - 1);
+            }, 1000);
+
+            return () => clearInterval(interval);
+        }, [seconds, paused]);
+
+        // ✅ Blinking
+        useEffect(() => {
+            if (seconds <= warningThreshold && seconds > 0 && !paused) {
+                const blinkInterval = setInterval(() => {
+                    setShow(prev => !prev);
+                }, 500);
+
+                return () => clearInterval(blinkInterval);
+            } else {
+                setShow(true);
+            }
+        }, [seconds, paused]);
+
+        // ✅ Move vibration into effect (important fix)
+        useEffect(() => {
+            const vibrateSoft = async () => {
+                if (Platform.OS === 'ios') {
+                    await Haptics.impactAsync(
+                        Haptics.ImpactFeedbackStyle.Light
+                    );
+                } else {
+                    Vibration.vibrate(30);
+                }
+            };
+
+            if (seconds <= warningThreshold && seconds > 0 && !paused) {
+                vibrateSoft();
+            }
+        }, [seconds, paused]);
+
+        const formatTime = (secs: number) => {
+            const minutes = Math.floor(secs / 60);
+            const remainderSeconds = secs % 60;
+            return `${minutes < 10 ? '0' : ''}${minutes}:${
+                remainderSeconds < 10 ? '0' : ''
+            }${remainderSeconds}`;
+        };
+
+        const textColor =
+            seconds <= warningThreshold ? '#f67373' : color;
+
+        return (
+            <View style={styles.container}>
+                {show && (
+                    <Text style={[styles.text, {color: textColor}]}>
+                        {formatTime(seconds)}
+                    </Text>
+                )}
+            </View>
+        );
+    }
+);
+
+export default CountdownTimer;
+
+const styles = StyleSheet.create({
+    container: {justifyContent: 'center', alignItems: 'center'},
+    text: {fontSize: 30, fontWeight: 'bold'},
+});

package/src/components/reusables/FloatingButton.tsx

@@ -0,0 +1,71 @@
+import React, {useEffect} from 'react';
+import Animated, {Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming,} from 'react-native-reanimated';
+
+export type FloatPreset = 'left' | 'right' | 'center' | 'normal';
+
+type Props = {
+    children: React.ReactNode;
+    preset?: FloatPreset;
+};
+
+export default function FloatingButton({children, preset = 'center'}: Props) {
+  const translateY = useSharedValue(0);
+  const translateX = useSharedValue(0);
+  const rotate = useSharedValue(0);
+
+  useEffect(() => {
+    let x = 0;
+    let r = 0;
+
+    if (preset === 'left') {
+      x = -8;
+      r = 1;
+    } else if (preset === 'right') {
+      x = 18;
+      r = 1;
+    } else if (preset === 'normal') {
+      x = 11;
+      r = 0;
+    } else {
+      x = 34;
+      r = 1.5;
+    }
+
+    translateY.value = withRepeat(
+      withTiming(-12, {
+        duration: 2300 + Math.random() * 600,
+        easing: Easing.inOut(Easing.ease),
+      }),
+      -1,
+      true
+    );
+
+    translateX.value = withRepeat(
+      withTiming(x, {
+        duration: 1700 + Math.random() * 500,
+        easing: Easing.inOut(Easing.ease),
+      }),
+      -1,
+      true
+    );
+
+    rotate.value = withRepeat(
+      withTiming(r, {
+        duration: 1500 + Math.random() * 500,
+        easing: Easing.inOut(Easing.ease),
+      }),
+      -1,
+      true
+    );
+  }, [preset]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [
+      {translateY: translateY.value},
+      {translateX: translateX.value},
+      {rotate: `${rotate.value}deg`},
+    ],
+  }));
+
+  return <Animated.View style={animatedStyle}>{children}</Animated.View>;
+}

package/src/components/reusables/SoundPlayer.ts

@@ -0,0 +1,28 @@
+import { useAudioPlayer } from 'expo-audio';
+
+/**
+ * Reusable hook to play a sound
+ * @param asset - require('../assets/sounds/file.wav') or mp3
+ * @param initialVolume - number between 0.0 and 1.0
+ */
+export function useSoundPlayer(asset: any, initialVolume: number = 0.1) {
+  const player = useAudioPlayer(asset);
+
+  // Set volume (clamp between 0 and 1)
+  player.volume = Math.max(0, Math.min(1, initialVolume));
+
+  const playSound = () => {
+    player.seekTo(0);
+    player.play();
+  };
+
+  const stopSound = () => {
+    player.pause();
+  };
+
+  const setVolume = (volume: number) => {
+    player.volume = Math.max(0, Math.min(1, volume));
+  };
+
+  return { playSound, stopSound, setVolume };
+}

package/src/components/utils/shuffle.ts

@@ -0,0 +1,48 @@
+// utils/shuffle.ts
+export type TileType = "😀" | "🔥" | "⭐";
+export type TileData = {
+    id: number;
+    type: TileType;
+    opened: boolean;
+};
+
+const EMOJIS: TileType[] = ["😀","🔥","⭐"];
+
+export const createBoard = (): TileData[] => {
+
+    const tiles: TileType[] = [];
+    let remaining = 16;
+    const counts: Record<TileType, number> = {"😀":0,"🔥":0,"⭐":0};
+
+    // Distribute emojis to fill 16 tiles, each emoji 2-6 times but total = 16
+    // Make sure at least 2 of each
+    let emojiCounts: Record<TileType, number> = {"😀":0,"🔥":0,"⭐":0};
+
+    // Step 1: assign minimum 2 to each
+    EMOJIS.forEach(emoji=>{
+        emojiCounts[emoji] = 2;
+        remaining -= 2;
+    });
+
+    // Step 2: randomly distribute remaining 10 tiles
+    const allEmojis: TileType[] = [];
+    EMOJIS.forEach(e=>{ for(let i=0;i<emojiCounts[e];i++) allEmojis.push(e) });
+
+    while(remaining>0){
+        const randIndex = Math.floor(Math.random()*EMOJIS.length);
+        const emoji = EMOJIS[randIndex];
+        allEmojis.push(emoji);
+        emojiCounts[emoji] +=1;
+        remaining -=1;
+    }
+
+    // shuffle
+    const shuffled = allEmojis.sort(()=> Math.random() - 0.5);
+
+    return shuffled.map((type,index)=>({
+        id:index,
+        type,
+        opened:false
+    }));
+
+};

package/src/context/GameContext.tsx

@@ -0,0 +1,15 @@
+import React, { createContext, useContext } from 'react';
+
+type GameContextType = { name: string; balance: number };
+
+const GameContext = createContext<GameContextType>({ name: '', balance: 0 });
+
+export const GameProvider = ({
+                                 name, balance, children
+                             }: GameContextType & { children: React.ReactNode }) => (
+    <GameContext.Provider value={{ name, balance }}>
+        {children}
+    </GameContext.Provider>
+);
+
+export const useGameContext = () => useContext(GameContext);

package/src/index.tsx

@@ -0,0 +1,5 @@
+export { default as FloatingGames } from './FloatingGames';
+export { useGameContext } from './context/GameContext';
+
+
+//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