guess Game added

guess_game/.gitignore

@@ -0,0 +1,35 @@
+# Learn more https://docs.github.com/en/get-started/getting-started-with-git/ignoring-files
+
+# dependencies
+node_modules/
+
+# Expo
+.expo/
+dist/
+web-build/
+
+# Native
+*.orig.*
+*.jks
+*.p8
+*.p12
+*.key
+*.mobileprovision
+
+# Metro
+.metro-health-check*
+
+# debug
+npm-debug.*
+yarn-debug.*
+yarn-error.*
+
+# macOS
+.DS_Store
+*.pem
+
+# local env files
+.env*.local
+
+# typescript
+*.tsbuildinfo

guess_game/App.js

@@ -0,0 +1,69 @@
+import { ImageBackground, SafeAreaView } from "react-native";
+import StartGameScreen from "./screens/StartGameScreen";
+import { LinearGradient } from "expo-linear-gradient";
+import GameScreen from "./screens/GameScreen";
+import { useState } from "react";
+import GameOverScreen from "./screens/GameOverScreen";
+import { useFonts } from "expo-font";
+import AppLoading from "expo-app-loading";
+export default function App() {
+  const [userNumber, setUserNumber] = useState();
+  const [gameOver, setGameOver] = useState(true);
+  const [roundsGame, setRoundsGame] = useState(0);
+  const [fontsLoaded] = useFonts({
+    Poppins: require("./assets/font/Poppins-Black.ttf"),
+    Mons: require("./assets/font/Montserrat-VariableFont_wght.ttf"),
+  });
+
+  if (!fontsLoaded) {
+    return <AppLoading />;
+  }
+
+  const pickedNumberHandler = (pickedNumber) => {
+    setUserNumber(pickedNumber);
+    setGameOver(false);
+  };
+  const gameOverHandler = (numberRounds) => {
+    setGameOver(true);
+    setRoundsGame(numberRounds);
+  };
+
+  let screen = <StartGameScreen onPickNumber={pickedNumberHandler} />;
+
+  if (userNumber) {
+    screen = (
+      <GameScreen userNumber={userNumber} onGameOver={gameOverHandler} />
+    );
+  }
+
+  const replayGameHandler = () => {
+    setUserNumber(null);
+    setGameOver(false);
+    setRoundsGame(0);
+    screen = <StartGameScreen />;
+  };
+  if (gameOver && userNumber) {
+    screen = (
+      <GameOverScreen
+        userNumber={userNumber}
+        replayGame={replayGameHandler}
+        roundsNumber={roundsGame}
+      />
+    );
+  }
+
+  return (
+    <LinearGradient className="flex-1" colors={["#4e0829", "#ddb52f"]}>
+      <ImageBackground
+        className="w-full h-full"
+        imageStyle={{ opacity: 0.15 }}
+        source={{
+          uri: "https://github.com/academind/react-native-practical-guide-code/blob/04-deep-dive-real-app/extra-files/images/background.png?raw=true",
+        }}
+        resizeMode="cover"
+      >
+        <SafeAreaView className="p-3">{screen}</SafeAreaView>
+      </ImageBackground>
+    </LinearGradient>
+  );
+}

guess_game/app.json

@@ -0,0 +1,28 @@
+{
+  "expo": {
+    "name": "Task",
+    "slug": "Task",
+    "version": "1.0.0",
+    "orientation": "default",
+    "icon": "./assets/icon.png",
+    "userInterfaceStyle": "light",
+    "splash": {
+      "image": "./assets/splash.png",
+      "resizeMode": "contain",
+      "backgroundColor": "#ffffff"
+    },
+    "ios": {
+      "supportsTablet": true
+    },
+    "android": {
+      "adaptiveIcon": {
+        "foregroundImage": "./assets/adaptive-icon.png",
+        "backgroundColor": "#ffffff"
+      }
+    },
+    "web": {
+      "favicon": "./assets/favicon.png"
+    },
+    "plugins": ["expo-font"]
+  }
+}

guess_game/app/GameLogItem.jsx

@@ -0,0 +1,12 @@
+import { View, Text } from "react-native";
+import React from "react";
+
+export default function GameLogItem({ roundNumber, guess }) {
+  return (
+    <View className="flex flex-row border-2  justify-between px-14 m-2 bg-yellow-500 p-4 rounded-3xl">
+      <Text className="text-xl font-[Poppins]">#{roundNumber}</Text>
+
+      <Text className="text-xl font-[Poppins]">Opponent's guess: {guess}</Text>
+    </View>
+  );
+}

guess_game/app/components/NumberContainer.jsx

@@ -0,0 +1,10 @@
+import { View, Text } from "react-native";
+import React from "react";
+
+export default function NumberContainer({ children }) {
+  return (
+    <View className="border-1  border-orange-500 border-4 rounded-xl m-6 p-8  items-center justify-center">
+      <Text className="text-orange-400 text-5xl font-bold">{children}</Text>
+    </View>
+  );
+}

guess_game/app/components/PrimaryButton.jsx

@@ -0,0 +1,14 @@
+import { View, Text, TouchableOpacity } from "react-native";
+
+export default function PrimaryButton({ title,onPress }) {
+  return (
+    <View className="flex">
+      <TouchableOpacity
+        onPress={onPress}
+        className="flex px-6 py-1 mb-2 shadow rounded-full bg-orange-400 w-fit"
+      >
+        <Text className="text-2xl text-center">{title}</Text>
+      </TouchableOpacity>
+    </View>
+  );
+}

guess_game/app/components/Title.jsx

@@ -0,0 +1,10 @@
+import { View, Text } from "react-native";
+import React from "react";
+
+export default function Title({ children }) {
+  return (
+    <Text className="text-3xl text-center text-white font-bold border-2 border-white p-3">
+      {children}
+    </Text>
+  );
+}

guess_game/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = function (api) {
+  api.cache(true);
+  return {
+    presets: ["babel-preset-expo"],
+    plugins: ["nativewind/babel"],
+  };
+};

guess_game/nativewind-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="nativewind/types" />