floating-games-sdk 1.0.0

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

@@ -0,0 +1,597 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+  Alert,
+  Dimensions,
+  Image,
+  ImageBackground,
+  Platform,
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  Vibration,
+  View
+} from 'react-native';
+import { SharedValue, useSharedValue, withTiming } from 'react-native-reanimated';
+import Tile from './TileComponent';
+import { Gesture, GestureDetector } from 'react-native-gesture-handler';
+import { NativeStackScreenProps } from '@react-navigation/native-stack';
+import { RootStackParamList } from '@/src/navigation/GameNavigator';
+import CountdownTimer, { CountdownTimerRef } from '../../../components/reusables/CountdownTimer';
+// import {amount} from "@/components/atoms/amount";
+import { useSoundPlayer } from '@/src/components/reusables/SoundPlayer';
+import * as Haptics from 'expo-haptics';
+import Modal from 'react-native-modal';
+import AppSelect, { Option } from '../../../components/reusables/AppSelect';
+import { Amount } from '@/src/components/atoms/Amount';
+import FloatingButton from '@/src/components/reusables/FloatingButton';
+import GameOverModal from '../../../modals/GameOverModal';
+import PauseModal from '../../../modals/PauseModal';
+// import myLuckyDay from '../../../assets/images/lucky-day.gif'
+// import startButton from '../../../assets/images/start-button.png'
+
+const GRID = 4;
+const { width } = Dimensions.get('window');
+const BOARD = width - 100;
+const SIZE = BOARD / GRID;
+const TILE_COUNT = GRID * GRID - 1;
+
+// ------------------
+// Colors
+// ------------------
+const COLORS = {
+  background: '#072e60',
+  resetBtn: '#27ae60',
+  quitBtn: '#f67373',
+  timer: '#00bfff',
+  instruction: '#95cca8',
+  goal: '#E3F8D980',
+  sheet: '#c5daf4',
+  sheetBtn: '#4c88d6',
+  textWhite: '#fff',
+  sheetText: '#0f6e0c',
+};
+
+interface TileType {
+    value: number;
+    row: number;
+    col: number;
+    x: SharedValue<number>;
+    y: SharedValue<number>;
+}
+
+type GameScreenProps = NativeStackScreenProps<RootStackParamList, 'Game1'> & {
+    onWin?: () => void;
+};
+
+function GameScreen({ navigation, onWin }: GameScreenProps) {
+  const [tiles, setTiles] = useState<TileType[]>([]);
+  const [empty, setEmpty] = useState({ row: GRID - 1, col: GRID - 1 });
+  const [hasPlayed, setHasPlayed] = useState(false);
+  const [hasResetGameBtn, setHasResetGameBtn] = useState(true);
+
+  const [modalVisible, setModalVisible] = useState(false);
+  const [gameEnded, setGameEnded] = useState(true);
+  const [isPp, setIsPp] = useState(false);
+
+  const [isPlaying, setIsPlaying] = useState(false);
+  const [stakedAmt, setStakedAmt] = useState(0);
+  const [possibleWinAmt, setPossibleWinAmt] = useState(0);
+  const [walletAmt, setWalletAmt] = useState(3500);
+  const [remainingTime, setRemainingTime] = useState(0);
+
+  const [isAmountOpen, setIsAmountOpen] = useState(false);
+  const [isTimeOpen, setIsTimeOpen] = useState(false);
+
+  const [amountValue, setAmountValue] = useState(0);
+  const [possibleAmountValue, setPossibleAmountValue] = useState(0);
+  const [timeValue, setTimeValue] = useState(0);
+
+  const images = [
+    require('../../../assets/images/lets-play.gif'),
+    require('../../../assets/images/start-button.png'),
+    require('../../../assets/images/quit-icon.png'),
+    require('../../../assets/images/pause-icon.png'),
+    require('../../../assets/images/blocks-icon.png'),
+    require('../../../assets/images/close.png'),
+  ];
+
+  // images.forEach(img => Image.resolveAssetSource(img));
+  if (Platform.OS !== 'web') {
+    images.forEach(img => Image.resolveAssetSource(img));
+  }
+
+  const [items, setItems] = useState<Option[]>(
+    Array.from({ length: 10 }, (_, i) => {
+      const val = ((i + 1) * 100).toString();
+      return { label: val, value: val };
+    })
+  );
+
+  const [timeList, setTimeList] = useState<Option[]>([
+    { label: 'Set 1 Minute', value: 60 },
+    { label: 'Set 3 Minutes', value: 180 },
+    { label: 'Set 4 Minutes', value: 240 },
+    { label: 'Set 5 Minutes', value: 300 },
+  ]);
+
+  const timerRef = useRef<CountdownTimerRef>(null);
+
+  const shared = useRef(
+    Array.from({ length: TILE_COUNT }, () => ({ x: useSharedValue(0), y: useSharedValue(0) }))
+  ).current;
+
+  useEffect(() => {
+    initialize();
+    setTimeout(() => setHasResetGameBtn(false), 60000);
+  }, []);
+
+  useEffect(() => {
+    if (!amountValue || !timeValue) return;
+
+    let finalAmount = amountValue;
+
+    if (timeValue === 180) finalAmount *= 6;
+    else if (timeValue === 240) finalAmount *= 4;
+    else if (timeValue === 300) finalAmount *= 3;
+    else if (timeValue === 60) finalAmount *= 10;
+
+    setPossibleAmountValue(finalAmount);
+  }, [timeValue, amountValue]);
+
+  useEffect(() => {
+    if (!modalVisible) return;
+
+    const timer = setTimeout(() => {
+      setModalVisible(false);
+      setGameEnded(true);
+    }, 6000);
+
+    return () => clearTimeout(timer);
+  }, [modalVisible]);
+
+  // useEffect(() => {
+  //     Image.prefetch(Image.resolveAssetSource(require('../../../assets/images/lucky-day.gif')).uri);
+  //     Image.prefetch(Image.resolveAssetSource(require('../../../assets/images/game-page-bg1.png')).uri);
+  //     Image.prefetch(Image.resolveAssetSource(require('../../../assets/images/maths.png')).uri);
+  //     Image.prefetch(Image.resolveAssetSource(require('../../../assets/images/start-button.png')).uri);
+  // }, []);
+
+  const handleSwipe = async (direction: 'up' | 'down' | 'left' | 'right') => {
+    let targetRow = empty.row;
+    let targetCol = empty.col;
+
+    switch (direction) {
+    case 'up':
+      targetRow += 1;
+      break;
+    case 'down':
+      targetRow -= 1;
+      break;
+    case 'left':
+      targetCol += 1;
+      break;
+    case 'right':
+      targetCol -= 1;
+      break;
+    }
+
+    if (targetRow >= 0 && targetRow < GRID && targetCol >= 0 && targetCol < GRID) {
+      await vibrateSoft()
+      // Vibration.vibrate(40);
+      move(targetRow, targetCol);
+    }
+  };
+
+  const panGesture = Gesture.Pan()
+    .onFinalize(e => {
+      const { translationX, translationY } = e;
+      if (Math.abs(translationX) > Math.abs(translationY)) {
+        translationX > 30 ? handleSwipe('right') : translationX < -30 ? handleSwipe('left') : null;
+      } else {
+        translationY > 30 ? handleSwipe('down') : translationY < -30 ? handleSwipe('up') : null;
+      }
+    })
+    .runOnJS(true);
+
+  const shuffleArray = (arr: number[]) => {
+    const shuffled = [...arr];
+    for (let i = shuffled.length - 1; i > 0; i--) {
+      const j = Math.floor(Math.random() * (i + 1));
+      [shuffled[i], shuffled[j]] = [shuffled[j], shuffled[i]];
+    }
+    return shuffled;
+  };
+
+  const initialize = () => {
+    let count = 1;
+    const newTiles: TileType[] = [];
+    const numbers = shuffleArray(Array.from({ length: TILE_COUNT }, (_, i) => i + 1));
+
+    for (let r = 0; r < GRID; r++) {
+      for (let c = 0; c < GRID; c++) {
+        if (r === GRID - 1 && c === GRID - 1) continue;
+        const i = count - 1;
+        shared[i].x.value = c * SIZE;
+        shared[i].y.value = r * SIZE;
+        newTiles.push({ value: numbers[i], row: r, col: c, x: shared[i].x, y: shared[i].y });
+        count++;
+      }
+    }
+    timerRef.current?.reset();
+    setTiles(newTiles);
+    setEmpty({ row: GRID - 1, col: GRID - 1 });
+    // setResetCount(resetCount + 1);
+    setHasResetGameBtn(true);
+  };
+
+  const pause = () => {
+    timerRef.current?.pause();
+    setIsPp(true)
+  }
+
+  const play = () => {
+    timerRef.current?.resume();
+    setIsPp(false)
+  }
+
+  const move = (row: number, col: number) => {
+    if (!isPlaying) {
+      return
+    }
+    const dx = Math.abs(row - empty.row);
+    const dy = Math.abs(col - empty.col);
+    if (dx + dy !== 1) return;
+
+    const index = tiles.findIndex(t => t.row === row && t.col === col);
+    if (index === -1) return;
+
+    const tile = tiles[index];
+    tile.x.value = withTiming(empty.col * SIZE);
+    tile.y.value = withTiming(empty.row * SIZE);
+
+    const updated = tiles.map((t, i) => i === index ? { ...t, row: empty.row, col: empty.col } : t);
+    setTiles(updated);
+    setEmpty({ row, col });
+
+    checkWin(updated);
+  };
+
+  const checkWin = (tilesToCheck: TileType[]) => {
+    const sorted = [...tilesToCheck].sort((a, b) => a.row * GRID + a.col - (b.row * GRID + b.col));
+    for (let i = 0; i < sorted.length; i++) if (sorted[i].value !== i + 1) return;
+    if (onWin) Alert.alert('Hurray, You won!', 'Your account has been credited...?');
+  };
+
+  const { playSound } = useSoundPlayer(require('../../../assets/sounds/timeup-sound.wav'));
+
+  const handleTimeUp = async () => {
+    playSound();
+    setIsPlaying(false);
+    setAmountValue(0);
+  };
+
+  const startGame = () => {
+
+    if (!timeValue || !amountValue) {
+      Alert.alert('Information!', 'Select time / amount to stake.');
+      return;
+    }
+
+    if (amountValue > walletAmt) {
+      Alert.alert('Insufficient Fund!', 'Add more coins to your virtual coin.');
+      return;
+    }
+
+    setIsPlaying(true);
+    setGameEnded(false);
+    setRemainingTime(timeValue);
+    setStakedAmt(amountValue);
+    setPossibleWinAmt(possibleAmountValue);
+    setWalletAmt(walletAmt - amountValue);
+    setHasPlayed(true)
+  }
+
+  const endGame = () => {
+    setModalVisible(true);
+    setIsPlaying(false);
+    setRemainingTime(0);
+    setStakedAmt(0);
+    setPossibleWinAmt(0);
+    setAmountValue(0);
+    setTimeValue(0);
+    setPossibleAmountValue(0);
+  };
+
+  const vibrateSoft = async () => {
+    Platform.OS === 'ios'
+      ? await Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
+      : Vibration.vibrate(30);
+  };
+
+  const confirmQuit = () => {
+    Alert.alert(
+      'Exit Game',
+      'Are you sure?',
+      [
+        { text: 'No', style: 'cancel' },
+        { text: 'Yes', onPress: () => navigation.replace('GameSelector') },
+      ],
+      { cancelable: true }
+    );
+  };
+
+  const showConfirm = () => {
+    Alert.alert(
+      'Confirm Action',
+      'Amount paid, will be lost.\n\nAre you sure you want to quit this game?',
+      [
+        { text: 'No', style: 'cancel' },
+        // {text: 'Yes', onPress: () => navigation.replace('GameSelector')},
+        { text: 'Yes', onPress: () => endGame() },
+      ],
+      { cancelable: true }
+    );
+  };
+
+  const cpw = (valOrFn: (arg0: number) => any) => {
+    // if (!amountValue) {
+    //     Alert.alert('Information!', 'Select stake amount first.');
+    //     return;
+    // }
+    const val = typeof valOrFn === 'function' ? valOrFn(timeValue) : valOrFn;
+    let finalAmount = amountValue
+    if (timeValue === 180) finalAmount *= 6;
+    else if (timeValue === 240) finalAmount *= 4;
+    else if (timeValue === 300) finalAmount *= 3;
+    setPossibleAmountValue(finalAmount);
+    setTimeValue(val);
+  }
+
+  return (
+    <ImageBackground
+      source={ require('../../../assets/images/game-page-bg1.png') }
+      style={ { flex: 1 } }
+    >
+
+      <View style={ styles.container }>
+        <View style={ styles.headerContainer }>
+          <Text style={ styles.timerIntro }>Solve The Puzzle{ '\n' }Before Countdown</Text>
+          <View style={ styles.timerWrapper }>
+            <CountdownTimer
+              key={ remainingTime }
+              ref={ timerRef }
+              initialSeconds={ remainingTime }
+              warningThreshold={ 10 }
+              onComplete={ endGame }
+              color={ COLORS.timer } // ✅ Use string directly
+            />
+          </View>
+
+          <View style={ styles.amountContainer }>
+            <View style={ styles.amountBlock }>
+              <View>
+                <Amount value={ stakedAmt } color="#4CAF50" fontSize={ 25 }/>
+              </View>
+              <Text style={ styles.amountLabel }>Staked Amount 💰💵</Text>
+            </View>
+            <View style={ styles.amountBlock }>
+              <View>
+                <Amount value={ possibleWinAmt } color="#4CAF50" fontSize={ 25 }/>
+              </View>
+              <Text style={ styles.amountLabel }>Possible Winning🔥</Text>
+            </View>
+          </View>
+
+          <Text style={ styles.instructionText }>
+                        Arrange the scrambled numbers on the board in ascending order to complete the puzzle. The empty
+                        space allows you to move tiles, one at a time, until all numbers are in order.
+          </Text>
+          <Text style={ styles.goalText }>
+                        ✅ Goal: Arrange numbers 1 → 2 → 3 … { '\n' }until the puzzle is solved.
+          </Text>
+        </View>
+        <View style={ { alignItems: 'center' } }>
+          {
+            isPlaying ? <GestureDetector gesture={ panGesture }>
+              <View style={ styles.board }>
+                { tiles.map(tile => (
+                  <Tile
+                    key={ tile.value }
+                    value={ tile.value }
+                    size={ SIZE }
+                    x={ tile.x }
+                    y={ tile.y }
+                    onPress={ async () => {
+                      await vibrateSoft();
+                      move(tile.row, tile.col);
+                    } }
+                  />
+                )) }
+              </View>
+            </GestureDetector> : <Image
+              source={ images[4] }
+              style={ { width: 300, height: 300, marginBottom: 100 } }
+              resizeMode="contain"
+            />
+          }
+        </View>
+        {
+          !modalVisible && !gameEnded && <View style={ styles.buttonContainer }>
+            <FloatingButton preset="left">
+              <View style={ { alignItems: 'center' } }>
+                <TouchableOpacity style={ styles.button } onPress={ pause }>
+                  <Image
+                    source={ images[3] }
+                    style={ { width: 50, height: 50 } }
+                    resizeMode="contain"
+                  />
+                </TouchableOpacity>
+                <Text style={ styles.pText }>Pause</Text>
+              </View>
+            </FloatingButton>
+
+            <FloatingButton preset="right">
+              <View style={ { alignItems: 'center' } }>
+                <TouchableOpacity style={ styles.button } onPress={ showConfirm }>
+                  <Image
+                    source={ images[2] }
+                    style={ { width: 50, height: 50 } }
+                    resizeMode="contain"
+                  />
+                </TouchableOpacity>
+                <Text style={ styles.pText }>Quit</Text>
+              </View>
+            </FloatingButton>
+
+          </View>
+        }
+
+      </View>
+
+      <Modal
+        isVisible={ gameEnded } // gameEnded
+        style={ styles.modal }>
+        <View style={ styles.sheet }>
+          <View style={ { flexDirection: 'row', justifyContent: 'space-between' } }>
+            <View style={ { borderLeftWidth: 3, borderColor: '#0f6e0c', marginBottom: 12, paddingStart: 6 } }>
+              <Text style={ styles.sheetText }>Total Virtual Coins.</Text>
+              <Amount value={ walletAmt } color="#0f6e0c" fontSize={ 25 }/>
+            </View>
+            <View>
+              <Image
+                // source={require('../../../assets/images/lucky-day.gif')}
+                source={ images[0] }
+                style={ { width: 100, height: 100, position: 'absolute', right: 0, top: -10 } }
+                resizeMode="contain"
+              />
+            </View>
+          </View>
+
+          <Text style={ { fontSize: 13, marginBottom: 6 } }>Setting different time, affects the odds</Text>
+          <View style={ { alignItems: 'center', flexDirection: 'row', marginBottom: 10 } }>
+            <Text style={ { fontSize: 15, fontWeight: '800', color: '#0c53ac' } }>Possible Winning
+                            Amount: </Text>
+            <Amount value={ possibleAmountValue } color={ '#0c53ac' } fontSize={ 17 }/>
+          </View>
+
+          <View style={ { flexDirection: 'row', justifyContent: 'space-between', marginBottom: 20 } }>
+
+            <View style={ { width: '49%' } }>
+              <AppSelect
+                open={ isAmountOpen }
+                value={ amountValue }
+                items={ items }
+                setOpen={ setIsAmountOpen }
+                setValue={ setAmountValue }
+                setItems={ setItems }
+                placeholder="Stake Amount"
+                fontSize={ 15 }
+              />
+            </View>
+
+            <View style={ { width: '49%' } }>
+              <AppSelect
+                open={ isTimeOpen }
+                value={ timeValue }
+                items={ timeList }
+                setOpen={ setIsTimeOpen }
+                // setValue={setTimeValue}
+                setValue={ cpw }
+                setItems={ setTimeList }
+                placeholder="Select Time"
+                fontSize={ 15 }
+              />
+            </View>
+
+          </View>
+          <View
+            style={ { flexDirection: 'row', justifyContent: 'space-evenly' } }>
+
+            <TouchableOpacity onPress={ confirmQuit }>
+              <Image
+                source={ images[5] }
+                style={ { width: 50, height: 50 } }
+                resizeMode="contain"
+              />
+            </TouchableOpacity>
+
+            <FloatingButton preset="left">
+              <View style={ { alignItems: 'center', marginTop: 14 } }>
+                <TouchableOpacity onPress={ startGame }>
+                  <Image
+                    source={ images[1] }
+                    style={ { width: 100, height: 40 } }
+                    resizeMode={ 'cover' }
+                  />
+                </TouchableOpacity>
+              </View>
+            </FloatingButton>
+
+          </View>
+        </View>
+      </Modal>
+
+      <GameOverModal
+        visible={ modalVisible && hasPlayed } //modalVisible
+        onClose={ () => setModalVisible(false) }
+        title={ 'Game Over' }
+      />
+
+      <PauseModal visible={ isPp } onClose={ play }/>
+
+    </ImageBackground>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: { flex: 1, backgroundColor: 'rgba(7,46,96,0.92)', justifyContent: 'center' },
+  headerContainer: { marginHorizontal: 15 },
+  timerIntro: { color: COLORS.instruction, alignSelf: 'center', marginBottom: 16, textAlign: 'center' },
+  timerWrapper: { height: 30, alignSelf: 'center', alignItems: 'center', marginBottom: 16 },
+  amountContainer: {
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+    marginBottom: 20,
+    backgroundColor: '#E496914F',
+    padding: 12,
+    borderRadius: 6
+  },
+  amountBlock: { flexDirection: 'column', textAlign: 'center', alignItems: 'center', alignSelf: 'center' },
+  amountLabel: { alignSelf: 'center', color: COLORS.goal, alignItems: 'center' },
+  instructionText: { textAlign: 'center', marginBottom: 15, color: COLORS.instruction },
+  goalText: { textAlign: 'center', fontWeight: 'bold', color: COLORS.goal },
+  board: { width: BOARD, height: BOARD, backgroundColor: COLORS.background, borderRadius: 16, marginVertical: 30 },
+  buttonContainer: { flexDirection: 'row', justifyContent: 'space-evenly', marginTop: 50 },
+  button: { borderRadius: 50, backgroundColor: '#eee' },
+  resetBtn: { backgroundColor: COLORS.resetBtn, marginEnd: 20 },
+  quitBtn: { backgroundColor: COLORS.quitBtn },
+  buttonText: { color: '#0c53ae', fontSize: 16, fontWeight: '600', marginTop: 2 },
+  pText: { color: '#effae7', fontSize: 16, fontWeight: '600', marginTop: 4 },
+  modal: { justifyContent: 'flex-end', margin: 0 },
+  sheet: {
+    backgroundColor: COLORS.sheet,
+    height: '30%',
+    padding: 10, /*justifyContent: 'center', alignItems: 'center'*/
+  },
+  sheetText: { fontSize: 15, color: COLORS.sheetText, fontWeight: 'bold' },
+  sheetBtn: {
+    padding: 10,
+    backgroundColor: COLORS.sheetBtn,
+    // marginVertical: 5,
+    width: 150,
+    alignItems: 'center',
+    borderRadius: 25
+  },
+  startGame: {
+    padding: 10,
+    backgroundColor: '#0a3e81',
+    marginVertical: 5,
+    width: 150,
+    alignItems: 'center',
+    borderRadius: 25
+  },
+  sheetBtnText: { color: COLORS.textWhite, fontWeight: '500' },
+
+});
+
+export default React.memo(GameScreen);

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

