first commit

.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

.idea/.gitignore

@@ -0,0 +1,3 @@
+# Default ignored files
+/shelf/
+/workspace.xml

.idea/WirelessPhoneMouse.iml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<module type="JAVA_MODULE" version="4">
+  <component name="NewModuleRootManager" inherit-compiler-output="true">
+    <exclude-output />
+    <content url="file://$MODULE_DIR$" />
+    <orderEntry type="inheritedJdk" />
+    <orderEntry type="sourceFolder" forTests="false" />
+  </component>
+</module>

.idea/modules.xml

@@ -0,0 +1,8 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="ProjectModuleManager">
+    <modules>
+      <module fileurl="file://$PROJECT_DIR$/.idea/WirelessPhoneMouse.iml" filepath="$PROJECT_DIR$/.idea/WirelessPhoneMouse.iml" />
+    </modules>
+  </component>
+</project>

.idea/vcs.xml

@@ -0,0 +1,6 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<project version="4">
+  <component name="VcsDirectoryMappings">
+    <mapping directory="" vcs="Git" />
+  </component>
+</project>

App.js

@@ -0,0 +1,188 @@
+import React, { useState, useEffect } from 'react';
+import { StatusBar } from 'expo-status-bar';
+import { Appearance, Text, View, TouchableOpacity, Image, TextInput, Alert } from 'react-native';
+import ToggleSwitch from 'toggle-switch-react-native'
+import getStyles from './css/styles.js';
+import { lightTheme, darkTheme } from './css/themes';
+
+// import TcpSocket from 'react-native-tcp-socket'; // Import the TcpSocket library
+// import net from 'net';
+import TcpSocket from 'react-native-tcp-socket';
+
+// import * as WebSocket from 'ws'; // Import the ws library
+
+export default function App() {
+
+  const [currentTheme, setCurrentTheme] = useState(Appearance.getColorScheme());
+  const [toggleSwitchState, setToggleSwitchState] = useState(false);
+  const [portNumber, setPortNumber] = useState("");
+  const [ipAddress, setIpAddress] = useState('');
+  // const [webSocketServer, setWebSocketServer] = useState(null);
+  // const [webSocket, setWebSocket] = useState(null);
+
+  // useEffect(() => {
+  //   NetInfo.fetch().then((state) => {
+  //     setIpAddress(state.details.ipAddress);
+  //   });
+  // }, []);
+
+  useEffect(() => {
+    const subscription = Appearance.addChangeListener(({ colorScheme }) => {
+      setCurrentTheme(colorScheme);
+    });
+    return () => {
+      subscription.remove();
+    };
+  }, []);
+
+  const toggleTheme = (isOn) => {
+    const newTheme = currentTheme === 'dark' ? 'light' : 'dark';
+    setCurrentTheme(newTheme);
+    setToggleSwitchState(isOn);
+  };
+
+  const theme = currentTheme === 'dark' ?  lightTheme : darkTheme;
+  const styles = getStyles(theme);
+
+  // const handleStart = () => {
+  //   if (portNumber === '') {
+  //     Alert.alert(
+  //       'Validation Error',
+  //       'Please enter a port number before starting the connection.',
+  //       [{ text: 'OK', style: 'cancel' }],
+  //       { cancelable: true }
+  //     );
+  //     return;
+  //   }
+  
+  //   try {
+  //     console.log("device ip= ", ipAddress)
+  //     const client = TcpSocket.createConnection({
+  //       host: ipAddress, // Replace with the IP address of your server
+  //       port: parseInt(portNumber),
+  //     });
+  
+  //     client.on('connect', () => {
+  //       console.log('Connected to server');
+  //       // You can send data or perform other actions here
+  //     });
+  
+  //     client.on('error', (error) => {
+  //       console.error('Socket error:', error);
+  //       // Handle socket errors here
+  //     });
+  
+  //     client.on('close', () => {
+  //       console.log('Socket connection closed');
+  //       // Handle socket connection close here
+  //     });
+  //   } catch (error) {
+  //     console.error('Failed to create socket:', error);
+  //     Alert.alert(
+  //       'Socket Connection Error',
+  //       'An error occurred while creating the socket connection, try changing the port',
+  //       [{ text: 'OK', style: 'cancel' }],
+  //       { cancelable: true }
+  //     );
+  //     return;
+  //   }
+  // };
+
+  const handleStart = () => {
+    if (portNumber === '') {
+      Alert.alert(
+        'Validation Error',
+        'Please enter a port number before starting the server.',
+        [{ text: 'OK', style: 'cancel' }],
+        { cancelable: true }
+      );
+      return;
+    }
+  
+    try {
+      const server = net.createServer(socket => {
+        console.log('Client connected to server');
+  
+        socket.on('data', data => {
+          // Handle incoming data from clients
+          console.log('Received:', data.toString());
+        });
+  
+        socket.on('end', () => {
+          console.log('Client disconnected');
+        });
+      });
+  
+      server.listen(portNumber, () => {
+        console.log('TCP server started on port:', portNumber);
+      });
+  
+      server.on('error', error => {
+        console.error('Server error:', error);
+        Alert.alert(
+          'Server Error',
+          'An error occurred while starting the server, try changing the port',
+          [{ text: 'OK', style: 'cancel' }],
+          { cancelable: true }
+        );
+      });
+    } catch (error) {
+      console.error('Failed to create server:', error);
+      Alert.alert(
+        'Server Creation Error',
+        'An error occurred while creating the server, try changing the port',
+        [{ text: 'OK', style: 'cancel' }],
+        { cancelable: true }
+      );
+    }
+  };
+  
+
+
+
+  return (
+    <View style={styles.container}>
+      <View style={styles.header}>
+        <Text style={styles.title}>Phone Mouse</Text>
+      </View>
+      <View style={[styles.content, { backgroundColor: theme.backgroundColor }]}>
+        <View style={styles.iconToggleContainer}>
+          {currentTheme === 'light' ? (
+            <Image source={require('./assets/sun-solid.png')} style={{ width: 16, height: 16, marginRight: 2 }} />
+            ) : (
+            <Image source={require('./assets/sun-solid-dark.png')} style={{ width: 16, height: 16, marginRight: 2 }} />
+          )}
+          <ToggleSwitch
+            style={styles.toggleSwitch}
+            isOn={toggleSwitchState}
+            onColor="black"
+            offColor="grey"
+            size="small"
+            onToggle={toggleTheme}
+          />
+        </View>
+        <StatusBar style="auto" />
+      </View>
+        <Text style={styles.text}>Enter Port Number</Text>
+        <TextInput
+          style={styles.portInput}
+          placeholder="Ex: 12345"
+          // placeholderTextColor= {currentTheme.textColor}
+          // placeholderTextColor= "white"
+          placeholderTextColor= {currentTheme === 'dark' ? 'black' : 'white'}
+          keyboardType="numeric"
+          maxLength={5}
+          onChangeText={text => {
+            if (/^\d*$/.test(text)) { // Only allow numeric characters
+              setPortNumber(text);
+            }
+          }}
+          value={portNumber}
+        />
+        <TouchableOpacity style={styles.button} onPress={handleStart}>
+          <Text style={styles.buttonText}>Start</Text>
+        </TouchableOpacity>
+        <Text style={styles.author}>By Kinou</Text>
+    </View>
+  );
+}

