floating-games-sdk 1.0.0

package/src/components/games/spin-wheel/SpinAndWin.tsx

@@ -0,0 +1,507 @@
+import React, { useState, useRef, useEffect } from "react";
+import {
+  View,
+  Text,
+  TouchableOpacity,
+  StyleSheet,
+  Animated,
+  Easing,
+  ScrollView,
+  Dimensions,
+} from "react-native";
+import Svg, { G, Path, Text as SvgText, Circle } from "react-native-svg";
+
+const { width: SCREEN_WIDTH } = Dimensions.get("window");
+const WHEEL_SIZE = Math.min(SCREEN_WIDTH - 48, 320);
+const RADIUS = WHEEL_SIZE / 2 - 4;
+const CX = WHEEL_SIZE / 2;
+const CY = WHEEL_SIZE / 2;
+
+interface Segment {
+  label: string;
+  color: string;
+  textColor: string;
+}
+
+interface HistoryItem {
+  label: string;
+  color: string;
+  pts: number;
+}
+
+const SEGMENTS: Segment[] = [
+  { label: "🎁 50 pts", color: "#FF6B6B", textColor: "#fff" },
+  { label: "💀 Lose", color: "#2C2C3E", textColor: "#aaa" },
+  { label: "⭐ 200 pts", color: "#FFD93D", textColor: "#1a1a2e" },
+  { label: "🔄 Retry", color: "#6BCB77", textColor: "#fff" },
+  { label: "💎 500 pts", color: "#4D96FF", textColor: "#fff" },
+  { label: "💀 Lose", color: "#2C2C3E", textColor: "#aaa" },
+  { label: "🎯 100 pts", color: "#C77DFF", textColor: "#fff" },
+  { label: "🍀 Jackpot", color: "#FF9F1C", textColor: "#fff" },
+];
+
+const NUM_SEGMENTS = SEGMENTS.length;
+const ANGLE_PER_SEGMENT = 360 / NUM_SEGMENTS;
+
+function getPointValue(label: string): number {
+  if (label.includes("500")) return 500;
+  if (label.includes("200")) return 200;
+  if (label.includes("100")) return 100;
+  if (label.includes("50")) return 50;
+  if (label.includes("Jackpot")) return 1000;
+  if (label.includes("Lose")) return -999;
+  if (label.includes("Retry")) return -998;
+  return 0;
+}
+
+function polarToCartesian(
+  cx: number,
+  cy: number,
+  r: number,
+  angleDeg: number
+): { x: number; y: number } {
+  const angleRad = (angleDeg * Math.PI) / 180;
+  return {
+    x: cx + r * Math.cos(angleRad),
+    y: cy + r * Math.sin(angleRad),
+  };
+}
+
+function buildSegmentPath(
+  index: number,
+  cx: number,
+  cy: number,
+  radius: number
+): string {
+  const startAngle = index * ANGLE_PER_SEGMENT;
+  const endAngle = (index + 1) * ANGLE_PER_SEGMENT;
+  const start = polarToCartesian(cx, cy, radius, startAngle);
+  const end = polarToCartesian(cx, cy, radius, endAngle);
+  const largeArc = ANGLE_PER_SEGMENT > 180 ? 1 : 0;
+  return `M ${cx} ${cy} L ${start.x} ${start.y} A ${radius} ${radius} 0 ${largeArc} 1 ${end.x} ${end.y} Z`;
+}
+
+function getLabelPosition(
+  index: number,
+  cx: number,
+  cy: number,
+  radius: number
+): { x: number; y: number; rotation: number } {
+  const midAngle = index * ANGLE_PER_SEGMENT + ANGLE_PER_SEGMENT / 2;
+  const labelRadius = radius * 0.65;
+  const pos = polarToCartesian(cx, cy, labelRadius, midAngle);
+  return { x: pos.x, y: pos.y, rotation: midAngle };
+}
+
+const WheelSvg: React.FC = () => (
+  <Svg width={WHEEL_SIZE} height={WHEEL_SIZE}>
+    {SEGMENTS.map((seg, i) => {
+      const path = buildSegmentPath(i, CX, CY, RADIUS);
+      const { x, y, rotation } = getLabelPosition(i, CX, CY, RADIUS);
+      return (
+        <G key={i}>
+          <Path
+            d={path}
+            fill={seg.color}
+            stroke="#1a1a2e"
+            strokeWidth={2}
+          />
+          <SvgText
+            x={x}
+            y={y}
+            fill={seg.textColor}
+            fontSize={11}
+            fontWeight="bold"
+            textAnchor="middle"
+            alignmentBaseline="middle"
+            rotation={rotation}
+            origin={`${x}, ${y}`}
+          >
+            {seg.label}
+          </SvgText>
+        </G>
+      );
+    })}
+    {/* Center circle */}
+    <Circle cx={CX} cy={CY} r={22} fill="#1a1a2e" stroke="#FFD93D" strokeWidth={3} />
+    <Circle cx={CX} cy={CY} r={8} fill="#FFD93D" />
+  </Svg>
+);
+
+export default function SpinAndWin(): React.JSX.Element {
+  const [spinning, setSpinning] = useState<boolean>(false);
+  const [result, setResult] = useState<Segment | null>(null);
+  const [score, setScore] = useState<number>(0);
+  const [spins, setSpins] = useState<number>(0);
+  const [showResult, setShowResult] = useState<boolean>(false);
+  const [history, setHistory] = useState<HistoryItem[]>([]);
+
+  const spinAnim = useRef(new Animated.Value(0)).current;
+  const currentRotation = useRef<number>(0);
+  const resultAnim = useRef(new Animated.Value(0)).current;
+
+  const spin = (): void => {
+    if (spinning) return;
+    setSpinning(true);
+    setShowResult(false);
+    setResult(null);
+
+    const extraSpins = 5 + Math.floor(Math.random() * 5);
+    const randomAngle = Math.floor(Math.random() * 360);
+    const totalRotation = extraSpins * 360 + randomAngle;
+    const newRotation = currentRotation.current + totalRotation;
+
+    spinAnim.setValue(currentRotation.current);
+    currentRotation.current = newRotation;
+
+    Animated.timing(spinAnim, {
+      toValue: newRotation,
+      duration: 4000,
+      easing: Easing.out(Easing.cubic),
+      useNativeDriver: true,
+    }).start(() => {
+      const normalized = newRotation % 360;
+      const pointerAngle = (360 - normalized + 270) % 360;
+      const segmentIndex =
+        Math.floor(pointerAngle / ANGLE_PER_SEGMENT) % NUM_SEGMENTS;
+      const segment = SEGMENTS[segmentIndex];
+      const pts = getPointValue(segment.label);
+
+      setResult(segment);
+      setSpinning(false);
+      setSpins((s) => s + 1);
+      setShowResult(true);
+
+      resultAnim.setValue(0);
+      Animated.spring(resultAnim, {
+        toValue: 1,
+        friction: 5,
+        tension: 200,
+        useNativeDriver: true,
+      }).start();
+
+      if (pts >= 0) {
+        setScore((prev) => prev + pts);
+      }
+
+      setHistory((prev) => [
+        { label: segment.label, color: segment.color, pts },
+        ...prev.slice(0, 4),
+      ]);
+    });
+  };
+
+  const reset = (): void => {
+    setScore(0);
+    setSpins(0);
+    setHistory([]);
+    setResult(null);
+    setShowResult(false);
+    spinAnim.setValue(0);
+    currentRotation.current = 0;
+  };
+
+  const rotate = spinAnim.interpolate({
+    inputRange: [0, 360],
+    outputRange: ["0deg", "360deg"],
+  });
+
+  const resultScale = resultAnim.interpolate({
+    inputRange: [0, 1],
+    outputRange: [0.6, 1],
+  });
+
+  const bestScore =
+    history.length > 0
+      ? Math.max(...history.filter((h) => h.pts >= 0).map((h) => h.pts), 0)
+      : 0;
+
+  return (
+    <ScrollView
+      style={styles.root}
+      contentContainerStyle={styles.scrollContent}
+      showsVerticalScrollIndicator={false}
+    >
+      {/* Header */}
+      <View style={styles.header}>
+        <View style={styles.titleRow}>
+          {/*<Text style={styles.titleIcon}>🎰</Text>*/}
+          <Text style={styles.title}>SPIN & WIN</Text>
+          {/*<Text style={styles.titleIcon}>🎰</Text>*/}
+        </View>
+        <Text style={styles.subtitle}>Your luck is just one spin away</Text>
+      </View>
+
+      {/* Score Bar */}
+      <View style={styles.scoreBar}>
+        <View style={styles.scoreItem}>
+          <Text style={styles.scoreLabel}>SCORE</Text>
+          <Text style={styles.scoreValue}>{score.toLocaleString()}</Text>
+        </View>
+        <View style={styles.scoreDivider} />
+        <View style={styles.scoreItem}>
+          <Text style={styles.scoreLabel}>SPINS</Text>
+          <Text style={styles.scoreValue}>{spins}</Text>
+        </View>
+        <View style={styles.scoreDivider} />
+        <View style={styles.scoreItem}>
+          <Text style={styles.scoreLabel}>BEST</Text>
+          <Text style={styles.scoreValue}>{bestScore}</Text>
+        </View>
+      </View>
+
+      {/* Wheel Area */}
+      <View style={styles.wheelArea}>
+        <Text style={styles.pointer}>▼</Text>
+        <View style={styles.wheelGlow}>
+          <Animated.View style={{ transform: [{ rotate }] }}>
+            <WheelSvg />
+          </Animated.View>
+        </View>
+      </View>
+
+      {/* Result Banner */}
+      {showResult && result && (
+        <Animated.View
+          style={[
+            styles.resultBanner,
+            { backgroundColor: result.color },
+            { transform: [{ scale: resultScale }] },
+          ]}
+        >
+          <Text style={[styles.resultText, { color: result.textColor }]}>
+            {result.label}
+          </Text>
+          {getPointValue(result.label) >= 0 && (
+            <Text style={[styles.resultSub, { color: result.textColor }]}>
+              {getPointValue(result.label) === 1000
+                ? "🎉 JACKPOT!"
+                : `+${getPointValue(result.label)} points`}
+            </Text>
+          )}
+          {getPointValue(result.label) === -999 && (
+            <Text style={[styles.resultSub, { color: result.textColor }]}>
+              Better luck next time!
+            </Text>
+          )}
+          {getPointValue(result.label) === -998 && (
+            <Text style={[styles.resultSub, { color: result.textColor }]}>
+              Spin again for free!
+            </Text>
+          )}
+        </Animated.View>
+      )}
+
+      {/* Spin Button */}
+      <TouchableOpacity
+        onPress={spin}
+        disabled={spinning}
+        activeOpacity={0.8}
+        style={[styles.spinBtn, spinning && styles.spinBtnDisabled]}
+      >
+        <Text style={styles.spinBtnText}>
+          {spinning ? "⏳ Spinning..." : "🎯 SPIN!"}
+        </Text>
+      </TouchableOpacity>
+
+      {/* History */}
+      {history.length > 0 && (
+        <View style={styles.historySection}>
+          <Text style={styles.historyTitle}>Recent Spins</Text>
+          <View style={styles.historyList}>
+            {history.map((h, i) => (
+              <View
+                key={i}
+                style={[
+                  styles.historyChip,
+                  { backgroundColor: h.color, opacity: 1 - i * 0.15 },
+                ]}
+              >
+                <Text style={styles.historyChipText}>{h.label}</Text>
+              </View>
+            ))}
+          </View>
+        </View>
+      )}
+
+      {/* Reset */}
+      {spins > 0 && (
+        <TouchableOpacity onPress={reset} style={styles.resetBtn} activeOpacity={0.7}>
+          <Text style={styles.resetBtnText}>↺ Reset Game</Text>
+        </TouchableOpacity>
+      )}
+    </ScrollView>
+  );
+}
+
+const styles = StyleSheet.create({
+  root: {
+    flex: 1,
+    // backgroundColor: "#0d0d1a",
+    backgroundColor: "#3b5e59",
+  },
+  scrollContent: {
+    alignItems: "center",
+    paddingVertical: 40,
+    paddingHorizontal: 16,
+    gap: 20,
+  },
+  header: {
+    alignItems: "center",
+  },
+  titleRow: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 12,
+  },
+  titleIcon: {
+    fontSize: 28,
+  },
+  title: {
+    fontSize: 22,
+    fontWeight: "900",
+    color: "#FFD93D",
+    letterSpacing: 4,
+  },
+  subtitle: {
+    color: "#aaa",
+    marginTop: 4,
+    fontSize: 13,
+    letterSpacing: 1,
+  },
+  scoreBar: {
+    backgroundColor: "#1d4540",
+    borderWidth: 1,
+    borderColor: "#2a2a45",
+    borderRadius: 16,
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: 12,
+    paddingHorizontal: 28,
+    gap: 24,
+    width: "100%",
+  },
+  scoreItem: {
+    flex: 1,
+    alignItems: "center",
+  },
+  scoreLabel: {
+    fontSize: 10,
+    color: "#aaa",
+    letterSpacing: 2,
+    fontWeight: "700",
+  },
+  scoreValue: {
+    fontSize: 22,
+    fontWeight: "800",
+    color: "#FFD93D",
+    marginTop: 2,
+  },
+  scoreDivider: {
+    width: 1,
+    height: 36,
+    backgroundColor: "#2a2a45",
+  },
+  wheelArea: {
+    alignItems: "center",
+    justifyContent: "center",
+    marginTop: 8,
+  },
+  pointer: {
+    fontSize: 28,
+    color: "#FFD93D",
+    marginBottom: -4,
+    zIndex: 10,
+    textShadowColor: "#FFD93D88",
+    textShadowOffset: { width: 0, height: 2 },
+    textShadowRadius: 8,
+  },
+  wheelGlow: {
+    borderRadius: WHEEL_SIZE / 2 + 6,
+    padding: 6,
+    backgroundColor: "transparent",
+    shadowColor: "#FFD93D",
+    shadowOffset: { width: 0, height: 0 },
+    shadowOpacity: 0.5,
+    shadowRadius: 20,
+    elevation: 10,
+    borderWidth: 2,
+    borderColor: "#FFD93D44",
+  },
+  resultBanner: {
+    borderRadius: 14,
+    paddingVertical: 14,
+    paddingHorizontal: 28,
+    alignItems: "center",
+    width: "100%",
+  },
+  resultText: {
+    fontSize: 22,
+    fontWeight: "800",
+    letterSpacing: 1,
+  },
+  resultSub: {
+    fontSize: 13,
+    marginTop: 4,
+    opacity: 0.85,
+  },
+  spinBtn: {
+    backgroundColor: "#FFD93D",
+    borderRadius: 50,
+    paddingVertical: 16,
+    paddingHorizontal: 60,
+    shadowColor: "#FFD93D",
+    shadowOffset: { width: 0, height: 4 },
+    shadowOpacity: 0.5,
+    shadowRadius: 12,
+    elevation: 8,
+  },
+  spinBtnDisabled: {
+    opacity: 0.6,
+  },
+  spinBtnText: {
+    fontSize: 15,
+    fontWeight: "900",
+    color: "#1a1a2e",
+    letterSpacing: 2,
+  },
+  historySection: {
+    width: "100%",
+    alignItems: "center",
+  },
+  historyTitle: {
+    color: "#555",
+    fontSize: 11,
+    letterSpacing: 2,
+    textTransform: "uppercase",
+    marginBottom: 8,
+  },
+  historyList: {
+    flexDirection: "row",
+    gap: 8,
+    justifyContent: "center",
+    flexWrap: "wrap",
+  },
+  historyChip: {
+    borderRadius: 20,
+    paddingVertical: 5,
+    paddingHorizontal: 14,
+  },
+  historyChipText: {
+    fontSize: 12,
+    fontWeight: "700",
+    color: "#fff",
+  },
+  resetBtn: {
+    backgroundColor: "transparent",
+    borderWidth: 1,
+    borderColor: "#2a2a45",
+    borderRadius: 8,
+    paddingVertical: 8,
+    paddingHorizontal: 20,
+  },
+  resetBtnText: {
+    color: "#eee",
+    fontSize: 13,
+  },
+});

package/src/components/payment/CheckoutScreen.tsx

@@ -0,0 +1,50 @@
+// import React from 'react';
+// import { Button } from 'react-native';
+// import { presentPayment } from '@netappsng/react-native-pay';
+// import type { PaymentConfig } from '@netappsng/react-native-pay';
+//
+// type Props = {
+//     amount: number;
+// };
+//
+// export function CheckoutScreen({ amount }: Props) {
+//     function handlePayment() {
+//         const amountNaira = amount;
+//         const amountKobo = Math.round(amountNaira * 100);
+//
+//         const config: PaymentConfig = {
+//             publicKey: 'pk_live_880c15c51cbc19e38c44f44a54fd628d801b05b2ef8d35e4',
+//             amount: amountKobo,
+//             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);
+//             },
+//             onFailed: (payload) => {
+//                 console.log('Payment failed:', payload.message);
+//             },
+//             onCancel: () => {
+//                 console.log('Payment cancelled');
+//             },
+//             onReady: () => {
+//                 console.log('Payment UI ready');
+//             },
+//         });
+//
+//         return cleanup; // optional but good practice
+//     }
+//
+//     return <Button title={`Pay ₦${amount}`} onPress={handlePayment} />;
+// }