From cdc0b70b87b19b5f9e637eb0d11b8064d32fa40f Mon Sep 17 00:00:00 2001
From: PriestFaria <timurchikus@gmail.com>
Date: Tue, 8 Jul 2025 20:27:12 +0300
Subject: [PATCH 1/3] camera boilerplate

---
 client/package.json                           |   1 +
 client/src/components/overlays/camera.tsx     | 161 ++++++++++++++++++
 .../screens/main/game/game.screen.tsx         |  12 ++
 .../components/screens/main/home.screen.tsx   |  21 ++-
 client/src/components/ui/icons/icons.tsx      |  32 +++-
 client/yarn.lock                              |   7 +
 6 files changed, 230 insertions(+), 4 deletions(-)
 create mode 100644 client/src/components/overlays/camera.tsx

diff --git a/client/package.json b/client/package.json
index 83df71b..6863b31 100644
--- a/client/package.json
+++ b/client/package.json
@@ -24,6 +24,7 @@
     "class-variance-authority": "^0.7.1",
     "expo": "53.0.12",
     "expo-blur": "~14.1.5",
+    "expo-camera": "~16.1.10",
     "expo-constants": "~17.1.6",
     "expo-dev-client": "~5.2.1",
     "expo-gradle-ext-vars": "^0.1.3",
diff --git a/client/src/components/overlays/camera.tsx b/client/src/components/overlays/camera.tsx
new file mode 100644
index 0000000..f791f6c
--- /dev/null
+++ b/client/src/components/overlays/camera.tsx
@@ -0,0 +1,161 @@
+import { IconContainer } from "@/components/ui/icons/icon-container";
+import { Icons } from "@/components/ui/icons/icons";
+import { useSocket } from "@/shared/hooks/useSocket";
+import { BlurView } from "expo-blur";
+import React, { useRef, useEffect, useState } from "react";
+import {
+  Pressable,
+  ScrollView,
+  View,
+  ScrollView as ScrollViewType,
+  Platform,
+  KeyboardAvoidingView,
+  StyleSheet,
+  Text,
+} from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { twMerge } from "tailwind-merge";
+import { CameraView, CameraType, useCameraPermissions } from "expo-camera";
+import { Button } from "../ui/button";
+import { logger } from "@/shared/instances/logger.instance";
+
+interface CameraOverlayProps {
+  visible?: boolean;
+  onClose: () => void;
+}
+
+export const CameraOverlay = ({ visible, onClose }: CameraOverlayProps) => {
+  const [permission, requestPermission] = useCameraPermissions();
+  const [facing, setFacing] = useState<CameraType>("back");
+
+  const { emit } = useSocket();
+
+  const scrollViewRef = useRef<ScrollViewType>(null);
+
+  const opacity = useSharedValue(0);
+
+  const ref = useRef<CameraView>(null);
+
+  const toggleFacing = () => {
+    setFacing((prev) => (prev === "back" ? "front" : "back"));
+  };
+
+  useEffect(() => {
+    if (visible) {
+      opacity.value = withTiming(1, { duration: 300 });
+    } else {
+      opacity.value = withTiming(0, { duration: 300 });
+    }
+  }, [visible]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  if (!permission) {
+    return <View />;
+  }
+  return (
+    <Animated.View
+      style={animatedStyle}
+      className="absolute w-full h-full flex justify-end items-center z-30"
+      pointerEvents={visible ? "auto" : "none"}
+    >
+      <Pressable
+        onPress={onClose}
+        className="absolute top-0 left-0 right-0 bottom-0"
+      />
+      <BlurView
+        experimentalBlurMethod="dimezisBlurView"
+        intensity={100}
+        tint="dark"
+        className="absolute w-full h-full z-10"
+      />
+
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        style={{ zIndex: 30 }}
+        keyboardVerticalOffset={Platform.OS === "ios" ? 0 : 0}
+        className={twMerge(
+          "py-[40px] px-[36px] h-[85%] flex-1 rounded-[30px] w-full z-30 flex flex-col justify-center gap-16"
+        )}
+      >
+        <View className="flex flex-col justify-start">
+          {!permission.granted && (
+            <Button
+              text={"Дать разрешение на использование камеры"}
+              onPress={requestPermission}
+            />
+          )}
+          <View className="w-[360px] h-[360px] rounded-[16px] overflow-hidden">
+            {permission.granted && (
+              <CameraView style={styles.camera} ref={ref} facing={facing} />
+            )}
+          </View>
+        </View>
+
+        <View className="flex flex-row gap-[53px] pb-12 items-center justify-center w-full">
+          <Pressable onPress={() => {}} className="opacity-0">
+            <IconContainer className="bg-accent_primary">
+              <Icons.Camera />
+            </IconContainer>
+          </Pressable>
+          <Pressable
+            onPress={async () => {
+              logger.log("ui", "pressed");
+              const photo = await ref.current?.takePictureAsync();
+              logger.log("ui", "unpressed");
+              logger.log("ui", photo?.uri);
+            }}
+          >
+            <IconContainer className="bg-accent_primary border-[3px] border-[#FFF] w-[86px] h-[86px]">
+              <Icons.TakePhoto />
+            </IconContainer>
+          </Pressable>
+          <Pressable onPress={toggleFacing}>
+            <IconContainer className="bg-accent_primary">
+              <Icons.Camera />
+            </IconContainer>
+          </Pressable>
+        </View>
+      </KeyboardAvoidingView>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+  },
+  message: {
+    textAlign: "center",
+    paddingBottom: 10,
+  },
+  camera: {
+    zIndex: 1000,
+    flex: 1,
+    width: 360,
+    height: 360,
+  },
+  buttonContainer: {
+    flex: 1,
+    flexDirection: "row",
+    backgroundColor: "transparent",
+    margin: 64,
+  },
+  button: {
+    flex: 1,
+    alignSelf: "flex-end",
+    alignItems: "center",
+  },
+  text: {
+    fontSize: 24,
+    fontWeight: "bold",
+    color: "white",
+  },
+});
diff --git a/client/src/components/screens/main/game/game.screen.tsx b/client/src/components/screens/main/game/game.screen.tsx
index 0b79ae8..324f9f8 100644
--- a/client/src/components/screens/main/game/game.screen.tsx
+++ b/client/src/components/screens/main/game/game.screen.tsx
@@ -27,6 +27,7 @@ import { BlurView } from "expo-blur";
 import { RouteMarker } from "@/components/ui/map/route-marker";
 import { PauseScreen } from "./pause.screen";
 import { isPause } from "@/shared/interfaces/polls/pause";
