floating-games-sdk 1.0.0

package/src/components/games/review-and-win/EmojiTracker.tsx

@@ -0,0 +1,96 @@
+// components/EmojiTracker.tsx
+import React from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+import { Amount } from '../../atoms/Amount';
+
+type Props = {
+    counts: { [key: string]: number },       // how many times player opened
+    maxCounts: { [key: string]: number },    // how many slots to show (max 3)
+    emojiValues: { [key: string]: number }   // values for each emoji
+}
+
+const EMOJIS = ['😀', '🔥', '⭐'];
+
+export default function EmojiTracker({ counts, maxCounts, emojiValues }: Props) {
+  return (
+    <View style={ styles.container }>
+      { EMOJIS.map(emoji => {
+        const max = maxCounts[emoji] || 3; // always show up to 3 slots
+
+        return (
+          <View key={ emoji } style={ styles.row }>
+            { [...Array(max)].map((_, i) => {
+              const active = counts[emoji] > i;
+              return (
+                <View key={ i }
+                  style={ [styles.box, active && styles.active, counts[emoji] >= 3 && styles.won] }>
+                  <Text style={ styles.emoji }>{ emoji }</Text>
+                </View>
+              )
+            }) }
+
+            <View style={ styles.pointCover }>
+              <Text style={ {
+                color: counts[emoji] >= 3 ? '#0ff35e' : '#f6e573',
+                fontWeight: 900,
+                fontSize: 23,
+                marginHorizontal: 4
+              } }>=</Text>
+              <Text style={ counts[emoji] >= 3 ? styles.points1 : styles.points2 }>
+                <Amount
+                  value={ emojiValues[emoji] }    // numeric value
+                  fontSize={ 23 }
+                  color={ counts[emoji] >= 3 ? '#0ff35e' : '#f6e573' }
+                />
+              </Text>
+              { /*<Text style={{color:'#fff'}}>{counts[emoji] >= 3 && '💰'}</Text>*/ }
+            </View>
+          </View>
+        )
+      }) }
+    </View>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: { marginBottom: 8 },
+  row: { flexDirection: 'row', alignItems: 'center', marginBottom: 8 },
+  box: {
+    width: 50, height: 50,
+    borderWidth: 4, borderColor: '#999',
+    justifyContent: 'center', alignItems: 'center',
+    marginHorizontal: 5, borderRadius: 50
+  },
+  active: { borderColor: 'gold' },
+  emoji: { fontSize: 20 },
+  points1: {
+    marginLeft: 4,
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#0ff35e',
+    // backgroundColor:'#fff',
+    // width: '60%'
+  },
+  points2: {
+    marginLeft: 4,
+    fontSize: 20,
+    fontWeight: 'bold',
+    color: '#f6e573',
+    // backgroundColor:'#fff',
+    // alignSelf:'center'
+  },
+  won: { borderColor: '#0ff35e' },
+  pointCover: {
+    display: 'flex',
+    flexDirection: 'row',
+    // borderWidth: 3,
+    // borderRadius: 8,
+    // borderColor: '#0ff35e',
+    // paddingHorizontal: 3,
+    // paddingVertical: 10,
+    alignItems: 'center',
+    // width: '50%',
+    alignSelf: 'center',
+    // justifyContent:'center'
+  }
+});

package/src/components/games/review-and-win/GameScreen.tsx