@@ -0,0 +1,50 @@
+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 1 sec
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: 2000, // fade out 2 sec
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      navigation.replace('GameSelector'); // go to selector after splash
+    });
+  }, []);
+
+  return (
+    <View style={styles.container}>
+      <Animated.View style={{opacity}}>
+        <Text style={styles.logo}>🎮 My Game</Text>
+      </Animated.View>
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    backgroundColor: '#000',
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  logo: {
+    fontSize: 36,
+    fontWeight: 'bold',
+    color: '#fff',
+  },
+});

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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { Text, TouchableOpacity, StyleSheet } from 'react-native';
+import Animated, { useAnimatedStyle, withTiming, SharedValue } from 'react-native-reanimated';
+
+interface TileProps {
+    value: number;
+    size: number;
+    x: SharedValue<number>;
+    y: SharedValue<number>;
+    onPress: () => void;
+}
+
+export default function Tile({ value, size, x, y, onPress }: TileProps) {
+    const style = useAnimatedStyle(() => ({
+        transform: [{ translateX: x.value }, { translateY: y.value }],
+    }));
+
+    return (
+        <Animated.View style={[styles.tile, { width: size, height: size }, style]}>
+            <TouchableOpacity style={styles.touch} onPress={onPress} activeOpacity={0.8}>
+                <Text style={styles.text}>{value}</Text>
+            </TouchableOpacity>
+        </Animated.View>
+    );
+}
+
+const styles = StyleSheet.create({
+    tile: {
+        position: 'absolute',
+        backgroundColor: '#3498db',
+        borderRadius: 12,
+        overflow: 'hidden',
+        borderWidth: 4,
+        borderColor: '#072e60'
+    },
+    touch: {
+        flex: 1,
+        justifyContent: 'center',
+        alignItems: 'center',
+        margin: 6
+    },
+    text: {
+        color: '#fff',
+        fontSize: 22,
+        fontWeight: 'bold',
+    },
+});