app.json

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

babel.config.js

@@ -0,0 +1,6 @@
+module.exports = function(api) {
+  api.cache(true);
+  return {
+    presets: ['babel-preset-expo'],
+  };
+};

css/styles.js

@@ -0,0 +1,90 @@
+import { StyleSheet, Dimensions } from 'react-native';
+
+const windowHeight = Dimensions.get('window').height;
+const windowWidht = Dimensions.get('window').width;
+
+const getStyles = (theme) =>
+  StyleSheet.create({
+
+    container: {
+    	flex: 1,
+    	backgroundColor: theme.backgroundColor,
+    	alignItems: 'center',
+    	justifyContent: 'flex-start',
+    	paddingTop: 0,
+    },
+
+	toggleSwitch: {
+		// width: 10, // Adjust width as needed
+		// height: 10, // Adjust height as needed
+	},
+
+	iconToggleContainer: {
+		flexDirection: 'row', // Arrange items horizontally
+		alignItems: 'center', // Center items vertically
+		justifyContent: 'center', // Center items horizontally
+		// position: 'absolute',
+		marginTop: 20, // Add some space between the header and icon/toggle
+		// bottom: 10,
+		left: 180,
+	},
+
+	header: {
+		backgroundColor: '#8a2be2', // Violet background color
+		paddingTop: 20, // Add some top padding for spacing
+		width: '100%', // Take full width
+	},
+
+    title: {
+    	fontSize: 50,
+    	fontWeight: 'bold',
+    	marginBottom: 20,
+    	textAlign: 'center',
+    	color: 'white', // Apply theme text color here
+    },
+
+	text: {
+    	fontSize: 20,
+    	fontWeight: 'bold',
+    	marginTop: 100,
+    	textAlign: 'center',
+		marginTop: windowHeight * 0.25,
+    	color: theme.textColor, // Apply theme text color here
+    },
+
+	portInput: {
+		textAlign: 'center',
+		marginTop: 3,
+		marginBottom: 30,
+		color: theme.textColor,
+		height: 40,
+		borderWidth: 2,            // Ajoute une bordure
+		borderColor: theme.textColor,     // Couleur de la bordure
+		borderRadius: 200,          // Bordure arrondie
+		padding: 10,              // Espace interne pour le texte
+	  },
+
+    button: {
+		width: windowWidht * 0.5,
+    	paddingVertical: 10,
+    	paddingHorizontal: 20,
+    	borderRadius: 200,
+    	backgroundColor: theme.buttonColor,
+    },
+	
+    buttonText: {
+		textAlign: 'center',
+    	fontSize: 50,
+    	color: 'white', // Apply theme text color here
+    },
+
+	author: {
+		fontSize: 20,
+		position: 'absolute',
+		bottom: 10,
+		right: 10,
+		color: theme.textColor,
+	},
+  });
+
+export default getStyles;

css/themes.js

@@ -0,0 +1,16 @@
+// themes.js
+
+export const lightTheme = {
+	backgroundColor: 'white',
+	textColor: 'black',
+	// color: 'black',
+	buttonColor: '#8a2be2',
+  };
+  
+export const darkTheme = {
+	backgroundColor: 'black',
+	textColor: 'white',
+	// color: 'white',
+	buttonColor: '#8a2be2',
+  };
+  

package.json

@@ -0,0 +1,26 @@
+{
+  "name": "wirelessphonemouse",
+  "version": "1.0.0",
+  "main": "node_modules/expo/AppEntry.js",
+  "scripts": {
+    "start": "expo start",
+    "android": "expo start --android",
+    "ios": "expo start --ios",
+    "web": "expo start --web"
+  },
+  "dependencies": {
+    "@react-native-community/netinfo": "^9.4.1",
+    "expo": "~49.0.7",
+    "expo-status-bar": "~1.6.0",
+    "react": "18.2.0",
+    "react-native": "0.72.3",
+    "react-native-tcp-socket": "^6.0.6",
+    "react-native-vector-icons": "^10.0.0",
+    "toggle-switch-react-native": "^3.3.0",
+    "ws": "^8.13.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0"
+  },
+  "private": true
+}