floating-games-sdk 1.0.0

package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "floating-games-sdk",
+  "version": "1.0.0",
+  "description": "A React Native gaming SDK with 3 built-in games",
+  "main": "src/index.tsx",
+  "types": "src/index.tsx",
+  "keywords": [
+    "react-native",
+    "games",
+    "sdk",
+    "expo",
+    "puzzle",
+    "spin-wheel"
+  ],
+  "author": "Olive Okechukwu <bmithzee@gmail.com>",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://gitlab.com/bmithzee/floating-games-sdk"
+  },
+  "files": [
+    "src"
+  ],
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "@types/react": "*",
+    "@types/react-native": "*",
+    "react": "*",
+    "react-native": "*",
+    "react-native-gesture-handler": "*",
+    "expo-status-bar": "*"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-native": "*",
+    "@react-navigation/native": "*",
+    "@react-navigation/native-stack": "*",
+    "expo-linear-gradient": "*",
+    "expo-status-bar": "*",
+    "react-native-gesture-handler": "*",
+    "react-native-safe-area-context": "*",
+    "@react-native-async-storage/async-storage": "*"
+  }
+}

package/src/FloatingGames.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import {
+    NavigationContainer,
+    NavigationIndependentTree,
+} from '@react-navigation/native';
+
+import { GameProvider } from './context/GameContext';
+import GameNavigator from './navigation/GameNavigator';
+
+type Props = {
+    name: string;
+    balance: number;
+};
+
+export default function FloatingGames({ name, balance }: Props) {
+    return (
+        <GameProvider name={name} balance={balance}>
+            <NavigationIndependentTree>
+                <NavigationContainer>
+                    <GameNavigator />
+                </NavigationContainer>
+            </NavigationIndependentTree>
+        </GameProvider>
+    );
+}

package/src/components/atoms/Amount.tsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { StyleSheet, Text, TextStyle, View } from 'react-native';
+import { UseAnimatedCounter } from './UseAnimatedCounter';
+ 
+type Props = {
+    value: number;
+    color?: string;
+    fontSize: number;
+    fontWeight?: TextStyle['fontWeight'];
+}
+
+export function Amount({
+  value,
+  color = '#fff',
+  fontSize = 25,
+  fontWeight = 'bold',
+}: Props) {
+  const animatedValue = UseAnimatedCounter(Number(value), 700);
+
+  const format = (num: number) =>
+    new Intl.NumberFormat().format(num);
+  const nairaFontSize = fontSize - 5
+
+  return (
+    <View style={ styles.container }>
+      <Text style={ [styles.currencyText, { color, fontWeight, fontSize: fontSize - 5 }] }>
+                ₦
+      </Text>
+
+      <Text style={ { color, fontSize, fontWeight } }>
+        { format(animatedValue) }
+      </Text>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    maxWidth: '100%',
+  },
+  currencyText: {
+    // fontSize: 15,
+    marginEnd: 2,
+    // fontWeight: 'bold',
+  },
+});

package/src/components/atoms/FloatingMenu.tsx

@@ -0,0 +1,119 @@
+import React, { useRef, useState } from 'react';
+import {
+  View,
+  TouchableOpacity,
+  Animated,
+  StyleSheet,
+  Pressable, BackHandler, Alert,
+} from 'react-native';
+import { Ionicons } from '@expo/vector-icons';
+
+export default function FloatingMenu({ isPlaying, soundCtrl, paymentCtrl, CloseCtrl }: any) {
+  const [open, setOpen] = useState(false);
+  const rotation = useRef(new Animated.Value(0)).current;
+  const opacity = useRef(new Animated.Value(0)).current;
+
+  const toggleMenu = () => {
+    const toValue = open ? 0 : 1;
+
+    Animated.parallel([
+      Animated.timing(rotation, {
+        toValue,
+        duration: 300,
+        useNativeDriver: true,
+      }),
+      Animated.timing(opacity, {
+        toValue,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+    ]).start();
+
+    setOpen(!open);
+  };
+
+  const handleExit = () => {
+    Alert.alert(
+      'Exit App',
+      'Are you sure you want to exit?',
+      [
+        { text: 'Cancel', style: 'cancel' },
+        { text: 'Yes', onPress: () => BackHandler.exitApp() },
+      ]
+    );
+  };
+
+  const rotateInterpolate = rotation.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '45deg'], // rotates into an "X"
+  });
+
+  return (
+    <View style={ StyleSheet.absoluteFill } pointerEvents="box-none">
+      { /* Overlay (click outside to close) */ }
+      { open && (
+        <Pressable style={ styles.overlay } onPress={ toggleMenu } />
+      ) }
+
+      { /* Menu items */ }
+      <Animated.View style={ [styles.menu, { opacity }] }>
+        <TouchableOpacity style={ styles.menuItem } onPress={ paymentCtrl }>
+          <Ionicons name="wallet" size={ 20 } color="#fff" />
+        </TouchableOpacity>
+
+        <TouchableOpacity style={ styles.menuItem } onPress={ soundCtrl }>
+          <Ionicons name={ isPlaying ? 'megaphone' : 'megaphone-outline' } size={ 20 } color="#fff" />
+        </TouchableOpacity>
+
+        <TouchableOpacity style={ styles.menuItem } onPress={ handleExit }>
+          <Ionicons name="log-out" size={ 20 } color="#fff" />
+        </TouchableOpacity>
+      </Animated.View>
+
+      { /* Floating Button */ }
+      <TouchableOpacity style={ styles.fab } onPress={ toggleMenu }>
+        <Animated.View style={ { transform: [{ rotate: rotateInterpolate }] } }>
+          <Ionicons name="add" size={ 28 } color="#fff" />
+        </Animated.View>
+      </TouchableOpacity>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  fab: {
+    position: 'absolute',
+    right: 20,
+    bottom: 40,
+    backgroundColor: '#343e57',
+    width: 50,
+    height: 50,
+    borderRadius: 30,
+    justifyContent: 'center',
+    alignItems: 'center',
+    elevation: 5,
+  },
+
+  menu: {
+    position: 'absolute',
+    right: 25,
+    bottom: 110,
+    alignItems: 'center',
+    gap: 12,
+  },
+
+  menuItem: {
+    backgroundColor: '#343e57',
+    width: 45,
+    height: 45,
+    borderRadius: 22,
+    justifyContent: 'center',
+    alignItems: 'center',
+    elevation: 4,
+  },
+
+  overlay: {
+    ...StyleSheet.absoluteFillObject,
+    backgroundColor: 'transparent',
+  },
+});