+import { CameraOverlay } from "@/components/overlays/camera";
 
 type NavProp = StackNavigationProp<
   GameStackParamList & MainStackParamList,
@@ -47,6 +48,8 @@ export const GameScreen = () => {
 
   const [chatOpened, setChatOpened] = useState<boolean>(false);
   const [pauseOpened, setPauseOpened] = useState<boolean>(false);
+  const [cameraOverlayVisible, setCameraOverlayVisible] =
+    useState<boolean>(false);
 
   const togglePauseGame = useCallback(() => {
     if (!game) return;
@@ -152,6 +155,11 @@ export const GameScreen = () => {
               <Icons.Chat />
             </IconContainer>
           </Pressable>
+          <Pressable onPress={() => setCameraOverlayVisible(true)}>
+            <IconContainer>
+              <Icons.Camera />
+            </IconContainer>
+          </Pressable>
         </View>
       )}
 
@@ -242,6 +250,10 @@ export const GameScreen = () => {
 
       <ChatScreen visible={chatOpened} onClose={() => setChatOpened(false)} />
       <PauseScreen visible={pauseOpened} />
+      <CameraOverlay
+        visible={cameraOverlayVisible}
+        onClose={() => setCameraOverlayVisible(false)}
+      />
 
       <LeaderboardSheet
         ref={leaderboardSheet}
diff --git a/client/src/components/screens/main/home.screen.tsx b/client/src/components/screens/main/home.screen.tsx
index ad752a2..dd390ad 100644
--- a/client/src/components/screens/main/home.screen.tsx
+++ b/client/src/components/screens/main/home.screen.tsx
@@ -12,7 +12,7 @@ import { StatusBar } from "expo-status-bar";
 import { Avatar } from "@/components/ui/avatar";
 import { RouteMarker } from "@/components/ui/map/route-marker";
 import { useAuthStore } from "@/shared/stores/auth.store";
-import { useEffect, useRef } from "react";
+import { useEffect, useRef, useState } from "react";
 import { JoinBottomSheet } from "@/components/widgets/join-bottom-sheet";
 import { useCreateGame } from "@/shared/api/hooks/useCreateGame";
 import BottomSheet from "@gorhom/bottom-sheet";
@@ -25,6 +25,7 @@ import { useGame } from "@/shared/api/hooks/useGame";
 import { ModalCard } from "@/components/widgets/modal-card";
 import { logger } from "@/shared/instances/logger.instance";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { CameraOverlay } from "@/components/overlays/camera";
 
 export const HomeScreen = () => {
   const navigation = useNavigation<StackNavigationProp<MainStackParamList>>();
@@ -85,9 +86,12 @@ export const HomeScreen = () => {
 
   const insets = useSafeAreaInsets();
 
+  const [cameraOverlayVisible, setCameraOverlayVisible] =
+    useState<boolean>(false);
+
   return (
     <View className="flex-1">
-      <Map>
+      {/* <Map>
         {location && user && (
           <>
             <PlayerMarker
@@ -121,7 +125,7 @@ export const HomeScreen = () => {
             [30.344544, 59.958102],
           ]}
         />
-      </Map>
+      </Map> */}
 
       <View
         style={{ top: insets.top }}
@@ -134,6 +138,12 @@ export const HomeScreen = () => {
             </IconContainer>
           </Pressable>
 
+          <Pressable onPress={() => setCameraOverlayVisible(true)}>
+            <IconContainer>
+              <Icons.Camera />
+            </IconContainer>
+          </Pressable>
+
           {user && (
             <Pressable onPress={account}>
               <Avatar
@@ -182,6 +192,11 @@ export const HomeScreen = () => {
         children={undefined}
       />
 
+      <CameraOverlay
+        visible={cameraOverlayVisible}
+        onClose={() => setCameraOverlayVisible(false)}
+      />
+
       <StatusBar style="dark" />
     </View>
   );
diff --git a/client/src/components/ui/icons/icons.tsx b/client/src/components/ui/icons/icons.tsx
index cf0ea92..a40603f 100644
--- a/client/src/components/ui/icons/icons.tsx
+++ b/client/src/components/ui/icons/icons.tsx
@@ -1,5 +1,5 @@
 import { ViewStyle } from "react-native";
-import Svg, { ClipPath, Defs, G, Path, Rect } from "react-native-svg";
+import Svg, { Circle, ClipPath, Defs, G, Path, Rect } from "react-native-svg";
 
 export const Icons = {
   Store: () => {
@@ -244,4 +244,34 @@ export const Icons = {
       </Svg>
     );
   },
+
+  TakePhoto: () => {
+    return (
+      <Svg width="92" height="92" viewBox="0 0 92 92" fill="none">
+        <Rect
+          x="1.5"
+          y="1.5"
+          width="89"
+          height="89"
+          rx="44.5"
+          stroke="white"
+          strokeWidth="3"
+        />
+        <Circle x="46.32" cy="46.0002" r="40.32" fill="#975DFF" />
+      </Svg>
+    );
+  },
+  Revert: () => {
+    return (
+      <Svg width="30" height="30" viewBox="0 0 30 30" fill="none">
+        <Path
+          d="M26.401 11.4009C25.6119 9.00013 24.0849 6.90972 22.0379 5.42776C19.9908 3.94581 17.5282 3.14795 15.001 3.14795C12.4738 3.14795 10.0111 3.94581 7.96407 5.42776C5.91702 6.90972 4.39009 9.00013 3.60098 11.4009M3.00098 6.60095V11.4009H7.80098M22.201 18.6009H27.001V23.4009M3.60098 18.6009C4.39009 21.0018 5.91702 23.0922 7.96407 24.5741C10.0111 26.0561 12.4738 26.8539 15.001 26.8539C17.5282 26.8539 19.9908 26.0561 22.0379 24.5741C24.0849 23.0922 25.6119 21.0018 26.401 18.6009"
+          stroke="white"
+          strokeWidth="2.4"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </Svg>
+    );
+  },
 };
diff --git a/client/yarn.lock b/client/yarn.lock
index c06e2f2..f32d586 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -4380,6 +4380,13 @@ expo-blur@~14.1.5:
   resolved "https://registry.yarnpkg.com/expo-blur/-/expo-blur-14.1.5.tgz#910712389e19286ccdc136275bf569f427aa05ef"
   integrity sha512-CCLJHxN4eoAl06ESKT3CbMasJ98WsjF9ZQEJnuxtDb9ffrYbZ+g9ru84fukjNUOTtc8A8yXE5z8NgY1l0OMrmQ==
 
+expo-camera@~16.1.10:
+  version "16.1.10"
+  resolved "https://registry.yarnpkg.com/expo-camera/-/expo-camera-16.1.10.tgz#56dd7abc118b4de1771e6b64739197c2277f4083"
+  integrity sha512-qoRJeSwPmMbuu0VfnQTC+q79Kt2SqTWColEImgithL9u0qUQcC55U89IfhZk55Hpt6f1DgKuDzUOG5oY+snSWg==
+  dependencies:
+    invariant "^2.2.4"
+
 expo-constants@~17.1.5, expo-constants@~17.1.6:
   version "17.1.6"
   resolved "https://registry.npmjs.org/expo-constants/-/expo-constants-17.1.6.tgz"

From 8bc6f04ab876b03f15d07fb88ebc0b109f83a10f Mon Sep 17 00:00:00 2001
From: PriestFaria <timurchikus@gmail.com>
Date: Tue, 8 Jul 2025 20:55:29 +0300
Subject: [PATCH 2/3] created camera hook

---
 client/src/components/overlays/camera.tsx     |  47 ++++----
 .../screens/main/game/game.screen.tsx         | 105 ++++++++++--------
 client/src/shared/hooks/useCamera.ts          |  33 ++++++
 3 files changed, 112 insertions(+), 73 deletions(-)
 create mode 100644 client/src/shared/hooks/useCamera.ts

diff --git a/client/src/components/overlays/camera.tsx b/client/src/components/overlays/camera.tsx
index f791f6c..09692d0 100644
--- a/client/src/components/overlays/camera.tsx
+++ b/client/src/components/overlays/camera.tsx
@@ -1,8 +1,7 @@
 import { IconContainer } from "@/components/ui/icons/icon-container";
 import { Icons } from "@/components/ui/icons/icons";
-import { useSocket } from "@/shared/hooks/useSocket";
 import { BlurView } from "expo-blur";
-import React, { useRef, useEffect, useState } from "react";
+import React, { useEffect } from "react";
 import {
   Pressable,
   ScrollView,
@@ -19,31 +18,27 @@ import Animated, {
   withTiming,
 } from "react-native-reanimated";
 import { twMerge } from "tailwind-merge";
-import { CameraView, CameraType, useCameraPermissions } from "expo-camera";
 import { Button } from "../ui/button";
 import { logger } from "@/shared/instances/logger.instance";
-
+import { useCamera } from "@/shared/hooks/useCamera";
+import { CameraView } from "expo-camera";
 interface CameraOverlayProps {
   visible?: boolean;
   onClose: () => void;
 }
 
 export const CameraOverlay = ({ visible, onClose }: CameraOverlayProps) => {
-  const [permission, requestPermission] = useCameraPermissions();
-  const [facing, setFacing] = useState<CameraType>("back");
-
-  const { emit } = useSocket();
-
-  const scrollViewRef = useRef<ScrollViewType>(null);
+  const {
+    cameraRef,
+    permission,
+    requestPermission,
+    facing,
+    toggleFacing,
+    takePhoto,
+  } = useCamera();
 
   const opacity = useSharedValue(0);
 
-  const ref = useRef<CameraView>(null);
-
-  const toggleFacing = () => {
-    setFacing((prev) => (prev === "back" ? "front" : "back"));
-  };
-
   useEffect(() => {
     if (visible) {
       opacity.value = withTiming(1, { duration: 300 });
@@ -81,10 +76,10 @@ export const CameraOverlay = ({ visible, onClose }: CameraOverlayProps) => {
         style={{ zIndex: 30 }}
         keyboardVerticalOffset={Platform.OS === "ios" ? 0 : 0}
         className={twMerge(
-          "py-[40px] px-[36px] h-[85%] flex-1 rounded-[30px] w-full z-30 flex flex-col justify-center gap-16"
+          "py-[40px] px-[36px] h-[85%] mb-[80px] flex-1 rounded-[30px] w-full z-30 flex flex-col justify-end gap-16"
         )}
       >
-        <View className="flex flex-col justify-start">
+        <View className="flex flex-col justify-center">
           {!permission.granted && (
             <Button
               text={"Дать разрешение на использование камеры"}
@@ -93,7 +88,11 @@ export const CameraOverlay = ({ visible, onClose }: CameraOverlayProps) => {
           )}
           <View className="w-[360px] h-[360px] rounded-[16px] overflow-hidden">
             {permission.granted && (
-              <CameraView style={styles.camera} ref={ref} facing={facing} />
+              <CameraView
+                style={styles.camera}
+                ref={cameraRef}
+                facing={facing}
+              />
             )}
           </View>
         </View>
@@ -106,10 +105,8 @@ export const CameraOverlay = ({ visible, onClose }: CameraOverlayProps) => {
           </Pressable>
           <Pressable
             onPress={async () => {
-              logger.log("ui", "pressed");
-              const photo = await ref.current?.takePictureAsync();
-              logger.log("ui", "unpressed");
-              logger.log("ui", photo?.uri);
+              const photo = await takePhoto();
+              logger.log("ui", photo);
             }}
           >
             <IconContainer className="bg-accent_primary border-[3px] border-[#FFF] w-[86px] h-[86px]">
@@ -117,8 +114,8 @@ export const CameraOverlay = ({ visible, onClose }: CameraOverlayProps) => {
             </IconContainer>
           </Pressable>
           <Pressable onPress={toggleFacing}>
-            <IconContainer className="bg-accent_primary">
-              <Icons.Camera />
+            <IconContainer className="bg-primary p-[13px]">
+              <Icons.Revert />
             </IconContainer>
           </Pressable>
         </View>
diff --git a/client/src/components/screens/main/game/game.screen.tsx b/client/src/components/screens/main/game/game.screen.tsx
index 324f9f8..aefc475 100644
--- a/client/src/components/screens/main/game/game.screen.tsx
+++ b/client/src/components/screens/main/game/game.screen.tsx
@@ -48,7 +48,7 @@ export const GameScreen = () => {
 
   const [chatOpened, setChatOpened] = useState<boolean>(false);
   const [pauseOpened, setPauseOpened] = useState<boolean>(false);
-  const [cameraOverlayVisible, setCameraOverlayVisible] =
+  const [cameraOverlayOpened, setCameraOverlayOpened] =
     useState<boolean>(false);
 
   const togglePauseGame = useCallback(() => {
@@ -101,47 +101,49 @@ export const GameScreen = () => {
 
   return (
     <View className="flex-1">
-      <Map>
-        {location && players && (
-          <>
-            {players?.map((player, index) => (
-              <PlayerMarker
-                key={index}
-                coordinate={
-                  player.user.id === user?.id
-                    ? { lon: location[0], lat: location[1] }
-                    : player.location
-                }
-                name={player?.user.name ?? player.user.username}
-                avatarSrc={{
-                  uri: avatars?.find(
-                    (x) => x.id === player.user.styles?.avatarId
-                  )?.style.url,
-                }}
-              />
-            ))}
-          </>
-        )}
+      {!cameraOverlayOpened && (
+        <Map>
+          {location && players && (
+            <>
+              {players?.map((player, index) => (
+                <PlayerMarker
+                  key={index}
+                  coordinate={
+                    player.user.id === user?.id
+                      ? { lon: location[0], lat: location[1] }
+                      : player.location
+                  }
+                  name={player?.user.name ?? player.user.username}
+                  avatarSrc={{
+                    uri: avatars?.find(
+                      (x) => x.id === player.user.styles?.avatarId
+                    )?.style.url,
+                  }}
+                />
+              ))}
+            </>
+          )}
 
-        {game && game?.route && (
-          <RouteMarker
-            points={game.route.taskPoints.map((x) => [
-              x.location.lon,
-              x.location.lat,
-            ])}
-            path={game.route.taskPoints.map((x) => [
-              x.location.lon,
-              x.location.lat,
-            ])}
+          {game && game?.route && (
+            <RouteMarker
+              points={game.route.taskPoints.map((x) => [
+                x.location.lon,
+                x.location.lat,
+              ])}
+              path={game.route.taskPoints.map((x) => [
+                x.location.lon,
+                x.location.lat,
+              ])}
+            />
+          )}
+          <Camera
+            defaultSettings={{
+              centerCoordinate: location || DEFAULT_MAP_CAMERA_LOCATION,
+              zoomLevel: 12,
+            }}
           />
-        )}
-        <Camera
-          defaultSettings={{
-            centerCoordinate: location || DEFAULT_MAP_CAMERA_LOCATION,
-            zoomLevel: 12,
-          }}
-        />
-      </Map>
+        </Map>
+      )}
       {!chatOpened && (
         <View className="absolute px-[5%] gap-4 bottom-12 flex items-center flex-row left-0 right-0 z-10">
           <Pressable onPress={togglePauseGame}>
@@ -149,13 +151,17 @@ export const GameScreen = () => {
               {pauseOpened ? <Icons.Play /> : <Icons.Pause />}
             </IconContainer>
           </Pressable>
-          <Button text="Поймать" className="flex-1" />
+          <Button
+            text="Поймать"
+            className="flex-1"
+            onPress={() => setCameraOverlayOpened(true)}
+          />
           <Pressable onPress={openChat}>
             <IconContainer>
               <Icons.Chat />
             </IconContainer>
           </Pressable>
-          <Pressable onPress={() => setCameraOverlayVisible(true)}>
+          <Pressable onPress={() => setCameraOverlayOpened(true)}>
             <IconContainer>
               <Icons.Camera />
             </IconContainer>
@@ -167,14 +173,17 @@ export const GameScreen = () => {
         <View className="w-[90%] mx-auto flex-row justify-between items-center">
           <Pressable
             onPress={
-              chatOpened
-                ? () => setChatOpened(false)
+              chatOpened || cameraOverlayOpened
+                ? () => {
+                    setChatOpened(false);
+                    setCameraOverlayOpened(false);
+                  }
                 : () => setModalOpened(true)
             }
           >
             <IconContainer>
-              {chatOpened && <Icons.Back />}
-              {!chatOpened && <Icons.Exit />}
+              {(chatOpened || cameraOverlayOpened) && <Icons.Back />}
+              {!chatOpened && !cameraOverlayOpened && <Icons.Exit />}
             </IconContainer>
           </Pressable>
 
@@ -251,8 +260,8 @@ export const GameScreen = () => {
       <ChatScreen visible={chatOpened} onClose={() => setChatOpened(false)} />
       <PauseScreen visible={pauseOpened} />
       <CameraOverlay
-        visible={cameraOverlayVisible}
-        onClose={() => setCameraOverlayVisible(false)}
+        visible={cameraOverlayOpened}
+        onClose={() => setCameraOverlayOpened(false)}
       />
 
       <LeaderboardSheet
diff --git a/client/src/shared/hooks/useCamera.ts b/client/src/shared/hooks/useCamera.ts
new file mode 100644
index 0000000..ac862d0
--- /dev/null
+++ b/client/src/shared/hooks/useCamera.ts
@@ -0,0 +1,33 @@
+import { useState, useRef, useEffect } from "react";
+import { CameraType, useCameraPermissions, CameraView } from "expo-camera";
+import { CameraCapturedPicture } from "expo-camera/src/Camera.types";
+
+export const useCamera = () => {
+  const [permission, requestPermission] = useCameraPermissions();
+  const [facing, setFacing] = useState<CameraType>("back");
+  const [photo, setPhoto] = useState<CameraCapturedPicture | null>(null);
+
+  const ref = useRef<CameraView>(null);
+
+  const toggleFacing = () => {
+    setFacing((prev) => (prev === "back" ? "front" : "back"));
+  };
+
+  const takePhoto = async () => {
+    if (ref.current) {
+      const result = await ref.current.takePictureAsync();
+      setPhoto(result);
+      return result;
+    }
+  };
+
+  return {
+    cameraRef: ref,
+    permission,
+    requestPermission,
+    facing,
+    toggleFacing,
+    takePhoto,
+    photo,
+  };
+};

From 42fac8916a5b47c6b6ca83d476124224a611b489 Mon Sep 17 00:00:00 2001
From: PriestFaria <timurchikus@gmail.com>
Date: Tue, 8 Jul 2025 22:57:51 +0300
Subject: [PATCH 3/3] camera bolerplate x2

---
 client/package.json                           |   1 +
 client/src/components/overlays/camera.tsx     |  23 ++-
 client/src/components/overlays/send-photo.tsx | 148 ++++++++++++++++++
 .../screens/main/game/game.screen.tsx         |  52 ++++--
 .../screens/main/game/lobby.screen.tsx        |   2 -
 .../components/screens/main/home.screen.tsx   |  15 +-
 client/src/shared/api/s3.api.ts               |  33 ++++
 client/src/shared/hooks/useCamera.ts          |  13 +-
 client/src/shared/stores/camera.store.ts      |  12 ++
 client/yarn.lock                              |   5 +
 10 files changed, 260 insertions(+), 44 deletions(-)
 create mode 100644 client/src/components/overlays/send-photo.tsx
 create mode 100644 client/src/shared/api/s3.api.ts
 create mode 100644 client/src/shared/stores/camera.store.ts

diff --git a/client/package.json b/client/package.json
index 6863b31..817fabf 100644
--- a/client/package.json
+++ b/client/package.json
@@ -27,6 +27,7 @@
     "expo-camera": "~16.1.10",
     "expo-constants": "~17.1.6",
     "expo-dev-client": "~5.2.1",
+    "expo-file-system": "~18.1.11",
     "expo-gradle-ext-vars": "^0.1.3",
     "expo-haptics": "~14.1.4",
     "expo-linking": "~7.1.5",
diff --git a/client/src/components/overlays/camera.tsx b/client/src/components/overlays/camera.tsx
index 09692d0..75fd738 100644
--- a/client/src/components/overlays/camera.tsx
+++ b/client/src/components/overlays/camera.tsx
@@ -4,13 +4,11 @@ import { BlurView } from "expo-blur";
 import React, { useEffect } from "react";
 import {
   Pressable,
-  ScrollView,
   View,
   ScrollView as ScrollViewType,
   Platform,
   KeyboardAvoidingView,
   StyleSheet,
-  Text,
 } from "react-native";
 import Animated, {
   useAnimatedStyle,
@@ -22,12 +20,18 @@ import { Button } from "../ui/button";
 import { logger } from "@/shared/instances/logger.instance";
 import { useCamera } from "@/shared/hooks/useCamera";
 import { CameraView } from "expo-camera";
+
 interface CameraOverlayProps {
   visible?: boolean;
   onClose: () => void;
+  onSucces: () => void;
 }
 
-export const CameraOverlay = ({ visible, onClose }: CameraOverlayProps) => {
+export const CameraOverlay = ({
+  visible,
+  onClose,
+  onSucces,
+}: CameraOverlayProps) => {
   const {
     cameraRef,
     permission,
@@ -86,8 +90,8 @@ export const CameraOverlay = ({ visible, onClose }: CameraOverlayProps) => {
               onPress={requestPermission}
             />
           )}
-          <View className="w-[360px] h-[360px] rounded-[16px] overflow-hidden">
-            {permission.granted && (
+          <View className="w-[360px] h-[360px] rounded-[16px] z-10 overflow-hidden">
+            {permission.granted && visible && (
               <CameraView
                 style={styles.camera}
                 ref={cameraRef}
@@ -105,8 +109,12 @@ export const CameraOverlay = ({ visible, onClose }: CameraOverlayProps) => {
           </Pressable>
           <Pressable
             onPress={async () => {
-              const photo = await takePhoto();
-              logger.log("ui", photo);
+              try {
+                const photo = await takePhoto();
+                onSucces();
+              } catch (error) {
+                logger.error("ui", "Error taking photo");
+              }
             }}
           >
             <IconContainer className="bg-accent_primary border-[3px] border-[#FFF] w-[86px] h-[86px]">
@@ -134,7 +142,6 @@ const styles = StyleSheet.create({
     paddingBottom: 10,
   },
   camera: {
-    zIndex: 1000,
     flex: 1,
     width: 360,
     height: 360,
diff --git a/client/src/components/overlays/send-photo.tsx b/client/src/components/overlays/send-photo.tsx
new file mode 100644
index 0000000..3e27e34
--- /dev/null
+++ b/client/src/components/overlays/send-photo.tsx
@@ -0,0 +1,148 @@
+import { IconContainer } from "@/components/ui/icons/icon-container";
+import { Icons } from "@/components/ui/icons/icons";
+import { BlurView } from "expo-blur";
+import React, { useEffect, useState } from "react";
+import {
+  Pressable,
+  View,
+  Platform,
+  KeyboardAvoidingView,
+  StyleSheet,
+  Text,
+  Image,
+} from "react-native";
+import Animated, {
+  useAnimatedStyle,
+  useSharedValue,
+  withTiming,
+} from "react-native-reanimated";
+import { twMerge } from "tailwind-merge";
+import { Button } from "../ui/button";
+import { useCameraStore } from "@/shared/stores/camera.store";
+import { uploadImageToS3 } from "@/shared/api/s3.api";
+import { logger } from "@/shared/instances/logger.instance";
+import { useAuthStore } from "@/shared/stores/auth.store";
+import { useGameStore } from "@/shared/stores/game.store";
+import { Role } from "@/shared/interfaces/game/role";
+
+interface CameraOverlayProps {
+  visible?: boolean;
+  onClose: () => void;
+}
+
+export const SendPhotoOverlay = ({ visible, onClose }: CameraOverlayProps) => {
+  const { photo } = useCameraStore();
+  const { token } = useAuthStore();
+
+  const { game } = useGameStore();
+  const { user } = useAuthStore();
+  const opacity = useSharedValue(0);
+
+  useEffect(() => {
+    if (visible) {
+      opacity.value = withTiming(1, { duration: 300 });
+    } else {
+      opacity.value = withTiming(0, { duration: 300 });
+    }
+  }, [visible]);
+
+  const [role, setRole] = useState<Role>("catcher");
+  useEffect(() => {
+    const userRole = game?.players.find((x) => x.user.id === user?.id)?.role;
+    if (userRole) setRole(userRole);
+  }, [game]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  return (
+    <Animated.View
+      style={animatedStyle}
+      className="absolute w-full h-full flex justify-end items-center z-30"
+      pointerEvents={visible ? "auto" : "none"}
+    >
+      <Pressable
+        onPress={onClose}
+        className="absolute top-0 left-0 right-0 bottom-0"
+      />
+      <BlurView
+        experimentalBlurMethod="dimezisBlurView"
+        intensity={100}
+        tint="dark"
+        className="absolute w-full h-full z-10"
+      />
+
+      <KeyboardAvoidingView
+        behavior={Platform.OS === "ios" ? "padding" : "height"}
+        style={{ zIndex: 30 }}
+        keyboardVerticalOffset={Platform.OS === "ios" ? 0 : 0}
+        className={twMerge(
+          "py-[40px] px-[36px] h-[85%] mb-[80px] flex-1 rounded-[30px] w-full z-30 flex flex-col justify-end gap-16"
+        )}
+      >
+        <View className="flex flex-col justify-center">
+          <View className="w-[360px] h-[360px] rounded-[16px] overflow-hidden">
+            <Image
+              source={{ uri: photo?.uri }}
+              style={{ width: 360, height: 360 }}
+            />
+          </View>
+        </View>
+
+        <View className="flex flex-row gap-[53px] pb-12 items-center justify-center w-full">
+          <Button
+            text="Отправить"
+            onPress={async () => {
+              const result = await uploadImageToS3(
+                photo?.uri ?? "",
+                undefined,
+                "games"
+              );
+
+              if (role === "catcher") {
+              }
+              if (role === "runner") {
+              }
+
+              logger.log("ui", result.url);
+            }}
+          />
+        </View>
+      </KeyboardAvoidingView>
+    </Animated.View>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: "center",
+  },
+  message: {
+    textAlign: "center",
+    paddingBottom: 10,
+  },
+  camera: {
+    zIndex: 1000,
+    flex: 1,
+    width: 360,
+    height: 360,
+  },
+  buttonContainer: {
+    flex: 1,
+    flexDirection: "row",
+    backgroundColor: "transparent",
+    margin: 64,
+  },
+  button: {
+    flex: 1,
+    alignSelf: "flex-end",
+    alignItems: "center",
+  },
+  text: {
+    fontSize: 24,
+    fontWeight: "bold",
+    color: "white",
+  },
+});
diff --git a/client/src/components/screens/main/game/game.screen.tsx b/client/src/components/screens/main/game/game.screen.tsx
index aefc475..be5255f 100644
--- a/client/src/components/screens/main/game/game.screen.tsx
+++ b/client/src/components/screens/main/game/game.screen.tsx
@@ -28,6 +28,8 @@ import { RouteMarker } from "@/components/ui/map/route-marker";
 import { PauseScreen } from "./pause.screen";
 import { isPause } from "@/shared/interfaces/polls/pause";
 import { CameraOverlay } from "@/components/overlays/camera";
+import { useCamera } from "@/shared/hooks/useCamera";
+import { SendPhotoOverlay } from "@/components/overlays/send-photo";
 
 type NavProp = StackNavigationProp<
   GameStackParamList & MainStackParamList,
@@ -50,6 +52,8 @@ export const GameScreen = () => {
   const [pauseOpened, setPauseOpened] = useState<boolean>(false);
   const [cameraOverlayOpened, setCameraOverlayOpened] =
     useState<boolean>(false);
+  const [sendPhotoOverlayOpened, setSendPhotoOverlayOpened] =
+    useState<boolean>(false);
 
   const togglePauseGame = useCallback(() => {
     if (!game) return;
@@ -101,7 +105,7 @@ export const GameScreen = () => {
 
   return (
     <View className="flex-1">
-      {!cameraOverlayOpened && (
+      {!cameraOverlayOpened && !sendPhotoOverlayOpened && (
         <Map>
           {location && players && (
             <>
@@ -151,21 +155,18 @@ export const GameScreen = () => {
               {pauseOpened ? <Icons.Play /> : <Icons.Pause />}
             </IconContainer>
           </Pressable>
+
           <Button
             text="Поймать"
             className="flex-1"
             onPress={() => setCameraOverlayOpened(true)}
           />
+
           <Pressable onPress={openChat}>
             <IconContainer>
               <Icons.Chat />
             </IconContainer>
           </Pressable>
-          <Pressable onPress={() => setCameraOverlayOpened(true)}>
-            <IconContainer>
-              <Icons.Camera />
-            </IconContainer>
-          </Pressable>
         </View>
       )}
 
@@ -173,17 +174,22 @@ export const GameScreen = () => {
         <View className="w-[90%] mx-auto flex-row justify-between items-center">
           <Pressable
             onPress={
-              chatOpened || cameraOverlayOpened
+              chatOpened || cameraOverlayOpened || sendPhotoOverlayOpened
                 ? () => {
                     setChatOpened(false);
                     setCameraOverlayOpened(false);
+                    setSendPhotoOverlayOpened(false);
                   }
                 : () => setModalOpened(true)
             }
           >
             <IconContainer>
-              {(chatOpened || cameraOverlayOpened) && <Icons.Back />}
-              {!chatOpened && !cameraOverlayOpened && <Icons.Exit />}
+              {(chatOpened ||
+                cameraOverlayOpened ||
+                sendPhotoOverlayOpened) && <Icons.Back />}
+              {!chatOpened &&
+                !cameraOverlayOpened &&
+                !sendPhotoOverlayOpened && <Icons.Exit />}
             </IconContainer>
           </Pressable>
 
@@ -257,12 +263,28 @@ export const GameScreen = () => {
         />
       )}
 
-      <ChatScreen visible={chatOpened} onClose={() => setChatOpened(false)} />
-      <PauseScreen visible={pauseOpened} />
-      <CameraOverlay
-        visible={cameraOverlayOpened}
-        onClose={() => setCameraOverlayOpened(false)}
-      />
+      {chatOpened && (
+        <ChatScreen visible={chatOpened} onClose={() => setChatOpened(false)} />
+      )}
+      {pauseOpened && <PauseScreen visible={pauseOpened} />}
+
+      {cameraOverlayOpened && (
+        <CameraOverlay
+          visible={cameraOverlayOpened}
+          onClose={() => setCameraOverlayOpened(false)}
+          onSucces={() => {
+            setCameraOverlayOpened(false);
+            setSendPhotoOverlayOpened(true);
+          }}
+        />
+      )}
+
+      {sendPhotoOverlayOpened && (
+        <SendPhotoOverlay
+          visible={sendPhotoOverlayOpened}
+          onClose={() => setSendPhotoOverlayOpened(false)}
+        />
+      )}
 
       <LeaderboardSheet
         ref={leaderboardSheet}
diff --git a/client/src/components/screens/main/game/lobby.screen.tsx b/client/src/components/screens/main/game/lobby.screen.tsx
index dfeebf9..145f85d 100644
--- a/client/src/components/screens/main/game/lobby.screen.tsx
+++ b/client/src/components/screens/main/game/lobby.screen.tsx
@@ -46,8 +46,6 @@ export const LobbyScreen = () => {
     }
   }, [game?.state]);
 
-  useEffect(() => console.log(game?.players), [game]);
-
   const insets = useSafeAreaInsets();
   return (
     <View className="flex-1 bg-bg_primary" style={{ paddingTop: insets.top }}>
diff --git a/client/src/components/screens/main/home.screen.tsx b/client/src/components/screens/main/home.screen.tsx
index dd390ad..42c48a4 100644
--- a/client/src/components/screens/main/home.screen.tsx
+++ b/client/src/components/screens/main/home.screen.tsx
@@ -91,7 +91,7 @@ export const HomeScreen = () => {
 
   return (
     <View className="flex-1">
-      {/* <Map>
+      <Map>
         {location && user && (
           <>
             <PlayerMarker
@@ -125,7 +125,7 @@ export const HomeScreen = () => {
             [30.344544, 59.958102],
           ]}
         />
-      </Map> */}
+      </Map>
 
       <View
         style={{ top: insets.top }}
@@ -138,12 +138,6 @@ export const HomeScreen = () => {
             </IconContainer>
           </Pressable>
 
-          <Pressable onPress={() => setCameraOverlayVisible(true)}>
-            <IconContainer>
-              <Icons.Camera />
-            </IconContainer>
-          </Pressable>
-
           {user && (
             <Pressable onPress={account}>
               <Avatar
@@ -192,11 +186,6 @@ export const HomeScreen = () => {
         children={undefined}
       />
 
-      <CameraOverlay
-        visible={cameraOverlayVisible}
-        onClose={() => setCameraOverlayVisible(false)}
-      />
-
       <StatusBar style="dark" />
     </View>
   );
diff --git a/client/src/shared/api/s3.api.ts b/client/src/shared/api/s3.api.ts
new file mode 100644
index 0000000..e368827
--- /dev/null
+++ b/client/src/shared/api/s3.api.ts
@@ -0,0 +1,33 @@
+import { api } from "../instances/axios.instance";
+
+export const uploadImageToS3 = async (
+  uri: string,
+  filename?: string,
+  dir: string = "default"
+): Promise<{ url: string }> => {
+  const name = filename ?? uri.split("/").pop() ?? "photo.jpg";
+  const ext = name.split(".").pop()?.toLowerCase();
+  const type = ext === "png" ? "image/png" : "image/jpeg";
+
+  const formData = new FormData();
+  formData.append("file", {
+    uri,
+    type,
+    name,
+  } as any);
+
+  const encodedDir = encodeURIComponent(dir);
+
+  const response = await api.post<{ url: string }>(
+    `/api/v1/images/upload/by_file?dir=${encodedDir}`,
+    formData,
+    {
+      headers: {
+        "Content-Type": "multipart/form-data",
+        Accept: "application/json",
+      },
+    }
+  );
+
+  return response.data;
+};
diff --git a/client/src/shared/hooks/useCamera.ts b/client/src/shared/hooks/useCamera.ts
index ac862d0..1a78eed 100644
--- a/client/src/shared/hooks/useCamera.ts
+++ b/client/src/shared/hooks/useCamera.ts
@@ -1,11 +1,11 @@
 import { useState, useRef, useEffect } from "react";
 import { CameraType, useCameraPermissions, CameraView } from "expo-camera";
-import { CameraCapturedPicture } from "expo-camera/src/Camera.types";
-
+import { useCameraStore } from "../stores/camera.store";
 export const useCamera = () => {
   const [permission, requestPermission] = useCameraPermissions();
   const [facing, setFacing] = useState<CameraType>("back");
-  const [photo, setPhoto] = useState<CameraCapturedPicture | null>(null);
+
+  const { setPhoto: setStorePhoto } = useCameraStore();
 
   const ref = useRef<CameraView>(null);
 
@@ -16,8 +16,10 @@ export const useCamera = () => {
   const takePhoto = async () => {
     if (ref.current) {
       const result = await ref.current.takePictureAsync();
-      setPhoto(result);
-      return result;
+      if (result) {
+        setStorePhoto(result);
+        return result;
+      }
     }
   };
 
@@ -28,6 +30,5 @@ export const useCamera = () => {
     facing,
     toggleFacing,
     takePhoto,
-    photo,
   };
 };
diff --git a/client/src/shared/stores/camera.store.ts b/client/src/shared/stores/camera.store.ts
new file mode 100644
index 0000000..1a6c26b
--- /dev/null
+++ b/client/src/shared/stores/camera.store.ts
@@ -0,0 +1,12 @@
+import { create } from "zustand";
+import type { CameraCapturedPicture } from "expo-camera";
+
+interface CameraState {
+  photo: CameraCapturedPicture | null;
+  setPhoto: (p: CameraCapturedPicture) => void;
+}
+
+export const useCameraStore = create<CameraState>((set) => ({
+  photo: null,
+  setPhoto: (p) => set({ photo: p }),
+}));
diff --git a/client/yarn.lock b/client/yarn.lock
index f32d586..d02c3a6 100644
--- a/client/yarn.lock
+++ b/client/yarn.lock
@@ -4433,6 +4433,11 @@ expo-file-system@~18.1.10:
   resolved "https://registry.npmjs.org/expo-file-system/-/expo-file-system-18.1.10.tgz"
   integrity sha512-SyaWg+HitScLuyEeSG9gMSDT0hIxbM9jiZjSBP9l9zMnwZjmQwsusE6+7qGiddxJzdOhTP4YGUfvEzeeS0YL3Q==
 
+expo-file-system@~18.1.11:
+  version "18.1.11"
+  resolved "https://registry.yarnpkg.com/expo-file-system/-/expo-file-system-18.1.11.tgz#a563c715c4bb5c18729d6d104e8c6cdfbd383e69"
+  integrity sha512-HJw/m0nVOKeqeRjPjGdvm+zBi5/NxcdPf8M8P3G2JFvH5Z8vBWqVDic2O58jnT1OFEy0XXzoH9UqFu7cHg9DTQ==
+
 expo-font@~13.3.1:
   version "13.3.1"
   resolved "https://registry.npmjs.org/expo-font/-/expo-font-13.3.1.tgz"