move reconnect btn & show name input in game

Author: AmyrAhmady

src-tauri/src/constants.rs

@@ -1,4 +1,4 @@
-// pub const IPC_PORT: u16 = 45791;
+pub const IPC_PORT: u16 = 45791;
 
 pub const MAX_HOSTNAME_LENGTH: u32 = 63;
 pub const MAX_GAMEMODE_LENGTH: u32 = 39;

src/components/FeatureDisabledOverlay.tsx

@@ -30,7 +30,7 @@ const FeatureDisabledOverlay = (props: IProps) => {
     >
       <Text
         semibold
-        size={3}
+        size={2}
         numberOfLines={2}
         style={{ textAlign: "center" }}
         color={theme.textPrimary}

src/containers/JoinServerPrompt/index.tsx

@@ -431,7 +431,7 @@ const styles = StyleSheet.create({
     flex: 1,
   },
   overlay: {
-    top: sc(5),
+    top: sc(80),
     bottom: sc(20),
   },
   closeButtonBigView: {

src/containers/NavBar.tsx

@@ -1,11 +1,8 @@
-import { invoke } from "@tauri-apps/api";
 import { memo, useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next"; // ✅ use this instead
-import { StyleSheet, TextInput, TouchableOpacity, View } from "react-native";
+import { StyleSheet, TextInput, View } from "react-native";
 import Icon from "../components/Icon";
 import TabBar from "../components/TabBar";
-import Text from "../components/Text";
-import { IN_GAME, IN_GAME_PROCESS_ID } from "../constants/app";
 import { images } from "../constants/images";
 import { useGenericTempState } from "../states/genericStates";
 import { useSettings } from "../states/settings";
@@ -47,14 +44,6 @@ const NavBar = memo(() => {
 
   const dynamicStyles = useMemo(
     () => ({
-      reconnectButton: [
-        styles.reconnectContainer,
-        {
-          backgroundColor: theme.primary,
-          // @ts-ignore
-          filter: `drop-shadow(0 0 20px ${theme.primary}44)`,
-        },
-      ],
       nicknameIcon: [
         styles.nicknameIconContainer,
         { backgroundColor: theme.itemBackgroundColor },
@@ -81,13 +70,6 @@ const NavBar = memo(() => {
     [setListType]
   );
 
-  const handleReconnect = useCallback(() => {
-    invoke("send_message_to_game", {
-      id: IN_GAME_PROCESS_ID,
-      message: "reconnect",
-    });
-  }, []);
-
   const handleNicknameChange = useCallback(
     (text: string) => setNickName(text),
     [setNickName]
@@ -96,38 +78,25 @@ const NavBar = memo(() => {
   return (
     <View style={styles.container}>
       <TabBar onChange={handleTabChange} list={tabList} selected={listType} />
-      {IN_GAME ? (
-        <View style={styles.inputs}>
-          <TouchableOpacity
-            onPress={handleReconnect}
-            style={dynamicStyles.reconnectButton}
-          >
-            <Text style={{ fontSize: sc(18) }} color="white" semibold>
-              {t("reconnect")}
-            </Text>
-          </TouchableOpacity>
-        </View>
-      ) : (
-        <View style={styles.inputs}>
-          <View style={styles.nicknameContainer}>
-            <View style={dynamicStyles.nicknameIcon}>
-              <Icon
-                title={t("nickname")}
-                image={images.icons.nickname}
-                size={sc(16)}
-                color={theme.textSecondary}
-              />
-            </View>
-            <TextInput
-              value={nickName}
-              onChangeText={handleNicknameChange}
-              placeholder={`${t("nickname")}...`}
-              placeholderTextColor={theme.textSecondary}
-              style={dynamicStyles.nicknameInput}
+      <View style={styles.inputs}>
+        <View style={styles.nicknameContainer}>
+          <View style={dynamicStyles.nicknameIcon}>
+            <Icon
+              title={t("nickname")}
+              image={images.icons.nickname}
+              size={sc(16)}
+              color={theme.textSecondary}
             />
           </View>
+          <TextInput
+            value={nickName}
+            onChangeText={handleNicknameChange}
+            placeholder={`${t("nickname")}...`}
+            placeholderTextColor={theme.textSecondary}
+            style={dynamicStyles.nicknameInput}
+          />
         </View>
-      )}
+      </View>
     </View>
   );
 });
@@ -166,13 +135,6 @@ const styles = StyleSheet.create({
     alignItems: "center",
     borderRadius: sc(5),
   },
-  reconnectContainer: {
-    height: sc(35),
-    alignItems: "center",
-    justifyContent: "center",
-    paddingHorizontal: sc(20),
-    borderRadius: sc(5),
-  },
 });
 
 NavBar.displayName = "NavBar";

src/containers/WindowTitleBar.tsx

@@ -2,7 +2,13 @@ import { invoke } from "@tauri-apps/api";
 import { appWindow } from "@tauri-apps/api/window";
 import { t } from "i18next";
 import { memo, useCallback, useMemo } from "react";
-import { ColorValue, Pressable, StyleSheet, View } from "react-native";
+import {
+  ColorValue,
+  Pressable,
+  StyleSheet,
+  TouchableOpacity,
+  View,
+} from "react-native";
 import Icon from "../components/Icon";
 import Text from "../components/Text";
 import { IN_GAME, IN_GAME_PROCESS_ID } from "../constants/app";
@@ -167,10 +173,35 @@ const WindowTitleBar = memo(() => {
         alignItems: "center" as const,
         height: "100%",
       },
+      inputs: {
+        height: "100%",
+        flex: 1,
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        marginRight: sc(10),
+      },
+      reconnectButton: {
+        height: sc(35),
+        alignItems: "center",
+        justifyContent: "center",
+        paddingHorizontal: sc(20),
+        borderRadius: sc(5),
+        backgroundColor: theme.primary,
+        // @ts-ignore
+        filter: `drop-shadow(0 0 20px ${theme.primary}44)`,
+      },
     }),
     [theme.itemBackgroundColor]
   );
 
+  const handleReconnect = useCallback(() => {
+    invoke("send_message_to_game", {
+      id: IN_GAME_PROCESS_ID,
+      message: "reconnect",
+    });
+  }, []);
+
   const handleThemeToggle = useCallback(() => {
     setTheme(themeType === "dark" ? "light" : "dark");
   }, [themeType, setTheme]);
@@ -221,12 +252,25 @@ const WindowTitleBar = memo(() => {
           Open Multiplayer
         </Text>
       </View>
-      <div
-        data-tauri-drag-region={!IN_GAME}
-        style={containerStyles.dragRegion}
-      />
+      {!IN_GAME && (
+        <div data-tauri-drag-region style={containerStyles.dragRegion} />
+      )}
       {/* @ts-ignore */}
       <View style={containerStyles.rightSection}>
+        {IN_GAME && (
+          // @ts-ignore
+          <View style={containerStyles.inputs}>
+            <TouchableOpacity
+              onPress={handleReconnect}
+              // @ts-ignore
+              style={containerStyles.reconnectButton}
+            >
+              <Text style={{ fontSize: sc(18) }} color="white" semibold>
+                {t("reconnect")}
+              </Text>
+            </TouchableOpacity>
+          </View>
+        )}
         <CustomWindowTitleBarButtons
           title=""
           iconSize={sc(30)}

src/utils/game.ts

@@ -77,7 +77,11 @@ export const startGame = async (
   if (IN_GAME) {
     invoke("send_message_to_game", {
       id: IN_GAME_PROCESS_ID,
-      message: `connect:${await getIpAddress(server.ip)}:${server.port}`,
+      message: password.length
+        ? `connect:${await getIpAddress(server.ip)}:${
+            server.port
+          }:${nickname}:${password}`
+        : `connect:${await getIpAddress(server.ip)}:${server.port}:${nickname}`,
     });
     return;
   }