Confetti.js

import React, { useRef } from 'react';
import { View, Button, StyleSheet } from 'react-native';
import ConfettiCannon from 'react-native-confetti-cannon';

const ConfettiButton = () => {
  const confettiRef = useRef(null);

  const handleButtonPress = () => {
    if (confettiRef.current) {
      confettiRef.current.startConfetti();
    }
  };

  return (
    <View style={styles.container}>
      <Button title="Press me" onPress={handleButtonPress} />
      <ConfettiCannon
        ref={confettiRef}
        count={200}
        explosionSpeed={300}
        origin={{ x: -10, y: 0 }}
      />
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
});

export default ConfettiButton;

haptics.js

import * as React from 'react';
import { StyleSheet, View, Text, Button } from 'react-native';
import * as Haptics from 'expo-haptics';

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>Haptics.selectionAsync</Text>
      <View style={styles.buttonContainer}>
        <Button title="Selection" onPress={() => Haptics.selectionAsync()} />
      </View>
      <Text style={styles.text}>Haptics.notificationAsync</Text>
      <View style={styles.buttonContainer}>
        <Button
          title="Success"
          onPress={
            () =>
              Haptics.notificationAsync(
                Haptics.NotificationFeedbackType.Success
              )
          }
        />
        <Button
          title="Error"
          onPress={
            () =>
              Haptics.notificationAsync(
                Haptics.NotificationFeedbackType.Error
              )
          }
        />
        <Button
          title="Warning"
          onPress={
            () =>
              Haptics.notificationAsync(
                Haptics.NotificationFeedbackType.Warning
              )
          }
        />
      </View>
      <Text style={styles.text}>Haptics.impactAsync</Text>
      <View style={styles.buttonContainer}>
        <Button
          title="Light"
          onPress={
            () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light)
          }
        />
        <Button
          title="Medium"
          onPress={
            () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Medium)
          }
        />
        <Button
          title="Heavy"
          onPress={
            () => Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Heavy)
          }
        />
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingHorizontal: 16,
  },
  buttonContainer: {
    flexDirection: 'row',
    alignItems: 'stretch',
    marginTop: 10,
    marginBottom: 30,
    justifyContent: 'space-between',
  },
});

index.js

import React from 'react';
import {StyleSheet, Text, View} from 'react-native';
import { Link } from "expo-router";
import * as Haptics from 'expo-haptics';

export default () => (
  <View style={styles.container}>
    <Text style={styles.subHeader}>Let's Play a game of</Text>
    <Text style={styles.header}>Rock Paper Scissors</Text>

    <Text style={styles.emoji}>✊🏿 ✋🏾 ✌🏽</Text>
    <View style={styles.btnContainer}>
      <Link href="/play" onPress={() => {
        Haptics.notificationAsync(
          Haptics.NotificationFeedbackType.Success
        )
      }}>{'Tap to Play'}</Link>
    </View>
  </View>
)

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  subHeader: {
    fontSize: 18,
    margin: 10,
  },
  header: {
    fontSize: 28,
    margin: 10,
  },
  emoji: {
    fontSize: 60,
  },
  btnContainer: {
    marginTop: 60,
  }
});

play.js

import React, {useState, useEffect} from 'react';
import {StyleSheet, Text, View, Button, Image} from 'react-native';
import { Link } from "expo-router";
import { DeviceMotion } from 'expo-sensors';
import ShakeDetector from '../components/ShakeDetector';

// const scissors = require('../assets/signs/scissors.png');
// const paper = require('../assets/signs/paper.png');
// const rock = require('../assets/signs/rock.png');

const bgColors = ['#1abc9c', '#3498db', '#9b59b6'];

//get a random emoji
const getRandom = () => {
  //rock paper scissors emoji
  const emojis = ['✌🏽', '✊🏿', '✋🏾'];
  const random = Math.floor(Math.random() * 3);
  return emojis[random];
};

export default function PlayScreen() {
  const [counter, setCounter] = useState(1);

  useEffect(() => {
    //check for greator then stop the loop
    if (counter > 3) return;

    const timer = setTimeout(() => {
      setCounter(previous => previous + 1);
    }, 500);

    return () => clearTimeout(timer);
  }, [counter]);

  return (
    <View style={styles.container}>
      {counter > 3 ? (
        <>
          {/* <Image style={styles.oldSign} source={randomRPSEmo()} /> */}
          <Text style={styles.sign}>{getRandom()}</Text>
          <ShakeDetector />
          <View style={styles.btnContainer}>
            <Button
              onPress={() => {
                setCounter(1);
              }}
              title="Play Again"
            />
          </View>
        </>
      ) : (
        <View
          style={StyleSheet.compose(
            styles.counterContainer,
            {backgroundColor: bgColors[counter - 1]},
          )}>
          <Text style={styles.counter}>{counter}</Text>
        </View>
      )}
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  counter: {
    fontSize: 150,
    color: '#fff',
  },
  oldSign: {
    width: 200,
    height: 200,
  },
  sign: {
    fontSize: 200,
  },
  btnContainer: {
    marginTop: 60,
    width: 240,
    position: 'absolute',
    bottom: 20,
  },
  counterContainer: {
    flex: 1,
    width: '100%',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

ShakeDetector.js

import React, { useEffect } from 'react';
import { DeviceMotion } from 'expo-sensors';
import { Text } from 'react-native';
import { useRouter } from "expo-router";

const ShakeDetector = ({route}) => {
  const router = useRouter();

  useEffect(() => {
    let subscription;

    const startShakeDetection = async () => {
      DeviceMotion.setUpdateInterval(100); // Set the update interval (in milliseconds)

      subscription = DeviceMotion.addListener(({ acceleration }) => {
        // Check if the acceleration exceeds a threshold for shake detection
        const { x, y, z } = acceleration;
        const accelerationThreshold = 1.2; // Adjust this threshold as needed

        if (Math.abs(x) > accelerationThreshold || Math.abs(y) > accelerationThreshold || Math.abs(z) > accelerationThreshold) {
          const speed = Math.sqrt(x ** 2 + y ** 2 + z ** 2);
          console.log(`Device shook! Speed: ${speed}`);
          if (speed >= 30) {
            console.log(`ShakeDetector redirect: ${route}`)
            router.push("/");
          }
        }
      });

      await DeviceMotion.start();
    };

    startShakeDetection();

    return () => {
      if (subscription) {
        subscription.remove();
      }
      DeviceMotion.removeAllListeners();
      DeviceMotion.stop();
    };
  }, []);

  return null;
};

export default ShakeDetector;

sounds.js

import * as React from 'react';
import { Text, View, StyleSheet, Button } from 'react-native';
import { Audio } from 'expo-av';

export default () => {
  const [sound, setSound] = React.useState();

  async function playYay() {
    const { sound } = await Audio.Sound.createAsync( require('../../assets/yay.mp3'));
    setSound(sound);

    console.log('Playing Sound: Yay');
    await sound.playAsync();
  }

  async function playNay() {
    const { sound } = await Audio.Sound.createAsync( require('../../assets/nay.mp3'));
    setSound(sound);

    console.log('Playing Sound: Nay');
    await sound.playAsync();
  }

  React.useEffect(() => {
    return sound
      ? () => {
          console.log('Unloading Sound');
          sound.unloadAsync();
        }
      : undefined;
  }, [sound]);

  return (
    <View style={styles.container}>
      <Button title="Yay" onPress={playYay} />
      <Button title="Nay" onPress={playNay} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    backgroundColor: '#ecf0f1',
    padding: 10,
  },
});