package/src/components/atoms/ShimmerHR.tsx

@@ -0,0 +1,64 @@
+import React, { useEffect } from 'react';
+import { View, StyleSheet, Dimensions } from 'react-native';
+import Animated, {
+  useSharedValue,
+  useAnimatedStyle,
+  withRepeat,
+  withTiming,
+  Easing,
+} from 'react-native-reanimated';
+
+const { width } = Dimensions.get('window');
+
+export default function ShimmerHR() {
+  const x = useSharedValue(-width);
+
+  useEffect(() => {
+    x.value = withRepeat(
+      withTiming(width, {
+        duration: 3000,
+        easing: Easing.linear,
+      }),
+      -1,
+      true
+    );
+  }, []);
+
+  const shimmerStyle = useAnimatedStyle(() => {
+    return {
+      transform: [{ translateX: x.value }],
+    };
+  });
+
+  return (
+    <View style={ styles.wrapper }>
+      <View style={ styles.line } />
+      <Animated.View style={ [styles.shimmer, shimmerStyle] } />
+      { /*<Animated.View style={ [styles.shimmer, shimmerStyle] } />*/ }
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  wrapper: {
+    height: 1,
+    width: '100%',
+    overflow: 'hidden',
+    backgroundColor: 'transparent',
+    position: 'relative',
+  },
+
+  line: {
+    position: 'absolute',
+    height: 1,
+    width: '100%',
+    backgroundColor: 'rgba(166,166,166,0.57)', // make sure it's visible
+  },
+
+  shimmer: {
+    position: 'absolute',
+    height: 1,
+    width: '50%',
+    backgroundColor: 'rgba(228,228,228,0.43)',
+  },
+});

package/src/components/atoms/UseAnimatedCounter.tsx

@@ -0,0 +1,31 @@
+import { useEffect, useRef, useState } from 'react';
+
+export function UseAnimatedCounter(value: number, duration = 600) {
+  const [displayValue, setDisplayValue] = useState(value);
+  const startValue = useRef(value);
+
+  useEffect(() => { 
+    const start = startValue.current;
+    const end = value;
+    const startTime = Date.now();
+
+    const animate = () => {
+      const now = Date.now();
+      const elapsed = now - startTime;
+      const progress = Math.min(elapsed / duration, 1);
+
+      const current = Math.round(start + (end - start) * progress);
+      setDisplayValue(current);
+
+      if (progress < 1) {
+        requestAnimationFrame(animate);
+      } else {
+        startValue.current = end;
+      }
+    };
+
+    requestAnimationFrame(animate);
+  }, [value, duration]);
+
+  return displayValue;
+}

package/src/components/games/Chain.tsx

@@ -0,0 +1,26 @@
+// components/Chain.tsx
+import React from 'react';
+import Svg, {Ellipse} from 'react-native-svg';
+import {View} from 'react-native';
+
+export default function Chain() {
+  const links = Array.from({length: 4});
+
+  return (
+    <View style={{zIndex: 0}}>
+      {links.map((_, i) => (
+        <Svg key={i} height={8} width={8}>
+          <Ellipse
+            cx="4"
+            cy="6"
+            rx="3"
+            ry="5"
+            stroke="#999"
+            strokeWidth="2"
+            fill="none"
+          />
+        </Svg>
+      ))}
+    </View>
+  );
+}

package/src/components/games/GameItem.tsx

@@ -0,0 +1,38 @@
+// components/games/GameItem.tsx
+import React, {useEffect} from 'react';
+import Animated, {Easing, useAnimatedStyle, useSharedValue, withRepeat, withTiming} from 'react-native-reanimated';
+import HangingSign from './HangingSign';
+
+type Props = {
+    title: string
+    onPress: () => void
+    delay?: number
+}
+
+export default function GameItem({title, onPress, delay = 0}: Props) {
+
+  const floatY = useSharedValue(0);
+
+  useEffect(() => {
+    setTimeout(() => {
+      floatY.value = withRepeat(
+        withTiming(-10, {
+          duration: 2500,
+          easing: Easing.inOut(Easing.ease)
+        }),
+        -1,
+        true
+      );
+    }, delay);
+  }, []);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    transform: [{translateY: floatY.value}]
+  }));
+
+  return (
+    <Animated.View style={[{marginBottom: 35}, animatedStyle]}>
+      <HangingSign title={title} onPress={onPress}/>
+    </Animated.View>
+  );
+}