@@ -0,0 +1,135 @@
+// components/GameScreen.tsx
+import React, {useState} from 'react';
+import {Alert, FlatList, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
+import EmojiTracker from './EmojiTracker';
+import Tile from './Tile';
+import {createBoard, TileData} from '../../utils/shuffle';
+
+export default function GameScreen({navigation}: any) {
+
+  const [tiles, setTiles] = useState<TileData[]>(createBoard());
+  const [reviewsLeft, setReviewsLeft] = useState(5);
+
+  const [counts, setCounts] = useState<{ [key: string]: number }>({
+    '😀': 0, '🔥': 0, '⭐': 0
+  });
+
+  // Tracker max slots always 3
+  const [maxCounts, setMaxCounts] = useState<{ [key: string]: number }>({
+    '😀': 3, '🔥': 3, '⭐': 3
+  });
+
+  // Function to restart game
+  const restartGame = () => {
+    setTiles(createBoard());
+    setReviewsLeft(6);
+    setCounts({'😀': 0, '🔥': 0, '⭐': 0});
+  }
+
+  const openTile = (index: number) => {
+    if (reviewsLeft === 0) {
+      Alert.alert('Reviews', 'No reviews left!');
+      return
+    }
+
+    const newTiles = [...tiles];
+    if (newTiles[index].opened) return;
+
+    newTiles[index].opened = true;
+    setTiles(newTiles);
+
+    const emoji = newTiles[index].type;
+
+    setCounts(prev => {
+      const newCount = prev[emoji] + 1;
+
+      // Trigger alert when any emoji reaches 3 occurrences
+      if (newCount === 3) {
+        Alert.alert('Match!', `You opened 3 ${emoji} tiles!`);
+      }
+
+      return {
+        ...prev,
+        [emoji]: newCount
+      }
+    });
+
+    setReviewsLeft(prev => prev - 1);
+  }
+
+  return (
+    <>
+
+      <View style={{marginTop: 50, paddingVertical: 10, paddingHorizontal: 20, alignSelf: 'center'}}>
+        <EmojiTracker counts={counts} maxCounts={maxCounts} emojiValues={{'😀': 25000, '🔥': 1500, '⭐': 1000}}/>
+      </View>
+
+      <View style={styles.container}>
+
+        <Text style={{
+          color: '#0ff35e',
+          paddingHorizontal: 40,
+          paddingVertical: 16,
+          fontWeight: '600',
+          fontSize: 13
+        }}>
+                    Enjoy the Challenge!{'\n'}
+                    Test your memory, match the emojis, and watch your points climb with each successful match!
+        </Text>
+
+        <Text style={styles.text}>Reviews Left: {reviewsLeft}</Text>
+
+        <FlatList
+          scrollEnabled={false}
+          data={tiles}
+          numColumns={4}
+          keyExtractor={(item) => item.id.toString()}
+          renderItem={({item, index}) => {
+            return (
+              <Tile tile={item} disabled={reviewsLeft === 0} onPress={() => openTile(index)}/>
+            )
+          }}
+        />
+
+        <View
+          style={{flexDirection: 'row', marginBottom: 50}}>
+          <TouchableOpacity style={[styles.restartBtn, {marginEnd: 30}]} onPress={restartGame}>
+            <Text style={styles.btnText}>Restart</Text>
+          </TouchableOpacity>
+
+          <TouchableOpacity style={styles.backBtn} onPress={() => navigation.replace('GameSelector')}>
+            <Text style={styles.btnText}>Back</Text>
+          </TouchableOpacity>
+        </View>
+
+      </View>
+    </>
+  )
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    // paddingTop: 0,
+    alignItems: 'center',
+    backgroundColor: '#222'
+  },
+  text: {fontSize: 18, marginVertical: 10, color: '#fff'},
+  restartBtn: {
+    // marginTop: 20,
+    paddingHorizontal: 30,
+    paddingVertical: 12,
+    backgroundColor: 'gold',
+    borderRadius: 10
+  },
+  backBtn: {
+    // position:"absolute",
+    // top:40,
+    // left:20,
+    paddingHorizontal: 20,
+    paddingVertical: 10,
+    backgroundColor: '#888',
+    borderRadius: 8
+  },
+  btnText: {fontSize: 16, fontWeight: 'bold'}
+});

package/src/components/games/review-and-win/Tile.tsx

@@ -0,0 +1,60 @@
+// components/Tile.tsx
+import React, {useRef} from 'react';
+import {Alert, Animated, StyleSheet, Text, TouchableOpacity} from 'react-native';
+import {TileData} from '../../utils/shuffle';
+
+type Props = {
+    tile: TileData,
+    onPress: () => void,
+    disabled?: boolean
+}
+
+export default function Tile({tile, onPress, disabled}: Props) {
+
+  const rotate = useRef(new Animated.Value(0)).current;
+
+  const flip = () => {
+    // If tile is disabled, show alert instead of opening
+    if (disabled) {
+      Alert.alert('Notice', 'You cannot open this tile right now!');
+      return;
+    }
+
+    // Already opened tile
+    if (tile.opened) return;
+
+    // Start flip animation
+    Animated.timing(rotate, {
+      toValue: 1,
+      duration: 400,
+      useNativeDriver: true
+    }).start();
+
+    onPress();
+  }
+
+  const rotateY = rotate.interpolate({
+    inputRange: [0, 1],
+    outputRange: ['0deg', '180deg']
+  });
+
+  return (
+    <TouchableOpacity activeOpacity={0.8} onPress={flip}>
+      <Animated.View style={[styles.tile, {transform: [{rotateY}]}]}>
+        <Text style={styles.emoji}>{tile.opened ? tile.type : 'e'}</Text>
+      </Animated.View>
+    </TouchableOpacity>
+  )
+}
+
+const styles = StyleSheet.create({
+  tile: {
+    width: 70, height: 70,
+    backgroundColor: '#444',
+    margin: 2,
+    justifyContent: 'center',
+    alignItems: 'center',
+    borderRadius: 10
+  },
+  emoji: {fontSize: 30}
+});