refactor + assets

android/app/src/main/AndroidManifest.xml

@@ -1,7 +1,8 @@
 <manifest xmlns:android="http://schemas.android.com/apk/res/android">
 
     <uses-permission android:name="android.permission.INTERNET" />
-
+    <uses-permission android:name="android.permission.VIBRATE"/>
+
     <application
       android:name=".MainApplication"
       android:label="@string/app_name"

android/app/src/main/java/com/higherlower/MainActivity.java

@@ -13,7 +13,7 @@ public class MainActivity extends ReactActivity {
    */
   @Override
   protected String getMainComponentName() {
-    return "HigherLower";
+    return "Follower Frenzy";
   }
 
   /**

android/app/src/main/res/values/strings.xml

@@ -1,3 +1,3 @@
 <resources>
-    <string name="app_name">HigherLower</string>
+    <string name="app_name">Follower Frenzy</string>
 </resources>

app.json

@@ -1,4 +1,4 @@
 {
-  "name": "HigherLower",
-  "displayName": "HigherLower"
+  "name": "Follower Frenzy",
+  "displayName": "Follower Frenzy"
 }

components/CustomCard.tsx

@@ -1,5 +1,6 @@
 import { ImageBackground, StyleSheet, Text } from 'react-native';
 import React from 'react';
+import { formatNumber } from '../utils/general_utils';
 
 const CustomCard = (props: any) => {
   return (
@@ -11,10 +12,10 @@ const CustomCard = (props: any) => {
       <Text style={[styles.username, styles.shadowText]}>@{props.username}</Text>
       <Text style={[styles.generalText, styles.shadowText]}>has</Text>
       <Text style={[styles.followers, styles.shadowText]}>
-        {props.hideFollowers ? "?" : props.followers}
+        {props.hideFollowers ? "?" : formatNumber(props.followers)}
       </Text>
       <Text style={[styles.generalText, styles.shadowText]}>followers</Text>
-    </ImageBackground>
+    </ImageBackground >
   );
 };
 
@@ -30,30 +31,32 @@ const styles = StyleSheet.create({
     marginTop: 40,
     fontSize: 40,
     textAlign: 'center',
-    fontWeight: '600',
+    fontWeight: 'bold',
     color: '#fff',
+    fontFamily: "josefin",
+    letterSpacing: 1
   },
   image: {
     width: 100,
     height: 100,
   },
   username: {
     marginTop: 5,
-    fontSize: 22,
+    fontSize: 25,
     fontWeight: 'bold',
     color: '#fff',
   },
   generalText: {
     fontSize: 20,
     marginTop: 10,
     color: '#fff',
-    fontWeight: '400',
+    fontWeight: '800',
+    fontFamily: "josefin",
   },
   followers: {
-    marginTop: 10,
-    fontSize: 35,
-    fontWeight: 'bold',
-    color: '#fff',
+    fontFamily: "tiltwarp",
+    fontSize: 45,
+    color: "#fff", letterSpacing: 3
   },
   shadowText: {
     paddingHorizontal: 10,

ios/HigherLower/Images.xcassets/AppIcon.appiconset/Contents.json

@@ -1,53 +1,122 @@
 {
-  "images" : [
+  "images": [
     {
-      "idiom" : "iphone",
-      "scale" : "2x",
-      "size" : "20x20"
+      "size": "20x20",
+      "idiom": "iphone",
+      "filename": "Icon-App-20x20@2x.png",
+      "scale": "2x"
     },
     {
-      "idiom" : "iphone",
-      "scale" : "3x",
-      "size" : "20x20"
+      "size": "20x20",
+      "idiom": "iphone",
+      "filename": "Icon-App-20x20@3x.png",
+      "scale": "3x"
     },
     {
-      "idiom" : "iphone",
-      "scale" : "2x",
-      "size" : "29x29"
+      "size": "29x29",
+      "idiom": "iphone",
+      "filename": "Icon-App-29x29@1x.png",
+      "scale": "1x"
     },
     {
-      "idiom" : "iphone",
-      "scale" : "3x",
-      "size" : "29x29"
+      "size": "29x29",
+      "idiom": "iphone",
+      "filename": "Icon-App-29x29@2x.png",
+      "scale": "2x"
     },
     {
-      "idiom" : "iphone",
-      "scale" : "2x",
-      "size" : "40x40"
+      "size": "29x29",
+      "idiom": "iphone",
+      "filename": "Icon-App-29x29@3x.png",
+      "scale": "3x"
     },
     {
-      "idiom" : "iphone",
-      "scale" : "3x",
-      "size" : "40x40"
+      "size": "40x40",
+      "idiom": "iphone",
+      "filename": "Icon-App-40x40@2x.png",
+      "scale": "2x"
     },
     {
-      "idiom" : "iphone",
-      "scale" : "2x",
-      "size" : "60x60"
+      "size": "40x40",
+      "idiom": "iphone",
+      "filename": "Icon-App-40x40@3x.png",
+      "scale": "3x"
     },
     {
-      "idiom" : "iphone",
-      "scale" : "3x",
-      "size" : "60x60"
+      "size": "60x60",
+      "idiom": "iphone",
+      "filename": "Icon-App-60x60@2x.png",
+      "scale": "2x"
     },
     {
-      "idiom" : "ios-marketing",
-      "scale" : "1x",
-      "size" : "1024x1024"
+      "size": "60x60",
+      "idiom": "iphone",
+      "filename": "Icon-App-60x60@3x.png",
+      "scale": "3x"
+    },
+    {
+      "size": "20x20",
+      "idiom": "ipad",
+      "filename": "Icon-App-20x20@1x.png",
+      "scale": "1x"
+    },
+    {
+      "size": "20x20",
+      "idiom": "ipad",
+      "filename": "Icon-App-20x20@2x.png",
+      "scale": "2x"
+    },
+    {
+      "size": "29x29",
+      "idiom": "ipad",
+      "filename": "Icon-App-29x29@1x.png",
+      "scale": "1x"
+    },
+    {
+      "size": "29x29",
+      "idiom": "ipad",
+      "filename": "Icon-App-29x29@2x.png",
+      "scale": "2x"
+    },
+    {
+      "size": "40x40",
+      "idiom": "ipad",
+      "filename": "Icon-App-40x40@1x.png",
+      "scale": "1x"
+    },
+    {
+      "size": "40x40",
+      "idiom": "ipad",
+      "filename": "Icon-App-40x40@2x.png",
+      "scale": "2x"
+    },
+    {
+      "size": "76x76",
+      "idiom": "ipad",
+      "filename": "Icon-App-76x76@1x.png",
+      "scale": "1x"
+    },
+    {
+      "size": "76x76",
+      "idiom": "ipad",
+      "filename": "Icon-App-76x76@2x.png",
+      "scale": "2x"
+    },
+    {
+      "size": "83.5x83.5",
+      "idiom": "ipad",
+      "filename": "Icon-App-83.5x83.5@2x.png",
+      "scale": "2x"
+    },
+    {
+      "size": "1024x1024",
+      "idiom": "ios-marketing",
+      "filename": "Icon-App-1024x1024@1x.png",
+      "scale": "1x"
     }
   ],
-  "info" : {
-    "author" : "xcode",
-    "version" : 1
+  "info": {
+    "version": 1,
+    "author": "xcode"
   }
-}
+}

screens/Game.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect, useReducer, useState } from 'react';
-import { Alert, StyleSheet } from 'react-native';
+import { Alert, StyleSheet, Vibration } from 'react-native';
 import {
     Animated,
     Dimensions,
@@ -39,11 +39,6 @@ const Game = () => {
     const [isAnimating, setIsAnimating] = useState(false);
     const [animatedValue] = useState(new Animated.Value(0));
 
-    const [colorA, setColorA] = useState(color1);
-    const [colorB, setColorB] = useState(color2);
-    const [colorC, setColorC] = useState(color1);
-
-
     const [btn_hide, setBtn_hide] = useState(false);
     const [hideFollowers, setHideFollowers] = useState(true);
     const [gameOver, setGameOver] = useState(false);
@@ -107,7 +102,7 @@ const Game = () => {
                 onPress: () => console.log('Cancel Pressed'),
                 style: 'cancel',
             },
-            { text: 'Exit Game 🚪', onPress: () => { console.log('OK Pressed'); navigation.goBack() } },
+            { text: 'Exit Game 🚪', onPress: () => { navigation.goBack() } },
         ])
     });
 
@@ -121,9 +116,6 @@ const Game = () => {
     })
 
     const transferState = () => {
-        setColorA(colorB);
-        setColorB(colorC);
-        setColorC(colorB);
         updateStateA(stateB);
         updateStateB(stateC);
         giveUrl(stateB.username).then(resp => {
@@ -141,6 +133,7 @@ const Game = () => {
 
     const handleButtonPress = (isUp: boolean) => {
         setIsAnimating(true);
+        Vibration.vibrate(20);
         setBtn_hide(true);
         setHideFollowers(false);
         if ((isUp && stateB.followers_count >= stateA.followers_count) ||
@@ -161,6 +154,7 @@ const Game = () => {
             });
         } else if (life > 0) {
             setLife(life - 1);
+            Vibration.vibrate(150);
             Animated.timing(animatedValue, {
                 toValue: 1,
                 duration: 200,
@@ -174,46 +168,11 @@ const Game = () => {
             });
         } else {
             setGameOver(true);
+            Vibration.vibrate(500);
         }
     };
 
-    const blockStyleA = {
-        backgroundColor: animatedValue.interpolate({
-            inputRange: [0, 1],
-            outputRange: [colorA, colorA],
-        }),
-        height: blockHeight,
-        transform: [
-            {
-                translateY: animatedValue.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [0, -blockHeight],
-                }),
-            },
-        ],
-    };
-
-    const blockStyleB = {
-        backgroundColor: animatedValue.interpolate({
-            inputRange: [0, 1],
-            outputRange: [colorB, colorB],
-        }),
-        height: blockHeight,
-        transform: [
-            {
-                translateY: animatedValue.interpolate({
-                    inputRange: [0, 1],
-                    outputRange: [0, -blockHeight],
-                }),
-            },
-        ],
-    };
-
-    const blockStyleC = {
-        backgroundColor: animatedValue.interpolate({
-            inputRange: [0, 1],
-            outputRange: [colorC, colorC],
-        }),
+    const blockStyle = {
         height: blockHeight,
         transform: [
             {
@@ -227,15 +186,15 @@ const Game = () => {
 
     return (
         <SafeAreaView style={{ flex: 1 }}>
-            <Animated.View style={blockStyleA}>
+            <Animated.View style={blockStyle}>
                 <CustomCard
                     fullname={stateA.fullname}
                     username={stateA.username}
                     followers={stateA.followers_count}
                     image_url={stateA.image_url}
                 />
             </Animated.View>
-            <Animated.View style={blockStyleB}>
+            <Animated.View style={blockStyle}>
                 <CustomCard
                     fullname={stateB.fullname}
                     username={stateB.username}
@@ -244,7 +203,7 @@ const Game = () => {
                     hideFollowers={hideFollowers}
                 />
             </Animated.View>
-            <Animated.View style={blockStyleC}>
+            <Animated.View style={blockStyle}>
                 <CustomCard
                     fullname={stateC.fullname}
                     username={stateC.username}